tp-react-elements-dev 1.7.6 → 1.8.0

package/dist/index.esm.js

@@ -7119,7 +7119,7 @@ var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
     return getTheme(outerTheme, theme);
   });
 });
-var ThemeProvider = function ThemeProvider(props) {
+var ThemeProvider$3 = function ThemeProvider(props) {
   var theme = React$1.useContext(ThemeContext$1);
 
   if (props.theme !== theme) {
@@ -8337,7 +8337,7 @@ var getDisplayName = /*#__PURE__*/Object.freeze({
 
 var require$$6 = /*@__PURE__*/getAugmentedNamespace(getDisplayName);
 
-const _excluded$1m = ["values", "unit", "step"];
+const _excluded$1s = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -8371,7 +8371,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$1m);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$1s);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -9510,7 +9510,7 @@ function applyStyles$2(key, styles) {
   return {};
 }
 
-const _excluded$1l = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$1r = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$2(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -9518,7 +9518,7 @@ function createTheme$2(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$1l);
+    other = _objectWithoutPropertiesLoose(options, _excluded$1r);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge$1({
@@ -9553,7 +9553,7 @@ var createTheme$1 = /*#__PURE__*/Object.freeze({
 
 var require$$7 = /*@__PURE__*/getAugmentedNamespace(createTheme$1);
 
-const _excluded$1k = ["sx"];
+const _excluded$1q = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -9574,7 +9574,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1q);
   const {
     systemProps,
     otherProps
@@ -9623,8 +9623,8 @@ var _capitalize = _interopRequireDefault$6(require$$5);
 var _getDisplayName = _interopRequireDefault$6(require$$6);
 var _createTheme = _interopRequireDefault$6(require$$7);
 var _styleFunctionSx = _interopRequireDefault$6(require$$8);
-const _excluded$1j = ["ownerState"],
-  _excluded2$d = ["variants"],
+const _excluded$1p = ["ownerState"],
+  _excluded2$f = ["variants"],
   _excluded3$6 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 function _getRequireWildcardCache$1(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$1 = function (e) { return e ? t : r; })(e); }
@@ -9670,7 +9670,7 @@ function processStyleArg$1(callableStyle, _ref) {
   let {
       ownerState
     } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded$1j);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded$1p);
   const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({
     ownerState
   }, props)) : callableStyle;
@@ -9683,7 +9683,7 @@ function processStyleArg$1(callableStyle, _ref) {
     const {
         variants = []
       } = resolvedStylesArg,
-      otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2$d);
+      otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2$f);
     let result = otherStyles;
     variants.forEach(variant => {
       let isMatch = true;
@@ -9932,21 +9932,21 @@ Object.defineProperty(colorManipulator, "__esModule", {
 var alpha_1 = colorManipulator.alpha = alpha$1;
 colorManipulator.blend = blend;
 colorManipulator.colorChannel = void 0;
-var darken_1 = colorManipulator.darken = darken;
+var darken_1 = colorManipulator.darken = darken$1;
 colorManipulator.decomposeColor = decomposeColor$1;
-colorManipulator.emphasize = emphasize;
-var getContrastRatio_1 = colorManipulator.getContrastRatio = getContrastRatio;
-colorManipulator.getLuminance = getLuminance;
+colorManipulator.emphasize = emphasize$1;
+var getContrastRatio_1 = colorManipulator.getContrastRatio = getContrastRatio$1;
+colorManipulator.getLuminance = getLuminance$1;
 colorManipulator.hexToRgb = hexToRgb$1;
-colorManipulator.hslToRgb = hslToRgb;
-var lighten_1 = colorManipulator.lighten = lighten;
-colorManipulator.private_safeAlpha = private_safeAlpha;
-colorManipulator.private_safeColorChannel = void 0;
-colorManipulator.private_safeDarken = private_safeDarken;
-colorManipulator.private_safeEmphasize = private_safeEmphasize;
-colorManipulator.private_safeLighten = private_safeLighten;
+var hslToRgb_1 = colorManipulator.hslToRgb = hslToRgb$1;
+var lighten_1 = colorManipulator.lighten = lighten$1;
+var private_safeAlpha_1 = colorManipulator.private_safeAlpha = private_safeAlpha;
+var private_safeColorChannel_1 = colorManipulator.private_safeColorChannel = void 0;
+var private_safeDarken_1 = colorManipulator.private_safeDarken = private_safeDarken;
+var private_safeEmphasize_1 = colorManipulator.private_safeEmphasize = private_safeEmphasize;
+var private_safeLighten_1 = colorManipulator.private_safeLighten = private_safeLighten;
 colorManipulator.recomposeColor = recomposeColor$1;
-colorManipulator.rgbToHex = rgbToHex;
+colorManipulator.rgbToHex = rgbToHex$1;
 var _formatMuiErrorMessage2 = _interopRequireDefault$5(require$$1);
 var _clamp = _interopRequireDefault$5(require$$2);
 /* eslint-disable @typescript-eslint/naming-convention */
@@ -9983,7 +9983,7 @@ function hexToRgb$1(color) {
     return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
   }).join(', ')})` : '';
 }
-function intToHex(int) {
+function intToHex$1(int) {
   const hex = int.toString(16);
   return hex.length === 1 ? `0${hex}` : hex;
 }
@@ -10061,7 +10061,7 @@ const private_safeColorChannel = (color, warning) => {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
-colorManipulator.private_safeColorChannel = private_safeColorChannel;
+private_safeColorChannel_1 = colorManipulator.private_safeColorChannel = private_safeColorChannel;
 function recomposeColor$1(color) {
   const {
     type,
@@ -10090,7 +10090,7 @@ function recomposeColor$1(color) {
  * @param {string} color - RGB color, i.e. rgb(n, n, n)
  * @returns {string} A CSS rgb color string, i.e. #nnnnnn
  */
-function rgbToHex(color) {
+function rgbToHex$1(color) {
   // Idempotent
   if (color.indexOf('#') === 0) {
     return color;
@@ -10098,7 +10098,7 @@ function rgbToHex(color) {
   const {
     values
   } = decomposeColor$1(color);
-  return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;
+  return `#${values.map((n, i) => intToHex$1(i === 3 ? Math.round(255 * n) : n)).join('')}`;
 }
 
 /**
@@ -10106,7 +10106,7 @@ function rgbToHex(color) {
  * @param {string} color - HSL color values
  * @returns {string} rgb color values
  */
-function hslToRgb(color) {
+function hslToRgb$1(color) {
   color = decomposeColor$1(color);
   const {
     values
@@ -10135,9 +10135,9 @@ function hslToRgb(color) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {number} The relative brightness of the color in the range 0 - 1
  */
-function getLuminance(color) {
+function getLuminance$1(color) {
   color = decomposeColor$1(color);
-  let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor$1(hslToRgb(color)).values : color.values;
+  let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor$1(hslToRgb$1(color)).values : color.values;
   rgb = rgb.map(val => {
     if (color.type !== 'color') {
       val /= 255; // normalized
@@ -10157,9 +10157,9 @@ function getLuminance(color) {
  * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} A contrast ratio value in the range 0 - 21.
  */
-function getContrastRatio(foreground, background) {
-  const lumA = getLuminance(foreground);
-  const lumB = getLuminance(background);
+function getContrastRatio$1(foreground, background) {
+  const lumA = getLuminance$1(foreground);
+  const lumB = getLuminance$1(background);
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 }
 
@@ -10200,7 +10200,7 @@ function private_safeAlpha(color, value, warning) {
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function darken(color, coefficient) {
+function darken$1(color, coefficient) {
   color = decomposeColor$1(color);
   coefficient = clampWrapper$1(coefficient);
   if (color.type.indexOf('hsl') !== -1) {
@@ -10214,7 +10214,7 @@ function darken(color, coefficient) {
 }
 function private_safeDarken(color, coefficient, warning) {
   try {
-    return darken(color, coefficient);
+    return darken$1(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);
@@ -10229,7 +10229,7 @@ function private_safeDarken(color, coefficient, warning) {
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function lighten(color, coefficient) {
+function lighten$1(color, coefficient) {
   color = decomposeColor$1(color);
   coefficient = clampWrapper$1(coefficient);
   if (color.type.indexOf('hsl') !== -1) {
@@ -10247,7 +10247,7 @@ function lighten(color, coefficient) {
 }
 function private_safeLighten(color, coefficient, warning) {
   try {
-    return lighten(color, coefficient);
+    return lighten$1(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);
@@ -10263,12 +10263,12 @@ function private_safeLighten(color, coefficient, warning) {
  * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function emphasize(color, coefficient = 0.15) {
-  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+function emphasize$1(color, coefficient = 0.15) {
+  return getLuminance$1(color) > 0.5 ? darken$1(color, coefficient) : lighten$1(color, coefficient);
 }
 function private_safeEmphasize(color, coefficient, warning) {
   try {
-    return emphasize(color, coefficient);
+    return emphasize$1(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);
@@ -10420,7 +10420,7 @@ const green = {
   A700: '#00c853'
 };
 
-const _excluded$1i = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$1o = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -10589,7 +10589,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$1i);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$1o);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -10713,7 +10713,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$1h = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$1n = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round$2(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -10744,7 +10744,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -10811,7 +10811,7 @@ function createShadow(...px) {
 // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 
-const _excluded$1g = ["duration", "easing", "delay"];
+const _excluded$1m = ["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 = {
@@ -10862,7 +10862,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$1g);
+      other = _objectWithoutPropertiesLoose(options, _excluded$1m);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -10911,7 +10911,7 @@ const zIndex = {
   tooltip: 1500
 };
 
-const _excluded$1f = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$1l = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -10919,7 +10919,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$1f);
+    other = _objectWithoutPropertiesLoose(options, _excluded$1l);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage$1(18));
@@ -10976,8 +10976,18 @@ Please use another name.` : formatMuiErrorMessage$1(18));
   };
   return muiTheme;
 }
+let warnedOnce$1 = false;
+function createMuiTheme(...args) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce$1) {
+      warnedOnce$1 = true;
+      console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
+    }
+  }
+  return createTheme(...args);
+}
 
-const defaultTheme$2 = createTheme();
+const defaultTheme$3 = createTheme();
 
 var THEME_ID = '$$material';
 
@@ -10990,7 +11000,7 @@ const rootShouldForwardProp = prop => slotShouldForwardProp(prop) && prop !== 'c
 
 const styled$1 = _default({
   themeId: THEME_ID,
-  defaultTheme: defaultTheme$2,
+  defaultTheme: defaultTheme$3,
   rootShouldForwardProp
 });
 
@@ -11078,7 +11088,7 @@ function useThemeProps$1({
   return useThemeProps$2({
     props,
     name,
-    defaultTheme: defaultTheme$2,
+    defaultTheme: defaultTheme$3,
     themeId: THEME_ID
   });
 }
@@ -11865,7 +11875,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$1e = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
+const _excluded$1k = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -11882,7 +11892,7 @@ function useSlotProps(parameters) {
       ownerState,
       skipResolvingSlotProps = false
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$1e);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$1k);
   const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -14701,8 +14711,8 @@ function getPopperUtilityClass(slot) {
 }
 generateUtilityClasses(COMPONENT_NAME, ['root']);
 
-const _excluded$1d = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
-  _excluded2$c = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
+const _excluded$1j = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+  _excluded2$e = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 function flipPlacement(placement, direction) {
   if (direction === 'ltr') {
     return placement;
@@ -14754,7 +14764,7 @@ const PopperTooltip = /*#__PURE__*/React$1.forwardRef(function PopperTooltip(pro
       // @ts-ignore internal logic
       // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1d);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1j);
   const tooltipRef = React$1.useRef(null);
   const ownRef = useForkRef(tooltipRef, forwardedRef);
   const popperRef = React$1.useRef(null);
@@ -14886,7 +14896,7 @@ const Popper$1 = /*#__PURE__*/React$1.forwardRef(function Popper(props, forwarde
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2$c);
+    other = _objectWithoutPropertiesLoose(props, _excluded2$e);
   const [exited, setExited] = React$1.useState(true);
   const handleEnter = () => {
     setExited(false);
@@ -15065,7 +15075,7 @@ process.env.NODE_ENV !== "production" ? Popper$1.propTypes /* remove-proptypes *
   transition: PropTypes.bool
 } : void 0;
 
-const _excluded$1c = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$1i = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -15107,7 +15117,7 @@ const TextareaAutosize = /*#__PURE__*/React$1.forwardRef(function TextareaAutosi
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1c);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1i);
   const {
     current: isControlled
   } = React$1.useRef(value != null);
@@ -16321,7 +16331,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$1b = ["className", "component"];
+const _excluded$1h = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -16339,7 +16349,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$1b);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$1h);
     return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
@@ -16350,8 +16360,8 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$1a = ["ownerState"],
-  _excluded2$b = ["variants"],
+const _excluded$1g = ["ownerState"],
+  _excluded2$d = ["variants"],
   _excluded3$5 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$2(obj) {
   return Object.keys(obj).length === 0;
@@ -16394,7 +16404,7 @@ function processStyleArg(callableStyle, _ref) {
   let {
       ownerState
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
   const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends$1({
     ownerState
   }, props)) : callableStyle;
@@ -16407,7 +16417,7 @@ function processStyleArg(callableStyle, _ref) {
     const {
         variants = []
       } = resolvedStylesArg,
-      otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2$b);
+      otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2$d);
     let result = otherStyles;
     variants.forEach(variant => {
       let isMatch = true;
@@ -16736,6 +16746,10 @@ function hexToRgb(color) {
     return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
   }).join(', ')})` : '';
 }
+function intToHex(int) {
+  const hex = int.toString(16);
+  return hex.length === 1 ? `0${hex}` : hex;
+}
 
 /**
  * Returns an object with the type and values of a color.
@@ -16811,6 +16825,84 @@ function recomposeColor(color) {
   return `${type}(${values})`;
 }
 
+/**
+ * Converts a color from CSS rgb format to CSS hex format.
+ * @param {string} color - RGB color, i.e. rgb(n, n, n)
+ * @returns {string} A CSS rgb color string, i.e. #nnnnnn
+ */
+function rgbToHex(color) {
+  // Idempotent
+  if (color.indexOf('#') === 0) {
+    return color;
+  }
+  const {
+    values
+  } = decomposeColor(color);
+  return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;
+}
+
+/**
+ * Converts a color from hsl format to rgb format.
+ * @param {string} color - HSL color values
+ * @returns {string} rgb color values
+ */
+function hslToRgb(color) {
+  color = decomposeColor(color);
+  const {
+    values
+  } = color;
+  const h = values[0];
+  const s = values[1] / 100;
+  const l = values[2] / 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  let type = 'rgb';
+  const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
+  if (color.type === 'hsla') {
+    type += 'a';
+    rgb.push(values[3]);
+  }
+  return recomposeColor({
+    type,
+    values: rgb
+  });
+}
+/**
+ * The relative brightness of any point in a color space,
+ * normalized to 0 for darkest black and 1 for lightest white.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+ * @returns {number} The relative brightness of the color in the range 0 - 1
+ */
+function getLuminance(color) {
+  color = decomposeColor(color);
+  let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
+  rgb = rgb.map(val => {
+    if (color.type !== 'color') {
+      val /= 255; // normalized
+    }
+    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
+  });
+
+  // Truncate at 3 digits
+  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
+}
+
+/**
+ * Calculates the contrast ratio between two colors.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} A contrast ratio value in the range 0 - 21.
+ */
+function getContrastRatio(foreground, background) {
+  const lumA = getLuminance(foreground);
+  const lumB = getLuminance(background);
+  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
+}
+
 /**
  * Sets the absolute transparency of a color.
  * Any existing alpha values are overwritten.
@@ -16832,6 +16924,59 @@ function alpha(color, value) {
   return recomposeColor(color);
 }
 
+/**
+ * Darkens a color.
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+function darken(color, coefficient) {
+  color = decomposeColor(color);
+  coefficient = clampWrapper(coefficient);
+  if (color.type.indexOf('hsl') !== -1) {
+    color.values[2] *= 1 - coefficient;
+  } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
+    for (let i = 0; i < 3; i += 1) {
+      color.values[i] *= 1 - coefficient;
+    }
+  }
+  return recomposeColor(color);
+}
+
+/**
+ * Lightens a color.
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+function lighten(color, coefficient) {
+  color = decomposeColor(color);
+  coefficient = clampWrapper(coefficient);
+  if (color.type.indexOf('hsl') !== -1) {
+    color.values[2] += (100 - color.values[2]) * coefficient;
+  } else if (color.type.indexOf('rgb') !== -1) {
+    for (let i = 0; i < 3; i += 1) {
+      color.values[i] += (255 - color.values[i]) * coefficient;
+    }
+  } else if (color.type.indexOf('color') !== -1) {
+    for (let i = 0; i < 3; i += 1) {
+      color.values[i] += (1 - color.values[i]) * coefficient;
+    }
+  }
+  return recomposeColor(color);
+}
+
+/**
+ * Darken or lighten a color, depending on its luminance.
+ * Light colors are darkened, dark colors are lightened.
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+ * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+function emphasize(color, coefficient = 0.15) {
+  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+
 const ThemeContext = /*#__PURE__*/React$1.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'ThemeContext';
@@ -16849,8 +16994,73 @@ function useTheme$3() {
 const hasSymbol = typeof Symbol === 'function' && Symbol.for;
 var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
 
+function mergeOuterLocalTheme(outerTheme, localTheme) {
+  if (typeof localTheme === 'function') {
+    const mergedTheme = localTheme(outerTheme);
+    if (process.env.NODE_ENV !== 'production') {
+      if (!mergedTheme) {
+        console.error(['MUI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
+      }
+    }
+    return mergedTheme;
+  }
+  return _extends$1({}, outerTheme, localTheme);
+}
+
+/**
+ * This component takes a `theme` prop.
+ * It makes the `theme` available down the React tree thanks to React context.
+ * This component should preferably be used at **the root of your component tree**.
+ */
+function ThemeProvider$2(props) {
+  const {
+    children,
+    theme: localTheme
+  } = props;
+  const outerTheme = useTheme$3();
+  if (process.env.NODE_ENV !== 'production') {
+    if (outerTheme === null && typeof localTheme === 'function') {
+      console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+    }
+  }
+  const theme = React$1.useMemo(() => {
+    const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
+    if (output != null) {
+      output[nested] = outerTheme !== null;
+    }
+    return output;
+  }, [localTheme, outerTheme]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeContext.Provider, {
+    value: theme,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) : void 0;
+}
+
+const _excluded$1f = ["value"];
 const RtlContext = /*#__PURE__*/React$1.createContext();
-process.env.NODE_ENV !== "production" ? {
+function RtlProvider(_ref) {
+  let {
+      value
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(RtlContext.Provider, _extends$1({
+    value: value != null ? value : true
+  }, props));
+}
+process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
   children: PropTypes.node,
   value: PropTypes.bool
 } : void 0;
@@ -16859,6 +17069,839 @@ const useRtl = () => {
   return value != null ? value : false;
 };
 
+const EMPTY_THEME = {};
+function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
+  return React$1.useMemo(() => {
+    const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+    if (typeof localTheme === 'function') {
+      const mergedTheme = localTheme(resolvedTheme);
+      const result = themeId ? _extends$1({}, upperTheme, {
+        [themeId]: mergedTheme
+      }) : mergedTheme;
+      // must return a function for the private theme to NOT merge with the upper theme.
+      // see the test case "use provided theme from a callback" in ThemeProvider.test.js
+      if (isPrivate) {
+        return () => result;
+      }
+      return result;
+    }
+    return themeId ? _extends$1({}, upperTheme, {
+      [themeId]: localTheme
+    }) : _extends$1({}, upperTheme, localTheme);
+  }, [themeId, upperTheme, localTheme, isPrivate]);
+}
+
+/**
+ * This component makes the `theme` available down the React tree.
+ * It should preferably be used at **the root of your component tree**.
+ *
+ * <ThemeProvider theme={theme}> // existing use case
+ * <ThemeProvider theme={{ id: theme }}> // theme scoping
+ */
+function ThemeProvider$1(props) {
+  const {
+    children,
+    theme: localTheme,
+    themeId
+  } = props;
+  const upperTheme = useTheme$5(EMPTY_THEME);
+  const upperPrivateTheme = useTheme$3() || EMPTY_THEME;
+  if (process.env.NODE_ENV !== 'production') {
+    if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
+      console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+    }
+  }
+  const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
+  const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  const rtlValue = engineTheme.direction === 'rtl';
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, {
+    theme: privateTheme,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(ThemeContext$1.Provider, {
+      value: engineTheme,
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(RtlProvider, {
+        value: rtlValue,
+        children: children
+      })
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId: PropTypes.string
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
+}
+
+const DEFAULT_MODE_STORAGE_KEY = 'mode';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+const DEFAULT_ATTRIBUTE = 'data-color-scheme';
+function getInitColorSchemeScript$1(options) {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme = 'light',
+    defaultDarkColorScheme = 'dark',
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE,
+    colorSchemeNode = 'document.documentElement'
+  } = options || {};
+  return /*#__PURE__*/jsxRuntimeExports.jsx("script", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: `(function() {
+try {
+  var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
+  var colorScheme = '';
+  if (mode === 'system') {
+    // handle system mode
+    var mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+    } else {
+      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+    }
+  }
+  if (mode === 'light') {
+    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+  }
+  if (mode === 'dark') {
+    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+  }
+  if (colorScheme) {
+    ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
+  }
+} catch(e){}})();`
+    }
+  }, "mui-color-scheme-init");
+}
+
+function getSystemMode(mode) {
+  if (typeof window !== 'undefined' && mode === 'system') {
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      return 'dark';
+    }
+    return 'light';
+  }
+  return undefined;
+}
+function processState(state, callback) {
+  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
+    return callback('light');
+  }
+  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
+    return callback('dark');
+  }
+  return undefined;
+}
+function getColorScheme(state) {
+  return processState(state, mode => {
+    if (mode === 'light') {
+      return state.lightColorScheme;
+    }
+    if (mode === 'dark') {
+      return state.darkColorScheme;
+    }
+    return undefined;
+  });
+}
+function initializeValue(key, defaultValue) {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  let value;
+  try {
+    value = localStorage.getItem(key) || undefined;
+    if (!value) {
+      // the first time that user enters the site.
+      localStorage.setItem(key, defaultValue);
+    }
+  } catch (e) {
+    // Unsupported
+  }
+  return value || defaultValue;
+}
+function useCurrentColorScheme(options) {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    supportedColorSchemes = [],
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    storageWindow = typeof window === 'undefined' ? undefined : window
+  } = options;
+  const joinedColorSchemes = supportedColorSchemes.join(',');
+  const [state, setState] = React$1.useState(() => {
+    const initialMode = initializeValue(modeStorageKey, defaultMode);
+    const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+    const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+    return {
+      mode: initialMode,
+      systemMode: getSystemMode(initialMode),
+      lightColorScheme,
+      darkColorScheme
+    };
+  });
+  const colorScheme = getColorScheme(state);
+  const setMode = React$1.useCallback(mode => {
+    setState(currentState => {
+      if (mode === currentState.mode) {
+        // do nothing if mode does not change
+        return currentState;
+      }
+      const newMode = mode != null ? mode : defaultMode;
+      try {
+        localStorage.setItem(modeStorageKey, newMode);
+      } catch (e) {
+        // Unsupported
+      }
+      return _extends$1({}, currentState, {
+        mode: newMode,
+        systemMode: getSystemMode(newMode)
+      });
+    });
+  }, [modeStorageKey, defaultMode]);
+  const setColorScheme = React$1.useCallback(value => {
+    if (!value) {
+      setState(currentState => {
+        try {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+        } catch (e) {
+          // Unsupported
+        }
+        return _extends$1({}, currentState, {
+          lightColorScheme: defaultLightColorScheme,
+          darkColorScheme: defaultDarkColorScheme
+        });
+      });
+    } else if (typeof value === 'string') {
+      if (value && !joinedColorSchemes.includes(value)) {
+        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+      } else {
+        setState(currentState => {
+          const newState = _extends$1({}, currentState);
+          processState(currentState, mode => {
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            } catch (e) {
+              // Unsupported
+            }
+            if (mode === 'light') {
+              newState.lightColorScheme = value;
+            }
+            if (mode === 'dark') {
+              newState.darkColorScheme = value;
+            }
+          });
+          return newState;
+        });
+      }
+    } else {
+      setState(currentState => {
+        const newState = _extends$1({}, currentState);
+        const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        if (newLightColorScheme) {
+          if (!joinedColorSchemes.includes(newLightColorScheme)) {
+            console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.lightColorScheme = newLightColorScheme;
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+            } catch (error) {
+              // Unsupported
+            }
+          }
+        }
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+            } catch (error) {
+              // Unsupported
+            }
+          }
+        }
+        return newState;
+      });
+    }
+  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
+  const handleMediaQuery = React$1.useCallback(event => {
+    if (state.mode === 'system') {
+      setState(currentState => {
+        const systemMode = event != null && event.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
+        return _extends$1({}, currentState, {
+          systemMode
+        });
+      });
+    }
+  }, [state.mode]);
+
+  // Ref hack to avoid adding handleMediaQuery as a dep
+  const mediaListener = React$1.useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  React$1.useEffect(() => {
+    const handler = (...args) => mediaListener.current(...args);
+
+    // Always listen to System preference
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    media.addListener(handler);
+    handler(media);
+    return () => {
+      media.removeListener(handler);
+    };
+  }, []);
+
+  // Handle when localStorage has changed
+  React$1.useEffect(() => {
+    if (storageWindow) {
+      const handleStorage = event => {
+        const value = event.newValue;
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
+        }
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
+        }
+      };
+      // For syncing color-scheme changes between iframes
+      storageWindow.addEventListener('storage', handleStorage);
+      return () => {
+        storageWindow.removeEventListener('storage', handleStorage);
+      };
+    }
+    return undefined;
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
+  return _extends$1({}, state, {
+    colorScheme,
+    setMode,
+    setColorScheme
+  });
+}
+
+const _excluded$1e = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
+const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
+function createCssVarsProvider(options) {
+  const {
+    themeId,
+    /**
+     * This `theme` object needs to follow a certain structure to
+     * be used correctly by the finel `CssVarsProvider`. It should have a
+     * `colorSchemes` key with the light and dark (and any other) palette.
+     * It should also ideally have a vars object created using `prepareCssVars`.
+     */
+    theme: defaultTheme = {},
+    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    defaultMode: designSystemMode = 'light',
+    defaultColorScheme: designSystemColorScheme,
+    disableTransitionOnChange: designSystemTransitionOnChange = false,
+    resolveTheme,
+    excludeVariablesFromRoot
+  } = options;
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
+    console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+  }
+  const ColorSchemeContext = /*#__PURE__*/React$1.createContext(undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    ColorSchemeContext.displayName = 'ColorSchemeContext';
+  }
+  const useColorScheme = () => {
+    const value = React$1.useContext(ColorSchemeContext);
+    if (!value) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : formatMuiErrorMessage$1(19));
+    }
+    return value;
+  };
+  function CssVarsProvider(props) {
+    const {
+      children,
+      theme: themeProp = defaultTheme,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      attribute = defaultAttribute,
+      defaultMode = designSystemMode,
+      defaultColorScheme = designSystemColorScheme,
+      disableTransitionOnChange = designSystemTransitionOnChange,
+      storageWindow = typeof window === 'undefined' ? undefined : window,
+      documentNode = typeof document === 'undefined' ? undefined : document,
+      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+      colorSchemeSelector = ':root',
+      disableNestedContext = false,
+      disableStyleSheetGeneration = false
+    } = props;
+    const hasMounted = React$1.useRef(false);
+    const upperTheme = useTheme$3();
+    const ctx = React$1.useContext(ColorSchemeContext);
+    const nested = !!ctx && !disableNestedContext;
+    const scopedTheme = themeProp[themeId];
+    const _ref = scopedTheme || themeProp,
+      {
+        colorSchemes = {},
+        components = {},
+        generateCssVars = () => ({
+          vars: {},
+          css: {}
+        }),
+        cssVarPrefix
+      } = _ref,
+      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+    const allColorSchemes = Object.keys(colorSchemes);
+    const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+
+    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+    const {
+      mode: stateMode,
+      setMode,
+      systemMode,
+      lightColorScheme,
+      darkColorScheme,
+      colorScheme: stateColorScheme,
+      setColorScheme
+    } = useCurrentColorScheme({
+      supportedColorSchemes: allColorSchemes,
+      defaultLightColorScheme,
+      defaultDarkColorScheme,
+      modeStorageKey,
+      colorSchemeStorageKey,
+      defaultMode,
+      storageWindow
+    });
+    let mode = stateMode;
+    let colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
+    }
+    const calculatedMode = (() => {
+      if (mode) {
+        return mode;
+      }
+      // This scope occurs on the server
+      if (defaultMode === 'system') {
+        return designSystemMode;
+      }
+      return defaultMode;
+    })();
+    const calculatedColorScheme = (() => {
+      if (!colorScheme) {
+        // This scope occurs on the server
+        if (calculatedMode === 'dark') {
+          return defaultDarkColorScheme;
+        }
+        // use light color scheme, if default mode is 'light' | 'system'
+        return defaultLightColorScheme;
+      }
+      return colorScheme;
+    })();
+
+    // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
+    const {
+      css: rootCss,
+      vars: rootVars
+    } = generateCssVars();
+
+    // 3. Start composing the theme object
+    const theme = _extends$1({}, restThemeProp, {
+      components,
+      colorSchemes,
+      cssVarPrefix,
+      vars: rootVars,
+      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
+    });
+
+    // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
+    //    The default color scheme stylesheet is constructed to have the least CSS specificity.
+    //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
+    const defaultColorSchemeStyleSheet = {};
+    const otherColorSchemesStyleSheet = {};
+    Object.entries(colorSchemes).forEach(([key, scheme]) => {
+      const {
+        css,
+        vars
+      } = generateCssVars(key);
+      theme.vars = deepmerge$1(theme.vars, vars);
+      if (key === calculatedColorScheme) {
+        // 4.1 Merge the selected color scheme to the theme
+        Object.keys(scheme).forEach(schemeKey => {
+          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends$1({}, theme[schemeKey], scheme[schemeKey]);
+          } else {
+            theme[schemeKey] = scheme[schemeKey];
+          }
+        });
+        if (theme.palette) {
+          theme.palette.colorScheme = key;
+        }
+      }
+      const resolvedDefaultColorScheme = (() => {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
+        return defaultColorScheme.light;
+      })();
+      if (key === resolvedDefaultColorScheme) {
+        if (excludeVariablesFromRoot) {
+          const excludedVariables = {};
+          excludeVariablesFromRoot(cssVarPrefix).forEach(cssVar => {
+            excludedVariables[cssVar] = css[cssVar];
+            delete css[cssVar];
+          });
+          defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
+        }
+        defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
+      } else {
+        otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
+      }
+    });
+    theme.vars = deepmerge$1(theme.vars, rootVars);
+
+    // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    React$1.useEffect(() => {
+      if (colorScheme && colorSchemeNode) {
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        colorSchemeNode.setAttribute(attribute, colorScheme);
+      }
+    }, [colorScheme, attribute, colorSchemeNode]);
+
+    // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+    React$1.useEffect(() => {
+      let timer;
+      if (disableTransitionOnChange && hasMounted.current && documentNode) {
+        const css = documentNode.createElement('style');
+        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
+        documentNode.head.appendChild(css);
+
+        // Force browser repaint
+        (() => window.getComputedStyle(documentNode.body))();
+        timer = setTimeout(() => {
+          documentNode.head.removeChild(css);
+        }, 1);
+      }
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [colorScheme, disableTransitionOnChange, documentNode]);
+    React$1.useEffect(() => {
+      hasMounted.current = true;
+      return () => {
+        hasMounted.current = false;
+      };
+    }, []);
+    const contextValue = React$1.useMemo(() => ({
+      allColorSchemes,
+      colorScheme,
+      darkColorScheme,
+      lightColorScheme,
+      mode,
+      setColorScheme,
+      setMode,
+      systemMode
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
+    let shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    const element = /*#__PURE__*/jsxRuntimeExports.jsxs(React$1.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/jsxRuntimeExports.jsxs(React$1.Fragment, {
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$2, {
+          styles: {
+            [colorSchemeSelector]: rootCss
+          }
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$2, {
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$2, {
+          styles: otherColorSchemesStyleSheet
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
+        themeId: scopedTheme ? themeId : undefined,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
+        children: children
+      })]
+    });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/jsxRuntimeExports.jsx(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
+  }
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The body attribute name to attach colorScheme.
+     */
+    attribute: PropTypes.string,
+    /**
+     * The component tree.
+     */
+    children: PropTypes.node,
+    /**
+     * The node used to attach the color-scheme attribute
+     */
+    colorSchemeNode: PropTypes.any,
+    /**
+     * The CSS selector for attaching the generated custom properties
+     */
+    colorSchemeSelector: PropTypes.string,
+    /**
+     * localStorage key used to store `colorScheme`
+     */
+    colorSchemeStorageKey: PropTypes.string,
+    /**
+     * The initial color scheme used.
+     */
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /**
+     * The initial mode used.
+     */
+    defaultMode: PropTypes.string,
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext: PropTypes.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: PropTypes.bool,
+    /**
+     * Disable CSS transitions when switching between modes or color schemes.
+     */
+    disableTransitionOnChange: PropTypes.bool,
+    /**
+     * The document to attach the attribute to.
+     */
+    documentNode: PropTypes.any,
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    modeStorageKey: PropTypes.string,
+    /**
+     * The window that attaches the 'storage' event listener.
+     * @default window
+     */
+    storageWindow: PropTypes.any,
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: PropTypes.object
+  } : void 0;
+  const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
+  const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
+  const getInitColorSchemeScript = params => getInitColorSchemeScript$1(_extends$1({
+    attribute: defaultAttribute,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey,
+    defaultMode: designSystemMode,
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    modeStorageKey: defaultModeStorageKey
+  }, params));
+  return {
+    CssVarsProvider,
+    useColorScheme,
+    getInitColorSchemeScript
+  };
+}
+
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+function createGetCssVar$1(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+    const value = vars[0];
+    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))|^(-?(\d*\.)?\d+)$|(\d+ \d+ \d+)/)) {
+      return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+    }
+    return `, ${value}`;
+  }
+
+  // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+  const getCssVar = (field, ...fallbacks) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
+  };
+  return getCssVar;
+}
+
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
+  let temp = obj;
+  keys.forEach((k, index) => {
+    if (index === keys.length - 1) {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && typeof temp === 'object') {
+        temp[k] = value;
+      }
+    } else if (temp && typeof temp === 'object') {
+      if (!temp[k]) {
+        temp[k] = arrayKeys.includes(k) ? [] : {};
+      }
+      temp = temp[k];
+    }
+  });
+};
+
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+  function recurse(object, parentKeys = [], arrayKeys = []) {
+    Object.entries(object).forEach(([key, value]) => {
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
+          } else {
+            callback([...parentKeys, key], value, arrayKeys);
+          }
+        }
+      }
+    });
+  }
+  recurse(obj);
+};
+const getCssValue = (keys, value) => {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+      // CSS property that are unitless
+      return value;
+    }
+    const lastKey = keys[keys.length - 1];
+    if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
+      // opacity values are unitless
+      return value;
+    }
+    return `${value}px`;
+  }
+  return value;
+};
+
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
+ *
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ */
+function cssVarsParser(theme, options) {
+  const {
+    prefix,
+    shouldSkipGeneratingVar
+  } = options || {};
+  const css = {};
+  const vars = {};
+  const varsWithDefaults = {};
+  walkObjectDeep(theme, (keys, value, arrayKeys) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
+        // only create css & var if `shouldSkipGeneratingVar` return false
+        const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+        Object.assign(css, {
+          [cssVar]: getCssValue(keys, value)
+        });
+        assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
+        assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${value})`, arrayKeys);
+      }
+    }
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
+  return {
+    css,
+    vars,
+    varsWithDefaults
+  };
+}
+
 function _typeof$1(o) {
   "@babel/helpers - typeof";
 
@@ -16885,8 +17928,76 @@ function toPropertyKey(t) {
   return "symbol" == _typeof$1(i) ? i : i + "";
 }
 
-const _excluded$19 = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
-const defaultTheme$1 = createTheme$2();
+const _excluded$1d = ["colorSchemes", "components", "defaultColorScheme"];
+function prepareCssVars(theme, parserConfig) {
+  // @ts-ignore - ignore components do not exist
+  const {
+      colorSchemes = {},
+      defaultColorScheme = 'light'
+    } = theme,
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded$1d);
+  const {
+    vars: rootVars,
+    css: rootCss,
+    varsWithDefaults: rootVarsWithDefaults
+  } = cssVarsParser(otherTheme, parserConfig);
+  let themeVars = rootVarsWithDefaults;
+  const colorSchemesMap = {};
+  const {
+      [defaultColorScheme]: light
+    } = colorSchemes,
+    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(toPropertyKey));
+  Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
+    const {
+      vars,
+      css,
+      varsWithDefaults
+    } = cssVarsParser(scheme, parserConfig);
+    themeVars = deepmerge$1(themeVars, varsWithDefaults);
+    colorSchemesMap[key] = {
+      css,
+      vars
+    };
+  });
+  if (light) {
+    // default color scheme vars should be merged last to set as default
+    const {
+      css,
+      vars,
+      varsWithDefaults
+    } = cssVarsParser(light, parserConfig);
+    themeVars = deepmerge$1(themeVars, varsWithDefaults);
+    colorSchemesMap[defaultColorScheme] = {
+      css,
+      vars
+    };
+  }
+  const generateCssVars = colorScheme => {
+    var _parserConfig$getSele2;
+    if (!colorScheme) {
+      var _parserConfig$getSele;
+      const css = _extends$1({}, rootCss);
+      return {
+        css,
+        vars: rootVars,
+        selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, css)) || ':root'
+      };
+    }
+    const css = _extends$1({}, colorSchemesMap[colorScheme].css);
+    return {
+      css,
+      vars: colorSchemesMap[colorScheme].vars,
+      selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
+    };
+  };
+  return {
+    vars: themeVars,
+    generateCssVars
+  };
+}
+
+const _excluded$1c = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+const defaultTheme$2 = createTheme$2();
 const defaultCreateStyledComponent = styled('div', {
   name: 'MuiContainer',
   slot: 'Root',
@@ -16900,7 +18011,7 @@ const defaultCreateStyledComponent = styled('div', {
 const useThemePropsDefault = inProps => useThemeProps$2({
   props: inProps,
   name: 'MuiContainer',
-  defaultTheme: defaultTheme$1
+  defaultTheme: defaultTheme$2
 });
 const useUtilityClasses$U = (ownerState, componentName) => {
   const getContainerUtilityClass = slot => {
@@ -16981,7 +18092,7 @@ function createContainer(options = {}) {
         fixed = false,
         maxWidth = 'lg'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$19);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1c);
     const ownerState = _extends$1({}, props, {
       component,
       disableGutters,
@@ -17019,7 +18130,7 @@ function createContainer(options = {}) {
 
 function GlobalStyles(props) {
   return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$1, _extends$1({}, props, {
-    defaultTheme: defaultTheme$2,
+    defaultTheme: defaultTheme$3,
     themeId: THEME_ID
   }));
 }
@@ -17070,7 +18181,7 @@ function getInputBaseUtilityClass(slot) {
 }
 const inputBaseClasses = generateUtilityClasses$1('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 
-const _excluded$18 = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+const _excluded$1b = ["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
@@ -17299,7 +18410,7 @@ const InputBase = /*#__PURE__*/React$1.forwardRef(function InputBase(inProps, re
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$18);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1b);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -17760,7 +18871,7 @@ function getInputUtilityClass(slot) {
 }
 const inputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1('MuiInput', ['root', 'underline', 'input']));
 
-const _excluded$17 = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$1a = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$S = ownerState => {
   const {
     classes,
@@ -17871,7 +18982,7 @@ const Input = /*#__PURE__*/React$1.forwardRef(function Input(inProps, ref) {
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$17);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1a);
   const classes = useUtilityClasses$S(props);
   const ownerState = {
     disableUnderline
@@ -18092,7 +19203,7 @@ function getFilledInputUtilityClass(slot) {
 }
 const filledInputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1('MuiFilledInput', ['root', 'underline', 'input']));
 
-const _excluded$16 = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$19 = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$R = ownerState => {
   const {
     classes,
@@ -18277,7 +19388,7 @@ const FilledInput = /*#__PURE__*/React$1.forwardRef(function FilledInput(inProps
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$16);
+    other = _objectWithoutPropertiesLoose(props, _excluded$19);
   const ownerState = _extends$1({}, props, {
     fullWidth,
     inputComponent,
@@ -18507,7 +19618,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
 FilledInput.muiName = 'Input';
 
 var _span$3;
-const _excluded$15 = ["children", "classes", "className", "label", "notched"];
+const _excluded$18 = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1('fieldset', {
   shouldForwardProp: rootShouldForwardProp
 })({
@@ -18584,7 +19695,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$15);
+    other = _objectWithoutPropertiesLoose(props, _excluded$18);
   const withLabel = label != null && label !== '';
   const ownerState = _extends$1({}, props, {
     notched,
@@ -18639,7 +19750,7 @@ function getOutlinedInputUtilityClass(slot) {
 }
 const outlinedInputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 
-const _excluded$14 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const _excluded$17 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 const useUtilityClasses$Q = ownerState => {
   const {
     classes
@@ -18758,7 +19869,7 @@ const OutlinedInput = /*#__PURE__*/React$1.forwardRef(function OutlinedInput(inP
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$14);
+    other = _objectWithoutPropertiesLoose(props, _excluded$17);
   const classes = useUtilityClasses$Q(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -18977,7 +20088,7 @@ function getFormLabelUtilityClasses(slot) {
 }
 const formLabelClasses = generateUtilityClasses$1('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 
-const _excluded$13 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const _excluded$16 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 const useUtilityClasses$P = ownerState => {
   const {
     classes,
@@ -19042,7 +20153,7 @@ const FormLabel = /*#__PURE__*/React$1.forwardRef(function FormLabel(inProps, re
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$13);
+    other = _objectWithoutPropertiesLoose(props, _excluded$16);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -19132,7 +20243,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses$1('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$12 = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const _excluded$15 = ["disableAnimation", "margin", "shrink", "variant", "className"];
 const useUtilityClasses$O = ownerState => {
   const {
     classes,
@@ -19234,7 +20345,7 @@ const InputLabel = /*#__PURE__*/React$1.forwardRef(function InputLabel(inProps,
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$12);
+    other = _objectWithoutPropertiesLoose(props, _excluded$15);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -19337,7 +20448,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses$1('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$11 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const _excluded$14 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 const useUtilityClasses$N = ownerState => {
   const {
     classes,
@@ -19423,7 +20534,7 @@ const FormControl = /*#__PURE__*/React$1.forwardRef(function FormControl(inProps
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$11);
+    other = _objectWithoutPropertiesLoose(props, _excluded$14);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -19617,7 +20728,7 @@ function getFormHelperTextUtilityClasses(slot) {
 const formHelperTextClasses = generateUtilityClasses$1('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
 
 var _span$2;
-const _excluded$10 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const _excluded$13 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 const useUtilityClasses$M = ownerState => {
   const {
     classes,
@@ -19676,7 +20787,7 @@ const FormHelperText = /*#__PURE__*/React$1.forwardRef(function FormHelperText(i
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$10);
+    other = _objectWithoutPropertiesLoose(props, _excluded$13);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -20044,7 +21155,7 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$$ = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const _excluded$12 = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 const useUtilityClasses$L = ownerState => {
   const {
     classes,
@@ -20092,7 +21203,7 @@ const List = /*#__PURE__*/React$1.forwardRef(function List(inProps, ref) {
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$$);
+    other = _objectWithoutPropertiesLoose(props, _excluded$12);
   const context = React$1.useMemo(() => ({
     dense
   }), [dense]);
@@ -20158,7 +21269,7 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 
-const _excluded$_ = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const _excluded$11 = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -20240,7 +21351,7 @@ const MenuList = /*#__PURE__*/React$1.forwardRef(function MenuList(props, ref) {
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$_);
+    other = _objectWithoutPropertiesLoose(props, _excluded$11);
   const listRef = React$1.useRef(null);
   const textCriteriaRef = React$1.useRef({
     keys: [],
@@ -21853,7 +22964,7 @@ TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
 TransitionGroup.defaultProps = defaultProps;
 
 function useTheme$2() {
-  const theme = useTheme$4(defaultTheme$2);
+  const theme = useTheme$4(defaultTheme$3);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React$1.useDebugValue(theme);
@@ -21876,7 +22987,7 @@ function getTransitionProps(props, options) {
   };
 }
 
-const _excluded$Z = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$10 = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -21920,7 +23031,7 @@ const Grow = /*#__PURE__*/React$1.forwardRef(function Grow(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$Z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$10);
   const timer = useTimeout();
   const autoTimeout = React$1.useRef();
   const theme = useTheme$2();
@@ -22118,7 +23229,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 } : void 0;
 Grow.muiSupportAuto = true;
 
-const _excluded$Y = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$$ = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles = {
   entering: {
     opacity: 1
@@ -22155,7 +23266,7 @@ const Fade = /*#__PURE__*/React$1.forwardRef(function Fade(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$Y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$$);
   const nodeRef = React$1.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -22315,7 +23426,7 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$X = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const _excluded$_ = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 const useUtilityClasses$K = ownerState => {
   const {
     classes,
@@ -22370,7 +23481,7 @@ const Backdrop = /*#__PURE__*/React$1.forwardRef(function Backdrop(inProps, ref)
       TransitionComponent = Fade,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$X);
+    other = _objectWithoutPropertiesLoose(props, _excluded$_);
   const ownerState = _extends$1({}, props, {
     component,
     invisible
@@ -22495,7 +23606,7 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$W = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
+const _excluded$Z = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 const useUtilityClasses$J = ownerState => {
   const {
     open,
@@ -22583,7 +23694,7 @@ const Modal = /*#__PURE__*/React$1.forwardRef(function Modal(inProps, ref) {
       slots
       // eslint-disable-next-line react/prop-types
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$W);
+    other = _objectWithoutPropertiesLoose(props, _excluded$Z);
   const propsWithDefaults = _extends$1({}, props, {
     closeAfterTransition,
     disableAutoFocus,
@@ -22870,13 +23981,14 @@ const getOverlayAlpha = elevation => {
   }
   return (alphaValue / 100).toFixed(2);
 };
+var getOverlayAlpha$1 = getOverlayAlpha;
 
 function getPaperUtilityClass(slot) {
   return generateUtilityClass$1('MuiPaper', slot);
 }
 generateUtilityClasses$1('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$V = ["className", "component", "elevation", "square", "variant"];
+const _excluded$Y = ["className", "component", "elevation", "square", "variant"];
 const useUtilityClasses$I = ownerState => {
   const {
     square,
@@ -22914,7 +24026,7 @@ const PaperRoot = styled$1('div', {
   }, ownerState.variant === 'elevation' && _extends$1({
     boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
   }, !theme.vars && theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${alpha_1('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha_1('#fff', getOverlayAlpha(ownerState.elevation))})`
+    backgroundImage: `linear-gradient(${alpha_1('#fff', getOverlayAlpha$1(ownerState.elevation))}, ${alpha_1('#fff', getOverlayAlpha$1(ownerState.elevation))})`
   }, theme.vars && {
     backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
   }));
@@ -22931,7 +24043,7 @@ const Paper = /*#__PURE__*/React$1.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$V);
+    other = _objectWithoutPropertiesLoose(props, _excluded$Y);
   const ownerState = _extends$1({}, props, {
     component,
     elevation,
@@ -23011,8 +24123,8 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
 
-const _excluded$U = ["onEntering"],
-  _excluded2$a = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
+const _excluded$X = ["onEntering"],
+  _excluded2$c = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
   _excluded3$4 = ["slotProps"];
 function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -23109,8 +24221,8 @@ const Popover = /*#__PURE__*/React$1.forwardRef(function Popover(inProps, ref) {
       } = {},
       disableScrollLock = false
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$U),
-    other = _objectWithoutPropertiesLoose(props, _excluded2$a);
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$X),
+    other = _objectWithoutPropertiesLoose(props, _excluded2$c);
   const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React$1.useRef();
   const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
@@ -23527,8 +24639,8 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$T = ["onEntering"],
-  _excluded2$9 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
+const _excluded$W = ["onEntering"],
+  _excluded2$b = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
@@ -23598,8 +24710,8 @@ const Menu$1 = /*#__PURE__*/React$1.forwardRef(function Menu(inProps, ref) {
       slots = {},
       slotProps = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$T),
-    other = _objectWithoutPropertiesLoose(props, _excluded2$9);
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$W),
+    other = _objectWithoutPropertiesLoose(props, _excluded2$b);
   const isRtl = useRtl();
   const ownerState = _extends$1({}, props, {
     autoFocus,
@@ -23821,7 +24933,7 @@ function getNativeSelectUtilityClasses(slot) {
 }
 const nativeSelectClasses = generateUtilityClasses$1('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 
-const _excluded$S = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
+const _excluded$V = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 const useUtilityClasses$F = ownerState => {
   const {
     classes,
@@ -23948,7 +25060,7 @@ const NativeSelectInput = /*#__PURE__*/React$1.forwardRef(function NativeSelectI
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$S);
+    other = _objectWithoutPropertiesLoose(props, _excluded$V);
   const ownerState = _extends$1({}, props, {
     disabled,
     variant,
@@ -24030,7 +25142,7 @@ function getSelectUtilityClasses(slot) {
 const selectClasses = generateUtilityClasses$1('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 
 var _span$1;
-const _excluded$R = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded$U = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 const SelectSelect = styled$1('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -24153,7 +25265,7 @@ const SelectInput = /*#__PURE__*/React$1.forwardRef(function SelectInput(props,
       value: valueProp,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$R);
+    other = _objectWithoutPropertiesLoose(props, _excluded$U);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -24668,7 +25780,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$Q = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const _excluded$T = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 const useUtilityClasses$D = ownerState => {
   const {
     color,
@@ -24736,7 +25848,7 @@ const SvgIcon = /*#__PURE__*/React$1.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$Q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$T);
   const hasSvgAsChild = /*#__PURE__*/React$1.isValidElement(children) && children.type === 'svg';
   const ownerState = _extends$1({}, props, {
     color,
@@ -24863,8 +25975,8 @@ var ArrowDropDownIcon$1 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("p
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$P = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
-  _excluded2$8 = ["root"];
+const _excluded$S = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
+  _excluded2$a = ["root"];
 const useUtilityClasses$C = ownerState => {
   const {
     classes
@@ -24908,7 +26020,7 @@ const Select = /*#__PURE__*/React$1.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps,
       variant: variantProp = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$P);
+    other = _objectWithoutPropertiesLoose(props, _excluded$S);
   const inputComponent = native ? NativeSelectInput : SelectInput;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -24922,7 +26034,7 @@ const Select = /*#__PURE__*/React$1.forwardRef(function Select(inProps, ref) {
     classes: classesProp
   });
   const classes = useUtilityClasses$C(ownerState);
-  const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2$8);
+  const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2$a);
   const InputComponent = input || {
     standard: /*#__PURE__*/jsxRuntimeExports.jsx(StyledInput, {
       ownerState: ownerState
@@ -25131,7 +26243,7 @@ function getTextFieldUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiTextField', ['root']);
 
-const _excluded$O = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+const _excluded$R = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 const variantComponent = {
   standard: Input,
   filled: FilledInput,
@@ -25223,7 +26335,7 @@ const TextField = /*#__PURE__*/React$1.forwardRef(function TextField(inProps, re
       value,
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$O);
+    other = _objectWithoutPropertiesLoose(props, _excluded$R);
   const ownerState = _extends$1({}, props, {
     autoFocus,
     color,
@@ -25485,6 +26597,680 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
 } : void 0;
 
+const _excluded$Q = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  _excluded2$9 = ["type", "mode"];
+function adaptV4Theme(inputTheme) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
+  }
+  const {
+      defaultProps = {},
+      mixins = {},
+      overrides = {},
+      palette = {},
+      props = {},
+      styleOverrides = {}
+    } = inputTheme,
+    other = _objectWithoutPropertiesLoose(inputTheme, _excluded$Q);
+  const theme = _extends$1({}, other, {
+    components: {}
+  });
+
+  // default props
+  Object.keys(defaultProps).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.defaultProps = defaultProps[component];
+    theme.components[component] = componentValue;
+  });
+  Object.keys(props).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.defaultProps = props[component];
+    theme.components[component] = componentValue;
+  });
+
+  // CSS overrides
+  Object.keys(styleOverrides).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.styleOverrides = styleOverrides[component];
+    theme.components[component] = componentValue;
+  });
+  Object.keys(overrides).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.styleOverrides = overrides[component];
+    theme.components[component] = componentValue;
+  });
+
+  // theme.spacing
+  theme.spacing = createSpacing(inputTheme.spacing);
+
+  // theme.mixins.gutters
+  const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
+  const spacing = theme.spacing;
+  theme.mixins = _extends$1({
+    gutters: (styles = {}) => {
+      return _extends$1({
+        paddingLeft: spacing(2),
+        paddingRight: spacing(2)
+      }, styles, {
+        [breakpoints.up('sm')]: _extends$1({
+          paddingLeft: spacing(3),
+          paddingRight: spacing(3)
+        }, styles[breakpoints.up('sm')])
+      });
+    }
+  }, mixins);
+  const {
+      type: typeInput,
+      mode: modeInput
+    } = palette,
+    paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$9);
+  const finalMode = modeInput || typeInput || 'light';
+  theme.palette = _extends$1({
+    // theme.palette.text.hint
+    text: {
+      hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
+    },
+    mode: finalMode,
+    type: finalMode
+  }, paletteRest);
+  return theme;
+}
+
+function createMuiStrictModeTheme(options, ...args) {
+  return createTheme(deepmerge$1({
+    unstable_strictMode: true
+  }, options), ...args);
+}
+
+let warnedOnce = false;
+
+// To remove in v6
+function createStyles(styles) {
+  if (!warnedOnce) {
+    console.warn(['MUI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
+    warnedOnce = true;
+  }
+  return styles;
+}
+
+function isUnitless(value) {
+  return String(parseFloat(value)).length === String(value).length;
+}
+
+// Ported from Compass
+// https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss
+// Emulate the sass function "unit"
+function getUnit(input) {
+  return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
+}
+
+// Emulate the sass function "unitless"
+function toUnitless(length) {
+  return parseFloat(length);
+}
+
+// Convert any CSS <length> or <percentage> value to any another.
+// From https://github.com/KyleAMathews/convert-css-length
+function convertLength(baseFontSize) {
+  return (length, toUnit) => {
+    const fromUnit = getUnit(length);
+
+    // Optimize for cases where `from` and `to` units are accidentally the same.
+    if (fromUnit === toUnit) {
+      return length;
+    }
+
+    // Convert input length to pixels.
+    let pxLength = toUnitless(length);
+    if (fromUnit !== 'px') {
+      if (fromUnit === 'em') {
+        pxLength = toUnitless(length) * toUnitless(baseFontSize);
+      } else if (fromUnit === 'rem') {
+        pxLength = toUnitless(length) * toUnitless(baseFontSize);
+      }
+    }
+
+    // Convert length in pixels to the output unit
+    let outputLength = pxLength;
+    if (toUnit !== 'px') {
+      if (toUnit === 'em') {
+        outputLength = pxLength / toUnitless(baseFontSize);
+      } else if (toUnit === 'rem') {
+        outputLength = pxLength / toUnitless(baseFontSize);
+      } else {
+        return length;
+      }
+    }
+    return parseFloat(outputLength.toFixed(5)) + toUnit;
+  };
+}
+function alignProperty({
+  size,
+  grid
+}) {
+  const sizeBelow = size - size % grid;
+  const sizeAbove = sizeBelow + grid;
+  return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;
+}
+
+// fontGrid finds a minimal grid (in rem) for the fontSize values so that the
+// lineHeight falls under a x pixels grid, 4px in the case of Material Design,
+// without changing the relative line height
+function fontGrid({
+  lineHeight,
+  pixels,
+  htmlFontSize
+}) {
+  return pixels / (lineHeight * htmlFontSize);
+}
+
+/**
+ * generate a responsive version of a given CSS property
+ * @example
+ * responsiveProperty({
+ *   cssProperty: 'fontSize',
+ *   min: 15,
+ *   max: 20,
+ *   unit: 'px',
+ *   breakpoints: [300, 600],
+ * })
+ *
+ * // this returns
+ *
+ * {
+ *   fontSize: '15px',
+ *   '@media (min-width:300px)': {
+ *     fontSize: '17.5px',
+ *   },
+ *   '@media (min-width:600px)': {
+ *     fontSize: '20px',
+ *   },
+ * }
+ * @param {Object} params
+ * @param {string} params.cssProperty - The CSS property to be made responsive
+ * @param {number} params.min - The smallest value of the CSS property
+ * @param {number} params.max - The largest value of the CSS property
+ * @param {string} [params.unit] - The unit to be used for the CSS property
+ * @param {Array.number} [params.breakpoints]  - An array of breakpoints
+ * @param {number} [params.alignStep] - Round scaled value to fall under this grid
+ * @returns {Object} responsive styles for {params.cssProperty}
+ */
+function responsiveProperty({
+  cssProperty,
+  min,
+  max,
+  unit = 'rem',
+  breakpoints = [600, 900, 1200],
+  transform = null
+}) {
+  const output = {
+    [cssProperty]: `${min}${unit}`
+  };
+  const factor = (max - min) / breakpoints[breakpoints.length - 1];
+  breakpoints.forEach(breakpoint => {
+    let value = min + factor * breakpoint;
+    if (transform !== null) {
+      value = transform(value);
+    }
+    output[`@media (min-width:${breakpoint}px)`] = {
+      [cssProperty]: `${Math.round(value * 10000) / 10000}${unit}`
+    };
+  });
+  return output;
+}
+
+function responsiveFontSizes(themeInput, options = {}) {
+  const {
+    breakpoints = ['sm', 'md', 'lg'],
+    disableAlign = false,
+    factor = 2,
+    variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
+  } = options;
+  const theme = _extends$1({}, themeInput);
+  theme.typography = _extends$1({}, theme.typography);
+  const typography = theme.typography;
+
+  // Convert between CSS lengths e.g. em->px or px->rem
+  // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
+  const convert = convertLength(typography.htmlFontSize);
+  const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
+  variants.forEach(variant => {
+    const style = typography[variant];
+    if (!style) {
+      return;
+    }
+    const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
+    if (remFontSize <= 1) {
+      return;
+    }
+    const maxFontSize = remFontSize;
+    const minFontSize = 1 + (maxFontSize - 1) / factor;
+    let {
+      lineHeight
+    } = style;
+    if (!isUnitless(lineHeight) && !disableAlign) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported non-unitless line height with grid alignment.
+Use unitless line heights instead.` : formatMuiErrorMessage$1(6));
+    }
+    if (!isUnitless(lineHeight)) {
+      // make it unitless
+      lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
+    }
+    let transform = null;
+    if (!disableAlign) {
+      transform = value => alignProperty({
+        size: value,
+        grid: fontGrid({
+          pixels: 4,
+          lineHeight,
+          htmlFontSize: typography.htmlFontSize
+        })
+      });
+    }
+    typography[variant] = _extends$1({}, style, responsiveProperty({
+      cssProperty: 'fontSize',
+      min: minFontSize,
+      max: maxFontSize,
+      unit: 'rem',
+      breakpoints: breakpointValues,
+      transform
+    }));
+  });
+  return theme;
+}
+
+const _excluded$P = ["theme"];
+function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+  const scopedTheme = themeInput[THEME_ID];
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$1({}, props, {
+    themeId: scopedTheme ? THEME_ID : undefined,
+    theme: scopedTheme || themeInput
+  }));
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+} : void 0;
+
+function makeStyles$1() {
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is no longer exported from @mui/material/styles.
+You have to import it from @mui/styles.
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : formatMuiErrorMessage$1(14));
+}
+
+function withStyles() {
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withStyles is no longer exported from @mui/material/styles.
+You have to import it from @mui/styles.
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : formatMuiErrorMessage$1(15));
+}
+
+function withTheme() {
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withTheme is no longer exported from @mui/material/styles.
+You have to import it from @mui/styles.
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : formatMuiErrorMessage$1(16));
+}
+
+function shouldSkipGeneratingVar(keys) {
+  var _keys$;
+  return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  // ends with sxConfig
+  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+}
+
+const _excluded$O = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
+  _excluded2$8 = ["palette"];
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return undefined;
+  }
+  const overlay = getOverlayAlpha$1(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
+function assignNode(obj, keys) {
+  keys.forEach(k => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+function setColor(obj, key, defaultValue) {
+  if (!obj[key] && defaultValue) {
+    obj[key] = defaultValue;
+  }
+}
+function toRgb(color) {
+  if (!color || !color.startsWith('hsl')) {
+    return color;
+  }
+  return hslToRgb_1(color);
+}
+function setColorChannel(obj, key) {
+  if (!(`${key}Channel` in obj)) {
+    // custom channel token is not provided, generate one.
+    // if channel token can't be generated, show a warning.
+    obj[`${key}Channel`] = private_safeColorChannel_1(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
+  }
+}
+const silent = fn => {
+  try {
+    return fn();
+  } catch (error) {
+    // ignore error
+  }
+  return undefined;
+};
+const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
+function extendTheme(options = {}, ...args) {
+  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
+  const {
+      colorSchemes: colorSchemesInput = {},
+      cssVarPrefix = 'mui',
+      shouldSkipGeneratingVar: shouldSkipGeneratingVar$1 = shouldSkipGeneratingVar
+    } = options,
+    input = _objectWithoutPropertiesLoose(options, _excluded$O);
+  const getCssVar = createGetCssVar(cssVarPrefix);
+  const _createThemeWithoutVa = createTheme(_extends$1({}, input, colorSchemesInput.light && {
+      palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
+    })),
+    {
+      palette: lightPalette
+    } = _createThemeWithoutVa,
+    muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$8);
+  const {
+    palette: darkPalette
+  } = createTheme({
+    palette: _extends$1({
+      mode: 'dark'
+    }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+  });
+  let theme = _extends$1({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
+    colorSchemes: _extends$1({}, colorSchemesInput, {
+      light: _extends$1({}, colorSchemesInput.light, {
+        palette: lightPalette,
+        opacity: _extends$1({
+          inputPlaceholder: 0.42,
+          inputUnderline: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38
+        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
+        overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
+      }),
+      dark: _extends$1({}, colorSchemesInput.dark, {
+        palette: darkPalette,
+        opacity: _extends$1({
+          inputPlaceholder: 0.5,
+          inputUnderline: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3
+        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
+        overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
+      })
+    })
+  });
+  Object.keys(theme.colorSchemes).forEach(key => {
+    const palette = theme.colorSchemes[key].palette;
+    const setCssVarColor = cssVar => {
+      const tokens = cssVar.split('-');
+      const color = tokens[1];
+      const colorToken = tokens[2];
+      return getCssVar(cssVar, palette[color][colorToken]);
+    };
+
+    // attach black & white channels to common node
+    if (key === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    } else {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    }
+
+    // assign component variables
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    if (key === 'light') {
+      setColor(palette.Alert, 'errorColor', private_safeDarken_1(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', private_safeDarken_1(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', private_safeDarken_1(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', private_safeDarken_1(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
+      setColor(palette.Alert, 'errorStandardBg', private_safeLighten_1(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', private_safeLighten_1(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', private_safeLighten_1(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', private_safeLighten_1(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
+      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
+      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', private_safeLighten_1(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', private_safeLighten_1(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', private_safeLighten_1(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', private_safeLighten_1(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', private_safeLighten_1(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', private_safeLighten_1(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', private_safeLighten_1(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', private_safeLighten_1(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', private_safeLighten_1(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', private_safeLighten_1(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', private_safeLighten_1(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', private_safeLighten_1(palette.warning.main, 0.62));
+      const snackbarContentBackground = private_safeEmphasize_1(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', private_safeEmphasize_1(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
+      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-100'));
+      setColor(palette.Switch, 'primaryDisabledColor', private_safeLighten_1(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', private_safeLighten_1(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', private_safeLighten_1(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', private_safeLighten_1(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', private_safeLighten_1(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', private_safeLighten_1(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', private_safeLighten_1(private_safeAlpha_1(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', private_safeAlpha_1(palette.grey[700], 0.92));
+    } else {
+      setColor(palette.Alert, 'errorColor', private_safeLighten_1(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', private_safeLighten_1(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', private_safeLighten_1(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', private_safeLighten_1(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
+      setColor(palette.Alert, 'errorStandardBg', private_safeDarken_1(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', private_safeDarken_1(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', private_safeDarken_1(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', private_safeDarken_1(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
+      setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
+      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', private_safeDarken_1(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', private_safeDarken_1(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', private_safeDarken_1(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', private_safeDarken_1(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', private_safeDarken_1(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', private_safeDarken_1(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', private_safeDarken_1(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', private_safeDarken_1(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', private_safeDarken_1(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', private_safeDarken_1(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', private_safeDarken_1(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', private_safeDarken_1(palette.warning.main, 0.5));
+      const snackbarContentBackground = private_safeEmphasize_1(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', private_safeEmphasize_1(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
+      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-600'));
+      setColor(palette.Switch, 'primaryDisabledColor', private_safeDarken_1(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', private_safeDarken_1(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', private_safeDarken_1(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', private_safeDarken_1(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', private_safeDarken_1(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', private_safeDarken_1(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', private_safeDarken_1(private_safeAlpha_1(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', private_safeAlpha_1(palette.grey[700], 0.92));
+    }
+
+    // MUI X - DataGrid needs this token.
+    setColorChannel(palette.background, 'default');
+
+    // added for consistency with the `background.default` token
+    setColorChannel(palette.background, 'paper');
+    setColorChannel(palette.common, 'background');
+    setColorChannel(palette.common, 'onBackground');
+    setColorChannel(palette, 'divider');
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
+
+      // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
+
+      if (colors && typeof colors === 'object') {
+        // Silent the error for custom palettes.
+        if (colors.main) {
+          setColor(palette[color], 'mainChannel', private_safeColorChannel_1(toRgb(colors.main)));
+        }
+        if (colors.light) {
+          setColor(palette[color], 'lightChannel', private_safeColorChannel_1(toRgb(colors.light)));
+        }
+        if (colors.dark) {
+          setColor(palette[color], 'darkChannel', private_safeColorChannel_1(toRgb(colors.dark)));
+        }
+        if (colors.contrastText) {
+          setColor(palette[color], 'contrastTextChannel', private_safeColorChannel_1(toRgb(colors.contrastText)));
+        }
+        if (color === 'text') {
+          // Text colors: text.primary, text.secondary
+          setColorChannel(palette[color], 'primary');
+          setColorChannel(palette[color], 'secondary');
+        }
+        if (color === 'action') {
+          // Action colors: action.active, action.selected
+          if (colors.active) {
+            setColorChannel(palette[color], 'active');
+          }
+          if (colors.selected) {
+            setColorChannel(palette[color], 'selected');
+          }
+        }
+      }
+    });
+  });
+  theme = args.reduce((acc, argument) => deepmerge$1(acc, argument), theme);
+  const parserConfig = {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar: shouldSkipGeneratingVar$1
+  };
+  const {
+    vars: themeVars,
+    generateCssVars
+  } = prepareCssVars(theme, parserConfig);
+  theme.vars = themeVars;
+  theme.generateCssVars = generateCssVars;
+  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar$1;
+  theme.unstable_sxConfig = _extends$1({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
+  theme.unstable_sx = function sx(props) {
+    return styleFunctionSx$1({
+      sx: props,
+      theme: this
+    });
+  };
+  return theme;
+}
+
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
+var excludeVariablesFromRoot$1 = excludeVariablesFromRoot;
+
+const defaultTheme$1 = extendTheme();
+const {
+  CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript
+} = createCssVarsProvider({
+  themeId: THEME_ID,
+  theme: defaultTheme$1,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark'
+  },
+  resolveTheme: theme => {
+    const newTheme = _extends$1({}, theme, {
+      typography: createTypography(theme.palette, theme.typography)
+    });
+    newTheme.unstable_sx = function sx(props) {
+      return styleFunctionSx$1({
+        sx: props,
+        theme: this
+      });
+    };
+    return newTheme;
+  },
+  excludeVariablesFromRoot: excludeVariablesFromRoot$1
+});
+
+// TODO: Remove this function in v6.
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function experimental_sx() {
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : formatMuiErrorMessage$1(20));
+}
+
 const boxClasses = generateUtilityClasses$1('MuiBox', ['root']);
 
 const defaultTheme = createTheme();
@@ -42695,11 +44481,11 @@ styled$1(Button)(() => ({
     backgroundColor: ' #343a40',
     borderColor: '#343a40'
 }));
-const LabelComponent = styled$1(Grid)(() => ({
+styled$1(Grid)(() => ({
     alignItems: 'start',
     gap: '1px'
 }));
-const ImportantMark = styled$1('text')(() => ({
+styled$1('text')(() => ({
     color: 'red'
 }));
 styled$1(Box)(() => ({
@@ -46936,12 +48722,10 @@ const MenuProps = {
 };
 makeStyles((theme) => ({
     option: {
-        fontSize: "10px",
-        fontFamily: "Roboto-Reg",
+        fontSize: "10px", // Adjust the font size as needed
     },
     option2: {
         fontSize: "11px",
-        fontFamily: "Roboto-Reg",
     },
 }));
 const extractValuesToArray = (inputString) => {
@@ -46949,7 +48733,7 @@ const extractValuesToArray = (inputString) => {
     const trimmedArray = valuesArray === null || valuesArray === void 0 ? void 0 : valuesArray.map((value) => value.trim());
     return trimmedArray;
 };
-function MultiSelectV1({ props }) {
+function MultiSelectV1({ props, variant }) {
     var _a;
     console.log(props, "ksjh");
     const [personName, setPersonName] = React$1.useState(props.getValues(props.item.name)
@@ -47009,7 +48793,7 @@ function MultiSelectV1({ props }) {
                 "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
                     top: "-10px",
                 },
-            } }, { children: [jsxRuntimeExports.jsxs(InputLabel, Object.assign({ id: "demo-multiple-checkbox-label" }, { children: [props.item.label, props.item.required ? " *" : ""] })), jsxRuntimeExports.jsxs(Select, Object.assign({ labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
+            } }, { children: [renderLabel(variant, props), variant !== "standard" ? jsxRuntimeExports.jsxs(InputLabel, Object.assign({ id: "demo-multiple-checkbox-label" }, { children: [props.item.label, props.item.required ? " *" : ""] })) : '', jsxRuntimeExports.jsxs(Select, Object.assign({ labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
                         "& .MuiTypography-root": {
                             fontSize: "5px !important",
                         },
@@ -47026,7 +48810,7 @@ function MultiSelectV1({ props }) {
                         var _a, _b;
                         setSearchText("");
                         ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onCloseMenu) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onCloseMenu());
-                    }, input: jsxRuntimeExports.jsx(OutlinedInput, { label: props.item.label }), renderValue: (selected) => (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: selectedValues }, { children: selectedOptions.length > 3
+                    }, input: jsxRuntimeExports.jsx(OutlinedInput, { label: variant !== "standard" ? props.item.label : '' }), renderValue: (selected) => (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: selectedValues }, { children: selectedOptions.length > 3
                             ? selectedOptions.length + " Selected"
                             : selectedValues }))), MenuProps: MenuProps, autoFocus: false }, { children: [jsxRuntimeExports.jsx(Box, Object.assign({ sx: {
                                 width: "100%",
@@ -51949,7 +53733,7 @@ const convertDateFormat = (dateStr) => {
     const year = dateParts[2];
     return `${year}-${month}-${day}T00:30:00.000Z`;
 };
-const DateRangePickerComponent = ({ props }) => {
+const DateRangePickerComponent = ({ props, variant }) => {
     const [open, setOpen] = React__default.useState(false);
     const [dateRange, setDateRange] = React__default.useState({
         "startDate": convertDateFormat(props.getValues('FromDate')),
@@ -51994,7 +53778,7 @@ const DateRangePickerComponent = ({ props }) => {
             "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
                 top: "-10px",
             },
-        } }, { children: [jsxRuntimeExports.jsx(TextField, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, value: value || null, className: "read-only", inputRef: textRef, sx: { width: '100%', '& input': { cursor: 'pointer' } }, onClick: () => {
+        } }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(TextField, { label: variant !== "standard" ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', value: value || null, className: "read-only", inputRef: textRef, sx: { width: '100%', '& input': { cursor: 'pointer' } }, onClick: () => {
                     setOpen(true);
                 } }), open && (jsxRuntimeExports.jsx(Box, Object.assign({ sx: {
                     position: "absolute",
@@ -52013,16 +53797,14 @@ const DateRangePickerComponent = ({ props }) => {
 const useStyles$1 = makeStyles((theme) => ({
     option: {
         fontSize: "11px",
-        fontFamily: "Roboto-Reg",
         zIndex: 2000,
     },
     option2: {
         fontSize: "11px",
-        fontFamily: "Roboto-Reg",
         zIndex: 2000,
     },
 }));
-const SingleSelect = ({ props }) => {
+const SingleSelect = ({ props, variant }) => {
     const classes = useStyles$1();
     // const valueRender = props.item.options?.find(
     //   (item) => item.value === props.getValues(props.item.name)
@@ -52030,7 +53812,7 @@ const SingleSelect = ({ props }) => {
     const isOptionEqualToValue = (option, value) => (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value); // Assuming there's a 'value' property in your options
     return (jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
             var _a;
-            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Autocomplete, Object.assign({}, field, { value: props.getValues(props.item.name)
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(Autocomplete, Object.assign({}, field, { value: props.getValues(props.item.name)
                             ? (_a = props.item.options) === null || _a === void 0 ? void 0 : _a.find((item) => item.value === props.getValues(props.item.name))
                             : null, onChange: (_, newValue) => {
                             var _a, _b, _c;
@@ -52062,7 +53844,7 @@ const SingleSelect = ({ props }) => {
                                 },
                             },
                         }, getOptionLabel: (option) => option.label, renderInput: (params) => {
-                            return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: params.inputProps.value && params.inputProps.value }, { children: jsxRuntimeExports.jsx(TextField, Object.assign({}, params, { placeholder: props.item.Placeholder, label: `${props.item.label}${props.item.required ? ' *' : ''}` })) })));
+                            return (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: params.inputProps.value && params.inputProps.value }, { children: jsxRuntimeExports.jsx(TextField, Object.assign({}, params, { placeholder: props.item.Placeholder, label: variant !== "standard" ? `${props.item.label}${props.item.required ? " *" : ""}` : '' })) })));
                         }, isOptionEqualToValue: isOptionEqualToValue })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
         } }, props.item.name));
 };
@@ -52075,14 +53857,14 @@ var VisibilityOff = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("path",
   d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z"
 }), 'VisibilityOff');
 
-const PasswordField = ({ props }) => {
+const PasswordField = ({ props, variant }) => {
     const [showPassword, setShowPassword] = useState(false);
     const handleTogglePasswordVisibility = () => {
         setShowPassword((prevShowPassword) => !prevShowPassword);
     };
     return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [" ", jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
                     var _a, _b;
-                    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ sx: { position: "relative" } }, { children: [" ", jsxRuntimeExports.jsx(TextField, Object.assign({ size: "small", type: showPassword ? "text" : "password", autoComplete: ((_b = (_a = props.item) === null || _a === void 0 ? void 0 : _a.InputProps) === null || _b === void 0 ? void 0 : _b.autoComplete) || 'off', placeholder: props.item.placeholder || "" }, field, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, sx: {
+                    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ sx: { position: "relative" } }, { children: [" ", renderLabel(variant, props), jsxRuntimeExports.jsx(TextField, Object.assign({ size: "small", type: showPassword ? "text" : "password", autoComplete: ((_b = (_a = props.item) === null || _a === void 0 ? void 0 : _a.InputProps) === null || _b === void 0 ? void 0 : _b.autoComplete) || 'off', placeholder: props.item.placeholder || "" }, field, { label: variant !== "standard" ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', sx: {
                                             width: "100%",
                                             "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
                                                 top: "-8px",
@@ -52114,65 +53896,64 @@ const PasswordField = ({ props }) => {
                 } })] })));
 };
 
-const Monthpickerrender = ({ props }) => {
+const Monthpickerrender = ({ props, variant }) => {
     const ref = useRef(null);
     const [calenderOpen, setCalenderOpen] = useState(false);
     return (jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
             var _a, _b;
-            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: jsxRuntimeExports.jsx(ClickAwayListener, Object.assign({ onClickAway: () => setCalenderOpen(false) }, { children: jsxRuntimeExports.jsx(DatePicker, { ref: ref, label: `${props.item.label}${props.item.required ? ' *' : ''}`, views: ["month", "year"], disabled: props.item.disable, value: field.value
-                                    ? dayjs(formatDateMonthAndYear(field.value || null))
-                                    : null, slotProps: {
-                                    textField: {
-                                        onClick: () => setCalenderOpen(true),
-                                        // onBlur: () => setCalenderOpen(false),
-                                    },
-                                }, disableOpenPicker: props.item.disable, 
-                                // onMonthChange={() => setCalenderOpen(false)}
-                                // onYearChange={() => setCalenderOpen(false)}
-                                open: calenderOpen, defaultValue: field.value, onChange: (date) => {
-                                    field.onChange(dayjs(date).format("MM/YYYY"));
-                                    props.setValue(dayjs(date).format("MM/YYYY"));
-                                }, sx: {
-                                    "& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
-                                        top: "-10px",
-                                    },
-                                    "& input": {
-                                        paddingRight: "0px !important",
-                                    },
-                                    "& button": {
-                                        paddingLeft: "0px !important",
-                                        paddingRight: "0px !important",
-                                    },
-                                }, 
-                                // renderInput={(params:any) => (
-                                //   <TextField
-                                //     {...params}
-                                //     fullWidth
-                                //     disabled={props.item.disable || false}
-                                //     InputLabelProps={{
-                                //       shrink: true,
-                                //     }}
-                                //     inputProps={{
-                                //       min: props.item.minDate,
-                                //     }}
-                                //   />
-                                // )}
-                                // ToolbarComponent={({ date, decreaseMonth, increaseMonth }:any) => (
-                                //   <div>
-                                //     <button onClick={decreaseMonth}>&lt;</button>
-                                //     <span>{date.getMonth() + 1}</span>
-                                //     <button onClick={increaseMonth}>&gt;</button>
-                                //   </div>
-                                // )}
-                                minDate: props.item.minDate ? dayjs(props.item.minDate, 'MM/YYYY') : null, maxDate: props.item.maxDate ? dayjs(props.item.maxDate, 'MM/YYYY') : null }) })) })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
-                            fontFamily: "Roboto-Reg",
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(ClickAwayListener, Object.assign({ onClickAway: () => setCalenderOpen(false) }, { children: jsxRuntimeExports.jsx(DatePicker, { ref: ref, label: variant !== "standard" && `${props.item.label}${props.item.required ? ' *' : ''}`, views: ["month", "year"], disabled: props.item.disable, value: field.value
+                                        ? dayjs(formatDateMonthAndYear(field.value || null))
+                                        : null, slotProps: {
+                                        textField: {
+                                            onClick: () => setCalenderOpen(true),
+                                            // onBlur: () => setCalenderOpen(false),
+                                        },
+                                    }, disableOpenPicker: props.item.disable, 
+                                    // onMonthChange={() => setCalenderOpen(false)}
+                                    // onYearChange={() => setCalenderOpen(false)}
+                                    open: calenderOpen, defaultValue: field.value, onChange: (date) => {
+                                        field.onChange(dayjs(date).format("MM/YYYY"));
+                                        props.setValue(dayjs(date).format("MM/YYYY"));
+                                    }, sx: {
+                                        "& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                            top: "-10px",
+                                        },
+                                        "& input": {
+                                            paddingRight: "0px !important",
+                                        },
+                                        "& button": {
+                                            paddingLeft: "0px !important",
+                                            paddingRight: "0px !important",
+                                        },
+                                    }, 
+                                    // renderInput={(params:any) => (
+                                    //   <TextField
+                                    //     {...params}
+                                    //     fullWidth
+                                    //     disabled={props.item.disable || false}
+                                    //     InputLabelProps={{
+                                    //       shrink: true,
+                                    //     }}
+                                    //     inputProps={{
+                                    //       min: props.item.minDate,
+                                    //     }}
+                                    //   />
+                                    // )}
+                                    // ToolbarComponent={({ date, decreaseMonth, increaseMonth }:any) => (
+                                    //   <div>
+                                    //     <button onClick={decreaseMonth}>&lt;</button>
+                                    //     <span>{date.getMonth() + 1}</span>
+                                    //     <button onClick={increaseMonth}>&gt;</button>
+                                    //   </div>
+                                    // )}
+                                    minDate: props.item.minDate ? dayjs(props.item.minDate, 'MM/YYYY') : null, maxDate: props.item.maxDate ? dayjs(props.item.maxDate, 'MM/YYYY') : null }) }))] })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
                             fontSize: "11px",
                             color: "#3651d3",
                         } }, { children: ["(", (_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.helperText, ")"] }))), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
         } }));
 };
 
-const DatepickerWrapperV2 = ({ props }) => {
+const DatepickerWrapperV2 = ({ props, variant }) => {
     const inputTextRef = useRef();
     const [open, setOpen] = useState(false);
     const handleToggle = () => {
@@ -52184,40 +53965,39 @@ const DatepickerWrapperV2 = ({ props }) => {
     };
     return (jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
             var _a, _b, _c, _d, _e, _f;
-            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: jsxRuntimeExports.jsx(DatePicker, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, value: typeof field.value === "string"
-                                ? dayjs(field.value, "DD/MM/YYYY")
-                                : (field.value === null || field.value === undefined) && null, open: open, className: "read-only", format: "DD/MM/YYYY", disabled: props.item.disable || false, onChange: (date) => {
-                                var _a, _b;
-                                field.onChange(dayjs(date).format("DD/MM/YYYY"));
-                                ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onChangeFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onChangeFn());
-                            }, onOpen: handleToggle, onClose: handleToggle, slotProps: {
-                                textField: {
-                                    // style: { input: { cursor: "pointer" } },
-                                    onClick: () => handleToggle(),
-                                    inputRef: inputTextRef,
-                                    onBlur: (e) => {
-                                        var _a, _b;
-                                        ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onBlurFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onBlurFn(e));
-                                    }
-                                    // onFocus: () => inputTextRef.current?.blur(),
-                                },
-                            }, sx: {
-                                "& .css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-zy8vme,.css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
-                                    top: "-10px !important",
-                                },
-                                "& input:hover": {
-                                    cursor: "pointer",
-                                },
-                            }, minDate: ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.minDate) ? dayjs((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.minDate, 'DD/MM/YYYY') : null, maxDate: ((_c = props === null || props === void 0 ? void 0 : props.item) === null || _c === void 0 ? void 0 : _c.maxDate) ? dayjs((_d = props === null || props === void 0 ? void 0 : props.item) === null || _d === void 0 ? void 0 : _d.maxDate, 'DD/MM/YYYY') : null }) })), ((_e = props === null || props === void 0 ? void 0 : props.item) === null || _e === void 0 ? void 0 : _e.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
-                            fontFamily: "Roboto-Reg",
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(DatePicker, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, value: variant !== "standard" ? typeof field.value === "string"
+                                    ? dayjs(field.value, "DD/MM/YYYY")
+                                    : (field.value === null || field.value === undefined) && null : '', open: open, className: "read-only", format: "DD/MM/YYYY", disabled: props.item.disable || false, onChange: (date) => {
+                                    var _a, _b;
+                                    field.onChange(dayjs(date).format("DD/MM/YYYY"));
+                                    ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onChangeFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onChangeFn());
+                                }, onOpen: handleToggle, onClose: handleToggle, slotProps: {
+                                    textField: {
+                                        // style: { input: { cursor: "pointer" } },
+                                        onClick: () => handleToggle(),
+                                        inputRef: inputTextRef,
+                                        onBlur: (e) => {
+                                            var _a, _b;
+                                            ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onBlurFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onBlurFn(e));
+                                        }
+                                        // onFocus: () => inputTextRef.current?.blur(),
+                                    },
+                                }, sx: {
+                                    "& .css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-zy8vme,.css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                        top: "-10px !important",
+                                    },
+                                    "& input:hover": {
+                                        cursor: "pointer",
+                                    },
+                                }, minDate: ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.minDate) ? dayjs((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.minDate, 'DD/MM/YYYY') : null, maxDate: ((_c = props === null || props === void 0 ? void 0 : props.item) === null || _c === void 0 ? void 0 : _c.maxDate) ? dayjs((_d = props === null || props === void 0 ? void 0 : props.item) === null || _d === void 0 ? void 0 : _d.maxDate, 'DD/MM/YYYY') : null })] })), ((_e = props === null || props === void 0 ? void 0 : props.item) === null || _e === void 0 ? void 0 : _e.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
                             fontSize: "11px",
                             color: "#3651d3",
                         } }, { children: ["(", (_f = props === null || props === void 0 ? void 0 : props.item) === null || _f === void 0 ? void 0 : _f.helperText, ")"] }))), !(props === null || props === void 0 ? void 0 : props.getValues(props.item.name)) && (jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) }))] }));
         } }, props.item.name));
 };
 
-const FormRenderFileUpload = ({ props }) => {
-    var _a, _b, _c;
+const FormRenderFileUpload = ({ props, variant }) => {
+    var _a;
     useEffect(() => {
         if (props.getValues(props.item.name) === null ||
             props.getValues(props.item.name) === undefined) {
@@ -52228,7 +54008,7 @@ const FormRenderFileUpload = ({ props }) => {
             }
         }
     }, [props.getValues(props.item.name)]);
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ paddingLeft: "4px" }, { children: [((_a = props.item) === null || _a === void 0 ? void 0 : _a.label) && (jsxRuntimeExports.jsx(Box, Object.assign({ sx: { fontSize: "10px;" } }, { children: renderLabel((_b = props.item) === null || _b === void 0 ? void 0 : _b.label, (_c = props.item) === null || _c === void 0 ? void 0 : _c.required) }))), jsxRuntimeExports.jsx(TextField, { type: "file", id: props.item.name, inputProps: {
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ paddingLeft: "4px" }, { children: [((_a = props.item) === null || _a === void 0 ? void 0 : _a.label) && (jsxRuntimeExports.jsx(Box, Object.assign({ sx: { fontSize: "10px;" } }, { children: renderLabel(variant, props) }))), jsxRuntimeExports.jsx(TextField, { type: "file", id: props.item.name, inputProps: {
                             accept: props.item.fileType === "excel"
                                 ? ".xls, .xlsx"
                                 : props.item.fileType === "pdf"
@@ -52290,25 +54070,23 @@ const FormRenderFileUpload = ({ props }) => {
 const useStyles = makeStyles((theme) => ({
     option: {
         fontSize: "11px",
-        fontFamily: "Roboto-Reg",
         zIndex: 2000,
     },
     option2: {
         fontSize: "11px",
-        fontFamily: "Roboto-Reg",
         zIndex: 2000,
     },
 }));
-const SingleSelectNonAutoComplete = ({ props }) => {
+const SingleSelectNonAutoComplete = ({ props, variant }) => {
     useStyles();
-    return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true, sx: { position: "relative" } }, { children: [jsxRuntimeExports.jsx(InputLabel, Object.assign({ id: "demo-simple-select-label" }, { children: props.item.label })), jsxRuntimeExports.jsx(Select, Object.assign({ labelId: "demo-simple-select-label", id: "demo-simple-select", 
+    return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true, sx: { position: "relative" } }, { children: [renderLabel(variant, props), variant !== "standard" && (jsxRuntimeExports.jsx(InputLabel, Object.assign({ id: "demo-simple-select-label" }, { children: props.item.label }))), jsxRuntimeExports.jsx(Select, Object.assign({ labelId: "demo-simple-select-label", id: "demo-simple-select", 
                 // {...props.register(props.item.name)}
-                value: props.getValues(props.item.name), label: `${props.item.label}${props.item.required ? " *" : ""}`, onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
+                value: props.getValues(props.item.name), label: variant !== "standard" ?
+                    `${props.item.label}${props.item.required ? " *" : ""}` : '', onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
                     var _a, _b;
                     ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onBlurFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onBlurFn(e));
                 } }, { children: props.item.options.map((item) => (jsxRuntimeExports.jsx(MenuItem, Object.assign({ sx: {
                         fontSize: "11px",
-                        fontFamily: "Roboto-Reg",
                         zIndex: 2000,
                     }, value: item.value }, { children: item.label })))) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }), props.item.name));
 };
@@ -52332,7 +54110,7 @@ const FormActiveSwitch = ({ props }) => {
             return !prevActive;
         });
     }, [setValue, item.name]);
-    return (jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: "m-form__input" }, { children: [item.label && (jsxRuntimeExports.jsx("span", Object.assign({ style: { fontSize: "12px", fontWeight: 400, paddingRight: 10 } }, { children: item.label }))), jsxRuntimeExports.jsxs("span", Object.assign({ className: "switch prestashop-switch fixed-width-lg" }, { children: [jsxRuntimeExports.jsx("input", { checked: active, id: `${item.name}_on`, name: item.name, type: "radio", value: "Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_on`, style: { fontFamily: "Roboto-Reg", textTransform: "none" } }, { children: item.label1 ? item.label1 : "Active" })), jsxRuntimeExports.jsx("input", { checked: !active, id: `${item.name}_off`, name: item.name, type: "radio", value: "In Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_off`, style: { fontFamily: "Roboto-Reg", textTransform: "none" } }, { children: item.label2 ? item.label2 : "In Active" })), jsxRuntimeExports.jsx("a", { className: "slide-button btn" })] }))] })) }));
+    return (jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("div", Object.assign({ className: "m-form__input" }, { children: [item.label && (jsxRuntimeExports.jsx("span", Object.assign({ style: { fontSize: "12px", fontWeight: 400, paddingRight: 10 } }, { children: item.label }))), jsxRuntimeExports.jsxs("span", Object.assign({ className: "switch prestashop-switch fixed-width-lg" }, { children: [jsxRuntimeExports.jsx("input", { checked: active, id: `${item.name}_on`, name: item.name, type: "radio", value: "Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_on`, style: { textTransform: "none" } }, { children: item.label1 ? item.label1 : "Active" })), jsxRuntimeExports.jsx("input", { checked: !active, id: `${item.name}_off`, name: item.name, type: "radio", value: "In Active", onChange: handleSwitchChange }), jsxRuntimeExports.jsx("label", Object.assign({ htmlFor: `${item.name}_off`, style: { textTransform: "none" } }, { children: item.label2 ? item.label2 : "In Active" })), jsxRuntimeExports.jsx("a", { className: "slide-button btn" })] }))] })) }));
 };
 
 var joditReact = {exports: {}};
@@ -52413,9 +54191,23 @@ const RichTextEditor = ({ props }) => {
     return (jsxRuntimeExports.jsx(JoditEditor, { ref: editor, value: content, config: config, tabIndex: 1, onBlur: handleBlur, onChange: handleChange }));
 };
 
-const renderLabel = (label, isRequired, alignRight) => {
-    return (jsxRuntimeExports.jsx(LabelComponent, Object.assign({ container: true, style: { justifyContent: "normal" } }, { children: jsxRuntimeExports.jsxs(Box, Object.assign({ fontSize: "12px", fontFamily: "Roboto-Reg" }, { children: [label, isRequired ? jsxRuntimeExports.jsx(ImportantMark, { children: " *" }) : ""] })) })));
-};
+// export const renderLabel = (
+//   label: string,
+//   isRequired?: boolean,
+//   alignRight?: boolean
+// ) => {
+//   return (
+//     <LabelComponent
+//       container
+//       style={{ justifyContent: alignRight ? "flex-end" : "normal" }}
+//     >
+//       <Box fontSize={"12px"}>
+//         {label}
+//         {isRequired ? <ImportantMark> *</ImportantMark> : ""}
+//       </Box>
+//     </LabelComponent>
+//   );
+// };
 function formatDateMonthAndYear(date) {
     // Check if date is a string
     if (typeof date !== "string") {
@@ -52428,31 +54220,29 @@ function formatDateMonthAndYear(date) {
     // Return the formatted date with day set to '01'
     return `${formattedMonth}/01/${year}`;
 }
+const renderLabel = (variant, props) => variant === "standard" && (jsxRuntimeExports.jsxs("span", Object.assign({ className: "formInputlabel", style: { fontSize: "12px" } }, { children: [props.item.label, " ", props.item.required && jsxRuntimeExports.jsx("span", Object.assign({ style: { color: "red" } }, { children: "*" }))] })));
 const RenderForm = (props) => {
     var _a, _b;
-    console.log(props, "propsprops", props.item.inputType);
+    const variant = props.variant || "";
     switch ((_a = props.item) === null || _a === void 0 ? void 0 : _a.inputType) {
         case "text":
         case "multiEmail":
         case "email":
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
                         var _a, _b;
-                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true, 
+                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true, 
                                     // error={props.errors}
-                                    label: `${props.item.label}${props.item.required ? " *" : ""}`, placeholder: props.item.placeholder || "", InputProps: {
+                                    label: variant !== "standard" ?
+                                        `${props.item.label}${props.item.required ? " *" : ""}` : '', placeholder: props.item.placeholder || "", InputProps: {
                                         style: {
-                                            fontFamily: "Roboto-Reg",
                                             border: "none",
                                         },
-                                    }, autoComplete: "off", sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                    }, autoComplete: "off", sx: Object.assign({ "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
                                             top: "-10px",
                                             // fontSize:'14px !important'
                                         }, "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
                                             top: "-10px",
-                                            fontFamily: "Roboto-Reg",
-                                        }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
-                                            fontFamily: "Roboto-Reg",
-                                        }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
+                                        }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {}, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
                                             outline: "none",
                                             border: "1px solid #ced4da", // Add this line to set border to none
                                         }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
@@ -52487,22 +54277,20 @@ const RenderForm = (props) => {
                                             }
                                         },
                                     } })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
-                                        fontFamily: "Roboto-Reg",
                                         fontSize: "11px",
                                         color: "#3651d3",
                                     } }, { children: ["(", (_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.helperText, ")"] }))), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
                     } }, props.item.name) }));
         case "rich-text-editor":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(RichTextEditor, { props: props }), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }, props.item.name) }));
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(RichTextEditor, { props: props }), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }, props.item.name) }));
         case "register-number":
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
                         var _a, _b;
-                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true, onBlur: (e) => {
+                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true, onBlur: (e) => {
                                         var _a, _b;
                                         ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onBlurFn) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onBlurFn(e));
-                                    }, label: `${props.item.label}${props.item.required ? " *" : ""}`, InputProps: {
+                                    }, label: variant !== "standard" ? `${props.item.label}${props.item.required ? " *" : ""}` : '', InputProps: {
                                         style: {
-                                            fontFamily: "Roboto-Reg",
                                             border: "none",
                                         },
                                     }, onInput: (e) => {
@@ -52510,15 +54298,12 @@ const RenderForm = (props) => {
                                             .replace(/\s/g, "")
                                             .replace(/[^a-zA-Z0-9!@#$%^&*()_+{}\[\]:;<>,.?/~`|\\-]/g, "");
                                         props.item.onInputProps && props.item.onInputProps(e);
-                                    }, sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                    }, sx: Object.assign({ "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
                                             top: "-10px",
                                             // fontSize:'14px !important'
                                         }, "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
                                             top: "-10px",
-                                            fontFamily: "Roboto-Reg",
-                                        }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
-                                            fontFamily: "Roboto-Reg",
-                                        }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
+                                        }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {}, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
                                             outline: "none",
                                             border: "1px solid #ced4da", // Add this line to set border to none
                                         }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
@@ -52527,17 +54312,16 @@ const RenderForm = (props) => {
                                         } }, props.item.sx), 
                                     // classes={{ option: { color: "red !important" } }}
                                     value: field.value || "", disabled: props.item.disable })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
-                                        fontFamily: "Roboto-Reg",
                                         fontSize: "11px",
                                         color: "#3651d3",
                                     } }, { children: ["(", (_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.helperText, ")"] }))), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
                     } }, props.item.name) }));
         case "password":
-            return (jsxRuntimeExports.jsx(Box, Object.assign({ position: "relative" }, { children: jsxRuntimeExports.jsx(PasswordField, { props: props }) }), props.item.name));
+            return (jsxRuntimeExports.jsx(Box, Object.assign({ position: "relative" }, { children: jsxRuntimeExports.jsx(PasswordField, { props: props, variant: variant }) }), props.item.name));
         case "select":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(SingleSelect, { props: props }) }));
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(SingleSelect, { props: props, variant: variant }) }));
         case "select-v2":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(SingleSelectNonAutoComplete, { props: props }) }));
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(SingleSelectNonAutoComplete, { props: props, variant: variant }) }));
         // case "select-search-api":
         //   return (
         //     <>
@@ -52548,7 +54332,7 @@ const RenderForm = (props) => {
         case "pincode":
         case "phoneNumber":
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
-                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { size: "small", label: `${props.item.label}${props.item.required ? " *" : ""}`, value: props.getValues(props.item.name) || "", defaultValue: props.getValues(props.item.name) || null, onInput: (e) => {
+                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { size: "small", label: variant !== "standard" ? `${props.item.label}${props.item.required ? " *" : ""}` : '', value: props.getValues(props.item.name) || "", defaultValue: props.getValues(props.item.name) || null, onInput: (e) => {
                                         var _a, _b;
                                         e.target.value = e.target.value.replace(/[^0-9]/g, "");
                                         if (e.target.value === "") {
@@ -52586,7 +54370,7 @@ const RenderForm = (props) => {
                                     }, disabled: props.item.disable })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
                     } }, props.item.name) }));
         case "decimal":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { name: props.item.name, control: props.control, disabled: (_b = props.item) === null || _b === void 0 ? void 0 : _b.disable, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({ type: "text", size: "small", label: `${props.item.label}${props.item.required ? " *" : ""}` }, field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.clearErrors) && (props === null || props === void 0 ? void 0 : props.clearErrors(props.item.name)), sx: {
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { name: props.item.name, control: props.control, disabled: (_b = props.item) === null || _b === void 0 ? void 0 : _b.disable, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(TextField, Object.assign({ type: "text", size: "small", label: variant !== "standard" ? `${props.item.label}${props.item.required ? " *" : ""}` : '' }, field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.clearErrors) && (props === null || props === void 0 ? void 0 : props.clearErrors(props.item.name)), sx: {
                                     "& input": {
                                         textAlign: "right",
                                     },
@@ -52815,45 +54599,41 @@ const RenderForm = (props) => {
         //     </>
         //   );
         case "datepicker":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(DatepickerWrapperV2, { props: props }) }));
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(DatepickerWrapperV2, { props: props, variant: variant }) }));
         case "yearpicker":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: jsxRuntimeExports.jsx(DatePicker, { sx: {
-                                        "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
-                                            top: "-10px",
-                                        },
-                                    }, label: `${props.item.label}${props.item.required ? " *" : ""}`, views: ["year"], value: field.value ? dayjs(field.value) : null, onChange: (date) => field.onChange(date), 
-                                    // minDate={}
-                                    slots: {
-                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                        textField: (textFieldProps) => (jsxRuntimeExports.jsx(TextField, Object.assign({}, textFieldProps, { fullWidth: true, disabled: props.item.disable || false, InputLabelProps: {
-                                                shrink: true,
-                                            } }))),
-                                    } }) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }, props.item.name) }));
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(DatePicker, { sx: {
+                                            "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                                top: "-10px",
+                                            },
+                                        }, label: variant !== "standard" ? `${props.item.label}${props.item.required ? " *" : ""}` : '', views: ["year"], value: field.value ? dayjs(field.value) : null, onChange: (date) => field.onChange(date), 
+                                        // minDate={}
+                                        slots: {
+                                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                            textField: (textFieldProps) => (jsxRuntimeExports.jsx(TextField, Object.assign({}, textFieldProps, { fullWidth: true, disabled: props.item.disable || false, InputLabelProps: {
+                                                    shrink: true,
+                                                } }))),
+                                        } })] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) }, props.item.name) }));
         case "dateRangePicker":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(DateRangePickerComponent, { props: props }) }));
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(DateRangePickerComponent, { props: props, variant: variant }) }));
         case "monthpicker":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Monthpickerrender, { props: props }) }));
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Monthpickerrender, { props: props, variant: variant }) }));
         case "multiselect":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(MultiSelectV1, { props: props }) }));
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(MultiSelectV1, { props: props, variant: variant }) }));
         case "file":
-            return jsxRuntimeExports.jsx(FormRenderFileUpload, { props: props });
+            return jsxRuntimeExports.jsx(FormRenderFileUpload, { props: props, variant: variant });
         case "textarea":
-            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({ multiline: true, size: "small", InputProps: {
+            return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(TextField, Object.assign({ multiline: true, size: "small", InputProps: {
                                     style: {
-                                        fontFamily: "Roboto-Reg",
                                         border: "none",
                                     },
-                                }, sx: Object.assign({ fontFamily: "Roboto-Reg", "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                }, sx: Object.assign({ "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
                                         top: "-10px",
                                     }, "& input": {
                                         fontSize: "11px",
                                         // textTransform:'uppercase'
                                     }, "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
                                         top: "-10px",
-                                        fontFamily: "Roboto-Reg",
-                                    }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {
-                                        fontFamily: "Roboto-Reg",
-                                    }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
+                                    }, "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {}, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
                                         outline: "none",
                                         border: "1px solid #ced4da", // Add this line to set border to none
                                     }, "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
@@ -52867,7 +54647,7 @@ const RenderForm = (props) => {
                                         // textTransform:'uppercase'
                                         maxHeight: "500px !important",
                                         overflow: "auto",
-                                    } }, props.item.sx), minRows: props.item.minRows || 1, maxRows: props.item.maxRows || 100, placeholder: props.item.placeholder || "Type Something..." }, field, { label: `${props.item.label}${props.item.required ? " *" : ""}`, value: field.value || "", disabled: props.item.disable, inputProps: {
+                                    } }, props.item.sx), minRows: props.item.minRows || 1, maxRows: props.item.maxRows || 100, placeholder: props.item.placeholder || "Type Something..." }, field, { label: variant !== "standard" ? `${props.item.label}${props.item.required ? " *" : ""}` : '', value: field.value || "", disabled: props.item.disable, inputProps: {
                                     onInput: (e) => {
                                         var _a;
                                         if (!((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.allowSpecialChars)) {
@@ -52964,9 +54744,7 @@ const customTheme = createTheme({
             xl: 1536,
         },
     },
-    typography: {
-        fontFamily: 'Roboto-Reg'
-    },
+    typography: {},
     palette: {
     // primary: {
     //   // main: 'linear-gradient(135deg, #6379c3 0%, #546ee5 60%)',
@@ -53010,7 +54788,6 @@ const customTheme = createTheme({
         MuiButton: {
             styleOverrides: {
                 root: {
-                    fontFamily: 'Roboto-Reg',
                     textTransform: 'none'
                 }
             }
@@ -53024,7 +54801,7 @@ const FormRenderWrapper = ({ formArray, name, numberOfColumns = 3, form, }) => {
     // useEffect(() => {
     //   // form.reset(initialValues, { resolver: yupResolver(validationSchema) });
     // }, [formArray, validationSchema, initialValues]);
-    return (jsxRuntimeExports.jsx(ThemeProvider, Object.assign({ theme: customTheme }, { children: jsxRuntimeExports.jsx(FormComponent, Object.assign({ container: true, margin: "auto" }, { children: formArray.map((item, i) => {
+    return (jsxRuntimeExports.jsx(ThemeProvider$3, Object.assign({ theme: customTheme }, { children: jsxRuntimeExports.jsx(FormComponent, Object.assign({ container: true, margin: "auto" }, { children: formArray.map((item, i) => {
                 return (jsxRuntimeExports.jsx(Formitem, Object.assign({ container: true, sx: item.CustomProps, noOfColumn: item.numberOfColumns || numberOfColumns }, { children: jsxRuntimeExports.jsx(RenderForm, { item: item, register: form.register, control: form.control, errors: form.formState.errors, getValues: form.getValues, clearErrors: form.clearErrors, setValue: form.setValue }) }), i));
             }) })) })));
 };
@@ -55622,7 +57399,7 @@ newStyled(Button)(({ theme }) => ({
     ":hover": { background: "orange" },
 }));
 newStyled(Typography)(({ theme }) => ({
-    fontFamily: "Roboto-Med",
+// fontFamily: "Roboto-Med",
 }));
 newStyled(Grid, {
     shouldForwardProp: (prop) => prop !== "isActive" && prop !== "noOfColumn",
@@ -55637,7 +57414,7 @@ newStyled(Grid, {
     border: "1px solid #0003",
     fontSize: "12px",
     padding: "6px",
-    fontFamily: "Roboto",
+    // fontFamily: "Roboto",
     textAlign: "center",
     [theme.breakpoints.down("md")]: {
         width: "100%",
@@ -55663,7 +57440,7 @@ newStyled(DialogTitle)(({ theme }) => ({
     justifyContent: "space-between",
     fontSize: "14px",
     cursor: "move",
-    fontFamily: "Roboto",
+    // fontFamily: "Roboto",
     borderBottom: "1px solid rgb(229 231 235 / 1)",
 }));
 
@@ -55685,7 +57462,7 @@ const ConfirmationDialog = ({ openConfirmDialog, handleCancel, onClickSubmit, te
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    fontFamily: "Roboto",
+                    // fontFamily: "Roboto",
                     fontSize: "14px",
                     cursor: "move",
                     borderBottom: "1px solid rgb(229 231 235 / 1)",
@@ -55693,7 +57470,7 @@ const ConfirmationDialog = ({ openConfirmDialog, handleCancel, onClickSubmit, te
                     "& .pt-0": {
                         paddingTop: 0,
                     },
-                } }, { children: [jsxRuntimeExports.jsx(Typography, Object.assign({ fontFamily: "Roboto-Reg" }, { children: text })), jsxRuntimeExports.jsx(Grid, { container: true, gap: 3 })] })), jsxRuntimeExports.jsx(DialogActions, Object.assign({ sx: { borderTop: "1px solid #e0e0e0", marginTop: 3 } }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ style: {
+                } }, { children: [jsxRuntimeExports.jsx(Typography, { children: text }), jsxRuntimeExports.jsx(Grid, { container: true, gap: 3 })] })), jsxRuntimeExports.jsx(DialogActions, Object.assign({ sx: { borderTop: "1px solid #e0e0e0", marginTop: 3 } }, { children: jsxRuntimeExports.jsxs("div", Object.assign({ style: {
                         display: "flex",
                         justifyContent: "flex-end",
                         gap: "8px",
@@ -55784,5 +57561,5 @@ const SessionTimeOut = ({ sessionTime, handleSubmitSession, onSessionExpire, han
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(ConfirmationDialog, { openConfirmDialog: openConfirmModal, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: sessionMessage, Submit: SubmitButtonName, buttonStyleProps: buttonStyleProps }) }));
 };
 
-export { DeleteField, FormRenderWrapper as RenderForm, SessionTimeOut as SessionTimeoutField, useForm as useFormElement, useFormValidatingContext };
+export { Box as BoxTP, Button as ButtonTP, DeleteField, DeleteField as DeleteFieldTP, CssVarsProvider as Experimental_CssVarsProvider, Grid as GridTP, FormRenderWrapper as RenderForm, FormRenderWrapper as RenderFormTP, SessionTimeOut as SessionTimeoutField, SessionTimeOut as SessionTimeoutFieldTP, StyledEngineProvider, THEME_ID, ThemeProvider, ThemeProvider$3 as ThemeProviderTP, Typography as TypographyTP, adaptV4Theme, alpha, createMuiTheme, createStyles, createTheme, css$1 as css, darken, decomposeColor, duration, easing, emphasize, styled$1 as experimentalStyled, extendTheme as experimental_extendTheme, experimental_sx, getContrastRatio, getInitColorSchemeScript, getLuminance, getOverlayAlpha$1 as getOverlayAlpha, hexToRgb, hslToRgb, keyframes, lighten, makeStyles$1 as makeStyles, createMixins as private_createMixins, createTypography as private_createTypography, excludeVariablesFromRoot$1 as private_excludeVariablesFromRoot, recomposeColor, responsiveFontSizes, rgbToHex, shouldSkipGeneratingVar, styled$1 as styled, createMuiStrictModeTheme as unstable_createMuiStrictModeTheme, getUnit as unstable_getUnit, toUnitless as unstable_toUnitless, useColorScheme, useForm as useFormElement, useForm as useFormElementTP, useFormValidatingContext, useFormValidatingContext as useFormValidatingContextTP, useTheme$2 as useTheme, useThemeProps$1 as useThemeProps, withStyles, withTheme };
 //# sourceMappingURL=index.esm.js.map