@sinco/react 1.0.11-rc.10 → 1.0.11-rc.12

package/index.js

@@ -6199,7 +6199,7 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-const _excluded$q = ["values", "unit", "step"];
+const _excluded$w = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -6234,7 +6234,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$q);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$w);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -7318,7 +7318,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$p = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$v = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -7326,7 +7326,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$p);
+    other = _objectWithoutPropertiesLoose(options, _excluded$v);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -7364,7 +7364,7 @@ function useTheme$2(defaultTheme = systemDefaultTheme$1) {
   return useTheme$3(defaultTheme);
 }
 
-const _excluded$o = ["sx"];
+const _excluded$u = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -7385,7 +7385,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const {
     systemProps,
     otherProps
@@ -7411,7 +7411,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$t = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -7429,7 +7429,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$n);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$t);
     return /*#__PURE__*/jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -7440,7 +7440,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$m = ["variant"];
+const _excluded$s = ["variant"];
 function isEmpty$1(string) {
   return string.length === 0;
 }
@@ -7454,7 +7454,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -7466,7 +7466,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$l = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$r = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -7561,7 +7561,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$l);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$r);
 
     // 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;
@@ -7941,6 +7941,17 @@ function lighten(color, coefficient) {
   return recomposeColor(color);
 }
 
+/**
+ * Darken or lighten a color, depending on its luminance.
+ * Light colors are darkened, dark colors are lightened.
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+ * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+function emphasize(color, coefficient = 0.15) {
+  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+
 const ThemeContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'ThemeContext';
@@ -8091,7 +8102,7 @@ if (process.env.NODE_ENV !== 'production') {
   process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
 }
 
-const _excluded$k = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+const _excluded$q = ["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', {
@@ -8220,7 +8231,7 @@ function createStack(options = {}) {
         className,
         useFlexGap = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$k);
+      other = _objectWithoutPropertiesLoose(props, _excluded$q);
     const ownerState = {
       direction,
       spacing,
@@ -8394,7 +8405,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$j = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$p = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -8563,7 +8574,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$j);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$p);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -8687,7 +8698,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$i = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$o = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -8718,7 +8729,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -8785,7 +8796,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$h = ["duration", "easing", "delay"];
+const _excluded$n = ["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 = {
@@ -8836,7 +8847,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$h);
+      other = _objectWithoutPropertiesLoose(options, _excluded$n);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -8883,7 +8894,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$g = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$m = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -8891,7 +8902,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$g);
+    other = _objectWithoutPropertiesLoose(options, _excluded$m);
   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));
@@ -8981,12 +8992,12 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-const _excluded$f = ["theme"];
+const _excluded$l = ["theme"];
 function ThemeProvider(_ref) {
   let {
       theme: themeInput
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   const scopedTheme = themeInput[THEME_ID];
   return /*#__PURE__*/jsx(ThemeProvider$1, _extends({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
@@ -9182,7 +9193,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$e = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$k = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -9198,7 +9209,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$e);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$k);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -9836,8 +9847,8 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$d = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
-const useUtilityClasses$9 = ownerState => {
+const _excluded$j = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const useUtilityClasses$e = ownerState => {
   const {
     open,
     exited
@@ -9905,7 +9916,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   // TODO: `modal`` must change its type in this file to match the type of methods
   // provided by `ModalManager`
   const manager = managerProp;
@@ -9980,7 +9991,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
     hideBackdrop,
     keepMounted
   });
-  const classes = useUtilityClasses$9(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   const handleEnter = () => {
     setExited(false);
     if (onTransitionEnter) {
@@ -10200,8 +10211,8 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$c = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$8 = ownerState => {
+const _excluded$i = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$d = ownerState => {
   const {
     color,
     fontSize,
@@ -10266,7 +10277,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$c);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -10279,7 +10290,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$8(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
@@ -10421,10 +10432,22 @@ var utils = /*#__PURE__*/Object.freeze({
 	useIsFocusVisible: useIsFocusVisible
 });
 
+var ArrowDownward = createSvgIcon$1( /*#__PURE__*/jsx("path", {
+  d: "m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+}), 'ArrowDownward');
+
+var ArrowUpward = createSvgIcon$1( /*#__PURE__*/jsx("path", {
+  d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+}), 'ArrowUpward');
+
 var CheckCircleRounded = createSvgIcon$1( /*#__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 2zM9.29 16.29 5.7 12.7a.9959.9959 0 0 1 0-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"
 }), 'CheckCircleRounded');
 
+var Close$1 = createSvgIcon$1( /*#__PURE__*/jsx("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), 'Close');
+
 var ErrorRounded = createSvgIcon$1( /*#__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 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"
 }), 'ErrorRounded');
@@ -10572,13 +10595,202 @@ const components = {
       }
     }
   },
-  MuiChip: {
+  MuiCheckbox: {
+    variants: [{
+      props: {
+        size: "xsmall"
+      },
+      style: {
+        padding: 2
+      }
+    }, {
+      props: {
+        size: "small"
+      },
+      style: {
+        padding: 4
+      }
+    }, {
+      props: {
+        size: "medium"
+      },
+      style: {
+        padding: 11
+      }
+    }],
     defaultProps: {
-      size: 'small'
-    },
+      size: "small"
+    }
+  },
+  MuiChip: {
+    variants: [{
+      props: {
+        size: "xsmall"
+      },
+      style: {
+        height: 16
+      }
+    }],
     styleOverrides: {
+      sizeSmall: {
+        height: 24
+      },
+      sizeMedium: {
+        height: 30
+      },
       root: {
-        borderRadius: 4
+        borderRadius: 4,
+        "&.MuiChip-filled.MuiChip-colorPrimary": {
+          color: SincoTheme.palette.text.primary,
+          backgroundColor: "#E4ECF4",
+          "&:hover": {
+            backgroundColor: "#BCD0E3"
+          },
+          ".MuiChip-deleteIcon": {
+            color: "#90B1D0",
+            "&:hover": {
+              color: "#6392BD"
+            }
+          }
+        },
+        "&.MuiChip-filled.MuiChip-colorSecondary": {
+          color: SincoTheme.palette.text.primary,
+          backgroundColor: "#E0F7FA",
+          "&:hover": {
+            backgroundColor: "#B3EBF2"
+          },
+          ".MuiChip-deleteIcon": {
+            color: "#80DEEA",
+            "&:hover": {
+              color: "#4DD0E1"
+            }
+          }
+        },
+        "&.MuiChip-filled.MuiChip-colorError": {
+          color: SincoTheme.palette.text.primary,
+          backgroundColor: "#F9E8E8",
+          "&:hover": {
+            backgroundColor: "#F1C7C7"
+          },
+          ".MuiChip-deleteIcon": {
+            color: "#E8A1A1",
+            "&:hover": {
+              color: "#DF7B7B"
+            }
+          }
+        },
+        "&.MuiChip-filled.MuiChip-colorSuccess": {
+          color: SincoTheme.palette.text.primary,
+          backgroundColor: "#F2F9E7",
+          "&:hover": {
+            backgroundColor: "#DDEFC4"
+          },
+          ".MuiChip-deleteIcon": {
+            color: "#C7E49D",
+            "&:hover": {
+              color: "#A0D158"
+            }
+          }
+        },
+        "&.MuiChip-filled.MuiChip-colorInfo": {
+          color: SincoTheme.palette.text.primary,
+          backgroundColor: "#E6F3F8",
+          "&:hover": {
+            backgroundColor: "#C0E2EE"
+          },
+          ".MuiChip-deleteIcon": {
+            color: "#96CFE2",
+            "&:hover": {
+              color: "#6CBCD6"
+            }
+          }
+        },
+        "&.MuiChip-filled.MuiChip-colorWarning": {
+          color: SincoTheme.palette.text.primary,
+          backgroundColor: "#FFF0E0",
+          "&:hover": {
+            backgroundColor: "#FEDAB3"
+          },
+          ".MuiChip-deleteIcon": {
+            color: "#FDC280",
+            "&:hover": {
+              color: "#FCAA4D"
+            }
+          }
+        },
+        //////
+        "&.MuiChip-outlined.MuiChip-colorPrimary": {
+          color: SincoTheme.palette.primary.main,
+          border: "solid 1px  #90B1D0",
+          ".MuiChip-deleteIcon": {
+            color: "#90B1D0",
+            "&:hover": {
+              color: "#6392BD"
+            }
+          }
+        },
+        "&.MuiChip-outlined.MuiChip-colorSecondary": {
+          color: SincoTheme.palette.secondary.main,
+          border: "solid 1px  #80DEEA",
+          ".MuiChip-deleteIcon": {
+            color: "#80DEEA",
+            "&:hover": {
+              color: "#80DEEA"
+            }
+          }
+        },
+        "&.MuiChip-outlined.MuiChip-colorError": {
+          color: SincoTheme.palette.error.main,
+          border: "solid 1px  #E8A1A1",
+          ".MuiChip-deleteIcon": {
+            color: "#E8A1A1",
+            "&:hover": {
+              color: "#DF7B7B"
+            }
+          }
+        },
+        "&.MuiChip-outlined.MuiChip-colorSuccess": {
+          color: SincoTheme.palette.success.main,
+          border: "solid 1px  #C7E49D",
+          ".MuiChip-deleteIcon": {
+            color: "#C7E49D",
+            "&:hover": {
+              color: "#B1D975"
+            }
+          }
+        },
+        "&.MuiChip-outlined.MuiChip-colorInfo": {
+          color: SincoTheme.palette.info.main,
+          border: "solid 1px  #96CFE2",
+          ".MuiChip-deleteIcon": {
+            color: "#96CFE2",
+            "&:hover": {
+              color: "#6CBCD6s"
+            }
+          }
+        },
+        "&.MuiChip-outlined.MuiChip-colorWarning": {
+          color: SincoTheme.palette.warning.main,
+          border: "solid 1px  #FDC280",
+          ".MuiChip-deleteIcon": {
+            color: "#FDC280",
+            "&:hover": {
+              color: "#FCAA4D"
+            }
+          }
+        },
+        ".MuiChip-deleteIconXsmall": {
+          height: 12,
+          width: 12
+        },
+        ".MuiChip-deleteIconSmall": {
+          height: 16,
+          width: 16
+        },
+        ".MuiChip-deleteIconMedium": {
+          height: 20,
+          width: 20
+        }
       }
     }
   },
@@ -10601,25 +10813,39 @@ const components = {
     }
   },
   MuiButton: {
-    defaultProps: {
-      size: 'medium'
-    },
     styleOverrides: {
-      fullWidth: {
-        width: '100%'
+      endIcon: {
+        marginLeft: 2
+      },
+      iconSizeSmall: {
+        height: 14,
+        width: 14
+      },
+      iconSizeMedium: {
+        height: 18,
+        width: 18
+      },
+      iconSizeLarge: {
+        height: 18,
+        width: 22
       },
       sizeSmall: {
-        padding: '4px 10px'
+        height: 26
       },
       sizeMedium: {
-        padding: '7.5px 15px'
+        height: 32,
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        }
       },
       sizeLarge: {
-        padding: '10.5px 22px',
-        fontSize: 14
-      },
-      root: {
-        width: "fit-content"
+        height: 38,
+        fontSize: 14,
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
+        }
       }
     }
   },
@@ -10628,11 +10854,6 @@ const components = {
       size: "small"
     }
   },
-  MuiCheckbox: {
-    defaultProps: {
-      size: "small"
-    }
-  },
   MuiFab: {
     defaultProps: {
       size: "small"
@@ -10840,6 +11061,21 @@ const components = {
     }
   },
   MuiRadio: {
+    variants: [{
+      props: {
+        size: "small"
+      },
+      style: {
+        padding: 2
+      }
+    }, {
+      props: {
+        size: "medium"
+      },
+      style: {
+        padding: 9
+      }
+    }],
     defaultProps: {
       size: "small"
     }
@@ -10874,44 +11110,105 @@ const components = {
 
 const palette = {
   primary: {
-    main: "#1e62a1",
-    light: "#5a8fd3",
-    dark: "#003972",
+    50: "#E4ECF4",
+    100: "#BCD0E3",
+    200: "#8FB1D0",
+    300: "#6392BD",
+    light: "417AAE",
+    main: "#2063A0",
+    600: "#1C5B98",
+    700: "#18518E",
+    800: "#134784",
+    dark: "#0B3573",
+    A100: "#A5C5FF",
+    A200: "#72A4FF",
+    A400: "#3F83FF",
+    A700: "#2572FF",
     contrastText: "#ffffff"
   },
   secondary: {
-    main: "#0CBBE2",
-    light: "#67eeff",
-    dark: "#008bb0",
+    50: "#E0F7FA",
+    100: "#B3EBF2",
+    200: "#80DEEA",
+    300: "#4DD0E1",
+    light: "#26C6DA",
+    main: "#00BCD4",
+    600: "#00B6CF",
+    700: "#00ADC9",
+    800: "#00A5C3",
+    dark: "#0097B9",
+    A100: "#E2F9FF",
+    A200: "#AFEEFF",
+    A400: "#7CE3FF",
+    A700: "#63DDFF",
     contrastText: "#ffffff"
   },
-  text: {
-    primary: "#101840de",
-    secondary: "#10184099",
-    disabled: "#10184061"
-  },
   error: {
+    50: "#F9E8E8",
+    100: "#F1C7C7",
+    200: "#E8A1A1",
+    300: "#DF7B7B",
+    light: "#D85F5F",
     main: "#D14343",
-    light: "#d85f5f",
-    dark: "#b51e1e",
+    600: "#CC3D3D",
+    700: "#C63434",
+    800: "#C02C2C",
+    dark: "#B51E1E",
+    A100: "#FFECEC",
+    A200: "#FFB9B9",
+    A400: "#FF8686",
+    A700: "#FF6D6D",
     contrastText: "#ffffff"
   },
   warning: {
-    main: "#fb8500",
-    light: "#fc9726",
-    dark: "#f85500",
+    50: "#FFF0E0",
+    100: "#FEDAB3",
+    200: "#FDC280",
+    300: "#FCAA4D",
+    light: "#FC9726",
+    main: "#FB8500",
+    600: "#FA7D00",
+    700: "#FA7200",
+    800: "#F96800",
+    dark: "#F85500",
+    A100: "#FFFFFF",
+    A200: "#FFF1EB",
+    A400: "#FFCCB8",
+    A700: "#FFBA9F",
     contrastText: "#ffffff"
   },
   info: {
-    main: "#2d9fc5",
-    light: "#4dadce",
-    dark: "#1172a3",
+    50: "#E6F3F8",
+    100: "#C0E2EE",
+    200: "#96CFE2",
+    300: "#6CBCD6",
+    light: "#4DADCE",
+    main: "#2D9FC5",
+    600: "#2897BF",
+    700: "#228DB8",
+    800: "#1C83B0",
+    dark: "#1172A3",
+    A100: "#D4EFFF",
+    A200: "#A1DCFF",
+    A400: "#6ECAFF",
+    A700: "#54C1FF",
     contrastText: "#ffffff"
   },
   success: {
-    main: "#8fc93a",
-    dark: "#60a918",
-    light: "#a0d158",
+    50: "#F2F9E7",
+    100: "#DDEFC4",
+    200: "#C7E49D",
+    300: "#B1D975",
+    light: "#A0D158",
+    main: "#8FC93A",
+    600: "#87C334",
+    700: "#7CBC2C",
+    800: "#72B525",
+    dark: "#60A918",
+    A100: "#EDFFDE",
+    A200: "#D2FFAB",
+    A400: "#B6FF78",
+    A700: "#A9FF5E",
     contrastText: "#ffffff"
   },
   grey: {
@@ -10930,6 +11227,11 @@ const palette = {
     A400: "#696F8C",
     A700: "#101840"
   },
+  text: {
+    primary: "#101840de",
+    secondary: "#10184099",
+    disabled: "#10184061"
+  },
   action: {
     active: "rgba(16, 24, 64, 0.54)",
     hover: "rgba(16, 24, 64, 0.04)",
@@ -10970,8 +11272,18 @@ const mixins = {
 
 const typography = {
   fontSize: 13,
+  body3: {
+    fontFamily: 'Roboto',
+    fontWeight: 310,
+    fontSize: 12,
+    letterSpacing: 0.17,
+    lineHeight: 1.2,
+    [breakpoints.down('md')]: {
+      fontSize: 11
+    }
+  },
   body1: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 14,
     fontWeight: 400,
     letterSpacing: 0.15,
@@ -10981,7 +11293,7 @@ const typography = {
     }
   },
   body2: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 13,
     fontWeight: 400,
     letterSpacing: 0.17,
@@ -10991,7 +11303,7 @@ const typography = {
     }
   },
   subtitle1: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 14,
     fontWeight: 500,
     letterSpacing: 0.15,
@@ -11001,7 +11313,7 @@ const typography = {
     }
   },
   subtitle2: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 13,
     fontWeight: 500,
     letterSpacing: 0.1,
@@ -11010,8 +11322,15 @@ const typography = {
       fontSize: 14
     }
   },
-  caption: {
+  subtitle3: {
     fontFamily: "Roboto",
+    fontSize: 12,
+    lineHeight: 1.16,
+    letterSpacing: 0.17,
+    fontWeight: 400
+  },
+  caption: {
+    fontFamily: 'Roboto',
     fontSize: 11,
     fontWeight: 400,
     letterSpacing: 0.4,
@@ -11021,7 +11340,7 @@ const typography = {
     }
   },
   overline: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 11,
     fontWeight: 400,
     letterSpacing: 1,
@@ -11031,7 +11350,7 @@ const typography = {
     }
   },
   h6: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 16,
     fontWeight: 600,
     lineHeight: 1.6,
@@ -11040,44 +11359,44 @@ const typography = {
     }
   },
   h5: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 18,
     fontWeight: 600,
     lineHeight: 1.8
   },
   h4: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 20,
     fontWeight: 600,
     letterSpacing: 0.25,
     lineHeight: 1
   },
   h3: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 28,
     fontWeight: 500,
     lineHeight: 1.2
   },
   h2: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 32,
     fontWeight: 400,
     letterSpacing: -0.5,
     lineHeight: 1.2
   },
   h1: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 40,
     fontWeight: 300,
     letterSpacing: -1.5,
     lineHeight: 1.4
   },
   button: {
-    fontFamily: "Roboto",
-    textTransform: "unset",
+    fontFamily: 'Roboto',
+    textTransform: 'unset',
     fontWeightLight: 300,
     fontSize: 13,
-    lineHeight: "normal",
+    lineHeight: 'normal',
     '@media(max-width: 885px)': {
       fontSize: 14
     }
@@ -11093,20 +11412,7 @@ const themeOptions = {
   breakpoints
 };
 
-const SincoTheme = createTheme(Object.assign({}, themeOptions, {
-  typography: {
-    body3: {
-      fontFamily: "Roboto",
-      fontWeight: 310,
-      fontSize: 12,
-      letterSpacing: 0.17,
-      lineHeight: 1.2,
-      [breakpoints.down("md")]: {
-        fontSize: 11
-      }
-    }
-  }
-}));
+const SincoTheme = createTheme(Object.assign({}, themeOptions));
 
 var wellKnownSymbol$d = wellKnownSymbol$f;
 
@@ -12624,8 +12930,8 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$b = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$7 = ownerState => {
+const _excluded$h = ["className", "component", "elevation", "square", "variant"];
+const useUtilityClasses$c = ownerState => {
   const {
     square,
     elevation,
@@ -12679,14 +12985,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$b);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const ownerState = _extends({}, props, {
     component,
     elevation,
     square,
     variant
   });
-  const classes = useUtilityClasses$7(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme();
@@ -12837,15 +13143,15 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 var touchRippleClasses$1 = touchRippleClasses;
 
-const _excluded$a = ["center", "classes", "className"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
+const _excluded$g = ["center", "classes", "className"];
+let _$1 = t => t,
+  _t$1,
+  _t2$1,
+  _t3$1,
+  _t4$1;
 const DURATION = 550;
 const DELAY_RIPPLE = 80;
-const enterKeyframe = keyframes(_t || (_t = _`
+const enterKeyframe = keyframes(_t$1 || (_t$1 = _$1`
   0% {
     transform: scale(0);
     opacity: 0.1;
@@ -12856,7 +13162,7 @@ const enterKeyframe = keyframes(_t || (_t = _`
     opacity: 0.3;
   }
 `));
-const exitKeyframe = keyframes(_t2 || (_t2 = _`
+const exitKeyframe = keyframes(_t2$1 || (_t2$1 = _$1`
   0% {
     opacity: 1;
   }
@@ -12865,7 +13171,7 @@ const exitKeyframe = keyframes(_t2 || (_t2 = _`
     opacity: 0;
   }
 `));
-const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
+const pulsateKeyframe = keyframes(_t3$1 || (_t3$1 = _$1`
   0% {
     transform: scale(1);
   }
@@ -12898,7 +13204,7 @@ const TouchRippleRoot = styled$1('span', {
 const TouchRippleRipple = styled$1(Ripple, {
   name: 'MuiTouchRipple',
   slot: 'Ripple'
-})(_t4 || (_t4 = _`
+})(_t4$1 || (_t4$1 = _$1`
   opacity: 0;
   position: absolute;
 
@@ -12966,7 +13272,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -13167,8 +13473,8 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$9 = ["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$6 = ownerState => {
+const _excluded$f = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const useUtilityClasses$b = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -13269,7 +13575,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -13436,7 +13742,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$6(ownerState);
+  const classes = useUtilityClasses$b(ownerState);
   return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -13633,8 +13939,8 @@ function getIconButtonUtilityClass(slot) {
 const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 var iconButtonClasses$1 = iconButtonClasses;
 
-const _excluded$8 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
-const useUtilityClasses$5 = ownerState => {
+const _excluded$e = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+const useUtilityClasses$a = ownerState => {
   const {
     classes,
     disabled,
@@ -13734,7 +14040,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$8);
+    other = _objectWithoutPropertiesLoose(props, _excluded$e);
   const ownerState = _extends({}, props, {
     edge,
     color,
@@ -13742,7 +14048,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disableFocusRipple,
     size
   });
-  const classes = useUtilityClasses$5(ownerState);
+  const classes = useUtilityClasses$a(ownerState);
   return /*#__PURE__*/jsx(IconButtonRoot, _extends({
     className: clsx(classes.root, className),
     centerRipple: true,
@@ -13828,8 +14134,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$7 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$4 = ownerState => {
+const _excluded$d = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$9 = ownerState => {
   const {
     align,
     gutterBottom,
@@ -13883,22 +14189,22 @@ const defaultVariantMapping = {
 };
 
 // TODO v6: deprecate these color values in v5.x and remove the transformation in v6
-const colorTransformations = {
+const colorTransformations$1 = {
   primary: 'primary.main',
   textPrimary: 'text.primary',
   secondary: 'secondary.main',
   textSecondary: 'text.secondary',
   error: 'error.main'
 };
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
+const transformDeprecatedColors$1 = color => {
+  return colorTransformations$1[color] || color;
 };
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiTypography'
   });
-  const color = transformDeprecatedColors(themeProps.color);
+  const color = transformDeprecatedColors$1(themeProps.color);
   const props = extendSxProp(_extends({}, themeProps, {
     color
   }));
@@ -13912,7 +14218,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
   const ownerState = _extends({}, props, {
     align,
     color,
@@ -13925,7 +14231,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$4(ownerState);
+  const classes = useUtilityClasses$9(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
@@ -14010,7 +14316,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
 } : void 0;
 var Typography$1 = Typography;
 
-const _excluded$6 = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$c = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles = {
   entering: {
     opacity: 1
@@ -14047,7 +14353,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+    other = _objectWithoutPropertiesLoose(props, _excluded$c);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -14208,8 +14514,8 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$5 = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
-const useUtilityClasses$3 = ownerState => {
+const _excluded$b = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const useUtilityClasses$8 = ownerState => {
   const {
     classes,
     invisible
@@ -14263,12 +14569,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       TransitionComponent = Fade$1,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+    other = _objectWithoutPropertiesLoose(props, _excluded$b);
   const ownerState = _extends({}, props, {
     component,
     invisible
   });
-  const classes = useUtilityClasses$3(ownerState);
+  const classes = useUtilityClasses$8(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/jsx(TransitionComponent, _extends({
     in: open,
@@ -14412,134 +14718,247 @@ process.env.NODE_ENV !== "production" ? Box$1.propTypes /* remove-proptypes */ =
 } : void 0;
 var Box$2 = Box$1;
 
-function getCardUtilityClass(slot) {
-  return generateUtilityClass('MuiCard', slot);
-}
-generateUtilityClasses('MuiCard', ['root']);
+var MoreHorizIcon = createSvgIcon$1( /*#__PURE__*/jsx("path", {
+  d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+}), 'MoreHoriz');
 
-const _excluded$4 = ["className", "raised"];
-const useUtilityClasses$2 = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getCardUtilityClass, classes);
-};
-const CardRoot = styled$1(Paper$1, {
-  name: 'MuiCard',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(() => {
-  return {
-    overflow: 'hidden'
-  };
+const _excluded$a = ["slots", "slotProps"];
+const BreadcrumbCollapsedButton = styled$1(ButtonBase$1)(({
+  theme
+}) => _extends({
+  display: 'flex',
+  marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
+  marginRight: `calc(${theme.spacing(1)} * 0.5)`
+}, theme.palette.mode === 'light' ? {
+  backgroundColor: theme.palette.grey[100],
+  color: theme.palette.grey[700]
+} : {
+  backgroundColor: theme.palette.grey[700],
+  color: theme.palette.grey[100]
+}, {
+  borderRadius: 2,
+  '&:hover, &:focus': _extends({}, theme.palette.mode === 'light' ? {
+    backgroundColor: theme.palette.grey[200]
+  } : {
+    backgroundColor: theme.palette.grey[600]
+  }),
+  '&:active': _extends({
+    boxShadow: theme.shadows[0]
+  }, theme.palette.mode === 'light' ? {
+    backgroundColor: emphasize(theme.palette.grey[200], 0.12)
+  } : {
+    backgroundColor: emphasize(theme.palette.grey[600], 0.12)
+  })
+}));
+const BreadcrumbCollapsedIcon = styled$1(MoreHorizIcon)({
+  width: 24,
+  height: 16
 });
-const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiCard'
-  });
+
+/**
+ * @ignore - internal component.
+ */
+function BreadcrumbCollapsed(props) {
   const {
-      className,
-      raised = false
+      slots = {},
+      slotProps = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
-  const ownerState = _extends({}, props, {
-    raised
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
+  const ownerState = props;
+  return /*#__PURE__*/jsx("li", {
+    children: /*#__PURE__*/jsx(BreadcrumbCollapsedButton, _extends({
+      focusRipple: true
+    }, otherProps, {
+      ownerState: ownerState,
+      children: /*#__PURE__*/jsx(BreadcrumbCollapsedIcon, _extends({
+        as: slots.CollapsedIcon,
+        ownerState: ownerState
+      }, slotProps.collapsedIcon))
+    }))
   });
-  const classes = useUtilityClasses$2(ownerState);
-  return /*#__PURE__*/jsx(CardRoot, _extends({
-    className: clsx(classes.root, className),
-    elevation: raised ? 8 : undefined,
-    ref: ref,
-    ownerState: ownerState
-  }, other));
-});
-process.env.NODE_ENV !== "production" ? Card.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.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
+}
+process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
   /**
-   * @ignore
+   * The props used for the CollapsedIcon slot.
+   * @default {}
    */
-  className: PropTypes.string,
+  slotProps: PropTypes.shape({
+    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
   /**
-   * If `true`, the card will use raised styling.
-   * @default false
+   * The components used for each slot inside the BreadcumbCollapsed.
+   * Either a string to use a HTML element or a component.
+   * @default {}
    */
-  raised: chainPropTypes(PropTypes.bool, props => {
-    if (props.raised && props.variant === 'outlined') {
-      return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
-    }
-    return null;
+  slots: PropTypes.shape({
+    CollapsedIcon: PropTypes.elementType
   }),
   /**
    * 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])
+  sx: PropTypes.object
 } : void 0;
-var Card$1 = Card;
 
-function getCardContentUtilityClass(slot) {
-  return generateUtilityClass('MuiCardContent', slot);
+function getBreadcrumbsUtilityClass(slot) {
+  return generateUtilityClass('MuiBreadcrumbs', slot);
 }
-generateUtilityClasses('MuiCardContent', ['root']);
+const breadcrumbsClasses = generateUtilityClasses('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
+var breadcrumbsClasses$1 = breadcrumbsClasses;
 
-const _excluded$3 = ["className", "component"];
-const useUtilityClasses$1 = ownerState => {
+const _excluded$9 = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
+const useUtilityClasses$7 = ownerState => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['root']
+    root: ['root'],
+    li: ['li'],
+    ol: ['ol'],
+    separator: ['separator']
   };
-  return composeClasses(slots, getCardContentUtilityClass, classes);
+  return composeClasses(slots, getBreadcrumbsUtilityClass, classes);
 };
-const CardContentRoot = styled$1('div', {
-  name: 'MuiCardContent',
+const BreadcrumbsRoot = styled$1(Typography$1, {
+  name: 'MuiBreadcrumbs',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(() => {
-  return {
-    padding: 16,
-    '&:last-child': {
-      paddingBottom: 24
-    }
-  };
+  overridesResolver: (props, styles) => {
+    return [{
+      [`& .${breadcrumbsClasses$1.li}`]: styles.li
+    }, styles.root];
+  }
+})({});
+const BreadcrumbsOl = styled$1('ol', {
+  name: 'MuiBreadcrumbs',
+  slot: 'Ol',
+  overridesResolver: (props, styles) => styles.ol
+})({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  padding: 0,
+  margin: 0,
+  listStyle: 'none'
 });
-const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
+const BreadcrumbsSeparator = styled$1('li', {
+  name: 'MuiBreadcrumbs',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator
+})({
+  display: 'flex',
+  userSelect: 'none',
+  marginLeft: 8,
+  marginRight: 8
+});
+function insertSeparators(items, className, separator, ownerState) {
+  return items.reduce((acc, current, index) => {
+    if (index < items.length - 1) {
+      acc = acc.concat(current, /*#__PURE__*/jsx(BreadcrumbsSeparator, {
+        "aria-hidden": true,
+        className: className,
+        ownerState: ownerState,
+        children: separator
+      }, `separator-${index}`));
+    } else {
+      acc.push(current);
+    }
+    return acc;
+  }, []);
+}
+const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
-    name: 'MuiCardContent'
+    name: 'MuiBreadcrumbs'
   });
   const {
+      children,
       className,
-      component = 'div'
+      component = 'nav',
+      slots = {},
+      slotProps = {},
+      expandText = 'Show path',
+      itemsAfterCollapse = 1,
+      itemsBeforeCollapse = 1,
+      maxItems = 8,
+      separator = '/'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+  const [expanded, setExpanded] = React.useState(false);
   const ownerState = _extends({}, props, {
-    component
+    component,
+    expanded,
+    expandText,
+    itemsAfterCollapse,
+    itemsBeforeCollapse,
+    maxItems,
+    separator
   });
-  const classes = useUtilityClasses$1(ownerState);
-  return /*#__PURE__*/jsx(CardContentRoot, _extends({
-    as: component,
+  const classes = useUtilityClasses$7(ownerState);
+  const collapsedIconSlotProps = useSlotProps({
+    elementType: slots.CollapsedIcon,
+    externalSlotProps: slotProps.collapsedIcon,
+    ownerState
+  });
+  const listRef = React.useRef(null);
+  const renderItemsBeforeAndAfter = allItems => {
+    const handleClickExpand = () => {
+      setExpanded(true);
+
+      // The clicked element received the focus but gets removed from the DOM.
+      // Let's keep the focus in the component after expanding.
+      // Moving it to the <ol> or <nav> does not cause any announcement in NVDA.
+      // By moving it to some link/button at least we have some announcement.
+      const focusable = listRef.current.querySelector('a[href],button,[tabindex]');
+      if (focusable) {
+        focusable.focus();
+      }
+    };
+
+    // This defends against someone passing weird input, to ensure that if all
+    // items would be shown anyway, we just show all items without the EllipsisItem
+    if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(['MUI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
+      }
+      return allItems;
+    }
+    return [...allItems.slice(0, itemsBeforeCollapse), /*#__PURE__*/jsx(BreadcrumbCollapsed, {
+      "aria-label": expandText,
+      slots: {
+        CollapsedIcon: slots.CollapsedIcon
+      },
+      slotProps: {
+        collapsedIcon: collapsedIconSlotProps
+      },
+      onClick: handleClickExpand
+    }, "ellipsis"), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
+  };
+  const allItems = React.Children.toArray(children).filter(child => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (reactIs$2.exports.isFragment(child)) {
+        console.error(["MUI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+      }
+    }
+    return /*#__PURE__*/React.isValidElement(child);
+  }).map((child, index) => /*#__PURE__*/jsx("li", {
+    className: classes.li,
+    children: child
+  }, `child-${index}`));
+  return /*#__PURE__*/jsx(BreadcrumbsRoot, _extends({
+    ref: ref,
+    component: component,
+    color: "text.secondary",
     className: clsx(classes.root, className),
-    ownerState: ownerState,
-    ref: ref
-  }, other));
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/jsx(BreadcrumbsOl, {
+      className: classes.ol,
+      ref: listRef,
+      ownerState: ownerState,
+      children: insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator, ownerState)
+    })
+  }));
 });
-process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? Breadcrumbs.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"     |
@@ -14561,168 +14980,344 @@ process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptype
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * Override the default label for the expand button.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @default 'Show path'
+   */
+  expandText: PropTypes.string,
+  /**
+   * If max items is exceeded, the number of items to show after the ellipsis.
+   * @default 1
+   */
+  itemsAfterCollapse: integerPropType,
+  /**
+   * If max items is exceeded, the number of items to show before the ellipsis.
+   * @default 1
+   */
+  itemsBeforeCollapse: integerPropType,
+  /**
+   * Specifies the maximum number of breadcrumbs to display. When there are more
+   * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
+   * will be shown, with an ellipsis in between.
+   * @default 8
+   */
+  maxItems: integerPropType,
+  /**
+   * Custom separator node.
+   * @default '/'
+   */
+  separator: PropTypes.node,
+  /**
+   * The props used for each slot inside the Breadcumb.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the Breadcumb.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    CollapsedIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-var CardContent$1 = CardContent;
+var Breadcrumbs$1 = Breadcrumbs;
 
-const _excluded$2 = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
-const ModalRoot = styled$1('div', {
-  name: 'MuiModal',
+function getButtonUtilityClass(slot) {
+  return generateUtilityClass('MuiButton', slot);
+}
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+var buttonClasses$1 = buttonClasses;
+
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
+var ButtonGroupContext$1 = ButtonGroupContext;
+
+const _excluded$8 = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const useUtilityClasses$6 = ownerState => {
+  const {
+    color,
+    disableElevation,
+    fullWidth,
+    size,
+    variant,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, color === 'inherit' && 'colorInherit', disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
+    label: ['label'],
+    startIcon: ['startIcon', `iconSize${capitalize(size)}`],
+    endIcon: ['endIcon', `iconSize${capitalize(size)}`]
+  };
+  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
+};
+const commonIconStyles = ownerState => _extends({}, ownerState.size === 'small' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 18
+  }
+}, ownerState.size === 'medium' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 20
+  }
+}, ownerState.size === 'large' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 22
+  }
+});
+const ButtonRoot = styled$1(ButtonBase$1, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
-    return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
   }
 })(({
   theme,
   ownerState
+}) => {
+  var _theme$palette$getCon, _theme$palette;
+  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
+  return _extends({}, theme.typography.button, {
+    minWidth: 64,
+    padding: '6px 16px',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+      duration: theme.transitions.duration.short
+    }),
+    '&:hover': _extends({
+      textDecoration: 'none',
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+      border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'contained' && {
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+      boxShadow: (theme.vars || theme).shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        boxShadow: (theme.vars || theme).shadows[2],
+        backgroundColor: (theme.vars || theme).palette.grey[300]
+      }
+    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      }
+    }),
+    '&:active': _extends({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[8]
+    }),
+    [`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[6]
+    }),
+    [`&.${buttonClasses$1.disabled}`]: _extends({
+      color: (theme.vars || theme).palette.action.disabled
+    }, ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+    }, ownerState.variant === 'contained' && {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    })
+  }, ownerState.variant === 'text' && {
+    padding: '6px 8px'
+  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.variant === 'outlined' && {
+    padding: '5px 15px',
+    border: '1px solid currentColor'
+  }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
+  }, ownerState.variant === 'contained' && {
+    color: theme.vars ?
+    // this is safe because grey does not change between default light/dark mode
+    theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+    boxShadow: (theme.vars || theme).shadows[2]
+  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.color === 'inherit' && {
+    color: 'inherit',
+    borderColor: 'currentColor'
+  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
+    padding: '4px 5px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
+    padding: '8px 11px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+    padding: '3px 9px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+    padding: '7px 21px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    padding: '4px 10px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
+    padding: '8px 22px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.fullWidth && {
+    width: '100%'
+  });
+}, ({
+  ownerState
+}) => ownerState.disableElevation && {
+  boxShadow: 'none',
+  '&:hover': {
+    boxShadow: 'none'
+  },
+  [`&.${buttonClasses$1.focusVisible}`]: {
+    boxShadow: 'none'
+  },
+  '&:active': {
+    boxShadow: 'none'
+  },
+  [`&.${buttonClasses$1.disabled}`]: {
+    boxShadow: 'none'
+  }
+});
+const ButtonStartIcon = styled$1('span', {
+  name: 'MuiButton',
+  slot: 'StartIcon',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+  }
+})(({
+  ownerState
 }) => _extends({
-  position: 'fixed',
-  zIndex: (theme.vars || theme).zIndex.modal,
-  right: 0,
-  bottom: 0,
-  top: 0,
-  left: 0
-}, !ownerState.open && ownerState.exited && {
-  visibility: 'hidden'
-}));
-const ModalBackdrop = styled$1(Backdrop$1, {
-  name: 'MuiModal',
-  slot: 'Backdrop',
+  display: 'inherit',
+  marginRight: 8,
+  marginLeft: -4
+}, ownerState.size === 'small' && {
+  marginLeft: -2
+}, commonIconStyles(ownerState)));
+const ButtonEndIcon = styled$1('span', {
+  name: 'MuiButton',
+  slot: 'EndIcon',
   overridesResolver: (props, styles) => {
-    return styles.backdrop;
+    const {
+      ownerState
+    } = props;
+    return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
-  zIndex: -1
-});
-
-/**
- * Modal is a lower-level construct that is leveraged by the following components:
- *
- * - [Dialog](/material-ui/api/dialog/)
- * - [Drawer](/material-ui/api/drawer/)
- * - [Menu](/material-ui/api/menu/)
- * - [Popover](/material-ui/api/popover/)
- *
- * If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
- * rather than directly using Modal.
- *
- * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
- */
-const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
+})(({
+  ownerState
+}) => _extends({
+  display: 'inherit',
+  marginRight: -4,
+  marginLeft: 8
+}, ownerState.size === 'small' && {
+  marginRight: -2
+}, commonIconStyles(ownerState)));
+const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const contextProps = React.useContext(ButtonGroupContext$1);
+  const resolvedProps = resolveProps(contextProps, inProps);
   const props = useThemeProps({
-    name: 'MuiModal',
-    props: inProps
+    props: resolvedProps,
+    name: 'MuiButton'
   });
   const {
-      BackdropComponent = ModalBackdrop,
-      BackdropProps,
-      classes,
-      className,
-      closeAfterTransition = false,
       children,
-      container,
-      component,
-      components = {},
-      componentsProps = {},
-      disableAutoFocus = false,
-      disableEnforceFocus = false,
-      disableEscapeKeyDown = false,
-      disablePortal = false,
-      disableRestoreFocus = false,
-      disableScrollLock = false,
-      hideBackdrop = false,
-      keepMounted = false,
-      onBackdropClick,
-      onClose,
-      open,
-      slotProps,
-      slots,
-      // eslint-disable-next-line react/prop-types
-      theme
+      color = 'primary',
+      component = 'button',
+      className,
+      disabled = false,
+      disableElevation = false,
+      disableFocusRipple = false,
+      endIcon: endIconProp,
+      focusVisibleClassName,
+      fullWidth = false,
+      size = 'medium',
+      startIcon: startIconProp,
+      type,
+      variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
-  const [exited, setExited] = React.useState(true);
-  const commonProps = {
-    container,
-    closeAfterTransition,
-    disableAutoFocus,
-    disableEnforceFocus,
-    disableEscapeKeyDown,
-    disablePortal,
-    disableRestoreFocus,
-    disableScrollLock,
-    hideBackdrop,
-    keepMounted,
-    onBackdropClick,
-    onClose,
-    open
-  };
-  const ownerState = _extends({}, props, commonProps, {
-    exited
+    other = _objectWithoutPropertiesLoose(props, _excluded$8);
+  const ownerState = _extends({}, props, {
+    color,
+    component,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    fullWidth,
+    size,
+    type,
+    variant
   });
-  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
-  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
-  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-  return /*#__PURE__*/jsx(ModalUnstyled, _extends({
-    slots: {
-      root: RootSlot,
-      backdrop: BackdropSlot
-    },
-    slotProps: {
-      root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
-        as: component,
-        theme
-      }, {
-        className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
-      }),
-      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
-      })
-    },
-    onTransitionEnter: () => setExited(false),
-    onTransitionExited: () => setExited(true),
-    ref: ref
-  }, other, commonProps, {
-    children: children
+  const classes = useUtilityClasses$6(ownerState);
+  const startIcon = startIconProp && /*#__PURE__*/jsx(ButtonStartIcon, {
+    className: classes.startIcon,
+    ownerState: ownerState,
+    children: startIconProp
+  });
+  const endIcon = endIconProp && /*#__PURE__*/jsx(ButtonEndIcon, {
+    className: classes.endIcon,
+    ownerState: ownerState,
+    children: endIconProp
+  });
+  return /*#__PURE__*/jsxs(ButtonRoot, _extends({
+    ownerState: ownerState,
+    className: clsx(contextProps.className, classes.root, className),
+    component: component,
+    disabled: disabled,
+    focusRipple: !disableFocusRipple,
+    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+    ref: ref,
+    type: type
+  }, other, {
+    classes: classes,
+    children: [startIcon, children, endIcon]
   }));
 });
-process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? Button.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"     |
   // ----------------------------------------------------------------------
   /**
-   * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
-   * @default styled(Backdrop, {
-   *   name: 'MuiModal',
-   *   slot: 'Backdrop',
-   *   overridesResolver: (props, styles) => {
-   *     return styles.backdrop;
-   *   },
-   * })({
-   *   zIndex: -1,
-   * })
-   */
-  BackdropComponent: PropTypes.elementType,
-  /**
-   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `slotProps.backdrop` instead.
-   */
-  BackdropProps: PropTypes.object,
-  /**
-   * A single child content element.
+   * The content of the component.
    */
-  children: elementAcceptingRef$1.isRequired,
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -14732,275 +15327,910 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    */
   className: PropTypes.string,
   /**
-   * When set to true the Modal waits until a nested Transition is completed before closing.
-   * @default false
+   * 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'
    */
-  closeAfterTransition: PropTypes.bool,
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', '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 components used for each slot inside.
-   *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
-   *
-   * @default {}
+   * If `true`, the component is disabled.
+   * @default false
    */
-  components: PropTypes.shape({
-    Backdrop: PropTypes.elementType,
-    Root: PropTypes.elementType
-  }),
+  disabled: PropTypes.bool,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-   *
-   * @default {}
+   * If `true`, no elevation is used.
+   * @default false
    */
-  componentsProps: PropTypes.shape({
-    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
+  disableElevation: PropTypes.bool,
   /**
-   * An HTML element or function that returns one.
-   * The `container` will have the portal children appended to it.
-   *
-   * By default, it uses the body of the top-level document object,
-   * so it's simply `document.body` most of the time.
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
    */
-  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+  disableFocusRipple: PropTypes.bool,
   /**
-   * If `true`, the modal will not automatically shift focus to itself when it opens, and
-   * replace it to the last focused element when it closes.
-   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+   * If `true`, the ripple effect is disabled.
    *
-   * Generally this should never be set to `true` as it makes the modal less
-   * accessible to assistive technologies, like screen readers.
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
    * @default false
    */
-  disableAutoFocus: PropTypes.bool,
+  disableRipple: PropTypes.bool,
   /**
-   * If `true`, the modal will not prevent focus from leaving the modal while open.
-   *
-   * Generally this should never be set to `true` as it makes the modal less
-   * accessible to assistive technologies, like screen readers.
-   * @default false
+   * Element placed after the children.
    */
-  disableEnforceFocus: PropTypes.bool,
+  endIcon: PropTypes.node,
   /**
-   * If `true`, hitting escape will not fire the `onClose` callback.
-   * @default false
+   * @ignore
    */
-  disableEscapeKeyDown: PropTypes.bool,
+  focusVisibleClassName: PropTypes.string,
   /**
-   * The `children` will be under the DOM hierarchy of the parent component.
+   * If `true`, the button will take up the full width of its container.
    * @default false
    */
-  disablePortal: PropTypes.bool,
+  fullWidth: PropTypes.bool,
   /**
-   * If `true`, the modal will not restore focus to previously focused element once
-   * modal is hidden or unmounted.
-   * @default false
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
    */
-  disableRestoreFocus: PropTypes.bool,
+  href: PropTypes.string,
   /**
-   * Disable the scroll lock behavior.
-   * @default false
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
    */
-  disableScrollLock: PropTypes.bool,
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
   /**
-   * If `true`, the backdrop is not rendered.
-   * @default false
+   * Element placed before the children.
    */
-  hideBackdrop: PropTypes.bool,
+  startIcon: PropTypes.node,
   /**
-   * Always keep the children in the DOM.
-   * This prop can be useful in SEO situation or
-   * when you want to maximize the responsiveness of the Modal.
-   * @default false
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  keepMounted: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
+   * @ignore
    */
-  onBackdropClick: PropTypes.func,
+  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
   /**
-   * Callback fired when the component requests to be closed.
-   * The `reason` parameter can optionally be used to control the response to `onClose`.
-   *
-   * @param {object} event The event source of the callback.
-   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   * The variant to use.
+   * @default 'text'
    */
-  onClose: PropTypes.func,
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+} : void 0;
+var Button$1 = Button;
+
+function getCardUtilityClass(slot) {
+  return generateUtilityClass('MuiCard', slot);
+}
+generateUtilityClasses('MuiCard', ['root']);
+
+const _excluded$7 = ["className", "raised"];
+const useUtilityClasses$5 = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getCardUtilityClass, classes);
+};
+const CardRoot = styled$1(Paper$1, {
+  name: 'MuiCard',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(() => {
+  return {
+    overflow: 'hidden'
+  };
+});
+const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiCard'
+  });
+  const {
+      className,
+      raised = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+  const ownerState = _extends({}, props, {
+    raised
+  });
+  const classes = useUtilityClasses$5(ownerState);
+  return /*#__PURE__*/jsx(CardRoot, _extends({
+    className: clsx(classes.root, className),
+    elevation: raised ? 8 : undefined,
+    ref: ref,
+    ownerState: ownerState
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? Card.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 shown.
+   * The content of the component.
    */
-  open: PropTypes.bool.isRequired,
+  children: PropTypes.node,
   /**
-   * The props used for each slot inside the Modal.
-   * @default {}
+   * Override or extend the styles applied to the component.
    */
-  slotProps: PropTypes.shape({
-    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
+  classes: PropTypes.object,
   /**
-   * The components used for each slot inside the Modal.
-   * Either a string to use a HTML element or a component.
-   * @default {}
+   * @ignore
    */
-  slots: PropTypes.shape({
-    backdrop: PropTypes.elementType,
-    root: PropTypes.elementType
+  className: PropTypes.string,
+  /**
+   * If `true`, the card will use raised styling.
+   * @default false
+   */
+  raised: chainPropTypes(PropTypes.bool, props => {
+    if (props.raised && props.variant === 'outlined') {
+      return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
+    }
+    return null;
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-var Modal$1 = Modal;
+var Card$1 = Card;
 
-const _excluded$1 = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
-function getTranslateValue(direction, node, resolvedContainer) {
-  const rect = node.getBoundingClientRect();
-  const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
-  const containerWindow = ownerWindow(node);
-  let transform;
-  if (node.fakeTransform) {
-    transform = node.fakeTransform;
-  } else {
-    const computedStyle = containerWindow.getComputedStyle(node);
-    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
-  }
-  let offsetX = 0;
-  let offsetY = 0;
-  if (transform && transform !== 'none' && typeof transform === 'string') {
-    const transformValues = transform.split('(')[1].split(')')[0].split(',');
-    offsetX = parseInt(transformValues[4], 10);
-    offsetY = parseInt(transformValues[5], 10);
-  }
-  if (direction === 'left') {
-    if (containerRect) {
-      return `translateX(${containerRect.right + offsetX - rect.left}px)`;
-    }
-    return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;
-  }
-  if (direction === 'right') {
-    if (containerRect) {
-      return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
-    }
-    return `translateX(-${rect.left + rect.width - offsetX}px)`;
-  }
-  if (direction === 'up') {
-    if (containerRect) {
-      return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
+function getCardContentUtilityClass(slot) {
+  return generateUtilityClass('MuiCardContent', slot);
+}
+generateUtilityClasses('MuiCardContent', ['root']);
+
+const _excluded$6 = ["className", "component"];
+const useUtilityClasses$4 = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getCardContentUtilityClass, classes);
+};
+const CardContentRoot = styled$1('div', {
+  name: 'MuiCardContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(() => {
+  return {
+    padding: 16,
+    '&:last-child': {
+      paddingBottom: 24
     }
-    return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;
-  }
+  };
+});
+const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiCardContent'
+  });
+  const {
+      className,
+      component = 'div'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+  const ownerState = _extends({}, props, {
+    component
+  });
+  const classes = useUtilityClasses$4(ownerState);
+  return /*#__PURE__*/jsx(CardContentRoot, _extends({
+    as: component,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    ref: ref
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? CardContent.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.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+var CardContent$1 = CardContent;
 
-  // direction === 'down'
-  if (containerRect) {
-    return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
+const _excluded$5 = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+const ModalRoot = styled$1('div', {
+  name: 'MuiModal',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
   }
-  return `translateY(-${rect.top + rect.height - offsetY}px)`;
-}
-function resolveContainer(containerPropProp) {
-  return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
-}
-function setTranslateValue(direction, node, containerProp) {
-  const resolvedContainer = resolveContainer(containerProp);
-  const transform = getTranslateValue(direction, node, resolvedContainer);
-  if (transform) {
-    node.style.webkitTransform = transform;
-    node.style.transform = transform;
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  position: 'fixed',
+  zIndex: (theme.vars || theme).zIndex.modal,
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0
+}, !ownerState.open && ownerState.exited && {
+  visibility: 'hidden'
+}));
+const ModalBackdrop = styled$1(Backdrop$1, {
+  name: 'MuiModal',
+  slot: 'Backdrop',
+  overridesResolver: (props, styles) => {
+    return styles.backdrop;
   }
-}
+})({
+  zIndex: -1
+});
 
 /**
- * The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ * Modal is a lower-level construct that is leveraged by the following components:
+ *
+ * - [Dialog](/material-ui/api/dialog/)
+ * - [Drawer](/material-ui/api/drawer/)
+ * - [Menu](/material-ui/api/menu/)
+ * - [Popover](/material-ui/api/popover/)
+ *
+ * If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
+ * rather than directly using Modal.
+ *
+ * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
-const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
-  const theme = useTheme();
-  const defaultEasing = {
-    enter: theme.transitions.easing.easeOut,
-    exit: theme.transitions.easing.sharp
-  };
-  const defaultTimeout = {
-    enter: theme.transitions.duration.enteringScreen,
-    exit: theme.transitions.duration.leavingScreen
-  };
+const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
+  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
+  const props = useThemeProps({
+    name: 'MuiModal',
+    props: inProps
+  });
   const {
-      addEndListener,
-      appear = true,
+      BackdropComponent = ModalBackdrop,
+      BackdropProps,
+      classes,
+      className,
+      closeAfterTransition = false,
       children,
-      container: containerProp,
-      direction = 'down',
-      easing: easingProp = defaultEasing,
-      in: inProp,
-      onEnter,
-      onEntered,
-      onEntering,
-      onExit,
-      onExited,
-      onExiting,
-      style,
-      timeout = defaultTimeout,
+      container,
+      component,
+      components = {},
+      componentsProps = {},
+      disableAutoFocus = false,
+      disableEnforceFocus = false,
+      disableEscapeKeyDown = false,
+      disablePortal = false,
+      disableRestoreFocus = false,
+      disableScrollLock = false,
+      hideBackdrop = false,
+      keepMounted = false,
+      onBackdropClick,
+      onClose,
+      open,
+      slotProps,
+      slots,
       // eslint-disable-next-line react/prop-types
-      TransitionComponent = Transition$1
+      theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(children.ref, childrenRef, ref);
-  const normalizedTransitionCallback = callback => isAppearing => {
-    if (callback) {
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (isAppearing === undefined) {
-        callback(childrenRef.current);
-      } else {
-        callback(childrenRef.current, isAppearing);
-      }
-    }
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+  const [exited, setExited] = React.useState(true);
+  const commonProps = {
+    container,
+    closeAfterTransition,
+    disableAutoFocus,
+    disableEnforceFocus,
+    disableEscapeKeyDown,
+    disablePortal,
+    disableRestoreFocus,
+    disableScrollLock,
+    hideBackdrop,
+    keepMounted,
+    onBackdropClick,
+    onClose,
+    open
   };
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
-    setTranslateValue(direction, node, containerProp);
-    reflow(node);
-    if (onEnter) {
-      onEnter(node, isAppearing);
-    }
-  });
-  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
-    const transitionProps = getTransitionProps({
-      timeout,
-      style,
-      easing: easingProp
-    }, {
-      mode: 'enter'
-    });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps));
-    node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps));
-    node.style.webkitTransform = 'none';
-    node.style.transform = 'none';
-    if (onEntering) {
-      onEntering(node, isAppearing);
-    }
+  const ownerState = _extends({}, props, commonProps, {
+    exited
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
-    const transitionProps = getTransitionProps({
-      timeout,
-      style,
-      easing: easingProp
-    }, {
-      mode: 'exit'
-    });
+  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
+  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
+  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
+  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
+  return /*#__PURE__*/jsx(ModalUnstyled, _extends({
+    slots: {
+      root: RootSlot,
+      backdrop: BackdropSlot
+    },
+    slotProps: {
+      root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
+        as: component,
+        theme
+      }, {
+        className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+      }),
+      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
+        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
+      })
+    },
+    onTransitionEnter: () => setExited(false),
+    onTransitionExited: () => setExited(true),
+    ref: ref
+  }, other, commonProps, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? Modal.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent: PropTypes.elementType,
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.backdrop` instead.
+   */
+  BackdropProps: PropTypes.object,
+  /**
+   * A single child content element.
+   */
+  children: elementAcceptingRef$1.isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * When set to true the Modal waits until a nested Transition is completed before closing.
+   * @default false
+   */
+  closeAfterTransition: PropTypes.bool,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Backdrop: PropTypes.elementType,
+    Root: PropTypes.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+  /**
+   * If `true`, the modal will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableAutoFocus: PropTypes.bool,
+  /**
+   * If `true`, the modal will not prevent focus from leaving the modal while open.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableEnforceFocus: PropTypes.bool,
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   * @default false
+   */
+  disableEscapeKeyDown: PropTypes.bool,
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal: PropTypes.bool,
+  /**
+   * If `true`, the modal will not restore focus to previously focused element once
+   * modal is hidden or unmounted.
+   * @default false
+   */
+  disableRestoreFocus: PropTypes.bool,
+  /**
+   * Disable the scroll lock behavior.
+   * @default false
+   */
+  disableScrollLock: PropTypes.bool,
+  /**
+   * If `true`, the backdrop is not rendered.
+   * @default false
+   */
+  hideBackdrop: PropTypes.bool,
+  /**
+   * Always keep the children in the DOM.
+   * This prop can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Modal.
+   * @default false
+   */
+  keepMounted: PropTypes.bool,
+  /**
+   * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
+   */
+  onBackdropClick: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose: PropTypes.func,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * The props used for each slot inside the Modal.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the Modal.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+var Modal$1 = Modal;
+
+function getDividerUtilityClass(slot) {
+  return generateUtilityClass('MuiDivider', slot);
+}
+generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
+
+const _excluded$4 = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
+const useUtilityClasses$3 = ownerState => {
+  const {
+    absolute,
+    children,
+    classes,
+    flexItem,
+    light,
+    orientation,
+    textAlign,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', absolute && 'absolute', variant, light && 'light', orientation === 'vertical' && 'vertical', flexItem && 'flexItem', children && 'withChildren', children && orientation === 'vertical' && 'withChildrenVertical', textAlign === 'right' && orientation !== 'vertical' && 'textAlignRight', textAlign === 'left' && orientation !== 'vertical' && 'textAlignLeft'],
+    wrapper: ['wrapper', orientation === 'vertical' && 'wrapperVertical']
+  };
+  return composeClasses(slots, getDividerUtilityClass, classes);
+};
+const DividerRoot = styled$1('div', {
+  name: 'MuiDivider',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.absolute && styles.absolute, styles[ownerState.variant], ownerState.light && styles.light, ownerState.orientation === 'vertical' && styles.vertical, ownerState.flexItem && styles.flexItem, ownerState.children && styles.withChildren, ownerState.children && ownerState.orientation === 'vertical' && styles.withChildrenVertical, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && styles.textAlignRight, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && styles.textAlignLeft];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  margin: 0,
+  // Reset browser default style.
+  flexShrink: 0,
+  borderWidth: 0,
+  borderStyle: 'solid',
+  borderColor: (theme.vars || theme).palette.divider,
+  borderBottomWidth: 'thin'
+}, ownerState.absolute && {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  width: '100%'
+}, ownerState.light && {
+  borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
+}, ownerState.variant === 'inset' && {
+  marginLeft: 72
+}, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
+  marginLeft: theme.spacing(2),
+  marginRight: theme.spacing(2)
+}, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
+  marginTop: theme.spacing(1),
+  marginBottom: theme.spacing(1)
+}, ownerState.orientation === 'vertical' && {
+  height: '100%',
+  borderBottomWidth: 0,
+  borderRightWidth: 'thin'
+}, ownerState.flexItem && {
+  alignSelf: 'stretch',
+  height: 'auto'
+}), ({
+  ownerState
+}) => _extends({}, ownerState.children && {
+  display: 'flex',
+  whiteSpace: 'nowrap',
+  textAlign: 'center',
+  border: 0,
+  '&::before, &::after': {
+    content: '""',
+    alignSelf: 'center'
+  }
+}), ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
+  '&::before, &::after': {
+    width: '100%',
+    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
+  }
+}), ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
+  flexDirection: 'column',
+  '&::before, &::after': {
+    height: '100%',
+    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
+  }
+}), ({
+  ownerState
+}) => _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
+  '&::before': {
+    width: '90%'
+  },
+  '&::after': {
+    width: '10%'
+  }
+}, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {
+  '&::before': {
+    width: '10%'
+  },
+  '&::after': {
+    width: '90%'
+  }
+}));
+const DividerWrapper = styled$1('span', {
+  name: 'MuiDivider',
+  slot: 'Wrapper',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  display: 'inline-block',
+  paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
+  paddingRight: `calc(${theme.spacing(1)} * 1.2)`
+}, ownerState.orientation === 'vertical' && {
+  paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
+  paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
+}));
+const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDivider'
+  });
+  const {
+      absolute = false,
+      children,
+      className,
+      component = children ? 'div' : 'hr',
+      flexItem = false,
+      light = false,
+      orientation = 'horizontal',
+      role = component !== 'hr' ? 'separator' : undefined,
+      textAlign = 'center',
+      variant = 'fullWidth'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const ownerState = _extends({}, props, {
+    absolute,
+    component,
+    flexItem,
+    light,
+    orientation,
+    role,
+    textAlign,
+    variant
+  });
+  const classes = useUtilityClasses$3(ownerState);
+  return /*#__PURE__*/jsx(DividerRoot, _extends({
+    as: component,
+    className: clsx(classes.root, className),
+    role: role,
+    ref: ref,
+    ownerState: ownerState
+  }, other, {
+    children: children ? /*#__PURE__*/jsx(DividerWrapper, {
+      className: classes.wrapper,
+      ownerState: ownerState,
+      children: children
+    }) : null
+  }));
+});
+process.env.NODE_ENV !== "production" ? Divider.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Absolutely position the element.
+   * @default false
+   */
+  absolute: PropTypes.bool,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, a vertical divider will have the correct height when used in flex container.
+   * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
+   * @default false
+   */
+  flexItem: PropTypes.bool,
+  /**
+   * If `true`, the divider will have a lighter color.
+   * @default false
+   */
+  light: PropTypes.bool,
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * @ignore
+   */
+  role: PropTypes /* @typescript-to-proptypes-ignore */.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 text alignment.
+   * @default 'center'
+   */
+  textAlign: PropTypes.oneOf(['center', 'left', 'right']),
+  /**
+   * The variant to use.
+   * @default 'fullWidth'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['fullWidth', 'inset', 'middle']), PropTypes.string])
+} : void 0;
+var Divider$1 = Divider;
+
+const _excluded$3 = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+function getTranslateValue(direction, node, resolvedContainer) {
+  const rect = node.getBoundingClientRect();
+  const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
+  const containerWindow = ownerWindow(node);
+  let transform;
+  if (node.fakeTransform) {
+    transform = node.fakeTransform;
+  } else {
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
+  }
+  let offsetX = 0;
+  let offsetY = 0;
+  if (transform && transform !== 'none' && typeof transform === 'string') {
+    const transformValues = transform.split('(')[1].split(')')[0].split(',');
+    offsetX = parseInt(transformValues[4], 10);
+    offsetY = parseInt(transformValues[5], 10);
+  }
+  if (direction === 'left') {
+    if (containerRect) {
+      return `translateX(${containerRect.right + offsetX - rect.left}px)`;
+    }
+    return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;
+  }
+  if (direction === 'right') {
+    if (containerRect) {
+      return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
+    }
+    return `translateX(-${rect.left + rect.width - offsetX}px)`;
+  }
+  if (direction === 'up') {
+    if (containerRect) {
+      return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
+    }
+    return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;
+  }
+
+  // direction === 'down'
+  if (containerRect) {
+    return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
+  }
+  return `translateY(-${rect.top + rect.height - offsetY}px)`;
+}
+function resolveContainer(containerPropProp) {
+  return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
+}
+function setTranslateValue(direction, node, containerProp) {
+  const resolvedContainer = resolveContainer(containerProp);
+  const transform = getTranslateValue(direction, node, resolvedContainer);
+  if (transform) {
+    node.style.webkitTransform = transform;
+    node.style.transform = transform;
+  }
+}
+
+/**
+ * The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ */
+const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  const theme = useTheme();
+  const defaultEasing = {
+    enter: theme.transitions.easing.easeOut,
+    exit: theme.transitions.easing.sharp
+  };
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+  const {
+      addEndListener,
+      appear = true,
+      children,
+      container: containerProp,
+      direction = 'down',
+      easing: easingProp = defaultEasing,
+      in: inProp,
+      onEnter,
+      onEntered,
+      onEntering,
+      onExit,
+      onExited,
+      onExiting,
+      style,
+      timeout = defaultTimeout,
+      // eslint-disable-next-line react/prop-types
+      TransitionComponent = Transition$1
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const childrenRef = React.useRef(null);
+  const handleRef = useForkRef(children.ref, childrenRef, ref);
+  const normalizedTransitionCallback = callback => isAppearing => {
+    if (callback) {
+      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      if (isAppearing === undefined) {
+        callback(childrenRef.current);
+      } else {
+        callback(childrenRef.current, isAppearing);
+      }
+    }
+  };
+  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+    setTranslateValue(direction, node, containerProp);
+    reflow(node);
+    if (onEnter) {
+      onEnter(node, isAppearing);
+    }
+  });
+  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
+    const transitionProps = getTransitionProps({
+      timeout,
+      style,
+      easing: easingProp
+    }, {
+      mode: 'enter'
+    });
+    node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps));
+    node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps));
+    node.style.webkitTransform = 'none';
+    node.style.transform = 'none';
+    if (onEntering) {
+      onEntering(node, isAppearing);
+    }
+  });
+  const handleEntered = normalizedTransitionCallback(onEntered);
+  const handleExiting = normalizedTransitionCallback(onExiting);
+  const handleExit = normalizedTransitionCallback(node => {
+    const transitionProps = getTransitionProps({
+      timeout,
+      style,
+      easing: easingProp
+    }, {
+      mode: 'exit'
+    });
     node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
     setTranslateValue(direction, node, containerProp);
@@ -15008,404 +16238,990 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(node => {
-    // No need for transitions when the component is hidden
-    node.style.webkitTransition = '';
-    node.style.transition = '';
-    if (onExited) {
-      onExited(node);
-    }
+  const handleExited = normalizedTransitionCallback(node => {
+    // No need for transitions when the component is hidden
+    node.style.webkitTransition = '';
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
+  const handleAddEndListener = next => {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(childrenRef.current, next);
+    }
+  };
+  const updatePosition = React.useCallback(() => {
+    if (childrenRef.current) {
+      setTranslateValue(direction, childrenRef.current, containerProp);
+    }
+  }, [direction, containerProp]);
+  React.useEffect(() => {
+    // Skip configuration where the position is screen size invariant.
+    if (inProp || direction === 'down' || direction === 'right') {
+      return undefined;
+    }
+    const handleResize = debounce(() => {
+      if (childrenRef.current) {
+        setTranslateValue(direction, childrenRef.current, containerProp);
+      }
+    });
+    const containerWindow = ownerWindow(childrenRef.current);
+    containerWindow.addEventListener('resize', handleResize);
+    return () => {
+      handleResize.clear();
+      containerWindow.removeEventListener('resize', handleResize);
+    };
+  }, [direction, inProp, containerProp]);
+  React.useEffect(() => {
+    if (!inProp) {
+      // We need to update the position of the drawer when the direction change and
+      // when it's hidden.
+      updatePosition();
+    }
+  }, [inProp, updatePosition]);
+  return /*#__PURE__*/jsx(TransitionComponent, _extends({
+    nodeRef: childrenRef,
+    onEnter: handleEnter,
+    onEntered: handleEntered,
+    onEntering: handleEntering,
+    onExit: handleExit,
+    onExited: handleExited,
+    onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
+    appear: appear,
+    in: inProp,
+    timeout: timeout
+  }, other, {
+    children: (state, childProps) => {
+      return /*#__PURE__*/React.cloneElement(children, _extends({
+        ref: handleRef,
+        style: _extends({
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
+        }, style, children.props.style)
+      }, childProps));
+    }
+  }));
+});
+process.env.NODE_ENV !== "production" ? Slide.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+  /**
+   * Perform the enter transition when it first mounts if `in` is also `true`.
+   * Set this to `false` to disable this behavior.
+   * @default true
+   */
+  appear: PropTypes.bool,
+  /**
+   * A single child content element.
+   */
+  children: elementAcceptingRef$1.isRequired,
+  /**
+   * An HTML element, or a function that returns one.
+   * It's used to set the container the Slide is transitioning from.
+   */
+  container: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.func]), props => {
+    if (props.open) {
+      const resolvedContainer = resolveContainer(props.container);
+      if (resolvedContainer && resolvedContainer.nodeType === 1) {
+        const box = resolvedContainer.getBoundingClientRect();
+        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+          return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+        }
+      } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
+        return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));
+      }
+    }
+    return null;
+  }),
+  /**
+   * Direction the child node will enter from.
+   * @default 'down'
+   */
+  direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   * @default {
+   *   enter: theme.transitions.easing.easeOut,
+   *   exit: theme.transitions.easing.sharp,
+   * }
+   */
+  easing: PropTypes.oneOfType([PropTypes.shape({
+    enter: PropTypes.string,
+    exit: PropTypes.string
+  }), PropTypes.string]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntered: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntering: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExit: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExited: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExiting: PropTypes.func,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    appear: PropTypes.number,
+    enter: PropTypes.number,
+    exit: PropTypes.number
+  })])
+} : void 0;
+var Slide$1 = Slide;
+
+function getDrawerUtilityClass(slot) {
+  return generateUtilityClass('MuiDrawer', slot);
+}
+generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+
+const _excluded$2 = ["BackdropProps"],
+  _excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
+const overridesResolver = (props, styles) => {
+  const {
+    ownerState
+  } = props;
+  return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
+};
+const useUtilityClasses$2 = ownerState => {
+  const {
+    classes,
+    anchor,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
+    modal: ['modal'],
+    paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
+  };
+  return composeClasses(slots, getDrawerUtilityClass, classes);
+};
+const DrawerRoot = styled$1(Modal$1, {
+  name: 'MuiDrawer',
+  slot: 'Root',
+  overridesResolver
+})(({
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.drawer
+}));
+const DrawerDockedRoot = styled$1('div', {
+  shouldForwardProp: rootShouldForwardProp,
+  name: 'MuiDrawer',
+  slot: 'Docked',
+  skipVariantsResolver: false,
+  overridesResolver
+})({
+  flex: '0 0 auto'
+});
+const DrawerPaper = styled$1(Paper$1, {
+  name: 'MuiDrawer',
+  slot: 'Paper',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.paper, styles[`paperAnchor${capitalize(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  overflowY: 'auto',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  flex: '1 0 auto',
+  zIndex: (theme.vars || theme).zIndex.drawer,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  // temporary style
+  position: 'fixed',
+  top: 0,
+  // We disable the focus ring for mouse, touch and keyboard users.
+  // At some point, it would be better to keep it for keyboard users.
+  // :focus-ring CSS pseudo-class will help.
+  outline: 0
+}, ownerState.anchor === 'left' && {
+  left: 0
+}, ownerState.anchor === 'top' && {
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 'auto',
+  maxHeight: '100%'
+}, ownerState.anchor === 'right' && {
+  right: 0
+}, ownerState.anchor === 'bottom' && {
+  top: 'auto',
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: 'auto',
+  maxHeight: '100%'
+}, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
+  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
+}, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+}, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
+  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
+}, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
+  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
+}));
+const oppositeDirection = {
+  left: 'right',
+  right: 'left',
+  top: 'down',
+  bottom: 'up'
+};
+function isHorizontal(anchor) {
+  return ['left', 'right'].indexOf(anchor) !== -1;
+}
+function getAnchor(theme, anchor) {
+  return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
+}
+
+/**
+ * The props of the [Modal](/material-ui/api/modal/) component are available
+ * when `variant="temporary"` is set.
+ */
+const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDrawer'
+  });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+  const {
+      anchor: anchorProp = 'left',
+      BackdropProps,
+      children,
+      className,
+      elevation = 16,
+      hideBackdrop = false,
+      ModalProps: {
+        BackdropProps: BackdropPropsProp
+      } = {},
+      onClose,
+      open = false,
+      PaperProps = {},
+      SlideProps,
+      // eslint-disable-next-line react/prop-types
+      TransitionComponent = Slide$1,
+      transitionDuration = defaultTransitionDuration,
+      variant = 'temporary'
+    } = props,
+    ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded$2),
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  // Let's assume that the Drawer will always be rendered on user space.
+  // We use this state is order to skip the appear transition during the
+  // initial mount of the component.
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    mounted.current = true;
+  }, []);
+  const anchorInvariant = getAnchor(theme, anchorProp);
+  const anchor = anchorProp;
+  const ownerState = _extends({}, props, {
+    anchor,
+    elevation,
+    open,
+    variant
+  }, other);
+  const classes = useUtilityClasses$2(ownerState);
+  const drawer = /*#__PURE__*/jsx(DrawerPaper, _extends({
+    elevation: variant === 'temporary' ? elevation : 0,
+    square: true
+  }, PaperProps, {
+    className: clsx(classes.paper, PaperProps.className),
+    ownerState: ownerState,
+    children: children
+  }));
+  if (variant === 'permanent') {
+    return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
+      className: clsx(classes.root, classes.docked, className),
+      ownerState: ownerState,
+      ref: ref
+    }, other, {
+      children: drawer
+    }));
+  }
+  const slidingDrawer = /*#__PURE__*/jsx(TransitionComponent, _extends({
+    in: open,
+    direction: oppositeDirection[anchorInvariant],
+    timeout: transitionDuration,
+    appear: mounted.current
+  }, SlideProps, {
+    children: drawer
+  }));
+  if (variant === 'persistent') {
+    return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
+      className: clsx(classes.root, classes.docked, className),
+      ownerState: ownerState,
+      ref: ref
+    }, other, {
+      children: slidingDrawer
+    }));
+  }
+
+  // variant === temporary
+  return /*#__PURE__*/jsx(DrawerRoot, _extends({
+    BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
+      transitionDuration
+    }),
+    className: clsx(classes.root, classes.modal, className),
+    open: open,
+    ownerState: ownerState,
+    onClose: onClose,
+    hideBackdrop: hideBackdrop,
+    ref: ref
+  }, other, ModalProps, {
+    children: slidingDrawer
+  }));
+});
+process.env.NODE_ENV !== "production" ? Drawer.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Side from which the drawer will appear.
+   * @default 'left'
+   */
+  anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+  /**
+   * @ignore
+   */
+  BackdropProps: PropTypes.object,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The elevation of the drawer.
+   * @default 16
+   */
+  elevation: integerPropType,
+  /**
+   * If `true`, the backdrop is not rendered.
+   * @default false
+   */
+  hideBackdrop: PropTypes.bool,
+  /**
+   * Props applied to the [`Modal`](/material-ui/api/modal/) element.
+   * @default {}
+   */
+  ModalProps: PropTypes.object,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback.
+   */
+  onClose: PropTypes.func,
+  /**
+   * If `true`, the component is shown.
+   * @default false
+   */
+  open: PropTypes.bool,
+  /**
+   * Props applied to the [`Paper`](/material-ui/api/paper/) element.
+   * @default {}
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * Props applied to the [`Slide`](/material-ui/api/slide/) element.
+   */
+  SlideProps: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    appear: PropTypes.number,
+    enter: PropTypes.number,
+    exit: PropTypes.number
+  })]),
+  /**
+   * The variant to use.
+   * @default 'temporary'
+   */
+  variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
+} : void 0;
+var Drawer$1 = Drawer;
+
+function getLinearProgressUtilityClass(slot) {
+  return generateUtilityClass('MuiLinearProgress', slot);
+}
+generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+
+const _excluded$1 = ["className", "color", "value", "valueBuffer", "variant"];
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6;
+const TRANSITION_DURATION = 4; // seconds
+const indeterminate1Keyframe = keyframes(_t || (_t = _`
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+`));
+const indeterminate2Keyframe = keyframes(_t2 || (_t2 = _`
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+`));
+const bufferKeyframe = keyframes(_t3 || (_t3 = _`
+  0% {
+    opacity: 1;
+    background-position: 0 -23px;
+  }
+
+  60% {
+    opacity: 0;
+    background-position: 0 -23px;
+  }
+
+  100% {
+    opacity: 1;
+    background-position: -200px -23px;
+  }
+`));
+const useUtilityClasses$1 = ownerState => {
+  const {
+    classes,
+    variant,
+    color
+  } = ownerState;
+  const slots = {
+    root: ['root', `color${capitalize(color)}`, variant],
+    dashed: ['dashed', `dashedColor${capitalize(color)}`],
+    bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+  };
+  return composeClasses(slots, getLinearProgressUtilityClass, classes);
+};
+const getColorShade = (theme, color) => {
+  if (color === 'inherit') {
+    return 'currentColor';
+  }
+  if (theme.vars) {
+    return theme.vars.palette.LinearProgress[`${color}Bg`];
+  }
+  return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);
+};
+const LinearProgressRoot = styled$1('span', {
+  name: 'MuiLinearProgress',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`color${capitalize(ownerState.color)}`], styles[ownerState.variant]];
+  }
+})(({
+  ownerState,
+  theme
+}) => _extends({
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'block',
+  height: 4,
+  zIndex: 0,
+  // Fix Safari's bug during composition of different paint.
+  '@media print': {
+    colorAdjust: 'exact'
+  },
+  backgroundColor: getColorShade(theme, ownerState.color)
+}, ownerState.color === 'inherit' && ownerState.variant !== 'buffer' && {
+  backgroundColor: 'none',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'currentColor',
+    opacity: 0.3
+  }
+}, ownerState.variant === 'buffer' && {
+  backgroundColor: 'transparent'
+}, ownerState.variant === 'query' && {
+  transform: 'rotate(180deg)'
+}));
+const LinearProgressDashed = styled$1('span', {
+  name: 'MuiLinearProgress',
+  slot: 'Dashed',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]];
+  }
+})(({
+  ownerState,
+  theme
+}) => {
+  const backgroundColor = getColorShade(theme, ownerState.color);
+  return _extends({
+    position: 'absolute',
+    marginTop: 0,
+    height: '100%',
+    width: '100%'
+  }, ownerState.color === 'inherit' && {
+    opacity: 0.3
+  }, {
+    backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`,
+    backgroundSize: '10px 10px',
+    backgroundPosition: '0 -23px'
+  });
+}, css(_t4 || (_t4 = _`
+    animation: ${0} 3s infinite linear;
+  `), bufferKeyframe));
+const LinearProgressBar1 = styled$1('span', {
+  name: 'MuiLinearProgress',
+  slot: 'Bar1',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+  }
+})(({
+  ownerState,
+  theme
+}) => _extends({
+  width: '100%',
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+  top: 0,
+  transition: 'transform 0.2s linear',
+  transformOrigin: 'left',
+  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
+}, ownerState.variant === 'determinate' && {
+  transition: `transform .${TRANSITION_DURATION}s linear`
+}, ownerState.variant === 'buffer' && {
+  zIndex: 1,
+  transition: `transform .${TRANSITION_DURATION}s linear`
+}), ({
+  ownerState
+}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t5 || (_t5 = _`
+      width: auto;
+      animation: ${0} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    `), indeterminate1Keyframe));
+const LinearProgressBar2 = styled$1('span', {
+  name: 'MuiLinearProgress',
+  slot: 'Bar2',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+  }
+})(({
+  ownerState,
+  theme
+}) => _extends({
+  width: '100%',
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+  top: 0,
+  transition: 'transform 0.2s linear',
+  transformOrigin: 'left'
+}, ownerState.variant !== 'buffer' && {
+  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
+}, ownerState.color === 'inherit' && {
+  opacity: 0.3
+}, ownerState.variant === 'buffer' && {
+  backgroundColor: getColorShade(theme, ownerState.color),
+  transition: `transform .${TRANSITION_DURATION}s linear`
+}), ({
+  ownerState
+}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t6 || (_t6 = _`
+      width: auto;
+      animation: ${0} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+    `), indeterminate2Keyframe));
+
+/**
+ * ## ARIA
+ *
+ * If the progress bar is describing the loading progress of a particular region of a page,
+ * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
+ * attribute to `true` on that region until it has finished loading.
+ */
+const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiLinearProgress'
   });
-  const handleAddEndListener = next => {
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(childrenRef.current, next);
-    }
-  };
-  const updatePosition = React.useCallback(() => {
-    if (childrenRef.current) {
-      setTranslateValue(direction, childrenRef.current, containerProp);
-    }
-  }, [direction, containerProp]);
-  React.useEffect(() => {
-    // Skip configuration where the position is screen size invariant.
-    if (inProp || direction === 'down' || direction === 'right') {
-      return undefined;
+  const {
+      className,
+      color = 'primary',
+      value,
+      valueBuffer,
+      variant = 'indeterminate'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const ownerState = _extends({}, props, {
+    color,
+    variant
+  });
+  const classes = useUtilityClasses$1(ownerState);
+  const theme = useTheme();
+  const rootProps = {};
+  const inlineStyles = {
+    bar1: {},
+    bar2: {}
+  };
+  if (variant === 'determinate' || variant === 'buffer') {
+    if (value !== undefined) {
+      rootProps['aria-valuenow'] = Math.round(value);
+      rootProps['aria-valuemin'] = 0;
+      rootProps['aria-valuemax'] = 100;
+      let transform = value - 100;
+      if (theme.direction === 'rtl') {
+        transform = -transform;
+      }
+      inlineStyles.bar1.transform = `translateX(${transform}%)`;
+    } else if (process.env.NODE_ENV !== 'production') {
+      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
     }
-    const handleResize = debounce(() => {
-      if (childrenRef.current) {
-        setTranslateValue(direction, childrenRef.current, containerProp);
+  }
+  if (variant === 'buffer') {
+    if (valueBuffer !== undefined) {
+      let transform = (valueBuffer || 0) - 100;
+      if (theme.direction === 'rtl') {
+        transform = -transform;
       }
-    });
-    const containerWindow = ownerWindow(childrenRef.current);
-    containerWindow.addEventListener('resize', handleResize);
-    return () => {
-      handleResize.clear();
-      containerWindow.removeEventListener('resize', handleResize);
-    };
-  }, [direction, inProp, containerProp]);
-  React.useEffect(() => {
-    if (!inProp) {
-      // We need to update the position of the drawer when the direction change and
-      // when it's hidden.
-      updatePosition();
+      inlineStyles.bar2.transform = `translateX(${transform}%)`;
+    } else if (process.env.NODE_ENV !== 'production') {
+      console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
     }
-  }, [inProp, updatePosition]);
-  return /*#__PURE__*/jsx(TransitionComponent, _extends({
-    nodeRef: childrenRef,
-    onEnter: handleEnter,
-    onEntered: handleEntered,
-    onEntering: handleEntering,
-    onExit: handleExit,
-    onExited: handleExited,
-    onExiting: handleExiting,
-    addEndListener: handleAddEndListener,
-    appear: appear,
-    in: inProp,
-    timeout: timeout
+  }
+  return /*#__PURE__*/jsxs(LinearProgressRoot, _extends({
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    role: "progressbar"
+  }, rootProps, {
+    ref: ref
   }, other, {
-    children: (state, childProps) => {
-      return /*#__PURE__*/React.cloneElement(children, _extends({
-        ref: handleRef,
-        style: _extends({
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, style, children.props.style)
-      }, childProps));
-    }
+    children: [variant === 'buffer' ? /*#__PURE__*/jsx(LinearProgressDashed, {
+      className: classes.dashed,
+      ownerState: ownerState
+    }) : null, /*#__PURE__*/jsx(LinearProgressBar1, {
+      className: classes.bar1,
+      ownerState: ownerState,
+      style: inlineStyles.bar1
+    }), variant === 'determinate' ? null : /*#__PURE__*/jsx(LinearProgressBar2, {
+      className: classes.bar2,
+      ownerState: ownerState,
+      style: inlineStyles.bar2
+    })]
   }));
 });
-process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? LinearProgress.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"     |
   // ----------------------------------------------------------------------
   /**
-   * Add a custom transition end trigger. Called with the transitioning DOM
-   * node and a done callback. Allows for more fine grained transition end
-   * logic. Note: Timeouts are still used as a fallback if provided.
-   */
-  addEndListener: PropTypes.func,
-  /**
-   * Perform the enter transition when it first mounts if `in` is also `true`.
-   * Set this to `false` to disable this behavior.
-   * @default true
-   */
-  appear: PropTypes.bool,
-  /**
-   * A single child content element.
-   */
-  children: elementAcceptingRef$1.isRequired,
-  /**
-   * An HTML element, or a function that returns one.
-   * It's used to set the container the Slide is transitioning from.
-   */
-  container: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.func]), props => {
-    if (props.open) {
-      const resolvedContainer = resolveContainer(props.container);
-      if (resolvedContainer && resolvedContainer.nodeType === 1) {
-        const box = resolvedContainer.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
-        }
-      } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
-        return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));
-      }
-    }
-    return null;
-  }),
-  /**
-   * Direction the child node will enter from.
-   * @default 'down'
-   */
-  direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
-  /**
-   * The transition timing function.
-   * You may specify a single easing or a object containing enter and exit values.
-   * @default {
-   *   enter: theme.transitions.easing.easeOut,
-   *   exit: theme.transitions.easing.sharp,
-   * }
-   */
-  easing: PropTypes.oneOfType([PropTypes.shape({
-    enter: PropTypes.string,
-    exit: PropTypes.string
-  }), PropTypes.string]),
-  /**
-   * If `true`, the component will transition in.
-   */
-  in: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onEnter: PropTypes.func,
-  /**
-   * @ignore
+   * Override or extend the styles applied to the component.
    */
-  onEntered: PropTypes.func,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
-  onEntering: PropTypes.func,
+  className: PropTypes.string,
   /**
-   * @ignore
+   * 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'
    */
-  onExit: PropTypes.func,
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string]),
   /**
-   * @ignore
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  onExited: PropTypes.func,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
-   * @ignore
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
    */
-  onExiting: PropTypes.func,
+  value: PropTypes.number,
   /**
-   * @ignore
+   * The value for the buffer variant.
+   * Value between 0 and 100.
    */
-  style: PropTypes.object,
+  valueBuffer: PropTypes.number,
   /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   * @default {
-   *   enter: theme.transitions.duration.enteringScreen,
-   *   exit: theme.transitions.duration.leavingScreen,
-   * }
+   * The variant to use.
+   * Use indeterminate or query when there is no progress value.
+   * @default 'indeterminate'
    */
-  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    appear: PropTypes.number,
-    enter: PropTypes.number,
-    exit: PropTypes.number
-  })])
+  variant: PropTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query'])
 } : void 0;
-var Slide$1 = Slide;
+var LinearProgress$1 = LinearProgress;
 
-function getDrawerUtilityClass(slot) {
-  return generateUtilityClass('MuiDrawer', slot);
+function getLinkUtilityClass(slot) {
+  return generateUtilityClass('MuiLink', slot);
 }
-generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+const linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
+var linkClasses$1 = linkClasses;
 
-const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
-const overridesResolver = (props, styles) => {
-  const {
-    ownerState
-  } = props;
-  return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
+const colorTransformations = {
+  primary: 'primary.main',
+  textPrimary: 'text.primary',
+  secondary: 'secondary.main',
+  textSecondary: 'text.secondary',
+  error: 'error.main'
+};
+const transformDeprecatedColors = color => {
+  return colorTransformations[color] || color;
+};
+const getTextDecoration = ({
+  theme,
+  ownerState
+}) => {
+  const transformedColor = transformDeprecatedColors(ownerState.color);
+  const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
+  if ('vars' in theme && channelColor) {
+    return `rgba(${channelColor} / 0.4)`;
+  }
+  return alpha(color, 0.4);
 };
+var getTextDecoration$1 = getTextDecoration;
+
+const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    anchor,
-    variant
+    component,
+    focusVisible,
+    underline
   } = ownerState;
   const slots = {
-    root: ['root'],
-    docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
-    modal: ['modal'],
-    paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
+    root: ['root', `underline${capitalize(underline)}`, component === 'button' && 'button', focusVisible && 'focusVisible']
   };
-  return composeClasses(slots, getDrawerUtilityClass, classes);
+  return composeClasses(slots, getLinkUtilityClass, classes);
 };
-const DrawerRoot = styled$1(Modal$1, {
-  name: 'MuiDrawer',
+const LinkRoot = styled$1(Typography$1, {
+  name: 'MuiLink',
   slot: 'Root',
-  overridesResolver
-})(({
-  theme
-}) => ({
-  zIndex: (theme.vars || theme).zIndex.drawer
-}));
-const DrawerDockedRoot = styled$1('div', {
-  shouldForwardProp: rootShouldForwardProp,
-  name: 'MuiDrawer',
-  slot: 'Docked',
-  skipVariantsResolver: false,
-  overridesResolver
-})({
-  flex: '0 0 auto'
-});
-const DrawerPaper = styled$1(Paper$1, {
-  name: 'MuiDrawer',
-  slot: 'Paper',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
-    return [styles.paper, styles[`paperAnchor${capitalize(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`]];
+    return [styles.root, styles[`underline${capitalize(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
   }
 })(({
   theme,
   ownerState
-}) => _extends({
-  overflowY: 'auto',
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100%',
-  flex: '1 0 auto',
-  zIndex: (theme.vars || theme).zIndex.drawer,
-  // Add iOS momentum scrolling for iOS < 13.0
-  WebkitOverflowScrolling: 'touch',
-  // temporary style
-  position: 'fixed',
-  top: 0,
-  // We disable the focus ring for mouse, touch and keyboard users.
-  // At some point, it would be better to keep it for keyboard users.
-  // :focus-ring CSS pseudo-class will help.
-  outline: 0
-}, ownerState.anchor === 'left' && {
-  left: 0
-}, ownerState.anchor === 'top' && {
-  top: 0,
-  left: 0,
-  right: 0,
-  height: 'auto',
-  maxHeight: '100%'
-}, ownerState.anchor === 'right' && {
-  right: 0
-}, ownerState.anchor === 'bottom' && {
-  top: 'auto',
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 'auto',
-  maxHeight: '100%'
-}, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
-}));
-const oppositeDirection = {
-  left: 'right',
-  right: 'left',
-  top: 'down',
-  bottom: 'up'
-};
-function isHorizontal(anchor) {
-  return ['left', 'right'].indexOf(anchor) !== -1;
-}
-function getAnchor(theme, anchor) {
-  return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
-}
+}) => {
+  return _extends({}, ownerState.underline === 'none' && {
+    textDecoration: 'none'
+  }, ownerState.underline === 'hover' && {
+    textDecoration: 'none',
+    '&:hover': {
+      textDecoration: 'underline'
+    }
+  }, ownerState.underline === 'always' && _extends({
+    textDecoration: 'underline'
+  }, ownerState.color !== 'inherit' && {
+    textDecorationColor: getTextDecoration$1({
+      theme,
+      ownerState
+    })
+  }, {
+    '&:hover': {
+      textDecorationColor: 'inherit'
+    }
+  }), ownerState.component === 'button' && {
+    position: 'relative',
+    WebkitTapHighlightColor: 'transparent',
+    backgroundColor: 'transparent',
+    // Reset default value
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    border: 0,
+    margin: 0,
+    // Remove the margin in Safari
+    borderRadius: 0,
+    padding: 0,
+    // Remove the padding in Firefox
+    cursor: 'pointer',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    MozAppearance: 'none',
+    // Reset
+    WebkitAppearance: 'none',
+    // Reset
+    '&::-moz-focus-inner': {
+      borderStyle: 'none' // Remove Firefox dotted outline.
+    },
 
-/**
- * The props of the [Modal](/material-ui/api/modal/) component are available
- * when `variant="temporary"` is set.
- */
-const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
+    [`&.${linkClasses$1.focusVisible}`]: {
+      outline: 'auto'
+    }
+  });
+});
+const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
-    name: 'MuiDrawer'
+    name: 'MuiLink'
   });
-  const theme = useTheme();
-  const defaultTransitionDuration = {
-    enter: theme.transitions.duration.enteringScreen,
-    exit: theme.transitions.duration.leavingScreen
-  };
   const {
-      anchor: anchorProp = 'left',
-      BackdropProps,
-      children,
       className,
-      elevation = 16,
-      hideBackdrop = false,
-      ModalProps: {
-        BackdropProps: BackdropPropsProp
-      } = {},
-      onClose,
-      open = false,
-      PaperProps = {},
-      SlideProps,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Slide$1,
-      transitionDuration = defaultTransitionDuration,
-      variant = 'temporary'
+      color = 'primary',
+      component = 'a',
+      onBlur,
+      onFocus,
+      TypographyClasses,
+      underline = 'always',
+      variant = 'inherit',
+      sx
     } = props,
-    ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  // Let's assume that the Drawer will always be rendered on user space.
-  // We use this state is order to skip the appear transition during the
-  // initial mount of the component.
-  const mounted = React.useRef(false);
-  React.useEffect(() => {
-    mounted.current = true;
-  }, []);
-  const anchorInvariant = getAnchor(theme, anchorProp);
-  const anchor = anchorProp;
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    isFocusVisibleRef,
+    onBlur: handleBlurVisible,
+    onFocus: handleFocusVisible,
+    ref: focusVisibleRef
+  } = useIsFocusVisible();
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  const handlerRef = useForkRef(ref, focusVisibleRef);
+  const handleBlur = event => {
+    handleBlurVisible(event);
+    if (isFocusVisibleRef.current === false) {
+      setFocusVisible(false);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleFocus = event => {
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current === true) {
+      setFocusVisible(true);
+    }
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
   const ownerState = _extends({}, props, {
-    anchor,
-    elevation,
-    open,
+    color,
+    component,
+    focusVisible,
+    underline,
     variant
-  }, other);
+  });
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/jsx(DrawerPaper, _extends({
-    elevation: variant === 'temporary' ? elevation : 0,
-    square: true
-  }, PaperProps, {
-    className: clsx(classes.paper, PaperProps.className),
-    ownerState: ownerState,
-    children: children
-  }));
-  if (variant === 'permanent') {
-    return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
-      className: clsx(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref
-    }, other, {
-      children: drawer
-    }));
-  }
-  const slidingDrawer = /*#__PURE__*/jsx(TransitionComponent, _extends({
-    in: open,
-    direction: oppositeDirection[anchorInvariant],
-    timeout: transitionDuration,
-    appear: mounted.current
-  }, SlideProps, {
-    children: drawer
-  }));
-  if (variant === 'persistent') {
-    return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
-      className: clsx(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref
-    }, other, {
-      children: slidingDrawer
-    }));
-  }
-
-  // variant === temporary
-  return /*#__PURE__*/jsx(DrawerRoot, _extends({
-    BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
-      transitionDuration
-    }),
-    className: clsx(classes.root, classes.modal, className),
-    open: open,
+  return /*#__PURE__*/jsx(LinkRoot, _extends({
+    color: color,
+    className: clsx(classes.root, className),
+    classes: TypographyClasses,
+    component: component,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    ref: handlerRef,
     ownerState: ownerState,
-    onClose: onClose,
-    hideBackdrop: hideBackdrop,
-    ref: ref
-  }, other, ModalProps, {
-    children: slidingDrawer
-  }));
+    variant: variant,
+    sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
+      color
+    }] : []), ...(Array.isArray(sx) ? sx : [sx])]
+  }, other));
 });
-process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? Link.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"     |
   // ----------------------------------------------------------------------
-  /**
-   * Side from which the drawer will appear.
-   * @default 'left'
-   */
-  anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
-  /**
-   * @ignore
-   */
-  BackdropProps: PropTypes.object,
   /**
    * The content of the component.
    */
@@ -15419,64 +17235,43 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
    */
   className: PropTypes.string,
   /**
-   * The elevation of the drawer.
-   * @default 16
-   */
-  elevation: integerPropType,
-  /**
-   * If `true`, the backdrop is not rendered.
-   * @default false
-   */
-  hideBackdrop: PropTypes.bool,
-  /**
-   * Props applied to the [`Modal`](/material-ui/api/modal/) element.
-   * @default {}
-   */
-  ModalProps: PropTypes.object,
-  /**
-   * Callback fired when the component requests to be closed.
-   *
-   * @param {object} event The event source of the callback.
+   * The color of the link.
+   * @default 'primary'
    */
-  onClose: PropTypes.func,
+  color: PropTypes /* @typescript-to-proptypes-ignore */.any,
   /**
-   * If `true`, the component is shown.
-   * @default false
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
    */
-  open: PropTypes.bool,
+  component: elementTypeAcceptingRef$1,
   /**
-   * Props applied to the [`Paper`](/material-ui/api/paper/) element.
-   * @default {}
+   * @ignore
    */
-  PaperProps: PropTypes.object,
+  onBlur: PropTypes.func,
   /**
-   * Props applied to the [`Slide`](/material-ui/api/slide/) element.
+   * @ignore
    */
-  SlideProps: PropTypes.object,
+  onFocus: PropTypes.func,
   /**
    * 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 duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   * @default {
-   *   enter: theme.transitions.duration.enteringScreen,
-   *   exit: theme.transitions.duration.leavingScreen,
-   * }
+   * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
    */
-  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    appear: PropTypes.number,
-    enter: PropTypes.number,
-    exit: PropTypes.number
-  })]),
+  TypographyClasses: PropTypes.object,
   /**
-   * The variant to use.
-   * @default 'temporary'
+   * Controls when the link should have an underline.
+   * @default 'always'
    */
-  variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
+  underline: PropTypes.oneOf(['always', 'hover', 'none']),
+  /**
+   * Applies the theme typography styles.
+   * @default 'inherit'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['body1', 'body2', 'button', 'caption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'inherit', 'overline', 'subtitle1', 'subtitle2']), PropTypes.string])
 } : void 0;
-var Drawer$1 = Drawer;
+var Link$1 = Link;
 
 const Stack = createStack({
   createStyledComponent: styled$1('div', {
@@ -15551,45 +17346,40 @@ const EmptyState = ({
   content,
   actions
 }) => {
-  return jsx(Card$1, {
-    elevation: 1,
-    children: jsxs(CardContent$1, {
-      sx: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'column',
-        gap: 4
-      },
-      children: [jsx("svg", {
-        style: {
-          width: 206,
-          height: 187
-        },
-        children: jsx("use", {
-          xlinkHref: `${sincoIconos}#${UrlImage[_state]}`
-        })
-      }), jsxs(Stack$1, {
-        direction: "column",
-        spacing: 2,
-        children: [title && jsx(Typography$1, {
-          variant: "h6",
-          textAlign: "center",
-          children: title
-        }), content && jsx(Typography$1, {
-          variant: "body1",
-          textAlign: "center",
-          color: "text.secondary",
-          children: content
-        }), _state === 'create' && actions && jsx(Stack$1, {
-          direction: "row",
-          spacing: 2,
-          justifyContent: "center",
-          children: actions
-        })]
-      })]
-    })
-  });
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: SincoTheme
+  }, /*#__PURE__*/React__default.createElement(Card$1, {
+    elevation: 1
+  }, /*#__PURE__*/React__default.createElement(CardContent$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      gap: 4
+    }
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    style: {
+      width: 206,
+      height: 187
+    }
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: `${sincoIconos}#${UrlImage[_state]}`
+  })), /*#__PURE__*/React__default.createElement(Stack$1, {
+    direction: "column",
+    spacing: 2
+  }, title && /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    textAlign: "center"
+  }, title), content && /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "body1",
+    textAlign: "center",
+    color: "text.secondary"
+  }, content), _state === 'create' && actions && /*#__PURE__*/React__default.createElement(Stack$1, {
+    direction: "row",
+    spacing: 2,
+    justifyContent: "center"
+  }, actions)))));
 };
 
 var wellKnownSymbol$a = wellKnownSymbol$f;
@@ -16060,90 +17850,320 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
 }), 'Close');
 default_1 = Close.default = _default;
 
-const DrawerContainer = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignContent: 'flex-start',
-  justifyContent: 'space-between',
-  height: '100%',
-  overflow: 'hidden'
+const stylesDrawerContainer = {
+  display: "flex",
+  flexDirection: "column",
+  alignContent: "flex-start",
+  justifyContent: "space-between",
+  width: "530px",
+  height: "100%",
+  overflow: "hidden"
 };
-const DrawerHeader = {
-  display: 'flex',
-  alignContent: 'center',
-  justifyContent: 'space-between',
-  backgroundColor: 'secondary.main',
-  py: '12px',
-  px: '8px'
+const stylesEncabezado = {
+  display: "flex",
+  alignContent: "center",
+  justifyContent: "space-between",
+  backgroundColor: "secondary.main",
+  py: "12px",
+  px: "8px"
 };
-const DrawerContent = {
-  display: 'flex',
-  overflow: 'auto',
-  alignItems: 'flex-start',
-  flexDirection: 'column',
-  height: '-webkit-fill-available',
-  py: '12px',
-  px: '8px'
+const stylesContenido = {
+  display: "flex",
+  overflow: "auto",
+  alignItems: "flex-start",
+  flexDirection: "column",
+  height: "-webkit-fill-available",
+  py: "12px",
+  px: "8px"
 };
-const DrawerActions = {
-  display: 'flex',
-  alignContent: 'center',
-  justifyContent: 'flex-end',
-  borderTop: '1px solid rgba(16, 24, 64, 0.23)',
-  backgroundColor: '#F1F0EE',
-  gap: '8px',
-  mt: '4px',
-  py: '12px',
-  px: '8px'
+const stylesAcciones = {
+  display: "flex",
+  alignContent: "center",
+  justifyContent: "flex-end",
+  borderTop: "1px solid rgba(16, 24, 64, 0.23)",
+  backgroundColor: "#F1F0EE",
+  mt: "4px",
+  gap: "8px",
+  py: "12px",
+  px: "8px"
 };
 const DrawerComponent = ({
-  title,
-  children,
-  renderActions,
-  showActions,
-  position,
-  width,
   open,
-  onClose
+  onClose,
+  titulo,
+  children,
+  acciones,
+  anchor
 }) => {
-  const [stateActions, setActionsState] = useState(showActions);
-  const handleDrawerActions = () => {
-    setActionsState(true);
+  const [showActions, setShowActions] = useState(false);
+  const mostrarAcciones = () => {
+    setShowActions(true);
   };
-  return jsx(ThemeProvider, {
-    theme: SincoTheme,
-    children: jsx(Drawer$1, {
-      anchor: position,
-      open: open,
-      onClose: onClose,
-      children: jsxs(Box$2, {
-        sx: DrawerContainer,
-        width: width,
-        children: [jsxs(Box$2, {
-          sx: DrawerHeader,
-          children: [jsx(Typography$1, {
-            variant: "h6",
-            children: title
-          }), jsx(Box$2, {
-            children: jsx(IconButton$1, {
-              onClick: onClose,
-              size: "small",
-              children: jsx(default_1, {
-                fontSize: "small"
-              })
-            })
-          })]
-        }), jsx(Box$2, {
-          sx: DrawerContent,
-          onClick: handleDrawerActions,
-          children: children
-        }), stateActions && jsx(Box$2, {
-          sx: DrawerActions,
-          children: renderActions
-        })]
-      })
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: SincoTheme
+  }, /*#__PURE__*/React__default.createElement(Drawer$1, {
+    anchor: anchor,
+    open: open,
+    onClose: onClose
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
+    sx: stylesDrawerContainer
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
+    sx: stylesEncabezado
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6"
+  }, titulo), /*#__PURE__*/React__default.createElement(Box$2, null, /*#__PURE__*/React__default.createElement(IconButton$1, {
+    onClick: onClose,
+    size: "small"
+  }, /*#__PURE__*/React__default.createElement(default_1, {
+    fontSize: "small"
+  })))), /*#__PURE__*/React__default.createElement(Box$2, {
+    onClick: mostrarAcciones,
+    sx: stylesContenido
+  }, children), showActions && /*#__PURE__*/React__default.createElement(Box$2, {
+    sx: stylesAcciones
+  }, acciones))));
+};
+
+const ToastContent = styled$1(Stack$1)(() => ({
+  position: "fixed",
+  zIndex: 1400,
+  boxShadow: "0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)",
+  right: 16,
+  marginTop: 16
+}));
+const ContentBox = styled$1(Box$2)(({
+  theme
+}) => ({
+  padding: theme.spacing(1.5),
+  gap: theme.spacing(1.5),
+  display: "flex",
+  alignItems: "center",
+  "&.color-error": {
+    backgroundColor: "#FEEBEE"
+  },
+  "&.color-info": {
+    backgroundColor: "#E1F5FE"
+  },
+  "&.color-warning": {
+    backgroundColor: "#FFF3E0"
+  },
+  "&.color-success": {
+    backgroundColor: "#E8F5E9"
+  }
+}));
+const RippleIcon = styled$1(Stack$1)(({
+  theme
+}) => ({
+  padding: theme.spacing(1),
+  gap: theme.spacing(1),
+  height: 20,
+  borderRadius: 50,
+  "&.ripple-error": {
+    backgroundColor: "#D143431F"
+  },
+  "&.ripple-info": {
+    backgroundColor: "#2D9FC51F"
+  },
+  "&.ripple-warning": {
+    backgroundColor: "#FB85001F"
+  },
+  "&.ripple-success": {
+    backgroundColor: "#8FC93A1F"
+  }
+}));
+const ContentIcon = styled$1(Stack$1)(({
+  theme
+}) => ({
+  "&.icon-color.color-info": {
+    color: theme.palette.info.main
+  },
+  "&.icon-color.color-error": {
+    color: theme.palette.error.main
+  },
+  "&.icon-color.color-warning": {
+    color: theme.palette.warning.main
+  },
+  "&.icon-color.color-success": {
+    color: theme.palette.success.main
+  }
+}));
+const ToastNotification = toast => {
+  const [openToast, setOpenToast] = useState(true);
+  const [showOptions, setShowOptions] = useState(true);
+  const [progress, setProgress] = useState(100);
+  const timeProgress = toast.time || 8000;
+  const IconMap = {
+    success: /*#__PURE__*/React__default.createElement(CheckCircleRounded, null),
+    error: /*#__PURE__*/React__default.createElement(ErrorRounded, null),
+    warning: /*#__PURE__*/React__default.createElement(WarningRounded, null),
+    info: /*#__PURE__*/React__default.createElement(InfoRounded, null)
+  };
+  const ToastIcon = IconMap[toast.type || "info"];
+  const colorMap = {
+    success: "success",
+    error: "error",
+    warning: "warning",
+    info: "info"
+  };
+  const colors = colorMap[toast.type || "info"];
+  const toastPosition = {
+    center: "center",
+    end: "end",
+    start: "start"
+  };
+  toastPosition[toast.position || "end"];
+  const close = () => {
+    setOpenToast(false);
+  };
+  const toggleOptions = () => {
+    setShowOptions(prevShowOptions => !prevShowOptions);
+  };
+  const seeOptions = toast.seeMore;
+  useEffect(() => {
+    let seconds = 0;
+    const interval = setInterval(() => {
+      seconds += 100;
+      const progress = 100 - seconds / timeProgress * 100;
+      setProgress(progress <= 0 ? 0 : progress);
+    }, 100);
+    const closeTimeout = setTimeout(() => {
+      clearInterval(interval);
+      setOpenToast(false);
+    }, timeProgress);
+    return () => {
+      clearInterval(interval);
+      clearTimeout(closeTimeout);
+    };
+  }, [timeProgress]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: SincoTheme
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    height: 105,
+    top: 16,
+    right: 16,
+    position: "absolute",
+    zIndex: 1400
+  }, /*#__PURE__*/React__default.createElement(ToastContent, {
+    position: "fixed"
+  }, /*#__PURE__*/React__default.createElement(ContentBox, {
+    className: `color-${toast.type || "info"}`
+  }, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
+    className: `ripple-${toast.type || "info"}`
+  }, /*#__PURE__*/React__default.createElement(ContentIcon, {
+    className: `icon-color color-${toast.type || "info"}`
+  }, ToastIcon)), /*#__PURE__*/React__default.createElement(Divider$1, {
+    orientation: "vertical",
+    flexItem: true
+  }), /*#__PURE__*/React__default.createElement(Stack$1, {
+    gap: 0.5,
+    width: 285
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "subtitle2",
+    color: "text.primary"
+  }, toast.title), /*#__PURE__*/React__default.createElement(IconButton$1, {
+    size: "small",
+    "aria-label": "delete",
+    onClick: close
+  }, /*#__PURE__*/React__default.createElement(Close$1, null))), /*#__PURE__*/React__default.createElement(Stack$1, {
+    gap: "4px"
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    color: "text.primary",
+    variant: "body2"
+  }, toast.subtitle), !showOptions && toast.dataOpt && toast.dataOpt.length > 0 && /*#__PURE__*/React__default.createElement("ul", {
+    style: {
+      paddingLeft: 15,
+      marginBlock: 0,
+      fontSize: 11,
+      color: "#101840de"
+    }
+  }, toast.dataOpt.map((element, i) => {
+    const keyElement = Object.keys(element);
+    let options = "";
+    for (let _i = 0; _i < keyElement.length; _i++) {
+      options += element[keyElement[_i]];
+    }
+    return /*#__PURE__*/React__default.createElement("li", {
+      style: {
+        width: "fit-content"
+      },
+      key: i
+    }, /*#__PURE__*/React__default.createElement(Typography$1, {
+      variant: "caption"
+    }, options));
+  }))), /*#__PURE__*/React__default.createElement(Stack$1, {
+    justifyContent: "flex-end",
+    flexDirection: "row",
+    alignItems: "flex-end"
+  }, toast.actions && /*#__PURE__*/React__default.createElement(Stack$1, {
+    flexDirection: "row",
+    gap: 1
+  }, toast.actions), seeOptions && /*#__PURE__*/React__default.createElement(Button$1, {
+    onClick: toggleOptions,
+    size: "small",
+    variant: "text",
+    color: colors,
+    endIcon: showOptions ? /*#__PURE__*/React__default.createElement(ArrowDownward, {
+      fontSize: "small"
+    }) : /*#__PURE__*/React__default.createElement(ArrowUpward, {
+      fontSize: "small"
     })
-  });
+  }, showOptions ? "Ver más" : "Ver menos")))), /*#__PURE__*/React__default.createElement(LinearProgress$1, {
+    color: colors,
+    variant: "determinate",
+    value: progress
+  })))));
+};
+
+const PageContent = styled$1(Stack$1)(({
+  theme
+}) => ({
+  backgroundColor: "#fff",
+  boxShadow: "0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)",
+  zIndex: 100,
+  padding: "8px 24px",
+  justifyContent: "space-between",
+  minHeight: 39,
+  position: "fixed",
+  width: "100%"
+}));
+const PageHeader = page => {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: SincoTheme
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      minHeight: 56
+    }
+  }, /*#__PURE__*/React__default.createElement(PageContent, null, Array.isArray(page.breadcrumbs) && page.breadcrumbs.length > 0 && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, null, page.breadcrumbs.map((element, i) => {
+    return /*#__PURE__*/React__default.createElement(Link$1, {
+      underline: "hover",
+      color: "inherit",
+      href: element.link,
+      key: i
+    }, element.name);
+  })), /*#__PURE__*/React__default.createElement(Stack$1, {
+    width: "90%",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    gap: 1.5,
+    flexDirection: "row",
+    alignItems: "center"
+  }, page.back, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    color: "text.primary"
+  }, page.title), /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "caption",
+    color: "text.secondary"
+  }, page.subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
+    gap: 1,
+    alignItems: "center",
+    flexDirection: "row"
+  }, page.actions)), page.tabs)));
 };
 
 var classof$2 = classofRaw$2;
@@ -21601,4 +23621,4 @@ const useDynamicColor = url => {
   };
 };
 
-export { DrawerComponent, EmptyState, SincoTheme, UrlImage, useDynamicColor };
+export { DrawerComponent, EmptyState, PageContent, PageHeader, SincoTheme, ToastNotification, UrlImage, dynamicColor, useDynamicColor };