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

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
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { forwardRef, useContext } from 'react';
3
- import { jsxs, jsx } from 'react/jsx-runtime';
3
+ import { jsx, jsxs } from 'react/jsx-runtime';
4
4
 
5
5
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
6
6
 
@@ -1088,6 +1088,15 @@ $$1({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign$2
1088
1088
  assign: assign$2
1089
1089
  });
1090
1090
 
1091
+ function chainPropTypes(propType1, propType2) {
1092
+ if (process.env.NODE_ENV === 'production') {
1093
+ return () => null;
1094
+ }
1095
+ return function validate(...args) {
1096
+ return propType1(...args) || propType2(...args);
1097
+ };
1098
+ }
1099
+
1091
1100
  function isPlainObject(item) {
1092
1101
  return item !== null && typeof item === 'object' && item.constructor === Object;
1093
1102
  }
@@ -2554,6 +2563,58 @@ function capitalize(string) {
2554
2563
  return string.charAt(0).toUpperCase() + string.slice(1);
2555
2564
  }
2556
2565
 
2566
+ function getTypeByValue(value) {
2567
+ const valueType = typeof value;
2568
+ switch (valueType) {
2569
+ case 'number':
2570
+ if (Number.isNaN(value)) {
2571
+ return 'NaN';
2572
+ }
2573
+ if (!Number.isFinite(value)) {
2574
+ return 'Infinity';
2575
+ }
2576
+ if (value !== Math.floor(value)) {
2577
+ return 'float';
2578
+ }
2579
+ return 'number';
2580
+ case 'object':
2581
+ if (value === null) {
2582
+ return 'null';
2583
+ }
2584
+ return value.constructor.name;
2585
+ default:
2586
+ return valueType;
2587
+ }
2588
+ }
2589
+
2590
+ // IE 11 support
2591
+ function ponyfillIsInteger(x) {
2592
+ // eslint-disable-next-line no-restricted-globals
2593
+ return typeof x === 'number' && isFinite(x) && Math.floor(x) === x;
2594
+ }
2595
+ const isInteger = Number.isInteger || ponyfillIsInteger;
2596
+ function requiredInteger(props, propName, componentName, location) {
2597
+ const propValue = props[propName];
2598
+ if (propValue == null || !isInteger(propValue)) {
2599
+ const propType = getTypeByValue(propValue);
2600
+ return new RangeError(`Invalid ${location} \`${propName}\` of type \`${propType}\` supplied to \`${componentName}\`, expected \`integer\`.`);
2601
+ }
2602
+ return null;
2603
+ }
2604
+ function validator(props, propName, ...other) {
2605
+ const propValue = props[propName];
2606
+ if (propValue === undefined) {
2607
+ return null;
2608
+ }
2609
+ return requiredInteger(props, propName, ...other);
2610
+ }
2611
+ function validatorNoop() {
2612
+ return null;
2613
+ }
2614
+ validator.isRequired = requiredInteger;
2615
+ validatorNoop.isRequired = validatorNoop;
2616
+ var integerPropType = process.env.NODE_ENV === 'production' ? validatorNoop : validator;
2617
+
2557
2618
  /**
2558
2619
  * Add keys, values of `defaultProps` that does not exist in `props`
2559
2620
  * @param {object} defaultProps
@@ -4936,7 +4997,7 @@ tags.forEach(function (tagName) {
4936
4997
  * This source code is licensed under the MIT license found in the
4937
4998
  * LICENSE file in the root directory of this source tree.
4938
4999
  */
4939
- function styled$2(tag, options) {
5000
+ function styled$3(tag, options) {
4940
5001
  const stylesFactory = newStyled(tag, options);
4941
5002
  if (process.env.NODE_ENV !== 'production') {
4942
5003
  return (...styles) => {
@@ -4961,7 +5022,7 @@ const internal_processStyles = (tag, processor) => {
4961
5022
  }
4962
5023
  };
4963
5024
 
4964
- const _excluded$8 = ["values", "unit", "step"];
5025
+ const _excluded$f = ["values", "unit", "step"];
4965
5026
  const sortBreakpointsValues = values => {
4966
5027
  const breakpointsAsArray = Object.keys(values).map(key => ({
4967
5028
  key,
@@ -4996,7 +5057,7 @@ function createBreakpoints(breakpoints) {
4996
5057
  unit = 'px',
4997
5058
  step = 5
4998
5059
  } = breakpoints,
4999
- other = _objectWithoutPropertiesLoose(breakpoints, _excluded$8);
5060
+ other = _objectWithoutPropertiesLoose(breakpoints, _excluded$f);
5000
5061
  const sortedValues = sortBreakpointsValues(values);
5001
5062
  const keys = Object.keys(sortedValues);
5002
5063
  function up(key) {
@@ -5122,6 +5183,61 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
5122
5183
  return acc;
5123
5184
  }, style);
5124
5185
  }
5186
+ function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
5187
+ const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
5188
+ const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
5189
+ return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
5190
+ }
5191
+
5192
+ // compute base for responsive values; e.g.,
5193
+ // [1,2,3] => {xs: true, sm: true, md: true}
5194
+ // {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
5195
+ function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
5196
+ // fixed value
5197
+ if (typeof breakpointValues !== 'object') {
5198
+ return {};
5199
+ }
5200
+ const base = {};
5201
+ const breakpointsKeys = Object.keys(themeBreakpoints);
5202
+ if (Array.isArray(breakpointValues)) {
5203
+ breakpointsKeys.forEach((breakpoint, i) => {
5204
+ if (i < breakpointValues.length) {
5205
+ base[breakpoint] = true;
5206
+ }
5207
+ });
5208
+ } else {
5209
+ breakpointsKeys.forEach(breakpoint => {
5210
+ if (breakpointValues[breakpoint] != null) {
5211
+ base[breakpoint] = true;
5212
+ }
5213
+ });
5214
+ }
5215
+ return base;
5216
+ }
5217
+ function resolveBreakpointValues({
5218
+ values: breakpointValues,
5219
+ breakpoints: themeBreakpoints,
5220
+ base: customBase
5221
+ }) {
5222
+ const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
5223
+ const keys = Object.keys(base);
5224
+ if (keys.length === 0) {
5225
+ return breakpointValues;
5226
+ }
5227
+ let previous;
5228
+ return keys.reduce((acc, breakpoint, i) => {
5229
+ if (Array.isArray(breakpointValues)) {
5230
+ acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
5231
+ previous = i;
5232
+ } else if (typeof breakpointValues === 'object') {
5233
+ acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
5234
+ previous = breakpoint;
5235
+ } else {
5236
+ acc[breakpoint] = breakpointValues;
5237
+ }
5238
+ return acc;
5239
+ }, {});
5240
+ }
5125
5241
 
5126
5242
  function getPath(obj, path, checkVars = true) {
5127
5243
  if (!path || typeof path !== 'string') {
@@ -5156,7 +5272,7 @@ function getStyleValue(themeMapping, transform, propValueFinal, userValue = prop
5156
5272
  }
5157
5273
  return value;
5158
5274
  }
5159
- function style$1(options) {
5275
+ function style$2(options) {
5160
5276
  const {
5161
5277
  prop,
5162
5278
  cssProperty = options.prop,
@@ -5317,12 +5433,12 @@ function resolveCssProperty(props, keys, prop, transformer) {
5317
5433
  const propValue = props[prop];
5318
5434
  return handleBreakpoints(props, propValue, styleFromPropValue);
5319
5435
  }
5320
- function style(props, keys) {
5436
+ function style$1(props, keys) {
5321
5437
  const transformer = createUnarySpacing(props.theme);
5322
5438
  return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
5323
5439
  }
5324
5440
  function margin(props) {
5325
- return style(props, marginKeys);
5441
+ return style$1(props, marginKeys);
5326
5442
  }
5327
5443
  margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
5328
5444
  obj[key] = responsivePropType$1;
@@ -5330,7 +5446,7 @@ margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((ob
5330
5446
  }, {}) : {};
5331
5447
  margin.filterProps = marginKeys;
5332
5448
  function padding(props) {
5333
- return style(props, paddingKeys);
5449
+ return style$1(props, paddingKeys);
5334
5450
  }
5335
5451
  padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
5336
5452
  obj[key] = responsivePropType$1;
@@ -5404,48 +5520,48 @@ function borderTransform(value) {
5404
5520
  }
5405
5521
  return `${value}px solid`;
5406
5522
  }
5407
- const border = style$1({
5523
+ const border = style$2({
5408
5524
  prop: 'border',
5409
5525
  themeKey: 'borders',
5410
5526
  transform: borderTransform
5411
5527
  });
5412
- const borderTop = style$1({
5528
+ const borderTop = style$2({
5413
5529
  prop: 'borderTop',
5414
5530
  themeKey: 'borders',
5415
5531
  transform: borderTransform
5416
5532
  });
5417
- const borderRight = style$1({
5533
+ const borderRight = style$2({
5418
5534
  prop: 'borderRight',
5419
5535
  themeKey: 'borders',
5420
5536
  transform: borderTransform
5421
5537
  });
5422
- const borderBottom = style$1({
5538
+ const borderBottom = style$2({
5423
5539
  prop: 'borderBottom',
5424
5540
  themeKey: 'borders',
5425
5541
  transform: borderTransform
5426
5542
  });
5427
- const borderLeft = style$1({
5543
+ const borderLeft = style$2({
5428
5544
  prop: 'borderLeft',
5429
5545
  themeKey: 'borders',
5430
5546
  transform: borderTransform
5431
5547
  });
5432
- const borderColor = style$1({
5548
+ const borderColor = style$2({
5433
5549
  prop: 'borderColor',
5434
5550
  themeKey: 'palette'
5435
5551
  });
5436
- const borderTopColor = style$1({
5552
+ const borderTopColor = style$2({
5437
5553
  prop: 'borderTopColor',
5438
5554
  themeKey: 'palette'
5439
5555
  });
5440
- const borderRightColor = style$1({
5556
+ const borderRightColor = style$2({
5441
5557
  prop: 'borderRightColor',
5442
5558
  themeKey: 'palette'
5443
5559
  });
5444
- const borderBottomColor = style$1({
5560
+ const borderBottomColor = style$2({
5445
5561
  prop: 'borderBottomColor',
5446
5562
  themeKey: 'palette'
5447
5563
  });
5448
- const borderLeftColor = style$1({
5564
+ const borderLeftColor = style$2({
5449
5565
  prop: 'borderLeftColor',
5450
5566
  themeKey: 'palette'
5451
5567
  });
@@ -5518,31 +5634,31 @@ rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
5518
5634
  rowGap: responsivePropType$1
5519
5635
  } : {};
5520
5636
  rowGap.filterProps = ['rowGap'];
5521
- const gridColumn = style$1({
5637
+ const gridColumn = style$2({
5522
5638
  prop: 'gridColumn'
5523
5639
  });
5524
- const gridRow = style$1({
5640
+ const gridRow = style$2({
5525
5641
  prop: 'gridRow'
5526
5642
  });
5527
- const gridAutoFlow = style$1({
5643
+ const gridAutoFlow = style$2({
5528
5644
  prop: 'gridAutoFlow'
5529
5645
  });
5530
- const gridAutoColumns = style$1({
5646
+ const gridAutoColumns = style$2({
5531
5647
  prop: 'gridAutoColumns'
5532
5648
  });
5533
- const gridAutoRows = style$1({
5649
+ const gridAutoRows = style$2({
5534
5650
  prop: 'gridAutoRows'
5535
5651
  });
5536
- const gridTemplateColumns = style$1({
5652
+ const gridTemplateColumns = style$2({
5537
5653
  prop: 'gridTemplateColumns'
5538
5654
  });
5539
- const gridTemplateRows = style$1({
5655
+ const gridTemplateRows = style$2({
5540
5656
  prop: 'gridTemplateRows'
5541
5657
  });
5542
- const gridTemplateAreas = style$1({
5658
+ const gridTemplateAreas = style$2({
5543
5659
  prop: 'gridTemplateAreas'
5544
5660
  });
5545
- const gridArea = style$1({
5661
+ const gridArea = style$2({
5546
5662
  prop: 'gridArea'
5547
5663
  });
5548
5664
  compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
@@ -5553,18 +5669,18 @@ function paletteTransform(value, userValue) {
5553
5669
  }
5554
5670
  return value;
5555
5671
  }
5556
- const color = style$1({
5672
+ const color = style$2({
5557
5673
  prop: 'color',
5558
5674
  themeKey: 'palette',
5559
5675
  transform: paletteTransform
5560
5676
  });
5561
- const bgcolor = style$1({
5677
+ const bgcolor = style$2({
5562
5678
  prop: 'bgcolor',
5563
5679
  cssProperty: 'backgroundColor',
5564
5680
  themeKey: 'palette',
5565
5681
  transform: paletteTransform
5566
5682
  });
5567
- const backgroundColor = style$1({
5683
+ const backgroundColor = style$2({
5568
5684
  prop: 'backgroundColor',
5569
5685
  themeKey: 'palette',
5570
5686
  transform: paletteTransform
@@ -5574,7 +5690,7 @@ compose(color, bgcolor, backgroundColor);
5574
5690
  function sizingTransform(value) {
5575
5691
  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
5576
5692
  }
5577
- const width = style$1({
5693
+ const width = style$2({
5578
5694
  prop: 'width',
5579
5695
  transform: sizingTransform
5580
5696
  });
@@ -5592,33 +5708,33 @@ const maxWidth = props => {
5592
5708
  return null;
5593
5709
  };
5594
5710
  maxWidth.filterProps = ['maxWidth'];
5595
- const minWidth = style$1({
5711
+ const minWidth = style$2({
5596
5712
  prop: 'minWidth',
5597
5713
  transform: sizingTransform
5598
5714
  });
5599
- const height = style$1({
5715
+ const height = style$2({
5600
5716
  prop: 'height',
5601
5717
  transform: sizingTransform
5602
5718
  });
5603
- const maxHeight = style$1({
5719
+ const maxHeight = style$2({
5604
5720
  prop: 'maxHeight',
5605
5721
  transform: sizingTransform
5606
5722
  });
5607
- const minHeight = style$1({
5723
+ const minHeight = style$2({
5608
5724
  prop: 'minHeight',
5609
5725
  transform: sizingTransform
5610
5726
  });
5611
- style$1({
5727
+ style$2({
5612
5728
  prop: 'size',
5613
5729
  cssProperty: 'width',
5614
5730
  transform: sizingTransform
5615
5731
  });
5616
- style$1({
5732
+ style$2({
5617
5733
  prop: 'size',
5618
5734
  cssProperty: 'height',
5619
5735
  transform: sizingTransform
5620
5736
  });
5621
- const boxSizing = style$1({
5737
+ const boxSizing = style$2({
5622
5738
  prop: 'boxSizing'
5623
5739
  });
5624
5740
  compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
@@ -6025,7 +6141,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
6025
6141
  styleFunctionSx.filterProps = ['sx'];
6026
6142
  var styleFunctionSx$1 = styleFunctionSx;
6027
6143
 
6028
- const _excluded$7 = ["breakpoints", "palette", "spacing", "shape"];
6144
+ const _excluded$e = ["breakpoints", "palette", "spacing", "shape"];
6029
6145
  function createTheme$1(options = {}, ...args) {
6030
6146
  const {
6031
6147
  breakpoints: breakpointsInput = {},
@@ -6033,7 +6149,7 @@ function createTheme$1(options = {}, ...args) {
6033
6149
  spacing: spacingInput,
6034
6150
  shape: shapeInput = {}
6035
6151
  } = options,
6036
- other = _objectWithoutPropertiesLoose(options, _excluded$7);
6152
+ other = _objectWithoutPropertiesLoose(options, _excluded$e);
6037
6153
  const breakpoints = createBreakpoints(breakpointsInput);
6038
6154
  const spacing = createSpacing(spacingInput);
6039
6155
  let muiTheme = deepmerge({
@@ -6061,19 +6177,64 @@ function createTheme$1(options = {}, ...args) {
6061
6177
  function isObjectEmpty(obj) {
6062
6178
  return Object.keys(obj).length === 0;
6063
6179
  }
6064
- function useTheme$1(defaultTheme = null) {
6180
+ function useTheme$2(defaultTheme = null) {
6065
6181
  const contextTheme = React.useContext(ThemeContext);
6066
6182
  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
6067
6183
  }
6068
6184
 
6069
6185
  const systemDefaultTheme$1 = createTheme$1();
6070
- function useTheme(defaultTheme = systemDefaultTheme$1) {
6071
- return useTheme$1(defaultTheme);
6186
+ function useTheme$1(defaultTheme = systemDefaultTheme$1) {
6187
+ return useTheme$2(defaultTheme);
6188
+ }
6189
+
6190
+ const _excluded$d = ["sx"];
6191
+ const splitProps = props => {
6192
+ var _props$theme$unstable, _props$theme;
6193
+ const result = {
6194
+ systemProps: {},
6195
+ otherProps: {}
6196
+ };
6197
+ 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;
6198
+ Object.keys(props).forEach(prop => {
6199
+ if (config[prop]) {
6200
+ result.systemProps[prop] = props[prop];
6201
+ } else {
6202
+ result.otherProps[prop] = props[prop];
6203
+ }
6204
+ });
6205
+ return result;
6206
+ };
6207
+ function extendSxProp(props) {
6208
+ const {
6209
+ sx: inSx
6210
+ } = props,
6211
+ other = _objectWithoutPropertiesLoose(props, _excluded$d);
6212
+ const {
6213
+ systemProps,
6214
+ otherProps
6215
+ } = splitProps(other);
6216
+ let finalSx;
6217
+ if (Array.isArray(inSx)) {
6218
+ finalSx = [systemProps, ...inSx];
6219
+ } else if (typeof inSx === 'function') {
6220
+ finalSx = (...args) => {
6221
+ const result = inSx(...args);
6222
+ if (!isPlainObject(result)) {
6223
+ return systemProps;
6224
+ }
6225
+ return _extends({}, systemProps, result);
6226
+ };
6227
+ } else {
6228
+ finalSx = _extends({}, systemProps, inSx);
6229
+ }
6230
+ return _extends({}, otherProps, {
6231
+ sx: finalSx
6232
+ });
6072
6233
  }
6073
6234
 
6074
6235
  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}
6075
6236
 
6076
- const _excluded$6 = ["variant"];
6237
+ const _excluded$c = ["variant"];
6077
6238
  function isEmpty$1(string) {
6078
6239
  return string.length === 0;
6079
6240
  }
@@ -6087,7 +6248,7 @@ function propsToClassKey(props) {
6087
6248
  const {
6088
6249
  variant
6089
6250
  } = props,
6090
- other = _objectWithoutPropertiesLoose(props, _excluded$6);
6251
+ other = _objectWithoutPropertiesLoose(props, _excluded$c);
6091
6252
  let classKey = variant || '';
6092
6253
  Object.keys(other).sort().forEach(key => {
6093
6254
  if (key === 'color') {
@@ -6099,7 +6260,7 @@ function propsToClassKey(props) {
6099
6260
  return classKey;
6100
6261
  }
6101
6262
 
6102
- const _excluded$5 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
6263
+ const _excluded$b = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
6103
6264
  function isEmpty(obj) {
6104
6265
  return Object.keys(obj).length === 0;
6105
6266
  }
@@ -6194,7 +6355,7 @@ function createStyled(input = {}) {
6194
6355
  skipSx: inputSkipSx,
6195
6356
  overridesResolver
6196
6357
  } = inputOptions,
6197
- options = _objectWithoutPropertiesLoose(inputOptions, _excluded$5);
6358
+ options = _objectWithoutPropertiesLoose(inputOptions, _excluded$b);
6198
6359
 
6199
6360
  // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
6200
6361
  const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6215,7 +6376,7 @@ function createStyled(input = {}) {
6215
6376
  // for string (html) tag, preserve the behavior in emotion & styled-components.
6216
6377
  shouldForwardPropOption = undefined;
6217
6378
  }
6218
- const defaultStyledResolver = styled$2(tag, _extends({
6379
+ const defaultStyledResolver = styled$3(tag, _extends({
6219
6380
  shouldForwardProp: shouldForwardPropOption,
6220
6381
  label
6221
6382
  }, options));
@@ -6307,6 +6468,9 @@ function createStyled(input = {}) {
6307
6468
  };
6308
6469
  }
6309
6470
 
6471
+ const styled$2 = createStyled();
6472
+ var systemStyled = styled$2;
6473
+
6310
6474
  function getThemeProps(params) {
6311
6475
  const {
6312
6476
  theme,
@@ -6325,7 +6489,7 @@ function useThemeProps$1({
6325
6489
  defaultTheme,
6326
6490
  themeId
6327
6491
  }) {
6328
- let theme = useTheme(defaultTheme);
6492
+ let theme = useTheme$1(defaultTheme);
6329
6493
  if (themeId) {
6330
6494
  theme = theme[themeId] || theme;
6331
6495
  }
@@ -6508,6 +6672,27 @@ function getContrastRatio(foreground, background) {
6508
6672
  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
6509
6673
  }
6510
6674
 
6675
+ /**
6676
+ * Sets the absolute transparency of a color.
6677
+ * Any existing alpha values are overwritten.
6678
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
6679
+ * @param {number} value - value to set the alpha channel to in the range 0 - 1
6680
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
6681
+ */
6682
+ function alpha(color, value) {
6683
+ color = decomposeColor(color);
6684
+ value = clamp(value);
6685
+ if (color.type === 'rgb' || color.type === 'hsl') {
6686
+ color.type += 'a';
6687
+ }
6688
+ if (color.type === 'color') {
6689
+ color.values[3] = `/${value}`;
6690
+ } else {
6691
+ color.values[3] = value;
6692
+ }
6693
+ return recomposeColor(color);
6694
+ }
6695
+
6511
6696
  /**
6512
6697
  * Darkens a color.
6513
6698
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
@@ -6550,6 +6735,161 @@ function lighten(color, coefficient) {
6550
6735
  return recomposeColor(color);
6551
6736
  }
6552
6737
 
6738
+ const _excluded$a = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
6739
+ const defaultTheme$2 = createTheme$1();
6740
+ // widening Theme to any so that the consumer can own the theme structure.
6741
+ const defaultCreateStyledComponent = systemStyled('div', {
6742
+ name: 'MuiStack',
6743
+ slot: 'Root',
6744
+ overridesResolver: (props, styles) => styles.root
6745
+ });
6746
+ function useThemePropsDefault(props) {
6747
+ return useThemeProps$1({
6748
+ props,
6749
+ name: 'MuiStack',
6750
+ defaultTheme: defaultTheme$2
6751
+ });
6752
+ }
6753
+
6754
+ /**
6755
+ * Return an array with the separator React element interspersed between
6756
+ * each React node of the input children.
6757
+ *
6758
+ * > joinChildren([1,2,3], 0)
6759
+ * [1,0,2,0,3]
6760
+ */
6761
+ function joinChildren(children, separator) {
6762
+ const childrenArray = React.Children.toArray(children).filter(Boolean);
6763
+ return childrenArray.reduce((output, child, index) => {
6764
+ output.push(child);
6765
+ if (index < childrenArray.length - 1) {
6766
+ output.push( /*#__PURE__*/React.cloneElement(separator, {
6767
+ key: `separator-${index}`
6768
+ }));
6769
+ }
6770
+ return output;
6771
+ }, []);
6772
+ }
6773
+ const getSideFromDirection = direction => {
6774
+ return {
6775
+ row: 'Left',
6776
+ 'row-reverse': 'Right',
6777
+ column: 'Top',
6778
+ 'column-reverse': 'Bottom'
6779
+ }[direction];
6780
+ };
6781
+ const style = ({
6782
+ ownerState,
6783
+ theme
6784
+ }) => {
6785
+ let styles = _extends({
6786
+ display: 'flex',
6787
+ flexDirection: 'column'
6788
+ }, handleBreakpoints({
6789
+ theme
6790
+ }, resolveBreakpointValues({
6791
+ values: ownerState.direction,
6792
+ breakpoints: theme.breakpoints.values
6793
+ }), propValue => ({
6794
+ flexDirection: propValue
6795
+ })));
6796
+ if (ownerState.spacing) {
6797
+ const transformer = createUnarySpacing(theme);
6798
+ const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
6799
+ if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
6800
+ acc[breakpoint] = true;
6801
+ }
6802
+ return acc;
6803
+ }, {});
6804
+ const directionValues = resolveBreakpointValues({
6805
+ values: ownerState.direction,
6806
+ base
6807
+ });
6808
+ const spacingValues = resolveBreakpointValues({
6809
+ values: ownerState.spacing,
6810
+ base
6811
+ });
6812
+ if (typeof directionValues === 'object') {
6813
+ Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
6814
+ const directionValue = directionValues[breakpoint];
6815
+ if (!directionValue) {
6816
+ const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
6817
+ directionValues[breakpoint] = previousDirectionValue;
6818
+ }
6819
+ });
6820
+ }
6821
+ const styleFromPropValue = (propValue, breakpoint) => {
6822
+ if (ownerState.useFlexGap) {
6823
+ return {
6824
+ gap: getValue(transformer, propValue)
6825
+ };
6826
+ }
6827
+ return {
6828
+ '& > :not(style) + :not(style)': {
6829
+ margin: 0,
6830
+ [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
6831
+ }
6832
+ };
6833
+ };
6834
+ styles = deepmerge(styles, handleBreakpoints({
6835
+ theme
6836
+ }, spacingValues, styleFromPropValue));
6837
+ }
6838
+ styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
6839
+ return styles;
6840
+ };
6841
+ function createStack(options = {}) {
6842
+ const {
6843
+ // This will allow adding custom styled fn (for example for custom sx style function)
6844
+ createStyledComponent = defaultCreateStyledComponent,
6845
+ useThemeProps = useThemePropsDefault,
6846
+ componentName = 'MuiStack'
6847
+ } = options;
6848
+ const useUtilityClasses = () => {
6849
+ const slots = {
6850
+ root: ['root']
6851
+ };
6852
+ return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
6853
+ };
6854
+ const StackRoot = createStyledComponent(style);
6855
+ const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
6856
+ const themeProps = useThemeProps(inProps);
6857
+ const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
6858
+ const {
6859
+ component = 'div',
6860
+ direction = 'column',
6861
+ spacing = 0,
6862
+ divider,
6863
+ children,
6864
+ className,
6865
+ useFlexGap = false
6866
+ } = props,
6867
+ other = _objectWithoutPropertiesLoose(props, _excluded$a);
6868
+ const ownerState = {
6869
+ direction,
6870
+ spacing,
6871
+ useFlexGap
6872
+ };
6873
+ const classes = useUtilityClasses();
6874
+ return /*#__PURE__*/jsx(StackRoot, _extends({
6875
+ as: component,
6876
+ ownerState: ownerState,
6877
+ ref: ref,
6878
+ className: clsx(classes.root, className)
6879
+ }, other, {
6880
+ children: divider ? joinChildren(children, divider) : children
6881
+ }));
6882
+ });
6883
+ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
6884
+ children: PropTypes.node,
6885
+ direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
6886
+ divider: PropTypes.node,
6887
+ spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
6888
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
6889
+ } : void 0;
6890
+ return Stack;
6891
+ }
6892
+
6553
6893
  function createMixins(breakpoints, mixins) {
6554
6894
  return _extends({
6555
6895
  toolbar: {
@@ -6698,7 +7038,7 @@ const green = {
6698
7038
  };
6699
7039
  var green$1 = green;
6700
7040
 
6701
- const _excluded$4 = ["mode", "contrastThreshold", "tonalOffset"];
7041
+ const _excluded$9 = ["mode", "contrastThreshold", "tonalOffset"];
6702
7042
  const light = {
6703
7043
  // The colors used to style the text.
6704
7044
  text: {
@@ -6867,7 +7207,7 @@ function createPalette(palette) {
6867
7207
  contrastThreshold = 3,
6868
7208
  tonalOffset = 0.2
6869
7209
  } = palette,
6870
- other = _objectWithoutPropertiesLoose(palette, _excluded$4);
7210
+ other = _objectWithoutPropertiesLoose(palette, _excluded$9);
6871
7211
  const primary = palette.primary || getDefaultPrimary(mode);
6872
7212
  const secondary = palette.secondary || getDefaultSecondary(mode);
6873
7213
  const error = palette.error || getDefaultError(mode);
@@ -6991,7 +7331,7 @@ const theme2 = createTheme({ palette: {
6991
7331
  return paletteOutput;
6992
7332
  }
6993
7333
 
6994
- const _excluded$3 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
7334
+ const _excluded$8 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
6995
7335
  function round(value) {
6996
7336
  return Math.round(value * 1e5) / 1e5;
6997
7337
  }
@@ -7022,7 +7362,7 @@ function createTypography(palette, typography) {
7022
7362
  allVariants,
7023
7363
  pxToRem: pxToRem2
7024
7364
  } = _ref,
7025
- other = _objectWithoutPropertiesLoose(_ref, _excluded$3);
7365
+ other = _objectWithoutPropertiesLoose(_ref, _excluded$8);
7026
7366
  if (process.env.NODE_ENV !== 'production') {
7027
7367
  if (typeof fontSize !== 'number') {
7028
7368
  console.error('MUI: `fontSize` is required to be a number.');
@@ -7089,7 +7429,7 @@ function createShadow(...px) {
7089
7429
  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)];
7090
7430
  var shadows$1 = shadows;
7091
7431
 
7092
- const _excluded$2 = ["duration", "easing", "delay"];
7432
+ const _excluded$7 = ["duration", "easing", "delay"];
7093
7433
  // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
7094
7434
  // to learn the context in which each easing should be used.
7095
7435
  const easing = {
@@ -7140,7 +7480,7 @@ function createTransitions(inputTransitions) {
7140
7480
  easing: easingOption = mergedEasing.easeInOut,
7141
7481
  delay = 0
7142
7482
  } = options,
7143
- other = _objectWithoutPropertiesLoose(options, _excluded$2);
7483
+ other = _objectWithoutPropertiesLoose(options, _excluded$7);
7144
7484
  if (process.env.NODE_ENV !== 'production') {
7145
7485
  const isString = value => typeof value === 'string';
7146
7486
  // IE11 support, replace with Number.isNaN
@@ -7187,7 +7527,7 @@ const zIndex = {
7187
7527
  };
7188
7528
  var zIndex$1 = zIndex;
7189
7529
 
7190
- const _excluded$1 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
7530
+ const _excluded$6 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
7191
7531
  function createTheme(options = {}, ...args) {
7192
7532
  const {
7193
7533
  mixins: mixinsInput = {},
@@ -7195,7 +7535,7 @@ function createTheme(options = {}, ...args) {
7195
7535
  transitions: transitionsInput = {},
7196
7536
  typography: typographyInput = {}
7197
7537
  } = options,
7198
- other = _objectWithoutPropertiesLoose(options, _excluded$1);
7538
+ other = _objectWithoutPropertiesLoose(options, _excluded$6);
7199
7539
  if (options.vars) {
7200
7540
  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
7201
7541
  Please use another name.` : formatMuiErrorMessage(18));
@@ -7256,6 +7596,15 @@ Please use another name.` : formatMuiErrorMessage(18));
7256
7596
  const defaultTheme = createTheme();
7257
7597
  var defaultTheme$1 = defaultTheme;
7258
7598
 
7599
+ function useTheme() {
7600
+ const theme = useTheme$1(defaultTheme$1);
7601
+ if (process.env.NODE_ENV !== 'production') {
7602
+ // eslint-disable-next-line react-hooks/rules-of-hooks
7603
+ React.useDebugValue(theme);
7604
+ }
7605
+ return theme[THEME_ID] || theme;
7606
+ }
7607
+
7259
7608
  function useThemeProps({
7260
7609
  props,
7261
7610
  name
@@ -7276,13 +7625,25 @@ const styled = createStyled({
7276
7625
  });
7277
7626
  var styled$1 = styled;
7278
7627
 
7628
+ // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
7629
+ const getOverlayAlpha = elevation => {
7630
+ let alphaValue;
7631
+ if (elevation < 1) {
7632
+ alphaValue = 5.11916 * elevation ** 2;
7633
+ } else {
7634
+ alphaValue = 4.5 * Math.log(elevation + 1) + 2;
7635
+ }
7636
+ return (alphaValue / 100).toFixed(2);
7637
+ };
7638
+ var getOverlayAlpha$1 = getOverlayAlpha;
7639
+
7279
7640
  function getSvgIconUtilityClass(slot) {
7280
7641
  return generateUtilityClass('MuiSvgIcon', slot);
7281
7642
  }
7282
7643
  generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
7283
7644
 
7284
- const _excluded = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
7285
- const useUtilityClasses = ownerState => {
7645
+ const _excluded$5 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
7646
+ const useUtilityClasses$5 = ownerState => {
7286
7647
  const {
7287
7648
  color,
7288
7649
  fontSize,
@@ -7347,7 +7708,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
7347
7708
  titleAccess,
7348
7709
  viewBox = '0 0 24 24'
7349
7710
  } = props,
7350
- other = _objectWithoutPropertiesLoose(props, _excluded);
7711
+ other = _objectWithoutPropertiesLoose(props, _excluded$5);
7351
7712
  const ownerState = _extends({}, props, {
7352
7713
  color,
7353
7714
  component,
@@ -7360,7 +7721,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
7360
7721
  if (!inheritViewBox) {
7361
7722
  more.viewBox = viewBox;
7362
7723
  }
7363
- const classes = useUtilityClasses(ownerState);
7724
+ const classes = useUtilityClasses$5(ownerState);
7364
7725
  return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
7365
7726
  as: component,
7366
7727
  className: clsx(classes.root, className),
@@ -7621,15 +7982,44 @@ const components = {
7621
7982
  }
7622
7983
  },
7623
7984
  MuiChip: {
7624
- defaultProps: {
7625
- size: 'small'
7626
- },
7627
7985
  styleOverrides: {
7986
+ sizeSmall: {
7987
+ paddingBlock: 4
7988
+ },
7989
+ sizeMedium: {
7990
+ paddingBlock: 7
7991
+ },
7628
7992
  root: {
7993
+ height: "inherit",
7629
7994
  borderRadius: 4
7995
+ // '&.MuiChip-colorPrimary': {
7996
+ // color: '#101840DE',
7997
+ // backgroundColor: '#E4ECF4',
7998
+ // ".MuiChip-deleteIcon": {
7999
+ // height: 12,
8000
+ // width: 12,
8001
+ // },
8002
+ // },
8003
+ // '&.MuiChip-colorPrimary.MuiChip-outlined': {
8004
+ // border: '1px solid #90B1D0',
8005
+ // backgroundColor: "#fff",
8006
+ // ".MuiChip-avatar": {
8007
+ // marginBlock: 2
8008
+ // },
8009
+ // "&.MuiChip-colorPrimary.MuiChip-outlined:hover": {
8010
+ // backgroundColor: "#E4ECF4"
8011
+ // },
8012
+ // ".MuiChip-deleteIcon": {
8013
+ // color: "#90B1D0",
8014
+ // "&:hover": {
8015
+ // color: "#6392BD !important"
8016
+ // }
8017
+ // },
8018
+ // },
7630
8019
  }
7631
8020
  }
7632
8021
  },
8022
+
7633
8023
  MuiAlert: {
7634
8024
  defaultProps: {
7635
8025
  iconMapping: {
@@ -7649,25 +8039,39 @@ const components = {
7649
8039
  }
7650
8040
  },
7651
8041
  MuiButton: {
7652
- defaultProps: {
7653
- size: 'medium'
7654
- },
7655
8042
  styleOverrides: {
7656
- fullWidth: {
7657
- width: '100%'
8043
+ endIcon: {
8044
+ marginLeft: 2
8045
+ },
8046
+ iconSizeSmall: {
8047
+ height: 14,
8048
+ width: 14
8049
+ },
8050
+ iconSizeMedium: {
8051
+ height: 15,
8052
+ width: 18
8053
+ },
8054
+ iconSizeLarge: {
8055
+ height: 17,
8056
+ width: 22
7658
8057
  },
7659
8058
  sizeSmall: {
7660
- padding: '4px 10px'
8059
+ padding: '6px 5px'
7661
8060
  },
7662
8061
  sizeMedium: {
7663
- padding: '7.5px 15px'
8062
+ padding: '8.5px 8px',
8063
+ ".MuiSvgIcon-fontSizeMedium": {
8064
+ height: 18,
8065
+ width: 18
8066
+ }
7664
8067
  },
7665
8068
  sizeLarge: {
7666
- padding: '10.5px 22px',
7667
- fontSize: 14
7668
- },
7669
- root: {
7670
- width: "fit-content"
8069
+ padding: '10.5px 11px',
8070
+ fontSize: 14,
8071
+ ".MuiSvgIcon-fontSizeLarge": {
8072
+ height: 20,
8073
+ width: 20
8074
+ }
7671
8075
  }
7672
8076
  }
7673
8077
  },
@@ -7922,44 +8326,105 @@ const components = {
7922
8326
 
7923
8327
  const palette = {
7924
8328
  primary: {
7925
- main: "#1e62a1",
7926
- light: "#5a8fd3",
7927
- dark: "#003972",
8329
+ 50: "#E4ECF4",
8330
+ 100: "#BCD0E3",
8331
+ 200: "#8FB1D0",
8332
+ 300: "#6392BD",
8333
+ light: "417AAE",
8334
+ main: "#2063A0",
8335
+ 600: "#1C5B98",
8336
+ 700: "#18518E",
8337
+ 800: "#134784",
8338
+ dark: "#0B3573",
8339
+ A100: "#A5C5FF",
8340
+ A200: "#72A4FF",
8341
+ A400: "#3F83FF",
8342
+ A700: "#2572FF",
7928
8343
  contrastText: "#ffffff"
7929
8344
  },
7930
8345
  secondary: {
7931
- main: "#0CBBE2",
7932
- light: "#67eeff",
7933
- dark: "#008bb0",
8346
+ 50: "#E0F7FA",
8347
+ 100: "#B3EBF2",
8348
+ 200: "#80DEEA",
8349
+ 300: "#4DD0E1",
8350
+ light: "#26C6DA",
8351
+ main: "#00BCD4",
8352
+ 600: "#00B6CF",
8353
+ 700: "#00ADC9",
8354
+ 800: "#00A5C3",
8355
+ dark: "#0097B9",
8356
+ A100: "#E2F9FF",
8357
+ A200: "#AFEEFF",
8358
+ A400: "#7CE3FF",
8359
+ A700: "#63DDFF",
7934
8360
  contrastText: "#ffffff"
7935
8361
  },
7936
- text: {
7937
- primary: "#101840de",
7938
- secondary: "#10184099",
7939
- disabled: "#10184061"
7940
- },
7941
8362
  error: {
8363
+ 50: "#F9E8E8",
8364
+ 100: "#F1C7C7",
8365
+ 200: "#E8A1A1",
8366
+ 300: "#DF7B7B",
8367
+ light: "#D85F5F",
7942
8368
  main: "#D14343",
7943
- light: "#d85f5f",
7944
- dark: "#b51e1e",
8369
+ 600: "#CC3D3D",
8370
+ 700: "#C63434",
8371
+ 800: "#C02C2C",
8372
+ dark: "#B51E1E",
8373
+ A100: "#FFECEC",
8374
+ A200: "#FFB9B9",
8375
+ A400: "#FF8686",
8376
+ A700: "#FF6D6D",
7945
8377
  contrastText: "#ffffff"
7946
8378
  },
7947
8379
  warning: {
7948
- main: "#fb8500",
7949
- light: "#fc9726",
7950
- dark: "#f85500",
8380
+ 50: "#FFF0E0",
8381
+ 100: "#FEDAB3",
8382
+ 200: "#FDC280",
8383
+ 300: "#FCAA4D",
8384
+ light: "#FC9726",
8385
+ main: "#FB8500",
8386
+ 600: "#FA7D00",
8387
+ 700: "#FA7200",
8388
+ 800: "#F96800",
8389
+ dark: "#F85500",
8390
+ A100: "#FFFFFF",
8391
+ A200: "#FFF1EB",
8392
+ A400: "#FFCCB8",
8393
+ A700: "#FFBA9F",
7951
8394
  contrastText: "#ffffff"
7952
8395
  },
7953
8396
  info: {
7954
- main: "#2d9fc5",
7955
- light: "#4dadce",
7956
- dark: "#1172a3",
8397
+ 50: "#E6F3F8",
8398
+ 100: "#C0E2EE",
8399
+ 200: "#96CFE2",
8400
+ 300: "#6CBCD6",
8401
+ light: "#4DADCE",
8402
+ main: "#2D9FC5",
8403
+ 600: "#2897BF",
8404
+ 700: "#228DB8",
8405
+ 800: "#1C83B0",
8406
+ dark: "#1172A3",
8407
+ A100: "#D4EFFF",
8408
+ A200: "#A1DCFF",
8409
+ A400: "#6ECAFF",
8410
+ A700: "#54C1FF",
7957
8411
  contrastText: "#ffffff"
7958
8412
  },
7959
8413
  success: {
7960
- main: "#8fc93a",
7961
- dark: "#60a918",
7962
- light: "#a0d158",
8414
+ 50: "#F2F9E7",
8415
+ 100: "#DDEFC4",
8416
+ 200: "#C7E49D",
8417
+ 300: "#B1D975",
8418
+ light: "#A0D158",
8419
+ main: "#8FC93A",
8420
+ 600: "#87C334",
8421
+ 700: "#7CBC2C",
8422
+ 800: "#72B525",
8423
+ dark: "#60A918",
8424
+ A100: "#EDFFDE",
8425
+ A200: "#D2FFAB",
8426
+ A400: "#B6FF78",
8427
+ A700: "#A9FF5E",
7963
8428
  contrastText: "#ffffff"
7964
8429
  },
7965
8430
  grey: {
@@ -7978,6 +8443,11 @@ const palette = {
7978
8443
  A400: "#696F8C",
7979
8444
  A700: "#101840"
7980
8445
  },
8446
+ text: {
8447
+ primary: "#101840de",
8448
+ secondary: "#10184099",
8449
+ disabled: "#10184061"
8450
+ },
7981
8451
  action: {
7982
8452
  active: "rgba(16, 24, 64, 0.54)",
7983
8453
  hover: "rgba(16, 24, 64, 0.04)",
@@ -8018,8 +8488,18 @@ const mixins = {
8018
8488
 
8019
8489
  const typography = {
8020
8490
  fontSize: 13,
8491
+ body3: {
8492
+ fontFamily: 'Roboto',
8493
+ fontWeight: 310,
8494
+ fontSize: 12,
8495
+ letterSpacing: 0.17,
8496
+ lineHeight: 1.2,
8497
+ [breakpoints.down('md')]: {
8498
+ fontSize: 11
8499
+ }
8500
+ },
8021
8501
  body1: {
8022
- fontFamily: "Roboto",
8502
+ fontFamily: 'Roboto',
8023
8503
  fontSize: 14,
8024
8504
  fontWeight: 400,
8025
8505
  letterSpacing: 0.15,
@@ -8029,7 +8509,7 @@ const typography = {
8029
8509
  }
8030
8510
  },
8031
8511
  body2: {
8032
- fontFamily: "Roboto",
8512
+ fontFamily: 'Roboto',
8033
8513
  fontSize: 13,
8034
8514
  fontWeight: 400,
8035
8515
  letterSpacing: 0.17,
@@ -8039,7 +8519,7 @@ const typography = {
8039
8519
  }
8040
8520
  },
8041
8521
  subtitle1: {
8042
- fontFamily: "Roboto",
8522
+ fontFamily: 'Roboto',
8043
8523
  fontSize: 14,
8044
8524
  fontWeight: 500,
8045
8525
  letterSpacing: 0.15,
@@ -8049,7 +8529,7 @@ const typography = {
8049
8529
  }
8050
8530
  },
8051
8531
  subtitle2: {
8052
- fontFamily: "Roboto",
8532
+ fontFamily: 'Roboto',
8053
8533
  fontSize: 13,
8054
8534
  fontWeight: 500,
8055
8535
  letterSpacing: 0.1,
@@ -8059,7 +8539,7 @@ const typography = {
8059
8539
  }
8060
8540
  },
8061
8541
  caption: {
8062
- fontFamily: "Roboto",
8542
+ fontFamily: 'Roboto',
8063
8543
  fontSize: 11,
8064
8544
  fontWeight: 400,
8065
8545
  letterSpacing: 0.4,
@@ -8069,7 +8549,7 @@ const typography = {
8069
8549
  }
8070
8550
  },
8071
8551
  overline: {
8072
- fontFamily: "Roboto",
8552
+ fontFamily: 'Roboto',
8073
8553
  fontSize: 11,
8074
8554
  fontWeight: 400,
8075
8555
  letterSpacing: 1,
@@ -8079,7 +8559,7 @@ const typography = {
8079
8559
  }
8080
8560
  },
8081
8561
  h6: {
8082
- fontFamily: "Nunito",
8562
+ fontFamily: 'Nunito',
8083
8563
  fontSize: 16,
8084
8564
  fontWeight: 600,
8085
8565
  lineHeight: 1.6,
@@ -8088,44 +8568,44 @@ const typography = {
8088
8568
  }
8089
8569
  },
8090
8570
  h5: {
8091
- fontFamily: "Nunito",
8571
+ fontFamily: 'Nunito',
8092
8572
  fontSize: 18,
8093
8573
  fontWeight: 600,
8094
8574
  lineHeight: 1.8
8095
8575
  },
8096
8576
  h4: {
8097
- fontFamily: "Nunito",
8577
+ fontFamily: 'Nunito',
8098
8578
  fontSize: 20,
8099
8579
  fontWeight: 600,
8100
8580
  letterSpacing: 0.25,
8101
8581
  lineHeight: 1
8102
8582
  },
8103
8583
  h3: {
8104
- fontFamily: "Nunito",
8584
+ fontFamily: 'Nunito',
8105
8585
  fontSize: 28,
8106
8586
  fontWeight: 500,
8107
8587
  lineHeight: 1.2
8108
8588
  },
8109
8589
  h2: {
8110
- fontFamily: "Nunito",
8590
+ fontFamily: 'Nunito',
8111
8591
  fontSize: 32,
8112
8592
  fontWeight: 400,
8113
8593
  letterSpacing: -0.5,
8114
8594
  lineHeight: 1.2
8115
8595
  },
8116
8596
  h1: {
8117
- fontFamily: "Nunito",
8597
+ fontFamily: 'Nunito',
8118
8598
  fontSize: 40,
8119
8599
  fontWeight: 300,
8120
8600
  letterSpacing: -1.5,
8121
8601
  lineHeight: 1.4
8122
8602
  },
8123
8603
  button: {
8124
- fontFamily: "Roboto",
8125
- textTransform: "unset",
8604
+ fontFamily: 'Roboto',
8605
+ textTransform: 'unset',
8126
8606
  fontWeightLight: 300,
8127
8607
  fontSize: 13,
8128
- lineHeight: "normal",
8608
+ lineHeight: 'normal',
8129
8609
  '@media(max-width: 885px)': {
8130
8610
  fontSize: 14
8131
8611
  }
@@ -8141,20 +8621,7 @@ const themeOptions = {
8141
8621
  breakpoints
8142
8622
  };
8143
8623
 
8144
- const SincoTheme = createTheme(Object.assign({}, themeOptions, {
8145
- typography: {
8146
- body3: {
8147
- fontFamily: "Roboto",
8148
- fontWeight: 310,
8149
- fontSize: 12,
8150
- letterSpacing: 0.17,
8151
- lineHeight: 1.2,
8152
- [breakpoints.down("md")]: {
8153
- fontSize: 11
8154
- }
8155
- }
8156
- }
8157
- }));
8624
+ const SincoTheme = createTheme(Object.assign({}, themeOptions));
8158
8625
 
8159
8626
  var wellKnownSymbol$2 = wellKnownSymbol$4;
8160
8627
 
@@ -8665,6 +9132,673 @@ fixRegExpWellKnownSymbolLogic('search', function (SEARCH, nativeSearch, maybeCal
8665
9132
  ];
8666
9133
  });
8667
9134
 
9135
+ function getPaperUtilityClass(slot) {
9136
+ return generateUtilityClass('MuiPaper', slot);
9137
+ }
9138
+ 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']);
9139
+
9140
+ const _excluded$4 = ["className", "component", "elevation", "square", "variant"];
9141
+ const useUtilityClasses$4 = ownerState => {
9142
+ const {
9143
+ square,
9144
+ elevation,
9145
+ variant,
9146
+ classes
9147
+ } = ownerState;
9148
+ const slots = {
9149
+ root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]
9150
+ };
9151
+ return composeClasses(slots, getPaperUtilityClass, classes);
9152
+ };
9153
+ const PaperRoot = styled$1('div', {
9154
+ name: 'MuiPaper',
9155
+ slot: 'Root',
9156
+ overridesResolver: (props, styles) => {
9157
+ const {
9158
+ ownerState
9159
+ } = props;
9160
+ return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
9161
+ }
9162
+ })(({
9163
+ theme,
9164
+ ownerState
9165
+ }) => {
9166
+ var _theme$vars$overlays;
9167
+ return _extends({
9168
+ backgroundColor: (theme.vars || theme).palette.background.paper,
9169
+ color: (theme.vars || theme).palette.text.primary,
9170
+ transition: theme.transitions.create('box-shadow')
9171
+ }, !ownerState.square && {
9172
+ borderRadius: theme.shape.borderRadius
9173
+ }, ownerState.variant === 'outlined' && {
9174
+ border: `1px solid ${(theme.vars || theme).palette.divider}`
9175
+ }, ownerState.variant === 'elevation' && _extends({
9176
+ boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
9177
+ }, !theme.vars && theme.palette.mode === 'dark' && {
9178
+ backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha$1(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha$1(ownerState.elevation))})`
9179
+ }, theme.vars && {
9180
+ backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
9181
+ }));
9182
+ });
9183
+ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
9184
+ const props = useThemeProps({
9185
+ props: inProps,
9186
+ name: 'MuiPaper'
9187
+ });
9188
+ const {
9189
+ className,
9190
+ component = 'div',
9191
+ elevation = 1,
9192
+ square = false,
9193
+ variant = 'elevation'
9194
+ } = props,
9195
+ other = _objectWithoutPropertiesLoose(props, _excluded$4);
9196
+ const ownerState = _extends({}, props, {
9197
+ component,
9198
+ elevation,
9199
+ square,
9200
+ variant
9201
+ });
9202
+ const classes = useUtilityClasses$4(ownerState);
9203
+ if (process.env.NODE_ENV !== 'production') {
9204
+ // eslint-disable-next-line react-hooks/rules-of-hooks
9205
+ const theme = useTheme();
9206
+ if (theme.shadows[elevation] === undefined) {
9207
+ 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'));
9208
+ }
9209
+ }
9210
+ return /*#__PURE__*/jsx(PaperRoot, _extends({
9211
+ as: component,
9212
+ ownerState: ownerState,
9213
+ className: clsx(classes.root, className),
9214
+ ref: ref
9215
+ }, other));
9216
+ });
9217
+ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ = {
9218
+ // ----------------------------- Warning --------------------------------
9219
+ // | These PropTypes are generated from the TypeScript type definitions |
9220
+ // | To update them edit the d.ts file and run "yarn proptypes" |
9221
+ // ----------------------------------------------------------------------
9222
+ /**
9223
+ * The content of the component.
9224
+ */
9225
+ children: PropTypes.node,
9226
+ /**
9227
+ * Override or extend the styles applied to the component.
9228
+ */
9229
+ classes: PropTypes.object,
9230
+ /**
9231
+ * @ignore
9232
+ */
9233
+ className: PropTypes.string,
9234
+ /**
9235
+ * The component used for the root node.
9236
+ * Either a string to use a HTML element or a component.
9237
+ */
9238
+ component: PropTypes.elementType,
9239
+ /**
9240
+ * Shadow depth, corresponds to `dp` in the spec.
9241
+ * It accepts values between 0 and 24 inclusive.
9242
+ * @default 1
9243
+ */
9244
+ elevation: chainPropTypes(integerPropType, props => {
9245
+ const {
9246
+ elevation,
9247
+ variant
9248
+ } = props;
9249
+ if (elevation > 0 && variant === 'outlined') {
9250
+ return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
9251
+ }
9252
+ return null;
9253
+ }),
9254
+ /**
9255
+ * If `true`, rounded corners are disabled.
9256
+ * @default false
9257
+ */
9258
+ square: PropTypes.bool,
9259
+ /**
9260
+ * The system prop that allows defining system overrides as well as additional CSS styles.
9261
+ */
9262
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
9263
+ /**
9264
+ * The variant to use.
9265
+ * @default 'elevation'
9266
+ */
9267
+ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])
9268
+ } : void 0;
9269
+ var Paper$1 = Paper;
9270
+
9271
+ function getTypographyUtilityClass(slot) {
9272
+ return generateUtilityClass('MuiTypography', slot);
9273
+ }
9274
+ generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
9275
+
9276
+ const _excluded$3 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
9277
+ const useUtilityClasses$3 = ownerState => {
9278
+ const {
9279
+ align,
9280
+ gutterBottom,
9281
+ noWrap,
9282
+ paragraph,
9283
+ variant,
9284
+ classes
9285
+ } = ownerState;
9286
+ const slots = {
9287
+ root: ['root', variant, ownerState.align !== 'inherit' && `align${capitalize(align)}`, gutterBottom && 'gutterBottom', noWrap && 'noWrap', paragraph && 'paragraph']
9288
+ };
9289
+ return composeClasses(slots, getTypographyUtilityClass, classes);
9290
+ };
9291
+ const TypographyRoot = styled$1('span', {
9292
+ name: 'MuiTypography',
9293
+ slot: 'Root',
9294
+ overridesResolver: (props, styles) => {
9295
+ const {
9296
+ ownerState
9297
+ } = props;
9298
+ 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];
9299
+ }
9300
+ })(({
9301
+ theme,
9302
+ ownerState
9303
+ }) => _extends({
9304
+ margin: 0
9305
+ }, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
9306
+ textAlign: ownerState.align
9307
+ }, ownerState.noWrap && {
9308
+ overflow: 'hidden',
9309
+ textOverflow: 'ellipsis',
9310
+ whiteSpace: 'nowrap'
9311
+ }, ownerState.gutterBottom && {
9312
+ marginBottom: '0.35em'
9313
+ }, ownerState.paragraph && {
9314
+ marginBottom: 16
9315
+ }));
9316
+ const defaultVariantMapping = {
9317
+ h1: 'h1',
9318
+ h2: 'h2',
9319
+ h3: 'h3',
9320
+ h4: 'h4',
9321
+ h5: 'h5',
9322
+ h6: 'h6',
9323
+ subtitle1: 'h6',
9324
+ subtitle2: 'h6',
9325
+ body1: 'p',
9326
+ body2: 'p',
9327
+ inherit: 'p'
9328
+ };
9329
+
9330
+ // TODO v6: deprecate these color values in v5.x and remove the transformation in v6
9331
+ const colorTransformations = {
9332
+ primary: 'primary.main',
9333
+ textPrimary: 'text.primary',
9334
+ secondary: 'secondary.main',
9335
+ textSecondary: 'text.secondary',
9336
+ error: 'error.main'
9337
+ };
9338
+ const transformDeprecatedColors = color => {
9339
+ return colorTransformations[color] || color;
9340
+ };
9341
+ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
9342
+ const themeProps = useThemeProps({
9343
+ props: inProps,
9344
+ name: 'MuiTypography'
9345
+ });
9346
+ const color = transformDeprecatedColors(themeProps.color);
9347
+ const props = extendSxProp(_extends({}, themeProps, {
9348
+ color
9349
+ }));
9350
+ const {
9351
+ align = 'inherit',
9352
+ className,
9353
+ component,
9354
+ gutterBottom = false,
9355
+ noWrap = false,
9356
+ paragraph = false,
9357
+ variant = 'body1',
9358
+ variantMapping = defaultVariantMapping
9359
+ } = props,
9360
+ other = _objectWithoutPropertiesLoose(props, _excluded$3);
9361
+ const ownerState = _extends({}, props, {
9362
+ align,
9363
+ color,
9364
+ className,
9365
+ component,
9366
+ gutterBottom,
9367
+ noWrap,
9368
+ paragraph,
9369
+ variant,
9370
+ variantMapping
9371
+ });
9372
+ const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
9373
+ const classes = useUtilityClasses$3(ownerState);
9374
+ return /*#__PURE__*/jsx(TypographyRoot, _extends({
9375
+ as: Component,
9376
+ ref: ref,
9377
+ ownerState: ownerState,
9378
+ className: clsx(classes.root, className)
9379
+ }, other));
9380
+ });
9381
+ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
9382
+ // ----------------------------- Warning --------------------------------
9383
+ // | These PropTypes are generated from the TypeScript type definitions |
9384
+ // | To update them edit the d.ts file and run "yarn proptypes" |
9385
+ // ----------------------------------------------------------------------
9386
+ /**
9387
+ * Set the text-align on the component.
9388
+ * @default 'inherit'
9389
+ */
9390
+ align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),
9391
+ /**
9392
+ * The content of the component.
9393
+ */
9394
+ children: PropTypes.node,
9395
+ /**
9396
+ * Override or extend the styles applied to the component.
9397
+ */
9398
+ classes: PropTypes.object,
9399
+ /**
9400
+ * @ignore
9401
+ */
9402
+ className: PropTypes.string,
9403
+ /**
9404
+ * The component used for the root node.
9405
+ * Either a string to use a HTML element or a component.
9406
+ */
9407
+ component: PropTypes.elementType,
9408
+ /**
9409
+ * If `true`, the text will have a bottom margin.
9410
+ * @default false
9411
+ */
9412
+ gutterBottom: PropTypes.bool,
9413
+ /**
9414
+ * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
9415
+ *
9416
+ * Note that text overflow can only happen with block or inline-block level elements
9417
+ * (the element needs to have a width in order to overflow).
9418
+ * @default false
9419
+ */
9420
+ noWrap: PropTypes.bool,
9421
+ /**
9422
+ * If `true`, the element will be a paragraph element.
9423
+ * @default false
9424
+ */
9425
+ paragraph: PropTypes.bool,
9426
+ /**
9427
+ * The system prop that allows defining system overrides as well as additional CSS styles.
9428
+ */
9429
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
9430
+ /**
9431
+ * Applies the theme typography styles.
9432
+ * @default 'body1'
9433
+ */
9434
+ 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]),
9435
+ /**
9436
+ * The component maps the variant prop to a range of different HTML element types.
9437
+ * For instance, subtitle1 to `<h6>`.
9438
+ * If you wish to change that mapping, you can provide your own.
9439
+ * Alternatively, you can use the `component` prop.
9440
+ * @default {
9441
+ * h1: 'h1',
9442
+ * h2: 'h2',
9443
+ * h3: 'h3',
9444
+ * h4: 'h4',
9445
+ * h5: 'h5',
9446
+ * h6: 'h6',
9447
+ * subtitle1: 'h6',
9448
+ * subtitle2: 'h6',
9449
+ * body1: 'p',
9450
+ * body2: 'p',
9451
+ * inherit: 'p',
9452
+ * }
9453
+ */
9454
+ variantMapping: PropTypes /* @typescript-to-proptypes-ignore */.object
9455
+ } : void 0;
9456
+ var Typography$1 = Typography;
9457
+
9458
+ function getCardUtilityClass(slot) {
9459
+ return generateUtilityClass('MuiCard', slot);
9460
+ }
9461
+ generateUtilityClasses('MuiCard', ['root']);
9462
+
9463
+ const _excluded$2 = ["className", "raised"];
9464
+ const useUtilityClasses$2 = ownerState => {
9465
+ const {
9466
+ classes
9467
+ } = ownerState;
9468
+ const slots = {
9469
+ root: ['root']
9470
+ };
9471
+ return composeClasses(slots, getCardUtilityClass, classes);
9472
+ };
9473
+ const CardRoot = styled$1(Paper$1, {
9474
+ name: 'MuiCard',
9475
+ slot: 'Root',
9476
+ overridesResolver: (props, styles) => styles.root
9477
+ })(() => {
9478
+ return {
9479
+ overflow: 'hidden'
9480
+ };
9481
+ });
9482
+ const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
9483
+ const props = useThemeProps({
9484
+ props: inProps,
9485
+ name: 'MuiCard'
9486
+ });
9487
+ const {
9488
+ className,
9489
+ raised = false
9490
+ } = props,
9491
+ other = _objectWithoutPropertiesLoose(props, _excluded$2);
9492
+ const ownerState = _extends({}, props, {
9493
+ raised
9494
+ });
9495
+ const classes = useUtilityClasses$2(ownerState);
9496
+ return /*#__PURE__*/jsx(CardRoot, _extends({
9497
+ className: clsx(classes.root, className),
9498
+ elevation: raised ? 8 : undefined,
9499
+ ref: ref,
9500
+ ownerState: ownerState
9501
+ }, other));
9502
+ });
9503
+ process.env.NODE_ENV !== "production" ? Card.propTypes /* remove-proptypes */ = {
9504
+ // ----------------------------- Warning --------------------------------
9505
+ // | These PropTypes are generated from the TypeScript type definitions |
9506
+ // | To update them edit the d.ts file and run "yarn proptypes" |
9507
+ // ----------------------------------------------------------------------
9508
+ /**
9509
+ * The content of the component.
9510
+ */
9511
+ children: PropTypes.node,
9512
+ /**
9513
+ * Override or extend the styles applied to the component.
9514
+ */
9515
+ classes: PropTypes.object,
9516
+ /**
9517
+ * @ignore
9518
+ */
9519
+ className: PropTypes.string,
9520
+ /**
9521
+ * If `true`, the card will use raised styling.
9522
+ * @default false
9523
+ */
9524
+ raised: chainPropTypes(PropTypes.bool, props => {
9525
+ if (props.raised && props.variant === 'outlined') {
9526
+ return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
9527
+ }
9528
+ return null;
9529
+ }),
9530
+ /**
9531
+ * The system prop that allows defining system overrides as well as additional CSS styles.
9532
+ */
9533
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
9534
+ } : void 0;
9535
+ var Card$1 = Card;
9536
+
9537
+ function getCardContentUtilityClass(slot) {
9538
+ return generateUtilityClass('MuiCardContent', slot);
9539
+ }
9540
+ generateUtilityClasses('MuiCardContent', ['root']);
9541
+
9542
+ const _excluded$1 = ["className", "component"];
9543
+ const useUtilityClasses$1 = ownerState => {
9544
+ const {
9545
+ classes
9546
+ } = ownerState;
9547
+ const slots = {
9548
+ root: ['root']
9549
+ };
9550
+ return composeClasses(slots, getCardContentUtilityClass, classes);
9551
+ };
9552
+ const CardContentRoot = styled$1('div', {
9553
+ name: 'MuiCardContent',
9554
+ slot: 'Root',
9555
+ overridesResolver: (props, styles) => styles.root
9556
+ })(() => {
9557
+ return {
9558
+ padding: 16,
9559
+ '&:last-child': {
9560
+ paddingBottom: 24
9561
+ }
9562
+ };
9563
+ });
9564
+ const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
9565
+ const props = useThemeProps({
9566
+ props: inProps,
9567
+ name: 'MuiCardContent'
9568
+ });
9569
+ const {
9570
+ className,
9571
+ component = 'div'
9572
+ } = props,
9573
+ other = _objectWithoutPropertiesLoose(props, _excluded$1);
9574
+ const ownerState = _extends({}, props, {
9575
+ component
9576
+ });
9577
+ const classes = useUtilityClasses$1(ownerState);
9578
+ return /*#__PURE__*/jsx(CardContentRoot, _extends({
9579
+ as: component,
9580
+ className: clsx(classes.root, className),
9581
+ ownerState: ownerState,
9582
+ ref: ref
9583
+ }, other));
9584
+ });
9585
+ process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptypes */ = {
9586
+ // ----------------------------- Warning --------------------------------
9587
+ // | These PropTypes are generated from the TypeScript type definitions |
9588
+ // | To update them edit the d.ts file and run "yarn proptypes" |
9589
+ // ----------------------------------------------------------------------
9590
+ /**
9591
+ * The content of the component.
9592
+ */
9593
+ children: PropTypes.node,
9594
+ /**
9595
+ * Override or extend the styles applied to the component.
9596
+ */
9597
+ classes: PropTypes.object,
9598
+ /**
9599
+ * @ignore
9600
+ */
9601
+ className: PropTypes.string,
9602
+ /**
9603
+ * The component used for the root node.
9604
+ * Either a string to use a HTML element or a component.
9605
+ */
9606
+ component: PropTypes.elementType,
9607
+ /**
9608
+ * The system prop that allows defining system overrides as well as additional CSS styles.
9609
+ */
9610
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
9611
+ } : void 0;
9612
+ var CardContent$1 = CardContent;
9613
+
9614
+ function getCardMediaUtilityClass(slot) {
9615
+ return generateUtilityClass('MuiCardMedia', slot);
9616
+ }
9617
+ generateUtilityClasses('MuiCardMedia', ['root', 'media', 'img']);
9618
+
9619
+ const _excluded = ["children", "className", "component", "image", "src", "style"];
9620
+ const useUtilityClasses = ownerState => {
9621
+ const {
9622
+ classes,
9623
+ isMediaComponent,
9624
+ isImageComponent
9625
+ } = ownerState;
9626
+ const slots = {
9627
+ root: ['root', isMediaComponent && 'media', isImageComponent && 'img']
9628
+ };
9629
+ return composeClasses(slots, getCardMediaUtilityClass, classes);
9630
+ };
9631
+ const CardMediaRoot = styled$1('div', {
9632
+ name: 'MuiCardMedia',
9633
+ slot: 'Root',
9634
+ overridesResolver: (props, styles) => {
9635
+ const {
9636
+ ownerState
9637
+ } = props;
9638
+ const {
9639
+ isMediaComponent,
9640
+ isImageComponent
9641
+ } = ownerState;
9642
+ return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img];
9643
+ }
9644
+ })(({
9645
+ ownerState
9646
+ }) => _extends({
9647
+ display: 'block',
9648
+ backgroundSize: 'cover',
9649
+ backgroundRepeat: 'no-repeat',
9650
+ backgroundPosition: 'center'
9651
+ }, ownerState.isMediaComponent && {
9652
+ width: '100%'
9653
+ }, ownerState.isImageComponent && {
9654
+ // ⚠️ object-fit is not supported by IE11.
9655
+ objectFit: 'cover'
9656
+ }));
9657
+ const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
9658
+ const IMAGE_COMPONENTS = ['picture', 'img'];
9659
+ const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref) {
9660
+ const props = useThemeProps({
9661
+ props: inProps,
9662
+ name: 'MuiCardMedia'
9663
+ });
9664
+ const {
9665
+ children,
9666
+ className,
9667
+ component = 'div',
9668
+ image,
9669
+ src,
9670
+ style
9671
+ } = props,
9672
+ other = _objectWithoutPropertiesLoose(props, _excluded);
9673
+ const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
9674
+ const composedStyle = !isMediaComponent && image ? _extends({
9675
+ backgroundImage: `url("${image}")`
9676
+ }, style) : style;
9677
+ const ownerState = _extends({}, props, {
9678
+ component,
9679
+ isMediaComponent,
9680
+ isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
9681
+ });
9682
+ const classes = useUtilityClasses(ownerState);
9683
+ return /*#__PURE__*/jsx(CardMediaRoot, _extends({
9684
+ className: clsx(classes.root, className),
9685
+ as: component,
9686
+ role: !isMediaComponent && image ? 'img' : undefined,
9687
+ ref: ref,
9688
+ style: composedStyle,
9689
+ ownerState: ownerState,
9690
+ src: isMediaComponent ? image || src : undefined
9691
+ }, other, {
9692
+ children: children
9693
+ }));
9694
+ });
9695
+ process.env.NODE_ENV !== "production" ? CardMedia.propTypes /* remove-proptypes */ = {
9696
+ // ----------------------------- Warning --------------------------------
9697
+ // | These PropTypes are generated from the TypeScript type definitions |
9698
+ // | To update them edit the d.ts file and run "yarn proptypes" |
9699
+ // ----------------------------------------------------------------------
9700
+ /**
9701
+ * The content of the component.
9702
+ */
9703
+ children: chainPropTypes(PropTypes.node, props => {
9704
+ if (!props.children && !props.image && !props.src && !props.component) {
9705
+ return new Error('MUI: Either `children`, `image`, `src` or `component` prop must be specified.');
9706
+ }
9707
+ return null;
9708
+ }),
9709
+ /**
9710
+ * Override or extend the styles applied to the component.
9711
+ */
9712
+ classes: PropTypes.object,
9713
+ /**
9714
+ * @ignore
9715
+ */
9716
+ className: PropTypes.string,
9717
+ /**
9718
+ * The component used for the root node.
9719
+ * Either a string to use a HTML element or a component.
9720
+ */
9721
+ component: PropTypes.elementType,
9722
+ /**
9723
+ * Image to be displayed as a background image.
9724
+ * Either `image` or `src` prop must be specified.
9725
+ * Note that caller must specify height otherwise the image will not be visible.
9726
+ */
9727
+ image: PropTypes.string,
9728
+ /**
9729
+ * An alias for `image` property.
9730
+ * Available only with media components.
9731
+ * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
9732
+ */
9733
+ src: PropTypes.string,
9734
+ /**
9735
+ * @ignore
9736
+ */
9737
+ style: PropTypes.object,
9738
+ /**
9739
+ * The system prop that allows defining system overrides as well as additional CSS styles.
9740
+ */
9741
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
9742
+ } : void 0;
9743
+ var CardMedia$1 = CardMedia;
9744
+
9745
+ const Stack = createStack({
9746
+ createStyledComponent: styled$1('div', {
9747
+ name: 'MuiStack',
9748
+ slot: 'Root',
9749
+ overridesResolver: (props, styles) => styles.root
9750
+ }),
9751
+ useThemeProps: inProps => useThemeProps({
9752
+ props: inProps,
9753
+ name: 'MuiStack'
9754
+ })
9755
+ });
9756
+ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
9757
+ // ----------------------------- Warning --------------------------------
9758
+ // | These PropTypes are generated from the TypeScript type definitions |
9759
+ // | To update them edit the d.ts file and run "yarn proptypes" |
9760
+ // ----------------------------------------------------------------------
9761
+ /**
9762
+ * The content of the component.
9763
+ */
9764
+ children: PropTypes.node,
9765
+ /**
9766
+ * The component used for the root node.
9767
+ * Either a string to use a HTML element or a component.
9768
+ */
9769
+ component: PropTypes.elementType,
9770
+ /**
9771
+ * Defines the `flex-direction` style property.
9772
+ * It is applied for all screen sizes.
9773
+ * @default 'column'
9774
+ */
9775
+ direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
9776
+ /**
9777
+ * Add an element between each child.
9778
+ */
9779
+ divider: PropTypes.node,
9780
+ /**
9781
+ * Defines the space between immediate children.
9782
+ * @default 0
9783
+ */
9784
+ spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
9785
+ /**
9786
+ * The system prop, which allows defining system overrides as well as additional CSS styles.
9787
+ */
9788
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
9789
+ /**
9790
+ * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
9791
+ *
9792
+ * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
9793
+ * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
9794
+ *
9795
+ * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
9796
+ * @default false
9797
+ */
9798
+ useFlexGap: PropTypes.bool
9799
+ } : void 0;
9800
+ var Stack$1 = Stack;
9801
+
8668
9802
  var UrlImage;
8669
9803
  (function (UrlImage) {
8670
9804
  UrlImage["error"] = "src/assets/images/error.svg";
@@ -8672,5 +9806,50 @@ var UrlImage;
8672
9806
  UrlImage["noresult"] = "src/assets/images/noresult.svg";
8673
9807
  UrlImage["create"] = "src/assets/images/create.svg";
8674
9808
  })(UrlImage || (UrlImage = {}));
9809
+ const EmptyState = ({
9810
+ state: _state = 'create',
9811
+ title,
9812
+ content,
9813
+ actions
9814
+ }) => {
9815
+ return jsx(Card$1, {
9816
+ elevation: 1,
9817
+ children: jsxs(CardContent$1, {
9818
+ sx: {
9819
+ display: 'flex',
9820
+ alignItems: 'center',
9821
+ justifyContent: 'center',
9822
+ flexDirection: 'column',
9823
+ gap: 4
9824
+ },
9825
+ children: [jsx(CardMedia$1, {
9826
+ component: "img",
9827
+ src: UrlImage[_state],
9828
+ sx: {
9829
+ width: 206,
9830
+ height: 187
9831
+ }
9832
+ }), jsxs(Stack$1, {
9833
+ direction: "column",
9834
+ spacing: 2,
9835
+ children: [title && jsx(Typography$1, {
9836
+ variant: "h6",
9837
+ textAlign: "center",
9838
+ children: title
9839
+ }), content && jsx(Typography$1, {
9840
+ variant: "body1",
9841
+ textAlign: "center",
9842
+ color: "text.secondary",
9843
+ children: content
9844
+ }), _state === 'create' && actions && jsx(Stack$1, {
9845
+ direction: "row",
9846
+ spacing: 2,
9847
+ justifyContent: "center",
9848
+ children: actions
9849
+ })]
9850
+ })]
9851
+ })
9852
+ });
9853
+ };
8675
9854
 
8676
- export { SincoTheme, UrlImage };
9855
+ export { EmptyState, SincoTheme, UrlImage };