worked on GarageApp stuff

node_modules/@mui/system/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,24 @@
+import { DefaultTheme } from '@mui/private-theming';
+export interface ThemeProviderProps<Theme = DefaultTheme> {
+  /**
+   * Your component tree.
+   */
+  children?: React.ReactNode;
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId?: string;
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+
+/**
+ * This component makes the `theme` available down the React tree.
+ * It should preferably be used at **the root of your component tree**.
+ * API:
+ *
+ * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
+ */
+export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;

node_modules/@mui/system/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,106 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _privateTheming = require("@mui/private-theming");
+var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
+var _styledEngine = require("@mui/styled-engine");
+var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
+var _RtlProvider = _interopRequireDefault(require("../RtlProvider"));
+var _DefaultPropsProvider = _interopRequireDefault(require("../DefaultPropsProvider"));
+var _useLayerOrder = _interopRequireDefault(require("./useLayerOrder"));
+var _jsxRuntime = require("react/jsx-runtime");
+const EMPTY_THEME = {};
+function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
+  return React.useMemo(() => {
+    const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+    if (typeof localTheme === 'function') {
+      const mergedTheme = localTheme(resolvedTheme);
+      const result = themeId ? {
+        ...upperTheme,
+        [themeId]: mergedTheme
+      } : mergedTheme;
+      // must return a function for the private theme to NOT merge with the upper theme.
+      // see the test case "use provided theme from a callback" in ThemeProvider.test.js
+      if (isPrivate) {
+        return () => result;
+      }
+      return result;
+    }
+    return themeId ? {
+      ...upperTheme,
+      [themeId]: localTheme
+    } : {
+      ...upperTheme,
+      ...localTheme
+    };
+  }, [themeId, upperTheme, localTheme, isPrivate]);
+}
+
+/**
+ * This component makes the `theme` available down the React tree.
+ * It should preferably be used at **the root of your component tree**.
+ *
+ * <ThemeProvider theme={theme}> // existing use case
+ * <ThemeProvider theme={{ id: theme }}> // theme scoping
+ */
+function ThemeProvider(props) {
+  const {
+    children,
+    theme: localTheme,
+    themeId
+  } = props;
+  const upperTheme = (0, _useThemeWithoutDefault.default)(EMPTY_THEME);
+  const upperPrivateTheme = (0, _privateTheming.useTheme)() || EMPTY_THEME;
+  if (process.env.NODE_ENV !== 'production') {
+    if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
+      console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+    }
+  }
+  const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
+  const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
+  const layerOrder = (0, _useLayerOrder.default)(engineTheme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_privateTheming.ThemeProvider, {
+    theme: privateTheme,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.ThemeContext.Provider, {
+      value: engineTheme,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RtlProvider.default, {
+        value: rtlValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DefaultPropsProvider.default, {
+          value: themeId ? engineTheme[themeId].components : engineTheme.components,
+          children: [layerOrder, children]
+        })
+      })
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Your component tree.
+   */
+  children: _propTypes.default.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]).isRequired,
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId: _propTypes.default.string
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = (0, _exactProp.default)(ThemeProvider.propTypes) : void 0;
+}
+var _default = exports.default = ThemeProvider;

node_modules/@mui/system/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ThemeProvider.js";
+export * from "./ThemeProvider.js";

node_modules/@mui/system/ThemeProvider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
+var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));

node_modules/@mui/system/ThemeProvider/useLayerOrder.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */
+export default function useLayerOrder(theme: {
+  modularCssLayers?: boolean | string;
+}): React.JSX.Element | null;

node_modules/@mui/system/ThemeProvider/useLayerOrder.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLayerOrder;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
+var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */function useLayerOrder(theme) {
+  const upperTheme = (0, _useThemeWithoutDefault.default)();
+  const id = (0, _useId.default)() || '';
+  const {
+    modularCssLayers
+  } = theme;
+  let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+  if (!modularCssLayers || upperTheme !== null) {
+    // skip this hook if upper theme exists.
+    layerOrder = '';
+  } else if (typeof modularCssLayers === 'string') {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = `@layer ${layerOrder};`;
+  }
+  (0, _useEnhancedEffect.default)(() => {
+    const head = document.querySelector('head');
+    if (!head) {
+      return;
+    }
+    const firstChild = head.firstChild;
+    if (layerOrder) {
+      // Only insert if first child doesn't have data-mui-layer-order attribute
+      if (firstChild && firstChild.hasAttribute?.('data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+        return;
+      }
+      const styleElement = document.createElement('style');
+      styleElement.setAttribute('data-mui-layer-order', id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      head.querySelector(`style[data-mui-layer-order="${id}"]`)?.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
+    styles: layerOrder
+  });
+}