Replace @mui/systems dependency with equivalent code

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/theme/package.json

@@ -34,8 +34,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.12.2",
-    "@mui/system": "^5.13.6"
+    "@mui/material": "^5.12.2"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.12.2",

packages/theme/src/unified/overrides.ts

@@ -17,7 +17,6 @@
 import type { Overrides } from '@material-ui/core/styles/overrides';
 import type { ComponentsProps } from '@material-ui/core/styles/props';
 import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles';
-import { createSpacing } from '@mui/system';
 import { CSSProperties } from 'react';
 
 type V5Override = ComponentsOverrides[Exclude<
@@ -30,6 +29,26 @@ type StaticStyleRules = Record<
   CSSProperties | Record<string, CSSProperties>
 >;
 
+// Utility function based on v5 `createSpacing`: https://github.com/mui/material-ui/blob/master/packages/mui-system/src/createTheme/createSpacing.ts#L42C3-L59C5
+const __v5Spacing =
+  (defaultSpacing: number) =>
+  (...argsInput: ReadonlyArray<number | string>) => {
+    const args = argsInput.length === 0 ? [1] : argsInput;
+    const transform = (argument: string | number, themeSpacing: number) => {
+      if (typeof argument === 'string') {
+        return argument;
+      }
+      return themeSpacing * argument;
+    };
+
+    return args
+      .map(argument => {
+        const output = transform(argument, defaultSpacing);
+        return typeof output === 'number' ? `${output}px` : output;
+      })
+      .join(' ');
+  };
+
 // Converts callback-based overrides to static styles, e.g.
 // { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } }
 function adaptV5CssBaselineOverride(
@@ -61,9 +80,12 @@ function adaptV5Override(
     return Object.fromEntries(
       Object.entries(overrides).map(([className, style]) => {
         if (typeof style === 'function') {
-          // Override potential v4 spacing method: https://mui.com/material-ui/migration/v5-style-changes/#%E2%9C%85-remove-px-suffix
-          // `adaptV4Theme as reference: https://github.com/mui/material-ui/blob/v5.x/packages/mui-material/src/styles/adaptV4Theme.js#L54C41-L54C41
-          theme.spacing = createSpacing(theme.spacing);
+          const defaultSpacing = theme.spacing(1);
+          if (typeof defaultSpacing === 'number') {
+            // Override potential v4 spacing method: https://mui.com/material-ui/migration/v5-style-changes/#%E2%9C%85-remove-px-suffix
+            // `adaptV4Theme as reference: https://github.com/mui/material-ui/blob/v5.x/packages/mui-material/src/styles/adaptV4Theme.js#L54C41-L54C41
+            theme.spacing = __v5Spacing(defaultSpacing);
+          }
           return [className, style({ theme })];
         }
         return [className, style];

yarn.lock

@@ -9973,7 +9973,6 @@ __metadata:
     "@emotion/react": ^11.10.5
     "@emotion/styled": ^11.10.5
     "@mui/material": ^5.12.2
-    "@mui/system": ^5.13.6
     "@types/react": ^16.13.1 || ^17.0.0
   peerDependencies:
     "@material-ui/core": ^4.12.2
@@ -13367,7 +13366,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^5.12.1, @mui/system@npm:^5.13.6":
+"@mui/system@npm:^5.12.1":
   version: 5.13.6
   resolution: "@mui/system@npm:5.13.6"
   dependencies: