@sinco/react 1.0.3 → 1.0.4-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js CHANGED
@@ -337,10 +337,10 @@ var store$2 = sharedStore;
337
337
  (shared$3.exports = function (key, value) {
338
338
  return store$2[key] || (store$2[key] = value !== undefined ? value : {});
339
339
  })('versions', []).push({
340
- version: '3.31.1',
340
+ version: '3.30.2',
341
341
  mode: 'global',
342
342
  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
343
- license: 'https://github.com/zloirock/core-js/blob/v3.31.1/LICENSE',
343
+ license: 'https://github.com/zloirock/core-js/blob/v3.30.2/LICENSE',
344
344
  source: 'https://github.com/zloirock/core-js'
345
345
  });
346
346
 
@@ -1097,21 +1097,6 @@ function chainPropTypes(propType1, propType2) {
1097
1097
  };
1098
1098
  }
1099
1099
 
1100
- function _extends$4() {
1101
- _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
1102
- for (var i = 1; i < arguments.length; i++) {
1103
- var source = arguments[i];
1104
- for (var key in source) {
1105
- if (Object.prototype.hasOwnProperty.call(source, key)) {
1106
- target[key] = source[key];
1107
- }
1108
- }
1109
- }
1110
- return target;
1111
- };
1112
- return _extends$4.apply(this, arguments);
1113
- }
1114
-
1115
1100
  function isPlainObject(item) {
1116
1101
  return item !== null && typeof item === 'object' && item.constructor === Object;
1117
1102
  }
@@ -1128,7 +1113,9 @@ function deepClone(source) {
1128
1113
  function deepmerge(target, source, options = {
1129
1114
  clone: true
1130
1115
  }) {
1131
- const output = options.clone ? _extends$4({}, target) : target;
1116
+ const output = options.clone ? {
1117
+ ...target
1118
+ } : target;
1132
1119
  if (isPlainObject(target) && isPlainObject(source)) {
1133
1120
  Object.keys(source).forEach(key => {
1134
1121
  // Avoid prototype pollution
@@ -2300,7 +2287,8 @@ function exactProp(propTypes) {
2300
2287
  if (process.env.NODE_ENV === 'production') {
2301
2288
  return propTypes;
2302
2289
  }
2303
- return _extends$4({}, propTypes, {
2290
+ return {
2291
+ ...propTypes,
2304
2292
  [specialProperty]: props => {
2305
2293
  const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
2306
2294
  if (unsupportedProps.length > 0) {
@@ -2308,7 +2296,7 @@ function exactProp(propTypes) {
2308
2296
  }
2309
2297
  return null;
2310
2298
  }
2311
- });
2299
+ };
2312
2300
  }
2313
2301
 
2314
2302
  /**
@@ -2664,7 +2652,6 @@ var useEnhancedEffect$1 = useEnhancedEffect;
2664
2652
  /**
2665
2653
  * https://github.com/facebook/react/issues/14099#issuecomment-440013892
2666
2654
  */
2667
-
2668
2655
  function useEventCallback(fn) {
2669
2656
  const ref = React.useRef(fn);
2670
2657
  useEnhancedEffect$1(() => {
@@ -2695,6 +2682,7 @@ function useForkRef(...refs) {
2695
2682
  }, refs);
2696
2683
  }
2697
2684
 
2685
+ // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
2698
2686
  let hadKeyboardEvent = true;
2699
2687
  let hadFocusVisibleRecently = false;
2700
2688
  let hadFocusVisibleRecentlyTimeout;
@@ -2855,10 +2843,15 @@ function useIsFocusVisible() {
2855
2843
  * @returns {object} resolved props
2856
2844
  */
2857
2845
  function resolveProps(defaultProps, props) {
2858
- const output = _extends$4({}, props);
2846
+ const output = {
2847
+ ...props
2848
+ };
2859
2849
  Object.keys(defaultProps).forEach(propName => {
2860
2850
  if (propName.toString().match(/^(components|slots)$/)) {
2861
- output[propName] = _extends$4({}, defaultProps[propName], output[propName]);
2851
+ output[propName] = {
2852
+ ...defaultProps[propName],
2853
+ ...output[propName]
2854
+ };
2862
2855
  } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
2863
2856
  const defaultSlotProps = defaultProps[propName] || {};
2864
2857
  const slotProps = props[propName];
@@ -2870,7 +2863,9 @@ function resolveProps(defaultProps, props) {
2870
2863
  // Reduce the iteration if the default slot props is empty
2871
2864
  output[propName] = slotProps;
2872
2865
  } else {
2873
- output[propName] = _extends$4({}, slotProps);
2866
+ output[propName] = {
2867
+ ...slotProps
2868
+ };
2874
2869
  Object.keys(defaultSlotProps).forEach(slotPropName => {
2875
2870
  output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
2876
2871
  });
@@ -2950,8 +2945,8 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
2950
2945
 
2951
2946
  var THEME_ID = '$$material';
2952
2947
 
2953
- function _extends$3() {
2954
- _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
2948
+ function _extends() {
2949
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
2955
2950
  for (var i = 1; i < arguments.length; i++) {
2956
2951
  var source = arguments[i];
2957
2952
  for (var key in source) {
@@ -2962,10 +2957,10 @@ function _extends$3() {
2962
2957
  }
2963
2958
  return target;
2964
2959
  };
2965
- return _extends$3.apply(this, arguments);
2960
+ return _extends.apply(this, arguments);
2966
2961
  }
2967
2962
 
2968
- function _objectWithoutPropertiesLoose$2(source, excluded) {
2963
+ function _objectWithoutPropertiesLoose(source, excluded) {
2969
2964
  if (source == null) return {};
2970
2965
  var target = {};
2971
2966
  var sourceKeys = Object.keys(source);
@@ -2978,21 +2973,6 @@ function _objectWithoutPropertiesLoose$2(source, excluded) {
2978
2973
  return target;
2979
2974
  }
2980
2975
 
2981
- function _extends$2() {
2982
- _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
2983
- for (var i = 1; i < arguments.length; i++) {
2984
- var source = arguments[i];
2985
- for (var key in source) {
2986
- if (Object.prototype.hasOwnProperty.call(source, key)) {
2987
- target[key] = source[key];
2988
- }
2989
- }
2990
- }
2991
- return target;
2992
- };
2993
- return _extends$2.apply(this, arguments);
2994
- }
2995
-
2996
2976
  function memoize$1(fn) {
2997
2977
  var cache = Object.create(null);
2998
2978
  return function (arg) {
@@ -5867,7 +5847,7 @@ var createStyled$1 = function createStyled(tag, options) {
5867
5847
  });
5868
5848
 
5869
5849
  Styled.withComponent = function (nextTag, nextOptions) {
5870
- return createStyled(nextTag, _extends$2({}, options, nextOptions, {
5850
+ return createStyled(nextTag, _extends({}, options, nextOptions, {
5871
5851
  shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
5872
5852
  })).apply(void 0, styles);
5873
5853
  };
@@ -5917,34 +5897,6 @@ const internal_processStyles = (tag, processor) => {
5917
5897
  }
5918
5898
  };
5919
5899
 
5920
- function _extends$1() {
5921
- _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
5922
- for (var i = 1; i < arguments.length; i++) {
5923
- var source = arguments[i];
5924
- for (var key in source) {
5925
- if (Object.prototype.hasOwnProperty.call(source, key)) {
5926
- target[key] = source[key];
5927
- }
5928
- }
5929
- }
5930
- return target;
5931
- };
5932
- return _extends$1.apply(this, arguments);
5933
- }
5934
-
5935
- function _objectWithoutPropertiesLoose$1(source, excluded) {
5936
- if (source == null) return {};
5937
- var target = {};
5938
- var sourceKeys = Object.keys(source);
5939
- var key, i;
5940
- for (i = 0; i < sourceKeys.length; i++) {
5941
- key = sourceKeys[i];
5942
- if (excluded.indexOf(key) >= 0) continue;
5943
- target[key] = source[key];
5944
- }
5945
- return target;
5946
- }
5947
-
5948
5900
  const _excluded$j = ["values", "unit", "step"];
5949
5901
  const sortBreakpointsValues = values => {
5950
5902
  const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -5954,7 +5906,7 @@ const sortBreakpointsValues = values => {
5954
5906
  // Sort in ascending order
5955
5907
  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
5956
5908
  return breakpointsAsArray.reduce((acc, obj) => {
5957
- return _extends$1({}, acc, {
5909
+ return _extends({}, acc, {
5958
5910
  [obj.key]: obj.val
5959
5911
  });
5960
5912
  }, {});
@@ -5980,7 +5932,7 @@ function createBreakpoints(breakpoints) {
5980
5932
  unit = 'px',
5981
5933
  step = 5
5982
5934
  } = breakpoints,
5983
- other = _objectWithoutPropertiesLoose$1(breakpoints, _excluded$j);
5935
+ other = _objectWithoutPropertiesLoose(breakpoints, _excluded$j);
5984
5936
  const sortedValues = sortBreakpointsValues(values);
5985
5937
  const keys = Object.keys(sortedValues);
5986
5938
  function up(key) {
@@ -6012,7 +5964,7 @@ function createBreakpoints(breakpoints) {
6012
5964
  }
6013
5965
  return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
6014
5966
  }
6015
- return _extends$1({
5967
+ return _extends({
6016
5968
  keys,
6017
5969
  values: sortedValues,
6018
5970
  up,
@@ -6620,8 +6572,8 @@ const width = style$2({
6620
6572
  const maxWidth = props => {
6621
6573
  if (props.maxWidth !== undefined && props.maxWidth !== null) {
6622
6574
  const styleFromPropValue = propValue => {
6623
- var _props$theme;
6624
- const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$2[propValue];
6575
+ var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
6576
+ const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values$2[propValue];
6625
6577
  return {
6626
6578
  maxWidth: breakpoint || sizingTransform(propValue)
6627
6579
  };
@@ -7072,7 +7024,7 @@ function createTheme$1(options = {}, ...args) {
7072
7024
  spacing: spacingInput,
7073
7025
  shape: shapeInput = {}
7074
7026
  } = options,
7075
- other = _objectWithoutPropertiesLoose$1(options, _excluded$i);
7027
+ other = _objectWithoutPropertiesLoose(options, _excluded$i);
7076
7028
  const breakpoints = createBreakpoints(breakpointsInput);
7077
7029
  const spacing = createSpacing(spacingInput);
7078
7030
  let muiTheme = deepmerge({
@@ -7080,14 +7032,14 @@ function createTheme$1(options = {}, ...args) {
7080
7032
  direction: 'ltr',
7081
7033
  components: {},
7082
7034
  // Inject component definitions.
7083
- palette: _extends$1({
7035
+ palette: _extends({
7084
7036
  mode: 'light'
7085
7037
  }, paletteInput),
7086
7038
  spacing,
7087
- shape: _extends$1({}, shape$1, shapeInput)
7039
+ shape: _extends({}, shape$1, shapeInput)
7088
7040
  }, other);
7089
7041
  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
7090
- muiTheme.unstable_sxConfig = _extends$1({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
7042
+ muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
7091
7043
  muiTheme.unstable_sx = function sx(props) {
7092
7044
  return styleFunctionSx$1({
7093
7045
  sx: props,
@@ -7117,7 +7069,7 @@ const splitProps = props => {
7117
7069
  systemProps: {},
7118
7070
  otherProps: {}
7119
7071
  };
7120
- const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
7072
+ 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;
7121
7073
  Object.keys(props).forEach(prop => {
7122
7074
  if (config[prop]) {
7123
7075
  result.systemProps[prop] = props[prop];
@@ -7131,7 +7083,7 @@ function extendSxProp(props) {
7131
7083
  const {
7132
7084
  sx: inSx
7133
7085
  } = props,
7134
- other = _objectWithoutPropertiesLoose$1(props, _excluded$h);
7086
+ other = _objectWithoutPropertiesLoose(props, _excluded$h);
7135
7087
  const {
7136
7088
  systemProps,
7137
7089
  otherProps
@@ -7145,12 +7097,12 @@ function extendSxProp(props) {
7145
7097
  if (!isPlainObject(result)) {
7146
7098
  return systemProps;
7147
7099
  }
7148
- return _extends$1({}, systemProps, result);
7100
+ return _extends({}, systemProps, result);
7149
7101
  };
7150
7102
  } else {
7151
- finalSx = _extends$1({}, systemProps, inSx);
7103
+ finalSx = _extends({}, systemProps, inSx);
7152
7104
  }
7153
- return _extends$1({}, otherProps, {
7105
+ return _extends({}, otherProps, {
7154
7106
  sx: finalSx
7155
7107
  });
7156
7108
  }
@@ -7175,8 +7127,8 @@ function createBox(options = {}) {
7175
7127
  className,
7176
7128
  component = 'div'
7177
7129
  } = _extendSxProp,
7178
- other = _objectWithoutPropertiesLoose$1(_extendSxProp, _excluded$g);
7179
- return /*#__PURE__*/jsx(BoxRoot, _extends$1({
7130
+ other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$g);
7131
+ return /*#__PURE__*/jsx(BoxRoot, _extends({
7180
7132
  as: component,
7181
7133
  ref: ref,
7182
7134
  className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
@@ -7200,7 +7152,7 @@ function propsToClassKey(props) {
7200
7152
  const {
7201
7153
  variant
7202
7154
  } = props,
7203
- other = _objectWithoutPropertiesLoose$1(props, _excluded$f);
7155
+ other = _objectWithoutPropertiesLoose(props, _excluded$f);
7204
7156
  let classKey = variant || '';
7205
7157
  Object.keys(other).sort().forEach(key => {
7206
7158
  if (key === 'color') {
@@ -7244,12 +7196,12 @@ const getVariantStyles = (name, theme) => {
7244
7196
  return variantsStyles;
7245
7197
  };
7246
7198
  const variantsResolver = (props, styles, theme, name) => {
7247
- var _theme$components;
7199
+ var _theme$components, _theme$components$nam;
7248
7200
  const {
7249
7201
  ownerState = {}
7250
7202
  } = props;
7251
7203
  const variantsStyles = [];
7252
- const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
7204
+ const themeVariants = theme == null ? void 0 : (_theme$components = theme.components) == null ? void 0 : (_theme$components$nam = _theme$components[name]) == null ? void 0 : _theme$components$nam.variants;
7253
7205
  if (themeVariants) {
7254
7206
  themeVariants.forEach(themeVariant => {
7255
7207
  let isMatch = true;
@@ -7289,8 +7241,8 @@ function createStyled(input = {}) {
7289
7241
  slotShouldForwardProp = shouldForwardProp
7290
7242
  } = input;
7291
7243
  const systemSx = props => {
7292
- return styleFunctionSx$1(_extends$1({}, props, {
7293
- theme: resolveTheme(_extends$1({}, props, {
7244
+ return styleFunctionSx$1(_extends({}, props, {
7245
+ theme: resolveTheme(_extends({}, props, {
7294
7246
  defaultTheme,
7295
7247
  themeId
7296
7248
  }))
@@ -7307,7 +7259,7 @@ function createStyled(input = {}) {
7307
7259
  skipSx: inputSkipSx,
7308
7260
  overridesResolver
7309
7261
  } = inputOptions,
7310
- options = _objectWithoutPropertiesLoose$1(inputOptions, _excluded$e);
7262
+ options = _objectWithoutPropertiesLoose(inputOptions, _excluded$e);
7311
7263
 
7312
7264
  // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
7313
7265
  const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -7328,7 +7280,7 @@ function createStyled(input = {}) {
7328
7280
  // for string (html) tag, preserve the behavior in emotion & styled-components.
7329
7281
  shouldForwardPropOption = undefined;
7330
7282
  }
7331
- const defaultStyledResolver = styled$3(tag, _extends$1({
7283
+ const defaultStyledResolver = styled$3(tag, _extends({
7332
7284
  shouldForwardProp: shouldForwardPropOption,
7333
7285
  label
7334
7286
  }, options));
@@ -7338,8 +7290,8 @@ function createStyled(input = {}) {
7338
7290
  // component stays as a function. This condition makes sure that we do not interpolate functions
7339
7291
  // which are basically components used as a selectors.
7340
7292
  return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
7341
- return stylesArg(_extends$1({}, props, {
7342
- theme: resolveTheme(_extends$1({}, props, {
7293
+ return stylesArg(_extends({}, props, {
7294
+ theme: resolveTheme(_extends({}, props, {
7343
7295
  defaultTheme,
7344
7296
  themeId
7345
7297
  }))
@@ -7349,7 +7301,7 @@ function createStyled(input = {}) {
7349
7301
  let transformedStyleArg = styleArg;
7350
7302
  if (componentName && overridesResolver) {
7351
7303
  expressionsWithDefaultTheme.push(props => {
7352
- const theme = resolveTheme(_extends$1({}, props, {
7304
+ const theme = resolveTheme(_extends({}, props, {
7353
7305
  defaultTheme,
7354
7306
  themeId
7355
7307
  }));
@@ -7357,7 +7309,7 @@ function createStyled(input = {}) {
7357
7309
  if (styleOverrides) {
7358
7310
  const resolvedStyleOverrides = {};
7359
7311
  Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
7360
- resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$1({}, props, {
7312
+ resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
7361
7313
  theme
7362
7314
  })) : slotStyle;
7363
7315
  });
@@ -7368,7 +7320,7 @@ function createStyled(input = {}) {
7368
7320
  }
7369
7321
  if (componentName && !skipVariantsResolver) {
7370
7322
  expressionsWithDefaultTheme.push(props => {
7371
- const theme = resolveTheme(_extends$1({}, props, {
7323
+ const theme = resolveTheme(_extends({}, props, {
7372
7324
  defaultTheme,
7373
7325
  themeId
7374
7326
  }));
@@ -7390,8 +7342,8 @@ function createStyled(input = {}) {
7390
7342
  // which are basically components used as a selectors.
7391
7343
  styleArg.__emotion_real !== styleArg) {
7392
7344
  // If the type is function, we need to define the default theme.
7393
- transformedStyleArg = props => styleArg(_extends$1({}, props, {
7394
- theme: resolveTheme(_extends$1({}, props, {
7345
+ transformedStyleArg = props => styleArg(_extends({}, props, {
7346
+ theme: resolveTheme(_extends({}, props, {
7395
7347
  defaultTheme,
7396
7348
  themeId
7397
7349
  }))
@@ -7687,21 +7639,6 @@ function lighten(color, coefficient) {
7687
7639
  return recomposeColor(color);
7688
7640
  }
7689
7641
 
7690
- function _extends() {
7691
- _extends = Object.assign ? Object.assign.bind() : function (target) {
7692
- for (var i = 1; i < arguments.length; i++) {
7693
- var source = arguments[i];
7694
- for (var key in source) {
7695
- if (Object.prototype.hasOwnProperty.call(source, key)) {
7696
- target[key] = source[key];
7697
- }
7698
- }
7699
- }
7700
- return target;
7701
- };
7702
- return _extends.apply(this, arguments);
7703
- }
7704
-
7705
7642
  const ThemeContext = /*#__PURE__*/React.createContext(null);
7706
7643
  if (process.env.NODE_ENV !== 'production') {
7707
7644
  ThemeContext.displayName = 'ThemeContext';
@@ -7730,7 +7667,10 @@ function mergeOuterLocalTheme(outerTheme, localTheme) {
7730
7667
  }
7731
7668
  return mergedTheme;
7732
7669
  }
7733
- return _extends({}, outerTheme, localTheme);
7670
+ return {
7671
+ ...outerTheme,
7672
+ ...localTheme
7673
+ };
7734
7674
  }
7735
7675
 
7736
7676
  /**
@@ -7781,7 +7721,7 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
7781
7721
  const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
7782
7722
  if (typeof localTheme === 'function') {
7783
7723
  const mergedTheme = localTheme(resolvedTheme);
7784
- const result = themeId ? _extends$1({}, upperTheme, {
7724
+ const result = themeId ? _extends({}, upperTheme, {
7785
7725
  [themeId]: mergedTheme
7786
7726
  }) : mergedTheme;
7787
7727
  // must return a function for the private theme to NOT merge with the upper theme.
@@ -7791,9 +7731,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
7791
7731
  }
7792
7732
  return result;
7793
7733
  }
7794
- return themeId ? _extends$1({}, upperTheme, {
7734
+ return themeId ? _extends({}, upperTheme, {
7795
7735
  [themeId]: localTheme
7796
- }) : _extends$1({}, upperTheme, localTheme);
7736
+ }) : _extends({}, upperTheme, localTheme);
7797
7737
  }, [themeId, upperTheme, localTheme, isPrivate]);
7798
7738
  }
7799
7739
 
@@ -7896,7 +7836,7 @@ const style = ({
7896
7836
  ownerState,
7897
7837
  theme
7898
7838
  }) => {
7899
- let styles = _extends$1({
7839
+ let styles = _extends({
7900
7840
  display: 'flex',
7901
7841
  flexDirection: 'column'
7902
7842
  }, handleBreakpoints({
@@ -7939,7 +7879,7 @@ const style = ({
7939
7879
  };
7940
7880
  }
7941
7881
  return {
7942
- '& > :not(style) ~ :not(style)': {
7882
+ '& > :not(style) + :not(style)': {
7943
7883
  margin: 0,
7944
7884
  [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
7945
7885
  }
@@ -7978,14 +7918,14 @@ function createStack(options = {}) {
7978
7918
  className,
7979
7919
  useFlexGap = false
7980
7920
  } = props,
7981
- other = _objectWithoutPropertiesLoose$1(props, _excluded$d);
7921
+ other = _objectWithoutPropertiesLoose(props, _excluded$d);
7982
7922
  const ownerState = {
7983
7923
  direction,
7984
7924
  spacing,
7985
7925
  useFlexGap
7986
7926
  };
7987
7927
  const classes = useUtilityClasses();
7988
- return /*#__PURE__*/jsx(StackRoot, _extends$1({
7928
+ return /*#__PURE__*/jsx(StackRoot, _extends({
7989
7929
  as: component,
7990
7930
  ownerState: ownerState,
7991
7931
  ref: ref,
@@ -8005,7 +7945,7 @@ function createStack(options = {}) {
8005
7945
  }
8006
7946
 
8007
7947
  function createMixins(breakpoints, mixins) {
8008
- return _extends$3({
7948
+ return _extends({
8009
7949
  toolbar: {
8010
7950
  minHeight: 56,
8011
7951
  [breakpoints.up('xs')]: {
@@ -8321,7 +8261,7 @@ function createPalette(palette) {
8321
8261
  contrastThreshold = 3,
8322
8262
  tonalOffset = 0.2
8323
8263
  } = palette,
8324
- other = _objectWithoutPropertiesLoose$2(palette, _excluded$c);
8264
+ other = _objectWithoutPropertiesLoose(palette, _excluded$c);
8325
8265
  const primary = palette.primary || getDefaultPrimary(mode);
8326
8266
  const secondary = palette.secondary || getDefaultSecondary(mode);
8327
8267
  const error = palette.error || getDefaultError(mode);
@@ -8349,7 +8289,7 @@ function createPalette(palette) {
8349
8289
  lightShade = 300,
8350
8290
  darkShade = 700
8351
8291
  }) => {
8352
- color = _extends$3({}, color);
8292
+ color = _extends({}, color);
8353
8293
  if (!color.main && color[mainShade]) {
8354
8294
  color.main = color[mainShade];
8355
8295
  }
@@ -8389,9 +8329,9 @@ const theme2 = createTheme({ palette: {
8389
8329
  console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
8390
8330
  }
8391
8331
  }
8392
- const paletteOutput = deepmerge(_extends$3({
8332
+ const paletteOutput = deepmerge(_extends({
8393
8333
  // A collection of common colors.
8394
- common: _extends$3({}, common$1),
8334
+ common: _extends({}, common$1),
8395
8335
  // prevent mutable object.
8396
8336
  // The palette mode, can be light or dark.
8397
8337
  mode,
@@ -8476,7 +8416,7 @@ function createTypography(palette, typography) {
8476
8416
  allVariants,
8477
8417
  pxToRem: pxToRem2
8478
8418
  } = _ref,
8479
- other = _objectWithoutPropertiesLoose$2(_ref, _excluded$b);
8419
+ other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
8480
8420
  if (process.env.NODE_ENV !== 'production') {
8481
8421
  if (typeof fontSize !== 'number') {
8482
8422
  console.error('MUI: `fontSize` is required to be a number.');
@@ -8487,7 +8427,7 @@ function createTypography(palette, typography) {
8487
8427
  }
8488
8428
  const coef = fontSize / 14;
8489
8429
  const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
8490
- const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$3({
8430
+ const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends({
8491
8431
  fontFamily,
8492
8432
  fontWeight,
8493
8433
  fontSize: pxToRem(size),
@@ -8518,7 +8458,7 @@ function createTypography(palette, typography) {
8518
8458
  letterSpacing: 'inherit'
8519
8459
  }
8520
8460
  };
8521
- return deepmerge(_extends$3({
8461
+ return deepmerge(_extends({
8522
8462
  htmlFontSize,
8523
8463
  pxToRem,
8524
8464
  fontFamily,
@@ -8586,15 +8526,15 @@ function getAutoHeightDuration(height) {
8586
8526
  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
8587
8527
  }
8588
8528
  function createTransitions(inputTransitions) {
8589
- const mergedEasing = _extends$3({}, easing, inputTransitions.easing);
8590
- const mergedDuration = _extends$3({}, duration, inputTransitions.duration);
8529
+ const mergedEasing = _extends({}, easing, inputTransitions.easing);
8530
+ const mergedDuration = _extends({}, duration, inputTransitions.duration);
8591
8531
  const create = (props = ['all'], options = {}) => {
8592
8532
  const {
8593
8533
  duration: durationOption = mergedDuration.standard,
8594
8534
  easing: easingOption = mergedEasing.easeInOut,
8595
8535
  delay = 0
8596
8536
  } = options,
8597
- other = _objectWithoutPropertiesLoose$2(options, _excluded$a);
8537
+ other = _objectWithoutPropertiesLoose(options, _excluded$a);
8598
8538
  if (process.env.NODE_ENV !== 'production') {
8599
8539
  const isString = value => typeof value === 'string';
8600
8540
  // IE11 support, replace with Number.isNaN
@@ -8612,16 +8552,13 @@ function createTransitions(inputTransitions) {
8612
8552
  if (!isNumber(delay) && !isString(delay)) {
8613
8553
  console.error('MUI: Argument "delay" must be a number or a string.');
8614
8554
  }
8615
- if (typeof options !== 'object') {
8616
- console.error(['MUI: Secong argument of transition.create must be an object.', "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join('\n'));
8617
- }
8618
8555
  if (Object.keys(other).length !== 0) {
8619
8556
  console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
8620
8557
  }
8621
8558
  }
8622
8559
  return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
8623
8560
  };
8624
- return _extends$3({
8561
+ return _extends({
8625
8562
  getAutoHeightDuration,
8626
8563
  create
8627
8564
  }, inputTransitions, {
@@ -8652,7 +8589,7 @@ function createTheme(options = {}, ...args) {
8652
8589
  transitions: transitionsInput = {},
8653
8590
  typography: typographyInput = {}
8654
8591
  } = options,
8655
- other = _objectWithoutPropertiesLoose$2(options, _excluded$9);
8592
+ other = _objectWithoutPropertiesLoose(options, _excluded$9);
8656
8593
  if (options.vars) {
8657
8594
  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
8658
8595
  Please use another name.` : formatMuiErrorMessage(18));
@@ -8666,7 +8603,7 @@ Please use another name.` : formatMuiErrorMessage(18));
8666
8603
  shadows: shadows$1.slice(),
8667
8604
  typography: createTypography(palette, typographyInput),
8668
8605
  transitions: createTransitions(transitionsInput),
8669
- zIndex: _extends$3({}, zIndex$1)
8606
+ zIndex: _extends({}, zIndex$1)
8670
8607
  });
8671
8608
  muiTheme = deepmerge(muiTheme, other);
8672
8609
  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
@@ -8700,7 +8637,7 @@ Please use another name.` : formatMuiErrorMessage(18));
8700
8637
  }
8701
8638
  });
8702
8639
  }
8703
- muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
8640
+ muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
8704
8641
  muiTheme.unstable_sx = function sx(props) {
8705
8642
  return styleFunctionSx$1({
8706
8643
  sx: props,
@@ -8747,9 +8684,9 @@ function ThemeProvider(_ref) {
8747
8684
  let {
8748
8685
  theme: themeInput
8749
8686
  } = _ref,
8750
- props = _objectWithoutPropertiesLoose$2(_ref, _excluded$8);
8687
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
8751
8688
  const scopedTheme = themeInput[THEME_ID];
8752
- return /*#__PURE__*/jsx(ThemeProvider$1, _extends$3({}, props, {
8689
+ return /*#__PURE__*/jsx(ThemeProvider$1, _extends({}, props, {
8753
8690
  themeId: scopedTheme ? THEME_ID : undefined,
8754
8691
  theme: scopedTheme || themeInput
8755
8692
  }));
@@ -8795,29 +8732,27 @@ const SvgIconRoot = styled$1('svg', {
8795
8732
  theme,
8796
8733
  ownerState
8797
8734
  }) => {
8798
- var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
8735
+ var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
8799
8736
  return {
8800
8737
  userSelect: 'none',
8801
8738
  width: '1em',
8802
8739
  height: '1em',
8803
8740
  display: 'inline-block',
8804
- // the <svg> will define the property that has `currentColor`
8805
- // e.g. heroicons uses fill="none" and stroke="currentColor"
8806
- fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
8741
+ fill: 'currentColor',
8807
8742
  flexShrink: 0,
8808
- transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
8809
- duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
8743
+ transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
8744
+ duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
8810
8745
  }),
8811
8746
  fontSize: {
8812
8747
  inherit: 'inherit',
8813
- small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
8814
- medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
8815
- large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
8748
+ small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
8749
+ medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
8750
+ large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
8816
8751
  }[ownerState.fontSize],
8817
8752
  // TODO v5 deprecate, v6 remove for sx
8818
- color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
8819
- action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
8820
- disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
8753
+ color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
8754
+ action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
8755
+ disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
8821
8756
  inherit: undefined
8822
8757
  }[ownerState.color]
8823
8758
  };
@@ -8838,23 +8773,21 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
8838
8773
  titleAccess,
8839
8774
  viewBox = '0 0 24 24'
8840
8775
  } = props,
8841
- other = _objectWithoutPropertiesLoose$2(props, _excluded$7);
8842
- const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
8843
- const ownerState = _extends$3({}, props, {
8776
+ other = _objectWithoutPropertiesLoose(props, _excluded$7);
8777
+ const ownerState = _extends({}, props, {
8844
8778
  color,
8845
8779
  component,
8846
8780
  fontSize,
8847
8781
  instanceFontSize: inProps.fontSize,
8848
8782
  inheritViewBox,
8849
- viewBox,
8850
- hasSvgAsChild
8783
+ viewBox
8851
8784
  });
8852
8785
  const more = {};
8853
8786
  if (!inheritViewBox) {
8854
8787
  more.viewBox = viewBox;
8855
8788
  }
8856
8789
  const classes = useUtilityClasses$6(ownerState);
8857
- return /*#__PURE__*/jsxs(SvgIconRoot, _extends$3({
8790
+ return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
8858
8791
  as: component,
8859
8792
  className: clsx(classes.root, className),
8860
8793
  focusable: "false",
@@ -8862,9 +8795,9 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
8862
8795
  "aria-hidden": titleAccess ? undefined : true,
8863
8796
  role: titleAccess ? 'img' : undefined,
8864
8797
  ref: ref
8865
- }, more, other, hasSvgAsChild && children.props, {
8798
+ }, more, other, {
8866
8799
  ownerState: ownerState,
8867
- children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/jsx("title", {
8800
+ children: [children, titleAccess ? /*#__PURE__*/jsx("title", {
8868
8801
  children: titleAccess
8869
8802
  }) : null]
8870
8803
  }));
@@ -8946,7 +8879,7 @@ var SvgIcon$1 = SvgIcon;
8946
8879
 
8947
8880
  function createSvgIcon(path, displayName) {
8948
8881
  function Component(props, ref) {
8949
- return /*#__PURE__*/jsx(SvgIcon$1, _extends$3({
8882
+ return /*#__PURE__*/jsx(SvgIcon$1, _extends({
8950
8883
  "data-testid": `${displayName}Icon`,
8951
8884
  ref: ref
8952
8885
  }, props, {
@@ -9154,25 +9087,39 @@ const components = {
9154
9087
  }
9155
9088
  },
9156
9089
  MuiButton: {
9157
- defaultProps: {
9158
- size: 'medium'
9159
- },
9160
9090
  styleOverrides: {
9161
- fullWidth: {
9162
- width: '100%'
9091
+ endIcon: {
9092
+ marginLeft: 2
9093
+ },
9094
+ iconSizeSmall: {
9095
+ height: 14,
9096
+ width: 14
9097
+ },
9098
+ iconSizeMedium: {
9099
+ height: 15,
9100
+ width: 18
9101
+ },
9102
+ iconSizeLarge: {
9103
+ height: 17,
9104
+ width: 22
9163
9105
  },
9164
9106
  sizeSmall: {
9165
- padding: '4px 10px'
9107
+ padding: '6px 5px'
9166
9108
  },
9167
9109
  sizeMedium: {
9168
- padding: '7.5px 15px'
9110
+ padding: '8.5px 8px',
9111
+ ".MuiSvgIcon-fontSizeMedium": {
9112
+ height: 18,
9113
+ width: 18
9114
+ }
9169
9115
  },
9170
9116
  sizeLarge: {
9171
- padding: '10.5px 22px',
9172
- fontSize: 14
9173
- },
9174
- root: {
9175
- width: "fit-content"
9117
+ padding: '10.5px 11px',
9118
+ fontSize: 14,
9119
+ ".MuiSvgIcon-fontSizeLarge": {
9120
+ height: 20,
9121
+ width: 20
9122
+ }
9176
9123
  }
9177
9124
  }
9178
9125
  },
@@ -9281,7 +9228,7 @@ const components = {
9281
9228
  styleOverrides: {
9282
9229
  sizeSmall: {
9283
9230
  fontSize: 14,
9284
- padding: 2
9231
+ padding: 4
9285
9232
  },
9286
9233
  sizeMedium: {
9287
9234
  fontSize: 20,
@@ -9538,48 +9485,69 @@ const typography = {
9538
9485
  fontSize: 14,
9539
9486
  fontWeight: 400,
9540
9487
  letterSpacing: 0.15,
9541
- lineHeight: 1.4
9488
+ lineHeight: 1.4,
9489
+ '@media(max-width: 885px)': {
9490
+ fontSize: 15
9491
+ }
9542
9492
  },
9543
9493
  body2: {
9544
9494
  fontFamily: 'Roboto',
9545
9495
  fontSize: 13,
9546
9496
  fontWeight: 400,
9547
9497
  letterSpacing: 0.17,
9548
- lineHeight: 1.2
9498
+ lineHeight: 1.2,
9499
+ '@media(max-width: 885px)': {
9500
+ fontSize: 14
9501
+ }
9549
9502
  },
9550
9503
  subtitle1: {
9551
9504
  fontFamily: 'Roboto',
9552
9505
  fontSize: 14,
9553
9506
  fontWeight: 500,
9554
9507
  letterSpacing: 0.15,
9555
- lineHeight: 1.4
9508
+ lineHeight: 1.4,
9509
+ '@media(max-width: 885px)': {
9510
+ fontSize: 15
9511
+ }
9556
9512
  },
9557
9513
  subtitle2: {
9558
9514
  fontFamily: 'Roboto',
9559
9515
  fontSize: 13,
9560
9516
  fontWeight: 500,
9561
9517
  letterSpacing: 0.1,
9562
- lineHeight: 1.4
9518
+ lineHeight: 1.4,
9519
+ '@media(max-width: 885px)': {
9520
+ fontSize: 14
9521
+ }
9563
9522
  },
9564
9523
  caption: {
9565
9524
  fontFamily: 'Roboto',
9566
9525
  fontSize: 11,
9567
9526
  fontWeight: 400,
9568
9527
  letterSpacing: 0.4,
9569
- lineHeight: 1.4
9528
+ lineHeight: 1.4,
9529
+ '@media(max-width: 885px)': {
9530
+ fontSize: 12
9531
+ }
9570
9532
  },
9571
9533
  overline: {
9572
9534
  fontFamily: 'Roboto',
9573
9535
  fontSize: 11,
9574
9536
  fontWeight: 400,
9575
9537
  letterSpacing: 1,
9576
- lineHeight: 2.66
9538
+ lineHeight: 2.66,
9539
+ '@media(max-width: 885px)': {
9540
+ fontSize: 12
9541
+ }
9577
9542
  },
9578
9543
  h6: {
9579
9544
  fontFamily: 'Nunito',
9580
9545
  fontSize: 16,
9581
9546
  fontWeight: 600,
9582
- lineHeight: 1.6
9547
+ lineHeight: 1.6,
9548
+ '@media(max-width: 885px)': {
9549
+ fontSize: 17
9550
+ }
9583
9551
  },
9584
9552
  h5: {
9585
9553
  fontFamily: 'Nunito',
@@ -9619,7 +9587,10 @@ const typography = {
9619
9587
  textTransform: 'unset',
9620
9588
  fontWeightLight: 300,
9621
9589
  fontSize: 13,
9622
- lineHeight: 'normal'
9590
+ lineHeight: 'normal',
9591
+ '@media(max-width: 885px)': {
9592
+ fontSize: 14
9593
+ }
9623
9594
  }
9624
9595
  };
9625
9596
 
@@ -10170,19 +10141,6 @@ for (var COLLECTION_NAME in DOMIterables) {
10170
10141
 
10171
10142
  handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
10172
10143
 
10173
- function _objectWithoutPropertiesLoose(source, excluded) {
10174
- if (source == null) return {};
10175
- var target = {};
10176
- var sourceKeys = Object.keys(source);
10177
- var key, i;
10178
- for (i = 0; i < sourceKeys.length; i++) {
10179
- key = sourceKeys[i];
10180
- if (excluded.indexOf(key) >= 0) continue;
10181
- target[key] = source[key];
10182
- }
10183
- return target;
10184
- }
10185
-
10186
10144
  function _setPrototypeOf(o, p) {
10187
10145
  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
10188
10146
  o.__proto__ = p;
@@ -10430,7 +10388,7 @@ var TransitionGroup = /*#__PURE__*/function (_React$Component) {
10430
10388
 
10431
10389
  if (this.mounted) {
10432
10390
  this.setState(function (state) {
10433
- var children = _extends$2({}, state.children);
10391
+ var children = _extends({}, state.children);
10434
10392
 
10435
10393
  delete children[child.key];
10436
10394
  return {
@@ -10738,7 +10696,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
10738
10696
  classes = {},
10739
10697
  className
10740
10698
  } = props,
10741
- other = _objectWithoutPropertiesLoose$2(props, _excluded$6);
10699
+ other = _objectWithoutPropertiesLoose(props, _excluded$6);
10742
10700
  const [ripples, setRipples] = React.useState([]);
10743
10701
  const nextKey = React.useRef(0);
10744
10702
  const rippleCallback = React.useRef(null);
@@ -10753,16 +10711,14 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
10753
10711
  const ignoringMouseDown = React.useRef(false);
10754
10712
  // We use a timer in order to only show the ripples for touch "click" like events.
10755
10713
  // We don't want to display the ripple for touch scroll events.
10756
- const startTimer = React.useRef(0);
10714
+ const startTimer = React.useRef(null);
10757
10715
 
10758
10716
  // This is the hook called once the previous timeout is ready.
10759
10717
  const startTimerCommit = React.useRef(null);
10760
10718
  const container = React.useRef(null);
10761
10719
  React.useEffect(() => {
10762
10720
  return () => {
10763
- if (startTimer.current) {
10764
- clearTimeout(startTimer.current);
10765
- }
10721
+ clearTimeout(startTimer.current);
10766
10722
  };
10767
10723
  }, []);
10768
10724
  const startCommit = React.useCallback(params => {
@@ -10906,7 +10862,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
10906
10862
  start,
10907
10863
  stop
10908
10864
  }), [pulsate, start, stop]);
10909
- return /*#__PURE__*/jsx(TouchRippleRoot, _extends$3({
10865
+ return /*#__PURE__*/jsx(TouchRippleRoot, _extends({
10910
10866
  className: clsx(touchRippleClasses$1.root, classes.root, className),
10911
10867
  ref: container
10912
10868
  }, other, {
@@ -11043,7 +10999,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
11043
10999
  touchRippleRef,
11044
11000
  type
11045
11001
  } = props,
11046
- other = _objectWithoutPropertiesLoose$2(props, _excluded$5);
11002
+ other = _objectWithoutPropertiesLoose(props, _excluded$5);
11047
11003
  const buttonRef = React.useRef(null);
11048
11004
  const rippleRef = React.useRef(null);
11049
11005
  const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -11200,7 +11156,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
11200
11156
  }
11201
11157
  }, [enableTouchRipple]);
11202
11158
  }
11203
- const ownerState = _extends$3({}, props, {
11159
+ const ownerState = _extends({}, props, {
11204
11160
  centerRipple,
11205
11161
  component,
11206
11162
  disabled,
@@ -11211,7 +11167,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
11211
11167
  focusVisible
11212
11168
  });
11213
11169
  const classes = useUtilityClasses$5(ownerState);
11214
- return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends$3({
11170
+ return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
11215
11171
  as: ComponentProp,
11216
11172
  className: clsx(classes.root, className),
11217
11173
  ownerState: ownerState,
@@ -11235,7 +11191,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
11235
11191
  children: [children, enableTouchRipple ?
11236
11192
  /*#__PURE__*/
11237
11193
  /* TouchRipple is only needed client-side, x2 boost on the server. */
11238
- jsx(TouchRipple$1, _extends$3({
11194
+ jsx(TouchRipple$1, _extends({
11239
11195
  ref: handleRippleRef,
11240
11196
  center: centerRipple
11241
11197
  }, TouchRippleProps)) : null]
@@ -11433,7 +11389,7 @@ const IconButtonRoot = styled$1(ButtonBase$1, {
11433
11389
  })(({
11434
11390
  theme,
11435
11391
  ownerState
11436
- }) => _extends$3({
11392
+ }) => _extends({
11437
11393
  textAlign: 'center',
11438
11394
  flex: '0 0 auto',
11439
11395
  fontSize: theme.typography.pxToRem(24),
@@ -11463,12 +11419,12 @@ const IconButtonRoot = styled$1(ButtonBase$1, {
11463
11419
  }) => {
11464
11420
  var _palette;
11465
11421
  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
11466
- return _extends$3({}, ownerState.color === 'inherit' && {
11422
+ return _extends({}, ownerState.color === 'inherit' && {
11467
11423
  color: 'inherit'
11468
- }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends$3({
11424
+ }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
11469
11425
  color: palette == null ? void 0 : palette.main
11470
11426
  }, !ownerState.disableRipple && {
11471
- '&:hover': _extends$3({}, palette && {
11427
+ '&:hover': _extends({}, palette && {
11472
11428
  backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
11473
11429
  }, {
11474
11430
  // Reset on touch devices, it doesn't add specificity
@@ -11508,8 +11464,8 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
11508
11464
  disableFocusRipple = false,
11509
11465
  size = 'medium'
11510
11466
  } = props,
11511
- other = _objectWithoutPropertiesLoose$2(props, _excluded$4);
11512
- const ownerState = _extends$3({}, props, {
11467
+ other = _objectWithoutPropertiesLoose(props, _excluded$4);
11468
+ const ownerState = _extends({}, props, {
11513
11469
  edge,
11514
11470
  color,
11515
11471
  disabled,
@@ -11517,7 +11473,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
11517
11473
  size
11518
11474
  });
11519
11475
  const classes = useUtilityClasses$4(ownerState);
11520
- return /*#__PURE__*/jsx(IconButtonRoot, _extends$3({
11476
+ return /*#__PURE__*/jsx(IconButtonRoot, _extends({
11521
11477
  className: clsx(classes.root, className),
11522
11478
  centerRipple: true,
11523
11479
  focusRipple: !disableFocusRipple,
@@ -11629,7 +11585,7 @@ const TypographyRoot = styled$1('span', {
11629
11585
  })(({
11630
11586
  theme,
11631
11587
  ownerState
11632
- }) => _extends$3({
11588
+ }) => _extends({
11633
11589
  margin: 0
11634
11590
  }, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
11635
11591
  textAlign: ownerState.align
@@ -11673,7 +11629,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
11673
11629
  name: 'MuiTypography'
11674
11630
  });
11675
11631
  const color = transformDeprecatedColors(themeProps.color);
11676
- const props = extendSxProp(_extends$3({}, themeProps, {
11632
+ const props = extendSxProp(_extends({}, themeProps, {
11677
11633
  color
11678
11634
  }));
11679
11635
  const {
@@ -11686,8 +11642,8 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
11686
11642
  variant = 'body1',
11687
11643
  variantMapping = defaultVariantMapping
11688
11644
  } = props,
11689
- other = _objectWithoutPropertiesLoose$2(props, _excluded$3);
11690
- const ownerState = _extends$3({}, props, {
11645
+ other = _objectWithoutPropertiesLoose(props, _excluded$3);
11646
+ const ownerState = _extends({}, props, {
11691
11647
  align,
11692
11648
  color,
11693
11649
  className,
@@ -11700,7 +11656,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
11700
11656
  });
11701
11657
  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
11702
11658
  const classes = useUtilityClasses$3(ownerState);
11703
- return /*#__PURE__*/jsx(TypographyRoot, _extends$3({
11659
+ return /*#__PURE__*/jsx(TypographyRoot, _extends({
11704
11660
  as: Component,
11705
11661
  ref: ref,
11706
11662
  ownerState: ownerState,
@@ -11844,9 +11800,9 @@ const useUtilityClasses$2 = ownerState => {
11844
11800
  endIcon: ['endIcon', `iconSize${capitalize(size)}`]
11845
11801
  };
11846
11802
  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
11847
- return _extends$3({}, classes, composedClasses);
11803
+ return _extends({}, classes, composedClasses);
11848
11804
  };
11849
- const commonIconStyles = ownerState => _extends$3({}, ownerState.size === 'small' && {
11805
+ const commonIconStyles = ownerState => _extends({}, ownerState.size === 'small' && {
11850
11806
  '& > *:nth-of-type(1)': {
11851
11807
  fontSize: 18
11852
11808
  }
@@ -11876,14 +11832,14 @@ const ButtonRoot = styled$1(ButtonBase$1, {
11876
11832
  var _theme$palette$getCon, _theme$palette;
11877
11833
  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
11878
11834
  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
11879
- return _extends$3({}, theme.typography.button, {
11835
+ return _extends({}, theme.typography.button, {
11880
11836
  minWidth: 64,
11881
11837
  padding: '6px 16px',
11882
11838
  borderRadius: (theme.vars || theme).shape.borderRadius,
11883
11839
  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
11884
11840
  duration: theme.transitions.duration.short
11885
11841
  }),
11886
- '&:hover': _extends$3({
11842
+ '&:hover': _extends({
11887
11843
  textDecoration: 'none',
11888
11844
  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
11889
11845
  // Reset on touch devices, it doesn't add specificity
@@ -11918,13 +11874,13 @@ const ButtonRoot = styled$1(ButtonBase$1, {
11918
11874
  backgroundColor: (theme.vars || theme).palette[ownerState.color].main
11919
11875
  }
11920
11876
  }),
11921
- '&:active': _extends$3({}, ownerState.variant === 'contained' && {
11877
+ '&:active': _extends({}, ownerState.variant === 'contained' && {
11922
11878
  boxShadow: (theme.vars || theme).shadows[8]
11923
11879
  }),
11924
- [`&.${buttonClasses$1.focusVisible}`]: _extends$3({}, ownerState.variant === 'contained' && {
11880
+ [`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
11925
11881
  boxShadow: (theme.vars || theme).shadows[6]
11926
11882
  }),
11927
- [`&.${buttonClasses$1.disabled}`]: _extends$3({
11883
+ [`&.${buttonClasses$1.disabled}`]: _extends({
11928
11884
  color: (theme.vars || theme).palette.action.disabled
11929
11885
  }, ownerState.variant === 'outlined' && {
11930
11886
  border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
@@ -12004,7 +11960,7 @@ const ButtonStartIcon = styled$1('span', {
12004
11960
  }
12005
11961
  })(({
12006
11962
  ownerState
12007
- }) => _extends$3({
11963
+ }) => _extends({
12008
11964
  display: 'inherit',
12009
11965
  marginRight: 8,
12010
11966
  marginLeft: -4
@@ -12022,7 +11978,7 @@ const ButtonEndIcon = styled$1('span', {
12022
11978
  }
12023
11979
  })(({
12024
11980
  ownerState
12025
- }) => _extends$3({
11981
+ }) => _extends({
12026
11982
  display: 'inherit',
12027
11983
  marginRight: -4,
12028
11984
  marginLeft: 8
@@ -12053,8 +12009,8 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
12053
12009
  type,
12054
12010
  variant = 'text'
12055
12011
  } = props,
12056
- other = _objectWithoutPropertiesLoose$2(props, _excluded$2);
12057
- const ownerState = _extends$3({}, props, {
12012
+ other = _objectWithoutPropertiesLoose(props, _excluded$2);
12013
+ const ownerState = _extends({}, props, {
12058
12014
  color,
12059
12015
  component,
12060
12016
  disabled,
@@ -12076,7 +12032,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
12076
12032
  ownerState: ownerState,
12077
12033
  children: endIconProp
12078
12034
  });
12079
- return /*#__PURE__*/jsxs(ButtonRoot, _extends$3({
12035
+ return /*#__PURE__*/jsxs(ButtonRoot, _extends({
12080
12036
  ownerState: ownerState,
12081
12037
  className: clsx(contextProps.className, classes.root, className),
12082
12038
  component: component,
@@ -12118,7 +12074,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
12118
12074
  * The component used for the root node.
12119
12075
  * Either a string to use a HTML element or a component.
12120
12076
  */
12121
- component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
12077
+ component: PropTypes.elementType,
12122
12078
  /**
12123
12079
  * If `true`, the component is disabled.
12124
12080
  * @default false
@@ -12221,7 +12177,7 @@ const DividerRoot = styled$1('div', {
12221
12177
  })(({
12222
12178
  theme,
12223
12179
  ownerState
12224
- }) => _extends$3({
12180
+ }) => _extends({
12225
12181
  margin: 0,
12226
12182
  // Reset browser default style.
12227
12183
  flexShrink: 0,
@@ -12253,7 +12209,7 @@ const DividerRoot = styled$1('div', {
12253
12209
  height: 'auto'
12254
12210
  }), ({
12255
12211
  ownerState
12256
- }) => _extends$3({}, ownerState.children && {
12212
+ }) => _extends({}, ownerState.children && {
12257
12213
  display: 'flex',
12258
12214
  whiteSpace: 'nowrap',
12259
12215
  textAlign: 'center',
@@ -12265,7 +12221,7 @@ const DividerRoot = styled$1('div', {
12265
12221
  }), ({
12266
12222
  theme,
12267
12223
  ownerState
12268
- }) => _extends$3({}, ownerState.children && ownerState.orientation !== 'vertical' && {
12224
+ }) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
12269
12225
  '&::before, &::after': {
12270
12226
  width: '100%',
12271
12227
  borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
@@ -12273,7 +12229,7 @@ const DividerRoot = styled$1('div', {
12273
12229
  }), ({
12274
12230
  theme,
12275
12231
  ownerState
12276
- }) => _extends$3({}, ownerState.children && ownerState.orientation === 'vertical' && {
12232
+ }) => _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
12277
12233
  flexDirection: 'column',
12278
12234
  '&::before, &::after': {
12279
12235
  height: '100%',
@@ -12281,7 +12237,7 @@ const DividerRoot = styled$1('div', {
12281
12237
  }
12282
12238
  }), ({
12283
12239
  ownerState
12284
- }) => _extends$3({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
12240
+ }) => _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
12285
12241
  '&::before': {
12286
12242
  width: '90%'
12287
12243
  },
@@ -12308,7 +12264,7 @@ const DividerWrapper = styled$1('span', {
12308
12264
  })(({
12309
12265
  theme,
12310
12266
  ownerState
12311
- }) => _extends$3({
12267
+ }) => _extends({
12312
12268
  display: 'inline-block',
12313
12269
  paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
12314
12270
  paddingRight: `calc(${theme.spacing(1)} * 1.2)`
@@ -12333,8 +12289,8 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
12333
12289
  textAlign = 'center',
12334
12290
  variant = 'fullWidth'
12335
12291
  } = props,
12336
- other = _objectWithoutPropertiesLoose$2(props, _excluded$1);
12337
- const ownerState = _extends$3({}, props, {
12292
+ other = _objectWithoutPropertiesLoose(props, _excluded$1);
12293
+ const ownerState = _extends({}, props, {
12338
12294
  absolute,
12339
12295
  component,
12340
12296
  flexItem,
@@ -12345,7 +12301,7 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
12345
12301
  variant
12346
12302
  });
12347
12303
  const classes = useUtilityClasses$1(ownerState);
12348
- return /*#__PURE__*/jsx(DividerRoot, _extends$3({
12304
+ return /*#__PURE__*/jsx(DividerRoot, _extends({
12349
12305
  as: component,
12350
12306
  className: clsx(classes.root, className),
12351
12307
  role: role,
@@ -12423,63 +12379,6 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
12423
12379
  } : void 0;
12424
12380
  var Divider$1 = Divider;
12425
12381
 
12426
- const Stack = createStack({
12427
- createStyledComponent: styled$1('div', {
12428
- name: 'MuiStack',
12429
- slot: 'Root',
12430
- overridesResolver: (props, styles) => styles.root
12431
- }),
12432
- useThemeProps: inProps => useThemeProps({
12433
- props: inProps,
12434
- name: 'MuiStack'
12435
- })
12436
- });
12437
- process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
12438
- // ----------------------------- Warning --------------------------------
12439
- // | These PropTypes are generated from the TypeScript type definitions |
12440
- // | To update them edit the d.ts file and run "yarn proptypes" |
12441
- // ----------------------------------------------------------------------
12442
- /**
12443
- * The content of the component.
12444
- */
12445
- children: PropTypes.node,
12446
- /**
12447
- * The component used for the root node.
12448
- * Either a string to use a HTML element or a component.
12449
- */
12450
- component: PropTypes.elementType,
12451
- /**
12452
- * Defines the `flex-direction` style property.
12453
- * It is applied for all screen sizes.
12454
- * @default 'column'
12455
- */
12456
- direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
12457
- /**
12458
- * Add an element between each child.
12459
- */
12460
- divider: PropTypes.node,
12461
- /**
12462
- * Defines the space between immediate children.
12463
- * @default 0
12464
- */
12465
- spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
12466
- /**
12467
- * The system prop, which allows defining system overrides as well as additional CSS styles.
12468
- */
12469
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
12470
- /**
12471
- * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
12472
- *
12473
- * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
12474
- * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
12475
- *
12476
- * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
12477
- * @default false
12478
- */
12479
- useFlexGap: PropTypes.bool
12480
- } : void 0;
12481
- var Stack$1 = Stack;
12482
-
12483
12382
  function getLinearProgressUtilityClass(slot) {
12484
12383
  return generateUtilityClass('MuiLinearProgress', slot);
12485
12384
  }
@@ -12577,7 +12476,7 @@ const LinearProgressRoot = styled$1('span', {
12577
12476
  })(({
12578
12477
  ownerState,
12579
12478
  theme
12580
- }) => _extends$3({
12479
+ }) => _extends({
12581
12480
  position: 'relative',
12582
12481
  overflow: 'hidden',
12583
12482
  display: 'block',
@@ -12619,7 +12518,7 @@ const LinearProgressDashed = styled$1('span', {
12619
12518
  theme
12620
12519
  }) => {
12621
12520
  const backgroundColor = getColorShade(theme, ownerState.color);
12622
- return _extends$3({
12521
+ return _extends({
12623
12522
  position: 'absolute',
12624
12523
  marginTop: 0,
12625
12524
  height: '100%',
@@ -12646,7 +12545,7 @@ const LinearProgressBar1 = styled$1('span', {
12646
12545
  })(({
12647
12546
  ownerState,
12648
12547
  theme
12649
- }) => _extends$3({
12548
+ }) => _extends({
12650
12549
  width: '100%',
12651
12550
  position: 'absolute',
12652
12551
  left: 0,
@@ -12678,7 +12577,7 @@ const LinearProgressBar2 = styled$1('span', {
12678
12577
  })(({
12679
12578
  ownerState,
12680
12579
  theme
12681
- }) => _extends$3({
12580
+ }) => _extends({
12682
12581
  width: '100%',
12683
12582
  position: 'absolute',
12684
12583
  left: 0,
@@ -12719,8 +12618,8 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
12719
12618
  valueBuffer,
12720
12619
  variant = 'indeterminate'
12721
12620
  } = props,
12722
- other = _objectWithoutPropertiesLoose$2(props, _excluded);
12723
- const ownerState = _extends$3({}, props, {
12621
+ other = _objectWithoutPropertiesLoose(props, _excluded);
12622
+ const ownerState = _extends({}, props, {
12724
12623
  color,
12725
12624
  variant
12726
12625
  });
@@ -12756,7 +12655,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
12756
12655
  console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
12757
12656
  }
12758
12657
  }
12759
- return /*#__PURE__*/jsxs(LinearProgressRoot, _extends$3({
12658
+ return /*#__PURE__*/jsxs(LinearProgressRoot, _extends({
12760
12659
  className: clsx(classes.root, className),
12761
12660
  ownerState: ownerState,
12762
12661
  role: "progressbar"
@@ -12820,34 +12719,99 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-propt
12820
12719
  } : void 0;
12821
12720
  var LinearProgress$1 = LinearProgress;
12822
12721
 
12722
+ const Stack = createStack({
12723
+ createStyledComponent: styled$1('div', {
12724
+ name: 'MuiStack',
12725
+ slot: 'Root',
12726
+ overridesResolver: (props, styles) => styles.root
12727
+ }),
12728
+ useThemeProps: inProps => useThemeProps({
12729
+ props: inProps,
12730
+ name: 'MuiStack'
12731
+ })
12732
+ });
12733
+ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
12734
+ // ----------------------------- Warning --------------------------------
12735
+ // | These PropTypes are generated from the TypeScript type definitions |
12736
+ // | To update them edit the d.ts file and run "yarn proptypes" |
12737
+ // ----------------------------------------------------------------------
12738
+ /**
12739
+ * The content of the component.
12740
+ */
12741
+ children: PropTypes.node,
12742
+ /**
12743
+ * The component used for the root node.
12744
+ * Either a string to use a HTML element or a component.
12745
+ */
12746
+ component: PropTypes.elementType,
12747
+ /**
12748
+ * Defines the `flex-direction` style property.
12749
+ * It is applied for all screen sizes.
12750
+ * @default 'column'
12751
+ */
12752
+ direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
12753
+ /**
12754
+ * Add an element between each child.
12755
+ */
12756
+ divider: PropTypes.node,
12757
+ /**
12758
+ * Defines the space between immediate children.
12759
+ * @default 0
12760
+ */
12761
+ spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
12762
+ /**
12763
+ * The system prop, which allows defining system overrides as well as additional CSS styles.
12764
+ */
12765
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
12766
+ /**
12767
+ * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
12768
+ *
12769
+ * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
12770
+ * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
12771
+ *
12772
+ * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
12773
+ * @default false
12774
+ */
12775
+ useFlexGap: PropTypes.bool
12776
+ } : void 0;
12777
+ var Stack$1 = Stack;
12778
+
12823
12779
  const ToastContent = styled$1(Stack$1)(({
12824
12780
  theme
12825
12781
  }) => ({
12826
12782
  marginBottom: theme.spacing(2),
12827
- position: "relative",
12828
- top: 16,
12829
- left: "979px",
12830
12783
  zIndex: 9999,
12831
- 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)"
12784
+ 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)',
12785
+ '&.flex-end': {
12786
+ marginTop: 16,
12787
+ marginRight: 16
12788
+ },
12789
+ '&.center': {
12790
+ marginTop: 16
12791
+ },
12792
+ '&.flex-start': {
12793
+ marginLeft: 16,
12794
+ marginTop: 16
12795
+ }
12832
12796
  }));
12833
12797
  const ContentBox = styled$1(Box$1)(({
12834
12798
  theme
12835
12799
  }) => ({
12836
12800
  padding: theme.spacing(1.5),
12837
12801
  gap: theme.spacing(1.5),
12838
- display: "flex",
12839
- alignItems: "center",
12840
- "&.color-error": {
12841
- backgroundColor: "#feebee"
12802
+ display: 'flex',
12803
+ alignItems: 'center',
12804
+ '&.color-error': {
12805
+ backgroundColor: '#feebee'
12842
12806
  },
12843
- "&.color-info": {
12844
- backgroundColor: "#e1f5fe"
12807
+ '&.color-info': {
12808
+ backgroundColor: '#e1f5fe'
12845
12809
  },
12846
- "&.color-warning": {
12847
- backgroundColor: "#fff3e0"
12810
+ '&.color-warning': {
12811
+ backgroundColor: '#fff3e0'
12848
12812
  },
12849
- "&.color-success": {
12850
- backgroundColor: "#E8F5E9"
12813
+ '&.color-success': {
12814
+ backgroundColor: '#E8F5E9'
12851
12815
  }
12852
12816
  }));
12853
12817
  const RippleIcon = styled$1(Stack$1)(({
@@ -12857,31 +12821,31 @@ const RippleIcon = styled$1(Stack$1)(({
12857
12821
  gap: theme.spacing(1),
12858
12822
  height: 20,
12859
12823
  borderRadius: 50,
12860
- "&.ripple-error": {
12861
- backgroundColor: "#D143431F"
12824
+ '&.ripple-error': {
12825
+ backgroundColor: '#D143431F'
12862
12826
  },
12863
- "&.ripple-info": {
12864
- backgroundColor: "#2D9FC51F"
12827
+ '&.ripple-info': {
12828
+ backgroundColor: '#2D9FC51F'
12865
12829
  },
12866
- "&.ripple-warning": {
12867
- backgroundColor: "#FB85001F"
12830
+ '&.ripple-warning': {
12831
+ backgroundColor: '#FB85001F'
12868
12832
  },
12869
- "&.ripple-success": {
12870
- backgroundColor: "#8FC93A1F"
12833
+ '&.ripple-success': {
12834
+ backgroundColor: '#8FC93A1F'
12871
12835
  }
12872
12836
  }));
12873
12837
  const ContentIcon = styled$1(Stack$1)(() => ({
12874
- "&.icon-color.color-info": {
12875
- color: "#0097b9"
12838
+ '&.icon-color.color-info': {
12839
+ color: '#0097b9'
12876
12840
  },
12877
- "&.icon-color.color-error": {
12878
- color: "#d14343"
12841
+ '&.icon-color.color-error': {
12842
+ color: '#d14343'
12879
12843
  },
12880
- "&.icon-color.color-warning": {
12881
- color: "#fb8500"
12844
+ '&.icon-color.color-warning': {
12845
+ color: '#fb8500'
12882
12846
  },
12883
- "&.icon-color.color-success": {
12884
- color: "#8fc93a"
12847
+ '&.icon-color.color-success': {
12848
+ color: '#8fc93a'
12885
12849
  }
12886
12850
  }));
12887
12851
  const ToastNotification = toast => {
@@ -12895,14 +12859,20 @@ const ToastNotification = toast => {
12895
12859
  warning: /*#__PURE__*/React__default.createElement(WarningRounded, null),
12896
12860
  info: /*#__PURE__*/React__default.createElement(InfoRounded, null)
12897
12861
  };
12898
- const ToastIcon = IconMap[toast.type || "info"];
12862
+ const ToastIcon = IconMap[toast.type || 'info'];
12899
12863
  const colorMap = {
12900
- success: "success",
12901
- error: "error",
12902
- warning: "warning",
12903
- info: "info"
12864
+ success: 'success',
12865
+ error: 'error',
12866
+ warning: 'warning',
12867
+ info: 'info'
12868
+ };
12869
+ const colors = colorMap[toast.type || 'info'];
12870
+ const toastPosition = {
12871
+ center: 'center',
12872
+ right: 'flex-end',
12873
+ left: 'flex-start'
12904
12874
  };
12905
- const colors = colorMap[toast.type || "info"];
12875
+ const position = toastPosition[toast.position || 'right'];
12906
12876
  const close = () => {
12907
12877
  setOpenToast(false);
12908
12878
  };
@@ -12926,15 +12896,18 @@ const ToastNotification = toast => {
12926
12896
  }, [timeProgress, toast.time]);
12927
12897
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(ThemeProvider, {
12928
12898
  theme: SincoTheme
12899
+ }, /*#__PURE__*/React__default.createElement(Stack$1, {
12900
+ alignItems: position || 'right'
12929
12901
  }, /*#__PURE__*/React__default.createElement(ToastContent, {
12930
12902
  width: 370,
12931
- role: "toast"
12903
+ role: "toast",
12904
+ className: `${position}`
12932
12905
  }, /*#__PURE__*/React__default.createElement(ContentBox, {
12933
- className: `color-${toast.type || "info"}`
12906
+ className: `color-${toast.type || 'info'}`
12934
12907
  }, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
12935
- className: `ripple-${toast.type || "info"}`
12908
+ className: `ripple-${toast.type || 'info'}`
12936
12909
  }, /*#__PURE__*/React__default.createElement(ContentIcon, {
12937
- className: `icon-color color-${toast.type || "info"}`
12910
+ className: `icon-color color-${toast.type || 'info'}`
12938
12911
  }, ToastIcon)), /*#__PURE__*/React__default.createElement(Divider$1, {
12939
12912
  orientation: "vertical",
12940
12913
  flexItem: true
@@ -12962,17 +12935,17 @@ const ToastNotification = toast => {
12962
12935
  paddingLeft: 15,
12963
12936
  marginBlock: 0,
12964
12937
  fontSize: 11,
12965
- color: "#101840de"
12938
+ color: '#101840de'
12966
12939
  }
12967
12940
  }, toast.dataOpt.map((element, i) => {
12968
12941
  const keyElement = Object.keys(element);
12969
- let options = "";
12942
+ let options = '';
12970
12943
  for (let _i = 0; _i < keyElement.length; _i++) {
12971
12944
  options += element[keyElement[_i]];
12972
12945
  }
12973
12946
  return /*#__PURE__*/React__default.createElement("li", {
12974
12947
  style: {
12975
- width: "fit-content"
12948
+ width: 'fit-content'
12976
12949
  },
12977
12950
  key: i
12978
12951
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
@@ -12995,11 +12968,11 @@ const ToastNotification = toast => {
12995
12968
  }) : /*#__PURE__*/React__default.createElement(ArrowUpward, {
12996
12969
  fontSize: "small"
12997
12970
  })
12998
- }, showOptions ? "Ver más" : "Ver menos")))), /*#__PURE__*/React__default.createElement(LinearProgress$1, {
12971
+ }, showOptions ? 'Ver más' : 'Ver menos')))), /*#__PURE__*/React__default.createElement(LinearProgress$1, {
12999
12972
  color: colors,
13000
12973
  variant: "determinate",
13001
12974
  value: progress
13002
- }))));
12975
+ })))));
13003
12976
  };
13004
12977
 
13005
12978
  export { SincoTheme, ToastNotification };