tp-react-elements-dev 1.5.6 → 1.6.0

package/dist/index.js

@@ -8357,7 +8357,7 @@ var getDisplayName = /*#__PURE__*/Object.freeze({
 
 var require$$6 = /*@__PURE__*/getAugmentedNamespace(getDisplayName);
 
-const _excluded$1m = ["values", "unit", "step"];
+const _excluded$1o = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -8391,7 +8391,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$1m);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$1o);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -8514,6 +8514,11 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
     return acc;
   }, style);
 }
+function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
+  const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
+  const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge$1(prev, next), {});
+  return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
+}
 
 // compute base for responsive values; e.g.,
 // [1,2,3] => {xs: true, sm: true, md: true}
@@ -8598,7 +8603,7 @@ function getStyleValue$1(themeMapping, transform, propValueFinal, userValue = pr
   }
   return value;
 }
-function style$2(options) {
+function style$3(options) {
   const {
     prop,
     cssProperty = options.prop,
@@ -8759,12 +8764,12 @@ function resolveCssProperty(props, keys, prop, transformer) {
   const propValue = props[prop];
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-function style$1(props, keys) {
+function style$2(props, keys) {
   const transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
 function margin(props) {
-  return style$1(props, marginKeys);
+  return style$2(props, marginKeys);
 }
 margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
   obj[key] = responsivePropType;
@@ -8772,7 +8777,7 @@ margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((ob
 }, {}) : {};
 margin.filterProps = marginKeys;
 function padding(props) {
-  return style$1(props, paddingKeys);
+  return style$2(props, paddingKeys);
 }
 padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType;
@@ -8845,7 +8850,7 @@ function borderTransform(value) {
   return `${value}px solid`;
 }
 function createBorderStyle(prop, transform) {
-  return style$2({
+  return style$3({
     prop,
     themeKey: 'borders',
     transform
@@ -8932,31 +8937,31 @@ rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   rowGap: responsivePropType
 } : {};
 rowGap.filterProps = ['rowGap'];
-const gridColumn = style$2({
+const gridColumn = style$3({
   prop: 'gridColumn'
 });
-const gridRow = style$2({
+const gridRow = style$3({
   prop: 'gridRow'
 });
-const gridAutoFlow = style$2({
+const gridAutoFlow = style$3({
   prop: 'gridAutoFlow'
 });
-const gridAutoColumns = style$2({
+const gridAutoColumns = style$3({
   prop: 'gridAutoColumns'
 });
-const gridAutoRows = style$2({
+const gridAutoRows = style$3({
   prop: 'gridAutoRows'
 });
-const gridTemplateColumns = style$2({
+const gridTemplateColumns = style$3({
   prop: 'gridTemplateColumns'
 });
-const gridTemplateRows = style$2({
+const gridTemplateRows = style$3({
   prop: 'gridTemplateRows'
 });
-const gridTemplateAreas = style$2({
+const gridTemplateAreas = style$3({
   prop: 'gridTemplateAreas'
 });
-const gridArea = style$2({
+const gridArea = style$3({
   prop: 'gridArea'
 });
 compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
@@ -8967,18 +8972,18 @@ function paletteTransform(value, userValue) {
   }
   return value;
 }
-const color = style$2({
+const color = style$3({
   prop: 'color',
   themeKey: 'palette',
   transform: paletteTransform
 });
-const bgcolor = style$2({
+const bgcolor = style$3({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
 });
-const backgroundColor = style$2({
+const backgroundColor = style$3({
   prop: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
@@ -8988,7 +8993,7 @@ compose(color, bgcolor, backgroundColor);
 function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-const width = style$2({
+const width = style$3({
   prop: 'width',
   transform: sizingTransform
 });
@@ -9016,33 +9021,33 @@ const maxWidth = props => {
   return null;
 };
 maxWidth.filterProps = ['maxWidth'];
-const minWidth = style$2({
+const minWidth = style$3({
   prop: 'minWidth',
   transform: sizingTransform
 });
-const height = style$2({
+const height = style$3({
   prop: 'height',
   transform: sizingTransform
 });
-const maxHeight = style$2({
+const maxHeight = style$3({
   prop: 'maxHeight',
   transform: sizingTransform
 });
-const minHeight = style$2({
+const minHeight = style$3({
   prop: 'minHeight',
   transform: sizingTransform
 });
-style$2({
+style$3({
   prop: 'size',
   cssProperty: 'width',
   transform: sizingTransform
 });
-style$2({
+style$3({
   prop: 'size',
   cssProperty: 'height',
   transform: sizingTransform
 });
-const boxSizing = style$2({
+const boxSizing = style$3({
   prop: 'boxSizing'
 });
 compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
@@ -9530,7 +9535,7 @@ function applyStyles$2(key, styles) {
   return {};
 }
 
-const _excluded$1l = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$1n = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$2(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -9538,7 +9543,7 @@ function createTheme$2(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$1l);
+    other = _objectWithoutPropertiesLoose(options, _excluded$1n);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge$1({
@@ -9573,7 +9578,7 @@ var createTheme$1 = /*#__PURE__*/Object.freeze({
 
 var require$$7 = /*@__PURE__*/getAugmentedNamespace(createTheme$1);
 
-const _excluded$1k = ["sx"];
+const _excluded$1m = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -9594,7 +9599,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1m);
   const {
     systemProps,
     otherProps
@@ -9643,7 +9648,7 @@ var _capitalize = _interopRequireDefault$6(require$$5);
 var _getDisplayName = _interopRequireDefault$6(require$$6);
 var _createTheme = _interopRequireDefault$6(require$$7);
 var _styleFunctionSx = _interopRequireDefault$6(require$$8);
-const _excluded$1j = ["ownerState"],
+const _excluded$1l = ["ownerState"],
   _excluded2$d = ["variants"],
   _excluded3$6 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
@@ -9690,7 +9695,7 @@ function processStyleArg$1(callableStyle, _ref) {
   let {
       ownerState
     } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded$1j);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded$1l);
   const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({
     ownerState
   }, props)) : callableStyle;
@@ -10440,7 +10445,7 @@ const green = {
   A700: '#00c853'
 };
 
-const _excluded$1i = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$1k = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -10609,7 +10614,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$1i);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$1k);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -10733,7 +10738,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$1h = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$1j = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round$2(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -10764,7 +10769,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -10831,7 +10836,7 @@ function createShadow(...px) {
 // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 
-const _excluded$1g = ["duration", "easing", "delay"];
+const _excluded$1i = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -10882,7 +10887,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$1g);
+      other = _objectWithoutPropertiesLoose(options, _excluded$1i);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -10931,7 +10936,7 @@ const zIndex = {
   tooltip: 1500
 };
 
-const _excluded$1f = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$1h = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -10939,7 +10944,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$1f);
+    other = _objectWithoutPropertiesLoose(options, _excluded$1h);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage$1(18));
@@ -10997,7 +11002,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
   return muiTheme;
 }
 
-const defaultTheme$2 = createTheme();
+const defaultTheme$3 = createTheme();
 
 var THEME_ID = '$$material';
 
@@ -11010,7 +11015,7 @@ const rootShouldForwardProp = prop => slotShouldForwardProp(prop) && prop !== 'c
 
 const styled$1 = _default({
   themeId: THEME_ID,
-  defaultTheme: defaultTheme$2,
+  defaultTheme: defaultTheme$3,
   rootShouldForwardProp
 });
 
@@ -11098,7 +11103,7 @@ function useThemeProps$1({
   return useThemeProps$2({
     props,
     name,
-    defaultTheme: defaultTheme$2,
+    defaultTheme: defaultTheme$3,
     themeId: THEME_ID
   });
 }
@@ -11885,7 +11890,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$1e = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
+const _excluded$1g = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -11902,7 +11907,7 @@ function useSlotProps(parameters) {
       ownerState,
       skipResolvingSlotProps = false
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$1e);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$1g);
   const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -14721,7 +14726,7 @@ function getPopperUtilityClass(slot) {
 }
 generateUtilityClasses(COMPONENT_NAME, ['root']);
 
-const _excluded$1d = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+const _excluded$1f = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
   _excluded2$c = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 function flipPlacement(placement, direction) {
   if (direction === 'ltr') {
@@ -14749,7 +14754,7 @@ function isHTMLElement(element) {
 function isVirtualElement(element) {
   return !isHTMLElement(element);
 }
-const useUtilityClasses$V = () => {
+const useUtilityClasses$W = () => {
   const slots = {
     root: ['root']
   };
@@ -14774,7 +14779,7 @@ const PopperTooltip = /*#__PURE__*/React__namespace.forwardRef(function PopperTo
       // @ts-ignore internal logic
       // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1d);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1f);
   const tooltipRef = React__namespace.useRef(null);
   const ownRef = useForkRef(tooltipRef, forwardedRef);
   const popperRef = React__namespace.useRef(null);
@@ -14859,7 +14864,7 @@ const PopperTooltip = /*#__PURE__*/React__namespace.forwardRef(function PopperTo
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes = useUtilityClasses$V();
+  const classes = useUtilityClasses$W();
   const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
   const rootProps = useSlotProps({
     elementType: Root,
@@ -15085,7 +15090,7 @@ process.env.NODE_ENV !== "production" ? Popper$1.propTypes /* remove-proptypes *
   transition: PropTypes.bool
 } : void 0;
 
-const _excluded$1c = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$1e = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -15127,7 +15132,7 @@ const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function Texta
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1c);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1e);
   const {
     current: isControlled
   } = React__namespace.useRef(value != null);
@@ -16341,7 +16346,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$1b = ["className", "component"];
+const _excluded$1d = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -16359,7 +16364,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$1b);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$1d);
     return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
@@ -16370,7 +16375,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$1a = ["ownerState"],
+const _excluded$1c = ["ownerState"],
   _excluded2$b = ["variants"],
   _excluded3$5 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$2(obj) {
@@ -16414,7 +16419,7 @@ function processStyleArg(callableStyle, _ref) {
   let {
       ownerState
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
   const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends$1({
     ownerState
   }, props)) : callableStyle;
@@ -16905,9 +16910,9 @@ function toPropertyKey(t) {
   return "symbol" == _typeof$1(i) ? i : i + "";
 }
 
-const _excluded$19 = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
-const defaultTheme$1 = createTheme$2();
-const defaultCreateStyledComponent = styled('div', {
+const _excluded$1b = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+const defaultTheme$2 = createTheme$2();
+const defaultCreateStyledComponent$1 = styled('div', {
   name: 'MuiContainer',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -16917,12 +16922,12 @@ const defaultCreateStyledComponent = styled('div', {
     return [styles.root, styles[`maxWidth${capitalize$1(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
   }
 });
-const useThemePropsDefault = inProps => useThemeProps$2({
+const useThemePropsDefault$1 = inProps => useThemeProps$2({
   props: inProps,
   name: 'MuiContainer',
-  defaultTheme: defaultTheme$1
+  defaultTheme: defaultTheme$2
 });
-const useUtilityClasses$U = (ownerState, componentName) => {
+const useUtilityClasses$V = (ownerState, componentName) => {
   const getContainerUtilityClass = slot => {
     return generateUtilityClass$1(componentName, slot);
   };
@@ -16940,8 +16945,8 @@ const useUtilityClasses$U = (ownerState, componentName) => {
 function createContainer(options = {}) {
   const {
     // This will allow adding custom styled fn (for example for custom sx style function)
-    createStyledComponent = defaultCreateStyledComponent,
-    useThemeProps = useThemePropsDefault,
+    createStyledComponent = defaultCreateStyledComponent$1,
+    useThemeProps = useThemePropsDefault$1,
     componentName = 'MuiContainer'
   } = options;
   const ContainerRoot = createStyledComponent(({
@@ -17001,7 +17006,7 @@ function createContainer(options = {}) {
         fixed = false,
         maxWidth = 'lg'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$19);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1b);
     const ownerState = _extends$1({}, props, {
       component,
       disableGutters,
@@ -17010,7 +17015,7 @@ function createContainer(options = {}) {
     });
 
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    const classes = useUtilityClasses$U(ownerState, componentName);
+    const classes = useUtilityClasses$V(ownerState, componentName);
     return (
       /*#__PURE__*/
       // @ts-ignore theme is injected by the styled util
@@ -17037,9 +17042,168 @@ function createContainer(options = {}) {
   return Container;
 }
 
+const _excluded$1a = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+const defaultTheme$1 = createTheme$2();
+// widening Theme to any so that the consumer can own the theme structure.
+const defaultCreateStyledComponent = styled('div', {
+  name: 'MuiStack',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+});
+function useThemePropsDefault(props) {
+  return useThemeProps$2({
+    props,
+    name: 'MuiStack',
+    defaultTheme: defaultTheme$1
+  });
+}
+
+/**
+ * Return an array with the separator React element interspersed between
+ * each React node of the input children.
+ *
+ * > joinChildren([1,2,3], 0)
+ * [1,0,2,0,3]
+ */
+function joinChildren(children, separator) {
+  const childrenArray = React__namespace.Children.toArray(children).filter(Boolean);
+  return childrenArray.reduce((output, child, index) => {
+    output.push(child);
+    if (index < childrenArray.length - 1) {
+      output.push( /*#__PURE__*/React__namespace.cloneElement(separator, {
+        key: `separator-${index}`
+      }));
+    }
+    return output;
+  }, []);
+}
+const getSideFromDirection = direction => {
+  return {
+    row: 'Left',
+    'row-reverse': 'Right',
+    column: 'Top',
+    'column-reverse': 'Bottom'
+  }[direction];
+};
+const style$1 = ({
+  ownerState,
+  theme
+}) => {
+  let styles = _extends$1({
+    display: 'flex',
+    flexDirection: 'column'
+  }, handleBreakpoints({
+    theme
+  }, resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  }), propValue => ({
+    flexDirection: propValue
+  })));
+  if (ownerState.spacing) {
+    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;
+      }
+      return acc;
+    }, {});
+    const directionValues = resolveBreakpointValues({
+      values: ownerState.direction,
+      base
+    });
+    const spacingValues = resolveBreakpointValues({
+      values: ownerState.spacing,
+      base
+    });
+    if (typeof directionValues === 'object') {
+      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+        const directionValue = directionValues[breakpoint];
+        if (!directionValue) {
+          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+    const styleFromPropValue = (propValue, breakpoint) => {
+      if (ownerState.useFlexGap) {
+        return {
+          gap: getValue(transformer, propValue)
+        };
+      }
+      return {
+        // The useFlexGap={false} implement relies on each child to give up control of the margin.
+        // We need to reset the margin to avoid double spacing.
+        '& > :not(style):not(style)': {
+          margin: 0
+        },
+        '& > :not(style) ~ :not(style)': {
+          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
+        }
+      };
+    };
+    styles = deepmerge$1(styles, handleBreakpoints({
+      theme
+    }, spacingValues, styleFromPropValue));
+  }
+  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
+  return styles;
+};
+function createStack(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps = useThemePropsDefault,
+    componentName = 'MuiStack'
+  } = options;
+  const useUtilityClasses = () => {
+    const slots = {
+      root: ['root']
+    };
+    return composeClasses(slots, slot => generateUtilityClass$1(componentName, slot), {});
+  };
+  const StackRoot = createStyledComponent(style$1);
+  const Stack = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
+    const themeProps = useThemeProps(inProps);
+    const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+    const {
+        component = 'div',
+        direction = 'column',
+        spacing = 0,
+        divider,
+        children,
+        className,
+        useFlexGap = false
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded$1a);
+    const ownerState = {
+      direction,
+      spacing,
+      useFlexGap
+    };
+    const classes = useUtilityClasses();
+    return /*#__PURE__*/jsxRuntimeExports.jsx(StackRoot, _extends$1({
+      as: component,
+      ownerState: ownerState,
+      ref: ref,
+      className: clsx(classes.root, className)
+    }, other, {
+      children: divider ? joinChildren(children, divider) : children
+    }));
+  });
+  process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
+    children: PropTypes.node,
+    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    divider: PropTypes.node,
+    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  } : void 0;
+  return Stack;
+}
+
 function GlobalStyles(props) {
   return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$1, _extends$1({}, props, {
-    defaultTheme: defaultTheme$2,
+    defaultTheme: defaultTheme$3,
     themeId: THEME_ID
   }));
 }
@@ -17090,7 +17254,7 @@ function getInputBaseUtilityClass(slot) {
 }
 const inputBaseClasses = generateUtilityClasses$1('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 
-const _excluded$18 = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+const _excluded$19 = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -17103,7 +17267,7 @@ const inputOverridesResolver = (props, styles) => {
   } = props;
   return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 };
-const useUtilityClasses$T = ownerState => {
+const useUtilityClasses$U = ownerState => {
   const {
     classes,
     color,
@@ -17319,7 +17483,7 @@ const InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(in
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$18);
+    other = _objectWithoutPropertiesLoose(props, _excluded$19);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -17493,7 +17657,7 @@ const InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(in
     startAdornment,
     type
   });
-  const classes = useUtilityClasses$T(ownerState);
+  const classes = useUtilityClasses$U(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
@@ -17780,8 +17944,8 @@ function getInputUtilityClass(slot) {
 }
 const inputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1('MuiInput', ['root', 'underline', 'input']));
 
-const _excluded$17 = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$S = ownerState => {
+const _excluded$18 = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$T = ownerState => {
   const {
     classes,
     disableUnderline
@@ -17891,8 +18055,8 @@ const Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, r
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$17);
-  const classes = useUtilityClasses$S(props);
+    other = _objectWithoutPropertiesLoose(props, _excluded$18);
+  const classes = useUtilityClasses$T(props);
   const ownerState = {
     disableUnderline
   };
@@ -18112,8 +18276,8 @@ function getFilledInputUtilityClass(slot) {
 }
 const filledInputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1('MuiFilledInput', ['root', 'underline', 'input']));
 
-const _excluded$16 = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$R = ownerState => {
+const _excluded$17 = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$S = ownerState => {
   const {
     classes,
     disableUnderline
@@ -18297,14 +18461,14 @@ const FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInpu
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$16);
+    other = _objectWithoutPropertiesLoose(props, _excluded$17);
   const ownerState = _extends$1({}, props, {
     fullWidth,
     inputComponent,
     multiline,
     type
   });
-  const classes = useUtilityClasses$R(props);
+  const classes = useUtilityClasses$S(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -18527,7 +18691,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
 FilledInput.muiName = 'Input';
 
 var _span$3;
-const _excluded$15 = ["children", "classes", "className", "label", "notched"];
+const _excluded$16 = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1('fieldset', {
   shouldForwardProp: rootShouldForwardProp
 })({
@@ -18604,7 +18768,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$15);
+    other = _objectWithoutPropertiesLoose(props, _excluded$16);
   const withLabel = label != null && label !== '';
   const ownerState = _extends$1({}, props, {
     notched,
@@ -18659,8 +18823,8 @@ function getOutlinedInputUtilityClass(slot) {
 }
 const outlinedInputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 
-const _excluded$14 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
-const useUtilityClasses$Q = ownerState => {
+const _excluded$15 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const useUtilityClasses$R = ownerState => {
   const {
     classes
   } = ownerState;
@@ -18778,8 +18942,8 @@ const OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function Outlined
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$14);
-  const classes = useUtilityClasses$Q(props);
+    other = _objectWithoutPropertiesLoose(props, _excluded$15);
+  const classes = useUtilityClasses$R(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -18997,8 +19161,8 @@ function getFormLabelUtilityClasses(slot) {
 }
 const formLabelClasses = generateUtilityClasses$1('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 
-const _excluded$13 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-const useUtilityClasses$P = ownerState => {
+const _excluded$14 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const useUtilityClasses$Q = ownerState => {
   const {
     classes,
     color,
@@ -19062,7 +19226,7 @@ const FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(in
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$13);
+    other = _objectWithoutPropertiesLoose(props, _excluded$14);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -19078,7 +19242,7 @@ const FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(in
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$P(ownerState);
+  const classes = useUtilityClasses$Q(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends$1({
     as: component,
     ownerState: ownerState,
@@ -19152,8 +19316,8 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses$1('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$12 = ["disableAnimation", "margin", "shrink", "variant", "className"];
-const useUtilityClasses$O = ownerState => {
+const _excluded$13 = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const useUtilityClasses$P = ownerState => {
   const {
     classes,
     formControl,
@@ -19254,7 +19418,7 @@ const InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$12);
+    other = _objectWithoutPropertiesLoose(props, _excluded$13);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -19274,7 +19438,7 @@ const InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(
     required: fcs.required,
     focused: fcs.focused
   });
-  const classes = useUtilityClasses$O(ownerState);
+  const classes = useUtilityClasses$P(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends$1({
     "data-shrink": shrink,
     ownerState: ownerState,
@@ -19357,8 +19521,8 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses$1('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$11 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-const useUtilityClasses$N = ownerState => {
+const _excluded$12 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const useUtilityClasses$O = ownerState => {
   const {
     classes,
     margin,
@@ -19443,7 +19607,7 @@ const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormContro
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$11);
+    other = _objectWithoutPropertiesLoose(props, _excluded$12);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -19456,7 +19620,7 @@ const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormContro
     size,
     variant
   });
-  const classes = useUtilityClasses$N(ownerState);
+  const classes = useUtilityClasses$O(ownerState);
   const [adornedStart, setAdornedStart] = React__namespace.useState(() => {
     // We need to iterate through the children and find the Input in order
     // to fully support server-side rendering.
@@ -19637,8 +19801,8 @@ function getFormHelperTextUtilityClasses(slot) {
 const formHelperTextClasses = generateUtilityClasses$1('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
 
 var _span$2;
-const _excluded$10 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-const useUtilityClasses$M = ownerState => {
+const _excluded$11 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const useUtilityClasses$N = ownerState => {
   const {
     classes,
     contained,
@@ -19696,7 +19860,7 @@ const FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHel
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$10);
+    other = _objectWithoutPropertiesLoose(props, _excluded$11);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -19714,7 +19878,7 @@ const FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHel
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$M(ownerState);
+  const classes = useUtilityClasses$N(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends$1({
     as: component,
     ownerState: ownerState,
@@ -20064,8 +20228,8 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$$ = ["children", "className", "component", "dense", "disablePadding", "subheader"];
-const useUtilityClasses$L = ownerState => {
+const _excluded$10 = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const useUtilityClasses$M = ownerState => {
   const {
     classes,
     disablePadding,
@@ -20112,7 +20276,7 @@ const List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$$);
+    other = _objectWithoutPropertiesLoose(props, _excluded$10);
   const context = React__namespace.useMemo(() => ({
     dense
   }), [dense]);
@@ -20121,7 +20285,7 @@ const List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref
     dense,
     disablePadding
   });
-  const classes = useUtilityClasses$L(ownerState);
+  const classes = useUtilityClasses$M(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext.Provider, {
     value: context,
     children: /*#__PURE__*/jsxRuntimeExports.jsxs(ListRoot, _extends$1({
@@ -20178,7 +20342,7 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 
-const _excluded$_ = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const _excluded$$ = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -20260,7 +20424,7 @@ const MenuList = /*#__PURE__*/React__namespace.forwardRef(function MenuList(prop
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$_);
+    other = _objectWithoutPropertiesLoose(props, _excluded$$);
   const listRef = React__namespace.useRef(null);
   const textCriteriaRef = React__namespace.useRef({
     keys: [],
@@ -21873,7 +22037,7 @@ TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
 TransitionGroup.defaultProps = defaultProps;
 
 function useTheme$2() {
-  const theme = useTheme$4(defaultTheme$2);
+  const theme = useTheme$4(defaultTheme$3);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React__namespace.useDebugValue(theme);
@@ -21896,7 +22060,7 @@ function getTransitionProps(props, options) {
   };
 }
 
-const _excluded$Z = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$_ = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -21940,7 +22104,7 @@ const Grow = /*#__PURE__*/React__namespace.forwardRef(function Grow(props, ref)
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$Z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$_);
   const timer = useTimeout();
   const autoTimeout = React__namespace.useRef();
   const theme = useTheme$2();
@@ -22138,7 +22302,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 } : void 0;
 Grow.muiSupportAuto = true;
 
-const _excluded$Y = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$Z = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles = {
   entering: {
     opacity: 1
@@ -22175,7 +22339,7 @@ const Fade = /*#__PURE__*/React__namespace.forwardRef(function Fade(props, ref)
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$Y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$Z);
   const nodeRef = React__namespace.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -22335,8 +22499,8 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$X = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
-const useUtilityClasses$K = ownerState => {
+const _excluded$Y = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const useUtilityClasses$L = ownerState => {
   const {
     classes,
     invisible
@@ -22390,12 +22554,12 @@ const Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inPr
       TransitionComponent = Fade,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$X);
+    other = _objectWithoutPropertiesLoose(props, _excluded$Y);
   const ownerState = _extends$1({}, props, {
     component,
     invisible
   });
-  const classes = useUtilityClasses$K(ownerState);
+  const classes = useUtilityClasses$L(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$1({
     in: open,
@@ -22515,8 +22679,8 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$W = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
-const useUtilityClasses$J = ownerState => {
+const _excluded$X = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
+const useUtilityClasses$K = ownerState => {
   const {
     open,
     exited,
@@ -22603,7 +22767,7 @@ const Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, r
       slots
       // eslint-disable-next-line react/prop-types
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$W);
+    other = _objectWithoutPropertiesLoose(props, _excluded$X);
   const propsWithDefaults = _extends$1({}, props, {
     closeAfterTransition,
     disableAutoFocus,
@@ -22629,7 +22793,7 @@ const Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, r
   const ownerState = _extends$1({}, propsWithDefaults, {
     exited
   });
-  const classes = useUtilityClasses$J(ownerState);
+  const classes = useUtilityClasses$K(ownerState);
   const childProps = {};
   if (children.props.tabIndex === undefined) {
     childProps.tabIndex = '-1';
@@ -22896,8 +23060,8 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$V = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$I = ownerState => {
+const _excluded$W = ["className", "component", "elevation", "square", "variant"];
+const useUtilityClasses$J = ownerState => {
   const {
     square,
     elevation,
@@ -22951,14 +23115,14 @@ const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, r
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$V);
+    other = _objectWithoutPropertiesLoose(props, _excluded$W);
   const ownerState = _extends$1({}, props, {
     component,
     elevation,
     square,
     variant
   });
-  const classes = useUtilityClasses$I(ownerState);
+  const classes = useUtilityClasses$J(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme$2();
@@ -23031,7 +23195,7 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
 
-const _excluded$U = ["onEntering"],
+const _excluded$V = ["onEntering"],
   _excluded2$a = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
   _excluded3$4 = ["slotProps"];
 function getOffsetTop(rect, vertical) {
@@ -23062,7 +23226,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$H = ownerState => {
+const useUtilityClasses$I = ownerState => {
   const {
     classes
   } = ownerState;
@@ -23129,7 +23293,7 @@ const Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProp
       } = {},
       disableScrollLock = false
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$U),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$V),
     other = _objectWithoutPropertiesLoose(props, _excluded2$a);
   const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React__namespace.useRef();
@@ -23145,7 +23309,7 @@ const Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProp
     transitionDuration: transitionDurationProp,
     TransitionProps
   });
-  const classes = useUtilityClasses$H(ownerState);
+  const classes = useUtilityClasses$I(ownerState);
 
   // Returns the top/left offset of the position
   // to attach to on the anchor element (or body if none is provided)
@@ -23547,7 +23711,7 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$T = ["onEntering"],
+const _excluded$U = ["onEntering"],
   _excluded2$9 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -23557,7 +23721,7 @@ const LTR_ORIGIN = {
   vertical: 'top',
   horizontal: 'left'
 };
-const useUtilityClasses$G = ownerState => {
+const useUtilityClasses$H = ownerState => {
   const {
     classes
   } = ownerState;
@@ -23618,7 +23782,7 @@ const Menu$1 = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, r
       slots = {},
       slotProps = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$T),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$U),
     other = _objectWithoutPropertiesLoose(props, _excluded2$9);
   const isRtl = useRtl();
   const ownerState = _extends$1({}, props, {
@@ -23631,7 +23795,7 @@ const Menu$1 = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, r
     TransitionProps,
     variant
   });
-  const classes = useUtilityClasses$G(ownerState);
+  const classes = useUtilityClasses$H(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React__namespace.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -23841,8 +24005,8 @@ function getNativeSelectUtilityClasses(slot) {
 }
 const nativeSelectClasses = generateUtilityClasses$1('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 
-const _excluded$S = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
-const useUtilityClasses$F = ownerState => {
+const _excluded$T = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
+const useUtilityClasses$G = ownerState => {
   const {
     classes,
     variant,
@@ -23968,13 +24132,13 @@ const NativeSelectInput = /*#__PURE__*/React__namespace.forwardRef(function Nati
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$S);
+    other = _objectWithoutPropertiesLoose(props, _excluded$T);
   const ownerState = _extends$1({}, props, {
     disabled,
     variant,
     error
   });
-  const classes = useUtilityClasses$F(ownerState);
+  const classes = useUtilityClasses$G(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(React__namespace.Fragment, {
     children: [/*#__PURE__*/jsxRuntimeExports.jsx(NativeSelectSelect, _extends$1({
       ownerState: ownerState,
@@ -24050,7 +24214,7 @@ function getSelectUtilityClasses(slot) {
 const selectClasses = generateUtilityClasses$1('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 
 var _span$1;
-const _excluded$R = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded$S = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 const SelectSelect = styled$1('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -24117,7 +24281,7 @@ function areEqualValues(a, b) {
 function isEmpty$1(display) {
   return display == null || typeof display === 'string' && !display.trim();
 }
-const useUtilityClasses$E = ownerState => {
+const useUtilityClasses$F = ownerState => {
   const {
     classes,
     variant,
@@ -24173,7 +24337,7 @@ const SelectInput = /*#__PURE__*/React__namespace.forwardRef(function SelectInpu
       value: valueProp,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$R);
+    other = _objectWithoutPropertiesLoose(props, _excluded$S);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -24460,7 +24624,7 @@ const SelectInput = /*#__PURE__*/React__namespace.forwardRef(function SelectInpu
     open,
     error
   });
-  const classes = useUtilityClasses$E(ownerState);
+  const classes = useUtilityClasses$F(ownerState);
   const paperProps = _extends$1({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
   const listboxId = useId();
   return /*#__PURE__*/jsxRuntimeExports.jsxs(React__namespace.Fragment, {
@@ -24688,8 +24852,8 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$Q = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$D = ownerState => {
+const _excluded$R = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$E = ownerState => {
   const {
     color,
     fontSize,
@@ -24756,7 +24920,7 @@ const SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProp
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$Q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$R);
   const hasSvgAsChild = /*#__PURE__*/React__namespace.isValidElement(children) && children.type === 'svg';
   const ownerState = _extends$1({}, props, {
     color,
@@ -24771,7 +24935,7 @@ const SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProp
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$D(ownerState);
+  const classes = useUtilityClasses$E(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -24883,9 +25047,9 @@ var ArrowDropDownIcon$1 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("p
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$P = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
+const _excluded$Q = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
   _excluded2$8 = ["root"];
-const useUtilityClasses$C = ownerState => {
+const useUtilityClasses$D = ownerState => {
   const {
     classes
   } = ownerState;
@@ -24928,7 +25092,7 @@ const Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps,
       SelectDisplayProps,
       variant: variantProp = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$P);
+    other = _objectWithoutPropertiesLoose(props, _excluded$Q);
   const inputComponent = native ? NativeSelectInput : SelectInput;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -24941,7 +25105,7 @@ const Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps,
     variant,
     classes: classesProp
   });
-  const classes = useUtilityClasses$C(ownerState);
+  const classes = useUtilityClasses$D(ownerState);
   const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2$8);
   const InputComponent = input || {
     standard: /*#__PURE__*/jsxRuntimeExports.jsx(StyledInput, {
@@ -25151,13 +25315,13 @@ function getTextFieldUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiTextField', ['root']);
 
-const _excluded$O = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+const _excluded$P = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 const variantComponent = {
   standard: Input,
   filled: FilledInput,
   outlined: OutlinedInput
 };
-const useUtilityClasses$B = ownerState => {
+const useUtilityClasses$C = ownerState => {
   const {
     classes
   } = ownerState;
@@ -25243,7 +25407,7 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(in
       value,
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$O);
+    other = _objectWithoutPropertiesLoose(props, _excluded$P);
   const ownerState = _extends$1({}, props, {
     autoFocus,
     color,
@@ -25255,7 +25419,7 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(in
     select,
     variant
   });
-  const classes = useUtilityClasses$B(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (select && !children) {
       console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
@@ -25505,6 +25669,18 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
 } : void 0;
 
+// Ported from Compass
+// https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss
+// Emulate the sass function "unit"
+function getUnit(input) {
+  return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
+}
+
+// Emulate the sass function "unitless"
+function toUnitless(length) {
+  return parseFloat(length);
+}
+
 const boxClasses = generateUtilityClasses$1('MuiBox', ['root']);
 
 const defaultTheme = createTheme();
@@ -25654,15 +25830,15 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 
 const touchRippleClasses = generateUtilityClasses$1('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 
-const _excluded$N = ["center", "classes", "className"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
+const _excluded$O = ["center", "classes", "className"];
+let _$1 = t => t,
+  _t$1,
+  _t2$1,
+  _t3$1,
+  _t4$1;
 const DURATION = 550;
 const DELAY_RIPPLE = 80;
-const enterKeyframe = keyframes(_t || (_t = _`
+const enterKeyframe = keyframes(_t$1 || (_t$1 = _$1`
   0% {
     transform: scale(0);
     opacity: 0.1;
@@ -25673,7 +25849,7 @@ const enterKeyframe = keyframes(_t || (_t = _`
     opacity: 0.3;
   }
 `));
-const exitKeyframe = keyframes(_t2 || (_t2 = _`
+const exitKeyframe = keyframes(_t2$1 || (_t2$1 = _$1`
   0% {
     opacity: 1;
   }
@@ -25682,7 +25858,7 @@ const exitKeyframe = keyframes(_t2 || (_t2 = _`
     opacity: 0;
   }
 `));
-const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
+const pulsateKeyframe = keyframes(_t3$1 || (_t3$1 = _$1`
   0% {
     transform: scale(1);
   }
@@ -25715,7 +25891,7 @@ const TouchRippleRoot = styled$1('span', {
 const TouchRippleRipple = styled$1(Ripple, {
   name: 'MuiTouchRipple',
   slot: 'Ripple'
-})(_t4 || (_t4 = _`
+})(_t4$1 || (_t4$1 = _$1`
   opacity: 0;
   position: absolute;
 
@@ -25783,7 +25959,7 @@ const TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRippl
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$N);
+    other = _objectWithoutPropertiesLoose(props, _excluded$O);
   const [ripples, setRipples] = React__namespace.useState([]);
   const nextKey = React__namespace.useRef(0);
   const rippleCallback = React__namespace.useRef(null);
@@ -25977,8 +26153,8 @@ function getButtonBaseUtilityClass(slot) {
 }
 const buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
-const _excluded$M = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
-const useUtilityClasses$A = ownerState => {
+const _excluded$N = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const useUtilityClasses$B = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -26078,7 +26254,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$M);
+    other = _objectWithoutPropertiesLoose(props, _excluded$N);
   const buttonRef = React__namespace.useRef(null);
   const rippleRef = React__namespace.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -26245,7 +26421,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$A(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonBaseRoot, _extends$1({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -26440,8 +26616,8 @@ function getIconButtonUtilityClass(slot) {
 }
 const iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 
-const _excluded$L = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
-const useUtilityClasses$z = ownerState => {
+const _excluded$M = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+const useUtilityClasses$A = ownerState => {
   const {
     classes,
     disabled,
@@ -26541,7 +26717,7 @@ const IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$L);
+    other = _objectWithoutPropertiesLoose(props, _excluded$M);
   const ownerState = _extends$1({}, props, {
     edge,
     color,
@@ -26549,7 +26725,7 @@ const IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(
     disableFocusRipple,
     size
   });
-  const classes = useUtilityClasses$z(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(IconButtonRoot, _extends$1({
     className: clsx(classes.root, className),
     centerRipple: true,
@@ -26638,8 +26814,8 @@ function getTypographyUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-const _excluded$K = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$y = ownerState => {
+const _excluded$L = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$z = ownerState => {
   const {
     align,
     gutterBottom,
@@ -26725,7 +26901,7 @@ const Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$K);
+    other = _objectWithoutPropertiesLoose(props, _excluded$L);
   const ownerState = _extends$1({}, props, {
     align,
     color,
@@ -26738,7 +26914,7 @@ const Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$y(ownerState);
+  const classes = useUtilityClasses$z(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(TypographyRoot, _extends$1({
     as: Component,
     ref: ref,
@@ -26841,7 +27017,7 @@ function useTheme$1(defaultTheme = null) {
 }
 default_1$5 = useThemeWithoutDefault.default = useTheme$1;
 
-const _excluded$J = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+const _excluded$K = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 const PopperRoot = styled$1(Popper$1, {
   name: 'MuiPopper',
   slot: 'Root',
@@ -26884,7 +27060,7 @@ const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps,
       slots,
       slotProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$J);
+    other = _objectWithoutPropertiesLoose(props, _excluded$K);
   const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
   const otherProps = _extends$1({
     anchorEl,
@@ -27042,8 +27218,8 @@ function getListSubheaderUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
 
-const _excluded$I = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
-const useUtilityClasses$x = ownerState => {
+const _excluded$J = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
+const useUtilityClasses$y = ownerState => {
   const {
     classes,
     color,
@@ -27104,7 +27280,7 @@ const ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubh
       disableSticky = false,
       inset = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$I);
+    other = _objectWithoutPropertiesLoose(props, _excluded$J);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -27112,7 +27288,7 @@ const ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubh
     disableSticky,
     inset
   });
-  const classes = useUtilityClasses$x(ownerState);
+  const classes = useUtilityClasses$y(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ListSubheaderRoot, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -27178,8 +27354,8 @@ function getChipUtilityClass(slot) {
 }
 const chipClasses = generateUtilityClasses$1('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 
-const _excluded$H = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
-const useUtilityClasses$w = ownerState => {
+const _excluded$I = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
+const useUtilityClasses$x = ownerState => {
   const {
     classes,
     disabled,
@@ -27464,7 +27640,7 @@ const Chip = /*#__PURE__*/React__namespace.forwardRef(function Chip(inProps, ref
       tabIndex,
       skipFocusWhenDisabled = false // TODO v6: Rename to `focusableWhenDisabled`.
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$H);
+    other = _objectWithoutPropertiesLoose(props, _excluded$I);
   const chipRef = React__namespace.useRef(null);
   const handleRef = useForkRef(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -27510,7 +27686,7 @@ const Chip = /*#__PURE__*/React__namespace.forwardRef(function Chip(inProps, ref
     clickable,
     variant
   });
-  const classes = useUtilityClasses$w(ownerState);
+  const classes = useUtilityClasses$x(ownerState);
   const moreProps = component === ButtonBase ? _extends$1({
     component: ComponentProp || 'div',
     focusVisibleClassName: classes.focusVisible
@@ -27671,12 +27847,12 @@ function getAutocompleteUtilityClass(slot) {
 const autocompleteClasses = generateUtilityClasses$1('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
 
 var _ClearIcon, _ArrowDropDownIcon;
-const _excluded$G = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
+const _excluded$H = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
   _excluded2$7 = ["ref"],
   _excluded3$3 = ["key"],
   _excluded4 = ["key"];
 const useThemeProps = createUseThemeProps();
-const useUtilityClasses$v = ownerState => {
+const useUtilityClasses$w = ownerState => {
   const {
     classes,
     disablePortal,
@@ -28115,7 +28291,7 @@ const Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocompl
       size = 'medium',
       slotProps = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$G);
+    other = _objectWithoutPropertiesLoose(props, _excluded$H);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const {
@@ -28174,7 +28350,7 @@ const Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocompl
     popupOpen,
     size
   });
-  const classes = useUtilityClasses$v(ownerState);
+  const classes = useUtilityClasses$w(ownerState);
   let startAdornment;
   if (multiple && value.length > 0) {
     const getCustomizedTagProps = params => _extends$1({
@@ -28808,8 +28984,8 @@ if (process.env.NODE_ENV !== 'production') {
   ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
 }
 
-const _excluded$F = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
-const useUtilityClasses$u = ownerState => {
+const _excluded$G = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const useUtilityClasses$v = ownerState => {
   const {
     color,
     disableElevation,
@@ -29035,7 +29211,7 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps,
       type,
       variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$F);
+    other = _objectWithoutPropertiesLoose(props, _excluded$G);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -29047,7 +29223,7 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps,
     type,
     variant
   });
-  const classes = useUtilityClasses$u(ownerState);
+  const classes = useUtilityClasses$v(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
@@ -29173,8 +29349,8 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses$1('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const _excluded$E = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
-const useUtilityClasses$t = ownerState => {
+const _excluded$F = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+const useUtilityClasses$u = ownerState => {
   const {
     classes,
     checked,
@@ -29239,7 +29415,7 @@ const SwitchBase = /*#__PURE__*/React__namespace.forwardRef(function SwitchBase(
       type,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$E);
+    other = _objectWithoutPropertiesLoose(props, _excluded$F);
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -29288,7 +29464,7 @@ const SwitchBase = /*#__PURE__*/React__namespace.forwardRef(function SwitchBase(
     disableFocusRipple,
     edge
   });
-  const classes = useUtilityClasses$t(ownerState);
+  const classes = useUtilityClasses$u(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(SwitchBaseRoot, _extends$1({
     component: "span",
     className: clsx(classes.root, className),
@@ -29446,8 +29622,8 @@ function getCheckboxUtilityClass(slot) {
 }
 const checkboxClasses = generateUtilityClasses$1('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 
-const _excluded$D = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
-const useUtilityClasses$s = ownerState => {
+const _excluded$E = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
+const useUtilityClasses$t = ownerState => {
   const {
     classes,
     indeterminate,
@@ -29510,7 +29686,7 @@ const Checkbox = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(inPr
       size = 'medium',
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$D);
+    other = _objectWithoutPropertiesLoose(props, _excluded$E);
   const icon = indeterminate ? indeterminateIconProp : iconProp;
   const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
   const ownerState = _extends$1({}, props, {
@@ -29518,7 +29694,7 @@ const Checkbox = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(inPr
     indeterminate,
     size
   });
-  const classes = useUtilityClasses$s(ownerState);
+  const classes = useUtilityClasses$t(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(CheckboxRoot, _extends$1({
     type: "checkbox",
     inputProps: _extends$1({
@@ -29709,7 +29885,7 @@ if (process.env.NODE_ENV !== 'production') {
   DialogContext.displayName = 'DialogContext';
 }
 
-const _excluded$C = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
+const _excluded$D = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
 const DialogBackdrop = styled$1(Backdrop, {
   name: 'MuiDialog',
   slot: 'Backdrop',
@@ -29718,7 +29894,7 @@ const DialogBackdrop = styled$1(Backdrop, {
   // Improve scrollable dialog support.
   zIndex: -1
 });
-const useUtilityClasses$r = ownerState => {
+const useUtilityClasses$s = ownerState => {
   const {
     classes,
     scroll,
@@ -29872,7 +30048,7 @@ const Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps,
       transitionDuration = defaultTransitionDuration,
       TransitionProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$C);
+    other = _objectWithoutPropertiesLoose(props, _excluded$D);
   const ownerState = _extends$1({}, props, {
     disableEscapeKeyDown,
     fullScreen,
@@ -29880,7 +30056,7 @@ const Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps,
     maxWidth,
     scroll
   });
-  const classes = useUtilityClasses$r(ownerState);
+  const classes = useUtilityClasses$s(ownerState);
   const backdropClick = React__namespace.useRef();
   const handleMouseDown = event => {
     // We don't want to close the dialog when clicking the dialog content.
@@ -30095,8 +30271,8 @@ function getDialogActionsUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiDialogActions', ['root', 'spacing']);
 
-const _excluded$B = ["className", "disableSpacing"];
-const useUtilityClasses$q = ownerState => {
+const _excluded$C = ["className", "disableSpacing"];
+const useUtilityClasses$r = ownerState => {
   const {
     classes,
     disableSpacing
@@ -30137,11 +30313,11 @@ const DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogAc
       className,
       disableSpacing = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$B);
+    other = _objectWithoutPropertiesLoose(props, _excluded$C);
   const ownerState = _extends$1({}, props, {
     disableSpacing
   });
-  const classes = useUtilityClasses$q(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(DialogActionsRoot, _extends$1({
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -30186,8 +30362,8 @@ function getDialogTitleUtilityClass(slot) {
 }
 const dialogTitleClasses = generateUtilityClasses$1('MuiDialogTitle', ['root']);
 
-const _excluded$A = ["className", "dividers"];
-const useUtilityClasses$p = ownerState => {
+const _excluded$B = ["className", "dividers"];
+const useUtilityClasses$q = ownerState => {
   const {
     classes,
     dividers
@@ -30233,11 +30409,11 @@ const DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogCo
       className,
       dividers = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$A);
+    other = _objectWithoutPropertiesLoose(props, _excluded$B);
   const ownerState = _extends$1({}, props, {
     dividers
   });
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(DialogContentRoot, _extends$1({
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -30272,8 +30448,8 @@ process.env.NODE_ENV !== "production" ? DialogContent.propTypes /* remove-propty
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 
-const _excluded$z = ["className", "id"];
-const useUtilityClasses$o = ownerState => {
+const _excluded$A = ["className", "id"];
+const useUtilityClasses$p = ownerState => {
   const {
     classes
   } = ownerState;
@@ -30299,9 +30475,9 @@ const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitl
       className,
       id: idProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$A);
   const ownerState = props;
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$p(ownerState);
   const {
     titleId = idProp
   } = React__namespace.useContext(DialogContext);
@@ -30346,8 +30522,8 @@ function getDividerUtilityClass(slot) {
 }
 const dividerClasses = generateUtilityClasses$1('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
 
-const _excluded$y = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
-const useUtilityClasses$n = ownerState => {
+const _excluded$z = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
+const useUtilityClasses$o = ownerState => {
   const {
     absolute,
     children,
@@ -30488,7 +30664,7 @@ const Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProp
       textAlign = 'center',
       variant = 'fullWidth'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$z);
   const ownerState = _extends$1({}, props, {
     absolute,
     component,
@@ -30499,7 +30675,7 @@ const Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProp
     textAlign,
     variant
   });
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(DividerRoot, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -30584,7 +30760,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['fullWidth', 'inset', 'middle']), PropTypes.string])
 } : void 0;
 
-const _excluded$x = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$y = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getTranslateValue(direction, node, resolvedContainer) {
   const rect = node.getBoundingClientRect();
   const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
@@ -30673,7 +30849,7 @@ const Slide = /*#__PURE__*/React__namespace.forwardRef(function Slide(props, ref
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$x);
+    other = _objectWithoutPropertiesLoose(props, _excluded$y);
   const childrenRef = React__namespace.useRef(null);
   const handleRef = useForkRef(children.ref, childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
@@ -30895,6 +31071,62 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
   })])
 } : void 0;
 
+const Stack = createStack({
+  createStyledComponent: styled$1('div', {
+    name: 'MuiStack',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  useThemeProps: inProps => useThemeProps$1({
+    props: inProps,
+    name: 'MuiStack'
+  })
+});
+process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  /**
+   * Add an element between each child.
+   */
+  divider: PropTypes.node,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
+} : void 0;
+
 /**
  * @ignore - internal component.
  */
@@ -30920,7 +31152,7 @@ const gridClasses = generateUtilityClasses$1('MuiGrid', ['root', 'container', 'i
 // grid sizes for all breakpoints
 ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
 
-const _excluded$w = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
+const _excluded$x = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 function getOffset(val) {
   const parse = parseFloat(val);
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
@@ -31229,7 +31461,7 @@ function resolveSpacingClasses(spacing, breakpoints) {
   });
   return classes;
 }
-const useUtilityClasses$m = ownerState => {
+const useUtilityClasses$n = ownerState => {
   const {
     classes,
     container,
@@ -31280,7 +31512,7 @@ const Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref
       wrap = 'wrap',
       zeroMinWidth = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$x);
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columnsContext = React__namespace.useContext(GridContext);
@@ -31308,7 +31540,7 @@ const Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref
   }, breakpointsValues, {
     breakpoints: breakpoints.keys
   });
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(GridContext.Provider, {
     value: columns,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(GridRoot, _extends$1({
@@ -31468,14 +31700,14 @@ function getInputAdornmentUtilityClass(slot) {
 const inputAdornmentClasses = generateUtilityClasses$1('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
 
 var _span;
-const _excluded$v = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
+const _excluded$w = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
 const overridesResolver$3 = (props, styles) => {
   const {
     ownerState
   } = props;
   return [styles.root, styles[`position${capitalize$1(ownerState.position)}`], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];
 };
-const useUtilityClasses$l = ownerState => {
+const useUtilityClasses$m = ownerState => {
   const {
     classes,
     disablePointerEvents,
@@ -31533,7 +31765,7 @@ const InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAd
       position,
       variant: variantProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$w);
   const muiFormControl = useFormControl() || {};
   let variant = variantProp;
   if (variantProp && muiFormControl.variant) {
@@ -31553,7 +31785,7 @@ const InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAd
     position,
     variant
   });
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
     value: null,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(InputAdornmentRoot, _extends$1({
@@ -31635,8 +31867,8 @@ function getListItemSecondaryActionClassesUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiListItemSecondaryAction', ['root', 'disableGutters']);
 
-const _excluded$u = ["className"];
-const useUtilityClasses$k = ownerState => {
+const _excluded$v = ["className"];
+const useUtilityClasses$l = ownerState => {
   const {
     disableGutters,
     classes
@@ -31677,12 +31909,12 @@ const ListItemSecondaryAction = /*#__PURE__*/React__namespace.forwardRef(functio
   const {
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
   const context = React__namespace.useContext(ListContext);
   const ownerState = _extends$1({}, props, {
     disableGutters: context.disableGutters
   });
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ListItemSecondaryActionRoot, _extends$1({
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -31713,7 +31945,7 @@ process.env.NODE_ENV !== "production" ? ListItemSecondaryAction.propTypes /* rem
 } : void 0;
 ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
 
-const _excluded$t = ["className"],
+const _excluded$u = ["className"],
   _excluded2$6 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 const overridesResolver$2 = (props, styles) => {
   const {
@@ -31721,7 +31953,7 @@ const overridesResolver$2 = (props, styles) => {
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters, !ownerState.disablePadding && styles.padding, ownerState.button && styles.button, ownerState.hasSecondaryAction && styles.secondaryAction];
 };
-const useUtilityClasses$j = ownerState => {
+const useUtilityClasses$k = ownerState => {
   const {
     alignItems,
     button,
@@ -31855,7 +32087,7 @@ const ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(inPr
       slotProps = {},
       slots = {}
     } = props,
-    ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded$t),
+    ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded$u),
     other = _objectWithoutPropertiesLoose(props, _excluded2$6);
   const context = React__namespace.useContext(ListContext);
   const childContext = React__namespace.useMemo(() => ({
@@ -31889,7 +32121,7 @@ const ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(inPr
     hasSecondaryAction,
     selected
   });
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   const handleRef = useForkRef(listItemRef, ref);
   const Root = slots.root || components.Root || ListItemRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
@@ -32118,8 +32350,8 @@ function getListItemTextUtilityClass(slot) {
 }
 const listItemTextClasses = generateUtilityClasses$1('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
 
-const _excluded$s = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"];
-const useUtilityClasses$i = ownerState => {
+const _excluded$t = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"];
+const useUtilityClasses$j = ownerState => {
   const {
     classes,
     inset,
@@ -32175,7 +32407,7 @@ const ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemT
       secondary: secondaryProp,
       secondaryTypographyProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const {
     dense
   } = React__namespace.useContext(ListContext);
@@ -32188,7 +32420,7 @@ const ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemT
     secondary: !!secondary,
     dense
   });
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   if (primary != null && primary.type !== Typography && !disableTypography) {
     primary = /*#__PURE__*/jsxRuntimeExports.jsx(Typography, _extends$1({
       variant: dense ? 'body2' : 'body1',
@@ -32277,14 +32509,14 @@ function getMenuItemUtilityClass(slot) {
 }
 const menuItemClasses = generateUtilityClasses$1('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 
-const _excluded$r = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
+const _excluded$s = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 const overridesResolver$1 = (props, styles) => {
   const {
     ownerState
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
 };
-const useUtilityClasses$h = ownerState => {
+const useUtilityClasses$i = ownerState => {
   const {
     disabled,
     dense,
@@ -32399,7 +32631,7 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inPr
       tabIndex: tabIndexProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const context = React__namespace.useContext(ListContext);
   const childContext = React__namespace.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -32420,7 +32652,7 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inPr
     divider,
     disableGutters
   });
-  const classes = useUtilityClasses$h(props);
+  const classes = useUtilityClasses$i(props);
   const handleRef = useForkRef(menuItemRef, ref);
   let tabIndex;
   if (!props.disabled) {
@@ -32517,6 +32749,219 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
   tabIndex: PropTypes.number
 } : void 0;
 
+function getSkeletonUtilityClass(slot) {
+  return generateUtilityClass$1('MuiSkeleton', slot);
+}
+generateUtilityClasses$1('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
+
+const _excluded$r = ["animation", "className", "component", "height", "style", "variant", "width"];
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const useUtilityClasses$h = ownerState => {
+  const {
+    classes,
+    variant,
+    animation,
+    hasChildren,
+    width,
+    height
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, animation, hasChildren && 'withChildren', hasChildren && !width && 'fitContent', hasChildren && !height && 'heightAuto']
+  };
+  return composeClasses(slots, getSkeletonUtilityClass, classes);
+};
+const pulseKeyframe = keyframes(_t || (_t = _`
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`));
+const waveKeyframe = keyframes(_t2 || (_t2 = _`
+  0% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    /* +0.5s of delay between each loop */
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+`));
+const SkeletonRoot = styled$1('span', {
+  name: 'MuiSkeleton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], ownerState.animation !== false && styles[ownerState.animation], ownerState.hasChildren && styles.withChildren, ownerState.hasChildren && !ownerState.width && styles.fitContent, ownerState.hasChildren && !ownerState.height && styles.heightAuto];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
+  const radiusValue = toUnitless(theme.shape.borderRadius);
+  return _extends$1({
+    display: 'block',
+    // Create a "on paper" color with sufficient contrast retaining the color
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    height: '1.2em'
+  }, ownerState.variant === 'text' && {
+    marginTop: 0,
+    marginBottom: 0,
+    height: 'auto',
+    transformOrigin: '0 55%',
+    transform: 'scale(1, 0.60)',
+    borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
+    '&:empty:before': {
+      content: '"\\00a0"'
+    }
+  }, ownerState.variant === 'circular' && {
+    borderRadius: '50%'
+  }, ownerState.variant === 'rounded' && {
+    borderRadius: (theme.vars || theme).shape.borderRadius
+  }, ownerState.hasChildren && {
+    '& > *': {
+      visibility: 'hidden'
+    }
+  }, ownerState.hasChildren && !ownerState.width && {
+    maxWidth: 'fit-content'
+  }, ownerState.hasChildren && !ownerState.height && {
+    height: 'auto'
+  });
+}, ({
+  ownerState
+}) => ownerState.animation === 'pulse' && css$1(_t3 || (_t3 = _`
+      animation: ${0} 2s ease-in-out 0.5s infinite;
+    `), pulseKeyframe), ({
+  ownerState,
+  theme
+}) => ownerState.animation === 'wave' && css$1(_t4 || (_t4 = _`
+      position: relative;
+      overflow: hidden;
+
+      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
+      -webkit-mask-image: -webkit-radial-gradient(white, black);
+
+      &::after {
+        animation: ${0} 2s linear 0.5s infinite;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          ${0},
+          transparent
+        );
+        content: '';
+        position: absolute;
+        transform: translateX(-100%); /* Avoid flash during server-side hydration */
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+      }
+    `), waveKeyframe, (theme.vars || theme).palette.action.hover));
+const Skeleton = /*#__PURE__*/React__namespace.forwardRef(function Skeleton(inProps, ref) {
+  const props = useThemeProps$1({
+    props: inProps,
+    name: 'MuiSkeleton'
+  });
+  const {
+      animation = 'pulse',
+      className,
+      component = 'span',
+      height,
+      style,
+      variant = 'text',
+      width
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+  const ownerState = _extends$1({}, props, {
+    animation,
+    component,
+    variant,
+    hasChildren: Boolean(other.children)
+  });
+  const classes = useUtilityClasses$h(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(SkeletonRoot, _extends$1({
+    as: component,
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, {
+    style: _extends$1({
+      width,
+      height
+    }, style)
+  }));
+});
+process.env.NODE_ENV !== "production" ? Skeleton.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The animation.
+   * If `false` the animation effect is disabled.
+   * @default 'pulse'
+   */
+  animation: PropTypes.oneOf(['pulse', 'wave', false]),
+  /**
+   * Optional children to infer width and height from.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Height of the skeleton.
+   * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The type of content that will be rendered.
+   * @default 'text'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rectangular', 'rounded', 'text']), PropTypes.string]),
+  /**
+   * Width of the skeleton.
+   * Useful when the skeleton is inside an inline element with no width of its own.
+   */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+} : void 0;
+
 function getTooltipUtilityClass(slot) {
   return generateUtilityClass$1('MuiTooltip', slot);
 }
@@ -52030,7 +52475,7 @@ const DateRangePickerComponent = ({ props }) => {
                     } }, { children: jsxRuntimeExports.jsx(DateRangePickerExporter, { open: true, toggle: toggle, initialDateRange: dateRange, closeOnClickOutside: true, onChange: (range) => setDateRange(range) }) })) })))] })));
 };
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
     option: {
         fontSize: "11px",
         fontFamily: "Roboto-Reg",
@@ -52043,7 +52488,7 @@ const useStyles$1 = makeStyles((theme) => ({
     },
 }));
 const SingleSelect = ({ props }) => {
-    const classes = useStyles$1();
+    const classes = useStyles$2();
     // const valueRender = props.item.options?.find(
     //   (item) => item.value === props.getValues(props.item.name)
     // );
@@ -52307,7 +52752,7 @@ const FormRenderFileUpload = ({ props }) => {
                         }, sx: { width: "100%" } })] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
     option: {
         fontSize: "11px",
         fontFamily: "Roboto-Reg",
@@ -52320,7 +52765,7 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 const SingleSelectNonAutoComplete = ({ props }) => {
-    useStyles();
+    useStyles$1();
     return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true, sx: { position: "relative" } }, { children: [jsxRuntimeExports.jsx(InputLabel, Object.assign({ id: "demo-simple-select-label" }, { children: props.item.label })), jsxRuntimeExports.jsx(Select, Object.assign({ labelId: "demo-simple-select-label", id: "demo-simple-select", 
                 // {...props.register(props.item.name)}
                 value: props.getValues(props.item.name), label: `${props.item.label}${props.item.required ? " *" : ""}`, onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
@@ -52355,6 +52800,87 @@ const FormActiveSwitch = ({ props }) => {
     return (jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: "m-form__input" }, { children: [item.label && (jsxRuntimeExports.jsx("span", Object.assign({ style: { fontSize: "12px", fontWeight: 400, paddingRight: 10 } }, { children: item.label }))), jsxRuntimeExports.jsxs("span", Object.assign({ className: "switch prestashop-switch fixed-width-lg" }, { children: [jsxRuntimeExports.jsx("input", { checked: active, id: `${item.name}_on`, name: item.name, type: "radio", value: "Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_on`, style: { fontFamily: "Roboto-Reg", textTransform: "none" } }, { children: item.label1 ? item.label1 : "Active" })), jsxRuntimeExports.jsx("input", { checked: !active, id: `${item.name}_off`, name: item.name, type: "radio", value: "In Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_off`, style: { fontFamily: "Roboto-Reg", textTransform: "none" } }, { children: item.label2 ? item.label2 : "In Active" })), jsxRuntimeExports.jsx("a", { className: "slide-button btn" })] }))] })) }));
 };
 
+const useStyles = makeStyles((theme) => ({
+    option: {
+        fontSize: "11px",
+        fontFamily: "Roboto-Reg",
+    },
+    option2: {
+        fontSize: "14px",
+        fontFamily: "Roboto-Reg",
+    },
+}));
+const SingleSelectSearchApi = ({ props }) => {
+    var _a, _b;
+    const classes = useStyles();
+    const [searchValue, setSearchValue] = React$1.useState("");
+    const [optionsFetched, setOptionsFetched] = React$1.useState([]);
+    const [isLoading, setIsLoading] = React$1.useState(false);
+    React$1.useEffect(() => {
+        var _a;
+        const controller = new AbortController();
+        const signal = controller.signal;
+        if (((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.autoFIll) && props.getValues(props.item.name)) {
+            setSearchValue(props.getValues(props.item.name));
+            setOptionsFetched([]);
+        }
+        else if (props.getValues(props.item.name)) {
+            setSearchValue('');
+        }
+        setIsLoading(true);
+        props.item.AxiosInstance
+            .get(props.item.ApiInstance + `&${props.item.searchInstance}=${searchValue}`, { signal })
+            .then((res) => {
+            setOptionsFetched(res.data);
+            setIsLoading(false);
+            props.item.setLoadedPaginationOptions && props.item.setLoadedPaginationOptions(res.data);
+        })
+            .catch((err) => {
+            console.log(err, "error");
+            setIsLoading(false);
+        });
+        return () => controller.abort();
+    }, [searchValue, props.item.ApiInstance, props.getValues(props.item.name), (_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.autoFIll]);
+    React$1.useEffect(() => {
+        setSearchValue("");
+    }, [(_b = props.item) === null || _b === void 0 ? void 0 : _b.ApiInstanceReferal]);
+    const isOptionEqualToValue = (option, value) => (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value); // Assuming there's a 'value' property in your options
+    return (jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
+            var _a, _b;
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Autocomplete, Object.assign({}, field, { value: props.getValues(props.item.name)
+                            ? optionsFetched === null || optionsFetched === void 0 ? void 0 : optionsFetched.find((item) => (item === null || item === void 0 ? void 0 : item.value) === props.getValues(props.item.name))
+                            : null, onChange: (_, newValue) => {
+                            var _a, _b;
+                            // field.onChange(newValue);
+                            props.setValue(props.item.name, newValue === null || newValue === void 0 ? void 0 : newValue.value);
+                            ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onChangeFn) &&
+                                ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onChangeFn(newValue === null || newValue === void 0 ? void 0 : newValue.value));
+                            (props === null || props === void 0 ? void 0 : props.clearErrors) && (props === null || props === void 0 ? void 0 : props.clearErrors(props.item.name));
+                        }, size: "small", sx: {
+                            "& .MuiAutocomplete-input": {
+                                padding: "0px 0px 0px 5px !important",
+                            },
+                            "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root ": {
+                                top: "-5px",
+                            },
+                        }, disabled: props.item.disable, options: optionsFetched, classes: {
+                            option: props.item.size === "extrasmall"
+                                ? classes.option
+                                : classes.option2,
+                        }, getOptionLabel: (option) => option.label, renderInput: (params) => {
+                            return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: params.inputProps.value && params.inputProps.value }, { children: jsxRuntimeExports.jsx(TextField, Object.assign({}, params, { onChange: (e) => {
+                                        setSearchValue(e.target.value);
+                                    }, placeholder: props.item.placeholder, label: props.item.label })) })));
+                        }, PaperComponent: ({ children }) => (jsxRuntimeExports.jsx("div", Object.assign({ style: {
+                                background: "#fff",
+                            } }, { children: isLoading ? (jsxRuntimeExports.jsxs(Stack, Object.assign({ padding: 2, spacing: 1 }, { children: [jsxRuntimeExports.jsx(Skeleton, { variant: "rectangular", width: "100%", height: 20 }), jsxRuntimeExports.jsx(Skeleton, { variant: "rectangular", width: "100%", height: 20 }), jsxRuntimeExports.jsx(Skeleton, { variant: "rectangular", width: "100%", height: 20 }), jsxRuntimeExports.jsx(Skeleton, { variant: "rectangular", width: "100%", height: 20 }), jsxRuntimeExports.jsx(Skeleton, { variant: "rectangular", width: "100%", height: 20 }), jsxRuntimeExports.jsx(Skeleton, { variant: "rectangular", width: "100%", height: 20 })] }))) : (children) }))), isOptionEqualToValue: isOptionEqualToValue })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
+                            fontFamily: "Roboto-Reg",
+                            fontSize: "11px",
+                            color: "#3651d3",
+                        } }, { children: ["(", (_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.helperText, ")"] }))), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
+        } }));
+};
+
 const renderLabel = (label, isRequired, alignRight) => {
     return (jsxRuntimeExports.jsx(LabelComponent, Object.assign({ container: true, style: { justifyContent: "normal" } }, { children: jsxRuntimeExports.jsxs(Box, Object.assign({ fontSize: "12px", fontFamily: "Roboto-Reg" }, { children: [label, isRequired ? jsxRuntimeExports.jsx(ImportantMark, { children: " *" }) : ""] })) })));
 };
@@ -52477,12 +53003,8 @@ const RenderForm = (props) => {
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(SingleSelect, { props: props }) }));
         case "select-v2":
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(SingleSelectNonAutoComplete, { props: props }) }));
-        // case "select-search-api":
-        //   return (
-        //     <>
-        //       <SingleSelectSearchApi props={props} />
-        //     </>
-        //   );
+        case "select-search-api":
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(SingleSelectSearchApi, { props: props }) }));
         case "number":
         case "pincode":
         case "phoneNumber":