@cgi-learning-hub/ui 1.10.0-dev.1761752478 → 1.10.0-dev.1762426589

package/dist/index.es.js

@@ -9,7 +9,7 @@ import { css as css2, keyframes as keyframes2 } from "@emotion/react";
 import emStyled from "@emotion/styled";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
-import { useTheme as useTheme$4, styled as styled$3, ToggleButtonGroup as ToggleButtonGroup$1, ToggleButton as ToggleButton$1, Box as Box$1, ClickAwayListener as ClickAwayListener$1, IconButton as IconButton$1, Tooltip as Tooltip$1, Typography as Typography$1, Stack as Stack$1, ListItem as ListItem$1, CircularProgress as CircularProgress$1, ListItemButton as ListItemButton$1, List as List$2, Divider as Divider$1, Card as Card$1, CardMedia as CardMedia$1, CardContent as CardContent$1 } from "@mui/material";
+import { useTheme as useTheme$4, styled as styled$3, ToggleButtonGroup as ToggleButtonGroup$1, ToggleButton as ToggleButton$1, Box as Box$1, ClickAwayListener as ClickAwayListener$1, IconButton as IconButton$1, Stack as Stack$1, ListItem as ListItem$1, CircularProgress as CircularProgress$1, ListItemButton as ListItemButton$1, List as List$2, Divider as Divider$1, Card as Card$1, CardMedia as CardMedia$1, CardContent as CardContent$1, Tooltip as Tooltip$1 } from "@mui/material";
 import { CirclePicker } from "react-color";
 import dayjs from "dayjs";
 import { useDropzone } from "react-dropzone";
@@ -1254,7 +1254,7 @@ function clsx() {
   return n;
 }
 const refType = PropTypes.oneOfType([PropTypes.func, PropTypes.object]);
-function composeClasses(slots, getUtilityClass, classes = void 0) {
+function composeClasses$1(slots, getUtilityClass, classes = void 0) {
   const output = {};
   for (const slotName in slots) {
     const slot = slots[slotName];
@@ -1457,49 +1457,49 @@ function useSlotProps(parameters) {
   }, ownerState);
   return props;
 }
-function formatMuiErrorMessage(code, ...args) {
+function formatMuiErrorMessage$1(code, ...args) {
   const url = new URL(`https://mui.com/production-error/?code=${code}`);
   args.forEach((arg2) => url.searchParams.append("args[]", arg2));
   return `Minified MUI error #${code}; visit ${url} for the full message.`;
 }
-function capitalize(string) {
+function capitalize$1(string) {
   if (typeof string !== "string") {
-    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `capitalize(string)` expects a string argument." : formatMuiErrorMessage(7));
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `capitalize(string)` expects a string argument." : formatMuiErrorMessage$1(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-function isPlainObject(item) {
+function isPlainObject$1(item) {
   if (typeof item !== "object" || item === null) {
     return false;
   }
   const prototype = Object.getPrototypeOf(item);
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
-function deepClone(source) {
-  if (/* @__PURE__ */ React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
+function deepClone$1(source) {
+  if (/* @__PURE__ */ React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject$1(source)) {
     return source;
   }
   const output = {};
   Object.keys(source).forEach((key) => {
-    output[key] = deepClone(source[key]);
+    output[key] = deepClone$1(source[key]);
   });
   return output;
 }
-function deepmerge(target, source, options = {
+function deepmerge$1(target, source, options = {
   clone: true
 }) {
   const output = options.clone ? {
     ...target
   } : target;
-  if (isPlainObject(target) && isPlainObject(source)) {
+  if (isPlainObject$1(target) && isPlainObject$1(source)) {
     Object.keys(source).forEach((key) => {
       if (/* @__PURE__ */ React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
         output[key] = source[key];
-      } else if (isPlainObject(source[key]) && // Avoid prototype pollution
-      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
-        output[key] = deepmerge(target[key], source[key], options);
+      } else if (isPlainObject$1(source[key]) && // Avoid prototype pollution
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject$1(target[key])) {
+        output[key] = deepmerge$1(target[key], source[key], options);
       } else if (options.clone) {
-        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
+        output[key] = isPlainObject$1(source[key]) ? deepClone$1(source[key]) : source[key];
       } else {
         output[key] = source[key];
       }
@@ -1511,7 +1511,7 @@ function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return deepmerge(acc, item, {
+  return deepmerge$1(acc, item, {
     clone: false
     // No need to clone deep, it's way faster.
   });
@@ -1546,7 +1546,7 @@ function getContainerQuery(theme, shorthand) {
   if (!matches) {
     if (process.env.NODE_ENV !== "production") {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage(18, `(${shorthand})`));
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage$1(18, `(${shorthand})`));
     }
     return null;
   }
@@ -1660,7 +1660,7 @@ function removeUnusedBreakpoints(breakpointKeys, style2) {
 }
 function mergeBreakpointsInOrder(breakpointsInput, ...styles2) {
   const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
-  const mergedOutput = [emptyBreakpoints, ...styles2].reduce((prev2, next2) => deepmerge(prev2, next2), {});
+  const mergedOutput = [emptyBreakpoints, ...styles2].reduce((prev2, next2) => deepmerge$1(prev2, next2), {});
   return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
 }
 function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
@@ -1756,7 +1756,7 @@ function style$2(options) {
     const styleFromPropValue = (propValueFinal) => {
       let value = getStyleValue$1(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === "string") {
-        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize(propValueFinal)}`, propValueFinal);
+        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize$1(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -2464,7 +2464,7 @@ function unstable_createStyleFunctionSx() {
     const styleFromPropValue = (propValueFinal) => {
       let value = getStyleValue$1(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === "string") {
-        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize(propValueFinal)}`, propValueFinal);
+        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize$1(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -2569,7 +2569,7 @@ function extendSxProp$1(props) {
   } else if (typeof inSx === "function") {
     finalSx = (...args) => {
       const result = inSx(...args);
-      if (!isPlainObject(result)) {
+      if (!isPlainObject$1(result)) {
         return systemProps;
       }
       return {
@@ -3716,7 +3716,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$2.propTypes = {
   styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
 } : void 0;
 /**
- * @mui/styled-engine v7.3.3
+ * @mui/styled-engine v7.3.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -3879,7 +3879,7 @@ function createTheme$1(options = {}, ...args) {
   } = options;
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
-  let muiTheme = deepmerge({
+  let muiTheme = deepmerge$1({
     breakpoints,
     direction: "ltr",
     components: {},
@@ -3896,7 +3896,7 @@ function createTheme$1(options = {}, ...args) {
   }, other);
   muiTheme = cssContainerQueries(muiTheme);
   muiTheme.applyStyles = applyStyles$2;
-  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme = args.reduce((acc, argument) => deepmerge$1(acc, argument), muiTheme);
   muiTheme.unstable_sxConfig = {
     ...defaultSxConfig,
     ...other == null ? void 0 : other.unstable_sxConfig
@@ -3972,9 +3972,9 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes = {
    */
   themeId: PropTypes.string
 } : void 0;
-const defaultGenerator = (componentName) => componentName;
-const createClassNameGenerator = () => {
-  let generate = defaultGenerator;
+const defaultGenerator$1 = (componentName) => componentName;
+const createClassNameGenerator$1 = () => {
+  let generate = defaultGenerator$1;
   return {
     configure(generator) {
       generate = generator;
@@ -3983,11 +3983,11 @@ const createClassNameGenerator = () => {
       return generate(componentName);
     },
     reset() {
-      generate = defaultGenerator;
+      generate = defaultGenerator$1;
     }
   };
 };
-const ClassNameGenerator = createClassNameGenerator();
+const ClassNameGenerator$1 = createClassNameGenerator$1();
 function createBox(options = {}) {
   const {
     themeId,
@@ -4015,7 +4015,7 @@ function createBox(options = {}) {
   });
   return Box2;
 }
-const globalStateClasses = {
+const globalStateClasses$1 = {
   active: "active",
   checked: "checked",
   completed: "completed",
@@ -4029,16 +4029,9 @@ const globalStateClasses = {
   required: "required",
   selected: "selected"
 };
-function generateUtilityClass(componentName, slot, globalStatePrefix = "Mui") {
-  const globalStateClass = globalStateClasses[slot];
-  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
-}
-function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
-  const result = {};
-  slots.forEach((slot) => {
-    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-  });
-  return result;
+function generateUtilityClass$1(componentName, slot, globalStatePrefix = "Mui") {
+  const globalStateClass = globalStateClasses$1[slot];
+  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
 }
 function getFunctionComponentName(Component, fallback = "") {
   return Component.displayName || Component.name || fallback;
@@ -4218,7 +4211,7 @@ function createStyled(input = {}) {
           return processStyle(props, style2, props.theme.modularCssLayers ? layerName : void 0);
         };
       }
-      if (isPlainObject(style2)) {
+      if (isPlainObject$1(style2)) {
         const serialized = preprocessStyles(style2);
         return function styleObjectProcessor(props) {
           if (!serialized.variants) {
@@ -4293,7 +4286,7 @@ function createStyled(input = {}) {
 }
 function generateDisplayName(componentName, componentSlot, tag) {
   if (componentName) {
-    return `${componentName}${capitalize(componentSlot || "")}`;
+    return `${componentName}${capitalize$1(componentSlot || "")}`;
   }
   return `Styled(${getDisplayName(tag)})`;
 }
@@ -4325,7 +4318,7 @@ function lowercaseFirstLetter(string) {
   return string.charAt(0).toLowerCase() + string.slice(1);
 }
 const styled$1 = createStyled();
-function resolveProps(defaultProps2, props, mergeClassNameAndStyle = false) {
+function resolveProps$1(defaultProps2, props, mergeClassNameAndStyle = false) {
   const output = {
     ...props
   };
@@ -4351,7 +4344,7 @@ function resolveProps(defaultProps2, props, mergeClassNameAndStyle = false) {
           for (const slotKey in defaultSlotProps) {
             if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
               const slotPropName = slotKey;
-              output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName], mergeClassNameAndStyle);
+              output[propName][slotPropName] = resolveProps$1(defaultSlotProps[slotPropName], slotProps[slotPropName], mergeClassNameAndStyle);
             }
           }
         }
@@ -4378,7 +4371,7 @@ function getThemeProps$1(params) {
   if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
     return props;
   }
-  return resolveProps(theme.components[name].defaultProps, props);
+  return resolveProps$1(theme.components[name].defaultProps, props);
 }
 function useThemeProps$3({
   props,
@@ -4396,7 +4389,7 @@ function useThemeProps$3({
     props
   });
 }
-const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const useEnhancedEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match2, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {
@@ -4407,7 +4400,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     }
     return defaultMatches;
   });
-  useEnhancedEffect(() => {
+  useEnhancedEffect$1(() => {
     if (!matchMedia) {
       return void 0;
     }
@@ -4423,10 +4416,10 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   }, [query, matchMedia]);
   return match2;
 }
-const safeReact$1 = {
+const safeReact$2 = {
   ...React
 };
-const maybeReactUseSyncExternalStore = safeReact$1.useSyncExternalStore;
+const maybeReactUseSyncExternalStore = safeReact$2.useSyncExternalStore;
 function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
   const getServerSnapshot = React.useMemo(() => {
@@ -4541,7 +4534,7 @@ function decomposeColor(color2) {
   const type = color2.substring(0, marker);
   if (!["rgb", "rgba", "hsl", "hsla", "color"].includes(type)) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color2}\` color.
-The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : formatMuiErrorMessage(9, color2));
+The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : formatMuiErrorMessage$1(9, color2));
   }
   let values2 = color2.substring(marker + 1, color2.length - 1);
   let colorSpace;
@@ -4553,7 +4546,7 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
     }
     if (!["srgb", "display-p3", "a98-rgb", "prophoto-rgb", "rec-2020"].includes(colorSpace)) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
-The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : formatMuiErrorMessage(10, colorSpace));
+The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : formatMuiErrorMessage$1(10, colorSpace));
     }
   } else {
     values2 = values2.split(",");
@@ -4727,14 +4720,14 @@ function private_safeEmphasize(color2, coefficient, warning) {
     return color2;
   }
 }
-const specialProperty = "exact-prop: ​";
-function exactProp(propTypes2) {
+const specialProperty$1 = "exact-prop: ​";
+function exactProp$1(propTypes2) {
   if (process.env.NODE_ENV === "production") {
     return propTypes2;
   }
   return {
     ...propTypes2,
-    [specialProperty]: (props) => {
+    [specialProperty$1]: (props) => {
       const unsupportedProps = Object.keys(props).filter((prop) => !propTypes2.hasOwnProperty(prop));
       if (unsupportedProps.length > 0) {
         return new Error(`The following props are not supported: ${unsupportedProps.map((prop) => `\`${prop}\``).join(", ")}. Please remove them.`);
@@ -4807,7 +4800,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = {
   theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
 } : void 0;
 if (process.env.NODE_ENV !== "production") {
-  process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) : void 0;
+  process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp$1(ThemeProvider$2.propTypes) : void 0;
 }
 const PropsContext = /* @__PURE__ */ React.createContext(void 0);
 function DefaultPropsProvider({
@@ -4844,10 +4837,10 @@ function getThemeProps(params) {
   }
   const config2 = theme.components[name];
   if (config2.defaultProps) {
-    return resolveProps(config2.defaultProps, props, theme.components.mergeClassNameAndStyle);
+    return resolveProps$1(config2.defaultProps, props, theme.components.mergeClassNameAndStyle);
   }
   if (!config2.styleOverrides && !config2.variants) {
-    return resolveProps(config2, props, theme.components.mergeClassNameAndStyle);
+    return resolveProps$1(config2, props, theme.components.mergeClassNameAndStyle);
   }
   return props;
 }
@@ -4864,32 +4857,32 @@ function useDefaultProps$1({
     }
   });
 }
-let globalId = 0;
-function useGlobalId(idOverride) {
+let globalId$1 = 0;
+function useGlobalId$1(idOverride) {
   const [defaultId, setDefaultId] = React.useState(idOverride);
   const id = idOverride || defaultId;
   React.useEffect(() => {
     if (defaultId == null) {
-      globalId += 1;
-      setDefaultId(`mui-${globalId}`);
+      globalId$1 += 1;
+      setDefaultId(`mui-${globalId$1}`);
     }
   }, [defaultId]);
   return id;
 }
-const safeReact = {
+const safeReact$1 = {
   ...React
 };
-const maybeReactUseId = safeReact.useId;
-function useId(idOverride) {
-  if (maybeReactUseId !== void 0) {
-    const reactId = maybeReactUseId();
-    return idOverride ?? reactId;
+const maybeReactUseId$1 = safeReact$1.useId;
+function useId$1(idOverride) {
+  if (maybeReactUseId$1 !== void 0) {
+    const reactId = maybeReactUseId$1();
+    return reactId;
   }
-  return useGlobalId(idOverride);
+  return useGlobalId$1(idOverride);
 }
 function useLayerOrder(theme) {
   const upperTheme = useTheme$3();
-  const id = useId() || "";
+  const id = useId$1() || "";
   const {
     modularCssLayers
   } = theme;
@@ -4901,7 +4894,7 @@ function useLayerOrder(theme) {
   } else {
     layerOrder = `@layer ${layerOrder};`;
   }
-  useEnhancedEffect(() => {
+  useEnhancedEffect$1(() => {
     var _a, _b;
     const head = document.querySelector("head");
     if (!head) {
@@ -5001,7 +4994,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = {
   themeId: PropTypes.string
 } : void 0;
 if (process.env.NODE_ENV !== "production") {
-  process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
+  process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp$1(ThemeProvider$1.propTypes) : void 0;
 }
 const arg = {
   theme: void 0
@@ -5494,7 +5487,7 @@ function createCssVarsProvider(options) {
       return resolveTheme ? resolveTheme(theme) : theme;
     }, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
-    useEnhancedEffect(() => {
+    useEnhancedEffect$1(() => {
       if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== "media") {
         const selector = colorSchemeSelector;
         let rule = colorSchemeSelector;
@@ -5786,7 +5779,7 @@ function prepareCssVars(theme, parserConfig = {}) {
       css: css3,
       varsWithDefaults
     } = cssVarsParser(scheme, parserConfig);
-    themeVars = deepmerge(themeVars, varsWithDefaults);
+    themeVars = deepmerge$1(themeVars, varsWithDefaults);
     colorSchemesMap[key] = {
       css: css3,
       vars
@@ -5798,7 +5791,7 @@ function prepareCssVars(theme, parserConfig = {}) {
       vars,
       varsWithDefaults
     } = cssVarsParser(defaultScheme, parserConfig);
-    themeVars = deepmerge(themeVars, varsWithDefaults);
+    themeVars = deepmerge$1(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css: css3,
       vars
@@ -5844,7 +5837,7 @@ function prepareCssVars(theme, parserConfig = {}) {
     Object.entries(colorSchemesMap).forEach(([, {
       vars: schemeVars
     }]) => {
-      vars = deepmerge(vars, schemeVars);
+      vars = deepmerge$1(vars, schemeVars);
     });
     return vars;
   };
@@ -5942,6 +5935,26 @@ function createGetColorSchemeSelector(selector) {
     return "&";
   };
 }
+function composeClasses(slots, getUtilityClass, classes = void 0) {
+  const output = {};
+  for (const slotName in slots) {
+    const slot = slots[slotName];
+    let buffer = "";
+    let start2 = true;
+    for (let i = 0; i < slot.length; i += 1) {
+      const value = slot[i];
+      if (value) {
+        buffer += (start2 === true ? "" : " ") + getUtilityClass(value);
+        start2 = false;
+        if (classes && classes[value]) {
+          buffer += " " + classes[value];
+        }
+      }
+    }
+    output[slotName] = buffer;
+  }
+  return output;
+}
 const defaultTheme$4 = createTheme$1();
 const defaultCreateStyledComponent$2 = styled$1("div", {
   name: "MuiContainer",
@@ -5950,7 +5963,7 @@ const defaultCreateStyledComponent$2 = styled$1("div", {
     const {
       ownerState
     } = props;
-    return [styles2.root, styles2[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles2.fixed, ownerState.disableGutters && styles2.disableGutters];
+    return [styles2.root, styles2[`maxWidth${capitalize$1(String(ownerState.maxWidth))}`], ownerState.fixed && styles2.fixed, ownerState.disableGutters && styles2.disableGutters];
   }
 });
 const useThemePropsDefault$2 = (inProps) => useThemeProps$3({
@@ -5960,7 +5973,7 @@ const useThemePropsDefault$2 = (inProps) => useThemeProps$3({
 });
 const useUtilityClasses$1W = (ownerState, componentName) => {
   const getContainerUtilityClass2 = (slot) => {
-    return generateUtilityClass(componentName, slot);
+    return generateUtilityClass$1(componentName, slot);
   };
   const {
     classes,
@@ -5969,7 +5982,7 @@ const useUtilityClasses$1W = (ownerState, componentName) => {
     maxWidth: maxWidth2
   } = ownerState;
   const slots = {
-    root: ["root", maxWidth2 && `maxWidth${capitalize(String(maxWidth2))}`, fixed && "fixed", disableGutters && "disableGutters"]
+    root: ["root", maxWidth2 && `maxWidth${capitalize$1(String(maxWidth2))}`, fixed && "fixed", disableGutters && "disableGutters"]
   };
   return composeClasses(slots, getContainerUtilityClass2, classes);
 };
@@ -6072,7 +6085,7 @@ function createContainer(options = {}) {
   } : void 0;
   return Container2;
 }
-function isMuiElement(element, muiNames) {
+function isMuiElement$1(element, muiNames) {
   var _a, _b, _c;
   return /* @__PURE__ */ React.isValidElement(element) && muiNames.indexOf(
     // For server components `muiName` is available in element.type._payload.value.muiName
@@ -6376,7 +6389,7 @@ function createGrid(options = {}) {
     const slots = {
       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), {});
+    return composeClasses(slots, (slot) => generateUtilityClass$1(componentName, slot), {});
   };
   function parseResponsiveProp(propValue, breakpoints, shouldUseValue = () => true) {
     const parsedProp = {};
@@ -6451,7 +6464,7 @@ function createGrid(options = {}) {
       ...other,
       children: React.Children.map(children, (child) => {
         var _a;
-        if (/* @__PURE__ */ React.isValidElement(child) && isMuiElement(child, ["Grid"]) && container && child.props.container) {
+        if (/* @__PURE__ */ React.isValidElement(child) && isMuiElement$1(child, ["Grid"]) && container && child.props.container) {
           return /* @__PURE__ */ React.cloneElement(child, {
             unstable_level: ((_a = child.props) == null ? void 0 : _a.unstable_level) ?? level + 1
           });
@@ -6568,7 +6581,7 @@ const style = ({
         }
       };
     };
-    styles2 = deepmerge(styles2, handleBreakpoints({
+    styles2 = deepmerge$1(styles2, handleBreakpoints({
       theme
     }, spacingValues, styleFromPropValue));
   }
@@ -6586,7 +6599,7 @@ function createStack(options = {}) {
     const slots = {
       root: ["root"]
     };
-    return composeClasses(slots, (slot) => generateUtilityClass(componentName, slot), {});
+    return composeClasses(slots, (slot) => generateUtilityClass$1(componentName, slot), {});
   };
   const StackRoot = createStyledComponent(style);
   const Stack2 = /* @__PURE__ */ React.forwardRef(function Grid2(inProps, ref) {
@@ -6626,6 +6639,50 @@ function createStack(options = {}) {
   } : void 0;
   return Stack2;
 }
+function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach((arg2) => url.searchParams.append("args[]", arg2));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
+}
+function isPlainObject(item) {
+  if (typeof item !== "object" || item === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(item);
+  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
+}
+function deepClone(source) {
+  if (/* @__PURE__ */ React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
+    return source;
+  }
+  const output = {};
+  Object.keys(source).forEach((key) => {
+    output[key] = deepClone(source[key]);
+  });
+  return output;
+}
+function deepmerge(target, source, options = {
+  clone: true
+}) {
+  const output = options.clone ? {
+    ...target
+  } : target;
+  if (isPlainObject(target) && isPlainObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (/* @__PURE__ */ React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
+        output[key] = source[key];
+      } else if (isPlainObject(source[key]) && // Avoid prototype pollution
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
+        output[key] = deepmerge(target[key], source[key], options);
+      } else if (options.clone) {
+        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
+      } else {
+        output[key] = source[key];
+      }
+    });
+  }
+  return output;
+}
 const common = {
   black: "#000",
   white: "#fff"
@@ -7079,6 +7136,40 @@ function prepareTypographyVars(typography) {
   });
   return vars;
 }
+const defaultGenerator = (componentName) => componentName;
+const createClassNameGenerator = () => {
+  let generate = defaultGenerator;
+  return {
+    configure(generator) {
+      generate = generator;
+    },
+    generate(componentName) {
+      return generate(componentName);
+    },
+    reset() {
+      generate = defaultGenerator;
+    }
+  };
+};
+const ClassNameGenerator = createClassNameGenerator();
+const globalStateClasses = {
+  active: "active",
+  checked: "checked",
+  completed: "completed",
+  disabled: "disabled",
+  error: "error",
+  expanded: "expanded",
+  focused: "focused",
+  focusVisible: "focusVisible",
+  open: "open",
+  readOnly: "readOnly",
+  required: "required",
+  selected: "selected"
+};
+function generateUtilityClass(componentName, slot, globalStatePrefix = "Mui") {
+  const globalStateClass = globalStateClasses[slot];
+  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
+}
 function createMixins(breakpoints, mixins) {
   return {
     toolbar: {
@@ -8127,6 +8218,12 @@ function animate(property, element, to, options = {}, cb = () => {
   requestAnimationFrame(step);
   return cancel;
 }
+function capitalize(string) {
+  if (typeof string !== "string") {
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `capitalize(string)` expects a string argument." : formatMuiErrorMessage(7));
+  }
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
 function createChainedFunction(...funcs) {
   return funcs.reduce((acc, func) => {
     if (func == null) {
@@ -8139,6 +8236,13 @@ function createChainedFunction(...funcs) {
   }, () => {
   });
 }
+function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
+  const result = {};
+  slots.forEach((slot) => {
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+  });
+  return result;
+}
 function getSvgIconUtilityClass(slot) {
   return generateUtilityClass("MuiSvgIcon", slot);
 }
@@ -8152,7 +8256,7 @@ const useUtilityClasses$1V = (ownerState) => {
   const slots = {
     root: ["root", color2 !== "inherit" && `color${capitalize(color2)}`, `fontSize${capitalize(fontSize)}`]
   };
-  return composeClasses(slots, getSvgIconUtilityClass, classes);
+  return composeClasses$1(slots, getSvgIconUtilityClass, classes);
 };
 const SvgIconRoot = styled("svg", {
   name: "MuiSvgIcon",
@@ -8394,6 +8498,15 @@ function createSvgIcon(path, displayName) {
   Component.muiName = SvgIcon.muiName;
   return /* @__PURE__ */ React.memo(/* @__PURE__ */ React.forwardRef(Component));
 }
+function isMuiElement(element, muiNames) {
+  var _a, _b, _c;
+  return /* @__PURE__ */ React.isValidElement(element) && muiNames.indexOf(
+    // For server components `muiName` is available in element.type._payload.value.muiName
+    // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+    // eslint-disable-next-line no-underscore-dangle
+    element.type.muiName ?? ((_c = (_b = (_a = element.type) == null ? void 0 : _a._payload) == null ? void 0 : _b.value) == null ? void 0 : _c.muiName)
+  ) !== -1;
+}
 function ownerDocument(node2) {
   return node2 && node2.ownerDocument || document;
 }
@@ -8431,6 +8544,30 @@ function setRef(ref, value) {
     ref.current = value;
   }
 }
+const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+let globalId = 0;
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.useEffect(() => {
+    if (defaultId == null) {
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
+const safeReact = {
+  ...React
+};
+const maybeReactUseId = safeReact.useId;
+function useId(idOverride) {
+  if (maybeReactUseId !== void 0) {
+    const reactId = maybeReactUseId();
+    return idOverride ?? reactId;
+  }
+  return useGlobalId(idOverride);
+}
 function unsupportedProp(props, propName, componentName, location, propFullName) {
   if (process.env.NODE_ENV === "production") {
     return null;
@@ -10125,7 +10262,7 @@ const useUtilityClasses$1U = (ownerState) => {
   const slots = {
     root: ["root", disabled && "disabled", focusVisible && "focusVisible"]
   };
-  const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getButtonBaseUtilityClass, classes);
   if (focusVisible && focusVisibleClassName) {
     composedClasses.root += ` ${focusVisibleClassName}`;
   }
@@ -10543,7 +10680,7 @@ const useUtilityClasses$1T = (ownerState) => {
   const slots = {
     root: ["root", orientation, disabled && "disabled"]
   };
-  return composeClasses(slots, getTabScrollButtonUtilityClass, classes);
+  return composeClasses$1(slots, getTabScrollButtonUtilityClass, classes);
 };
 const TabScrollButtonRoot = styled(ButtonBase, {
   name: "MuiTabScrollButton",
@@ -10800,7 +10937,7 @@ const useUtilityClasses$1S = (ownerState) => {
     scrollableX: [scrollableX && "scrollableX"],
     hideScrollbar: [hideScrollbar && "hideScrollbar"]
   };
-  return composeClasses(slots, getTabsUtilityClass, classes);
+  return composeClasses$1(slots, getTabsUtilityClass, classes);
 };
 const TabsRoot = styled("div", {
   name: "MuiTabs",
@@ -12086,7 +12223,7 @@ const useUtilityClasses$1R = (ownerState) => {
   const slots = {
     root: ["root", hidden && "hidden"]
   };
-  return composeClasses(slots, getTabPanelUtilityClass, classes);
+  return composeClasses$1(slots, getTabPanelUtilityClass, classes);
 };
 const TabPanelRoot = styled("div", {
   name: "MuiTabPanel",
@@ -12191,7 +12328,7 @@ const useUtilityClasses$1Q = (ownerState) => {
     wrapper: ["wrapper", `${orientation}`],
     wrapperInner: ["wrapperInner", `${orientation}`]
   };
-  return composeClasses(slots, getCollapseUtilityClass, classes);
+  return composeClasses$1(slots, getCollapseUtilityClass, classes);
 };
 const CollapseRoot = styled("div", {
   name: "MuiCollapse",
@@ -12615,7 +12752,7 @@ const useUtilityClasses$1P = (ownerState) => {
   const slots = {
     root: ["root", variant, !square && "rounded", variant === "elevation" && `elevation${elevation}`]
   };
-  return composeClasses(slots, getPaperUtilityClass, classes);
+  return composeClasses$1(slots, getPaperUtilityClass, classes);
 };
 const PaperRoot = styled("div", {
   name: "MuiPaper",
@@ -12781,7 +12918,7 @@ const useUtilityClasses$1O = (ownerState) => {
     heading: ["heading"],
     region: ["region"]
   };
-  return composeClasses(slots, getAccordionUtilityClass, classes);
+  return composeClasses$1(slots, getAccordionUtilityClass, classes);
 };
 const AccordionRoot = styled(Paper, {
   name: "MuiAccordion",
@@ -13102,7 +13239,7 @@ const useUtilityClasses$1N = (ownerState) => {
   const slots = {
     root: ["root", !disableSpacing && "spacing"]
   };
-  return composeClasses(slots, getAccordionActionsUtilityClass, classes);
+  return composeClasses$1(slots, getAccordionActionsUtilityClass, classes);
 };
 const AccordionActionsRoot = styled("div", {
   name: "MuiAccordionActions",
@@ -13187,7 +13324,7 @@ const useUtilityClasses$1M = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getAccordionDetailsUtilityClass, classes);
+  return composeClasses$1(slots, getAccordionDetailsUtilityClass, classes);
 };
 const AccordionDetailsRoot = styled("div", {
   name: "MuiAccordionDetails",
@@ -13254,7 +13391,7 @@ const useUtilityClasses$1L = (ownerState) => {
     content: ["content", expanded && "expanded", !disableGutters && "contentGutters"],
     expandIconWrapper: ["expandIconWrapper", expanded && "expanded"]
   };
-  return composeClasses(slots, getAccordionSummaryUtilityClass, classes);
+  return composeClasses$1(slots, getAccordionSummaryUtilityClass, classes);
 };
 const AccordionSummaryRoot = styled(ButtonBase, {
   name: "MuiAccordionSummary",
@@ -13519,7 +13656,7 @@ const useUtilityClasses$1K = (ownerState) => {
   const slots = {
     root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize(align)}`, gutterBottom && "gutterBottom", noWrap && "noWrap", paragraph && "paragraph"]
   };
-  return composeClasses(slots, getTypographyUtilityClass, classes);
+  return composeClasses$1(slots, getTypographyUtilityClass, classes);
 };
 const TypographyRoot = styled("span", {
   name: "MuiTypography",
@@ -13762,7 +13899,7 @@ const useUtilityClasses$1J = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getAlertTitleUtilityClass, classes);
+  return composeClasses$1(slots, getAlertTitleUtilityClass, classes);
 };
 const AlertTitleRoot = styled(Typography, {
   name: "MuiAlertTitle",
@@ -13830,7 +13967,7 @@ const useUtilityClasses$1I = (ownerState) => {
   const slots = {
     root: ["root", `color${capitalize(color2)}`, `position${capitalize(position2)}`]
   };
-  return composeClasses(slots, getAppBarUtilityClass, classes);
+  return composeClasses$1(slots, getAppBarUtilityClass, classes);
 };
 const joinVars = (var1, var2) => var1 ? `${var1 == null ? void 0 : var1.replace(")", "")}, ${var2})` : var2;
 const AppBarRoot = styled(Paper, {
@@ -16359,6 +16496,22 @@ function getReactElementRef(element) {
   }
   return (element == null ? void 0 : element.ref) || null;
 }
+const specialProperty = "exact-prop: ​";
+function exactProp(propTypes2) {
+  if (process.env.NODE_ENV === "production") {
+    return propTypes2;
+  }
+  return {
+    ...propTypes2,
+    [specialProperty]: (props) => {
+      const unsupportedProps = Object.keys(props).filter((prop) => !propTypes2.hasOwnProperty(prop));
+      if (unsupportedProps.length > 0) {
+        return new Error(`The following props are not supported: ${unsupportedProps.map((prop) => `\`${prop}\``).join(", ")}. Please remove them.`);
+      }
+      return null;
+    }
+  };
+}
 function getContainer$1(container) {
   return typeof container === "function" ? container() : container;
 }
@@ -16461,7 +16614,7 @@ const useUtilityClasses$1H = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getPopperUtilityClass, classes);
+  return composeClasses$1(slots, getPopperUtilityClass, classes);
 };
 const defaultPopperOptions = {};
 const PopperTooltip = /* @__PURE__ */ React.forwardRef(function PopperTooltip2(props, forwardedRef) {
@@ -16973,7 +17126,7 @@ const useUtilityClasses$1G = (ownerState) => {
   const slots = {
     root: ["root", color2 !== "default" && `color${capitalize(color2)}`, !disableGutters && "gutters", inset && "inset", !disableSticky && "sticky"]
   };
-  return composeClasses(slots, getListSubheaderUtilityClass, classes);
+  return composeClasses$1(slots, getListSubheaderUtilityClass, classes);
 };
 const ListSubheaderRoot = styled("li", {
   name: "MuiListSubheader",
@@ -17165,7 +17318,7 @@ const useUtilityClasses$1F = (ownerState) => {
     track: ["track"],
     circle: ["circle", `circle${capitalize(variant)}`, disableShrink && "circleDisableShrink"]
   };
-  return composeClasses(slots, getCircularProgressUtilityClass, classes);
+  return composeClasses$1(slots, getCircularProgressUtilityClass, classes);
 };
 const CircularProgressRoot = styled("span", {
   name: "MuiCircularProgress",
@@ -17424,7 +17577,7 @@ const useUtilityClasses$1E = (ownerState) => {
     loadingIndicator: ["loadingIndicator"],
     loadingWrapper: ["loadingWrapper"]
   };
-  return composeClasses(slots, getIconButtonUtilityClass, classes);
+  return composeClasses$1(slots, getIconButtonUtilityClass, classes);
 };
 const IconButtonRoot = styled(ButtonBase, {
   name: "MuiIconButton",
@@ -17728,7 +17881,7 @@ const useUtilityClasses$1D = (ownerState) => {
     icon: ["icon", `icon${capitalize(size)}`, `iconColor${capitalize(iconColor)}`],
     deleteIcon: ["deleteIcon", `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color2)}`, `deleteIcon${capitalize(variant)}Color${capitalize(color2)}`]
   };
-  return composeClasses(slots, getChipUtilityClass, classes);
+  return composeClasses$1(slots, getChipUtilityClass, classes);
 };
 const ChipRoot = styled("div", {
   name: "MuiChip",
@@ -18593,7 +18746,7 @@ const useUtilityClasses$1C = (ownerState) => {
     root: ["root", `color${capitalize(color2)}`, disabled && "disabled", error && "error", fullWidth && "fullWidth", focused && "focused", formControl && "formControl", size && size !== "medium" && `size${capitalize(size)}`, multiline && "multiline", startAdornment && "adornedStart", endAdornment && "adornedEnd", hiddenLabel && "hiddenLabel", readOnly && "readOnly"],
     input: ["input", disabled && "disabled", type === "search" && "inputTypeSearch", multiline && "inputMultiline", size === "small" && "inputSizeSmall", hiddenLabel && "inputHiddenLabel", startAdornment && "inputAdornedStart", endAdornment && "inputAdornedEnd", readOnly && "readOnly"]
   };
-  return composeClasses(slots, getInputBaseUtilityClass, classes);
+  return composeClasses$1(slots, getInputBaseUtilityClass, classes);
 };
 const InputBaseRoot = styled("div", {
   name: "MuiInputBase",
@@ -19330,7 +19483,7 @@ const useUtilityClasses$1B = (ownerState) => {
     groupLabel: ["groupLabel"],
     groupUl: ["groupUl"]
   };
-  return composeClasses(slots, getAutocompleteUtilityClass, classes);
+  return composeClasses$1(slots, getAutocompleteUtilityClass, classes);
 };
 const AutocompleteRoot = styled("div", {
   name: "MuiAutocomplete",
@@ -20483,7 +20636,7 @@ const useUtilityClasses$1A = (ownerState) => {
     img: ["img"],
     fallback: ["fallback"]
   };
-  return composeClasses(slots, getAvatarUtilityClass, classes);
+  return composeClasses$1(slots, getAvatarUtilityClass, classes);
 };
 const AvatarRoot = styled("div", {
   name: "MuiAvatar",
@@ -20999,7 +21152,7 @@ const useUtilityClasses$1z = (ownerState) => {
   const slots = {
     root: ["root", invisible && "invisible"]
   };
-  return composeClasses(slots, getBackdropUtilityClass, classes);
+  return composeClasses$1(slots, getBackdropUtilityClass, classes);
 };
 const BackdropRoot = styled("div", {
   name: "MuiBackdrop",
@@ -21257,7 +21410,7 @@ const useUtilityClasses$1y = (ownerState) => {
     root: ["root"],
     badge: ["badge", variant, invisible && "invisible", `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color2 !== "default" && `color${capitalize(color2)}`]
   };
-  return composeClasses(slots, getBadgeUtilityClass, classes);
+  return composeClasses$1(slots, getBadgeUtilityClass, classes);
 };
 const BadgeRoot = styled("span", {
   name: "MuiBadge",
@@ -21778,7 +21931,7 @@ const useUtilityClasses$1x = (ownerState) => {
     ol: ["ol"],
     separator: ["separator"]
   };
-  return composeClasses(slots, getBreadcrumbsUtilityClass, classes);
+  return composeClasses$1(slots, getBreadcrumbsUtilityClass, classes);
 };
 const BreadcrumbsRoot = styled(Typography, {
   name: "MuiBreadcrumbs",
@@ -21993,7 +22146,7 @@ const useUtilityClasses$1w = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getCardUtilityClass, classes);
+  return composeClasses$1(slots, getCardUtilityClass, classes);
 };
 const CardRoot = styled(Paper, {
   name: "MuiCard",
@@ -22068,7 +22221,7 @@ const useUtilityClasses$1v = (ownerState) => {
     root: ["root"],
     focusHighlight: ["focusHighlight"]
   };
-  return composeClasses(slots, getCardActionAreaUtilityClass, classes);
+  return composeClasses$1(slots, getCardActionAreaUtilityClass, classes);
 };
 const CardActionAreaRoot = styled(ButtonBase, {
   name: "MuiCardActionArea",
@@ -22212,7 +22365,7 @@ const useUtilityClasses$1u = (ownerState) => {
   const slots = {
     root: ["root", !disableSpacing && "spacing"]
   };
-  return composeClasses(slots, getCardActionsUtilityClass, classes);
+  return composeClasses$1(slots, getCardActionsUtilityClass, classes);
 };
 const CardActionsRoot = styled("div", {
   name: "MuiCardActions",
@@ -22298,7 +22451,7 @@ const useUtilityClasses$1t = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getCardContentUtilityClass, classes);
+  return composeClasses$1(slots, getCardContentUtilityClass, classes);
 };
 const CardContentRoot = styled("div", {
   name: "MuiCardContent",
@@ -22375,7 +22528,7 @@ const useUtilityClasses$1s = (ownerState) => {
     title: ["title"],
     subheader: ["subheader"]
   };
-  return composeClasses(slots, getCardHeaderUtilityClass, classes);
+  return composeClasses$1(slots, getCardHeaderUtilityClass, classes);
 };
 const CardHeaderRoot = styled("div", {
   name: "MuiCardHeader",
@@ -22628,7 +22781,7 @@ const useUtilityClasses$1r = (ownerState) => {
   const slots = {
     root: ["root", isMediaComponent && "media", isImageComponent && "img"]
   };
-  return composeClasses(slots, getCardMediaUtilityClass, classes);
+  return composeClasses$1(slots, getCardMediaUtilityClass, classes);
 };
 const CardMediaRoot = styled("div", {
   name: "MuiCardMedia",
@@ -22767,7 +22920,7 @@ const useUtilityClasses$1q = (ownerState) => {
     root: ["root", checked && "checked", disabled && "disabled", edge && `edge${capitalize(edge)}`],
     input: ["input"]
   };
-  return composeClasses(slots, getSwitchBaseUtilityClass, classes);
+  return composeClasses$1(slots, getSwitchBaseUtilityClass, classes);
 };
 const SwitchBaseRoot = styled(ButtonBase, {
   name: "MuiSwitchBase"
@@ -23115,7 +23268,7 @@ const useUtilityClasses$1p = (ownerState) => {
   const slots = {
     root: ["root", indeterminate && "indeterminate", `color${capitalize(color2)}`, `size${capitalize(size)}`]
   };
-  const composedClasses = composeClasses(slots, getCheckboxUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getCheckboxUtilityClass, classes);
   return {
     ...classes,
     // forward the disabled and checked classes to the SwitchBase
@@ -23762,7 +23915,7 @@ const useUtilityClasses$1o = (ownerState) => {
   const slots = {
     root: ["root", !disableSpacing && "spacing"]
   };
-  return composeClasses(slots, getDialogActionsUtilityClass, classes);
+  return composeClasses$1(slots, getDialogActionsUtilityClass, classes);
 };
 const DialogActionsRoot = styled("div", {
   name: "MuiDialogActions",
@@ -23855,7 +24008,7 @@ const useUtilityClasses$1n = (ownerState) => {
   const slots = {
     root: ["root", dividers && "dividers"]
   };
-  return composeClasses(slots, getDialogContentUtilityClass, classes);
+  return composeClasses$1(slots, getDialogContentUtilityClass, classes);
 };
 const DialogContentRoot = styled("div", {
   name: "MuiDialogContent",
@@ -23954,7 +24107,7 @@ const useUtilityClasses$1m = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  const composedClasses = composeClasses(slots, getDialogContentTextUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getDialogContentTextUtilityClass, classes);
   return {
     ...classes,
     // forward classes to the Typography
@@ -24021,7 +24174,7 @@ const useUtilityClasses$1l = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getDialogTitleUtilityClass, classes);
+  return composeClasses$1(slots, getDialogTitleUtilityClass, classes);
 };
 const DialogTitleRoot = styled(Typography, {
   name: "MuiDialogTitle",
@@ -24100,7 +24253,7 @@ const useUtilityClasses$1k = (ownerState) => {
     root: ["root", absolute && "absolute", variant, light2 && "light", orientation === "vertical" && "vertical", flexItem && "flexItem", children && "withChildren", children && orientation === "vertical" && "withChildrenVertical", textAlign === "right" && orientation !== "vertical" && "textAlignRight", textAlign === "left" && orientation !== "vertical" && "textAlignLeft"],
     wrapper: ["wrapper", orientation === "vertical" && "wrapperVertical"]
   };
-  return composeClasses(slots, getDividerUtilityClass, classes);
+  return composeClasses$1(slots, getDividerUtilityClass, classes);
 };
 const DividerRoot = styled("div", {
   name: "MuiDivider",
@@ -25014,7 +25167,7 @@ const useUtilityClasses$1j = (ownerState) => {
     root: ["root", !open && exited && "hidden"],
     backdrop: ["backdrop"]
   };
-  return composeClasses(slots, getModalUtilityClass, classes);
+  return composeClasses$1(slots, getModalUtilityClass, classes);
 };
 const ModalRoot = styled("div", {
   name: "MuiModal",
@@ -25687,7 +25840,7 @@ const useUtilityClasses$1i = (ownerState) => {
     modal: ["modal"],
     paper: ["paper", `paperAnchor${capitalize(anchor)}`, variant !== "temporary" && `paperAnchorDocked${capitalize(anchor)}`]
   };
-  return composeClasses(slots, getDrawerUtilityClass, classes);
+  return composeClasses$1(slots, getDrawerUtilityClass, classes);
 };
 const DrawerRoot = styled(Modal, {
   name: "MuiDrawer",
@@ -26089,7 +26242,7 @@ const useUtilityClasses$1h = (ownerState) => {
   const slots = {
     root: ["root", margin2 !== "none" && `margin${capitalize(margin2)}`, fullWidth && "fullWidth"]
   };
-  return composeClasses(slots, getFormControlUtilityClasses, classes);
+  return composeClasses$1(slots, getFormControlUtilityClasses, classes);
 };
 const FormControlRoot = styled("div", {
   name: "MuiFormControl",
@@ -26358,7 +26511,7 @@ const useUtilityClasses$1g = (ownerState) => {
     label: ["label", disabled && "disabled"],
     asterisk: ["asterisk", error && "error"]
   };
-  return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
+  return composeClasses$1(slots, getFormControlLabelUtilityClasses, classes);
 };
 const FormControlLabelRoot = styled("label", {
   name: "MuiFormControlLabel",
@@ -26618,7 +26771,7 @@ const useUtilityClasses$1f = (ownerState) => {
   const slots = {
     root: ["root", row && "row", error && "error"]
   };
-  return composeClasses(slots, getFormGroupUtilityClass, classes);
+  return composeClasses$1(slots, getFormGroupUtilityClass, classes);
 };
 const FormGroupRoot = styled("div", {
   name: "MuiFormGroup",
@@ -26717,7 +26870,7 @@ const useUtilityClasses$1e = (ownerState) => {
   const slots = {
     root: ["root", disabled && "disabled", error && "error", size && `size${capitalize(size)}`, contained && "contained", focused && "focused", filled && "filled", required && "required"]
   };
-  return composeClasses(slots, getFormHelperTextUtilityClasses, classes);
+  return composeClasses$1(slots, getFormHelperTextUtilityClasses, classes);
 };
 const FormHelperTextRoot = styled("p", {
   name: "MuiFormHelperText",
@@ -26891,7 +27044,7 @@ const useUtilityClasses$1d = (ownerState) => {
     root: ["root", `color${capitalize(color2)}`, disabled && "disabled", error && "error", filled && "filled", focused && "focused", required && "required"],
     asterisk: ["asterisk", error && "error"]
   };
-  return composeClasses(slots, getFormLabelUtilityClasses, classes);
+  return composeClasses$1(slots, getFormLabelUtilityClasses, classes);
 };
 const FormLabelRoot = styled("label", {
   name: "MuiFormLabel",
@@ -27426,7 +27579,7 @@ const useUtilityClasses$1c = (ownerState) => {
     root: ["root", !disableUnderline && "underline"],
     input: ["input"]
   };
-  const composedClasses = composeClasses(slots, getInputUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getInputUtilityClass, classes);
   return {
     ...classes,
     // forward classes to the InputBase
@@ -27781,7 +27934,7 @@ const useUtilityClasses$1b = (ownerState) => {
     root: ["root", formControl && "formControl", !disableAnimation && "animated", shrink && "shrink", size && size !== "medium" && `size${capitalize(size)}`, variant],
     asterisk: [required && "asterisk"]
   };
-  const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
+  const composedClasses = composeClasses$1(slots, getInputLabelUtilityClasses, classes);
   return {
     ...classes,
     // forward the focused, disabled, etc. classes to the FormLabel
@@ -28107,7 +28260,7 @@ const useUtilityClasses$1a = (ownerState) => {
     bar1: ["bar", "bar1", `barColor${capitalize(color2)}`, (variant === "indeterminate" || variant === "query") && "bar1Indeterminate", variant === "determinate" && "bar1Determinate", variant === "buffer" && "bar1Buffer"],
     bar2: ["bar", "bar2", variant !== "buffer" && `barColor${capitalize(color2)}`, variant === "buffer" && `color${capitalize(color2)}`, (variant === "indeterminate" || variant === "query") && "bar2Indeterminate", variant === "buffer" && "bar2Buffer"]
   };
-  return composeClasses(slots, getLinearProgressUtilityClass, classes);
+  return composeClasses$1(slots, getLinearProgressUtilityClass, classes);
 };
 const getColorShade = (theme, color2) => {
   if (theme.vars) {
@@ -28505,7 +28658,7 @@ const useUtilityClasses$19 = (ownerState) => {
   const slots = {
     root: ["root", `underline${capitalize(underline)}`, component === "button" && "button", focusVisible && "focusVisible"]
   };
-  return composeClasses(slots, getLinkUtilityClass, classes);
+  return composeClasses$1(slots, getLinkUtilityClass, classes);
 };
 const LinkRoot = styled(Typography, {
   name: "MuiLink",
@@ -28775,7 +28928,7 @@ const useUtilityClasses$18 = (ownerState) => {
   const slots = {
     root: ["root", !disablePadding && "padding", dense && "dense", subheader && "subheader"]
   };
-  return composeClasses(slots, getListUtilityClass, classes);
+  return composeClasses$1(slots, getListUtilityClass, classes);
 };
 const ListRoot = styled("ul", {
   name: "MuiList",
@@ -28914,7 +29067,7 @@ const useUtilityClasses$17 = (ownerState) => {
   const slots = {
     root: ["root", dense && "dense", !disableGutters && "gutters", divider && "divider", disabled && "disabled", alignItems === "flex-start" && "alignItemsFlexStart", selected && "selected"]
   };
-  const composedClasses = composeClasses(slots, getListItemButtonUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getListItemButtonUtilityClass, classes);
   return {
     ...classes,
     ...composedClasses
@@ -29151,7 +29304,7 @@ const useUtilityClasses$16 = (ownerState) => {
   const slots = {
     root: ["root", disableGutters && "disableGutters"]
   };
-  return composeClasses(slots, getListItemSecondaryActionClassesUtilityClass, classes);
+  return composeClasses$1(slots, getListItemSecondaryActionClassesUtilityClass, classes);
 };
 const ListItemSecondaryActionRoot = styled("div", {
   name: "MuiListItemSecondaryAction",
@@ -29241,7 +29394,7 @@ const useUtilityClasses$15 = (ownerState) => {
     root: ["root", dense && "dense", !disableGutters && "gutters", !disablePadding && "padding", divider && "divider", alignItems === "flex-start" && "alignItemsFlexStart", hasSecondaryAction && "secondaryAction"],
     container: ["container"]
   };
-  return composeClasses(slots, getListItemUtilityClass, classes);
+  return composeClasses$1(slots, getListItemUtilityClass, classes);
 };
 const ListItemRoot = styled("div", {
   name: "MuiListItem",
@@ -29585,7 +29738,7 @@ const useUtilityClasses$14 = (ownerState) => {
   const slots = {
     root: ["root", alignItems === "flex-start" && "alignItemsFlexStart"]
   };
-  return composeClasses(slots, getListItemIconUtilityClass, classes);
+  return composeClasses$1(slots, getListItemIconUtilityClass, classes);
 };
 const ListItemIconRoot = styled("div", {
   name: "MuiListItemIcon",
@@ -29674,7 +29827,7 @@ const useUtilityClasses$13 = (ownerState) => {
     primary: ["primary"],
     secondary: ["secondary"]
   };
-  return composeClasses(slots, getListItemTextUtilityClass, classes);
+  return composeClasses$1(slots, getListItemTextUtilityClass, classes);
 };
 const ListItemTextRoot = styled("div", {
   name: "MuiListItemText",
@@ -30157,7 +30310,7 @@ const useUtilityClasses$12 = (ownerState) => {
     root: ["root"],
     paper: ["paper"]
   };
-  return composeClasses(slots, getPopoverUtilityClass, classes);
+  return composeClasses$1(slots, getPopoverUtilityClass, classes);
 };
 const PopoverRoot = styled(Modal, {
   name: "MuiPopover",
@@ -30675,7 +30828,7 @@ const useUtilityClasses$11 = (ownerState) => {
     paper: ["paper"],
     list: ["list"]
   };
-  return composeClasses(slots, getMenuUtilityClass, classes);
+  return composeClasses$1(slots, getMenuUtilityClass, classes);
 };
 const MenuRoot = styled(Popover, {
   shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === "classes",
@@ -30992,7 +31145,7 @@ const useUtilityClasses$10 = (ownerState) => {
   const slots = {
     root: ["root", dense && "dense", disabled && "disabled", !disableGutters && "gutters", divider && "divider", selected && "selected"]
   };
-  const composedClasses = composeClasses(slots, getMenuItemUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getMenuItemUtilityClass, classes);
   return {
     ...classes,
     ...composedClasses
@@ -31252,7 +31405,7 @@ const useUtilityClasses$$ = (ownerState) => {
     dotActive: ["dotActive"],
     progress: ["progress"]
   };
-  return composeClasses(slots, getMobileStepperUtilityClass, classes);
+  return composeClasses$1(slots, getMobileStepperUtilityClass, classes);
 };
 const MobileStepperRoot = styled(Paper, {
   name: "MuiMobileStepper",
@@ -31688,7 +31841,7 @@ const useUtilityClasses$_ = (ownerState) => {
     }[type]],
     icon: ["icon"]
   };
-  return composeClasses(slots, getPaginationItemUtilityClass, classes);
+  return composeClasses$1(slots, getPaginationItemUtilityClass, classes);
 };
 const PaginationItemEllipsis = styled("div", {
   name: "MuiPaginationItem",
@@ -32117,7 +32270,7 @@ const useUtilityClasses$Z = (ownerState) => {
     root: ["root", variant],
     ul: ["ul"]
   };
-  return composeClasses(slots, getPaginationUtilityClass, classes);
+  return composeClasses$1(slots, getPaginationUtilityClass, classes);
 };
 const PaginationRoot = styled("nav", {
   name: "MuiPagination",
@@ -32440,7 +32593,7 @@ const useUtilityClasses$Y = (ownerState) => {
   };
   return {
     ...classes,
-    ...composeClasses(slots, getRadioUtilityClass, classes)
+    ...composeClasses$1(slots, getRadioUtilityClass, classes)
   };
 };
 const RadioRoot = styled(SwitchBase, {
@@ -32727,7 +32880,7 @@ const useUtilityClasses$X = (props) => {
   const slots = {
     root: ["root", row && "row", error && "error"]
   };
-  return composeClasses(slots, getRadioGroupUtilityClass, classes);
+  return composeClasses$1(slots, getRadioGroupUtilityClass, classes);
 };
 const RadioGroup = /* @__PURE__ */ React.forwardRef(function RadioGroup2(props, ref) {
   const {
@@ -32835,7 +32988,7 @@ const useUtilityClasses$W = (ownerState) => {
     select: ["select", variant, disabled && "disabled", multiple && "multiple", error && "error"],
     icon: ["icon", `icon${capitalize(variant)}`, open && "iconOpen", disabled && "disabled"]
   };
-  return composeClasses(slots, getNativeSelectUtilityClasses, classes);
+  return composeClasses$1(slots, getNativeSelectUtilityClasses, classes);
 };
 const StyledSelectSelect = styled("select", {
   name: "MuiNativeSelect"
@@ -33137,7 +33290,7 @@ const useUtilityClasses$V = (ownerState) => {
     icon: ["icon", `icon${capitalize(variant)}`, open && "iconOpen", disabled && "disabled"],
     nativeInput: ["nativeInput"]
   };
-  return composeClasses(slots, getSelectUtilityClasses, classes);
+  return composeClasses$1(slots, getSelectUtilityClasses, classes);
 };
 const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props, ref) {
   var _a, _b, _c, _d;
@@ -33700,7 +33853,7 @@ const useUtilityClasses$U = (ownerState) => {
     root: ["root", !disableUnderline && "underline", startAdornment && "adornedStart", endAdornment && "adornedEnd", size === "small" && `size${capitalize(size)}`, hiddenLabel && "hiddenLabel", multiline && "multiline"],
     input: ["input"]
   };
-  const composedClasses = composeClasses(slots, getFilledInputUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getFilledInputUtilityClass, classes);
   return {
     ...classes,
     // forward classes to the InputBase
@@ -34343,7 +34496,7 @@ const useUtilityClasses$T = (ownerState) => {
     notchedOutline: ["notchedOutline"],
     input: ["input"]
   };
-  const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getOutlinedInputUtilityClass, classes);
   return {
     ...classes,
     // forward classes to the InputBase
@@ -34751,7 +34904,7 @@ const useUtilityClasses$S = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);
+  const composedClasses = composeClasses$1(slots, getSelectUtilityClasses, classes);
   return {
     ...classes,
     ...composedClasses
@@ -35036,7 +35189,7 @@ const useUtilityClasses$R = (ownerState) => {
   const slots = {
     root: ["root", variant, animation, hasChildren && "withChildren", hasChildren && !width2 && "fitContent", hasChildren && !height2 && "heightAuto"]
   };
-  return composeClasses(slots, getSkeletonUtilityClass, classes);
+  return composeClasses$1(slots, getSkeletonUtilityClass, classes);
 };
 const pulseKeyframe = keyframes`
   0% {
@@ -35393,7 +35546,7 @@ const useUtilityClasses$Q = (ownerState) => {
     action: ["action"],
     message: ["message"]
   };
-  return composeClasses(slots, getSnackbarContentUtilityClass, classes);
+  return composeClasses$1(slots, getSnackbarContentUtilityClass, classes);
 };
 const SnackbarContentRoot = styled(Paper, {
   name: "MuiSnackbarContent",
@@ -35508,7 +35661,7 @@ const useUtilityClasses$P = (ownerState) => {
   const slots = {
     root: ["root", `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`]
   };
-  return composeClasses(slots, getSnackbarUtilityClass, classes);
+  return composeClasses$1(slots, getSnackbarUtilityClass, classes);
 };
 const SnackbarRoot = styled("div", {
   name: "MuiSnackbar",
@@ -35991,7 +36144,7 @@ const useUtilityClasses$O = (ownerState) => {
   const slots = {
     root: ["root", orientation, alternativeLabel && "alternativeLabel", completed && "completed"]
   };
-  return composeClasses(slots, getStepUtilityClass, classes);
+  return composeClasses$1(slots, getStepUtilityClass, classes);
 };
 const StepRoot = styled("div", {
   name: "MuiStep",
@@ -36165,7 +36318,7 @@ const useUtilityClasses$N = (ownerState) => {
     root: ["root", active && "active", completed && "completed", error && "error"],
     text: ["text"]
   };
-  return composeClasses(slots, getStepIconUtilityClass, classes);
+  return composeClasses$1(slots, getStepIconUtilityClass, classes);
 };
 const StepIconRoot = styled(SvgIcon, {
   name: "MuiStepIcon",
@@ -36317,7 +36470,7 @@ const useUtilityClasses$M = (ownerState) => {
     iconContainer: ["iconContainer", active && "active", completed && "completed", error && "error", disabled && "disabled", alternativeLabel && "alternativeLabel"],
     labelContainer: ["labelContainer", alternativeLabel && "alternativeLabel"]
   };
-  return composeClasses(slots, getStepLabelUtilityClass, classes);
+  return composeClasses$1(slots, getStepLabelUtilityClass, classes);
 };
 const StepLabelRoot = styled("span", {
   name: "MuiStepLabel",
@@ -36575,7 +36728,7 @@ const useUtilityClasses$L = (ownerState) => {
     root: ["root", orientation],
     touchRipple: ["touchRipple"]
   };
-  return composeClasses(slots, getStepButtonUtilityClass, classes);
+  return composeClasses$1(slots, getStepButtonUtilityClass, classes);
 };
 const StepButtonRoot = styled(ButtonBase, {
   name: "MuiStepButton",
@@ -36704,7 +36857,7 @@ const useUtilityClasses$K = (ownerState) => {
     root: ["root", orientation, alternativeLabel && "alternativeLabel", active && "active", completed && "completed", disabled && "disabled"],
     line: ["line", `line${capitalize(orientation)}`]
   };
-  return composeClasses(slots, getStepConnectorUtilityClass, classes);
+  return composeClasses$1(slots, getStepConnectorUtilityClass, classes);
 };
 const StepConnectorRoot = styled("div", {
   name: "MuiStepConnector",
@@ -36839,7 +36992,7 @@ const useUtilityClasses$J = (ownerState) => {
   const slots = {
     root: ["root", orientation, nonLinear && "nonLinear", alternativeLabel && "alternativeLabel"]
   };
-  return composeClasses(slots, getStepperUtilityClass, classes);
+  return composeClasses$1(slots, getStepperUtilityClass, classes);
 };
 const StepperRoot = styled("div", {
   name: "MuiStepper",
@@ -37002,7 +37155,7 @@ const useUtilityClasses$I = (ownerState) => {
     track: ["track"],
     input: ["input"]
   };
-  const composedClasses = composeClasses(slots, getSwitchUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getSwitchUtilityClass, classes);
   return {
     ...classes,
     // forward the disabled and checked classes to the SwitchBase
@@ -37393,7 +37546,7 @@ const useUtilityClasses$H = (ownerState) => {
     root: ["root", icon && label && "labelIcon", `textColor${capitalize(textColor)}`, fullWidth && "fullWidth", wrapped && "wrapped", selected && "selected", disabled && "disabled"],
     icon: ["iconWrapper", "icon"]
   };
-  return composeClasses(slots, getTabUtilityClass, classes);
+  return composeClasses$1(slots, getTabUtilityClass, classes);
 };
 const TabRoot = styled(ButtonBase, {
   name: "MuiTab",
@@ -37717,7 +37870,7 @@ const useUtilityClasses$G = (ownerState) => {
   const slots = {
     root: ["root", stickyHeader && "stickyHeader"]
   };
-  return composeClasses(slots, getTableUtilityClass, classes);
+  return composeClasses$1(slots, getTableUtilityClass, classes);
 };
 const TableRoot = styled("table", {
   name: "MuiTable",
@@ -37847,7 +38000,7 @@ const useUtilityClasses$F = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getTableBodyUtilityClass, classes);
+  return composeClasses$1(slots, getTableBodyUtilityClass, classes);
 };
 const TableBodyRoot = styled("tbody", {
   name: "MuiTableBody",
@@ -37929,7 +38082,7 @@ const useUtilityClasses$E = (ownerState) => {
   const slots = {
     root: ["root", variant, stickyHeader && "stickyHeader", align !== "inherit" && `align${capitalize(align)}`, padding2 !== "normal" && `padding${capitalize(padding2)}`, `size${capitalize(size)}`]
   };
-  return composeClasses(slots, getTableCellUtilityClass, classes);
+  return composeClasses$1(slots, getTableCellUtilityClass, classes);
 };
 const TableCellRoot = styled("td", {
   name: "MuiTableCell",
@@ -38175,7 +38328,7 @@ const useUtilityClasses$D = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getTableContainerUtilityClass, classes);
+  return composeClasses$1(slots, getTableContainerUtilityClass, classes);
 };
 const TableContainerRoot = styled("div", {
   name: "MuiTableContainer",
@@ -38245,7 +38398,7 @@ const useUtilityClasses$C = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getTableFooterUtilityClass, classes);
+  return composeClasses$1(slots, getTableFooterUtilityClass, classes);
 };
 const TableFooterRoot = styled("tfoot", {
   name: "MuiTableFooter",
@@ -38322,7 +38475,7 @@ const useUtilityClasses$B = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getTableHeadUtilityClass, classes);
+  return composeClasses$1(slots, getTableHeadUtilityClass, classes);
 };
 const TableHeadRoot = styled("thead", {
   name: "MuiTableHead",
@@ -38401,7 +38554,7 @@ const useUtilityClasses$A = (ownerState) => {
   const slots = {
     root: ["root", !disableGutters && "gutters", variant]
   };
-  return composeClasses(slots, getToolbarUtilityClass, classes);
+  return composeClasses$1(slots, getToolbarUtilityClass, classes);
 };
 const ToolbarRoot = styled("div", {
   name: "MuiToolbar",
@@ -38520,7 +38673,7 @@ const useUtilityClasses$z = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getTablePaginationActionsUtilityClass, classes);
+  return composeClasses$1(slots, getTablePaginationActionsUtilityClass, classes);
 };
 const TablePaginationActionsRoot = styled("div", {
   name: "MuiTablePaginationActions",
@@ -38843,7 +38996,7 @@ const useUtilityClasses$y = (ownerState) => {
     displayedRows: ["displayedRows"],
     actions: ["actions"]
   };
-  return composeClasses(slots, getTablePaginationUtilityClass, classes);
+  return composeClasses$1(slots, getTablePaginationUtilityClass, classes);
 };
 const TablePagination = /* @__PURE__ */ React.forwardRef(function TablePagination2(inProps, ref) {
   const props = useDefaultProps({
@@ -39216,7 +39369,7 @@ const useUtilityClasses$x = (ownerState) => {
   const slots = {
     root: ["root", selected && "selected", hover && "hover", head && "head", footer && "footer"]
   };
-  return composeClasses(slots, getTableRowUtilityClass, classes);
+  return composeClasses$1(slots, getTableRowUtilityClass, classes);
 };
 const TableRowRoot = styled("tr", {
   name: "MuiTableRow",
@@ -39331,7 +39484,7 @@ const useUtilityClasses$w = (ownerState) => {
     root: ["root", active && "active", `direction${capitalize(direction)}`],
     icon: ["icon", `iconDirection${capitalize(direction)}`]
   };
-  return composeClasses(slots, getTableSortLabelUtilityClass, classes);
+  return composeClasses$1(slots, getTableSortLabelUtilityClass, classes);
 };
 const TableSortLabelRoot = styled(ButtonBase, {
   name: "MuiTableSortLabel",
@@ -39529,7 +39682,7 @@ const useUtilityClasses$v = (ownerState) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getTextFieldUtilityClass, classes);
+  return composeClasses$1(slots, getTextFieldUtilityClass, classes);
 };
 const TextFieldRoot = styled(FormControl, {
   name: "MuiTextField",
@@ -39918,6 +40071,50 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes = {
    */
   variant: PropTypes.oneOf(["filled", "outlined", "standard"])
 } : void 0;
+function resolveProps(defaultProps2, props, mergeClassNameAndStyle = false) {
+  const output = {
+    ...props
+  };
+  for (const key in defaultProps2) {
+    if (Object.prototype.hasOwnProperty.call(defaultProps2, key)) {
+      const propName = key;
+      if (propName === "components" || propName === "slots") {
+        output[propName] = {
+          ...defaultProps2[propName],
+          ...output[propName]
+        };
+      } else if (propName === "componentsProps" || propName === "slotProps") {
+        const defaultSlotProps = defaultProps2[propName];
+        const slotProps = props[propName];
+        if (!slotProps) {
+          output[propName] = defaultSlotProps || {};
+        } else if (!defaultSlotProps) {
+          output[propName] = slotProps;
+        } else {
+          output[propName] = {
+            ...slotProps
+          };
+          for (const slotKey in defaultSlotProps) {
+            if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
+              const slotPropName = slotKey;
+              output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName], mergeClassNameAndStyle);
+            }
+          }
+        }
+      } else if (propName === "className" && mergeClassNameAndStyle && props.className) {
+        output.className = clsx(defaultProps2 == null ? void 0 : defaultProps2.className, props == null ? void 0 : props.className);
+      } else if (propName === "style" && mergeClassNameAndStyle && props.style) {
+        output.style = {
+          ...defaultProps2 == null ? void 0 : defaultProps2.style,
+          ...props == null ? void 0 : props.style
+        };
+      } else if (output[propName] === void 0) {
+        output[propName] = defaultProps2[propName];
+      }
+    }
+  }
+  return output;
+}
 function getToggleButtonUtilityClass(slot) {
   return generateUtilityClass("MuiToggleButton", slot);
 }
@@ -39951,7 +40148,7 @@ const useUtilityClasses$u = (ownerState) => {
   const slots = {
     root: ["root", selected && "selected", disabled && "disabled", fullWidth && "fullWidth", `size${capitalize(size)}`, color2]
   };
-  return composeClasses(slots, getToggleButtonUtilityClass, classes);
+  return composeClasses$1(slots, getToggleButtonUtilityClass, classes);
 };
 const ToggleButtonRoot = styled(ButtonBase, {
   name: "MuiToggleButton",
@@ -40206,7 +40403,7 @@ const useUtilityClasses$t = (ownerState) => {
     lastButton: ["lastButton"],
     middleButton: ["middleButton"]
   };
-  return composeClasses(slots, getToggleButtonGroupUtilityClass, classes);
+  return composeClasses$1(slots, getToggleButtonGroupUtilityClass, classes);
 };
 const ToggleButtonGroupRoot = styled("div", {
   name: "MuiToggleButtonGroup",
@@ -40475,7 +40672,7 @@ const useUtilityClasses$s = (ownerState) => {
     tooltip: ["tooltip", arrow2 && "tooltipArrow", touch && "touch", `tooltipPlacement${capitalize(placement.split("-")[0])}`],
     arrow: ["arrow"]
   };
-  return composeClasses(slots, getTooltipUtilityClass, classes);
+  return composeClasses$1(slots, getTooltipUtilityClass, classes);
 };
 const TooltipPopper = styled(Popper2, {
   name: "MuiTooltip",
@@ -41518,7 +41715,7 @@ const useUtilityClasses$r = (ownerState) => {
     loadingIndicator: ["loadingIndicator"],
     loadingWrapper: ["loadingWrapper"]
   };
-  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getButtonUtilityClass, classes);
   return {
     ...classes,
     // forward the focused, disabled, etc. classes to the ButtonBase
@@ -42348,7 +42545,7 @@ const useUtilityClasses$q = (ownerState) => {
     message: ["message"],
     action: ["action"]
   };
-  return composeClasses(slots, getAlertUtilityClass, classes);
+  return composeClasses$1(slots, getAlertUtilityClass, classes);
 };
 const AlertRoot = styled(Paper, {
   name: "MuiAlert",
@@ -44698,7 +44895,7 @@ const useUtilityClasses$p = (classes) => {
     title: ["title"],
     content: ["content"]
   };
-  return composeClasses(slots, getPickersToolbarUtilityClass, classes);
+  return composeClasses$1(slots, getPickersToolbarUtilityClass, classes);
 };
 const PickersToolbarRoot = styled("div", {
   name: "MuiPickersToolbar",
@@ -45176,7 +45373,7 @@ const useUtilityClasses$o = (classes) => {
     root: ["root"],
     title: ["title"]
   };
-  return composeClasses(slots, getDatePickerToolbarUtilityClass, classes);
+  return composeClasses$1(slots, getDatePickerToolbarUtilityClass, classes);
 };
 const DatePickerToolbarRoot = styled(PickersToolbar, {
   name: "MuiDatePickerToolbar",
@@ -45457,7 +45654,7 @@ const useUtilityClasses$n = (classes) => {
     root: ["root"],
     paper: ["paper"]
   };
-  return composeClasses(slots, getPickerPopperUtilityClass, classes);
+  return composeClasses$1(slots, getPickerPopperUtilityClass, classes);
 };
 const PickerPopperRoot = styled(Popper2, {
   name: "MuiPickerPopper",
@@ -46648,7 +46845,7 @@ const useUtilityClasses$m = (classes, ownerState) => {
     landscape: ["landscape"],
     shortcuts: ["shortcuts"]
   };
-  return composeClasses(slots, getPickersLayoutUtilityClass, classes);
+  return composeClasses$1(slots, getPickersLayoutUtilityClass, classes);
 };
 const usePickerLayout = (props) => {
   const {
@@ -46722,7 +46919,7 @@ const useUtilityClasses$l = (classes, ownerState) => {
     root: ["root", pickerOrientation === "landscape" && "landscape"],
     contentWrapper: ["contentWrapper"]
   };
-  return composeClasses(slots, getPickersLayoutUtilityClass, classes);
+  return composeClasses$1(slots, getPickersLayoutUtilityClass, classes);
 };
 const PickersLayoutRoot = styled("div", {
   name: "MuiPickersLayout",
@@ -48786,7 +48983,7 @@ const useUtilityClasses$k = (ownerState) => {
   const slots = {
     root: ["root", disablePointerEvents && "disablePointerEvents", position2 && `position${capitalize(position2)}`, variant, hiddenLabel && "hiddenLabel", size && `size${capitalize(size)}`]
   };
-  return composeClasses(slots, getInputAdornmentUtilityClass, classes);
+  return composeClasses$1(slots, getInputAdornmentUtilityClass, classes);
 };
 const InputAdornmentRoot = styled("div", {
   name: "MuiInputAdornment",
@@ -49038,7 +49235,7 @@ const useUtilityClasses$j = (classes) => {
     section: ["section"],
     sectionContent: ["sectionContent"]
   };
-  return composeClasses(slots, getPickersSectionListUtilityClass, classes);
+  return composeClasses$1(slots, getPickersSectionListUtilityClass, classes);
 };
 function PickersSection(props) {
   const {
@@ -49430,7 +49627,7 @@ const useUtilityClasses$i = (classes, ownerState) => {
     sectionAfter: ["sectionAfter"],
     activeBar: ["activeBar"]
   };
-  return composeClasses(slots, getPickersInputBaseUtilityClass, classes);
+  return composeClasses$1(slots, getPickersInputBaseUtilityClass, classes);
 };
 function resolveSectionElementWidth(sectionElement, rootRef, index, dateRangePosition) {
   var _a;
@@ -49902,7 +50099,7 @@ const useUtilityClasses$h = (classes) => {
     notchedOutline: ["notchedOutline"],
     input: ["input"]
   };
-  const composedClasses = composeClasses(slots, getPickersOutlinedInputUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getPickersOutlinedInputUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
 const PickersOutlinedInput = /* @__PURE__ */ React.forwardRef(function PickersOutlinedInput2(inProps, ref) {
@@ -50189,7 +50386,7 @@ const useUtilityClasses$g = (classes, ownerState) => {
     root: ["root", inputHasUnderline && "underline"],
     input: ["input"]
   };
-  const composedClasses = composeClasses(slots, getPickersFilledInputUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getPickersFilledInputUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
 const PickersFilledInput = /* @__PURE__ */ React.forwardRef(function PickersFilledInput2(inProps, ref) {
@@ -50403,7 +50600,7 @@ const useUtilityClasses$f = (classes, ownerState) => {
     root: ["root", !inputHasUnderline && "underline"],
     input: ["input"]
   };
-  const composedClasses = composeClasses(slots, getPickersInputUtilityClass, classes);
+  const composedClasses = composeClasses$1(slots, getPickersInputUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
 const PickersInput = /* @__PURE__ */ React.forwardRef(function PickersInput2(inProps, ref) {
@@ -50533,7 +50730,7 @@ const useUtilityClasses$e = (classes, ownerState) => {
   const slots = {
     root: ["root", isFieldFocused2 && !isFieldDisabled && "focused", isFieldDisabled && "disabled", isFieldRequired && "required"]
   };
-  return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
+  return composeClasses$1(slots, getPickersTextFieldUtilityClass, classes);
 };
 const PickersTextField = /* @__PURE__ */ React.forwardRef(function PickersTextField2(inProps, ref) {
   const props = useThemeProps$2({
@@ -51579,7 +51776,7 @@ const useUtilityClasses$d = (classes) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getPickersFadeTransitionGroupUtilityClass, classes);
+  return composeClasses$1(slots, getPickersFadeTransitionGroupUtilityClass, classes);
 };
 const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
   name: "MuiPickersFadeTransitionGroup",
@@ -51671,7 +51868,7 @@ const useUtilityClasses$c = (classes, ownerState) => {
     root: ["root", isDaySelected && !isHiddenDaySpacingFiller && "selected", isDayDisabled && "disabled", !disableMargin && "dayWithMargin", !disableHighlightToday && isDayCurrent && "today", isDayOutsideMonth && showDaysOutsideCurrentMonth && "dayOutsideMonth", isHiddenDaySpacingFiller && "hiddenDaySpacingFiller"],
     hiddenDaySpacingFiller: ["hiddenDaySpacingFiller"]
   };
-  return composeClasses(slots, getPickersDayUtilityClass, classes);
+  return composeClasses$1(slots, getPickersDayUtilityClass, classes);
 };
 const styleArg = ({
   theme
@@ -52013,7 +52210,7 @@ const useUtilityClasses$b = (classes, ownerState) => {
     enter: [`slideEnter-${slideDirection}`],
     exitActive: [`slideExitActiveLeft-${slideDirection}`]
   };
-  return composeClasses(slots, getPickersSlideTransitionUtilityClass, classes);
+  return composeClasses$1(slots, getPickersSlideTransitionUtilityClass, classes);
 };
 const PickersSlideTransitionRoot = styled(TransitionGroup, {
   name: "MuiPickersSlideTransition",
@@ -52144,7 +52341,7 @@ const useUtilityClasses$a = (classes) => {
     weekNumberLabel: ["weekNumberLabel"],
     weekNumber: ["weekNumber"]
   };
-  return composeClasses(slots, getDayCalendarUtilityClass, classes);
+  return composeClasses$1(slots, getDayCalendarUtilityClass, classes);
 };
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 2) * 6;
 const PickersCalendarDayRoot = styled("div", {
@@ -52538,7 +52735,7 @@ const useUtilityClasses$9 = (classes, ownerState) => {
   const slots = {
     button: ["button", ownerState.isMonthDisabled && "disabled", ownerState.isMonthSelected && "selected"]
   };
-  return composeClasses(slots, getMonthCalendarUtilityClass, classes);
+  return composeClasses$1(slots, getMonthCalendarUtilityClass, classes);
 };
 const DefaultMonthButton = styled("button", {
   name: "MuiMonthCalendar",
@@ -52637,7 +52834,7 @@ const useUtilityClasses$8 = (classes) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getMonthCalendarUtilityClass, classes);
+  return composeClasses$1(slots, getMonthCalendarUtilityClass, classes);
 };
 function useMonthCalendarDefaultizedProps(props, name) {
   const themeProps = useThemeProps$2({
@@ -52974,7 +53171,7 @@ const useUtilityClasses$7 = (classes, ownerState) => {
   const slots = {
     button: ["button", ownerState.isYearDisabled && "disabled", ownerState.isYearSelected && "selected"]
   };
-  return composeClasses(slots, getYearCalendarUtilityClass, classes);
+  return composeClasses$1(slots, getYearCalendarUtilityClass, classes);
 };
 const DefaultYearButton = styled("button", {
   name: "MuiYearCalendar",
@@ -53073,7 +53270,7 @@ const useUtilityClasses$6 = (classes) => {
   const slots = {
     root: ["root"]
   };
-  return composeClasses(slots, getYearCalendarUtilityClass, classes);
+  return composeClasses$1(slots, getYearCalendarUtilityClass, classes);
 };
 function useYearCalendarDefaultizedProps(props, name) {
   const themeProps = useThemeProps$2({
@@ -53490,7 +53687,7 @@ const useUtilityClasses$5 = (classes) => {
     leftArrowIcon: ["leftArrowIcon"],
     rightArrowIcon: ["rightArrowIcon"]
   };
-  return composeClasses(slots, getPickersArrowSwitcherUtilityClass, classes);
+  return composeClasses$1(slots, getPickersArrowSwitcherUtilityClass, classes);
 };
 const PickersArrowSwitcher = /* @__PURE__ */ React.forwardRef(function PickersArrowSwitcher2(inProps, ref) {
   const isRtl = useRtl();
@@ -53638,7 +53835,7 @@ const useUtilityClasses$4 = (classes) => {
     switchViewButton: ["switchViewButton"],
     switchViewIcon: ["switchViewIcon"]
   };
-  return composeClasses(slots, getPickersCalendarHeaderUtilityClass, classes);
+  return composeClasses$1(slots, getPickersCalendarHeaderUtilityClass, classes);
 };
 const PickersCalendarHeaderRoot = styled("div", {
   name: "MuiPickersCalendarHeader",
@@ -53881,7 +54078,7 @@ const useUtilityClasses$3 = (classes) => {
     root: ["root"],
     viewTransitionContainer: ["viewTransitionContainer"]
   };
-  return composeClasses(slots, getDateCalendarUtilityClass, classes);
+  return composeClasses$1(slots, getDateCalendarUtilityClass, classes);
 };
 function useDateCalendarDefaultizedProps(props, name) {
   const themeProps = useThemeProps$2({
@@ -54878,7 +55075,7 @@ const useUtilityClasses$2 = (ownerState) => {
     container: ["container", `scroll${capitalize(scroll)}`],
     paper: ["paper", `paperScroll${capitalize(scroll)}`, `paperWidth${capitalize(String(maxWidth2))}`, fullWidth && "paperFullWidth", fullScreen && "paperFullScreen"]
   };
-  return composeClasses(slots, getDialogUtilityClass, classes);
+  return composeClasses$1(slots, getDialogUtilityClass, classes);
 };
 const DialogRoot = styled(Modal, {
   name: "MuiDialog",
@@ -56289,6 +56486,7 @@ const Dropzone = ({
 };
 const EllipsisWithTooltip = ({
   children,
+  slotProps = {},
   tooltipProps,
   typographyProps
 }) => {
@@ -56315,20 +56513,20 @@ const EllipsisWithTooltip = ({
     };
   }, []);
   return /* @__PURE__ */ jsx(
-    Tooltip$1,
+    Tooltip,
     {
       disableHoverListener: !isTextEllipsized,
       title: children,
-      ...tooltipProps,
+      ...slotProps.tooltip ?? tooltipProps,
       children: /* @__PURE__ */ jsx(
-        Typography$1,
+        Typography,
         {
           ref: textRef,
           noWrap: true,
           overflow: "hidden",
           textOverflow: "ellipsis",
-          ...typographyProps,
           maxWidth: "100%",
+          ...slotProps.text ?? typographyProps,
           children
         }
       )
@@ -56337,15 +56535,15 @@ const EllipsisWithTooltip = ({
 };
 const EmptyState = ({
   image,
-  imageProps,
   imageSrc,
   title,
   description,
-  descriptionProps,
   footer,
-  svgProps,
-  titleProps,
   imageHeight = 200,
+  slotProps = {},
+  imageProps,
+  descriptionProps,
+  titleProps,
   ...otherProps
 }) => {
   return /* @__PURE__ */ jsxs(
@@ -56355,10 +56553,35 @@ const EmptyState = ({
       alignItems: "center",
       margin: "0 auto",
       ...otherProps,
+      ...slotProps.root,
       children: [
-        /* @__PURE__ */ jsx(Box, { height: imageHeight, width: "auto", children: image ?? /* @__PURE__ */ jsx("img", { src: imageSrc, height: "100%", ...imageProps }) }),
-        /* @__PURE__ */ jsx(Typography, { variant: "h2", fontWeight: 500, mt: 3, ...titleProps, children: title }),
-        description ? /* @__PURE__ */ jsx(Typography, { color: "textSecondary", mt: 2, ...descriptionProps, children: description }) : null,
+        /* @__PURE__ */ jsx(Box, { height: imageHeight, width: "auto", children: image ?? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageSrc,
+            height: "100%",
+            ...slotProps.image ?? imageProps
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h2",
+            fontWeight: 500,
+            mt: 3,
+            ...slotProps.title ?? titleProps,
+            children: title
+          }
+        ),
+        description ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            color: "textSecondary",
+            mt: 2,
+            ...slotProps.description ?? descriptionProps,
+            children: description
+          }
+        ) : null,
         footer ? /* @__PURE__ */ jsx(Box, { mt: 3, children: footer }) : null
       ]
     }
@@ -56814,36 +57037,46 @@ const Heading = ({
   title,
   IconComponent,
   iconColor,
-  iconProps,
   iconSize = 28,
+  slotProps = {},
+  iconProps,
   titleProps,
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, ...otherProps, children: [
-    IconComponent ? /* @__PURE__ */ jsx(
-      IconComponent,
-      {
-        sx: {
-          fontSize: iconSize,
-          padding: "2px",
-          borderRadius: 1,
-          color: iconColor == null ? void 0 : iconColor[500],
-          backgroundColor: iconColor == null ? void 0 : iconColor[50]
-        },
-        ...iconProps
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        component: (titleProps == null ? void 0 : titleProps.component) ?? "h3",
-        variant: (titleProps == null ? void 0 : titleProps.variant) ?? "h2",
-        fontWeight: (titleProps == null ? void 0 : titleProps.fontWeight) ?? 400,
-        ...titleProps,
-        children: title
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      spacing: 1,
+      ...otherProps,
+      ...slotProps.root,
+      children: [
+        IconComponent ? /* @__PURE__ */ jsx(
+          IconComponent,
+          {
+            sx: {
+              fontSize: iconSize,
+              padding: "2px",
+              borderRadius: 1,
+              color: iconColor == null ? void 0 : iconColor[500],
+              backgroundColor: iconColor == null ? void 0 : iconColor[50]
+            },
+            ...slotProps.icon ?? iconProps
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "h3",
+            variant: "h2",
+            ...slotProps.text ?? titleProps,
+            children: title
+          }
+        )
+      ]
+    }
+  );
 };
 const AddPhotoAlternateIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8zM5 19l3-4 2 3 3-4 4 5z"
@@ -57057,21 +57290,39 @@ const ImagePicker = ({
     }
   );
 };
-const Loader = ({}) => {
-  return /* @__PURE__ */ jsx(Box, { className: "cs-loader", color: "primary.main", children: /* @__PURE__ */ jsxs(Box, { className: "cs-loader-inner", children: [
+const Loader = (props) => {
+  return /* @__PURE__ */ jsx(Box, { className: "cs-loader", color: "primary.main", ...props, children: /* @__PURE__ */ jsxs(Box, { className: "cs-loader-inner", children: [
     /* @__PURE__ */ jsx("label", { children: "●" }),
     /* @__PURE__ */ jsx("label", { children: "●" }),
     /* @__PURE__ */ jsx("label", { children: "●" }),
     /* @__PURE__ */ jsx("label", { children: "●" })
   ] }) });
 };
-const LoaderBackdrop = ({}) => {
-  return /* @__PURE__ */ jsx(Backdrop, { open: true, sx: { bgcolor: "background.default" }, children: /* @__PURE__ */ jsxs(Box, { className: "cs-loader-backdrop-inner", color: "primary.main", children: [
-    /* @__PURE__ */ jsx("label", { children: "●" }),
-    /* @__PURE__ */ jsx("label", { children: "●" }),
-    /* @__PURE__ */ jsx("label", { children: "●" }),
-    /* @__PURE__ */ jsx("label", { children: "●" })
-  ] }) });
+const LoaderBackdrop = ({
+  slotProps = {}
+}) => {
+  return /* @__PURE__ */ jsx(
+    Backdrop,
+    {
+      open: true,
+      sx: { bgcolor: "background.default" },
+      ...slotProps.backdrop,
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: "cs-loader-backdrop-inner",
+          color: "primary.main",
+          ...slotProps.loader,
+          children: [
+            /* @__PURE__ */ jsx("label", { children: "●" }),
+            /* @__PURE__ */ jsx("label", { children: "●" }),
+            /* @__PURE__ */ jsx("label", { children: "●" }),
+            /* @__PURE__ */ jsx("label", { children: "●" })
+          ]
+        }
+      )
+    }
+  );
 };
 const PasswordInput = (props) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -62264,7 +62515,7 @@ const useUtilityClasses$1 = (classesProp) => {
     focused: ["focused"],
     disabled: ["disabled"]
   };
-  return composeClasses(slots, getTreeItemUtilityClass, classes);
+  return composeClasses$1(slots, getTreeItemUtilityClass, classes);
 };
 const TreeItem = /* @__PURE__ */ React.forwardRef(function TreeItem2(inProps, forwardedRef) {
   const props = useThemeProps$1({
@@ -62544,7 +62795,7 @@ const useUtilityClasses = (ownerState) => {
       // itemDragAndDropOverlay: ['itemDragAndDropOverlay'], => feature not available on this component
       // itemErrorIcon: ['itemErrorIcon'], => feature not available on this component
     };
-    return composeClasses(slots, getRichTreeViewUtilityClass, classes);
+    return composeClasses$1(slots, getRichTreeViewUtilityClass, classes);
   }, [classes]);
 };
 const RichTreeViewRoot = styled("ul", {