@suportepos/split-checkout 0.4.5 → 0.4.6

package/dist/index.es.js

@@ -2505,8 +2505,8 @@ function createBreakpoints(breakpoints) {
     ...other
   };
 }
-function sortContainerQueries(theme2, css2) {
-  if (!theme2.containerQueries) {
+function sortContainerQueries(theme, css2) {
+  if (!theme.containerQueries) {
     return css2;
   }
   const sorted = Object.keys(css2).filter((key) => key.startsWith("@container")).sort((a, b) => {
@@ -2528,7 +2528,7 @@ function sortContainerQueries(theme2, css2) {
 function isCqShorthand(breakpointKeys, value) {
   return value === "@" || value.startsWith("@") && (breakpointKeys.some((key) => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
-function getContainerQuery(theme2, shorthand) {
+function getContainerQuery(theme, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== "production") {
@@ -2539,7 +2539,7 @@ For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage
   }
   const [, containerQuery, containerName] = matches;
   const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
-  return theme2.containerQueries(containerName).up(value);
+  return theme.containerQueries(containerName).up(value);
 }
 function cssContainerQueries(themeInput) {
   const toContainerQuery = (mediaQuery, name) => mediaQuery.replace("@media", name ? `@container ${name}` : "@container");
@@ -2610,19 +2610,19 @@ const defaultContainerQueries = {
   })
 };
 function handleBreakpoints(props, propValue, styleFromPropValue) {
-  const theme2 = props.theme || {};
+  const theme = props.theme || {};
   if (Array.isArray(propValue)) {
-    const themeBreakpoints = theme2.breakpoints || defaultBreakpoints;
+    const themeBreakpoints = theme.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;
+    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
       if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
-        const containerKey = getContainerQuery(theme2.containerQueries ? theme2 : defaultContainerQueries, breakpoint);
+        const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
         if (containerKey) {
           acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
         }
@@ -2756,8 +2756,8 @@ function style$2(options) {
       return null;
     }
     const propValue = props[prop];
-    const theme2 = props.theme;
-    const themeMapping = getPath(theme2, themeKey) || {};
+    const theme = props.theme;
+    const themeMapping = getPath(theme, themeKey) || {};
     const styleFromPropValue = (propValueFinal) => {
       let value = getStyleValue$1(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === "string") {
@@ -2821,8 +2821,8 @@ const getCssProperties = memoize((prop) => {
 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;
+function createUnaryUnit(theme, themeKey, defaultValue, propName) {
+  const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === "number" || typeof themeSpacing === "string") {
     return (val) => {
       if (typeof val === "string") {
@@ -2879,8 +2879,8 @@ function createUnaryUnit(theme2, themeKey, defaultValue, propName) {
   }
   return () => void 0;
 }
-function createUnarySpacing(theme2) {
-  return createUnaryUnit(theme2, "spacing", 8, "spacing");
+function createUnarySpacing(theme) {
+  return createUnaryUnit(theme, "spacing", 8, "spacing");
 }
 function getValue(transformer, propValue) {
   if (typeof propValue === "string" || propValue == null) {
@@ -3457,10 +3457,10 @@ function callIfFn(maybeFn, arg2) {
   return typeof maybeFn === "function" ? maybeFn(arg2) : maybeFn;
 }
 function unstable_createStyleFunctionSx() {
-  function getThemeValue(prop, val, theme2, config2) {
+  function getThemeValue(prop, val, theme, config2) {
     const props = {
       [prop]: val,
-      theme: theme2
+      theme
     };
     const options = config2[prop];
     if (!options) {
@@ -3482,7 +3482,7 @@ function unstable_createStyleFunctionSx() {
         [prop]: val
       };
     }
-    const themeMapping = getPath(theme2, themeKey) || {};
+    const themeMapping = getPath(theme, themeKey) || {};
     if (style2) {
       return style2(props);
     }
@@ -3503,42 +3503,42 @@ function unstable_createStyleFunctionSx() {
   function styleFunctionSx2(props) {
     const {
       sx,
-      theme: theme2 = {},
+      theme = {},
       nested: nested2
     } = props || {};
     if (!sx) {
       return null;
     }
-    const config2 = theme2.unstable_sxConfig ?? defaultSxConfig;
+    const config2 = theme.unstable_sxConfig ?? defaultSxConfig;
     function traverse(sxInput) {
       let sxObject = sxInput;
       if (typeof sxInput === "function") {
-        sxObject = sxInput(theme2);
+        sxObject = sxInput(theme);
       } else if (typeof sxInput !== "object") {
         return sxInput;
       }
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = createEmptyBreakpointObject(theme2.breakpoints);
+      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
       const breakpointsKeys = Object.keys(emptyBreakpoints);
       let css2 = emptyBreakpoints;
       Object.keys(sxObject).forEach((styleKey) => {
-        const value = callIfFn(sxObject[styleKey], theme2);
+        const value = callIfFn(sxObject[styleKey], theme);
         if (value !== null && value !== void 0) {
           if (typeof value === "object") {
             if (config2[styleKey]) {
-              css2 = merge(css2, getThemeValue(styleKey, value, theme2, config2));
+              css2 = merge(css2, getThemeValue(styleKey, value, theme, config2));
             } else {
               const breakpointsValues = handleBreakpoints({
-                theme: theme2
+                theme
               }, value, (x) => ({
                 [styleKey]: x
               }));
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css2[styleKey] = styleFunctionSx2({
                   sx: value,
-                  theme: theme2,
+                  theme,
                   nested: true
                 });
               } else {
@@ -3546,16 +3546,16 @@ function unstable_createStyleFunctionSx() {
               }
             }
           } else {
-            css2 = merge(css2, getThemeValue(styleKey, value, theme2, config2));
+            css2 = merge(css2, getThemeValue(styleKey, value, theme, config2));
           }
         }
       });
-      if (!nested2 && theme2.modularCssLayers) {
+      if (!nested2 && theme.modularCssLayers) {
         return {
-          "@layer sx": sortContainerQueries(theme2, removeUnusedBreakpoints(breakpointsKeys, css2))
+          "@layer sx": sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css2))
         };
       }
-      return sortContainerQueries(theme2, removeUnusedBreakpoints(breakpointsKeys, css2));
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css2));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
@@ -3564,12 +3564,12 @@ function unstable_createStyleFunctionSx() {
 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") {
+  const theme = this;
+  if (theme.vars) {
+    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== "function") {
       return {};
     }
-    let selector = theme2.getColorSchemeSelector(key);
+    let selector = theme.getColorSchemeSelector(key);
     if (selector === "&") {
       return styles2;
     }
@@ -3580,7 +3580,7 @@ function applyStyles(key, styles2) {
       [selector]: styles2
     };
   }
-  if (theme2.palette.mode === key) {
+  if (theme.palette.mode === key) {
     return styles2;
   }
   return {};
@@ -3777,7 +3777,7 @@ function createBox(options = {}) {
     shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
   })(styleFunctionSx);
   const Box2 = /* @__PURE__ */ React.forwardRef(function Box3(inProps, ref) {
-    const theme2 = useTheme$2(defaultTheme2);
+    const theme = useTheme$2(defaultTheme2);
     const {
       className,
       component = "div",
@@ -3787,7 +3787,7 @@ function createBox(options = {}) {
       as: component,
       ref,
       className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme2[themeId] || theme2 : theme2,
+      theme: themeId ? theme[themeId] || theme : theme,
       ...other
     });
   });
@@ -4013,8 +4013,8 @@ function createStyled(input = {}) {
       expressionsHead.push(styleAttachTheme);
       if (componentName && overridesResolver2) {
         expressionsTail.push(function styleThemeOverrides(props) {
-          const theme2 = props.theme;
-          const styleOverrides = theme2.components?.[componentName]?.styleOverrides;
+          const theme = props.theme;
+          const styleOverrides = theme.components?.[componentName]?.styleOverrides;
           if (!styleOverrides) {
             return null;
           }
@@ -4027,8 +4027,8 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsTail.push(function styleThemeVariants(props) {
-          const theme2 = props.theme;
-          const themeVariants = theme2?.components?.[componentName]?.variants;
+          const theme = props.theme;
+          const themeVariants = theme?.components?.[componentName]?.variants;
           if (!themeVariants) {
             return null;
           }
@@ -4146,14 +4146,14 @@ function resolveProps(defaultProps2, props, mergeClassNameAndStyle = false) {
 }
 function getThemeProps$1(params) {
   const {
-    theme: theme2,
+    theme,
     name,
     props
   } = params;
-  if (!theme2 || !theme2.components || !theme2.components[name] || !theme2.components[name].defaultProps) {
+  if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
     return props;
   }
-  return resolveProps(theme2.components[name].defaultProps, props);
+  return resolveProps(theme.components[name].defaultProps, props);
 }
 function useThemeProps({
   props,
@@ -4161,12 +4161,12 @@ function useThemeProps({
   defaultTheme: defaultTheme2,
   themeId
 }) {
-  let theme2 = useTheme$2(defaultTheme2);
+  let theme = useTheme$2(defaultTheme2);
   if (themeId) {
-    theme2 = theme2[themeId] || theme2;
+    theme = theme[themeId] || theme;
   }
   return getThemeProps$1({
-    theme: theme2,
+    theme,
     name,
     props
   });
@@ -4237,9 +4237,9 @@ function unstable_createUseMediaQuery(params = {}) {
     themeId
   } = params;
   return function useMediaQuery2(queryInput, options = {}) {
-    let theme2 = useTheme$3();
-    if (theme2 && themeId) {
-      theme2 = theme2[themeId] || theme2;
+    let theme = useTheme$3();
+    if (theme && themeId) {
+      theme = theme[themeId] || theme;
     }
     const supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
     const {
@@ -4250,14 +4250,14 @@ function unstable_createUseMediaQuery(params = {}) {
     } = getThemeProps$1({
       name: "MuiUseMediaQuery",
       props: options,
-      theme: theme2
+      theme
     });
     if (process.env.NODE_ENV !== "production") {
-      if (typeof queryInput === "function" && theme2 === null) {
+      if (typeof queryInput === "function" && theme === null) {
         console.error(["MUI: The `query` argument provided is invalid.", "You are providing a function without a theme in the context.", "One of the parent elements needs to use a ThemeProvider."].join("\n"));
       }
     }
-    let query = typeof queryInput === "function" ? queryInput(theme2) : queryInput;
+    let query = typeof queryInput === "function" ? queryInput(theme) : queryInput;
     query = query.replace(/^@media( ?)/m, "");
     if (query.includes("print")) {
       console.warn([`MUI: You have provided a \`print\` query to the \`useMediaQuery\` hook.`, "Using the print media query to modify print styles can lead to unexpected results.", "Consider using the `displayPrint` field in the `sx` prop instead.", "More information about `displayPrint` on our docs: https://mui.com/system/display/#display-in-print."].join("\n"));
@@ -4510,11 +4510,11 @@ if (process.env.NODE_ENV !== "production") {
   ThemeContext.displayName = "ThemeContext";
 }
 function useTheme$1() {
-  const theme2 = React.useContext(ThemeContext);
+  const theme = React.useContext(ThemeContext);
   if (process.env.NODE_ENV !== "production") {
-    React.useDebugValue(theme2);
+    React.useDebugValue(theme);
   }
-  return theme2;
+  return theme;
 }
 const hasSymbol = typeof Symbol === "function" && Symbol.for;
 const nested = hasSymbol ? Symbol.for("mui.nested") : "__THEME_NESTED__";
@@ -4544,7 +4544,7 @@ function ThemeProvider$2(props) {
       console.error(["MUI: You are providing a theme function prop to the ThemeProvider component:", "<ThemeProvider theme={outerTheme => outerTheme} />", "", "However, no outer theme is present.", "Make sure a theme is already injected higher in the React tree or provide a theme object."].join("\n"));
     }
   }
-  const theme2 = React.useMemo(() => {
+  const theme = React.useMemo(() => {
     const output = outerTheme === null ? {
       ...localTheme
     } : mergeOuterLocalTheme(outerTheme, localTheme);
@@ -4554,7 +4554,7 @@ function ThemeProvider$2(props) {
     return output;
   }, [localTheme, outerTheme]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, {
-    value: theme2,
+    value: theme,
     children
   });
 }
@@ -4615,19 +4615,19 @@ process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes = {
 } : void 0;
 function getThemeProps(params) {
   const {
-    theme: theme2,
+    theme,
     name,
     props
   } = params;
-  if (!theme2 || !theme2.components || !theme2.components[name]) {
+  if (!theme || !theme.components || !theme.components[name]) {
     return props;
   }
-  const config2 = theme2.components[name];
+  const config2 = theme.components[name];
   if (config2.defaultProps) {
-    return resolveProps(config2.defaultProps, props, theme2.components.mergeClassNameAndStyle);
+    return resolveProps(config2.defaultProps, props, theme.components.mergeClassNameAndStyle);
   }
   if (!config2.styleOverrides && !config2.variants) {
-    return resolveProps(config2, props, theme2.components.mergeClassNameAndStyle);
+    return resolveProps(config2, props, theme.components.mergeClassNameAndStyle);
   }
   return props;
 }
@@ -4667,12 +4667,12 @@ function useId(idOverride) {
   }
   return useGlobalId(idOverride);
 }
-function useLayerOrder(theme2) {
+function useLayerOrder(theme) {
   const upperTheme = useTheme$3();
   const id = useId() || "";
   const {
     modularCssLayers
-  } = theme2;
+  } = theme;
   let layerOrder = "mui.global, mui.components, mui.theme, mui.custom, mui.sx";
   if (!modularCssLayers || upperTheme !== null) {
     layerOrder = "";
@@ -5243,32 +5243,32 @@ function createCssVarsProvider(options) {
     }
     const memoTheme2 = React.useMemo(() => {
       const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
-      const theme2 = {
+      const theme = {
         ...restThemeProp,
         components,
         colorSchemes,
         cssVarPrefix,
         vars: themeVars
       };
-      if (typeof theme2.generateSpacing === "function") {
-        theme2.spacing = theme2.generateSpacing();
+      if (typeof theme.generateSpacing === "function") {
+        theme.spacing = theme.generateSpacing();
       }
       if (calculatedColorScheme) {
         const scheme = colorSchemes[calculatedColorScheme];
         if (scheme && typeof scheme === "object") {
           Object.keys(scheme).forEach((schemeKey) => {
             if (scheme[schemeKey] && typeof scheme[schemeKey] === "object") {
-              theme2[schemeKey] = {
-                ...theme2[schemeKey],
+              theme[schemeKey] = {
+                ...theme[schemeKey],
                 ...scheme[schemeKey]
               };
             } else {
-              theme2[schemeKey] = scheme[schemeKey];
+              theme[schemeKey] = scheme[schemeKey];
             }
           });
         }
       }
-      return resolveTheme ? resolveTheme(theme2) : theme2;
+      return resolveTheme ? resolveTheme(theme) : theme;
     }, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
     useEnhancedEffect(() => {
@@ -5501,7 +5501,7 @@ const getCssValue = (keys, value) => {
   }
   return value;
 };
-function cssVarsParser(theme2, options) {
+function cssVarsParser(theme, options) {
   const {
     prefix,
     shouldSkipGeneratingVar: shouldSkipGeneratingVar2
@@ -5510,7 +5510,7 @@ function cssVarsParser(theme2, options) {
   const vars = {};
   const varsWithDefaults = {};
   walkObjectDeep(
-    theme2,
+    theme,
     (keys, value, arrayKeys) => {
       if (typeof value === "string" || typeof value === "number") {
         if (!shouldSkipGeneratingVar2 || !shouldSkipGeneratingVar2(keys, value)) {
@@ -5533,7 +5533,7 @@ function cssVarsParser(theme2, options) {
     varsWithDefaults
   };
 }
-function prepareCssVars(theme2, parserConfig = {}) {
+function prepareCssVars(theme, parserConfig = {}) {
   const {
     getSelector = defaultGetSelector2,
     disableCssColorScheme,
@@ -5545,7 +5545,7 @@ function prepareCssVars(theme2, parserConfig = {}) {
     components,
     defaultColorScheme = "light",
     ...otherTheme
-  } = theme2;
+  } = theme;
   const {
     vars: rootVars,
     css: rootCss,
@@ -5594,7 +5594,7 @@ function prepareCssVars(theme2, parserConfig = {}) {
     }
     if (colorScheme) {
       if (rule === "media") {
-        if (theme2.defaultColorScheme === colorScheme) {
+        if (theme.defaultColorScheme === colorScheme) {
           return ":root";
         }
         const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
@@ -5605,7 +5605,7 @@ function prepareCssVars(theme2, parserConfig = {}) {
         };
       }
       if (rule) {
-        if (theme2.defaultColorScheme === colorScheme) {
+        if (theme.defaultColorScheme === colorScheme) {
           return `:root, ${rule.replace("%s", String(colorScheme))}`;
         }
         return rule.replace("%s", String(colorScheme));
@@ -5626,7 +5626,7 @@ function prepareCssVars(theme2, parserConfig = {}) {
   };
   const generateStyleSheets = () => {
     const stylesheets = [];
-    const colorScheme = theme2.defaultColorScheme || "light";
+    const colorScheme = theme.defaultColorScheme || "light";
     function insertStyleSheet(key, css2) {
       if (Object.keys(css2).length) {
         stylesheets.push(typeof key === "string" ? {
@@ -5775,7 +5775,7 @@ function createContainer(options = {}) {
     componentName = "MuiContainer"
   } = options;
   const ContainerRoot = createStyledComponent(({
-    theme: theme2,
+    theme,
     ownerState
   }) => ({
     width: "100%",
@@ -5783,44 +5783,44 @@ function createContainer(options = {}) {
     boxSizing: "border-box",
     marginRight: "auto",
     ...!ownerState.disableGutters && {
-      paddingLeft: theme2.spacing(2),
-      paddingRight: theme2.spacing(2),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      [theme2.breakpoints.up("sm")]: {
-        paddingLeft: theme2.spacing(3),
-        paddingRight: theme2.spacing(3)
+      [theme.breakpoints.up("sm")]: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3)
       }
     }
   }), ({
-    theme: theme2,
+    theme,
     ownerState
-  }) => ownerState.fixed && Object.keys(theme2.breakpoints.values).reduce((acc, breakpointValueKey) => {
+  }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
     const breakpoint = breakpointValueKey;
-    const value = theme2.breakpoints.values[breakpoint];
+    const value = theme.breakpoints.values[breakpoint];
     if (value !== 0) {
-      acc[theme2.breakpoints.up(breakpoint)] = {
-        maxWidth: `${value}${theme2.breakpoints.unit}`
+      acc[theme.breakpoints.up(breakpoint)] = {
+        maxWidth: `${value}${theme.breakpoints.unit}`
       };
     }
     return acc;
   }, {}), ({
-    theme: theme2,
+    theme,
     ownerState
   }) => ({
     // @ts-ignore module augmentation fails if custom breakpoints are used
     ...ownerState.maxWidth === "xs" && {
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      [theme2.breakpoints.up("xs")]: {
+      [theme.breakpoints.up("xs")]: {
         // @ts-ignore module augmentation fails if custom breakpoints are used
-        maxWidth: Math.max(theme2.breakpoints.values.xs, 444)
+        maxWidth: Math.max(theme.breakpoints.values.xs, 444)
       }
     },
     ...ownerState.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
     ownerState.maxWidth !== "xs" && {
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      [theme2.breakpoints.up(ownerState.maxWidth)]: {
+      [theme.breakpoints.up(ownerState.maxWidth)]: {
         // @ts-ignore module augmentation fails if custom breakpoints are used
-        maxWidth: `${theme2.breakpoints.values[ownerState.maxWidth]}${theme2.breakpoints.unit}`
+        maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
       }
     }
   }));
@@ -5920,11 +5920,11 @@ function getParentSpacingVar(axis) {
 const selfColumnsVar = "--Grid-columns";
 const parentColumnsVar = "--Grid-parent-columns";
 const generateGridSizeStyles = ({
-  theme: theme2,
+  theme,
   ownerState
 }) => {
   const styles2 = {};
-  traverseBreakpoints(theme2.breakpoints, ownerState.size, (appendStyle, value) => {
+  traverseBreakpoints(theme.breakpoints, ownerState.size, (appendStyle, value) => {
     let style2 = {};
     if (value === "grow") {
       style2 = {
@@ -5954,11 +5954,11 @@ const generateGridSizeStyles = ({
   return styles2;
 };
 const generateGridOffsetStyles = ({
-  theme: theme2,
+  theme,
   ownerState
 }) => {
   const styles2 = {};
-  traverseBreakpoints(theme2.breakpoints, ownerState.offset, (appendStyle, value) => {
+  traverseBreakpoints(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
     let style2 = {};
     if (value === "auto") {
       style2 = {
@@ -5975,7 +5975,7 @@ const generateGridOffsetStyles = ({
   return styles2;
 };
 const generateGridColumnsStyles = ({
-  theme: theme2,
+  theme,
   ownerState
 }) => {
   if (!ownerState.container) {
@@ -5984,7 +5984,7 @@ const generateGridColumnsStyles = ({
   const styles2 = {
     [selfColumnsVar]: 12
   };
-  traverseBreakpoints(theme2.breakpoints, ownerState.columns, (appendStyle, value) => {
+  traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
     const columns = value ?? 12;
     appendStyle(styles2, {
       [selfColumnsVar]: columns,
@@ -5996,15 +5996,15 @@ const generateGridColumnsStyles = ({
   return styles2;
 };
 const generateGridRowSpacingStyles = ({
-  theme: theme2,
+  theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
   const styles2 = {};
-  traverseBreakpoints(theme2.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
-    const spacing = typeof value === "string" ? value : theme2.spacing?.(value);
+  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+    const spacing = typeof value === "string" ? value : theme.spacing?.(value);
     appendStyle(styles2, {
       [getSelfSpacingVar("row")]: spacing,
       "> *": {
@@ -6015,15 +6015,15 @@ const generateGridRowSpacingStyles = ({
   return styles2;
 };
 const generateGridColumnSpacingStyles = ({
-  theme: theme2,
+  theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
   const styles2 = {};
-  traverseBreakpoints(theme2.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
-    const spacing = typeof value === "string" ? value : theme2.spacing?.(value);
+  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+    const spacing = typeof value === "string" ? value : theme.spacing?.(value);
     appendStyle(styles2, {
       [getSelfSpacingVar("column")]: spacing,
       "> *": {
@@ -6034,14 +6034,14 @@ const generateGridColumnSpacingStyles = ({
   return styles2;
 };
 const generateGridDirectionStyles = ({
-  theme: theme2,
+  theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
   const styles2 = {};
-  traverseBreakpoints(theme2.breakpoints, ownerState.direction, (appendStyle, value) => {
+  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
     appendStyle(styles2, {
       flexDirection: value
     });
@@ -6156,7 +6156,7 @@ function createGrid(options = {}) {
     useTheme: useTheme2 = useTheme$2,
     componentName = "MuiGrid"
   } = options;
-  const useUtilityClasses2 = (ownerState, theme2) => {
+  const useUtilityClasses2 = (ownerState, theme) => {
     const {
       container,
       direction,
@@ -6165,7 +6165,7 @@ function createGrid(options = {}) {
       size
     } = ownerState;
     const slots = {
-      root: ["root", container && "container", wrap !== "wrap" && `wrap-xs-${String(wrap)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(size), ...container ? generateSpacingClassNames(spacing, theme2.breakpoints.keys[0]) : []]
+      root: ["root", container && "container", wrap !== "wrap" && `wrap-xs-${String(wrap)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(size), ...container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : []]
     };
     return composeClasses(slots, (slot) => generateUtilityClass(componentName, slot), {});
   };
@@ -6194,10 +6194,10 @@ function createGrid(options = {}) {
   }
   const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
   const Grid2 = /* @__PURE__ */ React.forwardRef(function Grid3(inProps, ref) {
-    const theme2 = useTheme2();
+    const theme = useTheme2();
     const themeProps = useThemeProps2(inProps);
     const props = extendSxProp$1(themeProps);
-    deleteLegacyGridProps(props, theme2.breakpoints);
+    deleteLegacyGridProps(props, theme.breakpoints);
     const {
       className,
       children,
@@ -6214,8 +6214,8 @@ function createGrid(options = {}) {
       unstable_level: level = 0,
       ...other
     } = props;
-    const size = parseResponsiveProp(sizeProp, theme2.breakpoints, (val) => val !== false);
-    const offset = parseResponsiveProp(offsetProp, theme2.breakpoints);
+    const size = parseResponsiveProp(sizeProp, theme.breakpoints, (val) => val !== false);
+    const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
     const columns = inProps.columns ?? (level ? void 0 : columnsProp);
     const spacing = inProps.spacing ?? (level ? void 0 : spacingProp);
     const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? void 0 : rowSpacingProp);
@@ -6233,7 +6233,7 @@ function createGrid(options = {}) {
       size,
       offset
     };
-    const classes = useUtilityClasses2(ownerState, theme2);
+    const classes = useUtilityClasses2(ownerState, theme);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(GridRoot, {
       ref,
       as: component,
@@ -6302,23 +6302,23 @@ const getSideFromDirection = (direction) => {
 };
 const style = ({
   ownerState,
-  theme: theme2
+  theme
 }) => {
   let styles2 = {
     display: "flex",
     flexDirection: "column",
     ...handleBreakpoints({
-      theme: theme2
+      theme
     }, resolveBreakpointValues({
       values: ownerState.direction,
-      breakpoints: theme2.breakpoints.values
+      breakpoints: theme.breakpoints.values
     }), (propValue) => ({
       flexDirection: propValue
     }))
   };
   if (ownerState.spacing) {
-    const transformer = createUnarySpacing(theme2);
-    const base = Object.keys(theme2.breakpoints.values).reduce((acc, breakpoint) => {
+    const transformer = createUnarySpacing(theme);
+    const base = Object.keys(theme.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;
       }
@@ -6359,10 +6359,10 @@ const style = ({
       };
     };
     styles2 = deepmerge(styles2, handleBreakpoints({
-      theme: theme2
+      theme
     }, spacingValues, styleFromPropValue));
   }
-  styles2 = mergeBreakpointsInOrder(theme2.breakpoints, styles2);
+  styles2 = mergeBreakpointsInOrder(theme.breakpoints, styles2);
   return styles2;
 };
 function createStack(options = {}) {
@@ -7071,10 +7071,10 @@ const parseAddition = (str) => {
   }
   return sum;
 };
-function attachColorManipulators(theme2) {
-  Object.assign(theme2, {
+function attachColorManipulators(theme) {
+  Object.assign(theme, {
     alpha(color2, coefficient) {
-      const obj = this || theme2;
+      const obj = this || theme;
       if (obj.colorSpace) {
         return `oklch(from ${color2} l c h / ${typeof coefficient === "string" ? `calc(${coefficient})` : coefficient})`;
       }
@@ -7084,14 +7084,14 @@ function attachColorManipulators(theme2) {
       return alpha(color2, parseAddition(coefficient));
     },
     lighten(color2, coefficient) {
-      const obj = this || theme2;
+      const obj = this || theme;
       if (obj.colorSpace) {
         return `color-mix(in ${obj.colorSpace}, ${color2}, #fff ${coefficientToPercentage(coefficient)})`;
       }
       return lighten(color2, coefficient);
     },
     darken(color2, coefficient) {
-      const obj = this || theme2;
+      const obj = this || theme;
       if (obj.colorSpace) {
         return `color-mix(in ${obj.colorSpace}, ${color2}, #000 ${coefficientToPercentage(coefficient)})`;
       }
@@ -7231,9 +7231,9 @@ function shouldSkipGeneratingVar(keys) {
   keys[0] === "palette" && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }
 const excludeVariablesFromRoot = (cssVarPrefix) => [...[...Array(25)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}overlays-${index}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}palette-AppBar-darkColor`];
-const defaultGetSelector = (theme2) => (colorScheme, css2) => {
-  const root = theme2.rootSelector || ":root";
-  const selector = theme2.colorSchemeSelector;
+const defaultGetSelector = (theme) => (colorScheme, css2) => {
+  const root = theme.rootSelector || ":root";
+  const selector = theme.colorSchemeSelector;
   let rule = selector;
   if (selector === "class") {
     rule = ".%s";
@@ -7244,10 +7244,10 @@ const defaultGetSelector = (theme2) => (colorScheme, css2) => {
   if (selector?.startsWith("data-") && !selector.includes("%s")) {
     rule = `[${selector}="%s"]`;
   }
-  if (theme2.defaultColorScheme === colorScheme) {
+  if (theme.defaultColorScheme === colorScheme) {
     if (colorScheme === "dark") {
       const excludedVariables = {};
-      excludeVariablesFromRoot(theme2.cssVarPrefix).forEach((cssVar) => {
+      excludeVariablesFromRoot(theme.cssVarPrefix).forEach((cssVar) => {
         excludedVariables[cssVar] = css2[cssVar];
         delete css2[cssVar];
       });
@@ -7413,7 +7413,7 @@ function createThemeWithVars(options = {}, ...args) {
   if (builtInDark && !colorSchemes.dark) {
     attachColorScheme$1(colorSpace, colorSchemes, builtInDark, void 0, "dark");
   }
-  let theme2 = {
+  let theme = {
     defaultColorScheme,
     ...muiTheme,
     cssVarPrefix,
@@ -7427,8 +7427,8 @@ function createThemeWithVars(options = {}, ...args) {
     },
     spacing: getSpacingVal(input.spacing)
   };
-  Object.keys(theme2.colorSchemes).forEach((key) => {
-    const palette = theme2.colorSchemes[key].palette;
+  Object.keys(theme.colorSchemes).forEach((key) => {
+    const palette = theme.colorSchemes[key].palette;
     const setCssVarColor = (cssVar) => {
       const tokens = cssVar.split("-");
       const color2 = tokens[1];
@@ -7619,50 +7619,50 @@ function createThemeWithVars(options = {}, ...args) {
       }
     });
   });
-  theme2 = args.reduce((acc, argument) => deepmerge(acc, argument), theme2);
+  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
   const parserConfig = {
     prefix: cssVarPrefix,
     disableCssColorScheme,
     shouldSkipGeneratingVar: shouldSkipGeneratingVar$1,
-    getSelector: defaultGetSelector(theme2),
+    getSelector: defaultGetSelector(theme),
     enableContrastVars: nativeColor
   };
   const {
     vars,
     generateThemeVars,
     generateStyleSheets
-  } = prepareCssVars(theme2, parserConfig);
-  theme2.vars = vars;
-  Object.entries(theme2.colorSchemes[theme2.defaultColorScheme]).forEach(([key, value]) => {
-    theme2[key] = value;
+  } = prepareCssVars(theme, parserConfig);
+  theme.vars = vars;
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
+    theme[key] = value;
   });
-  theme2.generateThemeVars = generateThemeVars;
-  theme2.generateStyleSheets = generateStyleSheets;
-  theme2.generateSpacing = function generateSpacing() {
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.generateSpacing = function generateSpacing() {
     return createSpacing(input.spacing, createUnarySpacing(this));
   };
-  theme2.getColorSchemeSelector = createGetColorSchemeSelector(selector);
-  theme2.spacing = theme2.generateSpacing();
-  theme2.shouldSkipGeneratingVar = shouldSkipGeneratingVar$1;
-  theme2.unstable_sxConfig = {
+  theme.getColorSchemeSelector = createGetColorSchemeSelector(selector);
+  theme.spacing = theme.generateSpacing();
+  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar$1;
+  theme.unstable_sxConfig = {
     ...defaultSxConfig,
     ...input?.unstable_sxConfig
   };
-  theme2.unstable_sx = function sx(props) {
+  theme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,
       theme: this
     });
   };
-  theme2.toRuntimeSource = stringifyTheme;
-  return theme2;
+  theme.toRuntimeSource = stringifyTheme;
+  return theme;
 }
-function attachColorScheme(theme2, scheme, colorScheme) {
-  if (!theme2.colorSchemes) {
+function attachColorScheme(theme, scheme, colorScheme) {
+  if (!theme.colorSchemes) {
     return void 0;
   }
   if (colorScheme) {
-    theme2.colorSchemes[scheme] = {
+    theme.colorSchemes[scheme] = {
       ...colorScheme !== true && colorScheme,
       palette: createPalette({
         ...colorScheme === true ? {} : colorScheme.palette,
@@ -7709,27 +7709,27 @@ function createTheme(options = {}, ...args) {
         }
       }
     }
-    const theme2 = createThemeNoVars({
+    const theme = createThemeNoVars({
       ...options,
       palette: paletteOptions
     }, ...args);
-    theme2.defaultColorScheme = defaultColorSchemeInput;
-    theme2.colorSchemes = colorSchemesInput;
-    if (theme2.palette.mode === "light") {
-      theme2.colorSchemes.light = {
+    theme.defaultColorScheme = defaultColorSchemeInput;
+    theme.colorSchemes = colorSchemesInput;
+    if (theme.palette.mode === "light") {
+      theme.colorSchemes.light = {
         ...colorSchemesInput.light !== true && colorSchemesInput.light,
-        palette: theme2.palette
+        palette: theme.palette
       };
-      attachColorScheme(theme2, "dark", colorSchemesInput.dark);
+      attachColorScheme(theme, "dark", colorSchemesInput.dark);
     }
-    if (theme2.palette.mode === "dark") {
-      theme2.colorSchemes.dark = {
+    if (theme.palette.mode === "dark") {
+      theme.colorSchemes.dark = {
         ...colorSchemesInput.dark !== true && colorSchemesInput.dark,
-        palette: theme2.palette
+        palette: theme.palette
       };
-      attachColorScheme(theme2, "light", colorSchemesInput.light);
+      attachColorScheme(theme, "light", colorSchemesInput.light);
     }
-    return theme2;
+    return theme;
   }
   if (!palette && !("light" in colorSchemesInput) && defaultColorSchemeInput === "light") {
     colorSchemesInput.light = true;
@@ -7743,11 +7743,11 @@ function createTheme(options = {}, ...args) {
 }
 const defaultTheme$1 = createTheme();
 function useTheme() {
-  const theme2 = useTheme$2(defaultTheme$1);
+  const theme = useTheme$2(defaultTheme$1);
   if (process.env.NODE_ENV !== "production") {
-    React.useDebugValue(theme2);
+    React.useDebugValue(theme);
   }
-  return theme2[THEME_ID] || theme2;
+  return theme[THEME_ID] || theme;
 }
 function slotShouldForwardProp(prop) {
   return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
@@ -7836,10 +7836,10 @@ const {
     light: defaultConfig.defaultLightColorScheme,
     dark: defaultConfig.defaultDarkColorScheme
   },
-  resolveTheme: (theme2) => {
+  resolveTheme: (theme) => {
     const newTheme = {
-      ...theme2,
-      typography: createTypography(theme2.palette, theme2.typography)
+      ...theme,
+      typography: createTypography(theme.palette, theme.typography)
     };
     newTheme.unstable_sx = function sx(props) {
       return styleFunctionSx({
@@ -7852,25 +7852,25 @@ const {
 });
 const CssVarsProvider = InternalCssVarsProvider;
 function ThemeProvider({
-  theme: theme2,
+  theme,
   ...props
 }) {
   const noVarsTheme = React.useMemo(() => {
-    if (typeof theme2 === "function") {
-      return theme2;
+    if (typeof theme === "function") {
+      return theme;
     }
-    const muiTheme = THEME_ID in theme2 ? theme2[THEME_ID] : theme2;
+    const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
     if (!("colorSchemes" in muiTheme)) {
       if (!("vars" in muiTheme)) {
         return {
-          ...theme2,
+          ...theme,
           vars: null
         };
       }
-      return theme2;
+      return theme;
     }
     return null;
-  }, [theme2]);
+  }, [theme]);
   if (noVarsTheme) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProviderNoVars, {
       theme: noVarsTheme,
@@ -7878,7 +7878,7 @@ function ThemeProvider({
     });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CssVarsProvider, {
-    theme: theme2,
+    theme,
     ...props
   });
 }
@@ -7939,8 +7939,8 @@ function globalCss(styles2) {
     return (
       // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value.
       /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalStyles, {
-        styles: typeof styles2 === "function" ? (theme2) => styles2({
-          theme: theme2,
+        styles: typeof styles2 === "function" ? (theme) => styles2({
+          theme,
           ...props
         }) : styles2
       })
@@ -8038,24 +8038,24 @@ const PaperRoot = styled("div", {
     return [styles2.root, styles2[ownerState.variant], !ownerState.square && styles2.rounded, ownerState.variant === "elevation" && styles2[`elevation${ownerState.elevation}`]];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
-  backgroundColor: (theme2.vars || theme2).palette.background.paper,
-  color: (theme2.vars || theme2).palette.text.primary,
-  transition: theme2.transitions.create("box-shadow"),
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create("box-shadow"),
   variants: [{
     props: ({
       ownerState
     }) => !ownerState.square,
     style: {
-      borderRadius: theme2.shape.borderRadius
+      borderRadius: theme.shape.borderRadius
     }
   }, {
     props: {
       variant: "outlined"
     },
     style: {
-      border: `1px solid ${(theme2.vars || theme2).palette.divider}`
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
     }
   }, {
     props: {
@@ -8072,7 +8072,7 @@ const Paper = /* @__PURE__ */ React.forwardRef(function Paper2(inProps, ref) {
     props: inProps,
     name: "MuiPaper"
   });
-  const theme2 = useTheme();
+  const theme = useTheme();
   const {
     className,
     component = "div",
@@ -8090,7 +8090,7 @@ const Paper = /* @__PURE__ */ React.forwardRef(function Paper2(inProps, ref) {
   };
   const classes = useUtilityClasses$v(ownerState);
   if (process.env.NODE_ENV !== "production") {
-    if (theme2.shadows[elevation] === void 0) {
+    if (theme.shadows[elevation] === void 0) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join("\n"));
     }
   }
@@ -8102,11 +8102,11 @@ const Paper = /* @__PURE__ */ React.forwardRef(function Paper2(inProps, ref) {
     ...other,
     style: {
       ...variant === "elevation" && {
-        "--Paper-shadow": (theme2.vars || theme2).shadows[elevation],
-        ...theme2.vars && {
-          "--Paper-overlay": theme2.vars.overlays?.[elevation]
+        "--Paper-shadow": (theme.vars || theme).shadows[elevation],
+        ...theme.vars && {
+          "--Paper-overlay": theme.vars.overlays?.[elevation]
         },
-        ...!theme2.vars && theme2.palette.mode === "dark" && {
+        ...!theme.vars && theme.palette.mode === "dark" && {
           "--Paper-overlay": `linear-gradient(${alpha("#fff", getOverlayAlpha(elevation))}, ${alpha("#fff", getOverlayAlpha(elevation))})`
         }
       },
@@ -8406,14 +8406,14 @@ const DividerRoot = styled("div", {
     return [styles2.root, ownerState.absolute && styles2.absolute, styles2[ownerState.variant], ownerState.light && styles2.light, ownerState.orientation === "vertical" && styles2.vertical, ownerState.flexItem && styles2.flexItem, ownerState.children && styles2.withChildren, ownerState.children && ownerState.orientation === "vertical" && styles2.withChildrenVertical, ownerState.textAlign === "right" && ownerState.orientation !== "vertical" && styles2.textAlignRight, ownerState.textAlign === "left" && ownerState.orientation !== "vertical" && styles2.textAlignLeft];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   margin: 0,
   // Reset browser default style.
   flexShrink: 0,
   borderWidth: 0,
   borderStyle: "solid",
-  borderColor: (theme2.vars || theme2).palette.divider,
+  borderColor: (theme.vars || theme).palette.divider,
   borderBottomWidth: "thin",
   variants: [{
     props: {
@@ -8430,7 +8430,7 @@ const DividerRoot = styled("div", {
       light: true
     },
     style: {
-      borderColor: theme2.alpha((theme2.vars || theme2).palette.divider, 0.08)
+      borderColor: theme.alpha((theme.vars || theme).palette.divider, 0.08)
     }
   }, {
     props: {
@@ -8445,8 +8445,8 @@ const DividerRoot = styled("div", {
       orientation: "horizontal"
     },
     style: {
-      marginLeft: theme2.spacing(2),
-      marginRight: theme2.spacing(2)
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(2)
     }
   }, {
     props: {
@@ -8454,8 +8454,8 @@ const DividerRoot = styled("div", {
       orientation: "vertical"
     },
     style: {
-      marginTop: theme2.spacing(1),
-      marginBottom: theme2.spacing(1)
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1)
     }
   }, {
     props: {
@@ -8496,7 +8496,7 @@ const DividerRoot = styled("div", {
     style: {
       "&::before, &::after": {
         width: "100%",
-        borderTop: `thin solid ${(theme2.vars || theme2).palette.divider}`,
+        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
         borderTopStyle: "inherit"
       }
     }
@@ -8508,7 +8508,7 @@ const DividerRoot = styled("div", {
       flexDirection: "column",
       "&::before, &::after": {
         height: "100%",
-        borderLeft: `thin solid ${(theme2.vars || theme2).palette.divider}`,
+        borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
         borderLeftStyle: "inherit"
       }
     }
@@ -8548,19 +8548,19 @@ const DividerWrapper = styled("span", {
     return [styles2.wrapper, ownerState.orientation === "vertical" && styles2.wrapperVertical];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   display: "inline-block",
-  paddingLeft: `calc(${theme2.spacing(1)} * 1.2)`,
-  paddingRight: `calc(${theme2.spacing(1)} * 1.2)`,
+  paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
+  paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
   whiteSpace: "nowrap",
   variants: [{
     props: {
       orientation: "vertical"
     },
     style: {
-      paddingTop: `calc(${theme2.spacing(1)} * 1.2)`,
-      paddingBottom: `calc(${theme2.spacing(1)} * 1.2)`
+      paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
+      paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
     }
   }]
 })));
@@ -9980,14 +9980,14 @@ const TouchRippleRipple = styled(Ripple, {
     animation-name: ${enterKeyframe};
     animation-duration: ${DURATION}ms;
     animation-timing-function: ${({
-  theme: theme2
-}) => theme2.transitions.easing.easeInOut};
+  theme
+}) => theme.transitions.easing.easeInOut};
   }
 
   &.${touchRippleClasses.ripplePulsate} {
     animation-duration: ${({
-  theme: theme2
-}) => theme2.transitions.duration.shorter}ms;
+  theme
+}) => theme.transitions.duration.shorter}ms;
   }
 
   & .${touchRippleClasses.child} {
@@ -10004,8 +10004,8 @@ const TouchRippleRipple = styled(Ripple, {
     animation-name: ${exitKeyframe};
     animation-duration: ${DURATION}ms;
     animation-timing-function: ${({
-  theme: theme2
-}) => theme2.transitions.easing.easeInOut};
+  theme
+}) => theme.transitions.easing.easeInOut};
   }
 
   & .${touchRippleClasses.childPulsate} {
@@ -10016,8 +10016,8 @@ const TouchRippleRipple = styled(Ripple, {
     animation-name: ${pulsateKeyframe};
     animation-duration: 2500ms;
     animation-timing-function: ${({
-  theme: theme2
-}) => theme2.transitions.easing.easeInOut};
+  theme
+}) => theme.transitions.easing.easeInOut};
     animation-iteration-count: infinite;
     animation-delay: 200ms;
   }
@@ -10655,7 +10655,7 @@ const ListItemButtonRoot = styled(ButtonBase, {
   slot: "Root",
   overridesResolver: overridesResolver$1
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   display: "flex",
   flexGrow: 1,
@@ -10668,42 +10668,42 @@ const ListItemButtonRoot = styled(ButtonBase, {
   textAlign: "left",
   paddingTop: 8,
   paddingBottom: 8,
-  transition: theme2.transitions.create("background-color", {
-    duration: theme2.transitions.duration.shortest
+  transition: theme.transitions.create("background-color", {
+    duration: theme.transitions.duration.shortest
   }),
   "&:hover": {
     textDecoration: "none",
-    backgroundColor: (theme2.vars || theme2).palette.action.hover,
+    backgroundColor: (theme.vars || theme).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
       backgroundColor: "transparent"
     }
   },
   [`&.${listItemButtonClasses.selected}`]: {
-    backgroundColor: theme2.alpha((theme2.vars || theme2).palette.primary.main, (theme2.vars || theme2).palette.action.selectedOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
     [`&.${listItemButtonClasses.focusVisible}`]: {
-      backgroundColor: theme2.alpha((theme2.vars || theme2).palette.primary.main, `${(theme2.vars || theme2).palette.action.selectedOpacity} + ${(theme2.vars || theme2).palette.action.focusOpacity}`)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
     }
   },
   [`&.${listItemButtonClasses.selected}:hover`]: {
-    backgroundColor: theme2.alpha((theme2.vars || theme2).palette.primary.main, `${(theme2.vars || theme2).palette.action.selectedOpacity} + ${(theme2.vars || theme2).palette.action.hoverOpacity}`),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
-      backgroundColor: theme2.alpha((theme2.vars || theme2).palette.primary.main, (theme2.vars || theme2).palette.action.selectedOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
     }
   },
   [`&.${listItemButtonClasses.focusVisible}`]: {
-    backgroundColor: (theme2.vars || theme2).palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${listItemButtonClasses.disabled}`]: {
-    opacity: (theme2.vars || theme2).palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
   variants: [{
     props: ({
       ownerState
     }) => ownerState.divider,
     style: {
-      borderBottom: `1px solid ${(theme2.vars || theme2).palette.divider}`,
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
       backgroundClip: "padding-box"
     }
   }, {
@@ -10892,10 +10892,10 @@ const ListItemIconRoot = styled("div", {
     return [styles2.root, ownerState.alignItems === "flex-start" && styles2.alignItemsFlexStart];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   minWidth: 56,
-  color: (theme2.vars || theme2).palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   flexShrink: 0,
   display: "inline-flex",
   variants: [{
@@ -11009,7 +11009,7 @@ const TypographyRoot = styled("span", {
     return [styles2.root, ownerState.variant && styles2[ownerState.variant], ownerState.align !== "inherit" && styles2[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles2.noWrap, ownerState.gutterBottom && styles2.gutterBottom, ownerState.paragraph && styles2.paragraph];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   margin: 0,
   variants: [{
@@ -11022,24 +11022,24 @@ const TypographyRoot = styled("span", {
       lineHeight: "inherit",
       letterSpacing: "inherit"
     }
-  }, ...Object.entries(theme2.typography).filter(([variant, value]) => variant !== "inherit" && value && typeof value === "object").map(([variant, value]) => ({
+  }, ...Object.entries(theme.typography).filter(([variant, value]) => variant !== "inherit" && value && typeof value === "object").map(([variant, value]) => ({
     props: {
       variant
     },
     style: value
-  })), ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
     props: {
       color: color2
     },
     style: {
-      color: (theme2.vars || theme2).palette[color2].main
+      color: (theme.vars || theme).palette[color2].main
     }
-  })), ...Object.entries(theme2.palette?.text || {}).filter(([, value]) => typeof value === "string").map(([color2]) => ({
+  })), ...Object.entries(theme.palette?.text || {}).filter(([, value]) => typeof value === "string").map(([color2]) => ({
     props: {
       color: `text${capitalize(color2)}`
     },
     style: {
-      color: (theme2.vars || theme2).palette.text[color2]
+      color: (theme.vars || theme).palette.text[color2]
     }
   })), {
     props: ({
@@ -11694,15 +11694,15 @@ const SvgIconRoot = styled("svg", {
     return [styles2.root, ownerState.color !== "inherit" && styles2[`color${capitalize(ownerState.color)}`], styles2[`fontSize${capitalize(ownerState.fontSize)}`]];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   userSelect: "none",
   width: "1em",
   height: "1em",
   display: "inline-block",
   flexShrink: 0,
-  transition: theme2.transitions?.create?.("fill", {
-    duration: (theme2.vars ?? theme2).transitions?.duration?.shorter
+  transition: theme.transitions?.create?.("fill", {
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
   variants: [
     {
@@ -11726,7 +11726,7 @@ const SvgIconRoot = styled("svg", {
         fontSize: "small"
       },
       style: {
-        fontSize: theme2.typography?.pxToRem?.(20) || "1.25rem"
+        fontSize: theme.typography?.pxToRem?.(20) || "1.25rem"
       }
     },
     {
@@ -11734,7 +11734,7 @@ const SvgIconRoot = styled("svg", {
         fontSize: "medium"
       },
       style: {
-        fontSize: theme2.typography?.pxToRem?.(24) || "1.5rem"
+        fontSize: theme.typography?.pxToRem?.(24) || "1.5rem"
       }
     },
     {
@@ -11742,16 +11742,16 @@ const SvgIconRoot = styled("svg", {
         fontSize: "large"
       },
       style: {
-        fontSize: theme2.typography?.pxToRem?.(35) || "2.1875rem"
+        fontSize: theme.typography?.pxToRem?.(35) || "2.1875rem"
       }
     },
     // TODO v5 deprecate color prop, v6 remove for sx
-    ...Object.entries((theme2.vars ?? theme2).palette).filter(([, value]) => value && value.main).map(([color2]) => ({
+    ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value && value.main).map(([color2]) => ({
       props: {
         color: color2
       },
       style: {
-        color: (theme2.vars ?? theme2).palette?.[color2]?.main
+        color: (theme.vars ?? theme).palette?.[color2]?.main
       }
     })),
     {
@@ -11759,7 +11759,7 @@ const SvgIconRoot = styled("svg", {
         color: "action"
       },
       style: {
-        color: (theme2.vars ?? theme2).palette?.action?.active
+        color: (theme.vars ?? theme).palette?.action?.active
       }
     },
     {
@@ -11767,7 +11767,7 @@ const SvgIconRoot = styled("svg", {
         color: "disabled"
       },
       style: {
-        color: (theme2.vars ?? theme2).palette?.action?.disabled
+        color: (theme.vars ?? theme).palette?.action?.disabled
       }
     },
     {
@@ -12109,7 +12109,7 @@ const CircularProgressRoot = styled("span", {
     return [styles2.root, styles2[ownerState.variant], styles2[`color${capitalize(ownerState.color)}`]];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   display: "inline-block",
   variants: [{
@@ -12117,7 +12117,7 @@ const CircularProgressRoot = styled("span", {
       variant: "determinate"
     },
     style: {
-      transition: theme2.transitions.create("transform")
+      transition: theme.transitions.create("transform")
     }
   }, {
     props: {
@@ -12126,12 +12126,12 @@ const CircularProgressRoot = styled("span", {
     style: rotateAnimation || {
       animation: `${circularRotateKeyframe} 1.4s linear infinite`
     }
-  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
     props: {
       color: color2
     },
     style: {
-      color: (theme2.vars || theme2).palette[color2].main
+      color: (theme.vars || theme).palette[color2].main
     }
   }))]
 })));
@@ -12152,7 +12152,7 @@ const CircularProgressCircle = styled("circle", {
     return [styles2.circle, styles2[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles2.circleDisableShrink];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   stroke: "currentColor",
   variants: [{
@@ -12160,7 +12160,7 @@ const CircularProgressCircle = styled("circle", {
       variant: "determinate"
     },
     style: {
-      transition: theme2.transitions.create("stroke-dashoffset")
+      transition: theme.transitions.create("stroke-dashoffset")
     }
   }, {
     props: {
@@ -12342,21 +12342,21 @@ const IconButtonRoot = styled(ButtonBase, {
     return [styles2.root, ownerState.loading && styles2.loading, ownerState.color !== "default" && styles2[`color${capitalize(ownerState.color)}`], ownerState.edge && styles2[`edge${capitalize(ownerState.edge)}`], styles2[`size${capitalize(ownerState.size)}`]];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   textAlign: "center",
   flex: "0 0 auto",
-  fontSize: theme2.typography.pxToRem(24),
+  fontSize: theme.typography.pxToRem(24),
   padding: 8,
   borderRadius: "50%",
-  color: (theme2.vars || theme2).palette.action.active,
-  transition: theme2.transitions.create("background-color", {
-    duration: theme2.transitions.duration.shortest
+  color: (theme.vars || theme).palette.action.active,
+  transition: theme.transitions.create("background-color", {
+    duration: theme.transitions.duration.shortest
   }),
   variants: [{
     props: (props) => !props.disableRipple,
     style: {
-      "--IconButton-hoverBg": theme2.alpha((theme2.vars || theme2).palette.action.active, (theme2.vars || theme2).palette.action.hoverOpacity),
+      "--IconButton-hoverBg": theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity),
       "&:hover": {
         backgroundColor: "var(--IconButton-hoverBg)",
         // Reset on touch devices, it doesn't add specificity
@@ -12397,7 +12397,7 @@ const IconButtonRoot = styled(ButtonBase, {
     }
   }]
 })), memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   variants: [{
     props: {
@@ -12406,19 +12406,19 @@ const IconButtonRoot = styled(ButtonBase, {
     style: {
       color: "inherit"
     }
-  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
     props: {
       color: color2
     },
     style: {
-      color: (theme2.vars || theme2).palette[color2].main
+      color: (theme.vars || theme).palette[color2].main
     }
-  })), ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
     props: {
       color: color2
     },
     style: {
-      "--IconButton-hoverBg": theme2.alpha((theme2.vars || theme2).palette[color2].main, (theme2.vars || theme2).palette.action.hoverOpacity)
+      "--IconButton-hoverBg": theme.alpha((theme.vars || theme).palette[color2].main, (theme.vars || theme).palette.action.hoverOpacity)
     }
   })), {
     props: {
@@ -12426,7 +12426,7 @@ const IconButtonRoot = styled(ButtonBase, {
     },
     style: {
       padding: 5,
-      fontSize: theme2.typography.pxToRem(18)
+      fontSize: theme.typography.pxToRem(18)
     }
   }, {
     props: {
@@ -12434,12 +12434,12 @@ const IconButtonRoot = styled(ButtonBase, {
     },
     style: {
       padding: 12,
-      fontSize: theme2.typography.pxToRem(28)
+      fontSize: theme.typography.pxToRem(28)
     }
   }],
   [`&.${iconButtonClasses.disabled}`]: {
     backgroundColor: "transparent",
-    color: (theme2.vars || theme2).palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   },
   [`&.${iconButtonClasses.loading}`]: {
     color: "transparent"
@@ -12449,7 +12449,7 @@ const IconButtonLoadingIndicator = styled("span", {
   name: "MuiIconButton",
   slot: "LoadingIndicator"
 })(({
-  theme: theme2
+  theme
 }) => ({
   display: "none",
   position: "absolute",
@@ -12457,7 +12457,7 @@ const IconButtonLoadingIndicator = styled("span", {
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
-  color: (theme2.vars || theme2).palette.action.disabled,
+  color: (theme.vars || theme).palette.action.disabled,
   variants: [{
     props: {
       loading: true
@@ -12649,56 +12649,56 @@ const AlertRoot = styled(Paper, {
     return [styles2.root, styles2[ownerState.variant], styles2[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`]];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => {
-  const getColor = theme2.palette.mode === "light" ? theme2.darken : theme2.lighten;
-  const getBackgroundColor = theme2.palette.mode === "light" ? theme2.lighten : theme2.darken;
+  const getColor = theme.palette.mode === "light" ? theme.darken : theme.lighten;
+  const getBackgroundColor = theme.palette.mode === "light" ? theme.lighten : theme.darken;
   return {
-    ...theme2.typography.body2,
+    ...theme.typography.body2,
     backgroundColor: "transparent",
     display: "flex",
     padding: "6px 16px",
-    variants: [...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter(["light"])).map(([color2]) => ({
+    variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["light"])).map(([color2]) => ({
       props: {
         colorSeverity: color2,
         variant: "standard"
       },
       style: {
-        color: theme2.vars ? theme2.vars.palette.Alert[`${color2}Color`] : getColor(theme2.palette[color2].light, 0.6),
-        backgroundColor: theme2.vars ? theme2.vars.palette.Alert[`${color2}StandardBg`] : getBackgroundColor(theme2.palette[color2].light, 0.9),
-        [`& .${alertClasses.icon}`]: theme2.vars ? {
-          color: theme2.vars.palette.Alert[`${color2}IconColor`]
+        color: theme.vars ? theme.vars.palette.Alert[`${color2}Color`] : getColor(theme.palette[color2].light, 0.6),
+        backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color2}StandardBg`] : getBackgroundColor(theme.palette[color2].light, 0.9),
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color2}IconColor`]
         } : {
-          color: theme2.palette[color2].main
+          color: theme.palette[color2].main
         }
       }
-    })), ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter(["light"])).map(([color2]) => ({
+    })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["light"])).map(([color2]) => ({
       props: {
         colorSeverity: color2,
         variant: "outlined"
       },
       style: {
-        color: theme2.vars ? theme2.vars.palette.Alert[`${color2}Color`] : getColor(theme2.palette[color2].light, 0.6),
-        border: `1px solid ${(theme2.vars || theme2).palette[color2].light}`,
-        [`& .${alertClasses.icon}`]: theme2.vars ? {
-          color: theme2.vars.palette.Alert[`${color2}IconColor`]
+        color: theme.vars ? theme.vars.palette.Alert[`${color2}Color`] : getColor(theme.palette[color2].light, 0.6),
+        border: `1px solid ${(theme.vars || theme).palette[color2].light}`,
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color2}IconColor`]
         } : {
-          color: theme2.palette[color2].main
+          color: theme.palette[color2].main
         }
       }
-    })), ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter(["dark"])).map(([color2]) => ({
+    })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["dark"])).map(([color2]) => ({
       props: {
         colorSeverity: color2,
         variant: "filled"
       },
       style: {
-        fontWeight: theme2.typography.fontWeightMedium,
-        ...theme2.vars ? {
-          color: theme2.vars.palette.Alert[`${color2}FilledColor`],
-          backgroundColor: theme2.vars.palette.Alert[`${color2}FilledBg`]
+        fontWeight: theme.typography.fontWeightMedium,
+        ...theme.vars ? {
+          color: theme.vars.palette.Alert[`${color2}FilledColor`],
+          backgroundColor: theme.vars.palette.Alert[`${color2}FilledBg`]
         } : {
-          backgroundColor: theme2.palette.mode === "dark" ? theme2.palette[color2].dark : theme2.palette[color2].main,
-          color: theme2.palette.getContrastText(theme2.palette[color2].main)
+          backgroundColor: theme.palette.mode === "dark" ? theme.palette[color2].dark : theme.palette[color2].main,
+          color: theme.palette.getContrastText(theme.palette[color2].main)
         }
       }
     }))]
@@ -13066,24 +13066,24 @@ const ButtonRoot = styled(ButtonBase, {
     return [styles2.root, styles2[ownerState.variant], styles2[`${ownerState.variant}${capitalize(ownerState.color)}`], styles2[`size${capitalize(ownerState.size)}`], styles2[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === "inherit" && styles2.colorInherit, ownerState.disableElevation && styles2.disableElevation, ownerState.fullWidth && styles2.fullWidth, ownerState.loading && styles2.loading];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => {
-  const inheritContainedBackgroundColor = theme2.palette.mode === "light" ? theme2.palette.grey[300] : theme2.palette.grey[800];
-  const inheritContainedHoverBackgroundColor = theme2.palette.mode === "light" ? theme2.palette.grey.A100 : theme2.palette.grey[700];
+  const inheritContainedBackgroundColor = theme.palette.mode === "light" ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === "light" ? theme.palette.grey.A100 : theme.palette.grey[700];
   return {
-    ...theme2.typography.button,
+    ...theme.typography.button,
     minWidth: 64,
     padding: "6px 16px",
     border: 0,
-    borderRadius: (theme2.vars || theme2).shape.borderRadius,
-    transition: theme2.transitions.create(["background-color", "box-shadow", "border-color", "color"], {
-      duration: theme2.transitions.duration.short
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create(["background-color", "box-shadow", "border-color", "color"], {
+      duration: theme.transitions.duration.short
     }),
     "&:hover": {
       textDecoration: "none"
     },
     [`&.${buttonClasses.disabled}`]: {
-      color: (theme2.vars || theme2).palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     },
     variants: [{
       props: {
@@ -13092,24 +13092,24 @@ const ButtonRoot = styled(ButtonBase, {
       style: {
         color: `var(--variant-containedColor)`,
         backgroundColor: `var(--variant-containedBg)`,
-        boxShadow: (theme2.vars || theme2).shadows[2],
+        boxShadow: (theme.vars || theme).shadows[2],
         "&:hover": {
-          boxShadow: (theme2.vars || theme2).shadows[4],
+          boxShadow: (theme.vars || theme).shadows[4],
           // Reset on touch devices, it doesn't add specificity
           "@media (hover: none)": {
-            boxShadow: (theme2.vars || theme2).shadows[2]
+            boxShadow: (theme.vars || theme).shadows[2]
           }
         },
         "&:active": {
-          boxShadow: (theme2.vars || theme2).shadows[8]
+          boxShadow: (theme.vars || theme).shadows[8]
         },
         [`&.${buttonClasses.focusVisible}`]: {
-          boxShadow: (theme2.vars || theme2).shadows[6]
+          boxShadow: (theme.vars || theme).shadows[6]
         },
         [`&.${buttonClasses.disabled}`]: {
-          color: (theme2.vars || theme2).palette.action.disabled,
-          boxShadow: (theme2.vars || theme2).shadows[0],
-          backgroundColor: (theme2.vars || theme2).palette.action.disabledBackground
+          color: (theme.vars || theme).palette.action.disabled,
+          boxShadow: (theme.vars || theme).shadows[0],
+          backgroundColor: (theme.vars || theme).palette.action.disabledBackground
         }
       }
     }, {
@@ -13123,7 +13123,7 @@ const ButtonRoot = styled(ButtonBase, {
         backgroundColor: `var(--variant-outlinedBg)`,
         color: `var(--variant-outlinedColor)`,
         [`&.${buttonClasses.disabled}`]: {
-          border: `1px solid ${(theme2.vars || theme2).palette.action.disabledBackground}`
+          border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
         }
       }
     }, {
@@ -13135,22 +13135,22 @@ const ButtonRoot = styled(ButtonBase, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
       props: {
         color: color2
       },
       style: {
-        "--variant-textColor": (theme2.vars || theme2).palette[color2].main,
-        "--variant-outlinedColor": (theme2.vars || theme2).palette[color2].main,
-        "--variant-outlinedBorder": theme2.alpha((theme2.vars || theme2).palette[color2].main, 0.5),
-        "--variant-containedColor": (theme2.vars || theme2).palette[color2].contrastText,
-        "--variant-containedBg": (theme2.vars || theme2).palette[color2].main,
+        "--variant-textColor": (theme.vars || theme).palette[color2].main,
+        "--variant-outlinedColor": (theme.vars || theme).palette[color2].main,
+        "--variant-outlinedBorder": theme.alpha((theme.vars || theme).palette[color2].main, 0.5),
+        "--variant-containedColor": (theme.vars || theme).palette[color2].contrastText,
+        "--variant-containedBg": (theme.vars || theme).palette[color2].main,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": (theme2.vars || theme2).palette[color2].dark,
-            "--variant-textBg": theme2.alpha((theme2.vars || theme2).palette[color2].main, (theme2.vars || theme2).palette.action.hoverOpacity),
-            "--variant-outlinedBorder": (theme2.vars || theme2).palette[color2].main,
-            "--variant-outlinedBg": theme2.alpha((theme2.vars || theme2).palette[color2].main, (theme2.vars || theme2).palette.action.hoverOpacity)
+            "--variant-containedBg": (theme.vars || theme).palette[color2].dark,
+            "--variant-textBg": theme.alpha((theme.vars || theme).palette[color2].main, (theme.vars || theme).palette.action.hoverOpacity),
+            "--variant-outlinedBorder": (theme.vars || theme).palette[color2].main,
+            "--variant-outlinedBg": theme.alpha((theme.vars || theme).palette[color2].main, (theme.vars || theme).palette.action.hoverOpacity)
           }
         }
       }
@@ -13161,12 +13161,12 @@ const ButtonRoot = styled(ButtonBase, {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": theme2.vars ? theme2.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+        "--variant-containedBg": theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": theme2.vars ? theme2.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-            "--variant-textBg": theme2.alpha((theme2.vars || theme2).palette.text.primary, (theme2.vars || theme2).palette.action.hoverOpacity),
-            "--variant-outlinedBg": theme2.alpha((theme2.vars || theme2).palette.text.primary, (theme2.vars || theme2).palette.action.hoverOpacity)
+            "--variant-containedBg": theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+            "--variant-textBg": theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity),
+            "--variant-outlinedBg": theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity)
           }
         }
       }
@@ -13177,7 +13177,7 @@ const ButtonRoot = styled(ButtonBase, {
       },
       style: {
         padding: "4px 5px",
-        fontSize: theme2.typography.pxToRem(13)
+        fontSize: theme.typography.pxToRem(13)
       }
     }, {
       props: {
@@ -13186,7 +13186,7 @@ const ButtonRoot = styled(ButtonBase, {
       },
       style: {
         padding: "8px 11px",
-        fontSize: theme2.typography.pxToRem(15)
+        fontSize: theme.typography.pxToRem(15)
       }
     }, {
       props: {
@@ -13195,7 +13195,7 @@ const ButtonRoot = styled(ButtonBase, {
       },
       style: {
         padding: "3px 9px",
-        fontSize: theme2.typography.pxToRem(13)
+        fontSize: theme.typography.pxToRem(13)
       }
     }, {
       props: {
@@ -13204,7 +13204,7 @@ const ButtonRoot = styled(ButtonBase, {
       },
       style: {
         padding: "7px 21px",
-        fontSize: theme2.typography.pxToRem(15)
+        fontSize: theme.typography.pxToRem(15)
       }
     }, {
       props: {
@@ -13213,7 +13213,7 @@ const ButtonRoot = styled(ButtonBase, {
       },
       style: {
         padding: "4px 10px",
-        fontSize: theme2.typography.pxToRem(13)
+        fontSize: theme.typography.pxToRem(13)
       }
     }, {
       props: {
@@ -13222,7 +13222,7 @@ const ButtonRoot = styled(ButtonBase, {
       },
       style: {
         padding: "8px 22px",
-        fontSize: theme2.typography.pxToRem(15)
+        fontSize: theme.typography.pxToRem(15)
       }
     }, {
       props: {
@@ -13255,8 +13255,8 @@ const ButtonRoot = styled(ButtonBase, {
         loadingPosition: "center"
       },
       style: {
-        transition: theme2.transitions.create(["background-color", "box-shadow", "border-color"], {
-          duration: theme2.transitions.duration.short
+        transition: theme.transitions.create(["background-color", "box-shadow", "border-color"], {
+          duration: theme.transitions.duration.short
         }),
         [`&.${buttonClasses.loading}`]: {
           color: "transparent"
@@ -13275,7 +13275,7 @@ const ButtonStartIcon = styled("span", {
     return [styles2.startIcon, ownerState.loading && styles2.startIconLoadingStart, styles2[`iconSize${capitalize(ownerState.size)}`]];
   }
 })(({
-  theme: theme2
+  theme
 }) => ({
   display: "inherit",
   marginRight: 8,
@@ -13293,8 +13293,8 @@ const ButtonStartIcon = styled("span", {
       loading: true
     },
     style: {
-      transition: theme2.transitions.create(["opacity"], {
-        duration: theme2.transitions.duration.short
+      transition: theme.transitions.create(["opacity"], {
+        duration: theme.transitions.duration.short
       }),
       opacity: 0
     }
@@ -13319,7 +13319,7 @@ const ButtonEndIcon = styled("span", {
     return [styles2.endIcon, ownerState.loading && styles2.endIconLoadingEnd, styles2[`iconSize${capitalize(ownerState.size)}`]];
   }
 })(({
-  theme: theme2
+  theme
 }) => ({
   display: "inherit",
   marginRight: -4,
@@ -13337,8 +13337,8 @@ const ButtonEndIcon = styled("span", {
       loading: true
     },
     style: {
-      transition: theme2.transitions.create(["opacity"], {
-        duration: theme2.transitions.duration.short
+      transition: theme.transitions.create(["opacity"], {
+        duration: theme.transitions.duration.short
       }),
       opacity: 0
     }
@@ -13357,7 +13357,7 @@ const ButtonLoadingIndicator = styled("span", {
   name: "MuiButton",
   slot: "LoadingIndicator"
 })(({
-  theme: theme2
+  theme
 }) => ({
   display: "none",
   position: "absolute",
@@ -13399,7 +13399,7 @@ const ButtonLoadingIndicator = styled("span", {
     style: {
       left: "50%",
       transform: "translate(-50%)",
-      color: (theme2.vars || theme2).palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   }, {
     props: {
@@ -13992,20 +13992,20 @@ const FormHelperTextRoot = styled("p", {
     return [styles2.root, ownerState.size && styles2[`size${capitalize(ownerState.size)}`], ownerState.contained && styles2.contained, ownerState.filled && styles2.filled];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
-  color: (theme2.vars || theme2).palette.text.secondary,
-  ...theme2.typography.caption,
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: "left",
   marginTop: 3,
   marginRight: 0,
   marginBottom: 0,
   marginLeft: 0,
   [`&.${formHelperTextClasses.disabled}`]: {
-    color: (theme2.vars || theme2).palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   },
   [`&.${formHelperTextClasses.error}`]: {
-    color: (theme2.vars || theme2).palette.error.main
+    color: (theme.vars || theme).palette.error.main
   },
   variants: [{
     props: {
@@ -14166,30 +14166,30 @@ const FormLabelRoot = styled("label", {
     return [styles2.root, ownerState.color === "secondary" && styles2.colorSecondary, ownerState.filled && styles2.filled];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
-  color: (theme2.vars || theme2).palette.text.secondary,
-  ...theme2.typography.body1,
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.body1,
   lineHeight: "1.4375em",
   padding: 0,
   position: "relative",
-  variants: [...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
     props: {
       color: color2
     },
     style: {
       [`&.${formLabelClasses.focused}`]: {
-        color: (theme2.vars || theme2).palette[color2].main
+        color: (theme.vars || theme).palette[color2].main
       }
     }
   })), {
     props: {},
     style: {
       [`&.${formLabelClasses.disabled}`]: {
-        color: (theme2.vars || theme2).palette.text.disabled
+        color: (theme.vars || theme).palette.text.disabled
       },
       [`&.${formLabelClasses.error}`]: {
-        color: (theme2.vars || theme2).palette.error.main
+        color: (theme.vars || theme).palette.error.main
       }
     }
   }]
@@ -14198,10 +14198,10 @@ const AsteriskComponent = styled("span", {
   name: "MuiFormLabel",
   slot: "Asterisk"
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   [`&.${formLabelClasses.error}`]: {
-    color: (theme2.vars || theme2).palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 })));
 const FormLabel = /* @__PURE__ */ React.forwardRef(function FormLabel2(inProps, ref) {
@@ -14343,7 +14343,7 @@ const InputLabelRoot = styled(FormLabel, {
     }, styles2.root, ownerState.formControl && styles2.formControl, ownerState.size === "small" && styles2.sizeSmall, ownerState.shrink && styles2.shrink, !ownerState.disableAnimation && styles2.animated, ownerState.focused && styles2.focused, styles2[ownerState.variant]];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   display: "block",
   transformOrigin: "top left",
@@ -14384,9 +14384,9 @@ const InputLabelRoot = styled(FormLabel, {
       ownerState
     }) => !ownerState.disableAnimation,
     style: {
-      transition: theme2.transitions.create(["color", "transform", "max-width"], {
-        duration: theme2.transitions.duration.shorter,
-        easing: theme2.transitions.easing.easeOut
+      transition: theme.transitions.create(["color", "transform", "max-width"], {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.easeOut
       })
     }
   }, {
@@ -14609,9 +14609,9 @@ const MenuItemRoot = styled(ButtonBase, {
   slot: "Root",
   overridesResolver
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
-  ...theme2.typography.body1,
+  ...theme.typography.body1,
   display: "flex",
   justifyContent: "flex-start",
   alignItems: "center",
@@ -14624,34 +14624,34 @@ const MenuItemRoot = styled(ButtonBase, {
   whiteSpace: "nowrap",
   "&:hover": {
     textDecoration: "none",
-    backgroundColor: (theme2.vars || theme2).palette.action.hover,
+    backgroundColor: (theme.vars || theme).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
       backgroundColor: "transparent"
     }
   },
   [`&.${menuItemClasses.selected}`]: {
-    backgroundColor: theme2.alpha((theme2.vars || theme2).palette.primary.main, (theme2.vars || theme2).palette.action.selectedOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
     [`&.${menuItemClasses.focusVisible}`]: {
-      backgroundColor: theme2.alpha((theme2.vars || theme2).palette.primary.main, `${(theme2.vars || theme2).palette.action.selectedOpacity} + ${(theme2.vars || theme2).palette.action.focusOpacity}`)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
     }
   },
   [`&.${menuItemClasses.selected}:hover`]: {
-    backgroundColor: theme2.alpha((theme2.vars || theme2).palette.primary.main, `${(theme2.vars || theme2).palette.action.selectedOpacity} + ${(theme2.vars || theme2).palette.action.hoverOpacity}`),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
-      backgroundColor: theme2.alpha((theme2.vars || theme2).palette.primary.main, (theme2.vars || theme2).palette.action.selectedOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
     }
   },
   [`&.${menuItemClasses.focusVisible}`]: {
-    backgroundColor: (theme2.vars || theme2).palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${menuItemClasses.disabled}`]: {
-    opacity: (theme2.vars || theme2).palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
   [`& + .${dividerClasses.root}`]: {
-    marginTop: theme2.spacing(1),
-    marginBottom: theme2.spacing(1)
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
   },
   [`& + .${dividerClasses.inset}`]: {
     marginLeft: 52
@@ -14679,7 +14679,7 @@ const MenuItemRoot = styled(ButtonBase, {
       ownerState
     }) => ownerState.divider,
     style: {
-      borderBottom: `1px solid ${(theme2.vars || theme2).palette.divider}`,
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
       backgroundClip: "padding-box"
     }
   }, {
@@ -14687,7 +14687,7 @@ const MenuItemRoot = styled(ButtonBase, {
       ownerState
     }) => !ownerState.dense,
     style: {
-      [theme2.breakpoints.up("sm")]: {
+      [theme.breakpoints.up("sm")]: {
         minHeight: "auto"
       }
     }
@@ -14700,7 +14700,7 @@ const MenuItemRoot = styled(ButtonBase, {
       // https://m2.material.io/components/menus#specs > Dense
       paddingTop: 4,
       paddingBottom: 4,
-      ...theme2.typography.body2,
+      ...theme.typography.body2,
       [`& .${listItemIconClasses.root} svg`]: {
         fontSize: "1.25rem"
       }
@@ -15427,7 +15427,7 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
   } = props;
   const timer = useTimeout();
   const autoTimeout = React.useRef();
-  const theme2 = useTheme();
+  const theme = useTheme();
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => {
@@ -15456,15 +15456,15 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
     });
     let duration2;
     if (timeout2 === "auto") {
-      duration2 = theme2.transitions.getAutoHeightDuration(node.clientHeight);
+      duration2 = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration2;
     } else {
       duration2 = transitionDuration;
     }
-    node.style.transition = [theme2.transitions.create("opacity", {
+    node.style.transition = [theme.transitions.create("opacity", {
       duration: duration2,
       delay
-    }), theme2.transitions.create("transform", {
+    }), theme.transitions.create("transform", {
       duration: isWebKit154 ? duration2 : duration2 * 0.666,
       delay,
       easing: transitionTimingFunction
@@ -15489,15 +15489,15 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
     });
     let duration2;
     if (timeout2 === "auto") {
-      duration2 = theme2.transitions.getAutoHeightDuration(node.clientHeight);
+      duration2 = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration2;
     } else {
       duration2 = transitionDuration;
     }
-    node.style.transition = [theme2.transitions.create("opacity", {
+    node.style.transition = [theme.transitions.create("opacity", {
       duration: duration2,
       delay
-    }), theme2.transitions.create("transform", {
+    }), theme.transitions.create("transform", {
       duration: isWebKit154 ? duration2 : duration2 * 0.666,
       delay: isWebKit154 ? delay : delay || duration2 * 0.333,
       easing: transitionTimingFunction
@@ -16148,10 +16148,10 @@ const styles$1 = {
   }
 };
 const Fade = /* @__PURE__ */ React.forwardRef(function Fade2(props, ref) {
-  const theme2 = useTheme();
+  const theme = useTheme();
   const defaultTimeout = {
-    enter: theme2.transitions.duration.enteringScreen,
-    exit: theme2.transitions.duration.leavingScreen
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
   };
   const {
     addEndListener,
@@ -16193,8 +16193,8 @@ const Fade = /* @__PURE__ */ React.forwardRef(function Fade2(props, ref) {
     }, {
       mode: "enter"
     });
-    node.style.webkitTransition = theme2.transitions.create("opacity", transitionProps);
-    node.style.transition = theme2.transitions.create("opacity", transitionProps);
+    node.style.webkitTransition = theme.transitions.create("opacity", transitionProps);
+    node.style.transition = theme.transitions.create("opacity", transitionProps);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -16209,8 +16209,8 @@ const Fade = /* @__PURE__ */ React.forwardRef(function Fade2(props, ref) {
     }, {
       mode: "exit"
     });
-    node.style.webkitTransition = theme2.transitions.create("opacity", transitionProps);
-    node.style.transition = theme2.transitions.create("opacity", transitionProps);
+    node.style.webkitTransition = theme.transitions.create("opacity", transitionProps);
+    node.style.transition = theme.transitions.create("opacity", transitionProps);
     if (onExit) {
       onExit(node);
     }
@@ -16714,10 +16714,10 @@ const ModalRoot = styled("div", {
     return [styles2.root, !ownerState.open && ownerState.exited && styles2.hidden];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   position: "fixed",
-  zIndex: (theme2.vars || theme2).zIndex.modal,
+  zIndex: (theme.vars || theme).zIndex.modal,
   right: 0,
   bottom: 0,
   top: 0,
@@ -16768,7 +16768,7 @@ const Modal = /* @__PURE__ */ React.forwardRef(function Modal2(inProps, ref) {
     slotProps = {},
     slots = {},
     // eslint-disable-next-line react/prop-types
-    theme: theme2,
+    theme,
     ...other
   } = props;
   const propsWithDefaults = {
@@ -17918,7 +17918,7 @@ const useUtilityClasses$7 = (ownerState) => {
 const StyledSelectSelect = styled("select", {
   name: "MuiNativeSelect"
 })(({
-  theme: theme2
+  theme
 }) => ({
   // Reset
   MozAppearance: "none",
@@ -17941,7 +17941,7 @@ const StyledSelectSelect = styled("select", {
     height: "auto"
   },
   "&:not([multiple]) option, &:not([multiple]) optgroup": {
-    backgroundColor: (theme2.vars || theme2).palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   },
   variants: [{
     props: ({
@@ -17969,9 +17969,9 @@ const StyledSelectSelect = styled("select", {
       variant: "outlined"
     },
     style: {
-      borderRadius: (theme2.vars || theme2).shape.borderRadius,
+      borderRadius: (theme.vars || theme).shape.borderRadius,
       "&:focus": {
-        borderRadius: (theme2.vars || theme2).shape.borderRadius
+        borderRadius: (theme.vars || theme).shape.borderRadius
         // Reset the reset for Chrome style
       },
       "&&&": {
@@ -17996,7 +17996,7 @@ const NativeSelectSelect = styled(StyledSelectSelect, {
 const StyledSelectIcon = styled("svg", {
   name: "MuiNativeSelect"
 })(({
-  theme: theme2
+  theme
 }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events
   // to the input and to support wrapping tags..
@@ -18006,9 +18006,9 @@ const StyledSelectIcon = styled("svg", {
   top: "calc(50% - .5em)",
   // Don't block pointer events on the select under the icon.
   pointerEvents: "none",
-  color: (theme2.vars || theme2).palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   [`&.${nativeSelectClasses.disabled}`]: {
-    color: (theme2.vars || theme2).palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   },
   variants: [{
     props: ({
@@ -19024,10 +19024,10 @@ const InputBaseRoot = styled("div", {
   slot: "Root",
   overridesResolver: rootOverridesResolver
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
-  ...theme2.typography.body1,
-  color: (theme2.vars || theme2).palette.text.primary,
+  ...theme.typography.body1,
+  color: (theme.vars || theme).palette.text.primary,
   lineHeight: "1.4375em",
   // 23px
   boxSizing: "border-box",
@@ -19037,7 +19037,7 @@ const InputBaseRoot = styled("div", {
   display: "inline-flex",
   alignItems: "center",
   [`&.${inputBaseClasses.disabled}`]: {
-    color: (theme2.vars || theme2).palette.text.disabled,
+    color: (theme.vars || theme).palette.text.disabled,
     cursor: "default"
   },
   variants: [{
@@ -19069,25 +19069,25 @@ const InputBaseInput = styled("input", {
   slot: "Input",
   overridesResolver: inputOverridesResolver
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => {
-  const light2 = theme2.palette.mode === "light";
+  const light2 = theme.palette.mode === "light";
   const placeholder = {
     color: "currentColor",
-    ...theme2.vars ? {
-      opacity: theme2.vars.opacity.inputPlaceholder
+    ...theme.vars ? {
+      opacity: theme.vars.opacity.inputPlaceholder
     } : {
       opacity: light2 ? 0.42 : 0.5
     },
-    transition: theme2.transitions.create("opacity", {
-      duration: theme2.transitions.duration.shorter
+    transition: theme.transitions.create("opacity", {
+      duration: theme.transitions.duration.shorter
     })
   };
   const placeholderHidden = {
     opacity: "0 !important"
   };
-  const placeholderVisible = theme2.vars ? {
-    opacity: theme2.vars.opacity.inputPlaceholder
+  const placeholderVisible = theme.vars ? {
+    opacity: theme.vars.opacity.inputPlaceholder
   } : {
     opacity: light2 ? 0.42 : 0.5
   };
@@ -19140,7 +19140,7 @@ const InputBaseInput = styled("input", {
     [`&.${inputBaseClasses.disabled}`]: {
       opacity: 1,
       // Reset iOS opacity
-      WebkitTextFillColor: (theme2.vars || theme2).palette.text.disabled
+      WebkitTextFillColor: (theme.vars || theme).palette.text.disabled
       // Fix opacity Safari bug
     },
     variants: [{
@@ -19726,12 +19726,12 @@ const InputRoot = styled(InputBaseRoot, {
     return [...rootOverridesResolver(props, styles2), !ownerState.disableUnderline && styles2.underline];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => {
-  const light2 = theme2.palette.mode === "light";
+  const light2 = theme.palette.mode === "light";
   let bottomLineColor = light2 ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)";
-  if (theme2.vars) {
-    bottomLineColor = theme2.alpha(theme2.vars.palette.common.onBackground, theme2.vars.opacity.inputUnderline);
+  if (theme.vars) {
+    bottomLineColor = theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline);
   }
   return {
     position: "relative",
@@ -19756,9 +19756,9 @@ const InputRoot = styled(InputBaseRoot, {
           position: "absolute",
           right: 0,
           transform: "scaleX(0)",
-          transition: theme2.transitions.create("transform", {
-            duration: theme2.transitions.duration.shorter,
-            easing: theme2.transitions.easing.easeOut
+          transition: theme.transitions.create("transform", {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut
           }),
           pointerEvents: "none"
           // Transparent to the hover style.
@@ -19770,7 +19770,7 @@ const InputRoot = styled(InputBaseRoot, {
         },
         [`&.${inputClasses.error}`]: {
           "&::before, &::after": {
-            borderBottomColor: (theme2.vars || theme2).palette.error.main
+            borderBottomColor: (theme.vars || theme).palette.error.main
           }
         },
         "&::before": {
@@ -19780,14 +19780,14 @@ const InputRoot = styled(InputBaseRoot, {
           content: '"\\00a0"',
           position: "absolute",
           right: 0,
-          transition: theme2.transitions.create("border-bottom-color", {
-            duration: theme2.transitions.duration.shorter
+          transition: theme.transitions.create("border-bottom-color", {
+            duration: theme.transitions.duration.shorter
           }),
           pointerEvents: "none"
           // Transparent to the hover style.
         },
         [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
-          borderBottom: `2px solid ${(theme2.vars || theme2).palette.text.primary}`,
+          borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
           // Reset on touch devices, it doesn't add specificity
           "@media (hover: none)": {
             borderBottom: `1px solid ${bottomLineColor}`
@@ -19797,14 +19797,14 @@ const InputRoot = styled(InputBaseRoot, {
           borderBottomStyle: "dotted"
         }
       }
-    }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
       props: {
         color: color2,
         disableUnderline: false
       },
       style: {
         "&::after": {
-          borderBottom: `2px solid ${(theme2.vars || theme2).palette[color2].main}`
+          borderBottom: `2px solid ${(theme.vars || theme).palette[color2].main}`
         }
       }
     }))]
@@ -20084,34 +20084,34 @@ const FilledInputRoot = styled(InputBaseRoot, {
     return [...rootOverridesResolver(props, styles2), !ownerState.disableUnderline && styles2.underline];
   }
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => {
-  const light2 = theme2.palette.mode === "light";
+  const light2 = theme.palette.mode === "light";
   const bottomLineColor = light2 ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)";
   const backgroundColor2 = light2 ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.09)";
   const hoverBackground = light2 ? "rgba(0, 0, 0, 0.09)" : "rgba(255, 255, 255, 0.13)";
   const disabledBackground = light2 ? "rgba(0, 0, 0, 0.12)" : "rgba(255, 255, 255, 0.12)";
   return {
     position: "relative",
-    backgroundColor: theme2.vars ? theme2.vars.palette.FilledInput.bg : backgroundColor2,
-    borderTopLeftRadius: (theme2.vars || theme2).shape.borderRadius,
-    borderTopRightRadius: (theme2.vars || theme2).shape.borderRadius,
-    transition: theme2.transitions.create("background-color", {
-      duration: theme2.transitions.duration.shorter,
-      easing: theme2.transitions.easing.easeOut
+    backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor2,
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create("background-color", {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeOut
     }),
     "&:hover": {
-      backgroundColor: theme2.vars ? theme2.vars.palette.FilledInput.hoverBg : hoverBackground,
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBg : hoverBackground,
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
-        backgroundColor: theme2.vars ? theme2.vars.palette.FilledInput.bg : backgroundColor2
+        backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor2
       }
     },
     [`&.${filledInputClasses.focused}`]: {
-      backgroundColor: theme2.vars ? theme2.vars.palette.FilledInput.bg : backgroundColor2
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor2
     },
     [`&.${filledInputClasses.disabled}`]: {
-      backgroundColor: theme2.vars ? theme2.vars.palette.FilledInput.disabledBg : disabledBackground
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
     },
     variants: [{
       props: ({
@@ -20125,9 +20125,9 @@ const FilledInputRoot = styled(InputBaseRoot, {
           position: "absolute",
           right: 0,
           transform: "scaleX(0)",
-          transition: theme2.transitions.create("transform", {
-            duration: theme2.transitions.duration.shorter,
-            easing: theme2.transitions.easing.easeOut
+          transition: theme.transitions.create("transform", {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut
           }),
           pointerEvents: "none"
           // Transparent to the hover style.
@@ -20139,37 +20139,37 @@ const FilledInputRoot = styled(InputBaseRoot, {
         },
         [`&.${filledInputClasses.error}`]: {
           "&::before, &::after": {
-            borderBottomColor: (theme2.vars || theme2).palette.error.main
+            borderBottomColor: (theme.vars || theme).palette.error.main
           }
         },
         "&::before": {
-          borderBottom: `1px solid ${theme2.vars ? theme2.alpha(theme2.vars.palette.common.onBackground, theme2.vars.opacity.inputUnderline) : bottomLineColor}`,
+          borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
           content: '"\\00a0"',
           position: "absolute",
           right: 0,
-          transition: theme2.transitions.create("border-bottom-color", {
-            duration: theme2.transitions.duration.shorter
+          transition: theme.transitions.create("border-bottom-color", {
+            duration: theme.transitions.duration.shorter
           }),
           pointerEvents: "none"
           // Transparent to the hover style.
         },
         [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
-          borderBottom: `1px solid ${(theme2.vars || theme2).palette.text.primary}`
+          borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
         },
         [`&.${filledInputClasses.disabled}:before`]: {
           borderBottomStyle: "dotted"
         }
       }
-    }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
       props: {
         disableUnderline: false,
         color: color2
       },
       style: {
         "&::after": {
-          borderBottom: `2px solid ${(theme2.vars || theme2).palette[color2]?.main}`
+          borderBottom: `2px solid ${(theme.vars || theme).palette[color2]?.main}`
         }
       }
     })), {
@@ -20226,27 +20226,27 @@ const FilledInputInput = styled(InputBaseInput, {
   slot: "Input",
   overridesResolver: inputOverridesResolver
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,
   paddingLeft: 12,
-  ...!theme2.vars && {
+  ...!theme.vars && {
     "&:-webkit-autofill": {
-      WebkitBoxShadow: theme2.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
-      WebkitTextFillColor: theme2.palette.mode === "light" ? null : "#fff",
-      caretColor: theme2.palette.mode === "light" ? null : "#fff",
+      WebkitBoxShadow: theme.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
+      WebkitTextFillColor: theme.palette.mode === "light" ? null : "#fff",
+      caretColor: theme.palette.mode === "light" ? null : "#fff",
       borderTopLeftRadius: "inherit",
       borderTopRightRadius: "inherit"
     }
   },
-  ...theme2.vars && {
+  ...theme.vars && {
     "&:-webkit-autofill": {
       borderTopLeftRadius: "inherit",
       borderTopRightRadius: "inherit"
     },
-    [theme2.getColorSchemeSelector("dark")]: {
+    [theme.getColorSchemeSelector("dark")]: {
       "&:-webkit-autofill": {
         WebkitBoxShadow: "0 0 0 100px #266798 inset",
         WebkitTextFillColor: "#fff",
@@ -20575,7 +20575,7 @@ const NotchedOutlineLegend = styled("legend", {
   name: "MuiNotchedOutlined",
   shouldForwardProp: rootShouldForwardProp
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   float: "unset",
   // Fix conflict with bootstrap
@@ -20591,9 +20591,9 @@ const NotchedOutlineLegend = styled("legend", {
       padding: 0,
       lineHeight: "11px",
       // sync with `height` in `legend` styles
-      transition: theme2.transitions.create("width", {
+      transition: theme.transitions.create("width", {
         duration: 150,
-        easing: theme2.transitions.easing.easeOut
+        easing: theme.transitions.easing.easeOut
       })
     }
   }, {
@@ -20609,9 +20609,9 @@ const NotchedOutlineLegend = styled("legend", {
       fontSize: "0.75em",
       visibility: "hidden",
       maxWidth: 0.01,
-      transition: theme2.transitions.create("max-width", {
+      transition: theme.transitions.create("max-width", {
         duration: 50,
-        easing: theme2.transitions.easing.easeOut
+        easing: theme.transitions.easing.easeOut
       }),
       whiteSpace: "nowrap",
       "& > span": {
@@ -20628,9 +20628,9 @@ const NotchedOutlineLegend = styled("legend", {
     }) => ownerState.withLabel && ownerState.notched,
     style: {
       maxWidth: "100%",
-      transition: theme2.transitions.create("max-width", {
+      transition: theme.transitions.create("max-width", {
         duration: 100,
-        easing: theme2.transitions.easing.easeOut,
+        easing: theme.transitions.easing.easeOut,
         delay: 50
       })
     }
@@ -20726,31 +20726,31 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
   slot: "Root",
   overridesResolver: rootOverridesResolver
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => {
-  const borderColor2 = theme2.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
+  const borderColor2 = theme.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
   return {
     position: "relative",
-    borderRadius: (theme2.vars || theme2).shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme2.vars || theme2).palette.text.primary
+      borderColor: (theme.vars || theme).palette.text.primary
     },
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
       [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme2.vars ? theme2.alpha(theme2.vars.palette.common.onBackground, 0.23) : borderColor2
+        borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor2
       }
     },
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
       borderWidth: 2
     },
-    variants: [...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
       props: {
         color: color2
       },
       style: {
         [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
-          borderColor: (theme2.vars || theme2).palette[color2].main
+          borderColor: (theme.vars || theme).palette[color2].main
         }
       }
     })), {
@@ -20758,10 +20758,10 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
       // to overide the above style
       style: {
         [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
-          borderColor: (theme2.vars || theme2).palette.error.main
+          borderColor: (theme.vars || theme).palette.error.main
         },
         [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
-          borderColor: (theme2.vars || theme2).palette.action.disabled
+          borderColor: (theme.vars || theme).palette.action.disabled
         }
       }
     }, {
@@ -20800,11 +20800,11 @@ const NotchedOutlineRoot = styled(NotchedOutline, {
   name: "MuiOutlinedInput",
   slot: "NotchedOutline"
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => {
-  const borderColor2 = theme2.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
+  const borderColor2 = theme.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
   return {
-    borderColor: theme2.vars ? theme2.alpha(theme2.vars.palette.common.onBackground, 0.23) : borderColor2
+    borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor2
   };
 }));
 const OutlinedInputInput = styled(InputBaseInput, {
@@ -20812,22 +20812,22 @@ const OutlinedInputInput = styled(InputBaseInput, {
   slot: "Input",
   overridesResolver: inputOverridesResolver
 })(memoTheme(({
-  theme: theme2
+  theme
 }) => ({
   padding: "16.5px 14px",
-  ...!theme2.vars && {
+  ...!theme.vars && {
     "&:-webkit-autofill": {
-      WebkitBoxShadow: theme2.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
-      WebkitTextFillColor: theme2.palette.mode === "light" ? null : "#fff",
-      caretColor: theme2.palette.mode === "light" ? null : "#fff",
+      WebkitBoxShadow: theme.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
+      WebkitTextFillColor: theme.palette.mode === "light" ? null : "#fff",
+      caretColor: theme.palette.mode === "light" ? null : "#fff",
       borderRadius: "inherit"
     }
   },
-  ...theme2.vars && {
+  ...theme.vars && {
     "&:-webkit-autofill": {
       borderRadius: "inherit"
     },
-    [theme2.getColorSchemeSelector("dark")]: {
+    [theme.getColorSchemeSelector("dark")]: {
       "&:-webkit-autofill": {
         WebkitBoxShadow: "0 0 0 100px #266798 inset",
         WebkitTextFillColor: "#fff",
@@ -22643,66 +22643,6 @@ function SplitPixForm({
     ) })
   ] }) });
 }
-const brand = {
-  primary: "#6C4CE7",
-  // roxo da plataforma
-  primaryHover: "#5a3ed4",
-  ink: "#111827",
-  muted: "#6b7280",
-  bg: "#f6f7fb",
-  surface: "#ffffff",
-  border: "#e5e7eb",
-  ring: "rgba(108,76,231,.25)"
-};
-const theme = createTheme({
-  palette: {
-    mode: "light",
-    primary: { main: brand.primary },
-    text: { primary: brand.ink, secondary: brand.muted },
-    background: { default: brand.bg, paper: brand.surface }
-  },
-  shape: { borderRadius: 10 },
-  typography: {
-    fontFamily: `"Inter","Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif`,
-    h6: { fontWeight: 700 },
-    button: { textTransform: "none", fontWeight: 700 }
-  },
-  components: {
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          border: `1px solid ${brand.border}`,
-          boxShadow: "0 10px 30px rgba(2,6,23,.06)"
-        }
-      }
-    },
-    MuiTextField: {
-      defaultProps: { size: "medium" }
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          background: "#fff",
-          "& fieldset": { borderColor: brand.border },
-          "&:hover fieldset": { borderColor: brand.primary },
-          "&.Mui-focused fieldset": { borderColor: brand.primary, boxShadow: `0 0 0 3px ${brand.ring}` }
-        },
-        input: { paddingTop: 14, paddingBottom: 14 }
-      }
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: { borderRadius: 12, paddingBlock: 14 },
-        containedPrimary: { boxShadow: "0 10px 24px rgba(108,76,231,.22)" }
-      }
-    },
-    MuiDivider: {
-      styleOverrides: {
-        root: { borderColor: brand.border }
-      }
-    }
-  }
-});
 function CheckoutFlowContent({
   step,
   setStep,
@@ -22716,14 +22656,24 @@ function CheckoutFlowContent({
   uuid,
   producao,
   onResponse,
-  paymentEnabled
+  paymentEnabled,
+  cor
 }) {
   useMediaQuery("(max-width:900px)");
+  useTheme();
   const primaryButtons = [];
   const listItems = [];
   if (paymentEnabled?.creditCard) {
     listItems.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(ListItemButton, { onClick: () => setStep("card"), sx: itemStyle, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(ListItemButton, { onClick: () => setStep("card"), sx: {
+        border: `1px solid #ced2da`,
+        borderRadius: 14,
+        mb: 1.5,
+        paddingBlock: 1.2,
+        boxShadow: "0 6px 18px rgba(2,6,23,.04)",
+        "& .MuiListItemIcon-root": { minWidth: 44, "& svg": { opacity: 0.9 } },
+        "&:hover": { backgroundColor: "#f8fafc", boxShadow: "0 12px 24px rgba(2,6,23,.06)" }
+      }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CreditCardIcon, {}) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ListItemText,
@@ -22738,7 +22688,15 @@ function CheckoutFlowContent({
   }
   if (paymentEnabled?.pix) {
     listItems.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(ListItemButton, { onClick: () => setStep("pix"), sx: itemStyle, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(ListItemButton, { onClick: () => setStep("pix"), sx: {
+        border: `1px solid #ced2da`,
+        borderRadius: 14,
+        mb: 1.5,
+        paddingBlock: 1.2,
+        boxShadow: "0 6px 18px rgba(2,6,23,.04)",
+        "& .MuiListItemIcon-root": { minWidth: 44, "& svg": { opacity: 0.9 } },
+        "&:hover": { backgroundColor: "#f8fafc", boxShadow: "0 12px 24px rgba(2,6,23,.06)" }
+      }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(QrCode2Icon, {}) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ListItemText,
@@ -22806,14 +22764,87 @@ function CheckoutFlowContent({
     ) })
   ] }) });
 }
-const itemStyle = {
-  border: `1px solid ${brand.border}`,
-  borderRadius: 14,
-  mb: 1.5,
-  paddingBlock: 1.2,
-  boxShadow: "0 6px 18px rgba(2,6,23,.04)",
-  "& .MuiListItemIcon-root": { minWidth: 44, "& svg": { opacity: 0.9 } },
-  "&:hover": { backgroundColor: "#f8fafc", boxShadow: "0 12px 24px rgba(2,6,23,.06)" }
+const createBrandTheme = (color2) => {
+  const primary = color2?.startsWith("#") ? color2 : color2 ? `#${color2}` : "#6C4CE7";
+  const brand = {
+    primary,
+    primaryHover: `${primary}cc`,
+    // 80% opacidade
+    ink: "#111827",
+    muted: "#6b7280",
+    bg: "#f6f7fb",
+    surface: "#ffffff",
+    border: "#e5e7eb",
+    ring: `${primary}40`
+    // 25% opacidade para foco
+  };
+  return createTheme({
+    palette: {
+      mode: "light",
+      primary: { main: brand.primary },
+      text: { primary: brand.ink, secondary: brand.muted },
+      background: { default: brand.bg, paper: brand.surface }
+    },
+    shape: { borderRadius: 10 },
+    typography: {
+      fontFamily: `"Inter","Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif`,
+      h6: { fontWeight: 700 },
+      button: { textTransform: "none", fontWeight: 700 }
+    },
+    components: {
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            border: `1px solid ${brand.border}`,
+            boxShadow: "0 10px 30px rgba(2,6,23,.06)"
+          }
+        }
+      },
+      MuiTextField: {
+        defaultProps: { size: "medium" }
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            background: brand.surface,
+            "& fieldset": { borderColor: brand.border },
+            "&:hover fieldset": { borderColor: brand.primary },
+            "&.Mui-focused fieldset": {
+              borderColor: brand.primary,
+              boxShadow: `0 0 0 3px ${brand.ring}`
+            }
+          },
+          input: { paddingTop: 14, paddingBottom: 14 }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: 12,
+            paddingBlock: 14
+          },
+          containedPrimary: {
+            backgroundColor: brand.primary,
+            boxShadow: `0 10px 24px ${brand.ring}`,
+            "&:hover": { backgroundColor: brand.primaryHover }
+          },
+          outlinedPrimary: {
+            borderColor: brand.primary,
+            color: brand.primary,
+            "&:hover": {
+              borderColor: brand.primaryHover,
+              backgroundColor: `${brand.primary}15`
+            }
+          }
+        }
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: { borderColor: brand.border }
+        }
+      }
+    }
+  });
 };
 function CheckoutFlow(props) {
   const [step, setStep] = useState("select");
@@ -22822,6 +22853,7 @@ function CheckoutFlow(props) {
     [props.produtos]
   );
   const valor = props.valorTotal ?? amountFromItems;
+  const theme = useMemo(() => createBrandTheme(props?.cor), [props?.cor]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
     {
@@ -22855,7 +22887,6 @@ export {
   OrderSummary,
   SplitCheckoutForm as SplitCardForm,
   SplitPixForm,
-  brand,
   isValidCNPJ,
   isValidCPF,
   isValidPassport