@xelto.npm/xc2-lib 0.0.30 → 0.0.31

package/dist/cjs/index.js

@@ -5325,6 +5325,10 @@ function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+function isMuiElement(element, muiNames) {
+  return /*#__PURE__*/React__namespace.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+}
+
 /**
  * TODO v5: consider making it private
  *
@@ -5348,6 +5352,42 @@ function setRef(ref, value) {
 
 const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 
+/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+function useControlled({
+  controlled,
+  default: defaultProp,
+  name,
+  state = 'value'
+}) {
+  // isControlled is ignored in the hook dependency lists as it should never change.
+  const {
+    current: isControlled
+  } = React__namespace.useRef(controlled !== undefined);
+  const [valueState, setValue] = React__namespace.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  if (process.env.NODE_ENV !== 'production') {
+    React__namespace.useEffect(() => {
+      if (isControlled !== (controlled !== undefined)) {
+        console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+      }
+    }, [state, name, controlled]);
+    const {
+      current: defaultValue
+    } = React__namespace.useRef(defaultProp);
+    React__namespace.useEffect(() => {
+      if (!isControlled && defaultValue !== defaultProp) {
+        console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
+      }
+    }, [JSON.stringify(defaultProp)]);
+  }
+  const setValueIfUncontrolled = React__namespace.useCallback(newValue => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}
+
 /**
  * https://github.com/facebook/react/issues/14099#issuecomment-440013892
  */
@@ -6489,7 +6529,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 
-const _excluded$i = ["sx"];
+const _excluded$o = ["sx"];
 const splitProps = props => {
   const result = {
     systemProps: {},
@@ -6508,7 +6548,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const {
     systemProps,
     otherProps
@@ -6534,7 +6574,7 @@ function extendSxProp(props) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$h = ["values", "unit", "step"];
+const _excluded$n = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -6569,7 +6609,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$h);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$n);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6647,7 +6687,7 @@ function createSpacing(spacingInput = 8) {
   return spacing;
 }
 
-const _excluded$g = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$m = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -6655,7 +6695,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$g);
+    other = _objectWithoutPropertiesLoose(options, _excluded$m);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -6759,7 +6799,7 @@ function useTheme(defaultTheme = systemDefaultTheme$1) {
   return useTheme$1(defaultTheme);
 }
 
-const _excluded$f = ["className", "component"];
+const _excluded$l = ["className", "component"];
 function createBox(options = {}) {
   const {
     defaultTheme,
@@ -6777,7 +6817,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$f);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$l);
     return /*#__PURE__*/jsxRuntime.exports.jsx(BoxRoot, _extends$1b({
       as: component,
       ref: ref,
@@ -6809,7 +6849,7 @@ process.env.NODE_ENV !== "production" ? Box$1.propTypes /* remove-proptypes */ =
   sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object])
 } : void 0;
 
-const _excluded$e = ["variant"];
+const _excluded$k = ["variant"];
 function isEmpty$1(string) {
   return string.length === 0;
 }
@@ -6823,7 +6863,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+    other = _objectWithoutPropertiesLoose(props, _excluded$k);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -6835,7 +6875,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$d = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+const _excluded$j = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
   _excluded2$1 = ["theme"],
   _excluded3 = ["theme"];
 function isEmpty(obj) {
@@ -6923,7 +6963,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$d);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$j);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -7788,7 +7828,7 @@ function useCurrentColorScheme(options) {
   });
 }
 
-const _excluded$c = ["colorSchemes", "components", "cssVarPrefix"];
+const _excluded$i = ["colorSchemes", "components", "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 {
@@ -7840,7 +7880,7 @@ function createCssVarsProvider(options) {
         components = {},
         cssVarPrefix
       } = themeProp,
-      restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$c);
+      restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$i);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8138,7 +8178,7 @@ function createGetCssVar$1(prefix = '') {
   return getCssVar;
 }
 
-const _excluded$b = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+const _excluded$h = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
 const defaultTheme$5 = createTheme$1();
 const defaultCreateStyledComponent$2 = styled$1('div', {
   name: 'MuiContainer',
@@ -8155,7 +8195,7 @@ const useThemePropsDefault$2 = inProps => useThemeProps$1({
   name: 'MuiContainer',
   defaultTheme: defaultTheme$5
 });
-const useUtilityClasses$3 = (ownerState, componentName) => {
+const useUtilityClasses$9 = (ownerState, componentName) => {
   const getContainerUtilityClass = slot => {
     return generateUtilityClass(componentName, slot);
   };
@@ -8234,7 +8274,7 @@ function createContainer(options = {}) {
         fixed = false,
         maxWidth = 'lg'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$b);
+      other = _objectWithoutPropertiesLoose(props, _excluded$h);
     const ownerState = _extends$1b({}, props, {
       component,
       disableGutters,
@@ -8243,7 +8283,7 @@ function createContainer(options = {}) {
     });
 
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    const classes = useUtilityClasses$3(ownerState, componentName);
+    const classes = useUtilityClasses$9(ownerState, componentName);
     return (
       /*#__PURE__*/
       // @ts-ignore theme is injected by the styled util
@@ -8557,7 +8597,7 @@ const generateDirectionClasses = direction => {
   return [`direction-xs-${String(direction)}`];
 };
 
-const _excluded$a = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+const _excluded$g = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
 const defaultTheme$4 = createTheme$1();
 
 // widening Theme to any so that the consumer can own the theme structure.
@@ -8615,7 +8655,7 @@ function createGrid(options = {}) {
         columnSpacing: columnSpacingProp = spacingProp,
         disableEqualOverflow: themeDisableEqualOverflow
       } = props,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$a);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$g);
     // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
     let disableEqualOverflow = themeDisableEqualOverflow;
     if (nested && themeDisableEqualOverflow !== undefined) {
@@ -8868,7 +8908,7 @@ generateUtilityClasses('MuiGrid', ['root', 'container', 'item',
 // grid sizes for all breakpoints
 ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
 
-const _excluded$9 = ["component", "direction", "spacing", "divider", "children", "className"];
+const _excluded$f = ["component", "direction", "spacing", "divider", "children", "className"];
 const defaultTheme$3 = createTheme$1();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = styled$1('div', {
@@ -8991,7 +9031,7 @@ function createStack(options = {}) {
         children,
         className
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$9);
+      other = _objectWithoutPropertiesLoose(props, _excluded$f);
     const ownerState = {
       direction,
       spacing
@@ -9200,7 +9240,7 @@ const green = {
   A700: '#00c853'
 };
 
-const _excluded$8 = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$e = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -9369,7 +9409,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$8);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$e);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -9493,7 +9533,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$7 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$d = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -9524,7 +9564,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -9583,7 +9623,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$6 = ["duration", "easing", "delay"];
+const _excluded$c = ["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 = {
@@ -9634,7 +9674,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$6);
+      other = _objectWithoutPropertiesLoose(options, _excluded$c);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -9680,7 +9720,7 @@ const zIndex = {
   tooltip: 1500
 };
 
-const _excluded$5 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$b = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -9688,7 +9728,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$5);
+    other = _objectWithoutPropertiesLoose(options, _excluded$b);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage(18));
@@ -9768,7 +9808,7 @@ const getOverlayAlpha = elevation => {
   return (alphaValue / 100).toFixed(2);
 };
 
-const _excluded$4 = ["colorSchemes", "cssVarPrefix"],
+const _excluded$a = ["colorSchemes", "cssVarPrefix"],
   _excluded2 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
@@ -9804,7 +9844,7 @@ function extendTheme(options = {}, ...args) {
       colorSchemes: colorSchemesInput = {},
       cssVarPrefix = 'mui'
     } = options,
-    input = _objectWithoutPropertiesLoose(options, _excluded$4);
+    input = _objectWithoutPropertiesLoose(options, _excluded$a);
   const getCssVar = createGetCssVar(cssVarPrefix);
   const _createThemeWithoutVa = createTheme(_extends$1b({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -10122,8 +10162,8 @@ function getTypographyUtilityClass(slot) {
 }
 generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-const _excluded$3 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$2 = ownerState => {
+const _excluded$9 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$8 = ownerState => {
   const {
     align,
     gutterBottom,
@@ -10206,7 +10246,7 @@ const Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
   const ownerState = _extends$1b({}, props, {
     align,
     color,
@@ -10219,7 +10259,7 @@ const Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$2(ownerState);
+  const classes = useUtilityClasses$8(ownerState);
   return /*#__PURE__*/jsxRuntime.exports.jsx(TypographyRoot, _extends$1b({
     as: Component,
     ref: ref,
@@ -12431,7 +12471,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 
 const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 
-const _excluded$2 = ["center", "classes", "className"];
+const _excluded$8 = ["center", "classes", "className"];
 let _ = t => t,
   _t,
   _t2,
@@ -12560,7 +12600,7 @@ const TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRippl
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+    other = _objectWithoutPropertiesLoose(props, _excluded$8);
   const [ripples, setRipples] = React__namespace.useState([]);
   const nextKey = React__namespace.useRef(0);
   const rippleCallback = React__namespace.useRef(null);
@@ -12759,8 +12799,8 @@ function getButtonBaseUtilityClass(slot) {
 }
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
-const _excluded$1 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
-const useUtilityClasses$1 = ownerState => {
+const _excluded$7 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const useUtilityClasses$7 = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -12861,7 +12901,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
   const buttonRef = React__namespace.useRef(null);
   const rippleRef = React__namespace.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -13028,7 +13068,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$1(ownerState);
+  const classes = useUtilityClasses$7(ownerState);
   return /*#__PURE__*/jsxRuntime.exports.jsxs(ButtonBaseRoot, _extends$1b({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -13231,8 +13271,8 @@ if (process.env.NODE_ENV !== 'production') {
   ButtonGroupContext.displayName = 'ButtonGroupContext';
 }
 
-const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
-const useUtilityClasses = ownerState => {
+const _excluded$6 = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const useUtilityClasses$6 = ownerState => {
   const {
     color,
     disableElevation,
@@ -13457,7 +13497,7 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps,
       type,
       variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
   const ownerState = _extends$1b({}, props, {
     color,
     component,
@@ -13469,7 +13509,7 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps,
     type,
     variant
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses$6(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/jsxRuntime.exports.jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
@@ -28562,10 +28602,1424 @@ BottomInfoBar.propTypes = {
     onRightTextClick: propTypes.exports.func,
 };
 
+/**
+ * @ignore - internal component.
+ */
+const FormControlContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  FormControlContext.displayName = 'FormControlContext';
+}
+
+function useFormControl() {
+  return React__namespace.useContext(FormControlContext);
+}
+
+function getSwitchBaseUtilityClass(slot) {
+  return generateUtilityClass('PrivateSwitchBase', slot);
+}
+generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
+
+const _excluded$5 = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+const useUtilityClasses$5 = ownerState => {
+  const {
+    classes,
+    checked,
+    disabled,
+    edge
+  } = ownerState;
+  const slots = {
+    root: ['root', checked && 'checked', disabled && 'disabled', edge && `edge${capitalize(edge)}`],
+    input: ['input']
+  };
+  return composeClasses(slots, getSwitchBaseUtilityClass, classes);
+};
+const SwitchBaseRoot = styled(ButtonBase)(({
+  ownerState
+}) => _extends$1b({
+  padding: 9,
+  borderRadius: '50%'
+}, ownerState.edge === 'start' && {
+  marginLeft: ownerState.size === 'small' ? -3 : -12
+}, ownerState.edge === 'end' && {
+  marginRight: ownerState.size === 'small' ? -3 : -12
+}));
+const SwitchBaseInput = styled('input')({
+  cursor: 'inherit',
+  position: 'absolute',
+  opacity: 0,
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0,
+  margin: 0,
+  padding: 0,
+  zIndex: 1
+});
+
+/**
+ * @ignore - internal component.
+ */
+const SwitchBase = /*#__PURE__*/React__namespace.forwardRef(function SwitchBase(props, ref) {
+  const {
+      autoFocus,
+      checked: checkedProp,
+      checkedIcon,
+      className,
+      defaultChecked,
+      disabled: disabledProp,
+      disableFocusRipple = false,
+      edge = false,
+      icon,
+      id,
+      inputProps,
+      inputRef,
+      name,
+      onBlur,
+      onChange,
+      onFocus,
+      readOnly,
+      required,
+      tabIndex,
+      type,
+      value
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+  const [checked, setCheckedState] = useControlled({
+    controlled: checkedProp,
+    default: Boolean(defaultChecked),
+    name: 'SwitchBase',
+    state: 'checked'
+  });
+  const muiFormControl = useFormControl();
+  const handleFocus = event => {
+    if (onFocus) {
+      onFocus(event);
+    }
+    if (muiFormControl && muiFormControl.onFocus) {
+      muiFormControl.onFocus(event);
+    }
+  };
+  const handleBlur = event => {
+    if (onBlur) {
+      onBlur(event);
+    }
+    if (muiFormControl && muiFormControl.onBlur) {
+      muiFormControl.onBlur(event);
+    }
+  };
+  const handleInputChange = event => {
+    // Workaround for https://github.com/facebook/react/issues/9023
+    if (event.nativeEvent.defaultPrevented) {
+      return;
+    }
+    const newChecked = event.target.checked;
+    setCheckedState(newChecked);
+    if (onChange) {
+      // TODO v6: remove the second argument.
+      onChange(event, newChecked);
+    }
+  };
+  let disabled = disabledProp;
+  if (muiFormControl) {
+    if (typeof disabled === 'undefined') {
+      disabled = muiFormControl.disabled;
+    }
+  }
+  const hasLabelFor = type === 'checkbox' || type === 'radio';
+  const ownerState = _extends$1b({}, props, {
+    checked,
+    disabled,
+    disableFocusRipple,
+    edge
+  });
+  const classes = useUtilityClasses$5(ownerState);
+  return /*#__PURE__*/jsxRuntime.exports.jsxs(SwitchBaseRoot, _extends$1b({
+    component: "span",
+    className: clsx(classes.root, className),
+    centerRipple: true,
+    focusRipple: !disableFocusRipple,
+    disabled: disabled,
+    tabIndex: null,
+    role: undefined,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    ownerState: ownerState,
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/jsxRuntime.exports.jsx(SwitchBaseInput, _extends$1b({
+      autoFocus: autoFocus,
+      checked: checkedProp,
+      defaultChecked: defaultChecked,
+      className: classes.input,
+      disabled: disabled,
+      id: hasLabelFor && id,
+      name: name,
+      onChange: handleInputChange,
+      readOnly: readOnly,
+      ref: inputRef,
+      required: required,
+      ownerState: ownerState,
+      tabIndex: tabIndex,
+      type: type
+    }, type === 'checkbox' && value === undefined ? {} : {
+      value
+    }, inputProps)), checked ? checkedIcon : icon]
+  }));
+});
+
+// NB: If changed, please update Checkbox, Switch and Radio
+// so that the API documentation is updated.
+process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: propTypes.exports.bool,
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: propTypes.exports.bool,
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: propTypes.exports.node.isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: propTypes.exports.object,
+  /**
+   * @ignore
+   */
+  className: propTypes.exports.string,
+  /**
+   * @ignore
+   */
+  defaultChecked: propTypes.exports.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: propTypes.exports.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: propTypes.exports.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge: propTypes.exports.oneOf(['end', 'start', false]),
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: propTypes.exports.node.isRequired,
+  /**
+   * The id of the `input` element.
+   */
+  id: propTypes.exports.string,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: propTypes.exports.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType,
+  /*
+   * @ignore
+   */
+  name: propTypes.exports.string,
+  /**
+   * @ignore
+   */
+  onBlur: propTypes.exports.func,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: propTypes.exports.func,
+  /**
+   * @ignore
+   */
+  onFocus: propTypes.exports.func,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: propTypes.exports.bool,
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required: propTypes.exports.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: propTypes.exports.object,
+  /**
+   * @ignore
+   */
+  tabIndex: propTypes.exports.oneOfType([propTypes.exports.number, propTypes.exports.string]),
+  /**
+   * The input component prop `type`.
+   */
+  type: propTypes.exports.string.isRequired,
+  /**
+   * The value of the component.
+   */
+  value: propTypes.exports.any
+} : void 0;
+
+function getSvgIconUtilityClass(slot) {
+  return generateUtilityClass('MuiSvgIcon', slot);
+}
+generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+
+const _excluded$4 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$4 = ownerState => {
+  const {
+    color,
+    fontSize,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', color !== 'inherit' && `color${capitalize(color)}`, `fontSize${capitalize(fontSize)}`]
+  };
+  return composeClasses(slots, getSvgIconUtilityClass, classes);
+};
+const SvgIconRoot = styled('svg', {
+  name: 'MuiSvgIcon',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
+  return {
+    userSelect: 'none',
+    width: '1em',
+    height: '1em',
+    display: 'inline-block',
+    fill: 'currentColor',
+    flexShrink: 0,
+    transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+      duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
+    }),
+    fontSize: {
+      inherit: 'inherit',
+      small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+      medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+    }[ownerState.fontSize],
+    // TODO v5 deprecate, v6 remove for sx
+    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
+      action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
+      disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
+      inherit: undefined
+    }[ownerState.color]
+  };
+});
+const SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiSvgIcon'
+  });
+  const {
+      children,
+      className,
+      color = 'inherit',
+      component = 'svg',
+      fontSize = 'medium',
+      htmlColor,
+      inheritViewBox = false,
+      titleAccess,
+      viewBox = '0 0 24 24'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const ownerState = _extends$1b({}, props, {
+    color,
+    component,
+    fontSize,
+    instanceFontSize: inProps.fontSize,
+    inheritViewBox,
+    viewBox
+  });
+  const more = {};
+  if (!inheritViewBox) {
+    more.viewBox = viewBox;
+  }
+  const classes = useUtilityClasses$4(ownerState);
+  return /*#__PURE__*/jsxRuntime.exports.jsxs(SvgIconRoot, _extends$1b({
+    as: component,
+    className: clsx(classes.root, className),
+    focusable: "false",
+    color: htmlColor,
+    "aria-hidden": titleAccess ? undefined : true,
+    role: titleAccess ? 'img' : undefined,
+    ref: ref
+  }, more, other, {
+    ownerState: ownerState,
+    children: [children, titleAccess ? /*#__PURE__*/jsxRuntime.exports.jsx("title", {
+      children: titleAccess
+    }) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Node passed into the SVG element.
+   */
+  children: propTypes.exports.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: propTypes.exports.object,
+  /**
+   * @ignore
+   */
+  className: propTypes.exports.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), propTypes.exports.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: propTypes.exports.elementType,
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['inherit', 'large', 'medium', 'small']), propTypes.exports.string]),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor: propTypes.exports.string,
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox: propTypes.exports.bool,
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering: propTypes.exports.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object]),
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: propTypes.exports.string,
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox: propTypes.exports.string
+} : void 0;
+SvgIcon.muiName = 'SvgIcon';
+
+function createSvgIcon(path, displayName) {
+  function Component(props, ref) {
+    return /*#__PURE__*/jsxRuntime.exports.jsx(SvgIcon, _extends$1b({
+      "data-testid": `${displayName}Icon`,
+      ref: ref
+    }, props, {
+      children: path
+    }));
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    // Need to set `displayName` on the inner component for React.memo.
+    // React prior to 16.14 ignores `displayName` on the wrapper.
+    Component.displayName = `${displayName}Icon`;
+  }
+  Component.muiName = SvgIcon.muiName;
+  return /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(Component));
+}
+
+var CheckBoxOutlineBlankIcon = createSvgIcon( /*#__PURE__*/jsxRuntime.exports.jsx("path", {
+  d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+}), 'CheckBoxOutlineBlank');
+
+var CheckBoxIcon = createSvgIcon( /*#__PURE__*/jsxRuntime.exports.jsx("path", {
+  d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+}), 'CheckBox');
+
+var IndeterminateCheckBoxIcon = createSvgIcon( /*#__PURE__*/jsxRuntime.exports.jsx("path", {
+  d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
+}), 'IndeterminateCheckBox');
+
+function getCheckboxUtilityClass(slot) {
+  return generateUtilityClass('MuiCheckbox', slot);
+}
+const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary']);
+
+const _excluded$3 = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
+const useUtilityClasses$3 = ownerState => {
+  const {
+    classes,
+    indeterminate,
+    color
+  } = ownerState;
+  const slots = {
+    root: ['root', indeterminate && 'indeterminate', `color${capitalize(color)}`]
+  };
+  const composedClasses = composeClasses(slots, getCheckboxUtilityClass, classes);
+  return _extends$1b({}, classes, composedClasses);
+};
+const CheckboxRoot = styled(SwitchBase, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiCheckbox',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.indeterminate && styles.indeterminate, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends$1b({
+  color: (theme.vars || theme).palette.text.secondary
+}, !ownerState.disableRipple && {
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  }
+}, ownerState.color !== 'default' && {
+  [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
+    color: (theme.vars || theme).palette[ownerState.color].main
+  },
+  [`&.${checkboxClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled
+  }
+}));
+const defaultCheckedIcon = /*#__PURE__*/jsxRuntime.exports.jsx(CheckBoxIcon, {});
+const defaultIcon = /*#__PURE__*/jsxRuntime.exports.jsx(CheckBoxOutlineBlankIcon, {});
+const defaultIndeterminateIcon = /*#__PURE__*/jsxRuntime.exports.jsx(IndeterminateCheckBoxIcon, {});
+const Checkbox = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(inProps, ref) {
+  var _icon$props$fontSize, _indeterminateIcon$pr;
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiCheckbox'
+  });
+  const {
+      checkedIcon = defaultCheckedIcon,
+      color = 'primary',
+      icon: iconProp = defaultIcon,
+      indeterminate = false,
+      indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
+      inputProps,
+      size = 'medium',
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const icon = indeterminate ? indeterminateIconProp : iconProp;
+  const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
+  const ownerState = _extends$1b({}, props, {
+    color,
+    indeterminate,
+    size
+  });
+  const classes = useUtilityClasses$3(ownerState);
+  return /*#__PURE__*/jsxRuntime.exports.jsx(CheckboxRoot, _extends$1b({
+    type: "checkbox",
+    inputProps: _extends$1b({
+      'data-indeterminate': indeterminate
+    }, inputProps),
+    icon: /*#__PURE__*/React__namespace.cloneElement(icon, {
+      fontSize: (_icon$props$fontSize = icon.props.fontSize) != null ? _icon$props$fontSize : size
+    }),
+    checkedIcon: /*#__PURE__*/React__namespace.cloneElement(indeterminateIcon, {
+      fontSize: (_indeterminateIcon$pr = indeterminateIcon.props.fontSize) != null ? _indeterminateIcon$pr : size
+    }),
+    ownerState: ownerState,
+    ref: ref,
+    className: clsx(classes.root, className)
+  }, other, {
+    classes: classes
+  }));
+});
+process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: propTypes.exports.bool,
+  /**
+   * The icon to display when the component is checked.
+   * @default <CheckBoxIcon />
+   */
+  checkedIcon: propTypes.exports.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: propTypes.exports.object,
+  /**
+   * @ignore
+   */
+  className: propTypes.exports.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), propTypes.exports.string]),
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked: propTypes.exports.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: propTypes.exports.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   */
+  disableRipple: propTypes.exports.bool,
+  /**
+   * The icon to display when the component is unchecked.
+   * @default <CheckBoxOutlineBlankIcon />
+   */
+  icon: propTypes.exports.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: propTypes.exports.string,
+  /**
+   * If `true`, the component appears indeterminate.
+   * This does not set the native input element to indeterminate due
+   * to inconsistent behavior across browsers.
+   * However, we set a `data-indeterminate` attribute on the `input`.
+   * @default false
+   */
+  indeterminate: propTypes.exports.bool,
+  /**
+   * The icon to display when the component is indeterminate.
+   * @default <IndeterminateCheckBoxIcon />
+   */
+  indeterminateIcon: propTypes.exports.node,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: propTypes.exports.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: propTypes.exports.func,
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required: propTypes.exports.bool,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense checkbox styling.
+   * @default 'medium'
+   */
+  size: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['medium', 'small']), propTypes.exports.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object]),
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   * The browser uses "on" as the default value.
+   */
+  value: propTypes.exports.any
+} : void 0;
+
+function getFormGroupUtilityClass(slot) {
+  return generateUtilityClass('MuiFormGroup', slot);
+}
+generateUtilityClasses('MuiFormGroup', ['root', 'row', 'error']);
+
+function formControlState({
+  props,
+  states,
+  muiFormControl
+}) {
+  return states.reduce((acc, state) => {
+    acc[state] = props[state];
+    if (muiFormControl) {
+      if (typeof props[state] === 'undefined') {
+        acc[state] = muiFormControl[state];
+      }
+    }
+    return acc;
+  }, {});
+}
+
+const _excluded$2 = ["className", "row"];
+const useUtilityClasses$2 = ownerState => {
+  const {
+    classes,
+    row,
+    error
+  } = ownerState;
+  const slots = {
+    root: ['root', row && 'row', error && 'error']
+  };
+  return composeClasses(slots, getFormGroupUtilityClass, classes);
+};
+const FormGroupRoot = styled('div', {
+  name: 'MuiFormGroup',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.row && styles.row];
+  }
+})(({
+  ownerState
+}) => _extends$1b({
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'wrap'
+}, ownerState.row && {
+  flexDirection: 'row'
+}));
+
+/**
+ * `FormGroup` wraps controls such as `Checkbox` and `Switch`.
+ * It provides compact row layout.
+ * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
+ */
+const FormGroup = /*#__PURE__*/React__namespace.forwardRef(function FormGroup(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiFormGroup'
+  });
+  const {
+      className,
+      row = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['error']
+  });
+  const ownerState = _extends$1b({}, props, {
+    row,
+    error: fcs.error
+  });
+  const classes = useUtilityClasses$2(ownerState);
+  return /*#__PURE__*/jsxRuntime.exports.jsx(FormGroupRoot, _extends$1b({
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    ref: ref
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? FormGroup.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: propTypes.exports.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: propTypes.exports.object,
+  /**
+   * @ignore
+   */
+  className: propTypes.exports.string,
+  /**
+   * Display group of elements in a compact row.
+   * @default false
+   */
+  row: propTypes.exports.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object])
+} : void 0;
+
+// Supports determination of isControlled().
+// Controlled input accepts its current value as a prop.
+//
+// @see https://facebook.github.io/react/docs/forms.html#controlled-components
+// @param value
+// @returns {boolean} true if string (including '') or number (including zero)
+function hasValue(value) {
+  return value != null && !(Array.isArray(value) && value.length === 0);
+}
+
+// Determine if field is empty or filled.
+// Response determines if label is presented above field or as placeholder.
+//
+// @param obj
+// @param SSR
+// @returns {boolean} False when not present or empty string.
+//                    True when any number or string with length.
+function isFilled(obj, SSR = false) {
+  return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
+}
+
+// Determine if an Input is adorned on start.
+// It's corresponding to the left with LTR.
+//
+// @param obj
+// @returns {boolean} False when no adornments.
+//                    True when adorned at the start.
+function isAdornedStart(obj) {
+  return obj.startAdornment;
+}
+
+function getFormControlUtilityClasses(slot) {
+  return generateUtilityClass('MuiFormControl', slot);
+}
+generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
+
+const _excluded$1 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const useUtilityClasses$1 = ownerState => {
+  const {
+    classes,
+    margin,
+    fullWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', margin !== 'none' && `margin${capitalize(margin)}`, fullWidth && 'fullWidth']
+  };
+  return composeClasses(slots, getFormControlUtilityClasses, classes);
+};
+const FormControlRoot = styled('div', {
+  name: 'MuiFormControl',
+  slot: 'Root',
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends$1b({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
+  }
+})(({
+  ownerState
+}) => _extends$1b({
+  display: 'inline-flex',
+  flexDirection: 'column',
+  position: 'relative',
+  // Reset fieldset default style.
+  minWidth: 0,
+  padding: 0,
+  margin: 0,
+  border: 0,
+  verticalAlign: 'top'
+}, ownerState.margin === 'normal' && {
+  marginTop: 16,
+  marginBottom: 8
+}, ownerState.margin === 'dense' && {
+  marginTop: 8,
+  marginBottom: 4
+}, ownerState.fullWidth && {
+  width: '100%'
+}));
+
+/**
+ * Provides context such as filled/focused/error/required for form inputs.
+ * Relying on the context provides high flexibility and ensures that the state always stays
+ * consistent across the children of the `FormControl`.
+ * This context is used by the following components:
+ *
+ *  - FormLabel
+ *  - FormHelperText
+ *  - Input
+ *  - InputLabel
+ *
+ * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
+ *
+ * ```jsx
+ * <FormControl>
+ *   <InputLabel htmlFor="my-input">Email address</InputLabel>
+ *   <Input id="my-input" aria-describedby="my-helper-text" />
+ *   <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
+ * </FormControl>
+ * ```
+ *
+ * ⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.
+ * For instance, only one input can be focused at the same time, the state shouldn't be shared.
+ */
+const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormControl(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiFormControl'
+  });
+  const {
+      children,
+      className,
+      color = 'primary',
+      component = 'div',
+      disabled = false,
+      error = false,
+      focused: visuallyFocused,
+      fullWidth = false,
+      hiddenLabel = false,
+      margin = 'none',
+      required = false,
+      size = 'medium',
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const ownerState = _extends$1b({}, props, {
+    color,
+    component,
+    disabled,
+    error,
+    fullWidth,
+    hiddenLabel,
+    margin,
+    required,
+    size,
+    variant
+  });
+  const classes = useUtilityClasses$1(ownerState);
+  const [adornedStart, setAdornedStart] = React__namespace.useState(() => {
+    // We need to iterate through the children and find the Input in order
+    // to fully support server-side rendering.
+    let initialAdornedStart = false;
+    if (children) {
+      React__namespace.Children.forEach(children, child => {
+        if (!isMuiElement(child, ['Input', 'Select'])) {
+          return;
+        }
+        const input = isMuiElement(child, ['Select']) ? child.props.input : child;
+        if (input && isAdornedStart(input.props)) {
+          initialAdornedStart = true;
+        }
+      });
+    }
+    return initialAdornedStart;
+  });
+  const [filled, setFilled] = React__namespace.useState(() => {
+    // We need to iterate through the children and find the Input in order
+    // to fully support server-side rendering.
+    let initialFilled = false;
+    if (children) {
+      React__namespace.Children.forEach(children, child => {
+        if (!isMuiElement(child, ['Input', 'Select'])) {
+          return;
+        }
+        if (isFilled(child.props, true)) {
+          initialFilled = true;
+        }
+      });
+    }
+    return initialFilled;
+  });
+  const [focusedState, setFocused] = React__namespace.useState(false);
+  if (disabled && focusedState) {
+    setFocused(false);
+  }
+  const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
+  let registerEffect;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const registeredInput = React__namespace.useRef(false);
+    registerEffect = () => {
+      if (registeredInput.current) {
+        console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
+      }
+      registeredInput.current = true;
+      return () => {
+        registeredInput.current = false;
+      };
+    };
+  }
+  const childContext = React__namespace.useMemo(() => {
+    return {
+      adornedStart,
+      setAdornedStart,
+      color,
+      disabled,
+      error,
+      filled,
+      focused,
+      fullWidth,
+      hiddenLabel,
+      size,
+      onBlur: () => {
+        setFocused(false);
+      },
+      onEmpty: () => {
+        setFilled(false);
+      },
+      onFilled: () => {
+        setFilled(true);
+      },
+      onFocus: () => {
+        setFocused(true);
+      },
+      registerEffect,
+      required,
+      variant
+    };
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
+  return /*#__PURE__*/jsxRuntime.exports.jsx(FormControlContext.Provider, {
+    value: childContext,
+    children: /*#__PURE__*/jsxRuntime.exports.jsx(FormControlRoot, _extends$1b({
+      as: component,
+      ownerState: ownerState,
+      className: clsx(classes.root, className),
+      ref: ref
+    }, other, {
+      children: children
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: propTypes.exports.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: propTypes.exports.object,
+  /**
+   * @ignore
+   */
+  className: propTypes.exports.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), propTypes.exports.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: propTypes.exports.elementType,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled: propTypes.exports.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: propTypes.exports.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: propTypes.exports.bool,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: propTypes.exports.bool,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: propTypes.exports.bool,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: propTypes.exports.oneOf(['dense', 'none', 'normal']),
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: propTypes.exports.bool,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['medium', 'small']), propTypes.exports.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: propTypes.exports.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+
+function getFormControlLabelUtilityClasses(slot) {
+  return generateUtilityClass('MuiFormControlLabel', slot);
+}
+const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
+
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    disabled,
+    labelPlacement,
+    error
+  } = ownerState;
+  const slots = {
+    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error'],
+    label: ['label', disabled && 'disabled']
+  };
+  return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
+};
+const FormControlLabelRoot = styled('label', {
+  name: 'MuiFormControlLabel',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${formControlLabelClasses.label}`]: styles.label
+    }, styles.root, styles[`labelPlacement${capitalize(ownerState.labelPlacement)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends$1b({
+  display: 'inline-flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  // For correct alignment with the text.
+  verticalAlign: 'middle',
+  WebkitTapHighlightColor: 'transparent',
+  marginLeft: -11,
+  marginRight: 16,
+  // used for row presentation of radio/checkbox
+  [`&.${formControlLabelClasses.disabled}`]: {
+    cursor: 'default'
+  }
+}, ownerState.labelPlacement === 'start' && {
+  flexDirection: 'row-reverse',
+  marginLeft: 16,
+  // used for row presentation of radio/checkbox
+  marginRight: -11
+}, ownerState.labelPlacement === 'top' && {
+  flexDirection: 'column-reverse',
+  marginLeft: 16
+}, ownerState.labelPlacement === 'bottom' && {
+  flexDirection: 'column',
+  marginLeft: 16
+}, {
+  [`& .${formControlLabelClasses.label}`]: {
+    [`&.${formControlLabelClasses.disabled}`]: {
+      color: (theme.vars || theme).palette.text.disabled
+    }
+  }
+}));
+
+/**
+ * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
+ * Use this component if you want to display an extra label.
+ */
+const FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
+  var _slotProps$typography;
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiFormControlLabel'
+  });
+  const {
+      className,
+      componentsProps = {},
+      control,
+      disabled: disabledProp,
+      disableTypography,
+      label: labelProp,
+      labelPlacement = 'end',
+      slotProps = {}
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const muiFormControl = useFormControl();
+  let disabled = disabledProp;
+  if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
+    disabled = control.props.disabled;
+  }
+  if (typeof disabled === 'undefined' && muiFormControl) {
+    disabled = muiFormControl.disabled;
+  }
+  const controlProps = {
+    disabled
+  };
+  ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
+    if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
+      controlProps[key] = props[key];
+    }
+  });
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['error']
+  });
+  const ownerState = _extends$1b({}, props, {
+    disabled,
+    labelPlacement,
+    error: fcs.error
+  });
+  const classes = useUtilityClasses(ownerState);
+  const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
+  let label = labelProp;
+  if (label != null && label.type !== Typography && !disableTypography) {
+    label = /*#__PURE__*/jsxRuntime.exports.jsx(Typography, _extends$1b({
+      component: "span"
+    }, typographySlotProps, {
+      className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
+      children: label
+    }));
+  }
+  return /*#__PURE__*/jsxRuntime.exports.jsxs(FormControlLabelRoot, _extends$1b({
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label]
+  }));
+});
+process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the component appears selected.
+   */
+  checked: propTypes.exports.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: propTypes.exports.object,
+  /**
+   * @ignore
+   */
+  className: propTypes.exports.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: propTypes.exports.shape({
+    typography: propTypes.exports.object
+  }),
+  /**
+   * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
+   */
+  control: propTypes.exports.element.isRequired,
+  /**
+   * If `true`, the control is disabled.
+   */
+  disabled: propTypes.exports.bool,
+  /**
+   * If `true`, the label is rendered as it is passed without an additional typography node.
+   */
+  disableTypography: propTypes.exports.bool,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType,
+  /**
+   * A text or an element to be used in an enclosing label element.
+   */
+  label: propTypes.exports.node,
+  /**
+   * The position of the label.
+   * @default 'end'
+   */
+  labelPlacement: propTypes.exports.oneOf(['bottom', 'end', 'start', 'top']),
+  /**
+   * @ignore
+   */
+  name: propTypes.exports.string,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: propTypes.exports.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: propTypes.exports.shape({
+    typography: propTypes.exports.object
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object]),
+  /**
+   * The value of the component.
+   */
+  value: propTypes.exports.any
+} : void 0;
+
+var StyledFormControlLabel = styled(function (props) { return jsxRuntime.exports.jsx(FormControlLabel, __assign({ ref: props.forwardedRef }, props)); })(function (_a) { return ({
+    boxSizing: 'border-box',
+    marginBottom: '30px',
+    marginLeft: 0,
+    '@media(min-width: 720px)': {
+        marginBottom: '45px',
+    },
+    '@media(min-width: 1024px)': {
+        marginBottom: '15px',
+    },
+    '.MuiTypography-root': {
+        fontFamily: [
+            '"Barlow", sans-serif',
+        ],
+        fontWeight: 400,
+        fontSize: '21px',
+        color: theme.mainPallete.primary.blue,
+        marginLeft: '12px',
+        '@media(min-width: 720px)': {
+            fontSize: '32px',
+            marginLeft: '16px',
+        },
+        '@media(min-width: 1024px)': {
+            fontSize: '14px',
+            marginLeft: '9px',
+        },
+    },
+    '&.disabled': {
+        '.MuiTypography-root': {
+            color: theme.mainPallete.primary.placeholderText,
+            marginLeft: '12px',
+            '@media(min-width: 720px)': {
+                marginLeft: '16px',
+            },
+            '@media(min-width: 1024px)': {
+                marginLeft: '9px',
+            }
+        }
+    }
+}); });
+var StyledCheckbox = styled(Checkbox)(function () {
+    return ({
+        'svg': {
+            width: 20,
+            height: 20,
+            '@media(min-width: 720px)': {
+                width: '27px',
+                height: '27px',
+            },
+            '@media(min-width: 1024px)': {
+                width: '14px',
+                height: '14px',
+            },
+        },
+        padding: '0',
+        width: '20px',
+        height: '20px',
+        '@media(min-width: 720px)': {
+            width: '27px',
+            height: '27px',
+        },
+        '@media(min-width: 1024px)': {
+            width: '14px',
+            height: '14px',
+        },
+        '&.disabled': {
+            backgroundColor: '#F5F7F9',
+            border: '1px solid #A7B1D3',
+            borderRadius: '3px',
+            padding: '0',
+            width: '20px',
+            height: '20px',
+            '@media(min-width: 720px)': {
+                width: '27px',
+                height: '27px',
+            },
+            '@media(min-width: 1024px)': {
+                width: 14,
+                height: 14,
+                border: '1.5px solid #A7B1D3',
+            },
+        },
+        '&.Mui-checked': {
+            '.MuiIcon-root': {
+                width: '20px',
+                height: '20px',
+                '@media(min-width: 720px)': {
+                    width: '27px',
+                    height: '27px',
+                },
+                '@media(min-width: 1024px)': {
+                    width: '14px',
+                    height: '14px',
+                },
+            },
+        },
+        '.MuiTypography-root': {
+            color: theme.mainPallete.primary.placeholderText,
+            marginLeft: '32px',
+            '@media(min-width: 720px)': {
+                marginLeft: '43px',
+            },
+            '@media(min-width: 1024px)': {
+                marginLeft: '23px',
+            }
+        }
+    });
+});
+var CheckboxComponent = function (_a) {
+    var disabled = _a.disabled, label = _a.label, checked = _a.checked, onChange = _a.onChange, indeterminate = _a.indeterminate, forwardedRef = _a.forwardedRef, props = __rest(_a, ["disabled", "label", "checked", "onChange", "indeterminate", "forwardedRef"]);
+    return (jsxRuntime.exports.jsx(FormGroup, { children: jsxRuntime.exports.jsx(StyledFormControlLabel, __assign({}, props, { forwardedRef: forwardedRef, classes: { disabled: 'disabled' }, control: jsxRuntime.exports.jsx(StyledCheckbox, { indeterminate: indeterminate, checked: checked, onChange: onChange, disabled: disabled, classes: { disabled: 'disabled' }, icon: jsxRuntime.exports.jsx(Icon, { iconName: "icon_checkbox_default", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), checkedIcon: jsxRuntime.exports.jsx(Icon, { iconName: "icon_checkbox_checked", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), indeterminateIcon: jsxRuntime.exports.jsx(Icon, { iconName: "icon_checkbox_indeterminate", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }) }), label: label })) }));
+};
+
 exports.AppTile = AppTileComponent;
 exports.BottomBar = BottomBarComponent;
 exports.BottomInfoBar = BottomInfoBar;
 exports.Button = CustomButtonComponent;
+exports.Checkbox = CheckboxComponent;
 exports.Icon = Icon;
 exports.IconButton = IconButtonComponent;
 exports.Illustration = Illustration;