Merge branch 'master' into zee-armanio-patch-3

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@312e093a1892bd801f026f1090904ee8e460b9b6 # v2.1.34
+        uses: github/codeql-action/init@b2a92eb56d8cb930006a1c6ed86b0782dd8a4297 # v2.1.35
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@312e093a1892bd801f026f1090904ee8e460b9b6 # v2.1.34
+        uses: github/codeql-action/analyze@b2a92eb56d8cb930006a1c6ed86b0782dd8a4297 # v2.1.35

.github/workflows/scorecards.yml

@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@ea25ff07d1d19b19a3bb9fc8a1392902a203f988 # v1.1.34
+        uses: github/codeql-action/upload-sarif@54d8b0da6bba52eaed1c8042082f6560bc02ecb6 # v1.1.35
         with:
           sarif_file: results.sarif

benchmark/package.json

@@ -11,7 +11,7 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@chakra-ui/system": "^2.3.3",
+    "@chakra-ui/system": "^2.3.4",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mdx-js/react": "^2.1.5",

docs/data/base/components/portal/portal.md

@@ -51,7 +51,7 @@ The following demo shows how a `<span>` nested within a Portal can be appended t
 
 ### Server-side
 
-:::warning
+:::error
 React doesn't support the [`createPortal()` API](https://reactjs.org/docs/portals.html) on the server.
 See [this GitHub issue](https://github.com/facebook/react/issues/13097) for details.
 :::

docs/data/base/getting-started/overview/overview.md

@@ -16,8 +16,8 @@ MUI Base includes prebuilt components with production-ready functionality, along
 
 With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme.
 
-:::info
-**Note:** as of today, MUI Base is in alpha.
+:::warning
+MUI Base is currently in alpha.
 
 We're adding new components and features regularly, and you're welcome to contribute!
 

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

@@ -22,7 +22,7 @@ Here's what it will look like in the end:
 {{"demo": "PlayerFinal.js", "hideToolbar": true, "bg": true}}
 
 :::info
-💡 All credits go to the Tailwind Labs team for designing this component, found on the [Tailwind CSS website](https://tailwindcss.com/).
+All credits go to the Tailwind Labs team for designing this component, found on the [Tailwind CSS website](https://tailwindcss.com/).
 :::
 
 ## Setting up the project

docs/data/joy/components/alert/alert.md

@@ -13,7 +13,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
 
 The Alert component can be used to provide important and potentially time-sensitive information in a way that does not interfere with the user's tasks. (Source: [ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).)
 
-:::warning
+:::info
 Alerts should not be confused with alert _dialogs_ ([ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)), which _are_ intended to interrupt the user to obtain a response.
 Use the Joy UI [Modal](https://mui.com/joy-ui/react-modal/) if you need the behavior of a dialog.
 :::
@@ -40,7 +40,7 @@ The Alert component supports Joy UI's four [global variants](/joy-ui/main-featur
 
 {{"demo": "AlertVariants.js"}}
 
-:::success
+:::info
 To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
 Note that you lose the global variants when you add custom variants.
 :::
@@ -51,7 +51,7 @@ The Alert component comes in three sizes: `sm`, `md` (default), and `lg`:
 
 {{"demo": "AlertSizes.js"}}
 
-:::success
+:::info
 To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 

docs/data/joy/components/aspect-ratio/aspect-ratio.md

@@ -38,7 +38,7 @@ The Aspect Ratio component supports Joy UI's four [global variants](/joy-ui/main
 
 {{"demo": "VariantsRatio.js"}}
 
-:::success
+:::info
 To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
 Note that you lose the global variants when you add custom variants.
 :::
@@ -105,7 +105,7 @@ function App() {
 
 ### Mobile carousel
 
-:::info
+:::warning
 In designs like this, make sure to assign a `minWidth` value to prevent the Aspect Ratio component from shrinking.
 :::
 

docs/data/joy/components/autocomplete/autocomplete.md

@@ -74,7 +74,7 @@ The autocomplete component supports the four global variants: `outlined` (defaul
 
 {{"demo": "InputAppearance.js"}}
 
-:::success
+:::info
 To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
 :::
 
@@ -98,7 +98,7 @@ The component has two states that can be controlled:
 2. the "input value" state with the `inputValue`/`onInputChange` props combination. This state represents the value displayed in the textbox.
 
 :::warning
-⚠️ These two states are isolated, they should be controlled independently.
+These two states are isolated, and should be controlled independently.
 :::
 
 {{"demo": "ControllableStates.js"}}
@@ -130,7 +130,7 @@ Use `freeSolo` to create a **search input** with suggestions experience, e.g. Go
 {{"demo": "FreeSolo.js"}}
 
 :::warning
-⚠️ Be careful when using the free solo mode with non-string options, as it may cause type mismatch.
+Be careful when using the free solo mode with non-string options, as it may cause type mismatch.
 
 The value created by typing into the textbox is always a string, regardless of the type of the options.
 :::
@@ -186,7 +186,7 @@ The autocomplete component comes with three sizes out of the box: `sm`, `md` (th
 
 {{"demo": "Sizes.js"}}
 
-:::success
+:::info
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 

docs/data/joy/components/avatar/avatar.md

@@ -59,7 +59,7 @@ The Avatar component supports Joy UI's four [global variants](/joy-ui/main-featu
 
 {{"demo": "AvatarVariants.js"}}
 
-:::success
+:::info
 To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
 Note that you lose the global variants when you add custom variants.
 :::
@@ -70,7 +70,7 @@ The Avatar component comes in three sizes: `sm`, `md` (default), and `lg`:
 
 {{"demo": "AvatarSizes.js"}}
 
-:::success
+:::info
 To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 
@@ -114,7 +114,7 @@ You can reverse the overlapping order by reversing the order of the Avatars and
 
 To render the Avatar Group vertically, add the CSS `writing-mode: vertical-rl` property and rotate the interior element (if one is present) by -90 degrees.
 
-:::info
+:::success
 This approach is preferable because it preserves the overlapping offset between Avatars; the alternative—`flexDirection: column`—does not.
 :::
 

docs/data/joy/components/badge/badge.md

@@ -60,7 +60,7 @@ The Badge component supports Joy UI's four [global variants](/joy-ui/main-featur
 
 {{"demo": "BadgeVariants.js"}}
 
-:::success
+:::info
 To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
 Note that you lose the global variants when you add custom variants.
 :::
@@ -71,7 +71,7 @@ The Badge component comes in three sizes: `sm`, `md` (default), and `lg`:
 
 {{"demo": "BadgeSizes.js"}}
 
-:::success
+:::info
 To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 

docs/data/joy/components/breadcrumbs/breadcrumbs.md

@@ -36,7 +36,7 @@ The Breadcrumbs component comes in three sizes: `sm`, `md` (default), and `lg`:
 
 {{"demo": "BreadcrumbsSizes.js"}}
 
-:::success
+:::info
 To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 

docs/data/joy/components/button/button.md

@@ -37,7 +37,7 @@ Which variant you should choose depends on the relative importance of the button
 
 {{"demo": "ButtonVariants.js"}}
 
-:::success
+:::info
 To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
 :::
 
@@ -54,7 +54,7 @@ The button components comes with three sizes out of the box: `sm`, `md` (the def
 
 {{"demo": "ButtonSizes.js"}}
 
-:::success
+:::info
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 
@@ -99,8 +99,8 @@ import IconButton from '@mui/joy/IconButton';
 
 {{"demo": "IconButtons.js"}}
 
-:::info
-**♿️ Accessibility tip**: Make sure to provide a meaningful [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) to the icon button.
+:::warning
+Make sure to provide a meaningful [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) to the icon button.
 It helps screen readers to properly identify the component.
 
 ```js

docs/data/joy/components/card/card.md

@@ -67,8 +67,8 @@ It uses [`object-fit: cover`](https://developer.mozilla.org/en-US/docs/Web/CSS/o
 
 To create a gradient overlay, frequently seen when a colorful image is used as background, insert an additional `CardCover` component.
 
-:::info
-💡 **Tip:** Make sure to darken the gradient overlay up to have enough contrast between the background image and the text content.
+:::warning
+Make sure to darken the gradient overlay up to have enough contrast between the background image and the text content.
 :::
 
 {{"demo": "GradientCover.js" }}
@@ -87,8 +87,8 @@ The `CardOverflow` will adapt based on its position.
 By default, whenever you have additional action elements such as links and buttons, they stay on top of the whole interactive area.
 In some cases, you might have to manually control each element's `z-index`.
 
-:::info
-💡 **Tip**: use CSS's pseudo-class [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) to style the card when any of its children is focused.
+:::success
+Use the CSS pseudo-class [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) to style the card when any of its children are focused.
 :::
 
 {{"demo": "MultipleInteractionCard.js" }}
@@ -109,8 +109,8 @@ Play around with all the CSS variables available in the slider component to see
 
 You can use those to customize the component on both the `sx` prop and the theme.
 
-:::info
-💡 **Tip**: If you want to adjust a card's padding or border-radius, it's preferable to do it using the variables below instead of using CSS properties directly.
+:::success
+If you want to adjust a card's padding or border-radius, it's preferable to do it using the variables below instead of using CSS properties directly.
 That's because the variables will also be used to calculate a proper radius for the card's children.
 :::
 

docs/data/joy/components/checkbox/checkbox.md

@@ -16,7 +16,7 @@ For toggling between on and off or single option selection, consider using a swi
 
 {{"demo": "CheckboxUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-:::success
+:::info
 To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
 :::
 
@@ -81,7 +81,7 @@ It's common to find it in tables where you have one checkbox that selects every
 Use the `indeterminate` prop to circle around these states.
 
 :::warning
-**⚠️ Keep in mind:** When the indeterminate state is set, the value of the `checked` prop only impacts the form submitted values.
+When the indeterminate state is set, the value of the `checked` prop only impacts the form submitted values.
 It has no accessibility or UX implications.
 :::
 

docs/data/joy/components/chip/chip.md

@@ -16,7 +16,7 @@ The badge component is most frequently used to signal status (online, offline, b
 
 {{"demo": "ChipUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-:::success
+:::info
 To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
 :::
 

docs/data/joy/components/circular-progress/circular-progress.md

@@ -52,7 +52,7 @@ The circular progress component comes with three sizes out of the box: `sm`, `md
 
 {{"demo": "CircularProgressSizes.js"}}
 
-:::success
+:::info
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 

docs/data/joy/components/divider/divider.md

@@ -32,8 +32,8 @@ export default function MyApp() {
 
 Use the `Divider` to wrap elements that will be added to it.
 
-:::info
-♿️ **a11y tip**: When using the `Divider` component for visual decoration, such as in a heading, explicitly specify `role="presentation"` on it to make sure screen readers can announce its content:
+:::warning
+When using the `Divider` component for visual decoration, such as in a heading, explicitly specify `role="presentation"` on it to make sure screen readers can announce its content:
 
 ```js
 <Divider component="div" role="presentation">

docs/data/joy/components/linear-progress/linear-progress.md

@@ -52,7 +52,7 @@ The linear progress component comes with three sizes out of the box: `sm`, `md`
 
 {{"demo": "LinearProgressSizes.js"}}
 
-:::success
+:::info
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 

docs/data/joy/components/list/list.md

@@ -53,7 +53,7 @@ Use the `size` prop to control font-size and general list density.
 
 {{"demo": "SizesList.js"}}
 
-:::success
+:::info
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 
@@ -106,7 +106,7 @@ The nested list inherits the list `size` and a few other CSS variables, such as
 {{"demo": "NestedList.js"}}
 
 :::info
-**Note:** By default, nested lists stick to the left of the root list.
+By default, nested lists stick to the left of the root list.
 To add spacing to the start of the nested list, use `--List-nestedInsetStart: ${value}`:
 
 ```js
@@ -120,7 +120,7 @@ To add spacing to the start of the nested list, use `--List-nestedInsetStart: ${
 To show a list in a horizontal direction, use the `row` prop on the `List` component.
 
 :::warning
-**Note:** Nested lists don't work in the horizontal direction.
+Nested lists don't work in the horizontal direction.
 To do that, create a custom pop-up component instead (see the [Navigation menu](#navigation-menu) example).
 :::
 

docs/data/joy/components/menu/menu.md

@@ -55,7 +55,7 @@ When specifying a size for the `Menu` component, menu items inside of it will in
 
 {{"demo": "SizeMenu.js"}}
 
-:::success
+:::info
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 

docs/data/joy/components/modal/modal.md

@@ -30,7 +30,6 @@ Joy UI provides three modal-related components:
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 :::info
-**Note:**
 The term "modal" is sometimes used interchangeably with "dialog," but this is incorrect.
 
 A modal [blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window), forcing the user to take action.
@@ -60,7 +59,7 @@ Use the `ModalClose` component to render a close button that inherits the modal'
 {{"demo": "BasicModal.js"}}
 
 :::info
-💡 **Quick tip:** The `ModalClose` accepts the variant prop because it uses the same styles as the [`IconButton`](/joy-ui/react-button/#icon-button).
+`ModalClose` accepts the variant prop because it uses the same styles as the [`IconButton`](/joy-ui/react-button/#icon-button).
 :::
 
 ### Close reason
@@ -154,7 +153,6 @@ The modal components can be nested:
 {{"demo": "NestedModals.js"}}
 
 :::warning
-⚠️ **Keep in mind:**
 Though it is possible to create nested modals, stacking more than two at a time is discouraged.
 This is because each successive modal blocks interaction with all elements behind it, making prior states inaccessible and overly complicated for the user to navigate through.
 :::
@@ -216,7 +214,7 @@ See the [WAI-ARIA guide on the Dialog (Modal) pattern](https://www.w3.org/WAI/AR
 
 - Follow the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog.html) to help you set the initial focus on the most relevant element based on the content of the modal.
   :::warning
-  **Keep in mind:** A modal window can sit on top of either the parent application, or another modal window.
+  A modal window can sit on top of either the parent application, or another modal window.
   _All_ windows under the topmost modal are **inert**, meaning the user cannot interact with them.
   This can lead to [conflicting behaviors](#focus-trap).
   :::