@atipicus/mrs-ui 0.8.0 → 0.9.0

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { Global, ThemeContext, keyframes, css } from "@emotion/react";
 import { Box as Box$2, Typography as Typography$2 } from "@mui/material";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
-function formatMuiErrorMessage$2(code, ...args) {
+function formatMuiErrorMessage$1(code, ...args) {
   const url = new URL(`https://mui.com/production-error/?code=${code}`);
   args.forEach((arg2) => url.searchParams.append("args[]", arg2));
   return `Minified MUI error #${code}; visit ${url} for the full message.`;
@@ -90,7 +90,7 @@ var unitlessKeys = {
   strokeOpacity: 1,
   strokeWidth: 1
 };
-function memoize$2(fn2) {
+function memoize$1(fn2) {
   var cache = /* @__PURE__ */ Object.create(null);
   return function(arg2) {
     if (cache[arg2] === void 0) cache[arg2] = fn2(arg2);
@@ -105,7 +105,7 @@ var isCustomProperty = function isCustomProperty2(property) {
 var isProcessableValue = function isProcessableValue2(value) {
   return value != null && typeof value !== "boolean";
 };
-var processStyleName = /* @__PURE__ */ memoize$2(function(styleName) {
+var processStyleName = /* @__PURE__ */ memoize$1(function(styleName) {
   return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
 });
 var processStyleValue = function processStyleValue2(key, value) {
@@ -1417,38 +1417,38 @@ function requireReactIs() {
   return reactIs.exports;
 }
 var reactIsExports = /* @__PURE__ */ requireReactIs();
-function isPlainObject$1(item) {
+function isPlainObject(item) {
   if (typeof item !== "object" || item === null) {
     return false;
   }
   const prototype = Object.getPrototypeOf(item);
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
-function deepClone$1(source) {
-  if (/* @__PURE__ */ React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject$1(source)) {
+function deepClone(source) {
+  if (/* @__PURE__ */ React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
     return source;
   }
   const output = {};
   Object.keys(source).forEach((key) => {
-    output[key] = deepClone$1(source[key]);
+    output[key] = deepClone(source[key]);
   });
   return output;
 }
-function deepmerge$1(target, source, options = {
+function deepmerge(target, source, options = {
   clone: true
 }) {
   const output = options.clone ? {
     ...target
   } : target;
-  if (isPlainObject$1(target) && isPlainObject$1(source)) {
+  if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach((key) => {
       if (/* @__PURE__ */ React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
         output[key] = source[key];
-      } else if (isPlainObject$1(source[key]) && // Avoid prototype pollution
-      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject$1(target[key])) {
-        output[key] = deepmerge$1(target[key], source[key], options);
+      } else if (isPlainObject(source[key]) && // Avoid prototype pollution
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
+        output[key] = deepmerge(target[key], source[key], options);
       } else if (options.clone) {
-        output[key] = isPlainObject$1(source[key]) ? deepClone$1(source[key]) : source[key];
+        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
       } else {
         output[key] = source[key];
       }
@@ -1456,7 +1456,7 @@ function deepmerge$1(target, source, options = {
   }
   return output;
 }
-const sortBreakpointsValues$1 = (values2) => {
+const sortBreakpointsValues = (values2) => {
   const breakpointsAsArray = Object.keys(values2).map((key) => ({
     key,
     val: values2[key]
@@ -1469,7 +1469,7 @@ const sortBreakpointsValues$1 = (values2) => {
     };
   }, {});
 };
-function createBreakpoints$1(breakpoints) {
+function createBreakpoints(breakpoints) {
   const {
     // The breakpoint **start** at this value.
     // For instance with the first breakpoint xs: [xs, sm).
@@ -1489,7 +1489,7 @@ function createBreakpoints$1(breakpoints) {
     step = 5,
     ...other
   } = breakpoints;
-  const sortedValues = sortBreakpointsValues$1(values2);
+  const sortedValues = sortBreakpointsValues(values2);
   const keys = Object.keys(sortedValues);
   function up(key) {
     const value = typeof values2[key] === "number" ? values2[key] : key;
@@ -1531,7 +1531,7 @@ function createBreakpoints$1(breakpoints) {
     ...other
   };
 }
-function sortContainerQueries$1(theme2, css2) {
+function sortContainerQueries(theme2, css2) {
   if (!theme2.containerQueries) {
     return css2;
   }
@@ -1551,15 +1551,15 @@ function sortContainerQueries$1(theme2, css2) {
     ...css2
   });
 }
-function isCqShorthand$1(breakpointKeys, value) {
+function isCqShorthand(breakpointKeys, value) {
   return value === "@" || value.startsWith("@") && (breakpointKeys.some((key) => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
-function getContainerQuery$1(theme2, shorthand) {
+function getContainerQuery(theme2, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== "production") {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage$2(18, `(${shorthand})`));
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage$1(18, `(${shorthand})`));
     }
     return null;
   }
@@ -1567,7 +1567,7 @@ For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage
   const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme2.containerQueries(containerName).up(value);
 }
-function cssContainerQueries$1(themeInput) {
+function cssContainerQueries(themeInput) {
   const toContainerQuery = (mediaQuery, name) => mediaQuery.replace("@media", name ? `@container ${name}` : "@container");
   function attachCq(node2, name) {
     node2.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
@@ -1593,20 +1593,20 @@ function cssContainerQueries$1(themeInput) {
     containerQueries
   };
 }
-const shape$3 = {
+const shape$2 = {
   borderRadius: 4
 };
-const responsivePropType$1 = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
-function merge$1(acc, item) {
+const responsivePropType = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
+function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return deepmerge$1(acc, item, {
+  return deepmerge(acc, item, {
     clone: false
     // No need to clone deep, it's way faster.
   });
 }
-const values$2 = {
+const values$1 = {
   xs: 0,
   // phone
   sm: 600,
@@ -1618,16 +1618,16 @@ const values$2 = {
   xl: 1536
   // large screen
 };
-const defaultBreakpoints$1 = {
+const defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
   keys: ["xs", "sm", "md", "lg", "xl"],
-  up: (key) => `@media (min-width:${values$2[key]}px)`
+  up: (key) => `@media (min-width:${values$1[key]}px)`
 };
-const defaultContainerQueries$1 = {
+const defaultContainerQueries = {
   containerQueries: (containerName) => ({
     up: (key) => {
-      let result = typeof key === "number" ? key : values$2[key] || key;
+      let result = typeof key === "number" ? key : values$1[key] || key;
       if (typeof result === "number") {
         result = `${result}px`;
       }
@@ -1635,24 +1635,24 @@ const defaultContainerQueries$1 = {
     }
   })
 };
-function handleBreakpoints$1(props, propValue, styleFromPropValue) {
+function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme2 = props.theme || {};
   if (Array.isArray(propValue)) {
-    const themeBreakpoints = theme2.breakpoints || defaultBreakpoints$1;
+    const themeBreakpoints = theme2.breakpoints || defaultBreakpoints;
     return propValue.reduce((acc, item, index) => {
       acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
       return acc;
     }, {});
   }
   if (typeof propValue === "object") {
-    const themeBreakpoints = theme2.breakpoints || defaultBreakpoints$1;
+    const themeBreakpoints = theme2.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
-      if (isCqShorthand$1(themeBreakpoints.keys, breakpoint)) {
-        const containerKey = getContainerQuery$1(theme2.containerQueries ? theme2 : defaultContainerQueries$1, breakpoint);
+      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
+        const containerKey = getContainerQuery(theme2.containerQueries ? theme2 : defaultContainerQueries, breakpoint);
         if (containerKey) {
           acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
         }
-      } else if (Object.keys(themeBreakpoints.values || values$2).includes(breakpoint)) {
+      } else if (Object.keys(themeBreakpoints.values || values$1).includes(breakpoint)) {
         const mediaKey = themeBreakpoints.up(breakpoint);
         acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
       } else {
@@ -1665,7 +1665,7 @@ function handleBreakpoints$1(props, propValue, styleFromPropValue) {
   const output = styleFromPropValue(propValue);
   return output;
 }
-function createEmptyBreakpointObject$1(breakpointsInput = {}) {
+function createEmptyBreakpointObject(breakpointsInput = {}) {
   const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
@@ -1673,7 +1673,7 @@ function createEmptyBreakpointObject$1(breakpointsInput = {}) {
   }, {});
   return breakpointsInOrder || {};
 }
-function removeUnusedBreakpoints$1(breakpointKeys, style2) {
+function removeUnusedBreakpoints(breakpointKeys, style2) {
   return breakpointKeys.reduce((acc, key) => {
     const breakpointOutput = acc[key];
     const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
@@ -1684,9 +1684,9 @@ function removeUnusedBreakpoints$1(breakpointKeys, style2) {
   }, style2);
 }
 function mergeBreakpointsInOrder(breakpointsInput, ...styles2) {
-  const emptyBreakpoints = createEmptyBreakpointObject$1(breakpointsInput);
-  const mergedOutput = [emptyBreakpoints, ...styles2].reduce((prev, next) => deepmerge$1(prev, next), {});
-  return removeUnusedBreakpoints$1(Object.keys(emptyBreakpoints), mergedOutput);
+  const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
+  const mergedOutput = [emptyBreakpoints, ...styles2].reduce((prev, next) => deepmerge(prev, next), {});
+  return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
 }
 function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
   if (typeof breakpointValues !== "object") {
@@ -1733,13 +1733,13 @@ function resolveBreakpointValues({
     return acc;
   }, {});
 }
-function capitalize$2(string) {
+function capitalize$1(string) {
   if (typeof string !== "string") {
-    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `capitalize(string)` expects a string argument." : formatMuiErrorMessage$2(7));
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `capitalize(string)` expects a string argument." : formatMuiErrorMessage$1(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-function getPath$1(obj, path, checkVars = true) {
+function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== "string") {
     return null;
   }
@@ -1756,21 +1756,21 @@ function getPath$1(obj, path, checkVars = true) {
     return null;
   }, obj);
 }
-function getStyleValue$2(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+function getStyleValue$1(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
   let value;
   if (typeof themeMapping === "function") {
     value = themeMapping(propValueFinal);
   } else if (Array.isArray(themeMapping)) {
     value = themeMapping[propValueFinal] || userValue;
   } else {
-    value = getPath$1(themeMapping, propValueFinal) || userValue;
+    value = getPath(themeMapping, propValueFinal) || userValue;
   }
   if (transform) {
     value = transform(value, userValue, themeMapping);
   }
   return value;
 }
-function style$4(options) {
+function style$2(options) {
   const {
     prop,
     cssProperty = options.prop,
@@ -1783,11 +1783,11 @@ function style$4(options) {
     }
     const propValue = props[prop];
     const theme2 = props.theme;
-    const themeMapping = getPath$1(theme2, themeKey) || {};
+    const themeMapping = getPath(theme2, themeKey) || {};
     const styleFromPropValue = (propValueFinal) => {
-      let value = getStyleValue$2(themeMapping, transform, propValueFinal);
+      let value = getStyleValue$1(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === "string") {
-        value = getStyleValue$2(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize$2(propValueFinal)}`, propValueFinal);
+        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize$1(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -1796,15 +1796,15 @@ function style$4(options) {
         [cssProperty]: value
       };
     };
-    return handleBreakpoints$1(props, propValue, styleFromPropValue);
+    return handleBreakpoints(props, propValue, styleFromPropValue);
   };
   fn2.propTypes = process.env.NODE_ENV !== "production" ? {
-    [prop]: responsivePropType$1
+    [prop]: responsivePropType
   } : {};
   fn2.filterProps = [prop];
   return fn2;
 }
-function memoize$1(fn2) {
+function memoize(fn2) {
   const cache = {};
   return (arg2) => {
     if (cache[arg2] === void 0) {
@@ -1813,11 +1813,11 @@ function memoize$1(fn2) {
     return cache[arg2];
   };
 }
-const properties$1 = {
+const properties = {
   m: "margin",
   p: "padding"
 };
-const directions$1 = {
+const directions = {
   t: "Top",
   r: "Right",
   b: "Bottom",
@@ -1825,30 +1825,30 @@ const directions$1 = {
   x: ["Left", "Right"],
   y: ["Top", "Bottom"]
 };
-const aliases$1 = {
+const aliases = {
   marginX: "mx",
   marginY: "my",
   paddingX: "px",
   paddingY: "py"
 };
-const getCssProperties$1 = memoize$1((prop) => {
+const getCssProperties = memoize((prop) => {
   if (prop.length > 2) {
-    if (aliases$1[prop]) {
-      prop = aliases$1[prop];
+    if (aliases[prop]) {
+      prop = aliases[prop];
     } else {
       return [prop];
     }
   }
   const [a, b] = prop.split("");
-  const property = properties$1[a];
-  const direction = directions$1[b] || "";
+  const property = properties[a];
+  const direction = directions[b] || "";
   return Array.isArray(direction) ? direction.map((dir) => property + dir) : [property + direction];
 });
-const marginKeys$1 = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"];
-const paddingKeys$1 = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
-const spacingKeys$1 = [...marginKeys$1, ...paddingKeys$1];
-function createUnaryUnit$1(theme2, themeKey, defaultValue, propName) {
-  const themeSpacing = getPath$1(theme2, themeKey, true) ?? defaultValue;
+const marginKeys = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"];
+const paddingKeys = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
+const spacingKeys = [...marginKeys, ...paddingKeys];
+function createUnaryUnit(theme2, themeKey, defaultValue, propName) {
+  const themeSpacing = getPath(theme2, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === "number" || typeof themeSpacing === "string") {
     return (val) => {
       if (typeof val === "string") {
@@ -1896,55 +1896,55 @@ function createUnaryUnit$1(theme2, themeKey, defaultValue, propName) {
   }
   return () => void 0;
 }
-function createUnarySpacing$1(theme2) {
-  return createUnaryUnit$1(theme2, "spacing", 8, "spacing");
+function createUnarySpacing(theme2) {
+  return createUnaryUnit(theme2, "spacing", 8, "spacing");
 }
-function getValue$1(transformer, propValue) {
+function getValue(transformer, propValue) {
   if (typeof propValue === "string" || propValue == null) {
     return propValue;
   }
   return transformer(propValue);
 }
-function getStyleFromPropValue$1(cssProperties, transformer) {
+function getStyleFromPropValue(cssProperties, transformer) {
   return (propValue) => cssProperties.reduce((acc, cssProperty) => {
-    acc[cssProperty] = getValue$1(transformer, propValue);
+    acc[cssProperty] = getValue(transformer, propValue);
     return acc;
   }, {});
 }
-function resolveCssProperty$1(props, keys, prop, transformer) {
+function resolveCssProperty(props, keys, prop, transformer) {
   if (!keys.includes(prop)) {
     return null;
   }
-  const cssProperties = getCssProperties$1(prop);
-  const styleFromPropValue = getStyleFromPropValue$1(cssProperties, transformer);
+  const cssProperties = getCssProperties(prop);
+  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
   const propValue = props[prop];
-  return handleBreakpoints$1(props, propValue, styleFromPropValue);
+  return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-function style$3(props, keys) {
-  const transformer = createUnarySpacing$1(props.theme);
-  return Object.keys(props).map((prop) => resolveCssProperty$1(props, keys, prop, transformer)).reduce(merge$1, {});
+function style$1(props, keys) {
+  const transformer = createUnarySpacing(props.theme);
+  return Object.keys(props).map((prop) => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
-function margin$1(props) {
-  return style$3(props, marginKeys$1);
+function margin(props) {
+  return style$1(props, marginKeys);
 }
-margin$1.propTypes = process.env.NODE_ENV !== "production" ? marginKeys$1.reduce((obj, key) => {
-  obj[key] = responsivePropType$1;
+margin.propTypes = process.env.NODE_ENV !== "production" ? marginKeys.reduce((obj, key) => {
+  obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
-margin$1.filterProps = marginKeys$1;
-function padding$1(props) {
-  return style$3(props, paddingKeys$1);
+margin.filterProps = marginKeys;
+function padding(props) {
+  return style$1(props, paddingKeys);
 }
-padding$1.propTypes = process.env.NODE_ENV !== "production" ? paddingKeys$1.reduce((obj, key) => {
-  obj[key] = responsivePropType$1;
+padding.propTypes = process.env.NODE_ENV !== "production" ? paddingKeys.reduce((obj, key) => {
+  obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
-padding$1.filterProps = paddingKeys$1;
-process.env.NODE_ENV !== "production" ? spacingKeys$1.reduce((obj, key) => {
-  obj[key] = responsivePropType$1;
+padding.filterProps = paddingKeys;
+process.env.NODE_ENV !== "production" ? spacingKeys.reduce((obj, key) => {
+  obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
-function createSpacing$1(spacingInput = 8, transform = createUnarySpacing$1({
+function createSpacing(spacingInput = 8, transform = createUnarySpacing({
   spacing: spacingInput
 })) {
   if (spacingInput.mui) {
@@ -1965,7 +1965,7 @@ function createSpacing$1(spacingInput = 8, transform = createUnarySpacing$1({
   spacing2.mui = true;
   return spacing2;
 }
-function compose$1(...styles2) {
+function compose(...styles2) {
   const handlers = styles2.reduce((acc, style2) => {
     style2.filterProps.forEach((prop) => {
       acc[prop] = style2;
@@ -1975,7 +1975,7 @@ function compose$1(...styles2) {
   const fn2 = (props) => {
     return Object.keys(props).reduce((acc, prop) => {
       if (handlers[prop]) {
-        return merge$1(acc, handlers[prop](props));
+        return merge(acc, handlers[prop](props));
       }
       return acc;
     }, {});
@@ -1984,153 +1984,153 @@ function compose$1(...styles2) {
   fn2.filterProps = styles2.reduce((acc, style2) => acc.concat(style2.filterProps), []);
   return fn2;
 }
-function borderTransform$1(value) {
+function borderTransform(value) {
   if (typeof value !== "number") {
     return value;
   }
   return `${value}px solid`;
 }
-function createBorderStyle$1(prop, transform) {
-  return style$4({
+function createBorderStyle(prop, transform) {
+  return style$2({
     prop,
     themeKey: "borders",
     transform
   });
 }
-const border$1 = createBorderStyle$1("border", borderTransform$1);
-const borderTop$1 = createBorderStyle$1("borderTop", borderTransform$1);
-const borderRight$1 = createBorderStyle$1("borderRight", borderTransform$1);
-const borderBottom$1 = createBorderStyle$1("borderBottom", borderTransform$1);
-const borderLeft$1 = createBorderStyle$1("borderLeft", borderTransform$1);
-const borderColor$1 = createBorderStyle$1("borderColor");
-const borderTopColor$1 = createBorderStyle$1("borderTopColor");
-const borderRightColor$1 = createBorderStyle$1("borderRightColor");
-const borderBottomColor$1 = createBorderStyle$1("borderBottomColor");
-const borderLeftColor$1 = createBorderStyle$1("borderLeftColor");
-const outline$1 = createBorderStyle$1("outline", borderTransform$1);
-const outlineColor$1 = createBorderStyle$1("outlineColor");
-const borderRadius$1 = (props) => {
+const border = createBorderStyle("border", borderTransform);
+const borderTop = createBorderStyle("borderTop", borderTransform);
+const borderRight = createBorderStyle("borderRight", borderTransform);
+const borderBottom = createBorderStyle("borderBottom", borderTransform);
+const borderLeft = createBorderStyle("borderLeft", borderTransform);
+const borderColor = createBorderStyle("borderColor");
+const borderTopColor = createBorderStyle("borderTopColor");
+const borderRightColor = createBorderStyle("borderRightColor");
+const borderBottomColor = createBorderStyle("borderBottomColor");
+const borderLeftColor = createBorderStyle("borderLeftColor");
+const outline = createBorderStyle("outline", borderTransform);
+const outlineColor = createBorderStyle("outlineColor");
+const borderRadius = (props) => {
   if (props.borderRadius !== void 0 && props.borderRadius !== null) {
-    const transformer = createUnaryUnit$1(props.theme, "shape.borderRadius", 4, "borderRadius");
+    const transformer = createUnaryUnit(props.theme, "shape.borderRadius", 4, "borderRadius");
     const styleFromPropValue = (propValue) => ({
-      borderRadius: getValue$1(transformer, propValue)
+      borderRadius: getValue(transformer, propValue)
     });
-    return handleBreakpoints$1(props, props.borderRadius, styleFromPropValue);
+    return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
   }
   return null;
 };
-borderRadius$1.propTypes = process.env.NODE_ENV !== "production" ? {
-  borderRadius: responsivePropType$1
+borderRadius.propTypes = process.env.NODE_ENV !== "production" ? {
+  borderRadius: responsivePropType
 } : {};
-borderRadius$1.filterProps = ["borderRadius"];
-compose$1(border$1, borderTop$1, borderRight$1, borderBottom$1, borderLeft$1, borderColor$1, borderTopColor$1, borderRightColor$1, borderBottomColor$1, borderLeftColor$1, borderRadius$1, outline$1, outlineColor$1);
-const gap$1 = (props) => {
+borderRadius.filterProps = ["borderRadius"];
+compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
+const gap = (props) => {
   if (props.gap !== void 0 && props.gap !== null) {
-    const transformer = createUnaryUnit$1(props.theme, "spacing", 8, "gap");
+    const transformer = createUnaryUnit(props.theme, "spacing", 8, "gap");
     const styleFromPropValue = (propValue) => ({
-      gap: getValue$1(transformer, propValue)
+      gap: getValue(transformer, propValue)
     });
-    return handleBreakpoints$1(props, props.gap, styleFromPropValue);
+    return handleBreakpoints(props, props.gap, styleFromPropValue);
   }
   return null;
 };
-gap$1.propTypes = process.env.NODE_ENV !== "production" ? {
-  gap: responsivePropType$1
+gap.propTypes = process.env.NODE_ENV !== "production" ? {
+  gap: responsivePropType
 } : {};
-gap$1.filterProps = ["gap"];
-const columnGap$1 = (props) => {
+gap.filterProps = ["gap"];
+const columnGap = (props) => {
   if (props.columnGap !== void 0 && props.columnGap !== null) {
-    const transformer = createUnaryUnit$1(props.theme, "spacing", 8, "columnGap");
+    const transformer = createUnaryUnit(props.theme, "spacing", 8, "columnGap");
     const styleFromPropValue = (propValue) => ({
-      columnGap: getValue$1(transformer, propValue)
+      columnGap: getValue(transformer, propValue)
     });
-    return handleBreakpoints$1(props, props.columnGap, styleFromPropValue);
+    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
   }
   return null;
 };
-columnGap$1.propTypes = process.env.NODE_ENV !== "production" ? {
-  columnGap: responsivePropType$1
+columnGap.propTypes = process.env.NODE_ENV !== "production" ? {
+  columnGap: responsivePropType
 } : {};
-columnGap$1.filterProps = ["columnGap"];
-const rowGap$1 = (props) => {
+columnGap.filterProps = ["columnGap"];
+const rowGap = (props) => {
   if (props.rowGap !== void 0 && props.rowGap !== null) {
-    const transformer = createUnaryUnit$1(props.theme, "spacing", 8, "rowGap");
+    const transformer = createUnaryUnit(props.theme, "spacing", 8, "rowGap");
     const styleFromPropValue = (propValue) => ({
-      rowGap: getValue$1(transformer, propValue)
+      rowGap: getValue(transformer, propValue)
     });
-    return handleBreakpoints$1(props, props.rowGap, styleFromPropValue);
+    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
   }
   return null;
 };
-rowGap$1.propTypes = process.env.NODE_ENV !== "production" ? {
-  rowGap: responsivePropType$1
+rowGap.propTypes = process.env.NODE_ENV !== "production" ? {
+  rowGap: responsivePropType
 } : {};
-rowGap$1.filterProps = ["rowGap"];
-const gridColumn$1 = style$4({
+rowGap.filterProps = ["rowGap"];
+const gridColumn = style$2({
   prop: "gridColumn"
 });
-const gridRow$1 = style$4({
+const gridRow = style$2({
   prop: "gridRow"
 });
-const gridAutoFlow$1 = style$4({
+const gridAutoFlow = style$2({
   prop: "gridAutoFlow"
 });
-const gridAutoColumns$1 = style$4({
+const gridAutoColumns = style$2({
   prop: "gridAutoColumns"
 });
-const gridAutoRows$1 = style$4({
+const gridAutoRows = style$2({
   prop: "gridAutoRows"
 });
-const gridTemplateColumns$1 = style$4({
+const gridTemplateColumns = style$2({
   prop: "gridTemplateColumns"
 });
-const gridTemplateRows$1 = style$4({
+const gridTemplateRows = style$2({
   prop: "gridTemplateRows"
 });
-const gridTemplateAreas$1 = style$4({
+const gridTemplateAreas = style$2({
   prop: "gridTemplateAreas"
 });
-const gridArea$1 = style$4({
+const gridArea = style$2({
   prop: "gridArea"
 });
-compose$1(gap$1, columnGap$1, rowGap$1, gridColumn$1, gridRow$1, gridAutoFlow$1, gridAutoColumns$1, gridAutoRows$1, gridTemplateColumns$1, gridTemplateRows$1, gridTemplateAreas$1, gridArea$1);
-function paletteTransform$1(value, userValue) {
+compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
+function paletteTransform(value, userValue) {
   if (userValue === "grey") {
     return userValue;
   }
   return value;
 }
-const color$1 = style$4({
+const color = style$2({
   prop: "color",
   themeKey: "palette",
-  transform: paletteTransform$1
+  transform: paletteTransform
 });
-const bgcolor$1 = style$4({
+const bgcolor = style$2({
   prop: "bgcolor",
   cssProperty: "backgroundColor",
   themeKey: "palette",
-  transform: paletteTransform$1
+  transform: paletteTransform
 });
-const backgroundColor$1 = style$4({
+const backgroundColor = style$2({
   prop: "backgroundColor",
   themeKey: "palette",
-  transform: paletteTransform$1
+  transform: paletteTransform
 });
-compose$1(color$1, bgcolor$1, backgroundColor$1);
-function sizingTransform$1(value) {
+compose(color, bgcolor, backgroundColor);
+function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-const width$1 = style$4({
+const width = style$2({
   prop: "width",
-  transform: sizingTransform$1
+  transform: sizingTransform
 });
-const maxWidth$1 = (props) => {
+const maxWidth = (props) => {
   if (props.maxWidth !== void 0 && props.maxWidth !== null) {
     const styleFromPropValue = (propValue) => {
-      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || values$2[propValue];
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || values$1[propValue];
       if (!breakpoint) {
         return {
-          maxWidth: sizingTransform$1(propValue)
+          maxWidth: sizingTransform(propValue)
         };
       }
       if (props.theme?.breakpoints?.unit !== "px") {
@@ -2142,62 +2142,62 @@ const maxWidth$1 = (props) => {
         maxWidth: breakpoint
       };
     };
-    return handleBreakpoints$1(props, props.maxWidth, styleFromPropValue);
+    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
   }
   return null;
 };
-maxWidth$1.filterProps = ["maxWidth"];
-const minWidth$1 = style$4({
+maxWidth.filterProps = ["maxWidth"];
+const minWidth = style$2({
   prop: "minWidth",
-  transform: sizingTransform$1
+  transform: sizingTransform
 });
-const height$1 = style$4({
+const height = style$2({
   prop: "height",
-  transform: sizingTransform$1
+  transform: sizingTransform
 });
-const maxHeight$1 = style$4({
+const maxHeight = style$2({
   prop: "maxHeight",
-  transform: sizingTransform$1
+  transform: sizingTransform
 });
-const minHeight$1 = style$4({
+const minHeight = style$2({
   prop: "minHeight",
-  transform: sizingTransform$1
+  transform: sizingTransform
 });
-style$4({
+style$2({
   prop: "size",
   cssProperty: "width",
-  transform: sizingTransform$1
+  transform: sizingTransform
 });
-style$4({
+style$2({
   prop: "size",
   cssProperty: "height",
-  transform: sizingTransform$1
+  transform: sizingTransform
 });
-const boxSizing$1 = style$4({
+const boxSizing = style$2({
   prop: "boxSizing"
 });
-compose$1(width$1, maxWidth$1, minWidth$1, height$1, maxHeight$1, minHeight$1, boxSizing$1);
-const defaultSxConfig$1 = {
+compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
+const defaultSxConfig = {
   // borders
   border: {
     themeKey: "borders",
-    transform: borderTransform$1
+    transform: borderTransform
   },
   borderTop: {
     themeKey: "borders",
-    transform: borderTransform$1
+    transform: borderTransform
   },
   borderRight: {
     themeKey: "borders",
-    transform: borderTransform$1
+    transform: borderTransform
   },
   borderBottom: {
     themeKey: "borders",
-    transform: borderTransform$1
+    transform: borderTransform
   },
   borderLeft: {
     themeKey: "borders",
-    transform: borderTransform$1
+    transform: borderTransform
   },
   borderColor: {
     themeKey: "palette"
@@ -2216,149 +2216,149 @@ const defaultSxConfig$1 = {
   },
   outline: {
     themeKey: "borders",
-    transform: borderTransform$1
+    transform: borderTransform
   },
   outlineColor: {
     themeKey: "palette"
   },
   borderRadius: {
     themeKey: "shape.borderRadius",
-    style: borderRadius$1
+    style: borderRadius
   },
   // palette
   color: {
     themeKey: "palette",
-    transform: paletteTransform$1
+    transform: paletteTransform
   },
   bgcolor: {
     themeKey: "palette",
     cssProperty: "backgroundColor",
-    transform: paletteTransform$1
+    transform: paletteTransform
   },
   backgroundColor: {
     themeKey: "palette",
-    transform: paletteTransform$1
+    transform: paletteTransform
   },
   // spacing
   p: {
-    style: padding$1
+    style: padding
   },
   pt: {
-    style: padding$1
+    style: padding
   },
   pr: {
-    style: padding$1
+    style: padding
   },
   pb: {
-    style: padding$1
+    style: padding
   },
   pl: {
-    style: padding$1
+    style: padding
   },
   px: {
-    style: padding$1
+    style: padding
   },
   py: {
-    style: padding$1
+    style: padding
   },
   padding: {
-    style: padding$1
+    style: padding
   },
   paddingTop: {
-    style: padding$1
+    style: padding
   },
   paddingRight: {
-    style: padding$1
+    style: padding
   },
   paddingBottom: {
-    style: padding$1
+    style: padding
   },
   paddingLeft: {
-    style: padding$1
+    style: padding
   },
   paddingX: {
-    style: padding$1
+    style: padding
   },
   paddingY: {
-    style: padding$1
+    style: padding
   },
   paddingInline: {
-    style: padding$1
+    style: padding
   },
   paddingInlineStart: {
-    style: padding$1
+    style: padding
   },
   paddingInlineEnd: {
-    style: padding$1
+    style: padding
   },
   paddingBlock: {
-    style: padding$1
+    style: padding
   },
   paddingBlockStart: {
-    style: padding$1
+    style: padding
   },
   paddingBlockEnd: {
-    style: padding$1
+    style: padding
   },
   m: {
-    style: margin$1
+    style: margin
   },
   mt: {
-    style: margin$1
+    style: margin
   },
   mr: {
-    style: margin$1
+    style: margin
   },
   mb: {
-    style: margin$1
+    style: margin
   },
   ml: {
-    style: margin$1
+    style: margin
   },
   mx: {
-    style: margin$1
+    style: margin
   },
   my: {
-    style: margin$1
+    style: margin
   },
   margin: {
-    style: margin$1
+    style: margin
   },
   marginTop: {
-    style: margin$1
+    style: margin
   },
   marginRight: {
-    style: margin$1
+    style: margin
   },
   marginBottom: {
-    style: margin$1
+    style: margin
   },
   marginLeft: {
-    style: margin$1
+    style: margin
   },
   marginX: {
-    style: margin$1
+    style: margin
   },
   marginY: {
-    style: margin$1
+    style: margin
   },
   marginInline: {
-    style: margin$1
+    style: margin
   },
   marginInlineStart: {
-    style: margin$1
+    style: margin
   },
   marginInlineEnd: {
-    style: margin$1
+    style: margin
   },
   marginBlock: {
-    style: margin$1
+    style: margin
   },
   marginBlockStart: {
-    style: margin$1
+    style: margin
   },
   marginBlockEnd: {
-    style: margin$1
+    style: margin
   },
   // display
   displayPrint: {
@@ -2390,13 +2390,13 @@ const defaultSxConfig$1 = {
   justifySelf: {},
   // grid
   gap: {
-    style: gap$1
+    style: gap
   },
   rowGap: {
-    style: rowGap$1
+    style: rowGap
   },
   columnGap: {
-    style: columnGap$1
+    style: columnGap
   },
   gridColumn: {},
   gridRow: {},
@@ -2422,22 +2422,22 @@ const defaultSxConfig$1 = {
   },
   // sizing
   width: {
-    transform: sizingTransform$1
+    transform: sizingTransform
   },
   maxWidth: {
-    style: maxWidth$1
+    style: maxWidth
   },
   minWidth: {
-    transform: sizingTransform$1
+    transform: sizingTransform
   },
   height: {
-    transform: sizingTransform$1
+    transform: sizingTransform
   },
   maxHeight: {
-    transform: sizingTransform$1
+    transform: sizingTransform
   },
   minHeight: {
-    transform: sizingTransform$1
+    transform: sizingTransform
   },
   boxSizing: {},
   // typography
@@ -2465,15 +2465,15 @@ const defaultSxConfig$1 = {
     themeKey: "typography"
   }
 };
-function objectsHaveSameKeys$1(...objects) {
+function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
   return objects.every((object) => union.size === Object.keys(object).length);
 }
-function callIfFn$1(maybeFn, arg2) {
+function callIfFn(maybeFn, arg2) {
   return typeof maybeFn === "function" ? maybeFn(arg2) : maybeFn;
 }
-function unstable_createStyleFunctionSx$1() {
+function unstable_createStyleFunctionSx() {
   function getThemeValue(prop, val, theme2, config2) {
     const props = {
       [prop]: val,
@@ -2499,14 +2499,14 @@ function unstable_createStyleFunctionSx$1() {
         [prop]: val
       };
     }
-    const themeMapping = getPath$1(theme2, themeKey) || {};
+    const themeMapping = getPath(theme2, themeKey) || {};
     if (style2) {
       return style2(props);
     }
     const styleFromPropValue = (propValueFinal) => {
-      let value = getStyleValue$2(themeMapping, transform, propValueFinal);
+      let value = getStyleValue$1(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === "string") {
-        value = getStyleValue$2(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize$2(propValueFinal)}`, propValueFinal);
+        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize$1(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -2515,7 +2515,7 @@ function unstable_createStyleFunctionSx$1() {
         [cssProperty]: value
       };
     };
-    return handleBreakpoints$1(props, val, styleFromPropValue);
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx2(props) {
     const {
@@ -2526,7 +2526,7 @@ function unstable_createStyleFunctionSx$1() {
     if (!sx) {
       return null;
     }
-    const config2 = theme2.unstable_sxConfig ?? defaultSxConfig$1;
+    const config2 = theme2.unstable_sxConfig ?? defaultSxConfig;
     function traverse(sxInput) {
       let sxObject = sxInput;
       if (typeof sxInput === "function") {
@@ -2537,50 +2537,50 @@ function unstable_createStyleFunctionSx$1() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = createEmptyBreakpointObject$1(theme2.breakpoints);
+      const emptyBreakpoints = createEmptyBreakpointObject(theme2.breakpoints);
       const breakpointsKeys = Object.keys(emptyBreakpoints);
       let css2 = emptyBreakpoints;
       Object.keys(sxObject).forEach((styleKey) => {
-        const value = callIfFn$1(sxObject[styleKey], theme2);
+        const value = callIfFn(sxObject[styleKey], theme2);
         if (value !== null && value !== void 0) {
           if (typeof value === "object") {
             if (config2[styleKey]) {
-              css2 = merge$1(css2, getThemeValue(styleKey, value, theme2, config2));
+              css2 = merge(css2, getThemeValue(styleKey, value, theme2, config2));
             } else {
-              const breakpointsValues = handleBreakpoints$1({
+              const breakpointsValues = handleBreakpoints({
                 theme: theme2
               }, value, (x) => ({
                 [styleKey]: x
               }));
-              if (objectsHaveSameKeys$1(breakpointsValues, value)) {
+              if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css2[styleKey] = styleFunctionSx2({
                   sx: value,
                   theme: theme2,
                   nested: true
                 });
               } else {
-                css2 = merge$1(css2, breakpointsValues);
+                css2 = merge(css2, breakpointsValues);
               }
             }
           } else {
-            css2 = merge$1(css2, getThemeValue(styleKey, value, theme2, config2));
+            css2 = merge(css2, getThemeValue(styleKey, value, theme2, config2));
           }
         }
       });
       if (!nested && theme2.modularCssLayers) {
         return {
-          "@layer sx": sortContainerQueries$1(theme2, removeUnusedBreakpoints$1(breakpointsKeys, css2))
+          "@layer sx": sortContainerQueries(theme2, removeUnusedBreakpoints(breakpointsKeys, css2))
         };
       }
-      return sortContainerQueries$1(theme2, removeUnusedBreakpoints$1(breakpointsKeys, css2));
+      return sortContainerQueries(theme2, removeUnusedBreakpoints(breakpointsKeys, css2));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
   return styleFunctionSx2;
 }
-const styleFunctionSx$1 = unstable_createStyleFunctionSx$1();
-styleFunctionSx$1.filterProps = ["sx"];
-function applyStyles$3(key, styles2) {
+const styleFunctionSx = unstable_createStyleFunctionSx();
+styleFunctionSx.filterProps = ["sx"];
+function applyStyles$2(key, styles2) {
   const theme2 = this;
   if (theme2.vars) {
     if (!theme2.colorSchemes?.[key] || typeof theme2.getColorSchemeSelector !== "function") {
@@ -2602,7 +2602,7 @@ function applyStyles$3(key, styles2) {
   }
   return {};
 }
-function createTheme$2(options = {}, ...args) {
+function createTheme$1(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput = {},
     palette: paletteInput = {},
@@ -2610,9 +2610,9 @@ function createTheme$2(options = {}, ...args) {
     shape: shapeInput = {},
     ...other
   } = options;
-  const breakpoints = createBreakpoints$1(breakpointsInput);
-  const spacing2 = createSpacing$1(spacingInput);
-  let muiTheme = deepmerge$1({
+  const breakpoints = createBreakpoints(breakpointsInput);
+  const spacing2 = createSpacing(spacingInput);
+  let muiTheme = deepmerge({
     breakpoints,
     direction: "ltr",
     components: {},
@@ -2623,19 +2623,19 @@ function createTheme$2(options = {}, ...args) {
     },
     spacing: spacing2,
     shape: {
-      ...shape$3,
+      ...shape$2,
       ...shapeInput
     }
   }, other);
-  muiTheme = cssContainerQueries$1(muiTheme);
-  muiTheme.applyStyles = applyStyles$3;
-  muiTheme = args.reduce((acc, argument) => deepmerge$1(acc, argument), muiTheme);
+  muiTheme = cssContainerQueries(muiTheme);
+  muiTheme.applyStyles = applyStyles$2;
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig$1,
+    ...defaultSxConfig,
     ...other?.unstable_sxConfig
   };
   muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx$1({
+    return styleFunctionSx({
       sx: props,
       theme: this
     });
@@ -2649,7 +2649,7 @@ function useTheme$2(defaultTheme2 = null) {
   const contextTheme = React.useContext(ThemeContext);
   return !contextTheme || isObjectEmpty$2(contextTheme) ? defaultTheme2 : contextTheme;
 }
-const systemDefaultTheme$1 = createTheme$2();
+const systemDefaultTheme$1 = createTheme$1();
 function useTheme$1(defaultTheme2 = systemDefaultTheme$1) {
   return useTheme$2(defaultTheme2);
 }
@@ -2710,7 +2710,7 @@ const splitProps = (props) => {
     systemProps: {},
     otherProps: {}
   };
-  const config2 = props?.theme?.unstable_sxConfig ?? defaultSxConfig$1;
+  const config2 = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
   Object.keys(props).forEach((prop) => {
     if (config2[prop]) {
       result.systemProps[prop] = props[prop];
@@ -2735,7 +2735,7 @@ function extendSxProp$1(props) {
   } else if (typeof inSx === "function") {
     finalSx = (...args) => {
       const result = inSx(...args);
-      if (!isPlainObject$1(result)) {
+      if (!isPlainObject(result)) {
         return systemProps;
       }
       return {
@@ -2792,7 +2792,7 @@ function createBox(options = {}) {
   } = options;
   const BoxRoot = styled$2("div", {
     shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
-  })(styleFunctionSx$1);
+  })(styleFunctionSx);
   const Box2 = /* @__PURE__ */ React.forwardRef(function Box3(inProps, ref) {
     const theme2 = useTheme$1(defaultTheme2);
     const {
@@ -2886,8 +2886,8 @@ function preprocessStyles(input) {
   }
   return result;
 }
-const systemDefaultTheme = createTheme$2();
-function shouldForwardProp$1(prop) {
+const systemDefaultTheme = createTheme$1();
+function shouldForwardProp(prop) {
   return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
 }
 function shallowLayer(serialized, layerName) {
@@ -2965,14 +2965,14 @@ function createStyled(input = {}) {
   const {
     themeId,
     defaultTheme: defaultTheme2 = systemDefaultTheme,
-    rootShouldForwardProp: rootShouldForwardProp2 = shouldForwardProp$1,
-    slotShouldForwardProp: slotShouldForwardProp2 = shouldForwardProp$1
+    rootShouldForwardProp: rootShouldForwardProp2 = shouldForwardProp,
+    slotShouldForwardProp: slotShouldForwardProp2 = shouldForwardProp
   } = input;
   function styleAttachTheme(props) {
     attachTheme(props, themeId, defaultTheme2);
   }
   const styled2 = (tag, inputOptions = {}) => {
-    internal_mutateStyles(tag, (styles2) => styles2.filter((style2) => style2 !== styleFunctionSx$1));
+    internal_mutateStyles(tag, (styles2) => styles2.filter((style2) => style2 !== styleFunctionSx));
     const {
       name: componentName,
       slot: componentSlot,
@@ -2990,7 +2990,7 @@ function createStyled(input = {}) {
       componentSlot && componentSlot !== "Root" && componentSlot !== "root" || false
     );
     const skipSx = inputSkipSx || false;
-    let shouldForwardPropOption = shouldForwardProp$1;
+    let shouldForwardPropOption = shouldForwardProp;
     if (componentSlot === "Root" || componentSlot === "root") {
       shouldForwardPropOption = rootShouldForwardProp2;
     } else if (componentSlot) {
@@ -3012,7 +3012,7 @@ function createStyled(input = {}) {
           return processStyle(props, style2, props.theme.modularCssLayers ? layerName : void 0);
         };
       }
-      if (isPlainObject$1(style2)) {
+      if (isPlainObject(style2)) {
         const serialized = preprocessStyles(style2);
         return function styleObjectProcessor(props) {
           if (!serialized.variants) {
@@ -3053,7 +3053,7 @@ function createStyled(input = {}) {
         });
       }
       if (!skipSx) {
-        expressionsTail.push(styleFunctionSx$1);
+        expressionsTail.push(styleFunctionSx);
       }
       if (Array.isArray(expressionsBody[0])) {
         const inputStrings = expressionsBody.shift();
@@ -3085,7 +3085,7 @@ function createStyled(input = {}) {
 }
 function generateDisplayName(componentName, componentSlot, tag) {
   if (componentName) {
-    return `${componentName}${capitalize$2(componentSlot || "")}`;
+    return `${componentName}${capitalize$1(componentSlot || "")}`;
   }
   return `Styled(${getDisplayName(tag)})`;
 }
@@ -3322,7 +3322,7 @@ function decomposeColor(color2) {
   const type = color2.substring(0, marker);
   if (!["rgb", "rgba", "hsl", "hsla", "color"].includes(type)) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color2}\` color.
-The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : formatMuiErrorMessage$2(9, color2));
+The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : formatMuiErrorMessage$1(9, color2));
   }
   let values2 = color2.substring(marker + 1, color2.length - 1);
   let colorSpace;
@@ -3334,7 +3334,7 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
     }
     if (!["srgb", "display-p3", "a98-rgb", "prophoto-rgb", "rec-2020"].includes(colorSpace)) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
-The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : formatMuiErrorMessage$2(10, colorSpace));
+The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : formatMuiErrorMessage$1(10, colorSpace));
     }
   } else {
     values2 = values2.split(",");
@@ -4041,13 +4041,13 @@ function getReactElementRef(element) {
   }
   return element?.ref || null;
 }
-const RtlContext$1 = /* @__PURE__ */ React.createContext();
+const RtlContext = /* @__PURE__ */ React.createContext();
 process.env.NODE_ENV !== "production" ? {
   children: PropTypes.node,
   value: PropTypes.bool
 } : void 0;
-const useRtl$1 = () => {
-  const value = React.useContext(RtlContext$1);
+const useRtl = () => {
+  const value = React.useContext(RtlContext);
   return value ?? false;
 };
 const PropsContext = /* @__PURE__ */ React.createContext(void 0);
@@ -4236,7 +4236,7 @@ function prepareCssVars(theme2, parserConfig = {}) {
       css: css2,
       varsWithDefaults
     } = cssVarsParser(scheme, parserConfig);
-    themeVars = deepmerge$1(themeVars, varsWithDefaults);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[key] = {
       css: css2,
       vars
@@ -4248,7 +4248,7 @@ function prepareCssVars(theme2, parserConfig = {}) {
       vars,
       varsWithDefaults
     } = cssVarsParser(defaultScheme, parserConfig);
-    themeVars = deepmerge$1(themeVars, varsWithDefaults);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css: css2,
       vars
@@ -4293,7 +4293,7 @@ function prepareCssVars(theme2, parserConfig = {}) {
     Object.entries(colorSchemesMap).forEach(([, {
       vars: schemeVars
     }]) => {
-      vars = deepmerge$1(vars, schemeVars);
+      vars = deepmerge(vars, schemeVars);
     });
     return vars;
   };
@@ -4378,7 +4378,7 @@ function createGetColorSchemeSelector(selector) {
     return "&";
   };
 }
-const defaultTheme$4 = createTheme$2();
+const defaultTheme$4 = createTheme$1();
 const defaultCreateStyledComponent$2 = styled$1("div", {
   name: "MuiContainer",
   slot: "Root",
@@ -4386,7 +4386,7 @@ const defaultCreateStyledComponent$2 = styled$1("div", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`maxWidth${capitalize$2(String(ownerState.maxWidth))}`], ownerState.fixed && styles2.fixed, ownerState.disableGutters && styles2.disableGutters];
+    return [styles2.root, styles2[`maxWidth${capitalize$1(String(ownerState.maxWidth))}`], ownerState.fixed && styles2.fixed, ownerState.disableGutters && styles2.disableGutters];
   }
 });
 const useThemePropsDefault$2 = (inProps) => useThemeProps$1({
@@ -4405,7 +4405,7 @@ const useUtilityClasses$2b = (ownerState, componentName) => {
     maxWidth: maxWidth2
   } = ownerState;
   const slots = {
-    root: ["root", maxWidth2 && `maxWidth${capitalize$2(String(maxWidth2))}`, fixed && "fixed", disableGutters && "disableGutters"]
+    root: ["root", maxWidth2 && `maxWidth${capitalize$1(String(maxWidth2))}`, fixed && "fixed", disableGutters && "disableGutters"]
   };
   return composeClasses$1(slots, getContainerUtilityClass, classes);
 };
@@ -4770,7 +4770,7 @@ function deleteLegacyGridProps(props, breakpoints) {
     });
   }
 }
-const defaultTheme$3 = createTheme$2();
+const defaultTheme$3 = createTheme$1();
 const defaultCreateStyledComponent$1 = styled$1("div", {
   name: "MuiGrid",
   slot: "Root",
@@ -4903,7 +4903,7 @@ function createGrid(options = {}) {
   Grid3.muiName = "Grid";
   return Grid3;
 }
-const defaultTheme$2 = createTheme$2();
+const defaultTheme$2 = createTheme$1();
 const defaultCreateStyledComponent = styled$1("div", {
   name: "MuiStack",
   slot: "Root",
@@ -4936,14 +4936,14 @@ const getSideFromDirection = (direction) => {
     "column-reverse": "Bottom"
   }[direction];
 };
-const style$2 = ({
+const style = ({
   ownerState,
   theme: theme2
 }) => {
   let styles2 = {
     display: "flex",
     flexDirection: "column",
-    ...handleBreakpoints$1({
+    ...handleBreakpoints({
       theme: theme2
     }, resolveBreakpointValues({
       values: ownerState.direction,
@@ -4953,7 +4953,7 @@ const style$2 = ({
     }))
   };
   if (ownerState.spacing) {
-    const transformer = createUnarySpacing$1(theme2);
+    const transformer = createUnarySpacing(theme2);
     const base = Object.keys(theme2.breakpoints.values).reduce((acc, breakpoint) => {
       if (typeof ownerState.spacing === "object" && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === "object" && ownerState.direction[breakpoint] != null) {
         acc[breakpoint] = true;
@@ -4980,7 +4980,7 @@ const style$2 = ({
     const styleFromPropValue = (propValue, breakpoint) => {
       if (ownerState.useFlexGap) {
         return {
-          gap: getValue$1(transformer, propValue)
+          gap: getValue(transformer, propValue)
         };
       }
       return {
@@ -4990,11 +4990,11 @@ const style$2 = ({
           margin: 0
         },
         "& > :not(style) ~ :not(style)": {
-          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue$1(transformer, propValue)
+          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
         }
       };
     };
-    styles2 = deepmerge$1(styles2, handleBreakpoints$1({
+    styles2 = deepmerge(styles2, handleBreakpoints({
       theme: theme2
     }, spacingValues, styleFromPropValue));
   }
@@ -5014,7 +5014,7 @@ function createStack(options = {}) {
     };
     return composeClasses$1(slots, (slot) => generateUtilityClass$1(componentName, slot), {});
   };
-  const StackRoot = createStyledComponent(style$2);
+  const StackRoot = createStyledComponent(style);
   const Stack2 = /* @__PURE__ */ React.forwardRef(function Grid3(inProps, ref) {
     const themeProps = useThemeProps2(inProps);
     const props = extendSxProp$1(themeProps);
@@ -5322,7 +5322,7 @@ function createPalette(palette) {
     }
     if (!color2.hasOwnProperty("main")) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ""} provided to augmentColor(color) is invalid.
-The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : formatMuiErrorMessage$2(11, name ? ` (${name})` : "", mainShade));
+The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : formatMuiErrorMessage$1(11, name ? ` (${name})` : "", mainShade));
     }
     if (typeof color2.main !== "string") {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ""} provided to augmentColor(color) is invalid.
@@ -5338,7 +5338,7 @@ const theme1 = createTheme({ palette: {
 
 const theme2 = createTheme({ palette: {
   primary: { main: green[500] },
-} });` : formatMuiErrorMessage$2(12, name ? ` (${name})` : "", JSON.stringify(color2.main)));
+} });` : formatMuiErrorMessage$1(12, name ? ` (${name})` : "", JSON.stringify(color2.main)));
     }
     addLightOrDark(color2, "light", lightShade, tonalOffset);
     addLightOrDark(color2, "dark", darkShade, tonalOffset);
@@ -5358,7 +5358,7 @@ const theme2 = createTheme({ palette: {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-  const paletteOutput = deepmerge$1({
+  const paletteOutput = deepmerge({
     // A collection of common colors.
     common: {
       ...common
@@ -5516,7 +5516,7 @@ function createTypography(palette, typography2) {
       letterSpacing: "inherit"
     }
   };
-  return deepmerge$1({
+  return deepmerge({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -5631,7 +5631,7 @@ const zIndex = {
   tooltip: 1500
 };
 function isSerializable(val) {
-  return isPlainObject$1(val) || typeof val === "undefined" || typeof val === "string" || typeof val === "boolean" || typeof val === "number" || Array.isArray(val);
+  return isPlainObject(val) || typeof val === "undefined" || typeof val === "string" || typeof val === "boolean" || typeof val === "number" || Array.isArray(val);
 }
 function stringifyTheme(baseTheme = {}) {
   const serializableTheme = {
@@ -5643,7 +5643,7 @@ function stringifyTheme(baseTheme = {}) {
       const [key, value] = array[index];
       if (!isSerializable(value) || key.startsWith("unstable_")) {
         delete object[key];
-      } else if (isPlainObject$1(value)) {
+      } else if (isPlainObject(value)) {
         object[key] = {
           ...value
         };
@@ -5675,11 +5675,11 @@ function createThemeNoVars(options = {}, ...args) {
   if (options.vars && // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
   // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
   options.generateThemeVars === void 0) {
-    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature." : formatMuiErrorMessage$2(20));
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature." : formatMuiErrorMessage$1(20));
   }
   const palette = createPalette(paletteInput);
-  const systemTheme = createTheme$2(options);
-  let muiTheme = deepmerge$1(systemTheme, {
+  const systemTheme = createTheme$1(options);
+  let muiTheme = deepmerge(systemTheme, {
     mixins: createMixins(systemTheme.breakpoints, mixinsInput),
     palette,
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
@@ -5690,8 +5690,8 @@ function createThemeNoVars(options = {}, ...args) {
       ...zIndex
     }
   });
-  muiTheme = deepmerge$1(muiTheme, other);
-  muiTheme = args.reduce((acc, argument) => deepmerge$1(acc, argument), muiTheme);
+  muiTheme = deepmerge(muiTheme, other);
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   if (process.env.NODE_ENV !== "production") {
     const stateClasses = ["active", "checked", "completed", "disabled", "error", "expanded", "focused", "focusVisible", "required", "selected"];
     const traverse = (node, component) => {
@@ -5719,11 +5719,11 @@ function createThemeNoVars(options = {}, ...args) {
     });
   }
   muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig$1,
+    ...defaultSxConfig,
     ...other?.unstable_sxConfig
   };
   muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx$1({
+    return styleFunctionSx({
       sx: props,
       theme: this
     });
@@ -5950,7 +5950,7 @@ function createThemeWithVars(options = {}, ...args) {
     defaultScheme = true;
   }
   if (!defaultScheme) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : formatMuiErrorMessage$2(21, defaultColorScheme));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : formatMuiErrorMessage$1(21, defaultColorScheme));
   }
   const muiTheme = attachColorScheme$1(colorSchemes2, defaultScheme, input, defaultColorScheme);
   if (builtInLight && !colorSchemes2.light) {
@@ -6149,7 +6149,7 @@ function createThemeWithVars(options = {}, ...args) {
       }
     });
   });
-  theme2 = args.reduce((acc, argument) => deepmerge$1(acc, argument), theme2);
+  theme2 = args.reduce((acc, argument) => deepmerge(acc, argument), theme2);
   const parserConfig = {
     prefix: cssVarPrefix,
     disableCssColorScheme,
@@ -6168,17 +6168,17 @@ function createThemeWithVars(options = {}, ...args) {
   theme2.generateThemeVars = generateThemeVars;
   theme2.generateStyleSheets = generateStyleSheets;
   theme2.generateSpacing = function generateSpacing() {
-    return createSpacing$1(input.spacing, createUnarySpacing$1(this));
+    return createSpacing(input.spacing, createUnarySpacing(this));
   };
   theme2.getColorSchemeSelector = createGetColorSchemeSelector(selector);
   theme2.spacing = theme2.generateSpacing();
   theme2.shouldSkipGeneratingVar = shouldSkipGeneratingVar$1;
   theme2.unstable_sxConfig = {
-    ...defaultSxConfig$1,
+    ...defaultSxConfig,
     ...input?.unstable_sxConfig
   };
   theme2.unstable_sx = function sx(props) {
-    return styleFunctionSx$1({
+    return styleFunctionSx({
       sx: props,
       theme: this
     });
@@ -6201,7 +6201,7 @@ function attachColorScheme(theme2, scheme, colorScheme) {
     };
   }
 }
-function createTheme$1(options = {}, ...args) {
+function createTheme(options = {}, ...args) {
   const {
     palette,
     cssVariables = false,
@@ -6276,7 +6276,7 @@ function getUnit(input) {
 function toUnitless(length) {
   return parseFloat(length);
 }
-const defaultTheme$1 = createTheme$1();
+const defaultTheme$1 = createTheme();
 function useTheme() {
   const theme2 = useTheme$1(defaultTheme$1);
   if (process.env.NODE_ENV !== "production") {
@@ -6306,12 +6306,12 @@ const styled = createStyled({
 });
 const colorSchemes = { "light": { "palette": { "primary": { "main": "#00686f", "dark": "#004e53", "light": "#009999", "contrastText": "#ffffff", "_states": { "hover": "#0099991f", "selected": "#00999929", "focus": "#00999940", "focusVisible": "#009999" } }, "secondary": { "main": "#99cc00", "dark": "#7aa300", "light": "#b3d633", "contrastText": "#000000de" }, "error": { "main": "#ab1a1a", "dark": "#8b1515", "light": "#d32f2f", "contrastText": "#ffffff" }, "warning": { "main": "#dfa00a", "dark": "#b88308", "light": "#f5b642", "contrastText": "#000000de" }, "info": { "main": "#143996", "dark": "#0C225A", "light": "#D1DAF0", "contrastText": "#ffffff" }, "success": { "main": "#036642", "dark": "#023321", "light": "#B3D1C7", "contrastText": "#ffffff" }, "background": { "default": "#ffffff", "paper": "#ffffff" }, "text": { "primary": "#000000de", "secondary": "#00000099", "disabled": "#00000061" }, "action": { "active": "#0000008f", "hover": "#00000014", "selected": "#0000001f", "disabled": "#00000042", "disabledBackground": "#0000001f" }, "divider": "#0000001f", "_components": { "alert": { "error": { "filled": { "background": "#ab1a1a", "foreground": "#ffffff" }, "outlined": { "background": "#fdeded", "foreground": "#5f2120", "border": "#ab1a1a" }, "standard": { "background": "#fdeded", "foreground": "#5f2120" } }, "warning": { "filled": { "background": "#dfa00a", "foreground": "#000000de" }, "outlined": { "background": "#fff4e5", "foreground": "#3e2410", "border": "#dfa00a" }, "standard": { "background": "#fff4e5", "foreground": "#3e2410" } }, "info": { "filled": { "background": "#2481b8", "foreground": "#ffffff" }, "outlined": { "background": "#e5f6fd", "foreground": "#014361", "border": "#2481b8" }, "standard": { "background": "#e5f6fd", "foreground": "#014361" } }, "success": { "filled": { "background": "#2e7d32", "foreground": "#ffffff" }, "outlined": { "background": "#edf7ed", "foreground": "#1e4620", "border": "#2e7d32" }, "standard": { "background": "#edf7ed", "foreground": "#1e4620" } } }, "rating": { "activeFill": "#ffb400", "enabledBorder": "#0000003b" }, "chip": { "defaultCloseFill": "#000000", "defaultEnabledBorder": "#bdbdbd" }, "input": { "standard": { "enabledBorder": "#0000006b" }, "filled": { "enabledFill": "#0000000f" }, "outlined": { "enabledBorder": "#0000003b" } }, "table": { "border": "#e0e0e0" }, "paper": { "elevation0": "#ffffff", "elevation1": "#ffffff", "elevation2": "#ffffff" } } } }, "dark": { "palette": { "primary": { "main": "#009999", "dark": "#00686f", "light": "#33adad", "contrastText": "#000000", "_states": { "hover": "#0099993d", "selected": "#00999952", "focus": "#00999966", "focusVisible": "#009999" } }, "secondary": { "main": "#b3d633", "dark": "#99cc00", "light": "#c5e066", "contrastText": "#000000" }, "error": { "main": "#f44336", "dark": "#d32f2f", "light": "#e57373", "contrastText": "#ffffff" }, "warning": { "main": "#f5b642", "dark": "#dfa00a", "light": "#f7c875", "contrastText": "#000000" }, "info": { "main": "#4f9fd1", "dark": "#2481b8", "light": "#72b3dd", "contrastText": "#000000" }, "success": { "main": "#66bb6a", "dark": "#388e3c", "light": "#81c784", "contrastText": "#000000" }, "background": { "default": "#121212", "paper": "#1e1e1e" }, "text": { "primary": "#ffffff", "secondary": "#ffffffb3", "disabled": "#ffffff80" }, "action": { "active": "#ffffff", "hover": "#ffffff14", "selected": "#ffffff1f", "disabled": "#ffffff42", "disabledBackground": "#ffffff1f" }, "divider": "#ffffff1f", "_components": { "alert": { "error": { "filled": { "background": "#f44336", "foreground": "#ffffff" }, "outlined": { "background": "#3d1a1a", "foreground": "#f8b8b8", "border": "#f44336" }, "standard": { "background": "#3d1a1a", "foreground": "#f8b8b8" } }, "warning": { "filled": { "background": "#f5b642", "foreground": "#000000" }, "outlined": { "background": "#3d3118", "foreground": "#f7d498", "border": "#f5b642" }, "standard": { "background": "#3d3118", "foreground": "#f7d498" } }, "info": { "filled": { "background": "#4f9fd1", "foreground": "#000000" }, "outlined": { "background": "#1a2f3d", "foreground": "#b8d9f0", "border": "#4f9fd1" }, "standard": { "background": "#1a2f3d", "foreground": "#b8d9f0" } }, "success": { "filled": { "background": "#66bb6a", "foreground": "#000000" }, "outlined": { "background": "#1e3a1f", "foreground": "#c8e6ca", "border": "#66bb6a" }, "standard": { "background": "#1e3a1f", "foreground": "#c8e6ca" } } }, "rating": { "activeFill": "#ffb400", "enabledBorder": "#ffffff3b" }, "chip": { "defaultCloseFill": "#ffffff", "defaultEnabledBorder": "#757575" }, "input": { "standard": { "enabledBorder": "#ffffff6b" }, "filled": { "enabledFill": "#ffffff1f" }, "outlined": { "enabledBorder": "#ffffff3b" } }, "table": { "border": "#424242" }, "paper": { "elevation0": "#1e1e1e", "elevation1": "#2a2a2a", "elevation2": "#353535" } } } } };
 const typography$1 = { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontSize": 16, "fontWeightLight": 300, "fontWeightRegular": 400, "fontWeightMedium": 500, "fontWeightSemiBold": 600, "fontWeightBold": 700, "h1": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 600, "fontSize": "3.75rem", "lineHeight": 1.2, "letterSpacing": "-0.01562em" }, "h2": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 600, "fontSize": "3rem", "lineHeight": 1.2, "letterSpacing": "-0.00833em" }, "h3": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 600, "fontSize": "2.125rem", "lineHeight": 1.2, "letterSpacing": "0em" }, "h4": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 600, "fontSize": "1.5rem", "lineHeight": 1.2, "letterSpacing": "0.00735em" }, "h5": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 600, "fontSize": "1.25rem", "lineHeight": 1.2, "letterSpacing": "0em" }, "h6": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 600, "fontSize": "1rem", "lineHeight": 1.2, "letterSpacing": "0.0075em" }, "body1": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 400, "fontSize": "1rem", "lineHeight": 1.5, "letterSpacing": "0.00938em" }, "body2": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 400, "fontSize": "0.875rem", "lineHeight": 1.43, "letterSpacing": "0.01071em" }, "subtitle1": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 500, "fontSize": "1rem", "lineHeight": 1.75, "letterSpacing": "0.00938em" }, "subtitle2": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 500, "fontSize": "0.875rem", "lineHeight": 1.57, "letterSpacing": "0.00714em" }, "button": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 600, "fontSize": "0.875rem", "lineHeight": 1.75, "letterSpacing": "0.02857em", "textTransform": "none" }, "caption": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 400, "fontSize": "0.75rem", "lineHeight": 1.66, "letterSpacing": "0.03333em" }, "overline": { "fontFamily": "Nunito, Helvetica, Arial, sans-serif", "fontWeight": 400, "fontSize": "0.75rem", "lineHeight": 2.66, "letterSpacing": "0.08333em", "textTransform": "uppercase" } };
-const shape$2 = { "borderRadius": 8, "sm": 4, "md": 8, "lg": 12, "xl": 24, "rounded": 9999 };
+const shape$1 = { "borderRadius": 8, "sm": 4, "md": 8, "lg": 12, "xl": 24, "rounded": 9999 };
 const spacing$2 = [0, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96];
 const themeTokens = {
   colorSchemes,
   typography: typography$1,
-  shape: shape$2,
+  shape: shape$1,
   spacing: spacing$2
 };
 const ComponentAlertDarkErrorFilledBackground = "#f48282";
@@ -7259,7 +7259,7 @@ const getComponentOverrides = (mode) => {
     }
   };
 };
-const lightTheme = createTheme$1({
+const lightTheme = createTheme({
   palette: {
     mode: "light",
     primary: lightTokens.colors.primary,
@@ -7282,7 +7282,7 @@ const lightTheme = createTheme$1({
   spacing: spacing$1,
   components: getComponentOverrides("light")
 });
-const darkTheme = createTheme$1({
+const darkTheme = createTheme({
   palette: {
     mode: "dark",
     primary: darkTokens.colors.primary,
@@ -7311,11 +7311,11 @@ const colors = {
   dark: themeTokens.colorSchemes.dark.palette
 };
 const typography = themeTokens.typography;
-const shape$1 = themeTokens.shape;
+const shape = themeTokens.shape;
 const spacing = themeTokens.spacing;
 const tokens = themeTokens;
 const boxClasses = generateUtilityClasses$1("MuiBox", ["root"]);
-const defaultTheme = createTheme$1();
+const defaultTheme = createTheme();
 const Box$1 = createBox({
   themeId: THEME_ID,
   defaultTheme,
@@ -7470,7 +7470,7 @@ const useUtilityClasses$2a = (ownerState) => {
     classes
   } = ownerState;
   const slots = {
-    root: ["root", color2 !== "inherit" && `color${capitalize$2(color2)}`, `fontSize${capitalize$2(fontSize)}`]
+    root: ["root", color2 !== "inherit" && `color${capitalize$1(color2)}`, `fontSize${capitalize$1(fontSize)}`]
   };
   return composeClasses$1(slots, getSvgIconUtilityClass, classes);
 };
@@ -7481,7 +7481,7 @@ const SvgIconRoot = styled("svg", {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.color !== "inherit" && styles2[`color${capitalize$2(ownerState.color)}`], styles2[`fontSize${capitalize$2(ownerState.fontSize)}`]];
+    return [styles2.root, ownerState.color !== "inherit" && styles2[`color${capitalize$1(ownerState.color)}`], styles2[`fontSize${capitalize$1(ownerState.fontSize)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -8173,7 +8173,7 @@ const useUtilityClasses$28 = (ownerState) => {
   } = ownerState;
   const slots = {
     root: ["root"],
-    badge: ["badge", variant, invisible && "invisible", `anchorOrigin${capitalize$2(anchorOrigin.vertical)}${capitalize$2(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize$2(anchorOrigin.vertical)}${capitalize$2(anchorOrigin.horizontal)}${capitalize$2(overlap)}`, `overlap${capitalize$2(overlap)}`, color2 !== "default" && `color${capitalize$2(color2)}`]
+    badge: ["badge", variant, invisible && "invisible", `anchorOrigin${capitalize$1(anchorOrigin.vertical)}${capitalize$1(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize$1(anchorOrigin.vertical)}${capitalize$1(anchorOrigin.horizontal)}${capitalize$1(overlap)}`, `overlap${capitalize$1(overlap)}`, color2 !== "default" && `color${capitalize$1(color2)}`]
   };
   return composeClasses$1(slots, getBadgeUtilityClass, classes);
 };
@@ -8195,7 +8195,7 @@ const BadgeBadge = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.badge, styles2[ownerState.variant], styles2[`anchorOrigin${capitalize$2(ownerState.anchorOrigin.vertical)}${capitalize$2(ownerState.anchorOrigin.horizontal)}${capitalize$2(ownerState.overlap)}`], ownerState.color !== "default" && styles2[`color${capitalize$2(ownerState.color)}`], ownerState.invisible && styles2.invisible];
+    return [styles2.badge, styles2[ownerState.variant], styles2[`anchorOrigin${capitalize$1(ownerState.anchorOrigin.vertical)}${capitalize$1(ownerState.anchorOrigin.horizontal)}${capitalize$1(ownerState.overlap)}`], ownerState.color !== "default" && styles2[`color${capitalize$1(ownerState.color)}`], ownerState.invisible && styles2.invisible];
   }
 })(memoTheme(({
   theme: theme2
@@ -8626,7 +8626,7 @@ const useUtilityClasses$27 = (ownerState) => {
     classes
   } = ownerState;
   const slots = {
-    root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize$2(align)}`, gutterBottom && "gutterBottom", noWrap && "noWrap", paragraph && "paragraph"]
+    root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize$1(align)}`, gutterBottom && "gutterBottom", noWrap && "noWrap", paragraph && "paragraph"]
   };
   return composeClasses$1(slots, getTypographyUtilityClass, classes);
 };
@@ -8637,7 +8637,7 @@ const TypographyRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.variant && styles2[ownerState.variant], ownerState.align !== "inherit" && styles2[`align${capitalize$2(ownerState.align)}`], ownerState.noWrap && styles2.noWrap, ownerState.gutterBottom && styles2.gutterBottom, ownerState.paragraph && styles2.paragraph];
+    return [styles2.root, ownerState.variant && styles2[ownerState.variant], ownerState.align !== "inherit" && styles2[`align${capitalize$1(ownerState.align)}`], ownerState.noWrap && styles2.noWrap, ownerState.gutterBottom && styles2.gutterBottom, ownerState.paragraph && styles2.paragraph];
   }
 })(memoTheme(({
   theme: theme2
@@ -8667,7 +8667,7 @@ const TypographyRoot = styled("span", {
     }
   })), ...Object.entries(theme2.palette?.text || {}).filter(([, value]) => typeof value === "string").map(([color2]) => ({
     props: {
-      color: `text${capitalize$2(color2)}`
+      color: `text${capitalize$1(color2)}`
     },
     style: {
       color: (theme2.vars || theme2).palette.text[color2]
@@ -9913,7 +9913,7 @@ function getNextChildMapping(nextProps, prevChildMapping, onExited) {
   });
   return children;
 }
-var values$1 = Object.values || function(obj) {
+var values = Object.values || function(obj) {
   return Object.keys(obj).map(function(k) {
     return obj[k];
   });
@@ -9977,7 +9977,7 @@ var TransitionGroup = /* @__PURE__ */ (function(_React$Component) {
   _proto.render = function render() {
     var _this$props = this.props, Component = _this$props.component, childFactory2 = _this$props.childFactory, props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
     var contextValue = this.state.contextValue;
-    var children = values$1(this.state.children).map(childFactory2);
+    var children = values(this.state.children).map(childFactory2);
     delete props.appear;
     delete props.enter;
     delete props.exit;
@@ -10870,9 +10870,9 @@ const useUtilityClasses$25 = (ownerState) => {
     disableShrink
   } = ownerState;
   const slots = {
-    root: ["root", variant, `color${capitalize$2(color2)}`],
+    root: ["root", variant, `color${capitalize$1(color2)}`],
     svg: ["svg"],
-    circle: ["circle", `circle${capitalize$2(variant)}`, disableShrink && "circleDisableShrink"]
+    circle: ["circle", `circle${capitalize$1(variant)}`, disableShrink && "circleDisableShrink"]
   };
   return composeClasses$1(slots, getCircularProgressUtilityClass, classes);
 };
@@ -10883,7 +10883,7 @@ const CircularProgressRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[ownerState.variant], styles2[`color${capitalize$2(ownerState.color)}`]];
+    return [styles2.root, styles2[ownerState.variant], styles2[`color${capitalize$1(ownerState.color)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -10927,7 +10927,7 @@ const CircularProgressCircle = styled("circle", {
     const {
       ownerState
     } = props;
-    return [styles2.circle, styles2[`circle${capitalize$2(ownerState.variant)}`], ownerState.disableShrink && styles2.circleDisableShrink];
+    return [styles2.circle, styles2[`circle${capitalize$1(ownerState.variant)}`], ownerState.disableShrink && styles2.circleDisableShrink];
   }
 })(memoTheme(({
   theme: theme2
@@ -11114,9 +11114,9 @@ const useUtilityClasses$24 = (ownerState) => {
     classes
   } = ownerState;
   const slots = {
-    root: ["root", loading && "loading", variant, `${variant}${capitalize$2(color2)}`, `size${capitalize$2(size)}`, `${variant}Size${capitalize$2(size)}`, `color${capitalize$2(color2)}`, disableElevation && "disableElevation", fullWidth && "fullWidth", loading && `loadingPosition${capitalize$2(loadingPosition)}`],
-    startIcon: ["icon", "startIcon", `iconSize${capitalize$2(size)}`],
-    endIcon: ["icon", "endIcon", `iconSize${capitalize$2(size)}`],
+    root: ["root", loading && "loading", variant, `${variant}${capitalize$1(color2)}`, `size${capitalize$1(size)}`, `${variant}Size${capitalize$1(size)}`, `color${capitalize$1(color2)}`, disableElevation && "disableElevation", fullWidth && "fullWidth", loading && `loadingPosition${capitalize$1(loadingPosition)}`],
+    startIcon: ["icon", "startIcon", `iconSize${capitalize$1(size)}`],
+    endIcon: ["icon", "endIcon", `iconSize${capitalize$1(size)}`],
     loadingIndicator: ["loadingIndicator"],
     loadingWrapper: ["loadingWrapper"]
   };
@@ -11163,7 +11163,7 @@ const ButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[ownerState.variant], styles2[`${ownerState.variant}${capitalize$2(ownerState.color)}`], styles2[`size${capitalize$2(ownerState.size)}`], styles2[`${ownerState.variant}Size${capitalize$2(ownerState.size)}`], ownerState.color === "inherit" && styles2.colorInherit, ownerState.disableElevation && styles2.disableElevation, ownerState.fullWidth && styles2.fullWidth, ownerState.loading && styles2.loading];
+    return [styles2.root, styles2[ownerState.variant], styles2[`${ownerState.variant}${capitalize$1(ownerState.color)}`], styles2[`size${capitalize$1(ownerState.size)}`], styles2[`${ownerState.variant}Size${capitalize$1(ownerState.size)}`], ownerState.color === "inherit" && styles2.colorInherit, ownerState.disableElevation && styles2.disableElevation, ownerState.fullWidth && styles2.fullWidth, ownerState.loading && styles2.loading];
   }
 })(memoTheme(({
   theme: theme2
@@ -11372,7 +11372,7 @@ const ButtonStartIcon = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.startIcon, ownerState.loading && styles2.startIconLoadingStart, styles2[`iconSize${capitalize$2(ownerState.size)}`]];
+    return [styles2.startIcon, ownerState.loading && styles2.startIconLoadingStart, styles2[`iconSize${capitalize$1(ownerState.size)}`]];
   }
 })(({
   theme: theme2
@@ -11416,7 +11416,7 @@ const ButtonEndIcon = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.endIcon, ownerState.loading && styles2.endIconLoadingEnd, styles2[`iconSize${capitalize$2(ownerState.size)}`]];
+    return [styles2.endIcon, ownerState.loading && styles2.endIconLoadingEnd, styles2[`iconSize${capitalize$1(ownerState.size)}`]];
   }
 })(({
   theme: theme2
@@ -11810,7 +11810,7 @@ const useUtilityClasses$23 = (ownerState) => {
     edge
   } = ownerState;
   const slots = {
-    root: ["root", checked && "checked", disabled && "disabled", edge && `edge${capitalize$2(edge)}`],
+    root: ["root", checked && "checked", disabled && "disabled", edge && `edge${capitalize$1(edge)}`],
     input: ["input"]
   };
   return composeClasses$1(slots, getSwitchBaseUtilityClass, classes);
@@ -12155,7 +12155,7 @@ const useUtilityClasses$22 = (ownerState) => {
     size
   } = ownerState;
   const slots = {
-    root: ["root", indeterminate && "indeterminate", `color${capitalize$2(color2)}`, `size${capitalize$2(size)}`]
+    root: ["root", indeterminate && "indeterminate", `color${capitalize$1(color2)}`, `size${capitalize$1(size)}`]
   };
   const composedClasses = composeClasses$1(slots, getCheckboxUtilityClass, classes);
   return {
@@ -12172,7 +12172,7 @@ const CheckboxRoot = styled(SwitchBase, {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.indeterminate && styles2.indeterminate, styles2[`size${capitalize$2(ownerState.size)}`], ownerState.color !== "default" && styles2[`color${capitalize$2(ownerState.color)}`]];
+    return [styles2.root, ownerState.indeterminate && styles2.indeterminate, styles2[`size${capitalize$1(ownerState.size)}`], ownerState.color !== "default" && styles2[`color${capitalize$1(ownerState.color)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -12464,11 +12464,11 @@ const useUtilityClasses$21 = (ownerState) => {
     variant
   } = ownerState;
   const slots = {
-    root: ["root", variant, disabled && "disabled", `size${capitalize$2(size)}`, `color${capitalize$2(color2)}`, clickable && "clickable", clickable && `clickableColor${capitalize$2(color2)}`, onDelete && "deletable", onDelete && `deletableColor${capitalize$2(color2)}`, `${variant}${capitalize$2(color2)}`],
-    label: ["label", `label${capitalize$2(size)}`],
-    avatar: ["avatar", `avatar${capitalize$2(size)}`, `avatarColor${capitalize$2(color2)}`],
-    icon: ["icon", `icon${capitalize$2(size)}`, `iconColor${capitalize$2(iconColor)}`],
-    deleteIcon: ["deleteIcon", `deleteIcon${capitalize$2(size)}`, `deleteIconColor${capitalize$2(color2)}`, `deleteIcon${capitalize$2(variant)}Color${capitalize$2(color2)}`]
+    root: ["root", variant, disabled && "disabled", `size${capitalize$1(size)}`, `color${capitalize$1(color2)}`, clickable && "clickable", clickable && `clickableColor${capitalize$1(color2)}`, onDelete && "deletable", onDelete && `deletableColor${capitalize$1(color2)}`, `${variant}${capitalize$1(color2)}`],
+    label: ["label", `label${capitalize$1(size)}`],
+    avatar: ["avatar", `avatar${capitalize$1(size)}`, `avatarColor${capitalize$1(color2)}`],
+    icon: ["icon", `icon${capitalize$1(size)}`, `iconColor${capitalize$1(iconColor)}`],
+    deleteIcon: ["deleteIcon", `deleteIcon${capitalize$1(size)}`, `deleteIconColor${capitalize$1(color2)}`, `deleteIcon${capitalize$1(variant)}Color${capitalize$1(color2)}`]
   };
   return composeClasses$1(slots, getChipUtilityClass, classes);
 };
@@ -12490,24 +12490,24 @@ const ChipRoot = styled("div", {
     return [{
       [`& .${chipClasses.avatar}`]: styles2.avatar
     }, {
-      [`& .${chipClasses.avatar}`]: styles2[`avatar${capitalize$2(size)}`]
+      [`& .${chipClasses.avatar}`]: styles2[`avatar${capitalize$1(size)}`]
     }, {
-      [`& .${chipClasses.avatar}`]: styles2[`avatarColor${capitalize$2(color2)}`]
+      [`& .${chipClasses.avatar}`]: styles2[`avatarColor${capitalize$1(color2)}`]
     }, {
       [`& .${chipClasses.icon}`]: styles2.icon
     }, {
-      [`& .${chipClasses.icon}`]: styles2[`icon${capitalize$2(size)}`]
+      [`& .${chipClasses.icon}`]: styles2[`icon${capitalize$1(size)}`]
     }, {
-      [`& .${chipClasses.icon}`]: styles2[`iconColor${capitalize$2(iconColor)}`]
+      [`& .${chipClasses.icon}`]: styles2[`iconColor${capitalize$1(iconColor)}`]
     }, {
       [`& .${chipClasses.deleteIcon}`]: styles2.deleteIcon
     }, {
-      [`& .${chipClasses.deleteIcon}`]: styles2[`deleteIcon${capitalize$2(size)}`]
+      [`& .${chipClasses.deleteIcon}`]: styles2[`deleteIcon${capitalize$1(size)}`]
     }, {
-      [`& .${chipClasses.deleteIcon}`]: styles2[`deleteIconColor${capitalize$2(color2)}`]
+      [`& .${chipClasses.deleteIcon}`]: styles2[`deleteIconColor${capitalize$1(color2)}`]
     }, {
-      [`& .${chipClasses.deleteIcon}`]: styles2[`deleteIcon${capitalize$2(variant)}Color${capitalize$2(color2)}`]
-    }, styles2.root, styles2[`size${capitalize$2(size)}`], styles2[`color${capitalize$2(color2)}`], clickable && styles2.clickable, clickable && color2 !== "default" && styles2[`clickableColor${capitalize$2(color2)})`], onDelete && styles2.deletable, onDelete && color2 !== "default" && styles2[`deletableColor${capitalize$2(color2)}`], styles2[variant], styles2[`${variant}${capitalize$2(color2)}`]];
+      [`& .${chipClasses.deleteIcon}`]: styles2[`deleteIcon${capitalize$1(variant)}Color${capitalize$1(color2)}`]
+    }, styles2.root, styles2[`size${capitalize$1(size)}`], styles2[`color${capitalize$1(color2)}`], clickable && styles2.clickable, clickable && color2 !== "default" && styles2[`clickableColor${capitalize$1(color2)})`], onDelete && styles2.deletable, onDelete && color2 !== "default" && styles2[`deletableColor${capitalize$1(color2)}`], styles2[variant], styles2[`${variant}${capitalize$1(color2)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -12740,7 +12740,7 @@ const ChipLabel = styled("span", {
     const {
       size
     } = ownerState;
-    return [styles2.label, styles2[`label${capitalize$2(size)}`]];
+    return [styles2.label, styles2[`label${capitalize$1(size)}`]];
   }
 })({
   overflow: "hidden",
@@ -13131,7 +13131,7 @@ const Container$1 = createContainer({
       const {
         ownerState
       } = props;
-      return [styles2.root, styles2[`maxWidth${capitalize$2(String(ownerState.maxWidth))}`], ownerState.fixed && styles2.fixed, ownerState.disableGutters && styles2.disableGutters];
+      return [styles2.root, styles2[`maxWidth${capitalize$1(String(ownerState.maxWidth))}`], ownerState.fixed && styles2.fixed, ownerState.disableGutters && styles2.disableGutters];
     }
   }),
   useThemeProps: (inProps) => useDefaultProps({
@@ -13527,7 +13527,7 @@ const useUtilityClasses$1$ = (ownerState) => {
     fullWidth
   } = ownerState;
   const slots = {
-    root: ["root", margin2 !== "none" && `margin${capitalize$2(margin2)}`, fullWidth && "fullWidth"]
+    root: ["root", margin2 !== "none" && `margin${capitalize$1(margin2)}`, fullWidth && "fullWidth"]
   };
   return composeClasses$1(slots, getFormControlUtilityClasses, classes);
 };
@@ -13538,7 +13538,7 @@ const FormControlRoot = styled("div", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`margin${capitalize$2(ownerState.margin)}`], ownerState.fullWidth && styles2.fullWidth];
+    return [styles2.root, styles2[`margin${capitalize$1(ownerState.margin)}`], ownerState.fullWidth && styles2.fullWidth];
   }
 })({
   display: "inline-flex",
@@ -13809,7 +13809,7 @@ const useUtilityClasses$1_ = (ownerState) => {
     required
   } = ownerState;
   const slots = {
-    root: ["root", disabled && "disabled", `labelPlacement${capitalize$2(labelPlacement)}`, error && "error", required && "required"],
+    root: ["root", disabled && "disabled", `labelPlacement${capitalize$1(labelPlacement)}`, error && "error", required && "required"],
     label: ["label", disabled && "disabled"],
     asterisk: ["asterisk", error && "error"]
   };
@@ -13824,7 +13824,7 @@ const FormControlLabelRoot = styled("label", {
     } = props;
     return [{
       [`& .${formControlLabelClasses.label}`]: styles2.label
-    }, styles2.root, styles2[`labelPlacement${capitalize$2(ownerState.labelPlacement)}`]];
+    }, styles2.root, styles2[`labelPlacement${capitalize$1(ownerState.labelPlacement)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -14317,7 +14317,7 @@ const useUtilityClasses$1Y = (ownerState) => {
     classes
   } = ownerState;
   const slots = {
-    root: ["root", color2 !== "inherit" && `color${capitalize$2(color2)}`, `fontSize${capitalize$2(fontSize)}`]
+    root: ["root", color2 !== "inherit" && `color${capitalize$1(color2)}`, `fontSize${capitalize$1(fontSize)}`]
   };
   return composeClasses$1(slots, getIconUtilityClass, classes);
 };
@@ -14328,7 +14328,7 @@ const IconRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.color !== "inherit" && styles2[`color${capitalize$2(ownerState.color)}`], styles2[`fontSize${capitalize$2(ownerState.fontSize)}`]];
+    return [styles2.root, ownerState.color !== "inherit" && styles2[`color${capitalize$1(ownerState.color)}`], styles2[`fontSize${capitalize$1(ownerState.fontSize)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -14544,7 +14544,7 @@ const useUtilityClasses$1X = (ownerState) => {
     loading
   } = ownerState;
   const slots = {
-    root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize$2(color2)}`, edge && `edge${capitalize$2(edge)}`, `size${capitalize$2(size)}`],
+    root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize$1(color2)}`, edge && `edge${capitalize$1(edge)}`, `size${capitalize$1(size)}`],
     loadingIndicator: ["loadingIndicator"],
     loadingWrapper: ["loadingWrapper"]
   };
@@ -14557,7 +14557,7 @@ const IconButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.loading && styles2.loading, ownerState.color !== "default" && styles2[`color${capitalize$2(ownerState.color)}`], ownerState.edge && styles2[`edge${capitalize$2(ownerState.edge)}`], styles2[`size${capitalize$2(ownerState.size)}`]];
+    return [styles2.root, ownerState.loading && styles2.loading, ownerState.color !== "default" && styles2[`color${capitalize$1(ownerState.color)}`], ownerState.edge && styles2[`edge${capitalize$1(ownerState.edge)}`], styles2[`size${capitalize$1(ownerState.size)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -14918,10 +14918,10 @@ const useUtilityClasses$1W = (ownerState) => {
     color: color2
   } = ownerState;
   const slots = {
-    root: ["root", `color${capitalize$2(color2)}`, variant],
-    dashed: ["dashed", `dashedColor${capitalize$2(color2)}`],
-    bar1: ["bar", "bar1", `barColor${capitalize$2(color2)}`, (variant === "indeterminate" || variant === "query") && "bar1Indeterminate", variant === "determinate" && "bar1Determinate", variant === "buffer" && "bar1Buffer"],
-    bar2: ["bar", "bar2", variant !== "buffer" && `barColor${capitalize$2(color2)}`, variant === "buffer" && `color${capitalize$2(color2)}`, (variant === "indeterminate" || variant === "query") && "bar2Indeterminate", variant === "buffer" && "bar2Buffer"]
+    root: ["root", `color${capitalize$1(color2)}`, variant],
+    dashed: ["dashed", `dashedColor${capitalize$1(color2)}`],
+    bar1: ["bar", "bar1", `barColor${capitalize$1(color2)}`, (variant === "indeterminate" || variant === "query") && "bar1Indeterminate", variant === "determinate" && "bar1Determinate", variant === "buffer" && "bar1Buffer"],
+    bar2: ["bar", "bar2", variant !== "buffer" && `barColor${capitalize$1(color2)}`, variant === "buffer" && `color${capitalize$1(color2)}`, (variant === "indeterminate" || variant === "query") && "bar2Indeterminate", variant === "buffer" && "bar2Buffer"]
   };
   return composeClasses$1(slots, getLinearProgressUtilityClass, classes);
 };
@@ -14938,7 +14938,7 @@ const LinearProgressRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`color${capitalize$2(ownerState.color)}`], styles2[ownerState.variant]];
+    return [styles2.root, styles2[`color${capitalize$1(ownerState.color)}`], styles2[ownerState.variant]];
   }
 })(memoTheme(({
   theme: theme2
@@ -14998,7 +14998,7 @@ const LinearProgressDashed = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.dashed, styles2[`dashedColor${capitalize$2(ownerState.color)}`]];
+    return [styles2.dashed, styles2[`dashedColor${capitalize$1(ownerState.color)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -15039,7 +15039,7 @@ const LinearProgressBar1 = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.bar, styles2.bar1, styles2[`barColor${capitalize$2(ownerState.color)}`], (ownerState.variant === "indeterminate" || ownerState.variant === "query") && styles2.bar1Indeterminate, ownerState.variant === "determinate" && styles2.bar1Determinate, ownerState.variant === "buffer" && styles2.bar1Buffer];
+    return [styles2.bar, styles2.bar1, styles2[`barColor${capitalize$1(ownerState.color)}`], (ownerState.variant === "indeterminate" || ownerState.variant === "query") && styles2.bar1Indeterminate, ownerState.variant === "determinate" && styles2.bar1Determinate, ownerState.variant === "buffer" && styles2.bar1Buffer];
   }
 })(memoTheme(({
   theme: theme2
@@ -15103,7 +15103,7 @@ const LinearProgressBar2 = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.bar, styles2.bar2, styles2[`barColor${capitalize$2(ownerState.color)}`], (ownerState.variant === "indeterminate" || ownerState.variant === "query") && styles2.bar2Indeterminate, ownerState.variant === "buffer" && styles2.bar2Buffer];
+    return [styles2.bar, styles2.bar2, styles2[`barColor${capitalize$1(ownerState.color)}`], (ownerState.variant === "indeterminate" || ownerState.variant === "query") && styles2.bar2Indeterminate, ownerState.variant === "buffer" && styles2.bar2Buffer];
   }
 })(memoTheme(({
   theme: theme2
@@ -15187,7 +15187,7 @@ const LinearProgress$1 = /* @__PURE__ */ React.forwardRef(function LinearProgres
     variant
   };
   const classes = useUtilityClasses$1W(ownerState);
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const rootProps = {};
   const inlineStyles = {
     bar1: {},
@@ -15345,8 +15345,8 @@ const getTextDecoration = ({
   ownerState
 }) => {
   const transformedColor = ownerState.color;
-  const color2 = getPath$1(theme2, `palette.${transformedColor}.main`, false) || getPath$1(theme2, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = getPath$1(theme2, `palette.${transformedColor}.mainChannel`) || getPath$1(theme2, `palette.${transformedColor}Channel`);
+  const color2 = getPath(theme2, `palette.${transformedColor}.main`, false) || getPath(theme2, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = getPath(theme2, `palette.${transformedColor}.mainChannel`) || getPath(theme2, `palette.${transformedColor}Channel`);
   if ("vars" in theme2 && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }
@@ -15371,7 +15371,7 @@ const useUtilityClasses$1V = (ownerState) => {
     underline
   } = ownerState;
   const slots = {
-    root: ["root", `underline${capitalize$2(underline)}`, component === "button" && "button", focusVisible && "focusVisible"]
+    root: ["root", `underline${capitalize$1(underline)}`, component === "button" && "button", focusVisible && "focusVisible"]
   };
   return composeClasses$1(slots, getLinkUtilityClass, classes);
 };
@@ -15382,7 +15382,7 @@ const LinkRoot = styled(Typography$1, {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`underline${capitalize$2(ownerState.underline)}`], ownerState.component === "button" && styles2.button];
+    return [styles2.root, styles2[`underline${capitalize$1(ownerState.underline)}`], ownerState.component === "button" && styles2.button];
   }
 })(memoTheme(({
   theme: theme2
@@ -16599,7 +16599,7 @@ const useUtilityClasses$1Q = (ownerState) => {
     size
   } = ownerState;
   const slots = {
-    root: ["root", `color${capitalize$2(color2)}`, size !== "medium" && `size${capitalize$2(size)}`]
+    root: ["root", `color${capitalize$1(color2)}`, size !== "medium" && `size${capitalize$1(size)}`]
   };
   return {
     ...classes,
@@ -16614,7 +16614,7 @@ const RadioRoot = styled(SwitchBase, {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.size !== "medium" && styles2[`size${capitalize$2(ownerState.size)}`], styles2[`color${capitalize$2(ownerState.color)}`]];
+    return [styles2.root, ownerState.size !== "medium" && styles2[`size${capitalize$1(ownerState.size)}`], styles2[`color${capitalize$1(ownerState.color)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -19687,7 +19687,7 @@ const Menu$1 = /* @__PURE__ */ React.forwardRef(function Menu(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const ownerState = {
     ...props,
     autoFocus,
@@ -19945,7 +19945,7 @@ const useUtilityClasses$1J = (ownerState) => {
   } = ownerState;
   const slots = {
     select: ["select", variant, disabled && "disabled", multiple && "multiple", error && "error"],
-    icon: ["icon", `icon${capitalize$2(variant)}`, open && "iconOpen", disabled && "disabled"]
+    icon: ["icon", `icon${capitalize$1(variant)}`, open && "iconOpen", disabled && "disabled"]
   };
   return composeClasses$1(slots, getNativeSelectUtilityClasses, classes);
 };
@@ -20074,7 +20074,7 @@ const NativeSelectIcon = styled(StyledSelectIcon, {
     const {
       ownerState
     } = props;
-    return [styles2.icon, ownerState.variant && styles2[`icon${capitalize$2(ownerState.variant)}`], ownerState.open && styles2.iconOpen];
+    return [styles2.icon, ownerState.variant && styles2[`icon${capitalize$1(ownerState.variant)}`], ownerState.open && styles2.iconOpen];
   }
 })({});
 const NativeSelectInput = /* @__PURE__ */ React.forwardRef(function NativeSelectInput2(props, ref) {
@@ -20210,7 +20210,7 @@ const SelectIcon = styled(StyledSelectIcon, {
     const {
       ownerState
     } = props;
-    return [styles2.icon, ownerState.variant && styles2[`icon${capitalize$2(ownerState.variant)}`], ownerState.open && styles2.iconOpen];
+    return [styles2.icon, ownerState.variant && styles2[`icon${capitalize$1(ownerState.variant)}`], ownerState.open && styles2.iconOpen];
   }
 })({});
 const SelectNativeInput = styled("input", {
@@ -20247,7 +20247,7 @@ const useUtilityClasses$1I = (ownerState) => {
   } = ownerState;
   const slots = {
     select: ["select", variant, disabled && "disabled", multiple && "multiple", error && "error"],
-    icon: ["icon", `icon${capitalize$2(variant)}`, open && "iconOpen", disabled && "disabled"],
+    icon: ["icon", `icon${capitalize$1(variant)}`, open && "iconOpen", disabled && "disabled"],
     nativeInput: ["nativeInput"]
   };
   return composeClasses$1(slots, getSelectUtilityClasses, classes);
@@ -20478,7 +20478,7 @@ const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props
     let selected;
     if (multiple) {
       if (!Array.isArray(value)) {
-        throw new Error(process.env.NODE_ENV !== "production" ? "MUI: The `value` prop must be an array when using the `Select` component with `multiple`." : formatMuiErrorMessage$2(2));
+        throw new Error(process.env.NODE_ENV !== "production" ? "MUI: The `value` prop must be an array when using the `Select` component with `multiple`." : formatMuiErrorMessage$1(2));
       }
       selected = value.some((v) => areEqualValues(v, child.props.value));
       if (selected && computeDisplay) {
@@ -20797,7 +20797,7 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
 const ArrowDropDownIcon$1 = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), "ArrowDropDown");
-function getStyleValue$1(value) {
+function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
 const styles$2 = {
@@ -20860,8 +20860,8 @@ const TextareaAutosize = /* @__PURE__ */ React.forwardRef(function TextareaAutos
       hiddenTextarea.value += " ";
     }
     const boxSizing2 = computedStyle.boxSizing;
-    const padding2 = getStyleValue$1(computedStyle.paddingBottom) + getStyleValue$1(computedStyle.paddingTop);
-    const border2 = getStyleValue$1(computedStyle.borderBottomWidth) + getStyleValue$1(computedStyle.borderTopWidth);
+    const padding2 = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
+    const border2 = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
     const innerHeight = hiddenTextarea.scrollHeight;
     hiddenTextarea.value = "x";
     const singleRowHeight = hiddenTextarea.scrollHeight;
@@ -21012,7 +21012,7 @@ const rootOverridesResolver = (props, styles2) => {
   const {
     ownerState
   } = props;
-  return [styles2.root, ownerState.formControl && styles2.formControl, ownerState.startAdornment && styles2.adornedStart, ownerState.endAdornment && styles2.adornedEnd, ownerState.error && styles2.error, ownerState.size === "small" && styles2.sizeSmall, ownerState.multiline && styles2.multiline, ownerState.color && styles2[`color${capitalize$2(ownerState.color)}`], ownerState.fullWidth && styles2.fullWidth, ownerState.hiddenLabel && styles2.hiddenLabel];
+  return [styles2.root, ownerState.formControl && styles2.formControl, ownerState.startAdornment && styles2.adornedStart, ownerState.endAdornment && styles2.adornedEnd, ownerState.error && styles2.error, ownerState.size === "small" && styles2.sizeSmall, ownerState.multiline && styles2.multiline, ownerState.color && styles2[`color${capitalize$1(ownerState.color)}`], ownerState.fullWidth && styles2.fullWidth, ownerState.hiddenLabel && styles2.hiddenLabel];
 };
 const inputOverridesResolver = (props, styles2) => {
   const {
@@ -21038,7 +21038,7 @@ const useUtilityClasses$1H = (ownerState) => {
     type
   } = ownerState;
   const slots = {
-    root: ["root", `color${capitalize$2(color2)}`, disabled && "disabled", error && "error", fullWidth && "fullWidth", focused && "focused", formControl && "formControl", size && size !== "medium" && `size${capitalize$2(size)}`, multiline && "multiline", startAdornment && "adornedStart", endAdornment && "adornedEnd", hiddenLabel && "hiddenLabel", readOnly && "readOnly"],
+    root: ["root", `color${capitalize$1(color2)}`, disabled && "disabled", error && "error", fullWidth && "fullWidth", focused && "focused", formControl && "formControl", size && size !== "medium" && `size${capitalize$1(size)}`, multiline && "multiline", startAdornment && "adornedStart", endAdornment && "adornedEnd", hiddenLabel && "hiddenLabel", readOnly && "readOnly"],
     input: ["input", disabled && "disabled", type === "search" && "inputTypeSearch", multiline && "inputMultiline", size === "small" && "inputSizeSmall", hiddenLabel && "inputHiddenLabel", startAdornment && "inputAdornedStart", endAdornment && "inputAdornedEnd", readOnly && "readOnly"]
   };
   return composeClasses$1(slots, getInputBaseUtilityClass, classes);
@@ -21350,7 +21350,7 @@ const InputBase = /* @__PURE__ */ React.forwardRef(function InputBase2(inProps,
     if (!isControlled) {
       const element = event.target || inputRef.current;
       if (element == null) {
-        throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info." : formatMuiErrorMessage$2(1));
+        throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info." : formatMuiErrorMessage$1(1));
       }
       checkDirty({
         value: element.value
@@ -21865,7 +21865,7 @@ const Input = /* @__PURE__ */ React.forwardRef(function Input2(inProps, ref) {
       ownerState
     }
   };
-  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge$1(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? InputRoot;
   const InputSlot = slots.input ?? components.Input ?? InputInput;
   return /* @__PURE__ */ jsx(InputBase, {
@@ -22087,7 +22087,7 @@ const useUtilityClasses$1F = (ownerState) => {
     multiline
   } = ownerState;
   const slots = {
-    root: ["root", !disableUnderline && "underline", startAdornment && "adornedStart", endAdornment && "adornedEnd", size === "small" && `size${capitalize$2(size)}`, hiddenLabel && "hiddenLabel", multiline && "multiline"],
+    root: ["root", !disableUnderline && "underline", startAdornment && "adornedStart", endAdornment && "adornedEnd", size === "small" && `size${capitalize$1(size)}`, hiddenLabel && "hiddenLabel", multiline && "multiline"],
     input: ["input"]
   };
   const composedClasses = composeClasses$1(slots, getFilledInputUtilityClass, classes);
@@ -22364,7 +22364,7 @@ const FilledInput = /* @__PURE__ */ React.forwardRef(function FilledInput2(inPro
       ownerState
     }
   };
-  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge$1(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
+  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
   const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
   return /* @__PURE__ */ jsx(InputBase, {
@@ -23252,7 +23252,7 @@ const Select$1 = /* @__PURE__ */ React.forwardRef(function Select(inProps, ref)
           }
         },
         ...inputProps,
-        classes: inputProps ? deepmerge$1(restOfClasses, inputProps.classes) : restOfClasses,
+        classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses,
         ...input ? input.props.inputProps : {}
       },
       ...(multiple && native || displayEmpty) && variant === "outlined" ? {
@@ -24457,7 +24457,7 @@ const SliderRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`color${capitalize$2(ownerState.color)}`], ownerState.size !== "medium" && styles2[`size${capitalize$2(ownerState.size)}`], ownerState.marked && styles2.marked, ownerState.orientation === "vertical" && styles2.vertical, ownerState.track === "inverted" && styles2.trackInverted, ownerState.track === false && styles2.trackFalse];
+    return [styles2.root, styles2[`color${capitalize$1(ownerState.color)}`], ownerState.size !== "medium" && styles2[`size${capitalize$1(ownerState.size)}`], ownerState.marked && styles2.marked, ownerState.orientation === "vertical" && styles2.vertical, ownerState.track === "inverted" && styles2.trackInverted, ownerState.track === false && styles2.trackFalse];
   }
 })(memoTheme(({
   theme: theme2
@@ -24668,7 +24668,7 @@ const SliderThumb = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.thumb, styles2[`thumbColor${capitalize$2(ownerState.color)}`], ownerState.size !== "medium" && styles2[`thumbSize${capitalize$2(ownerState.size)}`]];
+    return [styles2.thumb, styles2[`thumbColor${capitalize$1(ownerState.color)}`], ownerState.size !== "medium" && styles2[`thumbSize${capitalize$1(ownerState.size)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -24968,7 +24968,7 @@ const useUtilityClasses$1B = (ownerState) => {
     size
   } = ownerState;
   const slots = {
-    root: ["root", disabled && "disabled", dragging && "dragging", marked && "marked", orientation === "vertical" && "vertical", track === "inverted" && "trackInverted", track === false && "trackFalse", color2 && `color${capitalize$2(color2)}`, size && `size${capitalize$2(size)}`],
+    root: ["root", disabled && "disabled", dragging && "dragging", marked && "marked", orientation === "vertical" && "vertical", track === "inverted" && "trackInverted", track === false && "trackFalse", color2 && `color${capitalize$1(color2)}`, size && `size${capitalize$1(size)}`],
     rail: ["rail"],
     track: ["track"],
     mark: ["mark"],
@@ -24976,7 +24976,7 @@ const useUtilityClasses$1B = (ownerState) => {
     markLabel: ["markLabel"],
     markLabelActive: ["markLabelActive"],
     valueLabel: ["valueLabel"],
-    thumb: ["thumb", disabled && "disabled", size && `thumbSize${capitalize$2(size)}`, color2 && `thumbColor${capitalize$2(color2)}`],
+    thumb: ["thumb", disabled && "disabled", size && `thumbSize${capitalize$1(size)}`, color2 && `thumbColor${capitalize$1(color2)}`],
     active: ["active"],
     disabled: ["disabled"],
     focusVisible: ["focusVisible"]
@@ -24991,7 +24991,7 @@ const Slider$1 = /* @__PURE__ */ React.forwardRef(function Slider(inputProps, re
     props: inputProps,
     name: "MuiSlider"
   });
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const {
     "aria-label": ariaLabel,
     "aria-valuetext": ariaValuetext,
@@ -25591,8 +25591,8 @@ const useUtilityClasses$1A = (ownerState) => {
     disabled
   } = ownerState;
   const slots = {
-    root: ["root", edge && `edge${capitalize$2(edge)}`, `size${capitalize$2(size)}`],
-    switchBase: ["switchBase", `color${capitalize$2(color2)}`, checked && "checked", disabled && "disabled"],
+    root: ["root", edge && `edge${capitalize$1(edge)}`, `size${capitalize$1(size)}`],
+    switchBase: ["switchBase", `color${capitalize$1(color2)}`, checked && "checked", disabled && "disabled"],
     thumb: ["thumb"],
     track: ["track"],
     input: ["input"]
@@ -25611,7 +25611,7 @@ const SwitchRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.edge && styles2[`edge${capitalize$2(ownerState.edge)}`], styles2[`size${capitalize$2(ownerState.size)}`]];
+    return [styles2.root, ownerState.edge && styles2[`edge${capitalize$1(ownerState.edge)}`], styles2[`size${capitalize$1(ownerState.size)}`]];
   }
 })({
   display: "inline-flex",
@@ -25673,7 +25673,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
     } = props;
     return [styles2.switchBase, {
       [`& .${switchClasses.input}`]: styles2.input
-    }, ownerState.color !== "default" && styles2[`color${capitalize$2(ownerState.color)}`]];
+    }, ownerState.color !== "default" && styles2[`color${capitalize$1(ownerState.color)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -26023,7 +26023,7 @@ const useUtilityClasses$1z = (ownerState) => {
     required
   } = ownerState;
   const slots = {
-    root: ["root", `color${capitalize$2(color2)}`, disabled && "disabled", error && "error", filled && "filled", focused && "focused", required && "required"],
+    root: ["root", `color${capitalize$1(color2)}`, disabled && "disabled", error && "error", filled && "filled", focused && "focused", required && "required"],
     asterisk: ["asterisk", error && "error"]
   };
   return composeClasses$1(slots, getFormLabelUtilityClasses, classes);
@@ -26193,7 +26193,7 @@ const useUtilityClasses$1y = (ownerState) => {
     required
   } = ownerState;
   const slots = {
-    root: ["root", formControl && "formControl", !disableAnimation && "animated", shrink && "shrink", size && size !== "normal" && `size${capitalize$2(size)}`, variant],
+    root: ["root", formControl && "formControl", !disableAnimation && "animated", shrink && "shrink", size && size !== "normal" && `size${capitalize$1(size)}`, variant],
     asterisk: [required && "asterisk"]
   };
   const composedClasses = composeClasses$1(slots, getInputLabelUtilityClasses, classes);
@@ -26465,7 +26465,7 @@ const useUtilityClasses$1x = (ownerState) => {
     required
   } = ownerState;
   const slots = {
-    root: ["root", disabled && "disabled", error && "error", size && `size${capitalize$2(size)}`, contained && "contained", focused && "focused", filled && "filled", required && "required"]
+    root: ["root", disabled && "disabled", error && "error", size && `size${capitalize$1(size)}`, contained && "contained", focused && "focused", filled && "filled", required && "required"]
   };
   return composeClasses$1(slots, getFormHelperTextUtilityClasses, classes);
 };
@@ -26476,7 +26476,7 @@ const FormHelperTextRoot = styled("p", {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.size && styles2[`size${capitalize$2(ownerState.size)}`], ownerState.contained && styles2.contained, ownerState.filled && styles2.filled];
+    return [styles2.root, ownerState.size && styles2[`size${capitalize$1(ownerState.size)}`], ownerState.contained && styles2.contained, ownerState.filled && styles2.filled];
   }
 })(memoTheme(({
   theme: theme2
@@ -27288,7 +27288,7 @@ function isShadowRoot(node) {
   var OwnElement = getWindow(node).ShadowRoot;
   return node instanceof OwnElement || node instanceof ShadowRoot;
 }
-function applyStyles$1(_ref) {
+function applyStyles(_ref) {
   var state = _ref.state;
   Object.keys(state.elements).forEach(function(name) {
     var style2 = state.styles[name] || {};
@@ -27346,11 +27346,11 @@ function effect$2(_ref2) {
     });
   };
 }
-const applyStyles$2 = {
+const applyStyles$1 = {
   name: "applyStyles",
   enabled: true,
   phase: "write",
-  fn: applyStyles$1,
+  fn: applyStyles,
   effect: effect$2,
   requires: ["computeStyles"]
 };
@@ -28574,7 +28574,7 @@ function popperGenerator(generatorOptions) {
     return instance;
   };
 }
-var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$2, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
+var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
 var createPopper = /* @__PURE__ */ popperGenerator({
   defaultModifiers
 });
@@ -28934,7 +28934,7 @@ const PopperRoot = styled(Popper$1, {
   overridesResolver: (props, styles2) => styles2.root
 })({});
 const Popper2 = /* @__PURE__ */ React.forwardRef(function Popper3(inProps, ref) {
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const props = useDefaultProps({
     props: inProps,
     name: "MuiPopper"
@@ -29130,7 +29130,7 @@ const useUtilityClasses$1t = (ownerState) => {
   } = ownerState;
   const slots = {
     popper: ["popper", !disableInteractive && "popperInteractive", arrow2 && "popperArrow"],
-    tooltip: ["tooltip", arrow2 && "tooltipArrow", touch && "touch", `tooltipPlacement${capitalize$2(placement.split("-")[0])}`],
+    tooltip: ["tooltip", arrow2 && "tooltipArrow", touch && "touch", `tooltipPlacement${capitalize$1(placement.split("-")[0])}`],
     arrow: ["arrow"]
   };
   return composeClasses$1(slots, getTooltipUtilityClass, classes);
@@ -29246,7 +29246,7 @@ const TooltipTooltip = styled("div", {
     const {
       ownerState
     } = props;
-    return [styles2.tooltip, ownerState.touch && styles2.touch, ownerState.arrow && styles2.tooltipArrow, styles2[`tooltipPlacement${capitalize$2(ownerState.placement.split("-")[0])}`]];
+    return [styles2.tooltip, ownerState.touch && styles2.touch, ownerState.arrow && styles2.tooltipArrow, styles2[`tooltipPlacement${capitalize$1(ownerState.placement.split("-")[0])}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -29438,7 +29438,7 @@ const Tooltip$1 = /* @__PURE__ */ React.forwardRef(function Tooltip(inProps, ref
     children: childrenProp
   });
   const theme2 = useTheme();
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
@@ -31180,7 +31180,7 @@ const useUtilityClasses$1n = (ownerState) => {
     classes
   } = ownerState;
   const slots = {
-    root: ["root", `color${capitalize$2(color2 || severity)}`, `${variant}${capitalize$2(color2 || severity)}`, `${variant}`],
+    root: ["root", `color${capitalize$1(color2 || severity)}`, `${variant}${capitalize$1(color2 || severity)}`, `${variant}`],
     icon: ["icon"],
     message: ["message"],
     action: ["action"]
@@ -31194,7 +31194,7 @@ const AlertRoot = styled(Paper$1, {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[ownerState.variant], styles2[`${ownerState.variant}${capitalize$2(ownerState.color || ownerState.severity)}`]];
+    return [styles2.root, styles2[ownerState.variant], styles2[`${ownerState.variant}${capitalize$1(ownerState.color || ownerState.severity)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -31673,7 +31673,7 @@ const useUtilityClasses$1m = (ownerState) => {
     classes
   } = ownerState;
   const slots = {
-    root: ["root", `color${capitalize$2(color2)}`, `position${capitalize$2(position)}`]
+    root: ["root", `color${capitalize$1(color2)}`, `position${capitalize$1(position)}`]
   };
   return composeClasses$1(slots, getAppBarUtilityClass, classes);
 };
@@ -31685,7 +31685,7 @@ const AppBarRoot = styled(Paper$1, {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`position${capitalize$2(ownerState.position)}`], styles2[`color${capitalize$2(ownerState.color)}`]];
+    return [styles2.root, styles2[`position${capitalize$1(ownerState.position)}`], styles2[`color${capitalize$1(ownerState.color)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -32810,7 +32810,7 @@ const useUtilityClasses$1l = (ownerState) => {
     disableSticky
   } = ownerState;
   const slots = {
-    root: ["root", color2 !== "default" && `color${capitalize$2(color2)}`, !disableGutters && "gutters", inset && "inset", !disableSticky && "sticky"]
+    root: ["root", color2 !== "default" && `color${capitalize$1(color2)}`, !disableGutters && "gutters", inset && "inset", !disableSticky && "sticky"]
   };
   return composeClasses$1(slots, getListSubheaderUtilityClass, classes);
 };
@@ -32821,7 +32821,7 @@ const ListSubheaderRoot = styled("li", {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.color !== "default" && styles2[`color${capitalize$2(ownerState.color)}`], !ownerState.disableGutters && styles2.gutters, ownerState.inset && styles2.inset, !ownerState.disableSticky && styles2.sticky];
+    return [styles2.root, ownerState.color !== "default" && styles2[`color${capitalize$1(ownerState.color)}`], !ownerState.disableGutters && styles2.gutters, ownerState.inset && styles2.inset, !ownerState.disableSticky && styles2.sticky];
   }
 })(memoTheme(({
   theme: theme2
@@ -32977,7 +32977,7 @@ const useUtilityClasses$1k = (ownerState) => {
     root: ["root", expanded && "expanded", focused && "focused", fullWidth && "fullWidth", hasClearIcon && "hasClearIcon", hasPopupIcon && "hasPopupIcon"],
     inputRoot: ["inputRoot"],
     input: ["input", inputFocused && "inputFocused"],
-    tag: ["tag", `tagSize${capitalize$2(size)}`],
+    tag: ["tag", `tagSize${capitalize$1(size)}`],
     endAdornment: ["endAdornment"],
     clearIndicator: ["clearIndicator"],
     popupIndicator: ["popupIndicator", popupOpen && "popupIndicatorOpen"],
@@ -33009,7 +33009,7 @@ const AutocompleteRoot = styled("div", {
     return [{
       [`& .${autocompleteClasses.tag}`]: styles2.tag
     }, {
-      [`& .${autocompleteClasses.tag}`]: styles2[`tagSize${capitalize$2(size)}`]
+      [`& .${autocompleteClasses.tag}`]: styles2[`tagSize${capitalize$1(size)}`]
     }, {
       [`& .${autocompleteClasses.inputRoot}`]: styles2.inputRoot
     }, {
@@ -34529,13 +34529,13 @@ const overridesResolver$6 = (props, styles2) => {
   return [{
     [`& .${buttonGroupClasses.grouped}`]: styles2.grouped
   }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize$2(ownerState.orientation)}`]
+    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize$1(ownerState.orientation)}`]
   }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize$2(ownerState.variant)}`]
+    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize$1(ownerState.variant)}`]
   }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize$2(ownerState.variant)}${capitalize$2(ownerState.orientation)}`]
+    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize$1(ownerState.variant)}${capitalize$1(ownerState.orientation)}`]
   }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize$2(ownerState.variant)}${capitalize$2(ownerState.color)}`]
+    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize$1(ownerState.variant)}${capitalize$1(ownerState.color)}`]
   }, {
     [`& .${buttonGroupClasses.firstButton}`]: styles2.firstButton
   }, {
@@ -34555,8 +34555,8 @@ const useUtilityClasses$1h = (ownerState) => {
     variant
   } = ownerState;
   const slots = {
-    root: ["root", variant, orientation, fullWidth && "fullWidth", disableElevation && "disableElevation", `color${capitalize$2(color2)}`],
-    grouped: ["grouped", `grouped${capitalize$2(orientation)}`, `grouped${capitalize$2(variant)}`, `grouped${capitalize$2(variant)}${capitalize$2(orientation)}`, `grouped${capitalize$2(variant)}${capitalize$2(color2)}`, disabled && "disabled"],
+    root: ["root", variant, orientation, fullWidth && "fullWidth", disableElevation && "disableElevation", `color${capitalize$1(color2)}`],
+    grouped: ["grouped", `grouped${capitalize$1(orientation)}`, `grouped${capitalize$1(variant)}`, `grouped${capitalize$1(variant)}${capitalize$1(orientation)}`, `grouped${capitalize$1(variant)}${capitalize$1(color2)}`, disabled && "disabled"],
     firstButton: ["firstButton"],
     lastButton: ["lastButton"],
     middleButton: ["middleButton"]
@@ -36607,1421 +36607,219 @@ function composeClasses(slots, getUtilityClass, classes = void 0) {
   }
   return output;
 }
-function isPlainObject(item) {
-  if (typeof item !== "object" || item === null) {
-    return false;
-  }
-  const prototype = Object.getPrototypeOf(item);
-  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
+const defaultGenerator = (componentName) => componentName;
+const createClassNameGenerator = () => {
+  let generate = defaultGenerator;
+  return {
+    configure(generator) {
+      generate = generator;
+    },
+    generate(componentName) {
+      return generate(componentName);
+    },
+    reset() {
+      generate = defaultGenerator;
+    }
+  };
+};
+const ClassNameGenerator = createClassNameGenerator();
+const globalStateClasses = {
+  active: "active",
+  checked: "checked",
+  completed: "completed",
+  disabled: "disabled",
+  error: "error",
+  expanded: "expanded",
+  focused: "focused",
+  focusVisible: "focusVisible",
+  open: "open",
+  readOnly: "readOnly",
+  required: "required",
+  selected: "selected"
+};
+function generateUtilityClass(componentName, slot, globalStatePrefix = "Mui") {
+  const globalStateClass = globalStateClasses[slot];
+  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 }
-function deepClone(source) {
-  if (/* @__PURE__ */ React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
-    return source;
-  }
-  const output = {};
-  Object.keys(source).forEach((key) => {
-    output[key] = deepClone(source[key]);
+function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
+  const result = {};
+  slots.forEach((slot) => {
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
   });
-  return output;
+  return result;
 }
-function deepmerge(target, source, options = {
-  clone: true
-}) {
-  const output = options.clone ? {
-    ...target
-  } : target;
-  if (isPlainObject(target) && isPlainObject(source)) {
-    Object.keys(source).forEach((key) => {
-      if (/* @__PURE__ */ React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
-        output[key] = source[key];
-      } else if (isPlainObject(source[key]) && // Avoid prototype pollution
-      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
-        output[key] = deepmerge(target[key], source[key], options);
-      } else if (options.clone) {
-        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
-      } else {
-        output[key] = source[key];
+function getPickersToolbarUtilityClass(slot) {
+  return generateUtilityClass("MuiPickersToolbar", slot);
+}
+const pickersToolbarClasses = generateUtilityClasses("MuiPickersToolbar", ["root", "title", "content"]);
+const _excluded$K = ["localeText"];
+const PickerAdapterContext = /* @__PURE__ */ React.createContext(null);
+if (process.env.NODE_ENV !== "production") PickerAdapterContext.displayName = "PickerAdapterContext";
+const LocalizationProvider$1 = function LocalizationProvider(inProps) {
+  const {
+    localeText: inLocaleText
+  } = inProps, otherInProps = _objectWithoutPropertiesLoose(inProps, _excluded$K);
+  const {
+    adapter: parentAdapter,
+    localeText: parentLocaleText
+  } = React.useContext(PickerAdapterContext) ?? {
+    adapter: void 0,
+    localeText: void 0
+  };
+  const props = useThemeProps({
+    // We don't want to pass the `localeText` prop to the theme, that way it will always return the theme value,
+    // We will then merge this theme value with our value manually
+    props: otherInProps,
+    name: "MuiLocalizationProvider"
+  });
+  const {
+    children,
+    dateAdapter: DateAdapter,
+    dateFormats,
+    dateLibInstance,
+    adapterLocale,
+    localeText: themeLocaleText
+  } = props;
+  const localeText = React.useMemo(() => _extends({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
+  const adapter = React.useMemo(() => {
+    if (!DateAdapter) {
+      if (parentAdapter) {
+        return parentAdapter;
       }
+      return null;
+    }
+    const dateAdapter = new DateAdapter({
+      locale: adapterLocale,
+      formats: dateFormats,
+      instance: dateLibInstance
     });
-  }
-  return output;
+    if (!dateAdapter.isMUIAdapter) {
+      throw new Error(["MUI X: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`", "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", "More information on the installation documentation: https://mui.com/x/react-date-pickers/quickstart/#installation"].join(`
+`));
+    }
+    return dateAdapter;
+  }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentAdapter]);
+  const defaultDates = React.useMemo(() => {
+    if (!adapter) {
+      return null;
+    }
+    return {
+      minDate: adapter.date("1900-01-01T00:00:00.000"),
+      maxDate: adapter.date("2099-12-31T00:00:00.000")
+    };
+  }, [adapter]);
+  const contextValue = React.useMemo(() => {
+    return {
+      utils: adapter,
+      adapter,
+      defaultDates,
+      localeText
+    };
+  }, [defaultDates, adapter, localeText]);
+  return /* @__PURE__ */ jsx(PickerAdapterContext.Provider, {
+    value: contextValue,
+    children
+  });
+};
+if (process.env.NODE_ENV !== "production") LocalizationProvider$1.displayName = "LocalizationProvider";
+process.env.NODE_ENV !== "production" ? LocalizationProvider$1.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Locale for the date library you are using
+   */
+  adapterLocale: PropTypes.any,
+  children: PropTypes.node,
+  /**
+   * Date library adapter class function.
+   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/quickstart/#integrate-provider-and-adapter date adapter setup section} for more details.
+   */
+  dateAdapter: PropTypes.func,
+  /**
+   * Formats that are used for any child pickers
+   */
+  dateFormats: PropTypes.shape({
+    dayOfMonth: PropTypes.string,
+    dayOfMonthFull: PropTypes.string,
+    fullDate: PropTypes.string,
+    fullTime12h: PropTypes.string,
+    fullTime24h: PropTypes.string,
+    hours12h: PropTypes.string,
+    hours24h: PropTypes.string,
+    keyboardDate: PropTypes.string,
+    keyboardDateTime12h: PropTypes.string,
+    keyboardDateTime24h: PropTypes.string,
+    meridiem: PropTypes.string,
+    minutes: PropTypes.string,
+    month: PropTypes.string,
+    monthShort: PropTypes.string,
+    normalDate: PropTypes.string,
+    normalDateWithWeekday: PropTypes.string,
+    seconds: PropTypes.string,
+    shortDate: PropTypes.string,
+    weekday: PropTypes.string,
+    weekdayShort: PropTypes.string,
+    year: PropTypes.string
+  }),
+  /**
+   * Date library instance you are using, if it has some global overrides
+   * ```jsx
+   * dateLibInstance={momentTimeZone}
+   * ```
+   */
+  dateLibInstance: PropTypes.any,
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object
+} : void 0;
+const IsValidValueContext = /* @__PURE__ */ React.createContext(() => true);
+if (process.env.NODE_ENV !== "production") IsValidValueContext.displayName = "IsValidValueContext";
+function useIsValidValue() {
+  return React.useContext(IsValidValueContext);
 }
-function formatMuiErrorMessage$1(code, ...args) {
-  const url = new URL(`https://mui.com/production-error/?code=${code}`);
-  args.forEach((arg2) => url.searchParams.append("args[]", arg2));
-  return `Minified MUI error #${code}; visit ${url} for the full message.`;
+const PickerFieldPrivateContext = /* @__PURE__ */ React.createContext(null);
+if (process.env.NODE_ENV !== "production") PickerFieldPrivateContext.displayName = "PickerFieldPrivateContext";
+function useNullableFieldPrivateContext() {
+  return React.useContext(PickerFieldPrivateContext);
 }
-function capitalize$1(string) {
-  if (typeof string !== "string") {
-    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `capitalize(string)` expects a string argument." : formatMuiErrorMessage$1(7));
+const PickerContext = /* @__PURE__ */ React.createContext(null);
+if (process.env.NODE_ENV !== "production") PickerContext.displayName = "PickerContext";
+const usePickerContext = () => {
+  const value = React.useContext(PickerContext);
+  if (value == null) {
+    throw new Error("MUI X: The `usePickerContext` hook can only be called inside the context of a Picker component");
   }
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-const sortBreakpointsValues = (values2) => {
-  const breakpointsAsArray = Object.keys(values2).map((key) => ({
-    key,
-    val: values2[key]
-  })) || [];
-  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
-  return breakpointsAsArray.reduce((acc, obj) => {
-    return {
-      ...acc,
-      [obj.key]: obj.val
-    };
-  }, {});
+  return value;
 };
-function createBreakpoints(breakpoints) {
-  const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
-    values: values2 = {
-      xs: 0,
-      // phone
-      sm: 600,
-      // tablet
-      md: 900,
-      // small laptop
-      lg: 1200,
-      // desktop
-      xl: 1536
-      // large screen
-    },
-    unit = "px",
-    step = 5,
-    ...other
-  } = breakpoints;
-  const sortedValues = sortBreakpointsValues(values2);
-  const keys = Object.keys(sortedValues);
-  function up(key) {
-    const value = typeof values2[key] === "number" ? values2[key] : key;
-    return `@media (min-width:${value}${unit})`;
-  }
-  function down(key) {
-    const value = typeof values2[key] === "number" ? values2[key] : key;
-    return `@media (max-width:${value - step / 100}${unit})`;
-  }
-  function between(start2, end2) {
-    const endIndex = keys.indexOf(end2);
-    return `@media (min-width:${typeof values2[start2] === "number" ? values2[start2] : start2}${unit}) and (max-width:${(endIndex !== -1 && typeof values2[keys[endIndex]] === "number" ? values2[keys[endIndex]] : end2) - step / 100}${unit})`;
-  }
-  function only(key) {
-    if (keys.indexOf(key) + 1 < keys.length) {
-      return between(key, keys[keys.indexOf(key) + 1]);
-    }
-    return up(key);
-  }
-  function not(key) {
-    const keyIndex = keys.indexOf(key);
-    if (keyIndex === 0) {
-      return up(keys[1]);
-    }
-    if (keyIndex === keys.length - 1) {
-      return down(keys[keyIndex]);
-    }
-    return between(key, keys[keys.indexOf(key) + 1]).replace("@media", "@media not all and");
-  }
-  return {
-    keys,
-    values: sortedValues,
-    up,
-    down,
-    between,
-    only,
-    not,
-    unit,
-    ...other
-  };
-}
-function sortContainerQueries(theme2, css2) {
-  if (!theme2.containerQueries) {
-    return css2;
-  }
-  const sorted = Object.keys(css2).filter((key) => key.startsWith("@container")).sort((a, b) => {
-    const regex = /min-width:\s*([0-9.]+)/;
-    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css2;
-  }
-  return sorted.reduce((acc, key) => {
-    const value = css2[key];
-    delete acc[key];
-    acc[key] = value;
-    return acc;
-  }, {
-    ...css2
-  });
-}
-function isCqShorthand(breakpointKeys, value) {
-  return value === "@" || value.startsWith("@") && (breakpointKeys.some((key) => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
-}
-function getContainerQuery(theme2, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
-  if (!matches) {
-    if (process.env.NODE_ENV !== "production") {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage$1(18, `(${shorthand})`));
-    }
-    return null;
-  }
-  const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
-  return theme2.containerQueries(containerName).up(value);
-}
-function cssContainerQueries(themeInput) {
-  const toContainerQuery = (mediaQuery, name) => mediaQuery.replace("@media", name ? `@container ${name}` : "@container");
-  function attachCq(node2, name) {
-    node2.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
-    node2.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
-    node2.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
-    node2.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
-    node2.not = (...args) => {
-      const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
-      if (result.includes("not all and")) {
-        return result.replace("not all and ", "").replace("min-width:", "width<").replace("max-width:", "width>").replace("and", "or");
-      }
-      return result;
-    };
-  }
-  const node = {};
-  const containerQueries = (name) => {
-    attachCq(node, name);
-    return node;
-  };
-  attachCq(containerQueries);
-  return {
-    ...themeInput,
-    containerQueries
-  };
-}
-const shape = {
-  borderRadius: 4
-};
-const responsivePropType = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
-function merge(acc, item) {
-  if (!item) {
-    return acc;
-  }
-  return deepmerge(acc, item, {
-    clone: false
-    // No need to clone deep, it's way faster.
-  });
-}
-const values = {
-  xs: 0,
-  // phone
-  sm: 600,
-  // tablet
-  md: 900,
-  // small laptop
-  lg: 1200,
-  // desktop
-  xl: 1536
-  // large screen
-};
-const defaultBreakpoints = {
-  // Sorted ASC by size. That's important.
-  // It can't be configured as it's used statically for propTypes.
-  keys: ["xs", "sm", "md", "lg", "xl"],
-  up: (key) => `@media (min-width:${values[key]}px)`
-};
-const defaultContainerQueries = {
-  containerQueries: (containerName) => ({
-    up: (key) => {
-      let result = typeof key === "number" ? key : values[key] || key;
-      if (typeof result === "number") {
-        result = `${result}px`;
-      }
-      return containerName ? `@container ${containerName} (min-width:${result})` : `@container (min-width:${result})`;
-    }
-  })
-};
-function handleBreakpoints(props, propValue, styleFromPropValue) {
-  const theme2 = props.theme || {};
-  if (Array.isArray(propValue)) {
-    const themeBreakpoints = theme2.breakpoints || defaultBreakpoints;
-    return propValue.reduce((acc, item, index) => {
-      acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
-      return acc;
-    }, {});
-  }
-  if (typeof propValue === "object") {
-    const themeBreakpoints = theme2.breakpoints || defaultBreakpoints;
-    return Object.keys(propValue).reduce((acc, breakpoint) => {
-      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
-        const containerKey = getContainerQuery(theme2.containerQueries ? theme2 : defaultContainerQueries, breakpoint);
-        if (containerKey) {
-          acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
-        }
-      } else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
-        const mediaKey = themeBreakpoints.up(breakpoint);
-        acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
-      } else {
-        const cssKey = breakpoint;
-        acc[cssKey] = propValue[cssKey];
-      }
-      return acc;
-    }, {});
-  }
-  const output = styleFromPropValue(propValue);
-  return output;
-}
-function createEmptyBreakpointObject(breakpointsInput = {}) {
-  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
-    const breakpointStyleKey = breakpointsInput.up(key);
-    acc[breakpointStyleKey] = {};
-    return acc;
-  }, {});
-  return breakpointsInOrder || {};
-}
-function removeUnusedBreakpoints(breakpointKeys, style2) {
-  return breakpointKeys.reduce((acc, key) => {
-    const breakpointOutput = acc[key];
-    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
-    if (isBreakpointUnused) {
-      delete acc[key];
-    }
-    return acc;
-  }, style2);
-}
-function getPath(obj, path, checkVars = true) {
-  if (!path || typeof path !== "string") {
-    return null;
-  }
-  if (obj && obj.vars && checkVars) {
-    const val = `vars.${path}`.split(".").reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
-    if (val != null) {
-      return val;
-    }
-  }
-  return path.split(".").reduce((acc, item) => {
-    if (acc && acc[item] != null) {
-      return acc[item];
-    }
-    return null;
-  }, obj);
-}
-function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
-  let value;
-  if (typeof themeMapping === "function") {
-    value = themeMapping(propValueFinal);
-  } else if (Array.isArray(themeMapping)) {
-    value = themeMapping[propValueFinal] || userValue;
-  } else {
-    value = getPath(themeMapping, propValueFinal) || userValue;
-  }
-  if (transform) {
-    value = transform(value, userValue, themeMapping);
-  }
-  return value;
-}
-function style$1(options) {
-  const {
-    prop,
-    cssProperty = options.prop,
-    themeKey,
-    transform
-  } = options;
-  const fn2 = (props) => {
-    if (props[prop] == null) {
-      return null;
-    }
-    const propValue = props[prop];
-    const theme2 = props.theme;
-    const themeMapping = getPath(theme2, themeKey) || {};
-    const styleFromPropValue = (propValueFinal) => {
-      let value = getStyleValue(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === "string") {
-        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize$1(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return {
-        [cssProperty]: value
-      };
-    };
-    return handleBreakpoints(props, propValue, styleFromPropValue);
-  };
-  fn2.propTypes = process.env.NODE_ENV !== "production" ? {
-    [prop]: responsivePropType
-  } : {};
-  fn2.filterProps = [prop];
-  return fn2;
-}
-function memoize(fn2) {
-  const cache = {};
-  return (arg2) => {
-    if (cache[arg2] === void 0) {
-      cache[arg2] = fn2(arg2);
-    }
-    return cache[arg2];
-  };
-}
-const properties = {
-  m: "margin",
-  p: "padding"
-};
-const directions = {
-  t: "Top",
-  r: "Right",
-  b: "Bottom",
-  l: "Left",
-  x: ["Left", "Right"],
-  y: ["Top", "Bottom"]
-};
-const aliases = {
-  marginX: "mx",
-  marginY: "my",
-  paddingX: "px",
-  paddingY: "py"
-};
-const getCssProperties = memoize((prop) => {
-  if (prop.length > 2) {
-    if (aliases[prop]) {
-      prop = aliases[prop];
-    } else {
-      return [prop];
-    }
-  }
-  const [a, b] = prop.split("");
-  const property = properties[a];
-  const direction = directions[b] || "";
-  return Array.isArray(direction) ? direction.map((dir) => property + dir) : [property + direction];
-});
-const marginKeys = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"];
-const paddingKeys = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
-const spacingKeys = [...marginKeys, ...paddingKeys];
-function createUnaryUnit(theme2, themeKey, defaultValue, propName) {
-  const themeSpacing = getPath(theme2, themeKey, true) ?? defaultValue;
-  if (typeof themeSpacing === "number" || typeof themeSpacing === "string") {
-    return (val) => {
-      if (typeof val === "string") {
-        return val;
-      }
-      if (process.env.NODE_ENV !== "production") {
-        if (typeof val !== "number") {
-          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${val}.`);
-        }
-      }
-      if (typeof themeSpacing === "string") {
-        if (themeSpacing.startsWith("var(") && val === 0) {
-          return 0;
-        }
-        if (themeSpacing.startsWith("var(") && val === 1) {
-          return themeSpacing;
-        }
-        return `calc(${val} * ${themeSpacing})`;
-      }
-      return themeSpacing * val;
-    };
-  }
-  if (Array.isArray(themeSpacing)) {
-    return (val) => {
-      if (typeof val === "string") {
-        return val;
-      }
-      const abs = Math.abs(val);
-      if (process.env.NODE_ENV !== "production") {
-        if (!Number.isInteger(abs)) {
-          console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join("\n"));
-        } else if (abs > themeSpacing.length - 1) {
-          console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join("\n"));
-        }
-      }
-      const transformed = themeSpacing[abs];
-      if (val >= 0) {
-        return transformed;
-      }
-      if (typeof transformed === "number") {
-        return -transformed;
-      }
-      if (typeof transformed === "string" && transformed.startsWith("var(")) {
-        return `calc(-1 * ${transformed})`;
-      }
-      return `-${transformed}`;
-    };
-  }
-  if (typeof themeSpacing === "function") {
-    return themeSpacing;
-  }
-  if (process.env.NODE_ENV !== "production") {
-    console.error([`MUI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, "It should be a number, an array or a function."].join("\n"));
-  }
-  return () => void 0;
-}
-function createUnarySpacing(theme2) {
-  return createUnaryUnit(theme2, "spacing", 8, "spacing");
-}
-function getValue(transformer, propValue) {
-  if (typeof propValue === "string" || propValue == null) {
-    return propValue;
-  }
-  return transformer(propValue);
-}
-function getStyleFromPropValue(cssProperties, transformer) {
-  return (propValue) => cssProperties.reduce((acc, cssProperty) => {
-    acc[cssProperty] = getValue(transformer, propValue);
-    return acc;
-  }, {});
-}
-function resolveCssProperty(props, keys, prop, transformer) {
-  if (!keys.includes(prop)) {
-    return null;
-  }
-  const cssProperties = getCssProperties(prop);
-  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  const propValue = props[prop];
-  return handleBreakpoints(props, propValue, styleFromPropValue);
-}
-function style(props, keys) {
-  const transformer = createUnarySpacing(props.theme);
-  return Object.keys(props).map((prop) => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
-}
-function margin(props) {
-  return style(props, marginKeys);
-}
-margin.propTypes = process.env.NODE_ENV !== "production" ? marginKeys.reduce((obj, key) => {
-  obj[key] = responsivePropType;
-  return obj;
-}, {}) : {};
-margin.filterProps = marginKeys;
-function padding(props) {
-  return style(props, paddingKeys);
-}
-padding.propTypes = process.env.NODE_ENV !== "production" ? paddingKeys.reduce((obj, key) => {
-  obj[key] = responsivePropType;
-  return obj;
-}, {}) : {};
-padding.filterProps = paddingKeys;
-process.env.NODE_ENV !== "production" ? spacingKeys.reduce((obj, key) => {
-  obj[key] = responsivePropType;
-  return obj;
-}, {}) : {};
-function createSpacing(spacingInput = 8, transform = createUnarySpacing({
-  spacing: spacingInput
-})) {
-  if (spacingInput.mui) {
-    return spacingInput;
-  }
-  const spacing2 = (...argsInput) => {
-    if (process.env.NODE_ENV !== "production") {
-      if (!(argsInput.length <= 4)) {
-        console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
-      }
-    }
-    const args = argsInput.length === 0 ? [1] : argsInput;
-    return args.map((argument) => {
-      const output = transform(argument);
-      return typeof output === "number" ? `${output}px` : output;
-    }).join(" ");
-  };
-  spacing2.mui = true;
-  return spacing2;
-}
-function compose(...styles2) {
-  const handlers = styles2.reduce((acc, style2) => {
-    style2.filterProps.forEach((prop) => {
-      acc[prop] = style2;
-    });
-    return acc;
-  }, {});
-  const fn2 = (props) => {
-    return Object.keys(props).reduce((acc, prop) => {
-      if (handlers[prop]) {
-        return merge(acc, handlers[prop](props));
-      }
-      return acc;
-    }, {});
-  };
-  fn2.propTypes = process.env.NODE_ENV !== "production" ? styles2.reduce((acc, style2) => Object.assign(acc, style2.propTypes), {}) : {};
-  fn2.filterProps = styles2.reduce((acc, style2) => acc.concat(style2.filterProps), []);
-  return fn2;
-}
-function borderTransform(value) {
-  if (typeof value !== "number") {
-    return value;
-  }
-  return `${value}px solid`;
-}
-function createBorderStyle(prop, transform) {
-  return style$1({
-    prop,
-    themeKey: "borders",
-    transform
-  });
-}
-const border = createBorderStyle("border", borderTransform);
-const borderTop = createBorderStyle("borderTop", borderTransform);
-const borderRight = createBorderStyle("borderRight", borderTransform);
-const borderBottom = createBorderStyle("borderBottom", borderTransform);
-const borderLeft = createBorderStyle("borderLeft", borderTransform);
-const borderColor = createBorderStyle("borderColor");
-const borderTopColor = createBorderStyle("borderTopColor");
-const borderRightColor = createBorderStyle("borderRightColor");
-const borderBottomColor = createBorderStyle("borderBottomColor");
-const borderLeftColor = createBorderStyle("borderLeftColor");
-const outline = createBorderStyle("outline", borderTransform);
-const outlineColor = createBorderStyle("outlineColor");
-const borderRadius = (props) => {
-  if (props.borderRadius !== void 0 && props.borderRadius !== null) {
-    const transformer = createUnaryUnit(props.theme, "shape.borderRadius", 4, "borderRadius");
-    const styleFromPropValue = (propValue) => ({
-      borderRadius: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
-  }
-  return null;
-};
-borderRadius.propTypes = process.env.NODE_ENV !== "production" ? {
-  borderRadius: responsivePropType
-} : {};
-borderRadius.filterProps = ["borderRadius"];
-compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
-const gap = (props) => {
-  if (props.gap !== void 0 && props.gap !== null) {
-    const transformer = createUnaryUnit(props.theme, "spacing", 8, "gap");
-    const styleFromPropValue = (propValue) => ({
-      gap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.gap, styleFromPropValue);
-  }
-  return null;
-};
-gap.propTypes = process.env.NODE_ENV !== "production" ? {
-  gap: responsivePropType
-} : {};
-gap.filterProps = ["gap"];
-const columnGap = (props) => {
-  if (props.columnGap !== void 0 && props.columnGap !== null) {
-    const transformer = createUnaryUnit(props.theme, "spacing", 8, "columnGap");
-    const styleFromPropValue = (propValue) => ({
-      columnGap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
-  }
-  return null;
-};
-columnGap.propTypes = process.env.NODE_ENV !== "production" ? {
-  columnGap: responsivePropType
-} : {};
-columnGap.filterProps = ["columnGap"];
-const rowGap = (props) => {
-  if (props.rowGap !== void 0 && props.rowGap !== null) {
-    const transformer = createUnaryUnit(props.theme, "spacing", 8, "rowGap");
-    const styleFromPropValue = (propValue) => ({
-      rowGap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
-  }
-  return null;
-};
-rowGap.propTypes = process.env.NODE_ENV !== "production" ? {
-  rowGap: responsivePropType
-} : {};
-rowGap.filterProps = ["rowGap"];
-const gridColumn = style$1({
-  prop: "gridColumn"
-});
-const gridRow = style$1({
-  prop: "gridRow"
-});
-const gridAutoFlow = style$1({
-  prop: "gridAutoFlow"
-});
-const gridAutoColumns = style$1({
-  prop: "gridAutoColumns"
-});
-const gridAutoRows = style$1({
-  prop: "gridAutoRows"
-});
-const gridTemplateColumns = style$1({
-  prop: "gridTemplateColumns"
-});
-const gridTemplateRows = style$1({
-  prop: "gridTemplateRows"
-});
-const gridTemplateAreas = style$1({
-  prop: "gridTemplateAreas"
-});
-const gridArea = style$1({
-  prop: "gridArea"
-});
-compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-function paletteTransform(value, userValue) {
-  if (userValue === "grey") {
-    return userValue;
-  }
-  return value;
-}
-const color = style$1({
-  prop: "color",
-  themeKey: "palette",
-  transform: paletteTransform
-});
-const bgcolor = style$1({
-  prop: "bgcolor",
-  cssProperty: "backgroundColor",
-  themeKey: "palette",
-  transform: paletteTransform
-});
-const backgroundColor = style$1({
-  prop: "backgroundColor",
-  themeKey: "palette",
-  transform: paletteTransform
-});
-compose(color, bgcolor, backgroundColor);
-function sizingTransform(value) {
-  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
-}
-const width = style$1({
-  prop: "width",
-  transform: sizingTransform
-});
-const maxWidth = (props) => {
-  if (props.maxWidth !== void 0 && props.maxWidth !== null) {
-    const styleFromPropValue = (propValue) => {
-      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || values[propValue];
-      if (!breakpoint) {
-        return {
-          maxWidth: sizingTransform(propValue)
-        };
-      }
-      if (props.theme?.breakpoints?.unit !== "px") {
-        return {
-          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
-        };
-      }
-      return {
-        maxWidth: breakpoint
-      };
-    };
-    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
-  }
-  return null;
-};
-maxWidth.filterProps = ["maxWidth"];
-const minWidth = style$1({
-  prop: "minWidth",
-  transform: sizingTransform
-});
-const height = style$1({
-  prop: "height",
-  transform: sizingTransform
-});
-const maxHeight = style$1({
-  prop: "maxHeight",
-  transform: sizingTransform
-});
-const minHeight = style$1({
-  prop: "minHeight",
-  transform: sizingTransform
-});
-style$1({
-  prop: "size",
-  cssProperty: "width",
-  transform: sizingTransform
-});
-style$1({
-  prop: "size",
-  cssProperty: "height",
-  transform: sizingTransform
-});
-const boxSizing = style$1({
-  prop: "boxSizing"
-});
-compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
-const defaultSxConfig = {
-  // borders
-  border: {
-    themeKey: "borders",
-    transform: borderTransform
-  },
-  borderTop: {
-    themeKey: "borders",
-    transform: borderTransform
-  },
-  borderRight: {
-    themeKey: "borders",
-    transform: borderTransform
-  },
-  borderBottom: {
-    themeKey: "borders",
-    transform: borderTransform
-  },
-  borderLeft: {
-    themeKey: "borders",
-    transform: borderTransform
-  },
-  borderColor: {
-    themeKey: "palette"
-  },
-  borderTopColor: {
-    themeKey: "palette"
-  },
-  borderRightColor: {
-    themeKey: "palette"
-  },
-  borderBottomColor: {
-    themeKey: "palette"
-  },
-  borderLeftColor: {
-    themeKey: "palette"
-  },
-  outline: {
-    themeKey: "borders",
-    transform: borderTransform
-  },
-  outlineColor: {
-    themeKey: "palette"
-  },
-  borderRadius: {
-    themeKey: "shape.borderRadius",
-    style: borderRadius
-  },
-  // palette
-  color: {
-    themeKey: "palette",
-    transform: paletteTransform
-  },
-  bgcolor: {
-    themeKey: "palette",
-    cssProperty: "backgroundColor",
-    transform: paletteTransform
-  },
-  backgroundColor: {
-    themeKey: "palette",
-    transform: paletteTransform
-  },
-  // spacing
-  p: {
-    style: padding
-  },
-  pt: {
-    style: padding
-  },
-  pr: {
-    style: padding
-  },
-  pb: {
-    style: padding
-  },
-  pl: {
-    style: padding
-  },
-  px: {
-    style: padding
-  },
-  py: {
-    style: padding
-  },
-  padding: {
-    style: padding
-  },
-  paddingTop: {
-    style: padding
-  },
-  paddingRight: {
-    style: padding
-  },
-  paddingBottom: {
-    style: padding
-  },
-  paddingLeft: {
-    style: padding
-  },
-  paddingX: {
-    style: padding
-  },
-  paddingY: {
-    style: padding
-  },
-  paddingInline: {
-    style: padding
-  },
-  paddingInlineStart: {
-    style: padding
-  },
-  paddingInlineEnd: {
-    style: padding
-  },
-  paddingBlock: {
-    style: padding
-  },
-  paddingBlockStart: {
-    style: padding
-  },
-  paddingBlockEnd: {
-    style: padding
-  },
-  m: {
-    style: margin
-  },
-  mt: {
-    style: margin
-  },
-  mr: {
-    style: margin
-  },
-  mb: {
-    style: margin
-  },
-  ml: {
-    style: margin
-  },
-  mx: {
-    style: margin
-  },
-  my: {
-    style: margin
-  },
-  margin: {
-    style: margin
-  },
-  marginTop: {
-    style: margin
-  },
-  marginRight: {
-    style: margin
-  },
-  marginBottom: {
-    style: margin
-  },
-  marginLeft: {
-    style: margin
-  },
-  marginX: {
-    style: margin
-  },
-  marginY: {
-    style: margin
-  },
-  marginInline: {
-    style: margin
-  },
-  marginInlineStart: {
-    style: margin
-  },
-  marginInlineEnd: {
-    style: margin
-  },
-  marginBlock: {
-    style: margin
-  },
-  marginBlockStart: {
-    style: margin
-  },
-  marginBlockEnd: {
-    style: margin
-  },
-  // display
-  displayPrint: {
-    cssProperty: false,
-    transform: (value) => ({
-      "@media print": {
-        display: value
-      }
-    })
-  },
-  display: {},
-  overflow: {},
-  textOverflow: {},
-  visibility: {},
-  whiteSpace: {},
-  // flexbox
-  flexBasis: {},
-  flexDirection: {},
-  flexWrap: {},
-  justifyContent: {},
-  alignItems: {},
-  alignContent: {},
-  order: {},
-  flex: {},
-  flexGrow: {},
-  flexShrink: {},
-  alignSelf: {},
-  justifyItems: {},
-  justifySelf: {},
-  // grid
-  gap: {
-    style: gap
-  },
-  rowGap: {
-    style: rowGap
-  },
-  columnGap: {
-    style: columnGap
-  },
-  gridColumn: {},
-  gridRow: {},
-  gridAutoFlow: {},
-  gridAutoColumns: {},
-  gridAutoRows: {},
-  gridTemplateColumns: {},
-  gridTemplateRows: {},
-  gridTemplateAreas: {},
-  gridArea: {},
-  // positions
-  position: {},
-  zIndex: {
-    themeKey: "zIndex"
-  },
-  top: {},
-  right: {},
-  bottom: {},
-  left: {},
-  // shadows
-  boxShadow: {
-    themeKey: "shadows"
-  },
-  // sizing
-  width: {
-    transform: sizingTransform
-  },
-  maxWidth: {
-    style: maxWidth
-  },
-  minWidth: {
-    transform: sizingTransform
-  },
-  height: {
-    transform: sizingTransform
-  },
-  maxHeight: {
-    transform: sizingTransform
-  },
-  minHeight: {
-    transform: sizingTransform
-  },
-  boxSizing: {},
-  // typography
-  font: {
-    themeKey: "font"
-  },
-  fontFamily: {
-    themeKey: "typography"
-  },
-  fontSize: {
-    themeKey: "typography"
-  },
-  fontStyle: {
-    themeKey: "typography"
-  },
-  fontWeight: {
-    themeKey: "typography"
-  },
-  letterSpacing: {},
-  textTransform: {},
-  lineHeight: {},
-  textAlign: {},
-  typography: {
-    cssProperty: false,
-    themeKey: "typography"
-  }
-};
-function objectsHaveSameKeys(...objects) {
-  const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
-  const union = new Set(allKeys);
-  return objects.every((object) => union.size === Object.keys(object).length);
-}
-function callIfFn(maybeFn, arg2) {
-  return typeof maybeFn === "function" ? maybeFn(arg2) : maybeFn;
-}
-function unstable_createStyleFunctionSx() {
-  function getThemeValue(prop, val, theme2, config2) {
-    const props = {
-      [prop]: val,
-      theme: theme2
-    };
-    const options = config2[prop];
-    if (!options) {
-      return {
-        [prop]: val
-      };
-    }
-    const {
-      cssProperty = prop,
-      themeKey,
-      transform,
-      style: style2
-    } = options;
-    if (val == null) {
-      return null;
-    }
-    if (themeKey === "typography" && val === "inherit") {
-      return {
-        [prop]: val
-      };
-    }
-    const themeMapping = getPath(theme2, themeKey) || {};
-    if (style2) {
-      return style2(props);
-    }
-    const styleFromPropValue = (propValueFinal) => {
-      let value = getStyleValue(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === "string") {
-        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize$1(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return {
-        [cssProperty]: value
-      };
-    };
-    return handleBreakpoints(props, val, styleFromPropValue);
-  }
-  function styleFunctionSx2(props) {
-    const {
-      sx,
-      theme: theme2 = {},
-      nested
-    } = props || {};
-    if (!sx) {
-      return null;
-    }
-    const config2 = theme2.unstable_sxConfig ?? defaultSxConfig;
-    function traverse(sxInput) {
-      let sxObject = sxInput;
-      if (typeof sxInput === "function") {
-        sxObject = sxInput(theme2);
-      } else if (typeof sxInput !== "object") {
-        return sxInput;
-      }
-      if (!sxObject) {
-        return null;
-      }
-      const emptyBreakpoints = createEmptyBreakpointObject(theme2.breakpoints);
-      const breakpointsKeys = Object.keys(emptyBreakpoints);
-      let css2 = emptyBreakpoints;
-      Object.keys(sxObject).forEach((styleKey) => {
-        const value = callIfFn(sxObject[styleKey], theme2);
-        if (value !== null && value !== void 0) {
-          if (typeof value === "object") {
-            if (config2[styleKey]) {
-              css2 = merge(css2, getThemeValue(styleKey, value, theme2, config2));
-            } else {
-              const breakpointsValues = handleBreakpoints({
-                theme: theme2
-              }, value, (x) => ({
-                [styleKey]: x
-              }));
-              if (objectsHaveSameKeys(breakpointsValues, value)) {
-                css2[styleKey] = styleFunctionSx2({
-                  sx: value,
-                  theme: theme2,
-                  nested: true
-                });
-              } else {
-                css2 = merge(css2, breakpointsValues);
-              }
-            }
-          } else {
-            css2 = merge(css2, getThemeValue(styleKey, value, theme2, config2));
-          }
-        }
-      });
-      if (!nested && theme2.modularCssLayers) {
-        return {
-          "@layer sx": sortContainerQueries(theme2, removeUnusedBreakpoints(breakpointsKeys, css2))
-        };
-      }
-      return sortContainerQueries(theme2, removeUnusedBreakpoints(breakpointsKeys, css2));
-    }
-    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
-  }
-  return styleFunctionSx2;
-}
-const styleFunctionSx = unstable_createStyleFunctionSx();
-styleFunctionSx.filterProps = ["sx"];
-function applyStyles(key, styles2) {
-  const theme2 = this;
-  if (theme2.vars) {
-    if (!theme2.colorSchemes?.[key] || typeof theme2.getColorSchemeSelector !== "function") {
-      return {};
-    }
-    let selector = theme2.getColorSchemeSelector(key);
-    if (selector === "&") {
-      return styles2;
-    }
-    if (selector.includes("data-") || selector.includes(".")) {
-      selector = `*:where(${selector.replace(/\s*&$/, "")}) &`;
-    }
-    return {
-      [selector]: styles2
-    };
-  }
-  if (theme2.palette.mode === key) {
-    return styles2;
-  }
-  return {};
-}
-function createTheme(options = {}, ...args) {
-  const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {},
-    ...other
-  } = options;
-  const breakpoints = createBreakpoints(breakpointsInput);
-  const spacing2 = createSpacing(spacingInput);
-  let muiTheme = deepmerge({
-    breakpoints,
-    direction: "ltr",
-    components: {},
-    // Inject component definitions.
-    palette: {
-      mode: "light",
-      ...paletteInput
-    },
-    spacing: spacing2,
-    shape: {
-      ...shape,
-      ...shapeInput
-    }
-  }, other);
-  muiTheme = cssContainerQueries(muiTheme);
-  muiTheme.applyStyles = applyStyles;
-  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig,
-    ...other?.unstable_sxConfig
-  };
-  muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
-      sx: props,
-      theme: this
-    });
-  };
-  return muiTheme;
-}
-createTheme();
-function shouldForwardProp(prop) {
-  return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
-}
-const defaultGenerator = (componentName) => componentName;
-const createClassNameGenerator = () => {
-  let generate = defaultGenerator;
-  return {
-    configure(generator) {
-      generate = generator;
-    },
-    generate(componentName) {
-      return generate(componentName);
-    },
-    reset() {
-      generate = defaultGenerator;
-    }
-  };
-};
-const ClassNameGenerator = createClassNameGenerator();
-const globalStateClasses = {
-  active: "active",
-  checked: "checked",
-  completed: "completed",
-  disabled: "disabled",
-  error: "error",
-  expanded: "expanded",
-  focused: "focused",
-  focusVisible: "focusVisible",
-  open: "open",
-  readOnly: "readOnly",
-  required: "required",
-  selected: "selected"
-};
-function generateUtilityClass(componentName, slot, globalStatePrefix = "Mui") {
-  const globalStateClass = globalStateClasses[slot];
-  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
-}
-function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
-  const result = {};
-  slots.forEach((slot) => {
-    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-  });
-  return result;
-}
-function getPickersToolbarUtilityClass(slot) {
-  return generateUtilityClass("MuiPickersToolbar", slot);
-}
-const pickersToolbarClasses = generateUtilityClasses("MuiPickersToolbar", ["root", "title", "content"]);
-const RtlContext = /* @__PURE__ */ React.createContext();
-process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.node,
-  value: PropTypes.bool
-} : void 0;
-const useRtl = () => {
-  const value = React.useContext(RtlContext);
-  return value ?? false;
-};
-const _excluded$K = ["localeText"];
-const PickerAdapterContext = /* @__PURE__ */ React.createContext(null);
-if (process.env.NODE_ENV !== "production") PickerAdapterContext.displayName = "PickerAdapterContext";
-const LocalizationProvider$1 = function LocalizationProvider(inProps) {
-  const {
-    localeText: inLocaleText
-  } = inProps, otherInProps = _objectWithoutPropertiesLoose(inProps, _excluded$K);
-  const {
-    adapter: parentAdapter,
-    localeText: parentLocaleText
-  } = React.useContext(PickerAdapterContext) ?? {
-    adapter: void 0,
-    localeText: void 0
-  };
-  const props = useThemeProps({
-    // We don't want to pass the `localeText` prop to the theme, that way it will always return the theme value,
-    // We will then merge this theme value with our value manually
-    props: otherInProps,
-    name: "MuiLocalizationProvider"
-  });
-  const {
-    children,
-    dateAdapter: DateAdapter,
-    dateFormats,
-    dateLibInstance,
-    adapterLocale,
-    localeText: themeLocaleText
-  } = props;
-  const localeText = React.useMemo(() => _extends({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
-  const adapter = React.useMemo(() => {
-    if (!DateAdapter) {
-      if (parentAdapter) {
-        return parentAdapter;
-      }
-      return null;
-    }
-    const dateAdapter = new DateAdapter({
-      locale: adapterLocale,
-      formats: dateFormats,
-      instance: dateLibInstance
-    });
-    if (!dateAdapter.isMUIAdapter) {
-      throw new Error(["MUI X: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`", "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", "More information on the installation documentation: https://mui.com/x/react-date-pickers/quickstart/#installation"].join(`
-`));
-    }
-    return dateAdapter;
-  }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentAdapter]);
-  const defaultDates = React.useMemo(() => {
-    if (!adapter) {
-      return null;
-    }
-    return {
-      minDate: adapter.date("1900-01-01T00:00:00.000"),
-      maxDate: adapter.date("2099-12-31T00:00:00.000")
-    };
-  }, [adapter]);
-  const contextValue = React.useMemo(() => {
-    return {
-      utils: adapter,
-      adapter,
-      defaultDates,
-      localeText
-    };
-  }, [defaultDates, adapter, localeText]);
-  return /* @__PURE__ */ jsx(PickerAdapterContext.Provider, {
-    value: contextValue,
-    children
-  });
-};
-if (process.env.NODE_ENV !== "production") LocalizationProvider$1.displayName = "LocalizationProvider";
-process.env.NODE_ENV !== "production" ? LocalizationProvider$1.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Locale for the date library you are using
-   */
-  adapterLocale: PropTypes.any,
-  children: PropTypes.node,
-  /**
-   * Date library adapter class function.
-   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/quickstart/#integrate-provider-and-adapter date adapter setup section} for more details.
-   */
-  dateAdapter: PropTypes.func,
-  /**
-   * Formats that are used for any child pickers
-   */
-  dateFormats: PropTypes.shape({
-    dayOfMonth: PropTypes.string,
-    dayOfMonthFull: PropTypes.string,
-    fullDate: PropTypes.string,
-    fullTime12h: PropTypes.string,
-    fullTime24h: PropTypes.string,
-    hours12h: PropTypes.string,
-    hours24h: PropTypes.string,
-    keyboardDate: PropTypes.string,
-    keyboardDateTime12h: PropTypes.string,
-    keyboardDateTime24h: PropTypes.string,
-    meridiem: PropTypes.string,
-    minutes: PropTypes.string,
-    month: PropTypes.string,
-    monthShort: PropTypes.string,
-    normalDate: PropTypes.string,
-    normalDateWithWeekday: PropTypes.string,
-    seconds: PropTypes.string,
-    shortDate: PropTypes.string,
-    weekday: PropTypes.string,
-    weekdayShort: PropTypes.string,
-    year: PropTypes.string
-  }),
-  /**
-   * Date library instance you are using, if it has some global overrides
-   * ```jsx
-   * dateLibInstance={momentTimeZone}
-   * ```
-   */
-  dateLibInstance: PropTypes.any,
-  /**
-   * Locale for components texts
-   */
-  localeText: PropTypes.object
-} : void 0;
-const IsValidValueContext = /* @__PURE__ */ React.createContext(() => true);
-if (process.env.NODE_ENV !== "production") IsValidValueContext.displayName = "IsValidValueContext";
-function useIsValidValue() {
-  return React.useContext(IsValidValueContext);
-}
-const PickerFieldPrivateContext = /* @__PURE__ */ React.createContext(null);
-if (process.env.NODE_ENV !== "production") PickerFieldPrivateContext.displayName = "PickerFieldPrivateContext";
-function useNullableFieldPrivateContext() {
-  return React.useContext(PickerFieldPrivateContext);
-}
-const PickerContext = /* @__PURE__ */ React.createContext(null);
-if (process.env.NODE_ENV !== "production") PickerContext.displayName = "PickerContext";
-const usePickerContext = () => {
-  const value = React.useContext(PickerContext);
-  if (value == null) {
-    throw new Error("MUI X: The `usePickerContext` hook can only be called inside the context of a Picker component");
-  }
-  return value;
-};
-const PickerActionsContext = /* @__PURE__ */ React.createContext(null);
-if (process.env.NODE_ENV !== "production") PickerActionsContext.displayName = "PickerActionsContext";
-const PickerPrivateContext = /* @__PURE__ */ React.createContext({
-  ownerState: {
-    isPickerDisabled: false,
-    isPickerReadOnly: false,
-    isPickerValueEmpty: false,
-    isPickerOpen: false,
-    pickerVariant: "desktop",
-    pickerOrientation: "portrait"
-  },
-  rootRefObject: {
-    current: null
-  },
-  labelId: void 0,
-  dismissViews: () => {
-  },
-  hasUIView: true,
-  getCurrentViewMode: () => "UI",
-  triggerElement: null,
-  viewContainerRole: null,
-  defaultActionBarActions: [],
-  onPopperExited: void 0
-});
-if (process.env.NODE_ENV !== "production") PickerPrivateContext.displayName = "PickerPrivateContext";
-function PickerProvider(props) {
+const PickerActionsContext = /* @__PURE__ */ React.createContext(null);
+if (process.env.NODE_ENV !== "production") PickerActionsContext.displayName = "PickerActionsContext";
+const PickerPrivateContext = /* @__PURE__ */ React.createContext({
+  ownerState: {
+    isPickerDisabled: false,
+    isPickerReadOnly: false,
+    isPickerValueEmpty: false,
+    isPickerOpen: false,
+    pickerVariant: "desktop",
+    pickerOrientation: "portrait"
+  },
+  rootRefObject: {
+    current: null
+  },
+  labelId: void 0,
+  dismissViews: () => {
+  },
+  hasUIView: true,
+  getCurrentViewMode: () => "UI",
+  triggerElement: null,
+  viewContainerRole: null,
+  defaultActionBarActions: [],
+  onPopperExited: void 0
+});
+if (process.env.NODE_ENV !== "production") PickerPrivateContext.displayName = "PickerPrivateContext";
+function PickerProvider(props) {
   const {
     contextValue,
     actionsContextValue,
@@ -43387,7 +42185,7 @@ const overridesResolver$3 = (props, styles2) => {
   const {
     ownerState
   } = props;
-  return [styles2.root, styles2[`position${capitalize$2(ownerState.position)}`], ownerState.disablePointerEvents === true && styles2.disablePointerEvents, styles2[ownerState.variant]];
+  return [styles2.root, styles2[`position${capitalize$1(ownerState.position)}`], ownerState.disablePointerEvents === true && styles2.disablePointerEvents, styles2[ownerState.variant]];
 };
 const useUtilityClasses$11 = (ownerState) => {
   const {
@@ -43399,7 +42197,7 @@ const useUtilityClasses$11 = (ownerState) => {
     variant
   } = ownerState;
   const slots = {
-    root: ["root", disablePointerEvents && "disablePointerEvents", position && `position${capitalize$2(position)}`, variant, hiddenLabel && "hiddenLabel", size && `size${capitalize$2(size)}`]
+    root: ["root", disablePointerEvents && "disablePointerEvents", position && `position${capitalize$1(position)}`, variant, hiddenLabel && "hiddenLabel", size && `size${capitalize$1(size)}`]
   };
   return composeClasses$1(slots, getInputAdornmentUtilityClass, classes);
 };
@@ -49627,8 +48425,8 @@ const useUtilityClasses$K = (ownerState) => {
   } = ownerState;
   const slots = {
     root: ["root"],
-    container: ["container", `scroll${capitalize$2(scroll)}`],
-    paper: ["paper", `paperScroll${capitalize$2(scroll)}`, `paperWidth${capitalize$2(String(maxWidth2))}`, fullWidth && "paperFullWidth", fullScreen && "paperFullScreen"]
+    container: ["container", `scroll${capitalize$1(scroll)}`],
+    paper: ["paper", `paperScroll${capitalize$1(scroll)}`, `paperWidth${capitalize$1(String(maxWidth2))}`, fullWidth && "paperFullWidth", fullScreen && "paperFullScreen"]
   };
   return composeClasses$1(slots, getDialogUtilityClass, classes);
 };
@@ -49649,7 +48447,7 @@ const DialogContainer = styled("div", {
     const {
       ownerState
     } = props;
-    return [styles2.container, styles2[`scroll${capitalize$2(ownerState.scroll)}`]];
+    return [styles2.container, styles2[`scroll${capitalize$1(ownerState.scroll)}`]];
   }
 })({
   height: "100%",
@@ -49692,7 +48490,7 @@ const DialogPaper = styled(Paper$1, {
     const {
       ownerState
     } = props;
-    return [styles2.paper, styles2[`scrollPaper${capitalize$2(ownerState.scroll)}`], styles2[`paperWidth${capitalize$2(String(ownerState.maxWidth))}`], ownerState.fullWidth && styles2.paperFullWidth, ownerState.fullScreen && styles2.paperFullScreen];
+    return [styles2.paper, styles2[`scrollPaper${capitalize$1(ownerState.scroll)}`], styles2[`paperWidth${capitalize$1(String(ownerState.maxWidth))}`], ownerState.fullWidth && styles2.paperFullWidth, ownerState.fullScreen && styles2.paperFullScreen];
   }
 })(memoTheme(({
   theme: theme2
@@ -51320,7 +50118,7 @@ const useUtilityClasses$J = (ownerState) => {
     disabled
   } = ownerState;
   const slots = {
-    root: ["root", icon && label && "labelIcon", `textColor${capitalize$2(textColor)}`, fullWidth && "fullWidth", wrapped && "wrapped", selected && "selected", disabled && "disabled"],
+    root: ["root", icon && label && "labelIcon", `textColor${capitalize$1(textColor)}`, fullWidth && "fullWidth", wrapped && "wrapped", selected && "selected", disabled && "disabled"],
     icon: ["iconWrapper", "icon"]
   };
   return composeClasses$1(slots, getTabUtilityClass, classes);
@@ -51332,7 +50130,7 @@ const TabRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.label && ownerState.icon && styles2.labelIcon, styles2[`textColor${capitalize$2(ownerState.textColor)}`], ownerState.fullWidth && styles2.fullWidth, ownerState.wrapped && styles2.wrapped, {
+    return [styles2.root, ownerState.label && ownerState.icon && styles2.labelIcon, styles2[`textColor${capitalize$1(ownerState.textColor)}`], ownerState.fullWidth && styles2.fullWidth, ownerState.wrapped && styles2.wrapped, {
       [`& .${tabClasses.iconWrapper}`]: styles2.iconWrapper
     }, {
       [`& .${tabClasses.icon}`]: styles2.icon
@@ -51781,7 +50579,7 @@ const TabScrollButton = /* @__PURE__ */ React.forwardRef(function TabScrollButto
     disabled,
     ...other
   } = props;
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const ownerState = {
     isRtl,
     ...props
@@ -52122,7 +50920,7 @@ const Tabs$1 = /* @__PURE__ */ React.forwardRef(function Tabs(inProps, ref) {
     name: "MuiTabs"
   });
   const theme2 = useTheme();
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -57919,10 +56717,10 @@ const useUtilityClasses$t = (ownerState) => {
     variant
   } = ownerState;
   const slots = {
-    root: ["root", `anchor${capitalize$2(anchor)}`],
+    root: ["root", `anchor${capitalize$1(anchor)}`],
     docked: [(variant === "permanent" || variant === "persistent") && "docked"],
     modal: ["modal"],
-    paper: ["paper", `paperAnchor${capitalize$2(anchor)}`, variant !== "temporary" && `paperAnchorDocked${capitalize$2(anchor)}`]
+    paper: ["paper", `paperAnchor${capitalize$1(anchor)}`, variant !== "temporary" && `paperAnchorDocked${capitalize$1(anchor)}`]
   };
   return composeClasses$1(slots, getDrawerUtilityClass, classes);
 };
@@ -57951,7 +56749,7 @@ const DrawerPaper = styled(Paper$1, {
     const {
       ownerState
     } = props;
-    return [styles2.paper, styles2[`paperAnchor${capitalize$2(ownerState.anchor)}`], ownerState.variant !== "temporary" && styles2[`paperAnchorDocked${capitalize$2(ownerState.anchor)}`]];
+    return [styles2.paper, styles2[`paperAnchor${capitalize$1(ownerState.anchor)}`], ownerState.variant !== "temporary" && styles2[`paperAnchorDocked${capitalize$1(ownerState.anchor)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -58058,7 +56856,7 @@ const Drawer$1 = /* @__PURE__ */ React.forwardRef(function Drawer(inProps, ref)
     name: "MuiDrawer"
   });
   const theme2 = useTheme();
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const defaultTransitionDuration = {
     enter: theme2.transitions.duration.enteringScreen,
     exit: theme2.transitions.duration.leavingScreen
@@ -58844,7 +57642,7 @@ const overridesResolver = (props, styles2) => {
   const {
     ownerState
   } = props;
-  return [styles2.root, styles2[ownerState.variant], styles2[`size${capitalize$2(ownerState.size)}`], ownerState.variant === "text" && styles2[`text${capitalize$2(ownerState.color)}`], ownerState.variant === "outlined" && styles2[`outlined${capitalize$2(ownerState.color)}`], ownerState.shape === "rounded" && styles2.rounded, ownerState.type === "page" && styles2.page, (ownerState.type === "start-ellipsis" || ownerState.type === "end-ellipsis") && styles2.ellipsis, (ownerState.type === "previous" || ownerState.type === "next") && styles2.previousNext, (ownerState.type === "first" || ownerState.type === "last") && styles2.firstLast];
+  return [styles2.root, styles2[ownerState.variant], styles2[`size${capitalize$1(ownerState.size)}`], ownerState.variant === "text" && styles2[`text${capitalize$1(ownerState.color)}`], ownerState.variant === "outlined" && styles2[`outlined${capitalize$1(ownerState.color)}`], ownerState.shape === "rounded" && styles2.rounded, ownerState.type === "page" && styles2.page, (ownerState.type === "start-ellipsis" || ownerState.type === "end-ellipsis") && styles2.ellipsis, (ownerState.type === "previous" || ownerState.type === "next") && styles2.previousNext, (ownerState.type === "first" || ownerState.type === "last") && styles2.firstLast];
 };
 const useUtilityClasses$s = (ownerState) => {
   const {
@@ -58858,7 +57656,7 @@ const useUtilityClasses$s = (ownerState) => {
     variant
   } = ownerState;
   const slots = {
-    root: ["root", `size${capitalize$2(size)}`, variant, shape2, color2 !== "standard" && `color${capitalize$2(color2)}`, color2 !== "standard" && `${variant}${capitalize$2(color2)}`, disabled && "disabled", selected && "selected", {
+    root: ["root", `size${capitalize$1(size)}`, variant, shape2, color2 !== "standard" && `color${capitalize$1(color2)}`, color2 !== "standard" && `${variant}${capitalize$1(color2)}`, disabled && "disabled", selected && "selected", {
       page: "page",
       first: "firstLast",
       last: "firstLast",
@@ -59119,7 +57917,7 @@ const PaginationItem = /* @__PURE__ */ React.forwardRef(function PaginationItem2
     type,
     variant
   };
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const classes = useUtilityClasses$s(ownerState);
   const externalForwardedProps = {
     slots: {
@@ -59591,7 +58389,7 @@ const useUtilityClasses$q = (ownerState) => {
     focusVisible
   } = ownerState;
   const slots = {
-    root: ["root", `size${capitalize$2(size)}`, disabled && "disabled", focusVisible && "focusVisible", readOnly && "readOnly"],
+    root: ["root", `size${capitalize$1(size)}`, disabled && "disabled", focusVisible && "focusVisible", readOnly && "readOnly"],
     label: ["label", "pristine"],
     labelEmptyValue: [emptyValueFocused && "labelEmptyValueActive"],
     icon: ["icon"],
@@ -59614,7 +58412,7 @@ const RatingRoot = styled("span", {
     } = props;
     return [{
       [`& .${ratingClasses.visuallyHidden}`]: styles2.visuallyHidden
-    }, styles2.root, styles2[`size${capitalize$2(ownerState.size)}`], ownerState.readOnly && styles2.readOnly];
+    }, styles2.root, styles2[`size${capitalize$1(ownerState.size)}`], ownerState.readOnly && styles2.readOnly];
   }
 })(memoTheme(({
   theme: theme2
@@ -59921,7 +58719,7 @@ const Rating$1 = /* @__PURE__ */ React.forwardRef(function Rating(inProps, ref)
     name: "Rating"
   });
   const valueRounded = roundValueToPrecision(valueDerived, precision);
-  const isRtl = useRtl$1();
+  const isRtl = useRtl();
   const [{
     hover,
     focus
@@ -61003,7 +59801,7 @@ const useUtilityClasses$o = (ownerState) => {
     anchorOrigin
   } = ownerState;
   const slots = {
-    root: ["root", `anchorOrigin${capitalize$2(anchorOrigin.vertical)}${capitalize$2(anchorOrigin.horizontal)}`]
+    root: ["root", `anchorOrigin${capitalize$1(anchorOrigin.vertical)}${capitalize$1(anchorOrigin.horizontal)}`]
   };
   return composeClasses$1(slots, getSnackbarUtilityClass, classes);
 };
@@ -61014,7 +59812,7 @@ const SnackbarRoot = styled("div", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`anchorOrigin${capitalize$2(ownerState.anchorOrigin.vertical)}${capitalize$2(ownerState.anchorOrigin.horizontal)}`]];
+    return [styles2.root, styles2[`anchorOrigin${capitalize$1(ownerState.anchorOrigin.vertical)}${capitalize$1(ownerState.anchorOrigin.horizontal)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -61675,7 +60473,7 @@ const useUtilityClasses$n = (ownerState) => {
     size
   } = ownerState;
   const slots = {
-    root: ["root", variant, `size${capitalize$2(size)}`, color2 === "inherit" ? "colorInherit" : color2]
+    root: ["root", variant, `size${capitalize$1(size)}`, color2 === "inherit" ? "colorInherit" : color2]
   };
   const composedClasses = composeClasses$1(slots, getFabUtilityClass, classes);
   return {
@@ -61692,7 +60490,7 @@ const FabRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[ownerState.variant], styles2[`size${capitalize$2(ownerState.size)}`], ownerState.color === "inherit" && styles2.colorInherit, styles2[capitalize$2(ownerState.size)], styles2[ownerState.color]];
+    return [styles2.root, styles2[ownerState.variant], styles2[`size${capitalize$1(ownerState.size)}`], ownerState.color === "inherit" && styles2.colorInherit, styles2[capitalize$1(ownerState.size)], styles2[ownerState.color]];
   }
 })(memoTheme(({
   theme: theme2
@@ -61932,7 +60730,7 @@ const useUtilityClasses$m = (ownerState) => {
     direction
   } = ownerState;
   const slots = {
-    root: ["root", `direction${capitalize$2(direction)}`],
+    root: ["root", `direction${capitalize$1(direction)}`],
     fab: ["fab"],
     actions: ["actions", !open && "actionsClosed"]
   };
@@ -61956,7 +60754,7 @@ const SpeedDialRoot = styled("div", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`direction${capitalize$2(ownerState.direction)}`]];
+    return [styles2.root, styles2[`direction${capitalize$1(ownerState.direction)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -62470,7 +61268,7 @@ const useUtilityClasses$l = (ownerState) => {
   } = ownerState;
   const slots = {
     fab: ["fab", !open && "fabClosed"],
-    staticTooltip: ["staticTooltip", `tooltipPlacement${capitalize$2(tooltipPlacement)}`, !open && "staticTooltipClosed"],
+    staticTooltip: ["staticTooltip", `tooltipPlacement${capitalize$1(tooltipPlacement)}`, !open && "staticTooltipClosed"],
     staticTooltipLabel: ["staticTooltipLabel"]
   };
   return composeClasses$1(slots, getSpeedDialActionUtilityClass, classes);
@@ -62515,7 +61313,7 @@ const SpeedDialActionStaticTooltip = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.staticTooltip, !ownerState.open && styles2.staticTooltipClosed, styles2[`tooltipPlacement${capitalize$2(ownerState.tooltipPlacement)}`]];
+    return [styles2.staticTooltip, !ownerState.open && styles2.staticTooltipClosed, styles2[`tooltipPlacement${capitalize$1(ownerState.tooltipPlacement)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -62995,7 +61793,7 @@ const useUtilityClasses$j = (ownerState) => {
   } = ownerState;
   const slots = {
     root: ["root", orientation, alternativeLabel && "alternativeLabel", active && "active", completed && "completed", disabled && "disabled"],
-    line: ["line", `line${capitalize$2(orientation)}`]
+    line: ["line", `line${capitalize$1(orientation)}`]
   };
   return composeClasses$1(slots, getStepConnectorUtilityClass, classes);
 };
@@ -63037,7 +61835,7 @@ const StepConnectorLine = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.line, styles2[`line${capitalize$2(ownerState.orientation)}`]];
+    return [styles2.line, styles2[`line${capitalize$1(ownerState.orientation)}`]];
   }
 })(memoTheme(({
   theme: theme2
@@ -64450,7 +63248,7 @@ const useUtilityClasses$8 = (ownerState) => {
     stickyHeader
   } = ownerState;
   const slots = {
-    root: ["root", variant, stickyHeader && "stickyHeader", align !== "inherit" && `align${capitalize$2(align)}`, padding2 !== "normal" && `padding${capitalize$2(padding2)}`, `size${capitalize$2(size)}`]
+    root: ["root", variant, stickyHeader && "stickyHeader", align !== "inherit" && `align${capitalize$1(align)}`, padding2 !== "normal" && `padding${capitalize$1(padding2)}`, `size${capitalize$1(size)}`]
   };
   return composeClasses$1(slots, getTableCellUtilityClass, classes);
 };
@@ -64461,7 +63259,7 @@ const TableCellRoot = styled("td", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[ownerState.variant], styles2[`size${capitalize$2(ownerState.size)}`], ownerState.padding !== "normal" && styles2[`padding${capitalize$2(ownerState.padding)}`], ownerState.align !== "inherit" && styles2[`align${capitalize$2(ownerState.align)}`], ownerState.stickyHeader && styles2.stickyHeader];
+    return [styles2.root, styles2[ownerState.variant], styles2[`size${capitalize$1(ownerState.size)}`], ownerState.padding !== "normal" && styles2[`padding${capitalize$1(ownerState.padding)}`], ownerState.align !== "inherit" && styles2[`align${capitalize$1(ownerState.align)}`], ownerState.stickyHeader && styles2.stickyHeader];
   }
 })(memoTheme(({
   theme: theme2
@@ -66357,7 +65155,7 @@ function getTimelineUtilityClass(slot) {
 }
 generateUtilityClasses$1("MuiTimeline", ["root", "positionLeft", "positionRight", "positionAlternate", "positionAlternateReverse"]);
 function convertTimelinePositionToClass(position) {
-  return position === "alternate-reverse" ? "positionAlternateReverse" : `position${capitalize$2(position)}`;
+  return position === "alternate-reverse" ? "positionAlternateReverse" : `position${capitalize$1(position)}`;
 }
 const useUtilityClasses$6 = (ownerState) => {
   const {
@@ -66792,7 +65590,7 @@ const useUtilityClasses$1 = (ownerState) => {
     classes
   } = ownerState;
   const slots = {
-    root: ["root", variant, color2 !== "inherit" && `${variant}${capitalize$2(color2)}`]
+    root: ["root", variant, color2 !== "inherit" && `${variant}${capitalize$1(color2)}`]
   };
   return composeClasses$1(slots, getTimelineDotUtilityClass, classes);
 };
@@ -66803,7 +65601,7 @@ const TimelineDotRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[ownerState.color !== "inherit" && `${ownerState.variant}${capitalize$2(ownerState.color)}`], styles2[ownerState.variant]];
+    return [styles2.root, styles2[ownerState.color !== "inherit" && `${ownerState.variant}${capitalize$1(ownerState.color)}`], styles2[ownerState.variant]];
   }
 })(({
   ownerState,
@@ -68505,7 +67303,7 @@ export {
   darkTheme,
   isSidenavGroup,
   lightTheme,
-  shape$1 as shape,
+  shape,
   spacing,
   theme,
   tokens,