[blog] Post blog about Chamonix retreat to the website

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md

@@ -302,7 +302,7 @@ Let's add the `Slider` into the `Player` component now:
 
 You should see this:
 
-<img src="/static/base/with-tailwind-css/player-slider.png" alt="Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team" style="width: 745px; margin-top: 8px; margin-bottom: 8px;" />
+<img src="/static/base/with-tailwind-css/player-slider.png" alt="Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team" style="margin-top: 8px; margin-bottom: 8px;" width="1490" height="760" />
 
 ### Customize the slider thumb
 
@@ -367,7 +367,7 @@ To finish this guide off, let's see how you can add custom styles based on a com
 
 This is what it'll look like:
 
-<img src="/static/base/with-tailwind-css/player-buttons.png" alt="Screenshot of a button used as example in the guide, designed by the Tailwind Labs team" style="width: 745px; margin-top: 8px; margin-bottom: 8px;" />
+<img src="/static/base/with-tailwind-css/player-buttons.png" alt="Screenshot of a button used as example in the guide, designed by the Tailwind Labs team" style="margin-top: 8px; margin-bottom: 8px;" width="1490" height="760" />
 
 Create a `Button.tsx` file and copy the following code:
 

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md

@@ -302,7 +302,7 @@ Let's add the `Slider` into the `Player` component now:
 
 You should see this:
 
-<img src="/static/base/with-tailwind-css/player-slider.png" alt="Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team" style="width: 745px; margin-top: 8px; margin-bottom: 8px;" />
+<img src="/static/base/with-tailwind-css/player-slider.png" alt="Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team" style="margin-top: 8px; margin-bottom: 8px;" width="1490" height="760" />
 
 ### Customize the slider thumb
 
@@ -367,7 +367,7 @@ To finish this guide off, let's see how you can add custom styles based on a com
 
 This is what it'll look like:
 
-<img src="/static/base/with-tailwind-css/player-buttons.png" alt="Screenshot of a button used as example in the guide, designed by the Tailwind Labs team" style="width: 745px; margin-top: 8px; margin-bottom: 8px;" />
+<img src="/static/base/with-tailwind-css/player-buttons.png" alt="Screenshot of a button used as example in the guide, designed by the Tailwind Labs team" style="margin-top: 8px; margin-bottom: 8px;" width="1490" height="760" />
 
 Create a `Button.tsx` file and copy the following code:
 

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md

@@ -321,7 +321,7 @@ Let's add the `Slider` into the `Player` component now:
 
 You should see this:
 
-<img src="/static/base/with-tailwind-css/player-slider.png" alt="Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team" style="width: 745px; margin-top: 8px; margin-bottom: 8px;" />
+<img src="/static/base/with-tailwind-css/player-slider.png" alt="Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team" style="margin-top: 8px; margin-bottom: 8px;" width="1490" height="760" />
 
 ### Customize the slider thumb
 
@@ -392,7 +392,7 @@ We'll create a custom Button component that uses the `focusVisible` state from t
 
 This is what it'll look like:
 
-<img src="/static/base/with-tailwind-css/player-buttons.png" alt="Screenshot of a button used as example in the guide, designed by the Tailwind Labs team" style="width: 745px; margin-top: 8px; margin-bottom: 8px;" />
+<img src="/static/base/with-tailwind-css/player-buttons.png" alt="Screenshot of a button used as example in the guide, designed by the Tailwind Labs team" style="margin-top: 8px; margin-bottom: 8px;" width="1490" height="760" />
 
 Create a `Button.tsx` file and copy the following code:
 

docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md

@@ -16,9 +16,9 @@ Indeed, this light-mode "flash" will occur _every_ time you load up the app in t
 
 This can cause eye fatigue in a low-light setting, not to mention a frustrating interruption of the user experience—especially for those who interact with the app when it's in between modes.
 
-The animated screen capture below illustrates this problem as it appears on [mui.com](https://mui.com/):
+The animated screen capture below illustrates this problem as it would appear on [mui.com](https://mui.com/) without a fix:
 
-<img src="https://media.giphy.com/media/9hvxemkpotSiQGzLo8/giphy.gif" style="border-radius: 10px; display: block; width: 400px; margin-inline: auto; margin-bottom: 24px;" alt="The dark-mode flashing problem at mui.com." />
+<img src="https://media.giphy.com/media/9hvxemkpotSiQGzLo8/giphy.gif" style="margin-bottom: 24px; width: 240px;" alt="The dark-mode flashing problem at mui.com." width="480" height="294" />
 
 ## The solution: CSS variables
 

docs/data/material/customization/color/color.md

@@ -12,7 +12,7 @@ The Material Design team has also built an awesome palette configuration tool: [
 This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
 
 <a href="https://m2.material.io/inline-tools/color/" target="_blank" rel="noopener nofollow">
-  <img src="/static/images/color/colorTool.png" alt="Official color tool" style="width: 574px" />
+  <img src="/static/images/color/colorTool.png" alt="Official color tool" style="width: 574px" width=1148" height="610" />
 </a>
 <br />
 <br />

docs/data/material/customization/how-to-customize/how-to-customize.md

@@ -36,7 +36,7 @@ The styles injected into the DOM by Material UI rely on class names that all [fo
 
 In this case, the styles are applied with `.css-ae2u5c-MuiSlider-thumb` but you only really need to target the `.MuiSlider-thumb`, where `Slider` is the component and `thumb` is the slot. Use this class name to write a CSS selector within the `sx` prop (`& .MuiSlider-thumb`), and add your overrides.
 
-<img src="/static/images/customization/dev-tools.png" alt="dev-tools" width="796" style="margin-bottom: 16px;" />
+<img src="/static/images/customization/dev-tools.png" alt="dev-tools" style="margin-bottom: 16px;" width="2400" height="800" />
 
 {{"demo": "DevTools.js"}}
 

docs/data/material/customization/typography/typography.md

@@ -106,10 +106,10 @@ const theme = createTheme({
 The computed font size by the browser follows this mathematical equation:
 
 <div class="only-light-mode">
-  <img alt="font size calculation" style="width: 458px;" src="/static/images/font-size.svg" />
+  <img alt="font size calculation" style="width: 550px;" src="/static/images/font-size.svg" width="436" height="48" />
 </div>
 <div class="only-dark-mode">
-  <img alt="font size calculation" style="width: 458px;" src="/static/images/font-size-dark.svg" />
+  <img alt="font size calculation" style="width: 550px;" src="/static/images/font-size-dark.svg" width="436" height="48" />
 </div>
 
 <!-- https://latex.codecogs.com/svg.latex?\dpi{200}&space;\text{computed}&space;=&space;\text{specification}\cdot\frac{\text{typography.fontSize}}{14}\cdot\frac{\text{html&space;fontsize}}{\text{typography.htmlFontSize}} -->

docs/data/material/getting-started/design-resources/design-resources.md

@@ -2,9 +2,9 @@
 
 <p class="description">Check out these prebuilt UI kits to help you design with Material UI using your favorite tools.</p>
 
-<a href="https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma" style="margin-left: 8px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-figma.svg" alt="figma" /></a>
-<a href="https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-adobe-xd.svg" alt="adobe-xd" /></a>
-<a href="https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" /></a>
+<a href="https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma" style="margin-left: 8px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-figma.svg" alt="figma" width="46" height="68" /></a>
+<a href="https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-adobe-xd.svg" alt="adobe-xd" width="69" height="68" /></a>
+<a href="https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" width="73" height="68" /></a>
 
 ## MUI resources
 

docs/data/material/getting-started/templates/templates.md

@@ -29,4 +29,4 @@ So far we have demos for a dashboard, sign in page, sign up page, blog page, che
 
 Looking for something more? You can find complete templates & themes in the <a href="https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=templates-store">premium template section</a>.
 
-<a href="https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=templates-store"><img src="/static/images/themes-light.jpg" alt="react templates" /></a>
+<a href="https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=templates-store"><img src="/static/images/themes-light.jpg" alt="react templates" width="2278" height="1358" /></a>

docs/data/material/guides/understand-mui-packages/understand-mui-packages.md

@@ -31,7 +31,7 @@ These projects live within two product lines: MUI Core and MUI X.
 
 The following chart illustrates how MUI's packages are related to one another:
 
-<img src="/static/images/packages/mui-packages.png" style="width: 796px; margin-top: 4px; margin-bottom: 8px;" alt="The first half of the image shows @mui/material and @mui/base as component libraries, and @mui/system and styled engines as styling solutions, both under the MUI Core umbrella. The second half shows @mui/x-data-grid and @mui/x-date-pickers as components from MUI X."/>
+<img src="/static/images/packages/mui-packages.png" style="width: 600px; margin-top: 4px; margin-bottom: 8px;" alt="The first half of the image shows @mui/material and @mui/base as component libraries, and @mui/system and styled engines as styling solutions, both under the MUI Core umbrella. The second half shows @mui/x-data-grid and @mui/x-date-pickers as components from MUI X." width="1200" height="600" />
 
 In this article, we'll only cover the MUI Core packages.
 Visit the [MUI X Overview](/x/introduction/) for more information about our collection of advanced components.
@@ -122,4 +122,4 @@ It uses the Emotion adapter (`@mui/styled-engine`) as the default style engine t
 To use MUI System, you must install either Emotion or styled-components, because the respective `styled-engine` package depends on it.
 :::
 
-<img src="/static/images/packages/mui-system.png" style="width: 796px; margin-top: 4px; margin-bottom: 8px;" alt="A diagram showing an arrow going from @mui/system to @mui/styled-engine, with a note that it is the default engine. Then, from @mui/styled-engine a solid arrow points to @emotion/react and @emotion/styled while a dashed arrow points to @mui/styled-engine-sc, which points to styled-components." />
+<img src="/static/images/packages/mui-system.png" style="width: 600px; margin-top: 4px; margin-bottom: 8px;" alt="A diagram showing an arrow going from @mui/system to @mui/styled-engine, with a note that it is the default engine. Then, from @mui/styled-engine a solid arrow points to @emotion/react and @emotion/styled while a dashed arrow points to @mui/styled-engine-sc, which points to styled-components." width="1200" height="600" />

docs/data/system/styled/styled-pt.md

@@ -57,7 +57,7 @@ This example demonstrates how you can use the `styled` API to create custom comp
 
 If you inspect this element with the browser DevTools in development mode, you will notice that the class of the component now ends with the `MyThemeComponent-root`, which comes from the `name` and `slot` options that were provided.
 
-<img src="/static/images/system/styled-options.png" alt="browser DevTools showing the rendered component" width="327" />
+<img src="/static/images/system/styled-options.png" alt="browser DevTools showing the rendered component" width="654" height="258" style="width: 327px" />
 
 In addition to this, the `color`, `sx`, and `variant` props are not propagated to the generated `div` element.
 

docs/data/system/styled/styled-zh.md

@@ -57,7 +57,7 @@ The utility can be used as a replacement for emotion's or styled-components' sty
 
 If you inspect this element with the browser DevTools in development mode, you will notice that the class of the component now ends with the `MyThemeComponent-root`, which comes from the `name` and `slot` options that were provided.
 
-<img src="/static/images/system/styled-options.png" alt="browser DevTools showing the rendered component" width="327" />
+<img src="/static/images/system/styled-options.png" alt="browser DevTools showing the rendered component" width="654" height="258" style="width: 327px" />
 
 In addition to this, the `color`, `sx`, and `variant` props are not propagated to the generated `div` element.
 

docs/data/system/styled/styled.md

@@ -60,7 +60,7 @@ This example demonstrates how you can use the `styled` API to create custom comp
 
 If you inspect this element with the browser DevTools in development mode, you will notice that the class of the component now ends with the `MyThemeComponent-root`, which comes from the `name` and `slot` options that were provided.
 
-<img src="/static/images/system/styled-options.png" alt="browser DevTools showing the rendered component" width="327" />
+<img src="/static/images/system/styled-options.png" alt="browser DevTools showing the rendered component" width="654" height="258" style="width: 327px" />
 
 In addition to this, the `color`, `sx`, and `variant` props are not propagated to the generated `div` element.
 

docs/pages/blog/2023-chamonix-retreat.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './2023-chamonix-retreat.md?@mui/markdown';
+
+export default function Page() {
+  return <TopLayoutBlog docs={docs} />;
+}

docs/pages/blog/2023-chamonix-retreat.md

@@ -0,0 +1,90 @@
+---
+title: MUI's team retreat in Chamonix
+description: The MUI team spent five days in the French Alps team-building, problem-solving, and brainstorming. Read all about it!
+date: 2023-03-16T00:00:00.000Z
+authors: ['mikailaread']
+card: true
+tags: ['Company']
+---
+
+## Why the Chamonix gathering?
+
+Being a distributed team means everyone at MUI works asynchronously.
+
+We celebrate having the freedom to deeply focus on what we're delivering, and being able to fit work around life instead of life around work. 😀
+
+But this way of working can also mean some team members experience very little overlap in their online hours, which can make it more challenging to connect personally or collaborate.
+
+So, what do we do?
+
+MUI is extremely intentional about bridging gaps by bringing our people together every ~8 months (as a minimum).
+
+_Our team retreats are about providing everyone a more tangible opportunity to feel part of the MUI community and to learn more about each other outside of work._
+
+It's a time to focus more on who we are as individuals, which creates a wonderful ripple effect on the ways we work together as a team.
+
+## Where did we go?
+
+Photo of the Heliopic Hotel & Spa exterior, via [Assas Hotels](https://www.assas-hotels.com/en/hotel-heliopic-sweet-spa/).
+
+<img alt="Wooden architecture exterior of the Heliopic Hotel and Spa" src="/static/blog/2023-chamonix-retreat/hotel-exterior.jpeg" style="margin-bottom: 16px;" loading="lazy" width="2154" height="1212" />
+
+Chamonix is a world capital for outdoor activities, such as mountaineering, skiing, snowboarding, paragliding, hiking, climbing, and so much more!
+
+The Chamonix Mont Blanc valley offers unmatched alpine views, plus a whole host of stunning protected flora and fauna.
+With a bustling city center full of quaint shops and restaurants — there's something for everyone to enjoy.
+
+We stayed in the beautiful Helopic Hotel & Spa, which fit our needs perfectly. With fully-equipped conference rooms, a cozy lobby bar, a table-service restaurant, and a luxury spa — everything we needed was on-site. (The food was delicious, too!)
+
+<img alt="A plated apple dessert with three scoops of ice cream." src="/static/blog/2023-chamonix-retreat/dessert.jpeg" loading="lazy" width="4032" height="3024" />
+
+## What did we do?
+
+We kicked off the week with several unique team-building activities, including a mini Winter Olympics, a competitive team biathlon, and even axe-throwing. 🎯🪓
+
+Engaging in new experiences together gave us an opportunity to learn about each other's strengths and weaknesses, and to develop a better understanding of how our differences influence the ways we might communicate and work together.
+
+It also provided room for team members to share past experiences with one another and gain new perspectives.
+
+<img alt="Members of the MUI team standing in a line with their arms extended on each others' shoulders." src="/static/blog/2023-chamonix-retreat/caterpillar-game.jpeg" style="margin-bottom: 16px;" loading="lazy" width="2048" height="1536" />
+
+<img alt="MUI team members cross-country skiing." src="/static/blog/2023-chamonix-retreat/biathlon-skiers.jpeg" style="margin-bottom: 16px;" loading="lazy" width="2048" height="1536" />
+
+<img alt="MUI team members standing in a line shooting air rifles as part of a biathlon competition." src="/static/blog/2023-chamonix-retreat/biathlon-shooters.jpeg" style="margin-bottom: 16px;" loading="lazy" width="2048" height="1536" />
+
+On the work-front, we hosted our monthly team meeting and offered a spread of different topic-based sessions for a "choose your own adventure" feel.
+People could opt into the sessions they felt most passionate or excited about, which really helped to sustain energy and result in fruitful discussions.
+
+Solving challenges and sparking new ideas takes on such a different feel when you're all in the same time and place!
+Our team walked away with a number of actionable changes and commitments for the near and far future.
+
+<img alt="MUI team members sit in a half-U shape as Co-Founder Olivier Tassinari presents the monthly meeting slides." src="/static/blog/2023-chamonix-retreat/monthly-meeting.jpeg" style="margin-bottom: 16px;" loading="lazy" width="4032" height="3024" />
+
+Following our very productive sessions, it was time to relax and refresh ourselves.
+We decided to increase the amount of downtime on our final day together and leave space for serendipitous fun to unfold.
+
+And guess what: _**it worked!**_
+
+One of the most-loved parts of our retreat in team feedback surveys turned out to be a completely unplanned game night.
+Despite tiring return journeys ahead, an exhausted group of us set up camp in the hotel lobby to play cards and board games into the wee hours of the morning.
+Special bonds formed over some very colorful rounds of Saboteur and terribly-executed magic tricks. 🙃🎩
+
+It was just what we needed to close out the retreat with some moments of real connection.
+
+## What's next?
+
+If you can believe it, we're already busy planning our next meet-up. Although we haven't decided on an exact location just yet, the team has agreed this much loud and clear: somewhere warm! ☀️😅
+
+<img alt="Two members of the MUI team and skiing instructor smiling with a mountain vista in the background." src="/static/blog/2023-chamonix-retreat/mountaineers.jpeg" style="margin-bottom: 16px;" loading="lazy" width="4032" height="3024" />
+
+<img alt="MUI team members standing lined-up in the snow with their skigear." src="/static/blog/2023-chamonix-retreat/skiers.jpeg" loading="lazy" width="4096" height="3072" />
+
+## Join the team
+
+MUI is on track to double in size by the end of this year with lots of open roles in engineering, design, and product teams.
+Our target date for the next company retreat is November 2023.
+To have your say in where we go and what we do, join us now.
+
+[Visit our careers page!](/careers/) 🏃💨
+
+<img alt="Members of the MUI team sitting around a large wooden dining table." src="/static/blog/2023-chamonix-retreat/team-dinner.jpeg" loading="lazy" width="4032" height="3024" />

docs/src/modules/components/MarkdownElement.js

@@ -335,6 +335,8 @@ const Root = styled('div')(
     '& img': {
       // Avoid layout jump
       display: 'inline-block',
+      // Avoid very sharp edges
+      borderRadius: 2,
     },
     '& hr': {
       height: 1,