Initial commit: Crypto trader application

frontend/node_modules/@mui/system/legacy/cssVars/createCssVarsProvider.js

@@ -0,0 +1,364 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import deepmerge from '@mui/utils/deepmerge';
+import { GlobalStyles } from '@mui/styled-engine';
+import { useTheme as muiUseTheme } from '@mui/private-theming';
+import ThemeProvider from '../ThemeProvider';
+import InitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
+import useCurrentColorScheme from './useCurrentColorScheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
+export default function createCssVarsProvider(options) {
+  var themeId = options.themeId,
+    _options$theme = options.theme,
+    defaultTheme = _options$theme === void 0 ? {} : _options$theme,
+    _options$attribute = options.attribute,
+    defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
+    _options$modeStorageK = options.modeStorageKey,
+    defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
+    _options$colorSchemeS = options.colorSchemeStorageKey,
+    defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
+    _options$defaultMode = options.defaultMode,
+    designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+    designSystemColorScheme = options.defaultColorScheme,
+    _options$disableTrans = options.disableTransitionOnChange,
+    designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
+    resolveTheme = options.resolveTheme,
+    excludeVariablesFromRoot = options.excludeVariablesFromRoot;
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
+    console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
+  }
+  var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    ColorSchemeContext.displayName = 'ColorSchemeContext';
+  }
+  var useColorScheme = function useColorScheme() {
+    var value = React.useContext(ColorSchemeContext);
+    if (!value) {
+      throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `useColorScheme` must be called under <CssVarsProvider />" : _formatMuiErrorMessage(19));
+    }
+    return value;
+  };
+  function CssVarsProvider(props) {
+    var children = props.children,
+      _props$theme = props.theme,
+      themeProp = _props$theme === void 0 ? defaultTheme : _props$theme,
+      _props$modeStorageKey = props.modeStorageKey,
+      modeStorageKey = _props$modeStorageKey === void 0 ? defaultModeStorageKey : _props$modeStorageKey,
+      _props$colorSchemeSto = props.colorSchemeStorageKey,
+      colorSchemeStorageKey = _props$colorSchemeSto === void 0 ? defaultColorSchemeStorageKey : _props$colorSchemeSto,
+      _props$attribute = props.attribute,
+      attribute = _props$attribute === void 0 ? defaultAttribute : _props$attribute,
+      _props$defaultMode = props.defaultMode,
+      defaultMode = _props$defaultMode === void 0 ? designSystemMode : _props$defaultMode,
+      _props$defaultColorSc = props.defaultColorScheme,
+      defaultColorScheme = _props$defaultColorSc === void 0 ? designSystemColorScheme : _props$defaultColorSc,
+      _props$disableTransit = props.disableTransitionOnChange,
+      disableTransitionOnChange = _props$disableTransit === void 0 ? designSystemTransitionOnChange : _props$disableTransit,
+      _props$storageWindow = props.storageWindow,
+      storageWindow = _props$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _props$storageWindow,
+      _props$documentNode = props.documentNode,
+      documentNode = _props$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _props$documentNode,
+      _props$colorSchemeNod = props.colorSchemeNode,
+      colorSchemeNode = _props$colorSchemeNod === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _props$colorSchemeNod,
+      _props$colorSchemeSel = props.colorSchemeSelector,
+      colorSchemeSelector = _props$colorSchemeSel === void 0 ? ':root' : _props$colorSchemeSel,
+      _props$disableNestedC = props.disableNestedContext,
+      disableNestedContext = _props$disableNestedC === void 0 ? false : _props$disableNestedC,
+      _props$disableStyleSh = props.disableStyleSheetGeneration,
+      disableStyleSheetGeneration = _props$disableStyleSh === void 0 ? false : _props$disableStyleSh;
+    var hasMounted = React.useRef(false);
+    var upperTheme = muiUseTheme();
+    var ctx = React.useContext(ColorSchemeContext);
+    var nested = !!ctx && !disableNestedContext;
+    var scopedTheme = themeProp[themeId];
+    var _ref = scopedTheme || themeProp,
+      _ref$colorSchemes = _ref.colorSchemes,
+      colorSchemes = _ref$colorSchemes === void 0 ? {} : _ref$colorSchemes,
+      _ref$components = _ref.components,
+      components = _ref$components === void 0 ? {} : _ref$components,
+      _ref$generateCssVars = _ref.generateCssVars,
+      generateCssVars = _ref$generateCssVars === void 0 ? function () {
+        return {
+          vars: {},
+          css: {}
+        };
+      } : _ref$generateCssVars,
+      cssVarPrefix = _ref.cssVarPrefix,
+      restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
+    var allColorSchemes = Object.keys(colorSchemes);
+    var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+
+    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+    var _useCurrentColorSchem = useCurrentColorScheme({
+        supportedColorSchemes: allColorSchemes,
+        defaultLightColorScheme: defaultLightColorScheme,
+        defaultDarkColorScheme: defaultDarkColorScheme,
+        modeStorageKey: modeStorageKey,
+        colorSchemeStorageKey: colorSchemeStorageKey,
+        defaultMode: defaultMode,
+        storageWindow: storageWindow
+      }),
+      stateMode = _useCurrentColorSchem.mode,
+      setMode = _useCurrentColorSchem.setMode,
+      systemMode = _useCurrentColorSchem.systemMode,
+      lightColorScheme = _useCurrentColorSchem.lightColorScheme,
+      darkColorScheme = _useCurrentColorSchem.darkColorScheme,
+      stateColorScheme = _useCurrentColorSchem.colorScheme,
+      setColorScheme = _useCurrentColorSchem.setColorScheme;
+    var mode = stateMode;
+    var colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
+    }
+    var calculatedMode = function () {
+      if (mode) {
+        return mode;
+      }
+      // This scope occurs on the server
+      if (defaultMode === 'system') {
+        return designSystemMode;
+      }
+      return defaultMode;
+    }();
+    var calculatedColorScheme = function () {
+      if (!colorScheme) {
+        // This scope occurs on the server
+        if (calculatedMode === 'dark') {
+          return defaultDarkColorScheme;
+        }
+        // use light color scheme, if default mode is 'light' | 'system'
+        return defaultLightColorScheme;
+      }
+      return colorScheme;
+    }();
+
+    // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
+    var _generateCssVars = generateCssVars(),
+      rootCss = _generateCssVars.css,
+      rootVars = _generateCssVars.vars; // 3. Start composing the theme object
+    var theme = _extends({}, restThemeProp, {
+      components: components,
+      colorSchemes: colorSchemes,
+      cssVarPrefix: cssVarPrefix,
+      vars: rootVars,
+      getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
+        return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
+      }
+    });
+
+    // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
+    //    The default color scheme stylesheet is constructed to have the least CSS specificity.
+    //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
+    var defaultColorSchemeStyleSheet = {};
+    var otherColorSchemesStyleSheet = {};
+    Object.entries(colorSchemes).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        scheme = _ref3[1];
+      var _generateCssVars2 = generateCssVars(key),
+        css = _generateCssVars2.css,
+        vars = _generateCssVars2.vars;
+      theme.vars = deepmerge(theme.vars, vars);
+      if (key === calculatedColorScheme) {
+        // 4.1 Merge the selected color scheme to the theme
+        Object.keys(scheme).forEach(function (schemeKey) {
+          if (scheme[schemeKey] && _typeof(scheme[schemeKey]) === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+          } else {
+            theme[schemeKey] = scheme[schemeKey];
+          }
+        });
+        if (theme.palette) {
+          theme.palette.colorScheme = key;
+        }
+      }
+      var resolvedDefaultColorScheme = function () {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
+        return defaultColorScheme.light;
+      }();
+      if (key === resolvedDefaultColorScheme) {
+        if (excludeVariablesFromRoot) {
+          var excludedVariables = {};
+          excludeVariablesFromRoot(cssVarPrefix).forEach(function (cssVar) {
+            excludedVariables[cssVar] = css[cssVar];
+            delete css[cssVar];
+          });
+          defaultColorSchemeStyleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = excludedVariables;
+        }
+        defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
+      } else {
+        otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
+      }
+    });
+    theme.vars = deepmerge(theme.vars, rootVars);
+
+    // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    React.useEffect(function () {
+      if (colorScheme && colorSchemeNode) {
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        colorSchemeNode.setAttribute(attribute, colorScheme);
+      }
+    }, [colorScheme, attribute, colorSchemeNode]);
+
+    // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+    React.useEffect(function () {
+      var timer;
+      if (disableTransitionOnChange && hasMounted.current && documentNode) {
+        var css = documentNode.createElement('style');
+        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
+        documentNode.head.appendChild(css);
+
+        // Force browser repaint
+        (function () {
+          return window.getComputedStyle(documentNode.body);
+        })();
+        timer = setTimeout(function () {
+          documentNode.head.removeChild(css);
+        }, 1);
+      }
+      return function () {
+        clearTimeout(timer);
+      };
+    }, [colorScheme, disableTransitionOnChange, documentNode]);
+    React.useEffect(function () {
+      hasMounted.current = true;
+      return function () {
+        hasMounted.current = false;
+      };
+    }, []);
+    var contextValue = React.useMemo(function () {
+      return {
+        allColorSchemes: allColorSchemes,
+        colorScheme: colorScheme,
+        darkColorScheme: darkColorScheme,
+        lightColorScheme: lightColorScheme,
+        mode: mode,
+        setColorScheme: setColorScheme,
+        setMode: setMode,
+        systemMode: systemMode
+      };
+    }, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
+    var shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    var element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(GlobalStyles, {
+          styles: _defineProperty({}, colorSchemeSelector, rootCss)
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: otherColorSchemesStyleSheet
+        })]
+      }), /*#__PURE__*/_jsx(ThemeProvider, {
+        themeId: scopedTheme ? themeId : undefined,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
+        children: children
+      })]
+    });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
+  }
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The body attribute name to attach colorScheme.
+     */
+    attribute: PropTypes.string,
+    /**
+     * The component tree.
+     */
+    children: PropTypes.node,
+    /**
+     * The node used to attach the color-scheme attribute
+     */
+    colorSchemeNode: PropTypes.any,
+    /**
+     * The CSS selector for attaching the generated custom properties
+     */
+    colorSchemeSelector: PropTypes.string,
+    /**
+     * localStorage key used to store `colorScheme`
+     */
+    colorSchemeStorageKey: PropTypes.string,
+    /**
+     * The initial color scheme used.
+     */
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /**
+     * The initial mode used.
+     */
+    defaultMode: PropTypes.string,
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext: PropTypes.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: PropTypes.bool,
+    /**
+     * Disable CSS transitions when switching between modes or color schemes.
+     */
+    disableTransitionOnChange: PropTypes.bool,
+    /**
+     * The document to attach the attribute to.
+     */
+    documentNode: PropTypes.any,
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    modeStorageKey: PropTypes.string,
+    /**
+     * The window that attaches the 'storage' event listener.
+     * @default window
+     */
+    storageWindow: PropTypes.any,
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: PropTypes.object
+  } : void 0;
+  var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
+  var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
+  var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
+    return InitColorSchemeScript(_extends({
+      attribute: defaultAttribute,
+      colorSchemeStorageKey: defaultColorSchemeStorageKey,
+      defaultMode: designSystemMode,
+      defaultLightColorScheme: defaultLightColorScheme,
+      defaultDarkColorScheme: defaultDarkColorScheme,
+      modeStorageKey: defaultModeStorageKey
+    }, params));
+  };
+  return {
+    CssVarsProvider: CssVarsProvider,
+    useColorScheme: useColorScheme,
+    getInitColorSchemeScript: getInitColorSchemeScript
+  };
+}

frontend/node_modules/@mui/system/legacy/cssVars/createCssVarsTheme.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import prepareCssVars from './prepareCssVars';
+function createCssVarsTheme(theme) {
+  var cssVarPrefix = theme.cssVarPrefix,
+    shouldSkipGeneratingVar = theme.shouldSkipGeneratingVar,
+    otherTheme = _objectWithoutProperties(theme, ["cssVarPrefix", "shouldSkipGeneratingVar"]);
+  return _extends({}, theme, prepareCssVars(otherTheme, {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar: shouldSkipGeneratingVar
+  }));
+}
+export default createCssVarsTheme;

frontend/node_modules/@mui/system/legacy/cssVars/createGetCssVar.js

@@ -0,0 +1,30 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  function appendVar() {
+    for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
+      vars[_key] = arguments[_key];
+    }
+    if (!vars.length) {
+      return '';
+    }
+    var value = vars[0];
+    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))|^(-?(\d*\.)?\d+)$|(\d+ \d+ \d+)/)) {
+      return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(value).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
+    }
+    return ", ".concat(value);
+  }
+
+  // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+  var getCssVar = function getCssVar(field) {
+    for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      fallbacks[_key2 - 1] = arguments[_key2];
+    }
+    return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, fallbacks), ")");
+  };
+  return getCssVar;
+}

frontend/node_modules/@mui/system/legacy/cssVars/cssVarsParser.js

@@ -0,0 +1,140 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
+  var arrayKeys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var temp = obj;
+  keys.forEach(function (k, index) {
+    if (index === keys.length - 1) {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && _typeof(temp) === 'object') {
+        temp[k] = value;
+      }
+    } else if (temp && _typeof(temp) === 'object') {
+      if (!temp[k]) {
+        temp[k] = arrayKeys.includes(k) ? [] : {};
+      }
+      temp = temp[k];
+    }
+  });
+};
+
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
+  function recurse(object) {
+    var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var arrayKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    Object.entries(object).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
+        if (value !== undefined && value !== null) {
+          if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]), Array.isArray(value) ? [].concat(_toConsumableArray(arrayKeys), [key]) : arrayKeys);
+          } else {
+            callback([].concat(_toConsumableArray(parentKeys), [key]), value, arrayKeys);
+          }
+        }
+      }
+    });
+  }
+  recurse(obj);
+};
+var getCssValue = function getCssValue(keys, value) {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
+      return keys.includes(prop);
+    })) {
+      // CSS property that are unitless
+      return value;
+    }
+    var lastKey = keys[keys.length - 1];
+    if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
+      // opacity values are unitless
+      return value;
+    }
+    return "".concat(value, "px");
+  }
+  return value;
+};
+
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
+ *
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ */
+export default function cssVarsParser(theme, options) {
+  var _ref3 = options || {},
+    prefix = _ref3.prefix,
+    shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
+  var css = {};
+  var vars = {};
+  var varsWithDefaults = {};
+  walkObjectDeep(theme, function (keys, value, arrayKeys) {
+    if (typeof value === 'string' || typeof value === 'number') {
+      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
+        // only create css & var if `shouldSkipGeneratingVar` return false
+        var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
+        _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
+        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
+        assignNestedKeys(varsWithDefaults, keys, "var(".concat(cssVar, ", ").concat(value, ")"), arrayKeys);
+      }
+    }
+  }, function (keys) {
+    return keys[0] === 'vars';
+  } // skip 'vars/*' paths
+  );
+  return {
+    css: css,
+    vars: vars,
+    varsWithDefaults: varsWithDefaults
+  };
+}

frontend/node_modules/@mui/system/legacy/cssVars/getInitColorSchemeScript.js

@@ -0,0 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// TODO: remove this file in v6
+import * as React from 'react';
+import InitColorSchemeScript from '../InitColorSchemeScript';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function getInitColorSchemeScript(params) {
+  return /*#__PURE__*/_jsx(InitColorSchemeScript, _extends({}, params));
+}

frontend/node_modules/@mui/system/legacy/cssVars/index.js

@@ -0,0 +1,7 @@
+'use client';
+
+export { default } from './createCssVarsProvider';
+// TODO: remove this export in v6 in favor of InitColorSchemeScript
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default as prepareCssVars } from './prepareCssVars';
+export { default as createCssVarsTheme } from './createCssVarsTheme';

frontend/node_modules/@mui/system/legacy/cssVars/prepareCssVars.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import deepmerge from '@mui/utils/deepmerge';
+import cssVarsParser from './cssVarsParser';
+function prepareCssVars(theme, parserConfig) {
+  // @ts-ignore - ignore components do not exist
+  var _theme$colorSchemes = theme.colorSchemes,
+    colorSchemes = _theme$colorSchemes === void 0 ? {} : _theme$colorSchemes,
+    components = theme.components,
+    _theme$defaultColorSc = theme.defaultColorScheme,
+    defaultColorScheme = _theme$defaultColorSc === void 0 ? 'light' : _theme$defaultColorSc,
+    otherTheme = _objectWithoutProperties(theme, ["colorSchemes", "components", "defaultColorScheme"]);
+  var _cssVarsParser = cssVarsParser(otherTheme, parserConfig),
+    rootVars = _cssVarsParser.vars,
+    rootCss = _cssVarsParser.css,
+    rootVarsWithDefaults = _cssVarsParser.varsWithDefaults;
+  var themeVars = rootVarsWithDefaults;
+  var colorSchemesMap = {};
+  var light = colorSchemes[defaultColorScheme],
+    otherColorSchemes = _objectWithoutProperties(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
+  Object.entries(otherColorSchemes || {}).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      scheme = _ref2[1];
+    var _cssVarsParser2 = cssVarsParser(scheme, parserConfig),
+      vars = _cssVarsParser2.vars,
+      css = _cssVarsParser2.css,
+      varsWithDefaults = _cssVarsParser2.varsWithDefaults;
+    themeVars = deepmerge(themeVars, varsWithDefaults);
+    colorSchemesMap[key] = {
+      css: css,
+      vars: vars
+    };
+  });
+  if (light) {
+    // default color scheme vars should be merged last to set as default
+    var _cssVarsParser3 = cssVarsParser(light, parserConfig),
+      _css = _cssVarsParser3.css,
+      vars = _cssVarsParser3.vars,
+      varsWithDefaults = _cssVarsParser3.varsWithDefaults;
+    themeVars = deepmerge(themeVars, varsWithDefaults);
+    colorSchemesMap[defaultColorScheme] = {
+      css: _css,
+      vars: vars
+    };
+  }
+  var generateCssVars = function generateCssVars(colorScheme) {
+    var _parserConfig$getSele2;
+    if (!colorScheme) {
+      var _parserConfig$getSele;
+      var _css2 = _extends({}, rootCss);
+      return {
+        css: _css2,
+        vars: rootVars,
+        selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, _css2)) || ':root'
+      };
+    }
+    var css = _extends({}, colorSchemesMap[colorScheme].css);
+    return {
+      css: css,
+      vars: colorSchemesMap[colorScheme].vars,
+      selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
+    };
+  };
+  return {
+    vars: themeVars,
+    generateCssVars: generateCssVars
+  };
+}
+export default prepareCssVars;

frontend/node_modules/@mui/system/legacy/cssVars/useCurrentColorScheme.js

@@ -0,0 +1,237 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
+export function getSystemMode(mode) {
+  if (typeof window !== 'undefined' && mode === 'system') {
+    var mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      return 'dark';
+    }
+    return 'light';
+  }
+  return undefined;
+}
+function processState(state, callback) {
+  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
+    return callback('light');
+  }
+  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
+    return callback('dark');
+  }
+  return undefined;
+}
+export function getColorScheme(state) {
+  return processState(state, function (mode) {
+    if (mode === 'light') {
+      return state.lightColorScheme;
+    }
+    if (mode === 'dark') {
+      return state.darkColorScheme;
+    }
+    return undefined;
+  });
+}
+function initializeValue(key, defaultValue) {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  var value;
+  try {
+    value = localStorage.getItem(key) || undefined;
+    if (!value) {
+      // the first time that user enters the site.
+      localStorage.setItem(key, defaultValue);
+    }
+  } catch (e) {
+    // Unsupported
+  }
+  return value || defaultValue;
+}
+export default function useCurrentColorScheme(options) {
+  var _options$defaultMode = options.defaultMode,
+    defaultMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+    defaultLightColorScheme = options.defaultLightColorScheme,
+    defaultDarkColorScheme = options.defaultDarkColorScheme,
+    _options$supportedCol = options.supportedColorSchemes,
+    supportedColorSchemes = _options$supportedCol === void 0 ? [] : _options$supportedCol,
+    _options$modeStorageK = options.modeStorageKey,
+    modeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
+    _options$colorSchemeS = options.colorSchemeStorageKey,
+    colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
+    _options$storageWindo = options.storageWindow,
+    storageWindow = _options$storageWindo === void 0 ? typeof window === 'undefined' ? undefined : window : _options$storageWindo;
+  var joinedColorSchemes = supportedColorSchemes.join(',');
+  var _React$useState = React.useState(function () {
+      var initialMode = initializeValue(modeStorageKey, defaultMode);
+      var lightColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
+      var darkColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
+      return {
+        mode: initialMode,
+        systemMode: getSystemMode(initialMode),
+        lightColorScheme: lightColorScheme,
+        darkColorScheme: darkColorScheme
+      };
+    }),
+    state = _React$useState[0],
+    setState = _React$useState[1];
+  var colorScheme = getColorScheme(state);
+  var setMode = React.useCallback(function (mode) {
+    setState(function (currentState) {
+      if (mode === currentState.mode) {
+        // do nothing if mode does not change
+        return currentState;
+      }
+      var newMode = mode != null ? mode : defaultMode;
+      try {
+        localStorage.setItem(modeStorageKey, newMode);
+      } catch (e) {
+        // Unsupported
+      }
+      return _extends({}, currentState, {
+        mode: newMode,
+        systemMode: getSystemMode(newMode)
+      });
+    });
+  }, [modeStorageKey, defaultMode]);
+  var setColorScheme = React.useCallback(function (value) {
+    if (!value) {
+      setState(function (currentState) {
+        try {
+          localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
+          localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
+        } catch (e) {
+          // Unsupported
+        }
+        return _extends({}, currentState, {
+          lightColorScheme: defaultLightColorScheme,
+          darkColorScheme: defaultDarkColorScheme
+        });
+      });
+    } else if (typeof value === 'string') {
+      if (value && !joinedColorSchemes.includes(value)) {
+        console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
+      } else {
+        setState(function (currentState) {
+          var newState = _extends({}, currentState);
+          processState(currentState, function (mode) {
+            try {
+              localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
+            } catch (e) {
+              // Unsupported
+            }
+            if (mode === 'light') {
+              newState.lightColorScheme = value;
+            }
+            if (mode === 'dark') {
+              newState.darkColorScheme = value;
+            }
+          });
+          return newState;
+        });
+      }
+    } else {
+      setState(function (currentState) {
+        var newState = _extends({}, currentState);
+        var newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        var newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        if (newLightColorScheme) {
+          if (!joinedColorSchemes.includes(newLightColorScheme)) {
+            console.error("`".concat(newLightColorScheme, "` does not exist in `theme.colorSchemes`."));
+          } else {
+            newState.lightColorScheme = newLightColorScheme;
+            try {
+              localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), newLightColorScheme);
+            } catch (error) {
+              // Unsupported
+            }
+          }
+        }
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error("`".concat(newDarkColorScheme, "` does not exist in `theme.colorSchemes`."));
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
+            try {
+              localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), newDarkColorScheme);
+            } catch (error) {
+              // Unsupported
+            }
+          }
+        }
+        return newState;
+      });
+    }
+  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
+  var handleMediaQuery = React.useCallback(function (event) {
+    if (state.mode === 'system') {
+      setState(function (currentState) {
+        var systemMode = event != null && event.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
+        return _extends({}, currentState, {
+          systemMode: systemMode
+        });
+      });
+    }
+  }, [state.mode]);
+
+  // Ref hack to avoid adding handleMediaQuery as a dep
+  var mediaListener = React.useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  React.useEffect(function () {
+    var handler = function handler() {
+      return mediaListener.current.apply(mediaListener, arguments);
+    };
+
+    // Always listen to System preference
+    var media = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    media.addListener(handler);
+    handler(media);
+    return function () {
+      media.removeListener(handler);
+    };
+  }, []);
+
+  // Handle when localStorage has changed
+  React.useEffect(function () {
+    if (storageWindow) {
+      var handleStorage = function handleStorage(event) {
+        var value = event.newValue;
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
+        }
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
+        }
+      };
+      // For syncing color-scheme changes between iframes
+      storageWindow.addEventListener('storage', handleStorage);
+      return function () {
+        storageWindow.removeEventListener('storage', handleStorage);
+      };
+    }
+    return undefined;
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
+  return _extends({}, state, {
+    colorScheme: colorScheme,
+    setMode: setMode,
+    setColorScheme: setColorScheme
+  });
+}