mui · mnajdova · May 3, 2022 · May 3, 2022 · May 3, 2022 · May 3, 2022
diff --git a/docs/pages/material-ui/api/accordion-summary.json b/docs/pages/material-ui/api/accordion-summary.json
@@ -3,13 +3,7 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "expandIcon": { "type": { "name": "node" } },
-    "focusVisibleClassName": { "type": { "name": "string" } },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    }
+    "focusVisibleClassName": { "type": { "name": "string" } }
   },
   "name": "AccordionSummary",
   "styles": {

diff --git a/docs/pages/material-ui/api/bottom-navigation-action.json b/docs/pages/material-ui/api/bottom-navigation-action.json
@@ -5,12 +5,6 @@
     "icon": { "type": { "name": "node" } },
     "label": { "type": { "name": "node" } },
     "showLabel": { "type": { "name": "bool" } },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    },
     "value": { "type": { "name": "any" } }
   },
   "name": "BottomNavigationAction",

diff --git a/docs/pages/material-ui/api/button.json b/docs/pages/material-ui/api/button.json
@@ -25,12 +25,6 @@
       "default": "'medium'"
     },
     "startIcon": { "type": { "name": "node" } },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    },
     "variant": {
       "type": {
         "name": "union",

diff --git a/docs/pages/material-ui/api/card-action-area.json b/docs/pages/material-ui/api/card-action-area.json
@@ -1,13 +1,7 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    }
+    "classes": { "type": { "name": "object" } }
   },
   "name": "CardActionArea",
   "styles": {

diff --git a/docs/pages/material-ui/api/fab.json b/docs/pages/material-ui/api/fab.json
@@ -21,12 +21,6 @@
       },
       "default": "'large'"
     },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    },
     "variant": {
       "type": {
         "name": "union",

diff --git a/docs/pages/material-ui/api/icon-button.json b/docs/pages/material-ui/api/icon-button.json
@@ -25,12 +25,6 @@
         "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
-    },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
     }
   },
   "name": "IconButton",

diff --git a/docs/pages/material-ui/api/list-item-button.json b/docs/pages/material-ui/api/list-item-button.json
@@ -13,13 +13,7 @@
     "disableGutters": { "type": { "name": "bool" } },
     "divider": { "type": { "name": "bool" } },
     "focusVisibleClassName": { "type": { "name": "string" } },
-    "selected": { "type": { "name": "bool" } },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    }
+    "selected": { "type": { "name": "bool" } }
   },
   "name": "ListItemButton",
   "styles": {

diff --git a/docs/pages/material-ui/api/list-item.json b/docs/pages/material-ui/api/list-item.json
@@ -49,7 +49,7 @@
     "sx": {
       "type": {
         "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+        "description": "any<br>&#124;&nbsp;Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object<br>&#124;&nbsp;{ __@iterator@91: func, concat: func, entries: func, every: func, filter: func, find: func, findIndex: func, flat: func, flatMap: func, forEach: func, includes: func, indexOf: func, join: func, keys: func, lastIndexOf: func, length: number, map: func, reduce: func, reduceRight: func, slice: func, some: func, toLocaleString: func, toString: func, values: func }"
       }
     }
   },

diff --git a/docs/pages/material-ui/api/loading-button.json b/docs/pages/material-ui/api/loading-button.json
@@ -15,12 +15,6 @@
       },
       "default": "'center'"
     },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    },
     "variant": {
       "type": {
         "name": "union",

diff --git a/docs/pages/material-ui/api/menu-item.json b/docs/pages/material-ui/api/menu-item.json
@@ -7,13 +7,7 @@
     "dense": { "type": { "name": "bool" } },
     "disableGutters": { "type": { "name": "bool" } },
     "divider": { "type": { "name": "bool" } },
-    "focusVisibleClassName": { "type": { "name": "string" } },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    }
+    "focusVisibleClassName": { "type": { "name": "string" } }
   },
   "name": "MenuItem",
   "styles": {

diff --git a/docs/pages/material-ui/api/step-button.json b/docs/pages/material-ui/api/step-button.json
@@ -3,13 +3,7 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "icon": { "type": { "name": "node" } },
-    "optional": { "type": { "name": "node" } },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    }
+    "optional": { "type": { "name": "node" } }
   },
   "name": "StepButton",
   "styles": {

diff --git a/docs/pages/material-ui/api/tab.json b/docs/pages/material-ui/api/tab.json
@@ -14,12 +14,6 @@
       "default": "'top'"
     },
     "label": { "type": { "name": "node" } },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
-    },
     "value": { "type": { "name": "any" } },
     "wrapped": { "type": { "name": "bool" } }
   },

diff --git a/docs/pages/material-ui/api/table-sort-label.json b/docs/pages/material-ui/api/table-sort-label.json
@@ -12,7 +12,7 @@
     "sx": {
       "type": {
         "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+        "description": "any<br>&#124;&nbsp;func<br>&#124;&nbsp;object<br>&#124;&nbsp;{ __@iterator@91: func, concat: func, entries: func, every: func, filter: func, find: func, findIndex: func, flat: func, flatMap: func, forEach: func, includes: func, indexOf: func, join: func, keys: func, lastIndexOf: func, length: number, map: func, reduce: func, reduceRight: func, slice: func, some: func, toLocaleString: func, toString: func, values: func }"
       }
     }
   },

diff --git a/docs/pages/material-ui/api/toggle-button.json b/docs/pages/material-ui/api/toggle-button.json
@@ -23,12 +23,6 @@
         "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
-    },
-    "sx": {
-      "type": {
-        "name": "union",
-        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
-      }
     }
   },
   "name": "ToggleButton",

diff --git a/docs/translations/api-docs/accordion-summary/accordion-summary.json b/docs/translations/api-docs/accordion-summary/accordion-summary.json
@@ -4,8 +4,7 @@
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "expandIcon": "The icon to display as the expand indicator.",
-    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
+    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

diff --git a/docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json b/docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json
@@ -6,7 +6,6 @@
     "icon": "The icon to display.",
     "label": "The label element.",
     "showLabel": "If <code>true</code>, the <code>BottomNavigationAction</code> will show its label. By default, only the selected <code>BottomNavigationAction</code> inside <code>BottomNavigation</code> will show its label.<br>The prop defaults to the value (<code>false</code>) inherited from the parent BottomNavigation component.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "value": "You can provide your own value. Otherwise, we fallback to the child position index."
   },
   "classDescriptions": {

diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json
@@ -14,7 +14,6 @@
     "href": "The URL to link to when the button is clicked. If defined, an <code>a</code> element will be used as the root node.",
     "size": "The size of the component. <code>small</code> is equivalent to the dense button styling.",
     "startIcon": "Element placed before the children.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "variant": "The variant to use."
   },
   "classDescriptions": {

diff --git a/docs/translations/api-docs/card-action-area/card-action-area.json b/docs/translations/api-docs/card-action-area/card-action-area.json
@@ -2,8 +2,7 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

diff --git a/docs/translations/api-docs/fab/fab.json b/docs/translations/api-docs/fab/fab.json
@@ -10,7 +10,6 @@
     "disableRipple": "If <code>true</code>, the ripple effect is disabled.",
     "href": "The URL to link to when the button is clicked. If defined, an <code>a</code> element will be used as the root node.",
     "size": "The size of the component. <code>small</code> is equivalent to the dense button styling.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "variant": "The variant to use."
   },
   "classDescriptions": {

diff --git a/docs/translations/api-docs/icon-button/icon-button.json b/docs/translations/api-docs/icon-button/icon-button.json
@@ -8,8 +8,7 @@
     "disableFocusRipple": "If <code>true</code>, the  keyboard focus ripple is disabled.",
     "disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class.",
     "edge": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).",
-    "size": "The size of the component. <code>small</code> is equivalent to the dense button styling.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
+    "size": "The size of the component. <code>small</code> is equivalent to the dense button styling."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

diff --git a/docs/translations/api-docs/list-item-button/list-item-button.json b/docs/translations/api-docs/list-item-button/list-item-button.json
@@ -11,8 +11,7 @@
     "disableGutters": "If <code>true</code>, the left and right padding is removed.",
     "divider": "If <code>true</code>, a 1px light border is added to the bottom of the list item.",
     "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
-    "selected": "Use to apply selected styling.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
+    "selected": "Use to apply selected styling."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json
@@ -7,7 +7,6 @@
     "loading": "If <code>true</code>, the loading indicator is shown.",
     "loadingIndicator": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself.",
     "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "variant": "The variant to use."
   },
   "classDescriptions": {

diff --git a/docs/translations/api-docs/menu-item/menu-item.json b/docs/translations/api-docs/menu-item/menu-item.json
@@ -8,8 +8,7 @@
     "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent Menu component.",
     "disableGutters": "If <code>true</code>, the left and right padding is removed.",
     "divider": "If <code>true</code>, a 1px light border is added to the bottom of the menu item.",
-    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
+    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

diff --git a/docs/translations/api-docs/step-button/step-button.json b/docs/translations/api-docs/step-button/step-button.json
@@ -4,8 +4,7 @@
     "children": "Can be a <code>StepLabel</code> or a node to place inside <code>StepLabel</code> as children.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "icon": "The icon displayed by the step label.",
-    "optional": "The optional node to display.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
+    "optional": "The optional node to display."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

diff --git a/docs/translations/api-docs/tab/tab.json b/docs/translations/api-docs/tab/tab.json
@@ -9,7 +9,6 @@
     "icon": "The icon to display.",
     "iconPosition": "The position of the icon relative to the label.",
     "label": "The label element.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "value": "You can provide your own value. Otherwise, we fallback to the child position index.",
     "wrapped": "Tab labels appear in a single row. They can use a second line if needed."
   },

diff --git a/docs/translations/api-docs/toggle-button/toggle-button.json b/docs/translations/api-docs/toggle-button/toggle-button.json
@@ -12,7 +12,6 @@
     "onClick": "Callback fired when the button is clicked.<br><br><strong>Signature:</strong><br><code>function(event: React.MouseEvent&lt;HTMLElement&gt;, value: any) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> of the selected button.",
     "selected": "If <code>true</code>, the button is rendered in an active state.",
     "size": "The size of the component. The prop defaults to the value inherited from the parent ToggleButtonGroup component.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "value": "The value to associate with the button when selected in a ToggleButtonGroup."
   },
   "classDescriptions": {

diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts
@@ -1,7 +1,5 @@
 import { ExtendButton, ExtendButtonTypeMap, ButtonClasses } from '@mui/material/Button';
 import { OverrideProps } from '@mui/material/OverridableComponent';
-import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
 
 export type LoadingButtonTypeMap<
   P = {},
@@ -46,10 +44,6 @@ export type LoadingButtonTypeMap<
      * @default 'center'
      */
     loadingPosition?: 'start' | 'end' | 'center';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }>;

diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js
@@ -254,14 +254,6 @@ LoadingButton.propTypes /* remove-proptypes */ = {
     }
     return null;
   }),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
-    PropTypes.func,
-    PropTypes.object,
-  ]),
   /**
    * The variant to use.
    * @default 'text'

diff --git a/packages/mui-material-next/src/Tab/Tab.d.ts b/packages/mui-material-next/src/Tab/Tab.d.ts
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@mui/material/ButtonBase';
 import { OverrideProps } from '@mui/material/OverridableComponent';
 import { TabClasses } from './tabClasses';
@@ -40,10 +38,6 @@ export type TabTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendButt
      * The label element.
      */
     label?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
      */

diff --git a/packages/mui-material-next/src/Tab/Tab.js b/packages/mui-material-next/src/Tab/Tab.js
@@ -237,14 +237,6 @@ Tab.propTypes /* remove-proptypes */ = {
    * The label element.
    */
   label: PropTypes.node,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
-    PropTypes.func,
-    PropTypes.object,
-  ]),
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.
    */