@groupeactual/ui-kit 0.4.1 → 0.4.3

package/dist/cjs/index.js

@@ -528,7 +528,7 @@ function combine (array, callback) {
 var line = 1;
 var column = 1;
 var length = 0;
-var position$1 = 0;
+var position = 0;
 var character = 0;
 var characters = '';
 
@@ -565,7 +565,7 @@ function char () {
  * @return {number}
  */
 function prev () {
-	character = position$1 > 0 ? charat(characters, --position$1) : 0;
+	character = position > 0 ? charat(characters, --position) : 0;
 
 	if (column--, character === 10)
 		column = 1, line--;
@@ -577,7 +577,7 @@ function prev () {
  * @return {number}
  */
 function next () {
-	character = position$1 < length ? charat(characters, position$1++) : 0;
+	character = position < length ? charat(characters, position++) : 0;
 
 	if (column++, character === 10)
 		column = 1, line++;
@@ -589,14 +589,14 @@ function next () {
  * @return {number}
  */
 function peek () {
-	return charat(characters, position$1)
+	return charat(characters, position)
 }
 
 /**
  * @return {number}
  */
 function caret () {
-	return position$1
+	return position
 }
 
 /**
@@ -641,7 +641,7 @@ function token (type) {
  * @return {any[]}
  */
 function alloc (value) {
-	return line = column = 1, length = strlen(characters = value), position$1 = 0, []
+	return line = column = 1, length = strlen(characters = value), position = 0, []
 }
 
 /**
@@ -657,7 +657,7 @@ function dealloc (value) {
  * @return {string}
  */
 function delimit (type) {
-	return trim(slice(position$1 - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
+	return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
 }
 
 /**
@@ -697,7 +697,7 @@ function delimiter (type) {
 		switch (character) {
 			// ] ) " '
 			case type:
-				return position$1
+				return position
 			// " '
 			case 34: case 39:
 				if (type !== 34 && type !== 39)
@@ -714,7 +714,7 @@ function delimiter (type) {
 				break
 		}
 
-	return position$1
+	return position
 }
 
 /**
@@ -731,7 +731,7 @@ function commenter (type, index) {
 		else if (type + character === 42 + 42 && peek() === 47)
 			break
 
-	return '/*' + slice(index, position$1 - 1) + '*' + from(type === 47 ? type : next())
+	return '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())
 }
 
 /**
@@ -742,7 +742,7 @@ function identifier (index) {
 	while (!token(peek()))
 		next();
 
-	return slice(index, position$1)
+	return slice(index, position)
 }
 
 /**
@@ -1029,7 +1029,7 @@ var identifierWithPointTracking = function identifierWithPointTracking(begin, po
     next();
   }
 
-  return slice(begin, position$1);
+  return slice(begin, position);
 };
 
 var toRules = function toRules(parsed, points) {
@@ -1049,7 +1049,7 @@ var toRules = function toRules(parsed, points) {
           points[index] = 1;
         }
 
-        parsed[index] += identifierWithPointTracking(position$1 - 1, points, index);
+        parsed[index] += identifierWithPointTracking(position - 1, points, index);
         break;
 
       case 2:
@@ -4025,7 +4025,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes = {
   styles: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func])
 } : void 0;
 
-/** @license MUI v5.10.16
+/** @license MUI v5.11.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5103,7 +5103,7 @@ function getStyleValue$1(themeMapping, transform, propValueFinal, userValue = pr
     value = getPath(themeMapping, propValueFinal) || userValue;
   }
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
   return value;
 }
@@ -5114,6 +5114,9 @@ function style$1(options) {
     themeKey,
     transform
   } = options;
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     if (props[prop] == null) {
       return null;
@@ -5150,6 +5153,9 @@ function compose(...styles) {
     });
     return acc;
   }, {});
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     return Object.keys(props).reduce((acc, prop) => {
       if (handlers[prop]) {
@@ -5289,24 +5295,28 @@ function style(props, keys) {
   const transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
-process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
+function margin(props) {
+  return style(props, marginKeys);
+}
+margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
   return obj;
 }, {}) : {};
-process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
+margin.filterProps = marginKeys;
+function padding(props) {
+  return style(props, paddingKeys);
+}
+padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
   return obj;
 }, {}) : {};
-function spacing(props) {
-  return style(props, spacingKeys);
-}
-spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
+padding.filterProps = paddingKeys;
+process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
   return obj;
 }, {}) : {};
-spacing.filterProps = spacingKeys;
 
-function getBorder(value) {
+function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;
   }
@@ -5315,27 +5325,27 @@ function getBorder(value) {
 const border = style$1({
   prop: 'border',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderTop = style$1({
   prop: 'borderTop',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderRight = style$1({
   prop: 'borderRight',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderBottom = style$1({
   prop: 'borderBottom',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderLeft = style$1({
   prop: 'borderLeft',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderColor = style$1({
   prop: 'borderColor',
@@ -5357,6 +5367,9 @@ const borderLeftColor = style$1({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const borderRadius = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
@@ -5371,77 +5384,10 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
   borderRadius: responsivePropType$1
 } : {};
 borderRadius.filterProps = ['borderRadius'];
-const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
-var borders$1 = borders;
-
-const displayPrint = style$1({
-  prop: 'displayPrint',
-  cssProperty: false,
-  transform: value => ({
-    '@media print': {
-      display: value
-    }
-  })
-});
-const displayRaw = style$1({
-  prop: 'display'
-});
-const overflow = style$1({
-  prop: 'overflow'
-});
-const textOverflow = style$1({
-  prop: 'textOverflow'
-});
-const visibility = style$1({
-  prop: 'visibility'
-});
-const whiteSpace = style$1({
-  prop: 'whiteSpace'
-});
-var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
-
-const flexBasis = style$1({
-  prop: 'flexBasis'
-});
-const flexDirection = style$1({
-  prop: 'flexDirection'
-});
-const flexWrap = style$1({
-  prop: 'flexWrap'
-});
-const justifyContent = style$1({
-  prop: 'justifyContent'
-});
-const alignItems = style$1({
-  prop: 'alignItems'
-});
-const alignContent = style$1({
-  prop: 'alignContent'
-});
-const order = style$1({
-  prop: 'order'
-});
-const flex = style$1({
-  prop: 'flex'
-});
-const flexGrow = style$1({
-  prop: 'flexGrow'
-});
-const flexShrink = style$1({
-  prop: 'flexShrink'
-});
-const alignSelf = style$1({
-  prop: 'alignSelf'
-});
-const justifyItems = style$1({
-  prop: 'justifyItems'
-});
-const justifySelf = style$1({
-  prop: 'justifySelf'
-});
-const flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
-var flexbox$1 = flexbox;
+compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
 
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
@@ -5456,6 +5402,9 @@ gap.propTypes = process.env.NODE_ENV !== 'production' ? {
   gap: responsivePropType$1
 } : {};
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
@@ -5470,6 +5419,9 @@ columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   columnGap: responsivePropType$1
 } : {};
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
@@ -5511,10 +5463,9 @@ const gridTemplateAreas = style$1({
 const gridArea = style$1({
   prop: 'gridArea'
 });
-const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-var grid$1 = grid;
+compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
 
-function transform$1(value, userValue) {
+function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
@@ -5523,55 +5474,27 @@ function transform$1(value, userValue) {
 const color = style$1({
   prop: 'color',
   themeKey: 'palette',
-  transform: transform$1
+  transform: paletteTransform
 });
 const bgcolor = style$1({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
-  transform: transform$1
+  transform: paletteTransform
 });
 const backgroundColor = style$1({
   prop: 'backgroundColor',
   themeKey: 'palette',
-  transform: transform$1
-});
-const palette = compose(color, bgcolor, backgroundColor);
-var palette$1 = palette;
-
-const position = style$1({
-  prop: 'position'
-});
-const zIndex$2 = style$1({
-  prop: 'zIndex',
-  themeKey: 'zIndex'
-});
-const top = style$1({
-  prop: 'top'
-});
-const right = style$1({
-  prop: 'right'
-});
-const bottom = style$1({
-  prop: 'bottom'
-});
-const left = style$1({
-  prop: 'left'
-});
-var positions = compose(position, zIndex$2, top, right, bottom, left);
-
-const boxShadow = style$1({
-  prop: 'boxShadow',
-  themeKey: 'shadows'
+  transform: paletteTransform
 });
-var shadows$2 = boxShadow;
+compose(color, bgcolor, backgroundColor);
 
-function transform(value) {
+function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
 const width = style$1({
   prop: 'width',
-  transform
+  transform: sizingTransform
 });
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
@@ -5579,7 +5502,7 @@ const maxWidth = props => {
       var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
       const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values$1[propValue];
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
     };
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -5589,102 +5512,314 @@ const maxWidth = props => {
 maxWidth.filterProps = ['maxWidth'];
 const minWidth = style$1({
   prop: 'minWidth',
-  transform
+  transform: sizingTransform
 });
 const height = style$1({
   prop: 'height',
-  transform
+  transform: sizingTransform
 });
 const maxHeight = style$1({
   prop: 'maxHeight',
-  transform
+  transform: sizingTransform
 });
 const minHeight = style$1({
   prop: 'minHeight',
-  transform
+  transform: sizingTransform
 });
 style$1({
   prop: 'size',
   cssProperty: 'width',
-  transform
+  transform: sizingTransform
 });
 style$1({
   prop: 'size',
   cssProperty: 'height',
-  transform
+  transform: sizingTransform
 });
 const boxSizing = style$1({
   prop: 'boxSizing'
 });
-const sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
-var sizing$1 = sizing;
+compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
 
-const fontFamily = style$1({
-  prop: 'fontFamily',
-  themeKey: 'typography'
-});
-const fontSize = style$1({
-  prop: 'fontSize',
-  themeKey: 'typography'
-});
-const fontStyle = style$1({
-  prop: 'fontStyle',
-  themeKey: 'typography'
-});
-const fontWeight = style$1({
-  prop: 'fontWeight',
-  themeKey: 'typography'
-});
-const letterSpacing = style$1({
-  prop: 'letterSpacing'
-});
-const textTransform = style$1({
-  prop: 'textTransform'
-});
-const lineHeight = style$1({
-  prop: 'lineHeight'
-});
-const textAlign = style$1({
-  prop: 'textAlign'
-});
-const typographyVariant = style$1({
-  prop: 'typography',
-  cssProperty: false,
-  themeKey: 'typography'
-});
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
-var typography$1 = typography;
-
-const filterPropsMapping = {
-  borders: borders$1.filterProps,
-  display: display.filterProps,
-  flexbox: flexbox$1.filterProps,
-  grid: grid$1.filterProps,
-  positions: positions.filterProps,
-  palette: palette$1.filterProps,
-  shadows: shadows$2.filterProps,
-  sizing: sizing$1.filterProps,
-  spacing: spacing.filterProps,
-  typography: typography$1.filterProps
-};
-const styleFunctionMapping = {
-  borders: borders$1,
-  display,
-  flexbox: flexbox$1,
-  grid: grid$1,
-  positions,
-  palette: palette$1,
-  shadows: shadows$2,
-  sizing: sizing$1,
-  spacing,
-  typography: typography$1
+const defaultSxConfig = {
+  // borders
+  border: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderTop: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderRight: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderBottom: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderLeft: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderColor: {
+    themeKey: 'palette'
+  },
+  borderTopColor: {
+    themeKey: 'palette'
+  },
+  borderRightColor: {
+    themeKey: 'palette'
+  },
+  borderBottomColor: {
+    themeKey: 'palette'
+  },
+  borderLeftColor: {
+    themeKey: 'palette'
+  },
+  borderRadius: {
+    themeKey: 'shape.borderRadius',
+    style: borderRadius
+  },
+  // palette
+  color: {
+    themeKey: 'palette',
+    transform: paletteTransform
+  },
+  bgcolor: {
+    themeKey: 'palette',
+    cssProperty: 'backgroundColor',
+    transform: paletteTransform
+  },
+  backgroundColor: {
+    themeKey: 'palette',
+    transform: paletteTransform
+  },
+  // spacing
+  p: {
+    style: padding
+  },
+  pt: {
+    style: padding
+  },
+  pr: {
+    style: padding
+  },
+  pb: {
+    style: padding
+  },
+  pl: {
+    style: padding
+  },
+  px: {
+    style: padding
+  },
+  py: {
+    style: padding
+  },
+  padding: {
+    style: padding
+  },
+  paddingTop: {
+    style: padding
+  },
+  paddingRight: {
+    style: padding
+  },
+  paddingBottom: {
+    style: padding
+  },
+  paddingLeft: {
+    style: padding
+  },
+  paddingX: {
+    style: padding
+  },
+  paddingY: {
+    style: padding
+  },
+  paddingInline: {
+    style: padding
+  },
+  paddingInlineStart: {
+    style: padding
+  },
+  paddingInlineEnd: {
+    style: padding
+  },
+  paddingBlock: {
+    style: padding
+  },
+  paddingBlockStart: {
+    style: padding
+  },
+  paddingBlockEnd: {
+    style: padding
+  },
+  m: {
+    style: margin
+  },
+  mt: {
+    style: margin
+  },
+  mr: {
+    style: margin
+  },
+  mb: {
+    style: margin
+  },
+  ml: {
+    style: margin
+  },
+  mx: {
+    style: margin
+  },
+  my: {
+    style: margin
+  },
+  margin: {
+    style: margin
+  },
+  marginTop: {
+    style: margin
+  },
+  marginRight: {
+    style: margin
+  },
+  marginBottom: {
+    style: margin
+  },
+  marginLeft: {
+    style: margin
+  },
+  marginX: {
+    style: margin
+  },
+  marginY: {
+    style: margin
+  },
+  marginInline: {
+    style: margin
+  },
+  marginInlineStart: {
+    style: margin
+  },
+  marginInlineEnd: {
+    style: margin
+  },
+  marginBlock: {
+    style: margin
+  },
+  marginBlockStart: {
+    style: margin
+  },
+  marginBlockEnd: {
+    style: margin
+  },
+  // display
+  displayPrint: {
+    cssProperty: false,
+    transform: value => ({
+      '@media print': {
+        display: value
+      }
+    })
+  },
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+  // grid
+  gap: {
+    style: gap
+  },
+  rowGap: {
+    style: rowGap
+  },
+  columnGap: {
+    style: columnGap
+  },
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+  // positions
+  position: {},
+  zIndex: {
+    themeKey: 'zIndex'
+  },
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+  // shadows
+  boxShadow: {
+    themeKey: 'shadows'
+  },
+  // sizing
+  width: {
+    transform: sizingTransform
+  },
+  maxWidth: {
+    style: maxWidth
+  },
+  minWidth: {
+    transform: sizingTransform
+  },
+  height: {
+    transform: sizingTransform
+  },
+  maxHeight: {
+    transform: sizingTransform
+  },
+  minHeight: {
+    transform: sizingTransform
+  },
+  boxSizing: {},
+  // typography
+  fontFamily: {
+    themeKey: 'typography'
+  },
+  fontSize: {
+    themeKey: 'typography'
+  },
+  fontStyle: {
+    themeKey: 'typography'
+  },
+  fontWeight: {
+    themeKey: 'typography'
+  },
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {
+    cssProperty: false,
+    themeKey: 'typography'
+  }
 };
-const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
-  filterPropsMapping[styleFnName].forEach(propName => {
-    acc[propName] = styleFunctionMapping[styleFnName];
-  });
-  return acc;
-}, {});
+var defaultSxConfig$1 = defaultSxConfig;
 
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
@@ -5696,24 +5831,48 @@ function callIfFn(maybeFn, arg) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMapping) {
-  const propToStyleFunction = Object.keys(styleFunctionMapping$1).reduce((acc, styleFnName) => {
-    styleFunctionMapping$1[styleFnName].filterProps.forEach(propName => {
-      acc[propName] = styleFunctionMapping$1[styleFnName];
-    });
-    return acc;
-  }, {});
-  function getThemeValue(prop, value, theme) {
-    const inputProps = {
-      [prop]: value,
+function unstable_createStyleFunctionSx() {
+  function getThemeValue(prop, val, theme, config) {
+    const props = {
+      [prop]: val,
       theme
     };
-    const styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : {
-      [prop]: value
+    const options = config[prop];
+    if (!options) {
+      return {
+        [prop]: val
+      };
+    }
+    const {
+      cssProperty = prop,
+      themeKey,
+      transform,
+      style
+    } = options;
+    if (val == null) {
+      return null;
+    }
+    const themeMapping = getPath(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    const styleFromPropValue = propValueFinal => {
+      let value = getStyleValue$1(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
     };
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
+    var _theme$unstable_sxCon;
     const {
       sx,
       theme = {}
@@ -5722,6 +5881,8 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
       return null; // Emotion & styled-components will neglect null
     }
 
+    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig$1;
+
     /*
      * Receive `sxInput` as object or callback
      * and then recursively check keys & values to create media query object styles.
@@ -5745,8 +5906,8 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
         const value = callIfFn(sxObject[styleKey], theme);
         if (value !== null && value !== undefined) {
           if (typeof value === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme));
+            if (config[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
               const breakpointsValues = handleBreakpoints({
                 theme
@@ -5763,7 +5924,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });
@@ -5775,16 +5936,18 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var defaultStyleFunctionSx = styleFunctionSx;
+var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$L = ["sx"];
+const _excluded$M = ["sx"];
 const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
   Object.keys(props).forEach(prop => {
-    if (propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
     } else {
       result.otherProps[prop] = props[prop];
@@ -5796,7 +5959,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$L);
+    other = _objectWithoutPropertiesLoose(props, _excluded$M);
   const {
     systemProps,
     otherProps
@@ -5822,7 +5985,7 @@ function extendSxProp(props) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$K = ["values", "unit", "step"];
+const _excluded$L = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5857,7 +6020,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$K);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$L);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -5936,7 +6099,7 @@ function createSpacing(spacingInput = 8) {
   return spacing;
 }
 
-const _excluded$J = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$K = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -5944,7 +6107,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$J);
+    other = _objectWithoutPropertiesLoose(options, _excluded$K);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -5959,6 +6122,13 @@ function createTheme$1(options = {}, ...args) {
     shape: _extends({}, shape$1, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx$1({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 
@@ -6048,17 +6218,16 @@ function useTheme$1(defaultTheme = systemDefaultTheme$1) {
   return useTheme$2(defaultTheme);
 }
 
-const _excluded$I = ["className", "component"];
+const _excluded$J = ["className", "component"];
 function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = defaultStyleFunctionSx
+    generateClassName
   } = options;
   const BoxRoot = styled$2('div', {
     shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
+  })(styleFunctionSx$1);
   const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
     const theme = useTheme$1(defaultTheme);
     const _extendSxProp = extendSxProp(inProps),
@@ -6066,7 +6235,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$I);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$J);
     return /*#__PURE__*/jsxRuntime.jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -6099,7 +6268,7 @@ process.env.NODE_ENV !== "production" ? Box$2.propTypes /* remove-proptypes */ =
 } : void 0;
 var Box$3 = Box$2;
 
-const _excluded$H = ["variant"];
+const _excluded$I = ["variant"];
 function isEmpty$3(string) {
   return string.length === 0;
 }
@@ -6113,7 +6282,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$H);
+    other = _objectWithoutPropertiesLoose(props, _excluded$I);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -6125,7 +6294,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$G = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+const _excluded$H = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
   _excluded2$2 = ["theme"],
   _excluded3 = ["theme"];
 function isEmpty$2(obj) {
@@ -6193,12 +6362,11 @@ function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = defaultStyleFunctionSx
+    slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
     const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
-    return styleFunctionSx(_extends({}, props, {
+    return styleFunctionSx$1(_extends({}, props, {
       theme
     }));
   };
@@ -6213,7 +6381,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$G);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$H);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6645,7 +6813,7 @@ function createMixins(breakpoints, mixins) {
   }, mixins);
 }
 
-const _excluded$F = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$G = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -6814,7 +6982,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$F);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$G);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -6938,7 +7106,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$E = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$F = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -6969,7 +7137,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -7029,7 +7197,7 @@ function createShadow(...px) {
 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)];
 var shadows$1 = shadows;
 
-const _excluded$D = ["duration", "easing", "delay"];
+const _excluded$E = ["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 = {
@@ -7080,7 +7248,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$D);
+      other = _objectWithoutPropertiesLoose(options, _excluded$E);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -7127,7 +7295,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$C = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$D = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -7135,7 +7303,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$C);
+    other = _objectWithoutPropertiesLoose(options, _excluded$D);
   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(18));
@@ -7182,6 +7350,13 @@ Please use another name.` : formatMuiErrorMessage(18));
       }
     });
   }
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx$1({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 
@@ -7370,7 +7545,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$B = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$C = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * Builds the props to be passed into the slot of an unstyled component.
  * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
@@ -7385,7 +7560,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$B);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$C);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -38859,8 +39034,8 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden']);
 
-const _excluded$A = ["children", "classes", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
-const useUtilityClasses$t = ownerState => {
+const _excluded$B = ["children", "classes", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const useUtilityClasses$u = ownerState => {
   const {
     open,
     exited,
@@ -38924,8 +39099,8 @@ const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUns
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$A);
-  const [exited, setExited] = React__namespace.useState(true);
+    other = _objectWithoutPropertiesLoose(props, _excluded$B);
+  const [exited, setExited] = React__namespace.useState(!open);
   const modal = React__namespace.useRef({});
   const mountNodeRef = React__namespace.useRef(null);
   const modalRef = React__namespace.useRef(null);
@@ -38995,7 +39170,7 @@ const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUns
     hideBackdrop,
     keepMounted
   });
-  const classes = useUtilityClasses$t(ownerState);
+  const classes = useUtilityClasses$u(ownerState);
   const handleEnter = () => {
     setExited(false);
     if (onTransitionEnter) {
@@ -39221,7 +39396,7 @@ process.env.NODE_ENV !== "production" ? ModalUnstyled.propTypes /* remove-propty
 } : void 0;
 var ModalUnstyled$1 = ModalUnstyled;
 
-const _excluded$z = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$A = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(computedStyle, property) {
   return parseInt(computedStyle[property], 10) || 0;
 }
@@ -39251,7 +39426,7 @@ const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function Texta
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$A);
   const {
     current: isControlled
   } = React__namespace.useRef(value != null);
@@ -39462,8 +39637,8 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$y = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$s = ownerState => {
+const _excluded$z = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$t = ownerState => {
   const {
     color,
     fontSize,
@@ -39528,7 +39703,7 @@ const SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProp
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$z);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -39541,7 +39716,7 @@ const SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProp
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$s(ownerState);
+  const classes = useUtilityClasses$t(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
@@ -40657,8 +40832,8 @@ function getCollapseUtilityClass(slot) {
 }
 generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
 
-const _excluded$x = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
-const useUtilityClasses$r = ownerState => {
+const _excluded$y = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+const useUtilityClasses$s = ownerState => {
   const {
     orientation,
     classes
@@ -40757,12 +40932,12 @@ const Collapse = /*#__PURE__*/React__namespace.forwardRef(function Collapse(inPr
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$x);
+    other = _objectWithoutPropertiesLoose(props, _excluded$y);
   const ownerState = _extends({}, props, {
     orientation,
     collapsedSize: collapsedSizeProp
   });
-  const classes = useUtilityClasses$r(ownerState);
+  const classes = useUtilityClasses$s(ownerState);
   const theme = useTheme();
   const timer = React__namespace.useRef();
   const wrapperRef = React__namespace.useRef(null);
@@ -41024,8 +41199,8 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('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$w = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$q = ownerState => {
+const _excluded$x = ["className", "component", "elevation", "square", "variant"];
+const useUtilityClasses$r = ownerState => {
   const {
     square,
     elevation,
@@ -41079,14 +41254,14 @@ const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, r
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$x);
   const ownerState = _extends({}, props, {
     component,
     elevation,
     square,
     variant
   });
-  const classes = useUtilityClasses$q(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme();
@@ -41171,8 +41346,8 @@ function getAccordionUtilityClass(slot) {
 const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
 var accordionClasses$1 = accordionClasses;
 
-const _excluded$v = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
-const useUtilityClasses$p = ownerState => {
+const _excluded$w = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+const useUtilityClasses$q = ownerState => {
   const {
     classes,
     square,
@@ -41284,7 +41459,7 @@ const Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(in
       TransitionComponent = Collapse$1,
       TransitionProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$w);
   const [expanded, setExpandedState] = useControlled({
     controlled: expandedProp,
     default: defaultExpanded,
@@ -41310,7 +41485,7 @@ const Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(in
     disableGutters,
     expanded
   });
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(AccordionRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -41415,8 +41590,8 @@ function getAccordionDetailsUtilityClass(slot) {
 }
 generateUtilityClasses('MuiAccordionDetails', ['root']);
 
-const _excluded$u = ["className"];
-const useUtilityClasses$o = ownerState => {
+const _excluded$v = ["className"];
+const useUtilityClasses$p = ownerState => {
   const {
     classes
   } = ownerState;
@@ -41442,9 +41617,9 @@ const AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function Accor
   const {
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
   const ownerState = props;
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$p(ownerState);
   return /*#__PURE__*/jsxRuntime.jsx(AccordionDetailsRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -41557,7 +41732,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 var touchRippleClasses$1 = touchRippleClasses;
 
-const _excluded$t = ["center", "classes", "className"];
+const _excluded$u = ["center", "classes", "className"];
 let _ = t => t,
   _t,
   _t2,
@@ -41686,7 +41861,7 @@ const TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRippl
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const [ripples, setRipples] = React__namespace.useState([]);
   const nextKey = React__namespace.useRef(0);
   const rippleCallback = React__namespace.useRef(null);
@@ -41887,8 +42062,8 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$s = ["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$n = ownerState => {
+const _excluded$t = ["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$o = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -41989,7 +42164,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const buttonRef = React__namespace.useRef(null);
   const rippleRef = React__namespace.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -42156,7 +42331,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -42353,8 +42528,8 @@ function getAccordionSummaryUtilityClass(slot) {
 const accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
 var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-const _excluded$r = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
-const useUtilityClasses$m = ownerState => {
+const _excluded$s = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
+const useUtilityClasses$n = ownerState => {
   const {
     classes,
     expanded,
@@ -42448,7 +42623,7 @@ const AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function Accor
       focusVisibleClassName,
       onClick
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const {
     disabled = false,
     disableGutters,
@@ -42468,7 +42643,7 @@ const AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function Accor
     disabled,
     disableGutters
   });
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(AccordionSummaryRoot, _extends({
     focusRipple: false,
     disableRipple: true,
@@ -42538,8 +42713,8 @@ function getTypographyUtilityClass(slot) {
 }
 generateUtilityClasses('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$q = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$l = ownerState => {
+const _excluded$r = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$m = ownerState => {
   const {
     align,
     gutterBottom,
@@ -42622,7 +42797,7 @@ const Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const ownerState = _extends({}, props, {
     align,
     color,
@@ -42635,7 +42810,7 @@ const Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /*#__PURE__*/jsxRuntime.jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
@@ -42804,7 +42979,7 @@ function getInputBaseUtilityClass(slot) {
 const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 var inputBaseClasses$1 = inputBaseClasses;
 
-const _excluded$p = ["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$q = ["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
@@ -42817,7 +42992,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$k = ownerState => {
+const useUtilityClasses$l = ownerState => {
   const {
     classes,
     color,
@@ -43035,7 +43210,7 @@ const InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(in
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$q);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -43209,7 +43384,7 @@ const InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(in
     startAdornment,
     type
   });
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
@@ -43513,7 +43688,7 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsxRuntime.jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$o = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$p = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles$1 = {
   entering: {
     opacity: 1
@@ -43550,7 +43725,7 @@ const Fade = /*#__PURE__*/React__namespace.forwardRef(function Fade(props, ref)
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   const nodeRef = React__namespace.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -43711,8 +43886,8 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$n = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
-const useUtilityClasses$j = ownerState => {
+const _excluded$o = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
+const useUtilityClasses$k = ownerState => {
   const {
     classes,
     invisible
@@ -43767,12 +43942,12 @@ const Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inPr
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Fade$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$n);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const ownerState = _extends({}, props, {
     component,
     invisible
   });
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/jsxRuntime.jsx(TransitionComponent, _extends({
     in: open,
@@ -43924,8 +44099,8 @@ if (process.env.NODE_ENV !== 'production') {
 }
 var ButtonGroupContext$1 = ButtonGroupContext;
 
-const _excluded$m = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
-const useUtilityClasses$i = ownerState => {
+const _excluded$n = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const useUtilityClasses$j = ownerState => {
   const {
     color,
     disableElevation,
@@ -44150,7 +44325,7 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps,
       type,
       variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$n);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -44162,7 +44337,7 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps,
     type,
     variant
   });
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/jsxRuntime.jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
@@ -44288,8 +44463,8 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const _excluded$l = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
-const useUtilityClasses$h = ownerState => {
+const _excluded$m = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+const useUtilityClasses$i = ownerState => {
   const {
     classes,
     checked,
@@ -44352,7 +44527,7 @@ const SwitchBase = /*#__PURE__*/React__namespace.forwardRef(function SwitchBase(
       type,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$l);
+    other = _objectWithoutPropertiesLoose(props, _excluded$m);
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -44401,7 +44576,7 @@ const SwitchBase = /*#__PURE__*/React__namespace.forwardRef(function SwitchBase(
     disableFocusRipple,
     edge
   });
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(SwitchBaseRoot, _extends({
     component: "span",
     className: clsx(classes.root, className),
@@ -44562,8 +44737,8 @@ function getCheckboxUtilityClass(slot) {
 const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary']);
 var checkboxClasses$1 = checkboxClasses;
 
-const _excluded$k = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
-const useUtilityClasses$g = ownerState => {
+const _excluded$l = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
+const useUtilityClasses$h = ownerState => {
   const {
     classes,
     indeterminate,
@@ -44625,7 +44800,7 @@ const Checkbox$1 = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(in
       size = 'medium',
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$l);
   const icon = indeterminate ? indeterminateIconProp : iconProp;
   const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
   const ownerState = _extends({}, props, {
@@ -44633,7 +44808,7 @@ const Checkbox$1 = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(in
     indeterminate,
     size
   });
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   return /*#__PURE__*/jsxRuntime.jsx(CheckboxRoot, _extends({
     type: "checkbox",
     inputProps: _extends({
@@ -44752,7 +44927,7 @@ process.env.NODE_ENV !== "production" ? Checkbox$1.propTypes /* remove-proptypes
 } : void 0;
 var CheckboxMUI = Checkbox$1;
 
-const _excluded$j = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded$k = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 const extendUtilityClasses = ownerState => {
   return ownerState.classes;
 };
@@ -44828,7 +45003,7 @@ const Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, r
       // eslint-disable-next-line react/prop-types
       theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$k);
   const [exited, setExited] = React__namespace.useState(true);
   const commonProps = {
     closeAfterTransition,
@@ -45038,8 +45213,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
 } : void 0;
 var Modal$1 = Modal;
 
-const _excluded$i = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$f = ownerState => {
+const _excluded$j = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$g = ownerState => {
   const {
     classes,
     disableUnderline
@@ -45222,14 +45397,14 @@ const FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInpu
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const ownerState = _extends({}, props, {
     fullWidth,
     inputComponent,
     multiline,
     type
   });
-  const classes = useUtilityClasses$f(props);
+  const classes = useUtilityClasses$g(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -45457,8 +45632,8 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$h = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-const useUtilityClasses$e = ownerState => {
+const _excluded$i = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const useUtilityClasses$f = ownerState => {
   const {
     classes,
     margin,
@@ -45520,7 +45695,7 @@ const FormControlRoot = styled$1('div', {
  * </FormControl>
  * ```
  *
- * ⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.
+ * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
  * For instance, only one input can be focused at the same time, the state shouldn't be shared.
  */
 const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormControl(inProps, ref) {
@@ -45543,7 +45718,7 @@ const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormContro
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -45556,7 +45731,7 @@ const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormContro
     size,
     variant
   });
-  const classes = useUtilityClasses$e(ownerState);
+  const classes = useUtilityClasses$f(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.
@@ -45738,8 +45913,8 @@ function getFormControlLabelUtilityClasses(slot) {
 const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
 var formControlLabelClasses$1 = formControlLabelClasses;
 
-const _excluded$g = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
-const useUtilityClasses$d = ownerState => {
+const _excluded$h = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+const useUtilityClasses$e = ownerState => {
   const {
     classes,
     disabled,
@@ -45818,7 +45993,7 @@ const FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormC
       labelPlacement = 'end',
       slotProps = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$g);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const muiFormControl = useFormControl();
   let disabled = disabledProp;
   if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
@@ -45845,7 +46020,7 @@ const FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormC
     labelPlacement,
     error: fcs.error
   });
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
   let label = labelProp;
   if (label != null && label.type !== Typography$1 && !disableTypography) {
@@ -45949,8 +46124,8 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
 var formHelperTextClasses$1 = formHelperTextClasses;
 
 var _span$2;
-const _excluded$f = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-const useUtilityClasses$c = ownerState => {
+const _excluded$g = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const useUtilityClasses$d = ownerState => {
   const {
     classes,
     contained,
@@ -46008,7 +46183,7 @@ const FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHel
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -46026,7 +46201,7 @@ const FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHel
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$c(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   return /*#__PURE__*/jsxRuntime.jsx(FormHelperTextRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -46106,8 +46281,8 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
-const _excluded$e = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-const useUtilityClasses$b = ownerState => {
+const _excluded$f = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const useUtilityClasses$c = ownerState => {
   const {
     classes,
     color,
@@ -46171,7 +46346,7 @@ const FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(in
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -46187,7 +46362,7 @@ const FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(in
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$b(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(FormLabelRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -46257,7 +46432,7 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes
 } : void 0;
 var FormLabel$1 = FormLabel;
 
-const _excluded$d = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$e = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -46301,7 +46476,7 @@ const Grow = /*#__PURE__*/React__namespace.forwardRef(function Grow(props, ref)
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+    other = _objectWithoutPropertiesLoose(props, _excluded$e);
   const timer = React__namespace.useRef();
   const autoTimeout = React__namespace.useRef();
   const theme = useTheme();
@@ -46505,8 +46680,8 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
-const _excluded$c = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$a = ownerState => {
+const _excluded$d = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$b = ownerState => {
   const {
     classes,
     disableUnderline
@@ -46618,8 +46793,8 @@ const Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, r
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$c);
-  const classes = useUtilityClasses$a(props);
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+  const classes = useUtilityClasses$b(props);
   const ownerState = {
     disableUnderline
   };
@@ -46840,8 +47015,8 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$b = ["disableAnimation", "margin", "shrink", "variant", "className"];
-const useUtilityClasses$9 = ownerState => {
+const _excluded$c = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const useUtilityClasses$a = ownerState => {
   const {
     classes,
     formControl,
@@ -46940,7 +47115,7 @@ const InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$b);
+    other = _objectWithoutPropertiesLoose(props, _excluded$c);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -46959,7 +47134,7 @@ const InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(
     variant: fcs.variant,
     required: fcs.required
   });
-  const classes = useUtilityClasses$9(ownerState);
+  const classes = useUtilityClasses$a(ownerState);
   return /*#__PURE__*/jsxRuntime.jsx(InputLabelRoot, _extends({
     "data-shrink": shrink,
     ownerState: ownerState,
@@ -47068,8 +47243,8 @@ const getTextDecoration = ({
 };
 var getTextDecoration$1 = getTextDecoration;
 
-const _excluded$a = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
-const useUtilityClasses$8 = ownerState => {
+const _excluded$b = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
+const useUtilityClasses$9 = ownerState => {
   const {
     classes,
     component,
@@ -47157,7 +47332,7 @@ const Link$1 = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, r
       variant = 'inherit',
       sx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    other = _objectWithoutPropertiesLoose(props, _excluded$b);
   const {
     isFocusVisibleRef,
     onBlur: handleBlurVisible,
@@ -47191,7 +47366,7 @@ const Link$1 = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, r
     underline,
     variant
   });
-  const classes = useUtilityClasses$8(ownerState);
+  const classes = useUtilityClasses$9(ownerState);
   return /*#__PURE__*/jsxRuntime.jsx(LinkRoot, _extends({
     color: color,
     className: clsx(classes.root, className),
@@ -47277,8 +47452,8 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$9 = ["children", "className", "component", "dense", "disablePadding", "subheader"];
-const useUtilityClasses$7 = ownerState => {
+const _excluded$a = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const useUtilityClasses$8 = ownerState => {
   const {
     classes,
     disablePadding,
@@ -47325,7 +47500,7 @@ const List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+    other = _objectWithoutPropertiesLoose(props, _excluded$a);
   const context = React__namespace.useMemo(() => ({
     dense
   }), [dense]);
@@ -47334,7 +47509,7 @@ const List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref
     dense,
     disablePadding
   });
-  const classes = useUtilityClasses$7(ownerState);
+  const classes = useUtilityClasses$8(ownerState);
   return /*#__PURE__*/jsxRuntime.jsx(ListContext$1.Provider, {
     value: context,
     children: /*#__PURE__*/jsxRuntime.jsxs(ListRoot, _extends({
@@ -47392,7 +47567,7 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
 } : void 0;
 var List$1 = List;
 
-const _excluded$8 = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const _excluded$9 = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -47474,7 +47649,7 @@ const MenuList = /*#__PURE__*/React__namespace.forwardRef(function MenuList(prop
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$8);
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
   const listRef = React__namespace.useRef(null);
   const textCriteriaRef = React__namespace.useRef({
     keys: [],
@@ -47653,7 +47828,7 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
-const _excluded$7 = ["onEntering"],
+const _excluded$8 = ["onEntering"],
   _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
 function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -47683,7 +47858,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$6 = ownerState => {
+const useUtilityClasses$7 = ownerState => {
   const {
     classes
   } = ownerState;
@@ -47746,7 +47921,7 @@ const Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProp
         onEntering
       } = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$7),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$8),
     other = _objectWithoutPropertiesLoose(props, _excluded2$1);
   const paperRef = React__namespace.useRef();
   const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
@@ -47761,7 +47936,7 @@ const Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProp
     transitionDuration: transitionDurationProp,
     TransitionProps
   });
-  const classes = useUtilityClasses$6(ownerState);
+  const classes = useUtilityClasses$7(ownerState);
 
   // Returns the top/left offset of the position
   // to attach to on the anchor element (or body if none is provided)
@@ -48107,7 +48282,7 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$6 = ["onEntering"],
+const _excluded$7 = ["onEntering"],
   _excluded2 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -48117,7 +48292,7 @@ const LTR_ORIGIN = {
   vertical: 'top',
   horizontal: 'left'
 };
-const useUtilityClasses$5 = ownerState => {
+const useUtilityClasses$6 = ownerState => {
   const {
     classes
   } = ownerState;
@@ -48174,7 +48349,7 @@ const Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref
       } = {},
       variant = 'selectedMenu'
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$6),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$7),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
@@ -48188,7 +48363,7 @@ const Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref
     TransitionProps,
     variant
   });
-  const classes = useUtilityClasses$5(ownerState);
+  const classes = useUtilityClasses$6(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React__namespace.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -48235,7 +48410,6 @@ const Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref
     }
   });
   return /*#__PURE__*/jsxRuntime.jsx(MenuRoot, _extends({
-    classes: PopoverClasses,
     onClose: onClose,
     anchorOrigin: {
       vertical: 'bottom',
@@ -48258,6 +48432,7 @@ const Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref
     }, TransitionProps),
     ownerState: ownerState
   }, other, {
+    classes: PopoverClasses,
     children: /*#__PURE__*/jsxRuntime.jsx(MenuMenuList, _extends({
       onKeyDown: handleListKeyDown,
       actions: menuListActionsRef,
@@ -48361,8 +48536,8 @@ function getNativeSelectUtilityClasses(slot) {
 const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
 var nativeSelectClasses$1 = nativeSelectClasses;
 
-const _excluded$5 = ["className", "disabled", "IconComponent", "inputRef", "variant"];
-const useUtilityClasses$4 = ownerState => {
+const _excluded$6 = ["className", "disabled", "IconComponent", "inputRef", "variant"];
+const useUtilityClasses$5 = ownerState => {
   const {
     classes,
     variant,
@@ -48488,12 +48663,12 @@ const NativeSelectInput = /*#__PURE__*/React__namespace.forwardRef(function Nati
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
   const ownerState = _extends({}, props, {
     disabled,
     variant
   });
-  const classes = useUtilityClasses$4(ownerState);
+  const classes = useUtilityClasses$5(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(NativeSelectSelect, _extends({
       ownerState: ownerState,
@@ -48562,7 +48737,7 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
 var NativeSelectInput$1 = NativeSelectInput;
 
 var _span$1;
-const _excluded$4 = ["children", "classes", "className", "label", "notched"];
+const _excluded$5 = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1('fieldset')({
   textAlign: 'left',
   position: 'absolute',
@@ -48635,7 +48810,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const withLabel = label != null && label !== '';
   const ownerState = _extends({}, props, {
     notched,
@@ -48686,8 +48861,8 @@ process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
   style: PropTypes.object
 } : void 0;
 
-const _excluded$3 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
-const useUtilityClasses$3 = ownerState => {
+const _excluded$4 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const useUtilityClasses$4 = ownerState => {
   const {
     classes
   } = ownerState;
@@ -48805,8 +48980,8 @@ const OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function Outlined
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
-  const classes = useUtilityClasses$3(props);
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const classes = useUtilityClasses$4(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -49027,7 +49202,7 @@ const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple',
 var selectClasses$1 = selectClasses;
 
 var _span;
-const _excluded$2 = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded$3 = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "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',
@@ -49092,7 +49267,7 @@ function areEqualValues(a, b) {
 function isEmpty(display) {
   return display == null || typeof display === 'string' && !display.trim();
 }
-const useUtilityClasses$2 = ownerState => {
+const useUtilityClasses$3 = ownerState => {
   const {
     classes,
     variant,
@@ -49142,7 +49317,7 @@ const SelectInput = /*#__PURE__*/React__namespace.forwardRef(function SelectInpu
       value: valueProp,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -49445,7 +49620,7 @@ const SelectInput = /*#__PURE__*/React__namespace.forwardRef(function SelectInpu
     value,
     open
   });
-  const classes = useUtilityClasses$2(ownerState);
+  const classes = useUtilityClasses$3(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(SelectSelect, _extends({
       ref: handleDisplayRef,
@@ -49659,8 +49834,8 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
 var SelectInput$1 = SelectInput;
 
 var _StyledInput, _StyledFilledInput;
-const _excluded$1 = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
-const useUtilityClasses$1 = ownerState => {
+const _excluded$2 = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const useUtilityClasses$2 = ownerState => {
   const {
     classes
   } = ownerState;
@@ -49703,7 +49878,7 @@ const Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps,
       SelectDisplayProps,
       variant: variantProp = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
   const inputComponent = native ? NativeSelectInput$1 : SelectInput$1;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -49723,7 +49898,7 @@ const Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps,
     variant,
     classes: classesProp
   });
-  const classes = useUtilityClasses$1(ownerState);
+  const classes = useUtilityClasses$2(ownerState);
   const inputComponentRef = useForkRef(ref, InputComponent.ref);
   return /*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
     children: /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
@@ -49915,6 +50090,140 @@ process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */
 Select.muiName = 'Select';
 var Select$1 = Select;
 
+/**
+ * @ignore - internal component.
+ */
+const TableContext = /*#__PURE__*/React__namespace.createContext();
+if (process.env.NODE_ENV !== 'production') {
+  TableContext.displayName = 'TableContext';
+}
+var TableContext$1 = TableContext;
+
+function getTableUtilityClass(slot) {
+  return generateUtilityClass('MuiTable', slot);
+}
+generateUtilityClasses('MuiTable', ['root', 'stickyHeader']);
+
+const _excluded$1 = ["className", "component", "padding", "size", "stickyHeader"];
+const useUtilityClasses$1 = ownerState => {
+  const {
+    classes,
+    stickyHeader
+  } = ownerState;
+  const slots = {
+    root: ['root', stickyHeader && 'stickyHeader']
+  };
+  return composeClasses(slots, getTableUtilityClass, classes);
+};
+const TableRoot = styled$1('table', {
+  name: 'MuiTable',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.stickyHeader && styles.stickyHeader];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  display: 'table',
+  width: '100%',
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+  '& caption': _extends({}, theme.typography.body2, {
+    padding: theme.spacing(2),
+    color: (theme.vars || theme).palette.text.secondary,
+    textAlign: 'left',
+    captionSide: 'bottom'
+  })
+}, ownerState.stickyHeader && {
+  borderCollapse: 'separate'
+}));
+const defaultComponent = 'table';
+const Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTable'
+  });
+  const {
+      className,
+      component = defaultComponent,
+      padding = 'normal',
+      size = 'medium',
+      stickyHeader = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const ownerState = _extends({}, props, {
+    component,
+    padding,
+    size,
+    stickyHeader
+  });
+  const classes = useUtilityClasses$1(ownerState);
+  const table = React__namespace.useMemo(() => ({
+    padding,
+    size,
+    stickyHeader
+  }), [padding, size, stickyHeader]);
+  return /*#__PURE__*/jsxRuntime.jsx(TableContext$1.Provider, {
+    value: table,
+    children: /*#__PURE__*/jsxRuntime.jsx(TableRoot, _extends({
+      as: component,
+      role: component === defaultComponent ? null : 'table',
+      ref: ref,
+      className: clsx(classes.root, className),
+      ownerState: ownerState
+    }, other))
+  });
+});
+process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the table, normally `TableHead` and `TableBody`.
+   */
+  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,
+  /**
+   * Allows TableCells to inherit padding of the Table.
+   * @default 'normal'
+   */
+  padding: PropTypes.oneOf(['checkbox', 'none', 'normal']),
+  /**
+   * Allows TableCells to inherit size of the Table.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * Set the header sticky.
+   *
+   * ⚠️ It doesn't work with IE11.
+   * @default false
+   */
+  stickyHeader: PropTypes.bool,
+  /**
+   * 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])
+} : void 0;
+var Table$1 = Table;
+
 function getTextFieldUtilityClass(slot) {
   return generateUtilityClass('MuiTextField', slot);
 }
@@ -50297,21 +50606,22 @@ var ActButton = styled$1(Button$1)(function (_a) {
 });
 
 var TextField = function (_a) {
-    var name = _a.name, value = _a.value, error = _a.error, onBlur = _a.onBlur, onChange = _a.onChange, label = _a.label, disabled = _a.disabled, endAdornment = _a.endAdornment; _a.isValid; var _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, props = __rest(_a, ["name", "value", "error", "onBlur", "onChange", "label", "disabled", "endAdornment", "isValid", "placeholder"]);
+    var name = _a.name, value = _a.value, error = _a.error, onBlur = _a.onBlur, onChange = _a.onChange, label = _a.label, disabled = _a.disabled, endAdornment = _a.endAdornment; _a.isValid; var _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, maxLength = _a.maxLength, props = __rest(_a, ["name", "value", "error", "onBlur", "onChange", "label", "disabled", "endAdornment", "isValid", "placeholder", "maxLength"]);
     var _c = React.useState(value), internalValue = _c[0], setInternalValue = _c[1];
     React.useEffect(function () {
         if (value !== internalValue) {
             setInternalValue(value);
         }
     }, [value]);
-    return (jsxRuntime.jsx(MuiTextField, __assign$1({ variant: "outlined", name: name, label: label, value: internalValue, placeholder: placeholder, InputLabelProps: { shrink: true }, onClick: function (e) { return e.stopPropagation(); }, InputProps: {
-            endAdornment: endAdornment
-        }, onChange: function (e) {
+    return (jsxRuntime.jsx(MuiTextField, __assign$1({ variant: "outlined", name: name, label: label, value: internalValue, placeholder: placeholder, InputLabelProps: { shrink: true }, onClick: function (e) { return e.stopPropagation(); }, onChange: function (e) {
             setInternalValue(e.currentTarget.value);
             onChange(e);
         }, onBlur: function (e) {
             onBlur(e);
-        }, error: !!error, helperText: error !== null && error !== void 0 ? error : '', disabled: disabled }, props)));
+        }, error: !!error, disabled: disabled, InputProps: { endAdornment: endAdornment }, inputProps: { maxLength: maxLength } }, props, { helperText: jsxRuntime.jsxs(Table$1, { children: [(error || props.helperText) && (jsxRuntime.jsx("div", __assign$1({ style: {
+                        display: maxLength ? 'table-cell' : '',
+                        float: 'left'
+                    } }, { children: error || props.helperText }))), maxLength && (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'table-cell', float: 'right' } }, { children: [internalValue.length, "/", maxLength, " caract."] })))] }) })));
 };
 
 var Checkbox = function (_a) {
@@ -50455,7 +50765,7 @@ var __assign = function() {
 
 /**
  * Do not edit directly
- * Generated on Thu, 08 Dec 2022 16:14:19 GMT
+ * Generated on Thu, 08 Dec 2022 17:56:08 GMT
  */
 var DefaultWebShadowAllContent = { "color": "#2727271f", "type": "dropShadow", "x": "0", "y": "2", "blur": "10", "spread": "0" };
 var DefaultSpacingXxs = "4";
@@ -50786,7 +51096,10 @@ var useMaterialThemeCss = function (muiTokens) {
                     styleOverrides: {
                         root: {
                             fontWeight: 400,
-                            fontSize: '11px',
+                            fontSize: '10px',
+                            marginLeft: '8px',
+                            marginRight: '8px',
+                            marginTop: '5px',
                             lineHeight: '12px',
                             color: muiTokens.palette.greyDark,
                             '&.Mui-error': {
@@ -50803,15 +51116,17 @@ var useMaterialThemeCss = function (muiTokens) {
                             fontWeight: 400,
                             color: muiTokens.palette.greyXDark,
                             '&::placeholder': {
-                                color: muiTokens.palette.greyDark,
+                                color: "".concat(muiTokens.palette.greyDark, " !important"),
+                                opacity: 1 + ' !important',
                                 fontWeight: 400,
                                 lineHeight: '18px',
                                 fontSize: '14px'
                             },
                             '&.Mui-disabled': {
                                 backgroundColor: muiTokens.palette.greyXLight,
-                                color: muiTokens.palette.greyLightDefaultborder,
-                                borderColor: muiTokens.palette.greyLightDefaultborder
+                                color: muiTokens.palette.greyDark,
+                                borderColor: muiTokens.palette.greyLightDefaultborder,
+                                '-webkit-text-fill-color': muiTokens.palette.greyDark
                             }
                         },
                         root: {
@@ -50837,7 +51152,7 @@ var useMaterialThemeCss = function (muiTokens) {
                 MuiInputLabel: {
                     styleOverrides: {
                         root: {
-                            fontSize: '16px',
+                            fontSize: '17.33px',
                             lineHeight: '16px',
                             fontWeight: 500,
                             color: muiTokens.palette.greyXDark,