@sinco/react 1.1.2-rc.85 → 1.1.2-rc.87

package/index.esm.js

@@ -2117,6 +2117,41 @@ function setRef(ref, value) {
 const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var useEnhancedEffect$1 = useEnhancedEffect;
 
+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.useRef(controlled !== undefined);
+  const [valueState, setValue] = React.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  if (process.env.NODE_ENV !== 'production') {
+    React.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.useRef(defaultProp);
+    React.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.useCallback(newValue => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}
+
 /**
  * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
  * See RFC in https://github.com/reactjs/rfcs/pull/220
@@ -3205,7 +3240,7 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-const _excluded$q = ["values", "unit", "step"];
+const _excluded$t = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -3240,7 +3275,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$q);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$t);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -4336,7 +4371,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$p = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$s = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -4344,7 +4379,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$p);
+    other = _objectWithoutPropertiesLoose(options, _excluded$s);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -4382,7 +4417,7 @@ function useTheme$1(defaultTheme = systemDefaultTheme$1) {
   return useTheme$2(defaultTheme);
 }
 
-const _excluded$o = ["sx"];
+const _excluded$r = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -4403,7 +4438,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const {
     systemProps,
     otherProps
@@ -4429,7 +4464,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$n = ["className", "component"];
+const _excluded$q = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -4447,7 +4482,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$n);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$q);
     return /*#__PURE__*/jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -4458,7 +4493,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$m = ["variant"];
+const _excluded$p = ["variant"];
 function isEmpty$1(string) {
   return string.length === 0;
 }
@@ -4472,7 +4507,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -4484,7 +4519,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$l = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$o = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -4621,7 +4656,7 @@ function createStyled(input = {}) {
         // For more details: https://github.com/mui/material-ui/pull/37908
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$l);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$o);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -5042,7 +5077,7 @@ function lighten(color, coefficient) {
   return recomposeColor(color);
 }
 
-const _excluded$k = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+const _excluded$n = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 const defaultTheme$3 = createTheme$1();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = systemStyled('div', {
@@ -5175,7 +5210,7 @@ function createStack(options = {}) {
         className,
         useFlexGap = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$k);
+      other = _objectWithoutPropertiesLoose(props, _excluded$n);
     const ownerState = {
       direction,
       spacing,
@@ -5349,7 +5384,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$j = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$m = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -5518,7 +5553,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$j);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$m);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -5642,7 +5677,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$i = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$l = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -5673,7 +5708,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -5741,7 +5776,7 @@ function createShadow(...px) {
 const shadows$1 = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$2 = shadows$1;
 
-const _excluded$h = ["duration", "easing", "delay"];
+const _excluded$k = ["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 = {
@@ -5792,7 +5827,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$h);
+      other = _objectWithoutPropertiesLoose(options, _excluded$k);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -5842,7 +5877,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$g = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$j = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -5850,7 +5885,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$g);
+    other = _objectWithoutPropertiesLoose(options, _excluded$j);
   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));
@@ -5957,8 +5992,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$f = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$b = ownerState => {
+const _excluded$i = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$e = ownerState => {
   const {
     align,
     gutterBottom,
@@ -6044,7 +6079,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const ownerState = _extends({}, props, {
     align,
     color,
@@ -6057,7 +6092,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$b(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
@@ -6142,6 +6177,19 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
 } : void 0;
 var Typography$1 = Typography;
 
+/**
+ * @ignore - internal component.
+ */
+const FormControlContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  FormControlContext.displayName = 'FormControlContext';
+}
+var FormControlContext$1 = FormControlContext;
+
+function useFormControl() {
+  return React.useContext(FormControlContext$1);
+}
+
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -7211,7 +7259,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 var touchRippleClasses$1 = touchRippleClasses;
 
-const _excluded$e = ["center", "classes", "className"];
+const _excluded$h = ["center", "classes", "className"];
 let _$1 = t => t,
   _t$1,
   _t2$1,
@@ -7340,7 +7388,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -7543,8 +7591,8 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$d = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
-const useUtilityClasses$a = ownerState => {
+const _excluded$g = ["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$d = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -7645,7 +7693,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -7812,7 +7860,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$a(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -8003,13 +8051,762 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
 } : void 0;
 var ButtonBase$1 = ButtonBase;
 
+function getSwitchBaseUtilityClass(slot) {
+  return generateUtilityClass('PrivateSwitchBase', slot);
+}
+generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
+
+const _excluded$f = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+const useUtilityClasses$c = 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$1(ButtonBase$1)(({
+  ownerState
+}) => _extends({
+  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$1('input', {
+  shouldForwardProp: rootShouldForwardProp
+})({
+  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.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 = false,
+      tabIndex,
+      type,
+      value
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
+  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({}, props, {
+    checked,
+    disabled,
+    disableFocusRipple,
+    edge
+  });
+  const classes = useUtilityClasses$c(ownerState);
+  return /*#__PURE__*/jsxs(SwitchBaseRoot, _extends({
+    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__*/jsx(SwitchBaseInput, _extends({
+      autoFocus: autoFocus,
+      checked: checkedProp,
+      defaultChecked: defaultChecked,
+      className: classes.input,
+      disabled: disabled,
+      id: hasLabelFor ? id : undefined,
+      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.bool,
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: PropTypes.bool,
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: PropTypes.node.isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  defaultChecked: PropTypes.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.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.oneOf(['end', 'start', false]),
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: PropTypes.node.isRequired,
+  /**
+   * The id of the `input` element.
+   */
+  id: PropTypes.string,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType$1,
+  /*
+   * @ignore
+   */
+  name: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.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.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The input component prop `type`.
+   */
+  type: PropTypes.string.isRequired,
+  /**
+   * The value of the component.
+   */
+  value: PropTypes.any
+} : void 0;
+var SwitchBase$1 = SwitchBase;
+
+function getSvgIconUtilityClass(slot) {
+  return generateUtilityClass('MuiSvgIcon', slot);
+}
+generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+
+const _excluded$e = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$b = 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$1('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$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
+  return {
+    userSelect: 'none',
+    width: '1em',
+    height: '1em',
+    display: 'inline-block',
+    // the <svg> will define the property that has `currentColor`
+    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
+    flexShrink: 0,
+    transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+      duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
+    }),
+    fontSize: {
+      inherit: 'inherit',
+      small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+      medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+      large: ((_theme$typography3 = theme.typography) == null || (_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 || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
+      action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
+      disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
+      inherit: undefined
+    }[ownerState.color]
+  };
+});
+const SvgIcon = /*#__PURE__*/React.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$e);
+  const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
+  const ownerState = _extends({}, props, {
+    color,
+    component,
+    fontSize,
+    instanceFontSize: inProps.fontSize,
+    inheritViewBox,
+    viewBox,
+    hasSvgAsChild
+  });
+  const more = {};
+  if (!inheritViewBox) {
+    more.viewBox = viewBox;
+  }
+  const classes = useUtilityClasses$b(ownerState);
+  return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
+    as: component,
+    className: clsx(classes.root, className),
+    focusable: "false",
+    color: htmlColor,
+    "aria-hidden": titleAccess ? undefined : true,
+    role: titleAccess ? 'img' : undefined,
+    ref: ref
+  }, more, other, hasSvgAsChild && children.props, {
+    ownerState: ownerState,
+    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/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.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.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/#custom-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), PropTypes.string]),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor: PropTypes.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.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.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: PropTypes.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.string
+} : void 0;
+SvgIcon.muiName = 'SvgIcon';
+var SvgIcon$1 = SvgIcon;
+
+function createSvgIcon(path, displayName) {
+  function Component(props, ref) {
+    return /*#__PURE__*/jsx(SvgIcon$1, _extends({
+      "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$1.muiName;
+  return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
+}
+
+var RadioButtonUncheckedIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+}), 'RadioButtonUnchecked');
+
+var RadioButtonCheckedIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+}), 'RadioButtonChecked');
+
+const RadioButtonIconRoot = styled$1('span', {
+  shouldForwardProp: rootShouldForwardProp
+})({
+  position: 'relative',
+  display: 'flex'
+});
+const RadioButtonIconBackground = styled$1(RadioButtonUncheckedIcon)({
+  // Scale applied to prevent dot misalignment in Safari
+  transform: 'scale(1)'
+});
+const RadioButtonIconDot = styled$1(RadioButtonCheckedIcon)(({
+  theme,
+  ownerState
+}) => _extends({
+  left: 0,
+  position: 'absolute',
+  transform: 'scale(0)',
+  transition: theme.transitions.create('transform', {
+    easing: theme.transitions.easing.easeIn,
+    duration: theme.transitions.duration.shortest
+  })
+}, ownerState.checked && {
+  transform: 'scale(1)',
+  transition: theme.transitions.create('transform', {
+    easing: theme.transitions.easing.easeOut,
+    duration: theme.transitions.duration.shortest
+  })
+}));
+
+/**
+ * @ignore - internal component.
+ */
+function RadioButtonIcon(props) {
+  const {
+    checked = false,
+    classes = {},
+    fontSize
+  } = props;
+  const ownerState = _extends({}, props, {
+    checked
+  });
+  return /*#__PURE__*/jsxs(RadioButtonIconRoot, {
+    className: classes.root,
+    ownerState: ownerState,
+    children: [/*#__PURE__*/jsx(RadioButtonIconBackground, {
+      fontSize: fontSize,
+      className: classes.background,
+      ownerState: ownerState
+    }), /*#__PURE__*/jsx(RadioButtonIconDot, {
+      fontSize: fontSize,
+      className: classes.dot,
+      ownerState: ownerState
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes = {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense radio styling.
+   */
+  fontSize: PropTypes.oneOf(['small', 'medium'])
+} : void 0;
+
+/**
+ * @ignore - internal component.
+ */
+const RadioGroupContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  RadioGroupContext.displayName = 'RadioGroupContext';
+}
+var RadioGroupContext$1 = RadioGroupContext;
+
+function useRadioGroup() {
+  return React.useContext(RadioGroupContext$1);
+}
+
+function getRadioUtilityClass(slot) {
+  return generateUtilityClass('MuiRadio', slot);
+}
+const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
+var radioClasses$1 = radioClasses;
+
+const _excluded$d = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
+const useUtilityClasses$a = ownerState => {
+  const {
+    classes,
+    color,
+    size
+  } = ownerState;
+  const slots = {
+    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
+  };
+  return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
+};
+const RadioRoot = styled$1(SwitchBase$1, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiRadio',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  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[ownerState.color].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' && {
+  [`&.${radioClasses$1.checked}`]: {
+    color: (theme.vars || theme).palette[ownerState.color].main
+  }
+}, {
+  [`&.${radioClasses$1.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled
+  }
+}));
+function areEqualValues(a, b) {
+  if (typeof b === 'object' && b !== null) {
+    return a === b;
+  }
+
+  // The value could be a number, the DOM will stringify it anyway.
+  return String(a) === String(b);
+}
+const defaultCheckedIcon = /*#__PURE__*/jsx(RadioButtonIcon, {
+  checked: true
+});
+const defaultIcon = /*#__PURE__*/jsx(RadioButtonIcon, {});
+const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
+  var _defaultIcon$props$fo, _defaultCheckedIcon$p;
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiRadio'
+  });
+  const {
+      checked: checkedProp,
+      checkedIcon = defaultCheckedIcon,
+      color = 'primary',
+      icon = defaultIcon,
+      name: nameProp,
+      onChange: onChangeProp,
+      size = 'medium',
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+  const ownerState = _extends({}, props, {
+    color,
+    size
+  });
+  const classes = useUtilityClasses$a(ownerState);
+  const radioGroup = useRadioGroup();
+  let checked = checkedProp;
+  const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
+  let name = nameProp;
+  if (radioGroup) {
+    if (typeof checked === 'undefined') {
+      checked = areEqualValues(radioGroup.value, props.value);
+    }
+    if (typeof name === 'undefined') {
+      name = radioGroup.name;
+    }
+  }
+  return /*#__PURE__*/jsx(RadioRoot, _extends({
+    type: "radio",
+    icon: /*#__PURE__*/React.cloneElement(icon, {
+      fontSize: (_defaultIcon$props$fo = defaultIcon.props.fontSize) != null ? _defaultIcon$props$fo : size
+    }),
+    checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
+      fontSize: (_defaultCheckedIcon$p = defaultCheckedIcon.props.fontSize) != null ? _defaultCheckedIcon$p : size
+    }),
+    ownerState: ownerState,
+    classes: classes,
+    name: name,
+    checked: checked,
+    onChange: onChange,
+    ref: ref,
+    className: clsx(classes.root, className)
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? Radio.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.bool,
+  /**
+   * The icon to display when the component is checked.
+   * @default <RadioButtonIcon checked />
+   */
+  checkedIcon: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.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/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * The icon to display when the component is unchecked.
+   * @default <RadioButtonIcon />
+   */
+  icon: PropTypes.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: PropTypes.string,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType$1,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: PropTypes.func,
+  /**
+   * If `true`, the `input` element is required.
+   * @default false
+   */
+  required: PropTypes.bool,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense radio styling.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   */
+  value: PropTypes.any
+} : void 0;
+var Radio$1 = Radio;
+
 var components = {
-  MuiPopper: {
-    defaultProps: {
-      placement: "top"
-    },
-    styleOverrides: {}
-  },
   MuiSelect: {
     styleOverrides: {
       icon: {
@@ -8286,7 +9083,7 @@ var components = {
         },
         ".MuiChip-deleteIconMedium": {
           height: 20,
-          width: 20
+          widht: 20
         }
       }
     }
@@ -8317,7 +9114,7 @@ var components = {
       root: {
         fontFamily: "Roboto",
         textTransform: "unset",
-        fontWeight: 500,
+        fontWeightLight: 300,
         fontSize: "13px",
         lineHeight: "normal",
         "@media(max-width: 885px)": {
@@ -13259,7 +14056,7 @@ var EmptyStateComponent = function EmptyStateComponent(_ref2) {
     subtitle = _ref2.subtitle,
     actions = _ref2.actions,
     _ref2$containerHeight = _ref2.containerHeight,
-    containerHeight = _ref2$containerHeight === void 0 ? '100%' : _ref2$containerHeight,
+    containerHeight = _ref2$containerHeight === void 0 ? '100vh' : _ref2$containerHeight,
     iconStyle = _ref2.iconStyle,
     _ref2$icon = _ref2.icon,
     icon = _ref2$icon === void 0 ? React__default.createElement(DefaultIcon, {
@@ -13269,7 +14066,6 @@ var EmptyStateComponent = function EmptyStateComponent(_ref2) {
   return React__default.createElement(Stack$1, {
     alignItems: "center",
     justifyContent: "center",
-    padding: 1,
     spacing: 2,
     height: containerHeight,
     "data-testid": "empty-state-container"
@@ -13375,7 +14171,6 @@ var FooterAction = function FooterAction(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
     labelChangeCounter = _ref.labelChangeCounter;
-    _ref.children;
   return React__default.createElement(AppBar$1, {
     position: "fixed",
     color: "inherit",
@@ -13610,7 +14405,15 @@ var ProgressSinco = function ProgressSinco(_ref) {
     variant = _ref$variant === void 0 ? 'indeterminate' : _ref$variant,
     valueBuffer = _ref.valueBuffer,
     _ref$lote = _ref.lote,
-    lote = _ref$lote === void 0 ? 0 : _ref$lote;
+    lote = _ref$lote === void 0 ? 0 : _ref$lote,
+    _ref$porcent = _ref.porcent,
+    porcent = _ref$porcent === void 0 ? true : _ref$porcent,
+    _ref$progressBar = _ref.progressBar,
+    progressBar = _ref$progressBar === void 0 ? true : _ref$progressBar,
+    _ref$textPorcent = _ref.textPorcent,
+    textPorcent = _ref$textPorcent === void 0 ? true : _ref$textPorcent,
+    _ref$ilustration = _ref.ilustration,
+    ilustration = _ref$ilustration === void 0 ? true : _ref$ilustration;
   var timeProgress = time || 10;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -13635,7 +14438,7 @@ var ProgressSinco = function ProgressSinco(_ref) {
     gap: 0.8,
     justifyContent: 'center',
     alignItems: 'center'
-  }, React__default.createElement(Stack$1, {
+  }, ilustration && React__default.createElement(Stack$1, {
     width: 60,
     height: 60,
     justifyContent: 'center'
@@ -13644,30 +14447,30 @@ var ProgressSinco = function ProgressSinco(_ref) {
     height: "60",
     viewBox: "0 0 100 100"
   }, React__default.createElement("symbol", {
-    id: 'spinner',
+    id: "spinner",
     viewBox: "0 0 91 60"
   }, React__default.createElement("path", {
-    id: 'path1',
+    id: "path1",
     d: "M16.8395 59.9966L34.0333 41.8759L23.6316 19.7821L0.100342 19.845L16.8395 59.9966Z",
     fill: "#0C4271"
   }), React__default.createElement("path", {
-    id: 'path2',
+    id: "path2",
     d: "M0 18.1417H54.2501L69.5867 0L13.9796 0.160958L0 18.1417Z",
     fill: "#3872A9"
   }), React__default.createElement("path", {
-    id: 'path3',
+    id: "path3",
     d: "M90.177 41.0402L71.8396 0.0457764L55.4082 19.2962L65.6909 41.0332L90.177 41.0402Z",
     fill: "#2063A0"
   }), React__default.createElement("path", {
-    id: 'path4',
+    id: "path4",
     d: "M35.4515 42.6838L19.1216 59.9965L76.425 60L90.1772 42.6838H35.4515Z",
     fill: "#4E91C3"
   })), React__default.createElement("use", {
     xlinkHref: "#spinner"
-  }))), React__default.createElement(Typography$1, {
+  }))), textPorcent && React__default.createElement(Typography$1, {
     variant: "body2",
     color: 'text.secondary'
-  }, "Progresando..."), React__default.createElement(LinearProgress$1, {
+  }, "Progresando..."), progressBar && React__default.createElement(LinearProgress$1, {
     value: progress,
     variant: variant === 'lote' ? 'determinate' : variant,
     valueBuffer: valueBuffer,
@@ -13684,12 +14487,83 @@ var ProgressSinco = function ProgressSinco(_ref) {
         clipPath: 'polygon(5% 0, 100% 0, 95% 100%, 0 100%)'
       }
     }
-  }), React__default.createElement(Typography$1, {
+  }), porcent && React__default.createElement(Typography$1, {
     color: 'text.secondary',
     variant: "subtitle2"
   }, "".concat(progress, "%")))));
 };
 
+var CardRadio = function CardRadio(_ref) {
+  var _ref$RadioPosition = _ref.RadioPosition,
+    RadioPosition = _ref$RadioPosition === void 0 ? 'right' : _ref$RadioPosition,
+    states = _ref.states,
+    slotMedia = _ref.slotMedia,
+    slotHeader = _ref.slotHeader,
+    slotContent = _ref.slotContent,
+    _ref$heightPosition = _ref.heightPosition,
+    heightPosition = _ref$heightPosition === void 0 ? 'top' : _ref$heightPosition,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color;
+  var _useState = useState(states === 'active'),
+    _useState2 = _slicedToArray(_useState, 2),
+    isChecked = _useState2[0],
+    setIsChecked = _useState2[1];
+  var _useState3 = useState(states === 'active'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isActive = _useState4[0],
+    setIsActive = _useState4[1];
+  var handleClick = function handleClick() {
+    if (states === 'disabled') return;
+    setIsChecked(!isChecked);
+    setIsActive(!isActive);
+  };
+  var getBackgroundColor = function getBackgroundColor() {
+    if (states === 'disabled') return '';
+    if (isActive) {
+      return color === 'primary' ? '#2063A014' : '#00BCD414';
+    } else {
+      return color === 'primary' ? '#2063A00A' : '#00BCD40A';
+    }
+  };
+  var getBorderColor = function getBorderColor() {
+    return isActive ? color === 'primary' ? '#2063A0' : '#00BCD4' : '#0000001F';
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Stack$1, {
+    "data-testid": "card-radio",
+    padding: '8px 16px',
+    borderRadius: 1,
+    sx: {
+      border: isActive ? "solid 1px ".concat(getBorderColor()) : 'solid 1px #0000001F',
+      '&:hover': {
+        backgroundColor: states === 'disabled' ? 'none' : getBackgroundColor()
+      },
+      cursor: 'pointer'
+    },
+    bgcolor: getBackgroundColor(),
+    onClick: handleClick
+  }, React__default.createElement(Stack$1, {
+    justifyContent: 'space-between',
+    flexDirection: RadioPosition === 'right' ? 'row' : 'row-reverse',
+    gap: RadioPosition === 'left' ? 1 : 0
+  }, React__default.createElement(Stack$1, {
+    flexDirection: 'row',
+    padding: '0px 16px 0 0',
+    gap: 1
+  }, slotMedia && React__default.createElement(Stack$1, null, slotMedia), React__default.createElement(Stack$1, null, slotHeader && React__default.createElement(Typography$1, {
+    variant: "subtitle2",
+    color: states === 'disabled' ? 'text.disabled' : isActive ? 'text.primary' : 'text.primary'
+  }, slotContent), slotContent && React__default.createElement(Typography$1, {
+    variant: "caption",
+    color: states === 'disabled' ? 'text.disabled' : isActive ? 'text.secondary' : 'text.secondary'
+  }, slotContent))), React__default.createElement(Stack$1, {
+    justifyContent: heightPosition === 'top' ? 'flex-start' : 'center'
+  }, React__default.createElement(Radio$1, {
+    checked: isChecked,
+    color: color,
+    disabled: states === 'disabled'
+  })))));
+};
+
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -18096,4 +18970,4 @@ var useDynamicColor = function useDynamicColor(url) {
   };
 };
 
-export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, PageHeader, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };
+export { AdproSincoTheme, CardRadio, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, PageHeader, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.1.2-rc.85",
+  "version": "1.1.2-rc.87",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/index.d.ts

@@ -3,4 +3,3 @@ export * from './lib/Components';
 export * from './lib/Hooks';
 export * from './lib/Utils';
 export * from './module';
-export * from "./react.module.css";

package/src/lib/Components/CardRadio.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+type RadioPosition = 'left' | 'right';
+type RadioStates = 'active' | 'disabled';
+type RadioHeightPosition = 'top' | 'center';
+type RadioColors = 'primary' | 'secondary';
+export interface CardRadioProps {
+    RadioPosition?: RadioPosition;
+    heightPosition?: RadioHeightPosition;
+    states?: RadioStates;
+    slotMedia?: React.ReactNode;
+    slotHeader?: React.ReactNode | string;
+    slotContent?: React.ReactNode | string;
+    color?: RadioColors;
+}
+export declare const CardRadio: FC<CardRadioProps>;
+export {};

package/src/lib/Components/FooterAction.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 interface FooterActionsProperties {
-    children?: React.ReactNode;
     labelChangeCounter: React.ReactNode | string;
     leftContent?: React.ReactNode;
     rightContent?: React.ReactNode;
 }
-export declare const FooterAction: ({ leftContent, rightContent, labelChangeCounter, children, }: FooterActionsProperties) => React.JSX.Element;
+export declare const FooterAction: ({ leftContent, rightContent, labelChangeCounter, }: FooterActionsProperties) => React.JSX.Element;
 export {};

package/src/lib/Components/ProgressSinco.d.ts

@@ -6,6 +6,10 @@ interface ProgressProps {
     variant?: Variant;
     valueBuffer?: number;
     lote?: number;
+    porcent?: boolean;
+    progressBar?: boolean;
+    textPorcent?: boolean;
+    ilustration?: boolean;
 }
 export declare const ProgressSinco: FC<ProgressProps>;
 export {};

package/src/lib/Components/index.d.ts

@@ -4,3 +4,4 @@ export * from "./FooterAction";
 export * from "./ToastNotification";
 export * from "./PageHeader";
 export * from "./ProgressSinco";
+export * from "./CardRadio";