[material-ui][Box] Remove component from BoxOwnProps (#43384)

docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md

@@ -404,6 +404,31 @@ The components affected by this change are:
 - Switch
 - Tabs
 
+## Breaking changes affecting types
+
+### Box
+
+The `component` prop has been removed from the `BoxOwnProps` as it is already included in the `Box` type.
+This might affect your code if you are using the `styled` function with the `Box` component.
+If this is the case, use a `div` element instead of `Box`:
+
+```diff
+-const StyledBox = styled(Box)`
++const StyledDiv = styled('div')`
+   color: white;
+ `;
+```
+
+This yields the same end result.
+If this doesn't work for you, you can also cast the `styled` returned value to `typeof Box`:
+
+```diff
+ const StyledBox = styled(Box)`
+   color: white;
+-`;
++` as typeof Box;
+```
+
 ## Stabilized APIs
 
 ### CssVarsProvider and extendTheme

docs/src/components/showcase/FolderTreeView.tsx

@@ -129,7 +129,7 @@ interface CustomLabelProps {
 }
 
 function CustomLabel({ color, expandable, children, ...other }: CustomLabelProps) {
-  let Icon;
+  let Icon: null | React.ElementType = null;
   if (expandable) {
     Icon = FolderRounded;
   } else {

packages/mui-system/src/Box/Box.d.ts

@@ -183,11 +183,6 @@ export type SystemProps<Theme extends object = {}> = {
 
 export interface BoxOwnProps<Theme extends object = SystemTheme> extends SystemProps<Theme> {
   children?: React.ReactNode;
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component?: React.ElementType;
   ref?: React.Ref<unknown>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

packages/mui-system/src/Box/Box.spec.tsx

@@ -108,7 +108,7 @@ function TestFillPropCallback() {
 // eslint-disable-next-line material-ui/no-styled-box
 const StyledBox = styled(Box)`
   color: white;
-`;
+` as typeof Box;
 
 function StyledBoxWithSx() {
   return (

packages/mui-system/test/typescript/moduleAugmentation/boxSx.spec.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+// https://github.com/mui/material-ui/issues/34068
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      test1: number;
+      test2: number;
+      test3: number;
+      test4: number;
+      test5: number;
+      test6: number;
+      test7: number;
+      test8: number;
+      test9: number;
+      test10: number;
+      test11: number;
+      test12: number;
+      test13: number;
+      test14: number;
+      test15: number;
+      test16: number;
+      test17: number;
+      test18: number;
+      test19: number;
+      test20: number;
+      test21: number;
+      test22: number;
+      test23: number;
+      test24: number;
+      test25: number;
+      test26: number;
+      test27: number;
+      test28: number;
+      test29: number;
+      test30: number;
+      test31: number;
+      test32: number;
+      test33: number;
+      test34: number;
+      test35: number;
+      test36: number;
+      test37: number;
+      test38: number;
+      test39: number;
+      test40: number;
+      test41: number;
+      test42: number;
+      test43: number;
+      test44: number;
+      test45: number;
+      test46: number;
+      test47: number;
+      test48: number;
+      test49: number;
+      test50: number;
+      test51: number;
+      test52: number;
+      test53: number;
+      test54: number;
+      test55: number;
+      test56: number;
+      test57: number;
+      test58: number;
+      test59: number;
+      test60: number;
+      test61: number;
+      test62: number;
+      test63: number;
+      test64: number;
+      test65: number;
+      test66: number;
+      test67: number;
+      test68: number;
+      test69: number;
+      test70: number;
+      test71: number;
+      test72: number;
+      test73: number;
+      test74: number;
+      test75: number;
+      test76: number;
+      test77: number;
+      test78: number;
+      test79: number;
+      test80: number;
+      test81: number;
+      test82: number;
+      test83: number;
+      test84: number;
+      test85: number;
+      test86: number;
+      test87: number;
+      test88: number;
+      test89: number;
+      test90: number;
+      test91: number;
+      test92: number;
+      test93: number;
+      test94: number;
+      test95: number;
+      test96: number;
+      test97: number;
+      test98: number;
+      test99: number;
+      test100: number;
+      test101: number;
+      test102: number;
+      test103: number;
+      test104: number;
+      test105: number;
+      test106: number;
+      test107: number;
+      test108: number;
+      test109: number;
+      test110: number;
+      test111: number;
+      test112: number;
+      test113: number;
+      test114: number;
+      test115: number;
+      test116: number;
+      test117: number;
+      test118: number;
+      test119: number;
+      test120: number;
+      test121: number;
+      test122: number;
+      test123: number;
+      test124: number;
+      test125: number;
+      test126: number;
+      test127: number;
+      test128: number;
+      test129: number;
+      test130: number;
+      test131: number;
+      test132: number;
+      test133: number;
+      test134: number;
+      test135: number;
+      test136: number;
+      test137: number;
+      test138: number;
+      test139: number;
+    }
+  }
+}
+
+function Test() {
+  return (
+    <div>
+      <Box sx={{ m: 1, p: 1 }} />
+      <Box component="span" sx={{ m: 1, p: 1 }} />
+    </div>
+  );
+}

packages/mui-system/test/typescript/moduleAugmentation/boxSx.tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../../tsconfig",
+  "files": ["boxSx.spec.tsx"]
+}