@sinco/react 1.0.4-rc.6 → 1.0.4-rc.8

package/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { forwardRef, useContext } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1088,6 +1088,15 @@ $$1({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign$2
   assign: assign$2
 });
 
+function chainPropTypes(propType1, propType2) {
+  if (process.env.NODE_ENV === 'production') {
+    return () => null;
+  }
+  return function validate(...args) {
+    return propType1(...args) || propType2(...args);
+  };
+}
+
 function isPlainObject(item) {
   return item !== null && typeof item === 'object' && item.constructor === Object;
 }
@@ -2554,6 +2563,58 @@ function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+function getTypeByValue(value) {
+  const valueType = typeof value;
+  switch (valueType) {
+    case 'number':
+      if (Number.isNaN(value)) {
+        return 'NaN';
+      }
+      if (!Number.isFinite(value)) {
+        return 'Infinity';
+      }
+      if (value !== Math.floor(value)) {
+        return 'float';
+      }
+      return 'number';
+    case 'object':
+      if (value === null) {
+        return 'null';
+      }
+      return value.constructor.name;
+    default:
+      return valueType;
+  }
+}
+
+// IE 11 support
+function ponyfillIsInteger(x) {
+  // eslint-disable-next-line no-restricted-globals
+  return typeof x === 'number' && isFinite(x) && Math.floor(x) === x;
+}
+const isInteger = Number.isInteger || ponyfillIsInteger;
+function requiredInteger(props, propName, componentName, location) {
+  const propValue = props[propName];
+  if (propValue == null || !isInteger(propValue)) {
+    const propType = getTypeByValue(propValue);
+    return new RangeError(`Invalid ${location} \`${propName}\` of type \`${propType}\` supplied to \`${componentName}\`, expected \`integer\`.`);
+  }
+  return null;
+}
+function validator(props, propName, ...other) {
+  const propValue = props[propName];
+  if (propValue === undefined) {
+    return null;
+  }
+  return requiredInteger(props, propName, ...other);
+}
+function validatorNoop() {
+  return null;
+}
+validator.isRequired = requiredInteger;
+validatorNoop.isRequired = validatorNoop;
+var integerPropType = process.env.NODE_ENV === 'production' ? validatorNoop : validator;
+
 /**
  * Add keys, values of `defaultProps` that does not exist in `props`
  * @param {object} defaultProps
@@ -4936,7 +4997,7 @@ tags.forEach(function (tagName) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function styled$2(tag, options) {
+function styled$3(tag, options) {
   const stylesFactory = newStyled(tag, options);
   if (process.env.NODE_ENV !== 'production') {
     return (...styles) => {
@@ -4961,7 +5022,7 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-const _excluded$8 = ["values", "unit", "step"];
+const _excluded$f = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -4996,7 +5057,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$8);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$f);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -5122,6 +5183,61 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
     return acc;
   }, style);
 }
+function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
+  const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
+  const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
+  return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
+}
+
+// compute base for responsive values; e.g.,
+// [1,2,3] => {xs: true, sm: true, md: true}
+// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
+  // fixed value
+  if (typeof breakpointValues !== 'object') {
+    return {};
+  }
+  const base = {};
+  const breakpointsKeys = Object.keys(themeBreakpoints);
+  if (Array.isArray(breakpointValues)) {
+    breakpointsKeys.forEach((breakpoint, i) => {
+      if (i < breakpointValues.length) {
+        base[breakpoint] = true;
+      }
+    });
+  } else {
+    breakpointsKeys.forEach(breakpoint => {
+      if (breakpointValues[breakpoint] != null) {
+        base[breakpoint] = true;
+      }
+    });
+  }
+  return base;
+}
+function resolveBreakpointValues({
+  values: breakpointValues,
+  breakpoints: themeBreakpoints,
+  base: customBase
+}) {
+  const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
+  const keys = Object.keys(base);
+  if (keys.length === 0) {
+    return breakpointValues;
+  }
+  let previous;
+  return keys.reduce((acc, breakpoint, i) => {
+    if (Array.isArray(breakpointValues)) {
+      acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
+      previous = i;
+    } else if (typeof breakpointValues === 'object') {
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+      previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
+    }
+    return acc;
+  }, {});
+}
 
 function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
@@ -5156,7 +5272,7 @@ function getStyleValue(themeMapping, transform, propValueFinal, userValue = prop
   }
   return value;
 }
-function style$1(options) {
+function style$2(options) {
   const {
     prop,
     cssProperty = options.prop,
@@ -5317,12 +5433,12 @@ function resolveCssProperty(props, keys, prop, transformer) {
   const propValue = props[prop];
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-function style(props, keys) {
+function style$1(props, keys) {
   const transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
 function margin(props) {
-  return style(props, marginKeys);
+  return style$1(props, marginKeys);
 }
 margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
@@ -5330,7 +5446,7 @@ margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((ob
 }, {}) : {};
 margin.filterProps = marginKeys;
 function padding(props) {
-  return style(props, paddingKeys);
+  return style$1(props, paddingKeys);
 }
 padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
@@ -5404,48 +5520,48 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = style$1({
+const border = style$2({
   prop: 'border',
   themeKey: 'borders',
   transform: borderTransform
 });
-const borderTop = style$1({
+const borderTop = style$2({
   prop: 'borderTop',
   themeKey: 'borders',
   transform: borderTransform
 });
-const borderRight = style$1({
+const borderRight = style$2({
   prop: 'borderRight',
   themeKey: 'borders',
   transform: borderTransform
 });
-const borderBottom = style$1({
+const borderBottom = style$2({
   prop: 'borderBottom',
   themeKey: 'borders',
   transform: borderTransform
 });
-const borderLeft = style$1({
+const borderLeft = style$2({
   prop: 'borderLeft',
   themeKey: 'borders',
   transform: borderTransform
 });
-const borderColor = style$1({
+const borderColor = style$2({
   prop: 'borderColor',
   themeKey: 'palette'
 });
-const borderTopColor = style$1({
+const borderTopColor = style$2({
   prop: 'borderTopColor',
   themeKey: 'palette'
 });
-const borderRightColor = style$1({
+const borderRightColor = style$2({
   prop: 'borderRightColor',
   themeKey: 'palette'
 });
-const borderBottomColor = style$1({
+const borderBottomColor = style$2({
   prop: 'borderBottomColor',
   themeKey: 'palette'
 });
-const borderLeftColor = style$1({
+const borderLeftColor = style$2({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
@@ -5518,31 +5634,31 @@ rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   rowGap: responsivePropType$1
 } : {};
 rowGap.filterProps = ['rowGap'];
-const gridColumn = style$1({
+const gridColumn = style$2({
   prop: 'gridColumn'
 });
-const gridRow = style$1({
+const gridRow = style$2({
   prop: 'gridRow'
 });
-const gridAutoFlow = style$1({
+const gridAutoFlow = style$2({
   prop: 'gridAutoFlow'
 });
-const gridAutoColumns = style$1({
+const gridAutoColumns = style$2({
   prop: 'gridAutoColumns'
 });
-const gridAutoRows = style$1({
+const gridAutoRows = style$2({
   prop: 'gridAutoRows'
 });
-const gridTemplateColumns = style$1({
+const gridTemplateColumns = style$2({
   prop: 'gridTemplateColumns'
 });
-const gridTemplateRows = style$1({
+const gridTemplateRows = style$2({
   prop: 'gridTemplateRows'
 });
-const gridTemplateAreas = style$1({
+const gridTemplateAreas = style$2({
   prop: 'gridTemplateAreas'
 });
-const gridArea = style$1({
+const gridArea = style$2({
   prop: 'gridArea'
 });
 compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
@@ -5553,18 +5669,18 @@ function paletteTransform(value, userValue) {
   }
   return value;
 }
-const color = style$1({
+const color = style$2({
   prop: 'color',
   themeKey: 'palette',
   transform: paletteTransform
 });
-const bgcolor = style$1({
+const bgcolor = style$2({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
 });
-const backgroundColor = style$1({
+const backgroundColor = style$2({
   prop: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
@@ -5574,7 +5690,7 @@ compose(color, bgcolor, backgroundColor);
 function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-const width = style$1({
+const width = style$2({
   prop: 'width',
   transform: sizingTransform
 });
@@ -5592,33 +5708,33 @@ const maxWidth = props => {
   return null;
 };
 maxWidth.filterProps = ['maxWidth'];
-const minWidth = style$1({
+const minWidth = style$2({
   prop: 'minWidth',
   transform: sizingTransform
 });
-const height = style$1({
+const height = style$2({
   prop: 'height',
   transform: sizingTransform
 });
-const maxHeight = style$1({
+const maxHeight = style$2({
   prop: 'maxHeight',
   transform: sizingTransform
 });
-const minHeight = style$1({
+const minHeight = style$2({
   prop: 'minHeight',
   transform: sizingTransform
 });
-style$1({
+style$2({
   prop: 'size',
   cssProperty: 'width',
   transform: sizingTransform
 });
-style$1({
+style$2({
   prop: 'size',
   cssProperty: 'height',
   transform: sizingTransform
 });
-const boxSizing = style$1({
+const boxSizing = style$2({
   prop: 'boxSizing'
 });
 compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
@@ -6025,7 +6141,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$7 = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$e = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -6033,7 +6149,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$7);
+    other = _objectWithoutPropertiesLoose(options, _excluded$e);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -6061,19 +6177,64 @@ function createTheme$1(options = {}, ...args) {
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
-function useTheme$1(defaultTheme = null) {
+function useTheme$2(defaultTheme = null) {
   const contextTheme = React.useContext(ThemeContext);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 
 const systemDefaultTheme$1 = createTheme$1();
-function useTheme(defaultTheme = systemDefaultTheme$1) {
-  return useTheme$1(defaultTheme);
+function useTheme$1(defaultTheme = systemDefaultTheme$1) {
+  return useTheme$2(defaultTheme);
+}
+
+const _excluded$d = ["sx"];
+const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
+  const result = {
+    systemProps: {},
+    otherProps: {}
+  };
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
+  Object.keys(props).forEach(prop => {
+    if (config[prop]) {
+      result.systemProps[prop] = props[prop];
+    } else {
+      result.otherProps[prop] = props[prop];
+    }
+  });
+  return result;
+};
+function extendSxProp(props) {
+  const {
+      sx: inSx
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+  const {
+    systemProps,
+    otherProps
+  } = splitProps(other);
+  let finalSx;
+  if (Array.isArray(inSx)) {
+    finalSx = [systemProps, ...inSx];
+  } else if (typeof inSx === 'function') {
+    finalSx = (...args) => {
+      const result = inSx(...args);
+      if (!isPlainObject(result)) {
+        return systemProps;
+      }
+      return _extends({}, systemProps, result);
+    };
+  } else {
+    finalSx = _extends({}, systemProps, inSx);
+  }
+  return _extends({}, otherProps, {
+    sx: finalSx
+  });
 }
 
 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$6 = ["variant"];
+const _excluded$c = ["variant"];
 function isEmpty$1(string) {
   return string.length === 0;
 }
@@ -6087,7 +6248,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+    other = _objectWithoutPropertiesLoose(props, _excluded$c);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -6099,7 +6260,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$5 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$b = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -6194,7 +6355,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$5);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$b);
 
     // 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;
@@ -6215,7 +6376,7 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$2(tag, _extends({
+    const defaultStyledResolver = styled$3(tag, _extends({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
@@ -6307,6 +6468,9 @@ function createStyled(input = {}) {
   };
 }
 
+const styled$2 = createStyled();
+var systemStyled = styled$2;
+
 function getThemeProps(params) {
   const {
     theme,
@@ -6325,7 +6489,7 @@ function useThemeProps$1({
   defaultTheme,
   themeId
 }) {
-  let theme = useTheme(defaultTheme);
+  let theme = useTheme$1(defaultTheme);
   if (themeId) {
     theme = theme[themeId] || theme;
   }
@@ -6508,6 +6672,27 @@ function getContrastRatio(foreground, background) {
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 }
 
+/**
+ * Sets the absolute transparency of a color.
+ * Any existing alpha values are overwritten.
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+ * @param {number} value - value to set the alpha channel to in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+function alpha(color, value) {
+  color = decomposeColor(color);
+  value = clamp(value);
+  if (color.type === 'rgb' || color.type === 'hsl') {
+    color.type += 'a';
+  }
+  if (color.type === 'color') {
+    color.values[3] = `/${value}`;
+  } else {
+    color.values[3] = value;
+  }
+  return recomposeColor(color);
+}
+
 /**
  * Darkens a color.
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
@@ -6550,6 +6735,161 @@ function lighten(color, coefficient) {
   return recomposeColor(color);
 }
 
+const _excluded$a = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+const defaultTheme$2 = createTheme$1();
+// widening Theme to any so that the consumer can own the theme structure.
+const defaultCreateStyledComponent = systemStyled('div', {
+  name: 'MuiStack',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+});
+function useThemePropsDefault(props) {
+  return useThemeProps$1({
+    props,
+    name: 'MuiStack',
+    defaultTheme: defaultTheme$2
+  });
+}
+
+/**
+ * Return an array with the separator React element interspersed between
+ * each React node of the input children.
+ *
+ * > joinChildren([1,2,3], 0)
+ * [1,0,2,0,3]
+ */
+function joinChildren(children, separator) {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  return childrenArray.reduce((output, child, index) => {
+    output.push(child);
+    if (index < childrenArray.length - 1) {
+      output.push( /*#__PURE__*/React.cloneElement(separator, {
+        key: `separator-${index}`
+      }));
+    }
+    return output;
+  }, []);
+}
+const getSideFromDirection = direction => {
+  return {
+    row: 'Left',
+    'row-reverse': 'Right',
+    column: 'Top',
+    'column-reverse': 'Bottom'
+  }[direction];
+};
+const style = ({
+  ownerState,
+  theme
+}) => {
+  let styles = _extends({
+    display: 'flex',
+    flexDirection: 'column'
+  }, handleBreakpoints({
+    theme
+  }, resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  }), propValue => ({
+    flexDirection: propValue
+  })));
+  if (ownerState.spacing) {
+    const transformer = createUnarySpacing(theme);
+    const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
+      if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
+        acc[breakpoint] = true;
+      }
+      return acc;
+    }, {});
+    const directionValues = resolveBreakpointValues({
+      values: ownerState.direction,
+      base
+    });
+    const spacingValues = resolveBreakpointValues({
+      values: ownerState.spacing,
+      base
+    });
+    if (typeof directionValues === 'object') {
+      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+        const directionValue = directionValues[breakpoint];
+        if (!directionValue) {
+          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+    const styleFromPropValue = (propValue, breakpoint) => {
+      if (ownerState.useFlexGap) {
+        return {
+          gap: getValue(transformer, propValue)
+        };
+      }
+      return {
+        '& > :not(style) + :not(style)': {
+          margin: 0,
+          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
+        }
+      };
+    };
+    styles = deepmerge(styles, handleBreakpoints({
+      theme
+    }, spacingValues, styleFromPropValue));
+  }
+  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
+  return styles;
+};
+function createStack(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps = useThemePropsDefault,
+    componentName = 'MuiStack'
+  } = options;
+  const useUtilityClasses = () => {
+    const slots = {
+      root: ['root']
+    };
+    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+  };
+  const StackRoot = createStyledComponent(style);
+  const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
+    const themeProps = useThemeProps(inProps);
+    const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+    const {
+        component = 'div',
+        direction = 'column',
+        spacing = 0,
+        divider,
+        children,
+        className,
+        useFlexGap = false
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    const ownerState = {
+      direction,
+      spacing,
+      useFlexGap
+    };
+    const classes = useUtilityClasses();
+    return /*#__PURE__*/jsx(StackRoot, _extends({
+      as: component,
+      ownerState: ownerState,
+      ref: ref,
+      className: clsx(classes.root, className)
+    }, other, {
+      children: divider ? joinChildren(children, divider) : children
+    }));
+  });
+  process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
+    children: PropTypes.node,
+    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    divider: PropTypes.node,
+    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  } : void 0;
+  return Stack;
+}
+
 function createMixins(breakpoints, mixins) {
   return _extends({
     toolbar: {
@@ -6698,7 +7038,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$4 = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$9 = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -6867,7 +7207,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$4);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$9);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -6991,7 +7331,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$3 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$8 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -7022,7 +7362,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -7089,7 +7429,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$2 = ["duration", "easing", "delay"];
+const _excluded$7 = ["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 = {
@@ -7140,7 +7480,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2);
+      other = _objectWithoutPropertiesLoose(options, _excluded$7);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -7187,7 +7527,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$1 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$6 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -7195,7 +7535,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$1);
+    other = _objectWithoutPropertiesLoose(options, _excluded$6);
   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));
@@ -7256,6 +7596,15 @@ Please use another name.` : formatMuiErrorMessage(18));
 const defaultTheme = createTheme();
 var defaultTheme$1 = defaultTheme;
 
+function useTheme() {
+  const theme = useTheme$1(defaultTheme$1);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue(theme);
+  }
+  return theme[THEME_ID] || theme;
+}
+
 function useThemeProps({
   props,
   name
@@ -7276,13 +7625,25 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
+// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
+const getOverlayAlpha = elevation => {
+  let alphaValue;
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+  return (alphaValue / 100).toFixed(2);
+};
+var getOverlayAlpha$1 = getOverlayAlpha;
+
 function getSvgIconUtilityClass(slot) {
   return generateUtilityClass('MuiSvgIcon', slot);
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses = ownerState => {
+const _excluded$5 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$5 = ownerState => {
   const {
     color,
     fontSize,
@@ -7347,7 +7708,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -7360,7 +7721,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses$5(ownerState);
   return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
@@ -7621,15 +7982,44 @@ const components = {
     }
   },
   MuiChip: {
-    defaultProps: {
-      size: 'small'
-    },
     styleOverrides: {
+      sizeSmall: {
+        paddingBlock: 4
+      },
+      sizeMedium: {
+        paddingBlock: 7
+      },
       root: {
+        height: "inherit",
         borderRadius: 4
+        // '&.MuiChip-colorPrimary': {
+        //     color: '#101840DE',
+        //     backgroundColor: '#E4ECF4',
+        //     ".MuiChip-deleteIcon": {
+        //         height: 12,
+        //         width: 12,
+        //     },
+        // },
+        // '&.MuiChip-colorPrimary.MuiChip-outlined': {
+        //     border: '1px solid #90B1D0',
+        //     backgroundColor: "#fff",
+        //     ".MuiChip-avatar": {
+        //         marginBlock: 2
+        //     },
+        //     "&.MuiChip-colorPrimary.MuiChip-outlined:hover": {
+        //         backgroundColor: "#E4ECF4"
+        //     },
+        //     ".MuiChip-deleteIcon": {
+        //         color: "#90B1D0",
+        //         "&:hover": {
+        //             color: "#6392BD !important"
+        //         }
+        //     },
+        // },
       }
     }
   },
+
   MuiAlert: {
     defaultProps: {
       iconMapping: {
@@ -7649,25 +8039,39 @@ const components = {
     }
   },
   MuiButton: {
-    defaultProps: {
-      size: 'medium'
-    },
     styleOverrides: {
-      fullWidth: {
-        width: '100%'
+      endIcon: {
+        marginLeft: 2
+      },
+      iconSizeSmall: {
+        height: 14,
+        width: 14
+      },
+      iconSizeMedium: {
+        height: 15,
+        width: 18
+      },
+      iconSizeLarge: {
+        height: 17,
+        width: 22
       },
       sizeSmall: {
-        padding: '4px 10px'
+        padding: '6px 5px'
       },
       sizeMedium: {
-        padding: '7.5px 15px'
+        padding: '8.5px 8px',
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        }
       },
       sizeLarge: {
-        padding: '10.5px 22px',
-        fontSize: 14
-      },
-      root: {
-        width: "fit-content"
+        padding: '10.5px 11px',
+        fontSize: 14,
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
+        }
       }
     }
   },
@@ -7922,44 +8326,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: {
@@ -7978,6 +8443,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)",
@@ -8018,8 +8488,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,
@@ -8029,7 +8509,7 @@ const typography = {
     }
   },
   body2: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 13,
     fontWeight: 400,
     letterSpacing: 0.17,
@@ -8039,7 +8519,7 @@ const typography = {
     }
   },
   subtitle1: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 14,
     fontWeight: 500,
     letterSpacing: 0.15,
@@ -8049,7 +8529,7 @@ const typography = {
     }
   },
   subtitle2: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 13,
     fontWeight: 500,
     letterSpacing: 0.1,
@@ -8059,7 +8539,7 @@ const typography = {
     }
   },
   caption: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 11,
     fontWeight: 400,
     letterSpacing: 0.4,
@@ -8069,7 +8549,7 @@ const typography = {
     }
   },
   overline: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 11,
     fontWeight: 400,
     letterSpacing: 1,
@@ -8079,7 +8559,7 @@ const typography = {
     }
   },
   h6: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 16,
     fontWeight: 600,
     lineHeight: 1.6,
@@ -8088,44 +8568,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
     }
@@ -8141,20 +8621,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$2 = wellKnownSymbol$4;
 
@@ -8665,6 +9132,673 @@ fixRegExpWellKnownSymbolLogic('search', function (SEARCH, nativeSearch, maybeCal
   ];
 });
 
+function getPaperUtilityClass(slot) {
+  return generateUtilityClass('MuiPaper', 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$4 = ["className", "component", "elevation", "square", "variant"];
+const useUtilityClasses$4 = ownerState => {
+  const {
+    square,
+    elevation,
+    variant,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]
+  };
+  return composeClasses(slots, getPaperUtilityClass, classes);
+};
+const PaperRoot = styled$1('div', {
+  name: 'MuiPaper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  var _theme$vars$overlays;
+  return _extends({
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    color: (theme.vars || theme).palette.text.primary,
+    transition: theme.transitions.create('box-shadow')
+  }, !ownerState.square && {
+    borderRadius: theme.shape.borderRadius
+  }, ownerState.variant === 'outlined' && {
+    border: `1px solid ${(theme.vars || theme).palette.divider}`
+  }, ownerState.variant === 'elevation' && _extends({
+    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+  }, !theme.vars && theme.palette.mode === 'dark' && {
+    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha$1(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha$1(ownerState.elevation))})`
+  }, theme.vars && {
+    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
+  }));
+});
+const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPaper'
+  });
+  const {
+      className,
+      component = 'div',
+      elevation = 1,
+      square = false,
+      variant = 'elevation'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const ownerState = _extends({}, props, {
+    component,
+    elevation,
+    square,
+    variant
+  });
+  const classes = useUtilityClasses$4(ownerState);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const theme = useTheme();
+    if (theme.shadows[elevation] === undefined) {
+      console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
+    }
+  }
+  return /*#__PURE__*/jsx(PaperRoot, _extends({
+    as: component,
+    ownerState: ownerState,
+    className: clsx(classes.root, className),
+    ref: ref
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? Paper.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,
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 1
+   */
+  elevation: chainPropTypes(integerPropType, props => {
+    const {
+      elevation,
+      variant
+    } = props;
+    if (elevation > 0 && variant === 'outlined') {
+      return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
+    }
+    return null;
+  }),
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   * @default 'elevation'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])
+} : void 0;
+var Paper$1 = Paper;
+
+function getTypographyUtilityClass(slot) {
+  return generateUtilityClass('MuiTypography', slot);
+}
+generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
+
+const _excluded$3 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$3 = ownerState => {
+  const {
+    align,
+    gutterBottom,
+    noWrap,
+    paragraph,
+    variant,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, ownerState.align !== 'inherit' && `align${capitalize(align)}`, gutterBottom && 'gutterBottom', noWrap && 'noWrap', paragraph && 'paragraph']
+  };
+  return composeClasses(slots, getTypographyUtilityClass, classes);
+};
+const TypographyRoot = styled$1('span', {
+  name: 'MuiTypography',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  margin: 0
+}, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
+  textAlign: ownerState.align
+}, ownerState.noWrap && {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+}, ownerState.gutterBottom && {
+  marginBottom: '0.35em'
+}, ownerState.paragraph && {
+  marginBottom: 16
+}));
+const defaultVariantMapping = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle1: 'h6',
+  subtitle2: 'h6',
+  body1: 'p',
+  body2: 'p',
+  inherit: 'p'
+};
+
+// TODO v6: deprecate these color values in v5.x and remove the transformation in v6
+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 Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
+  const themeProps = useThemeProps({
+    props: inProps,
+    name: 'MuiTypography'
+  });
+  const color = transformDeprecatedColors(themeProps.color);
+  const props = extendSxProp(_extends({}, themeProps, {
+    color
+  }));
+  const {
+      align = 'inherit',
+      className,
+      component,
+      gutterBottom = false,
+      noWrap = false,
+      paragraph = false,
+      variant = 'body1',
+      variantMapping = defaultVariantMapping
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const ownerState = _extends({}, props, {
+    align,
+    color,
+    className,
+    component,
+    gutterBottom,
+    noWrap,
+    paragraph,
+    variant,
+    variantMapping
+  });
+  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
+  const classes = useUtilityClasses$3(ownerState);
+  return /*#__PURE__*/jsx(TypographyRoot, _extends({
+    as: Component,
+    ref: ref,
+    ownerState: ownerState,
+    className: clsx(classes.root, className)
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? Typography.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Set the text-align on the component.
+   * @default 'inherit'
+   */
+  align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),
+  /**
+   * 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`, the text will have a bottom margin.
+   * @default false
+   */
+  gutterBottom: PropTypes.bool,
+  /**
+   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+   *
+   * Note that text overflow can only happen with block or inline-block level elements
+   * (the element needs to have a width in order to overflow).
+   * @default false
+   */
+  noWrap: PropTypes.bool,
+  /**
+   * If `true`, the element will be a paragraph element.
+   * @default false
+   */
+  paragraph: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Applies the theme typography styles.
+   * @default 'body1'
+   */
+  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]),
+  /**
+   * The component maps the variant prop to a range of different HTML element types.
+   * For instance, subtitle1 to `<h6>`.
+   * If you wish to change that mapping, you can provide your own.
+   * Alternatively, you can use the `component` prop.
+   * @default {
+   *   h1: 'h1',
+   *   h2: 'h2',
+   *   h3: 'h3',
+   *   h4: 'h4',
+   *   h5: 'h5',
+   *   h6: 'h6',
+   *   subtitle1: 'h6',
+   *   subtitle2: 'h6',
+   *   body1: 'p',
+   *   body2: 'p',
+   *   inherit: 'p',
+   * }
+   */
+  variantMapping: PropTypes /* @typescript-to-proptypes-ignore */.object
+} : void 0;
+var Typography$1 = Typography;
+
+function getCardUtilityClass(slot) {
+  return generateUtilityClass('MuiCard', slot);
+}
+generateUtilityClasses('MuiCard', ['root']);
+
+const _excluded$2 = ["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 Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiCard'
+  });
+  const {
+      className,
+      raised = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+  const ownerState = _extends({}, props, {
+    raised
+  });
+  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,
+  /**
+   * @ignore
+   */
+  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 Card$1 = Card;
+
+function getCardContentUtilityClass(slot) {
+  return generateUtilityClass('MuiCardContent', slot);
+}
+generateUtilityClasses('MuiCardContent', ['root']);
+
+const _excluded$1 = ["className", "component"];
+const useUtilityClasses$1 = 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
+    }
+  };
+});
+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$1);
+  const ownerState = _extends({}, props, {
+    component
+  });
+  const classes = useUtilityClasses$1(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;
+
+function getCardMediaUtilityClass(slot) {
+  return generateUtilityClass('MuiCardMedia', slot);
+}
+generateUtilityClasses('MuiCardMedia', ['root', 'media', 'img']);
+
+const _excluded = ["children", "className", "component", "image", "src", "style"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    isMediaComponent,
+    isImageComponent
+  } = ownerState;
+  const slots = {
+    root: ['root', isMediaComponent && 'media', isImageComponent && 'img']
+  };
+  return composeClasses(slots, getCardMediaUtilityClass, classes);
+};
+const CardMediaRoot = styled$1('div', {
+  name: 'MuiCardMedia',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      isMediaComponent,
+      isImageComponent
+    } = ownerState;
+    return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img];
+  }
+})(({
+  ownerState
+}) => _extends({
+  display: 'block',
+  backgroundSize: 'cover',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center'
+}, ownerState.isMediaComponent && {
+  width: '100%'
+}, ownerState.isImageComponent && {
+  // ⚠️ object-fit is not supported by IE11.
+  objectFit: 'cover'
+}));
+const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
+const IMAGE_COMPONENTS = ['picture', 'img'];
+const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiCardMedia'
+  });
+  const {
+      children,
+      className,
+      component = 'div',
+      image,
+      src,
+      style
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
+  const composedStyle = !isMediaComponent && image ? _extends({
+    backgroundImage: `url("${image}")`
+  }, style) : style;
+  const ownerState = _extends({}, props, {
+    component,
+    isMediaComponent,
+    isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/jsx(CardMediaRoot, _extends({
+    className: clsx(classes.root, className),
+    as: component,
+    role: !isMediaComponent && image ? 'img' : undefined,
+    ref: ref,
+    style: composedStyle,
+    ownerState: ownerState,
+    src: isMediaComponent ? image || src : undefined
+  }, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? CardMedia.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: chainPropTypes(PropTypes.node, props => {
+    if (!props.children && !props.image && !props.src && !props.component) {
+      return new Error('MUI: Either `children`, `image`, `src` or `component` prop must be specified.');
+    }
+    return null;
+  }),
+  /**
+   * 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,
+  /**
+   * Image to be displayed as a background image.
+   * Either `image` or `src` prop must be specified.
+   * Note that caller must specify height otherwise the image will not be visible.
+   */
+  image: PropTypes.string,
+  /**
+   * An alias for `image` property.
+   * Available only with media components.
+   * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
+   */
+  src: PropTypes.string,
+  /**
+   * @ignore
+   */
+  style: 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])
+} : void 0;
+var CardMedia$1 = CardMedia;
+
+const Stack = createStack({
+  createStyledComponent: styled$1('div', {
+    name: 'MuiStack',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  useThemeProps: inProps => useThemeProps({
+    props: inProps,
+    name: 'MuiStack'
+  })
+});
+process.env.NODE_ENV !== "production" ? Stack.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,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  /**
+   * Add an element between each child.
+   */
+  divider: PropTypes.node,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * The system prop, which 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]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
+} : void 0;
+var Stack$1 = Stack;
+
 var UrlImage;
 (function (UrlImage) {
   UrlImage["error"] = "src/assets/images/error.svg";
@@ -8672,5 +9806,50 @@ var UrlImage;
   UrlImage["noresult"] = "src/assets/images/noresult.svg";
   UrlImage["create"] = "src/assets/images/create.svg";
 })(UrlImage || (UrlImage = {}));
+const EmptyState = ({
+  state: _state = 'create',
+  title,
+  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(CardMedia$1, {
+        component: "img",
+        src: UrlImage[_state],
+        sx: {
+          width: 206,
+          height: 187
+        }
+      }), 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
+        })]
+      })]
+    })
+  });
+};
 
-export { SincoTheme, UrlImage };
+export { EmptyState, SincoTheme, UrlImage };