@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 +1307 -128
- package/package.json +1 -1
- package/src/lib/Components/EmptyState.d.ts +1 -2
- package/src/lib/Theme/index.d.ts +0 -14
- package/src/lib/Theme/typography.d.ts +14 -0
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 {
|
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$
|
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$
|
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$
|
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$
|
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$
|
5523
|
+
const border = style$2({
|
5408
5524
|
prop: 'border',
|
5409
5525
|
themeKey: 'borders',
|
5410
5526
|
transform: borderTransform
|
5411
5527
|
});
|
5412
|
-
const borderTop = style$
|
5528
|
+
const borderTop = style$2({
|
5413
5529
|
prop: 'borderTop',
|
5414
5530
|
themeKey: 'borders',
|
5415
5531
|
transform: borderTransform
|
5416
5532
|
});
|
5417
|
-
const borderRight = style$
|
5533
|
+
const borderRight = style$2({
|
5418
5534
|
prop: 'borderRight',
|
5419
5535
|
themeKey: 'borders',
|
5420
5536
|
transform: borderTransform
|
5421
5537
|
});
|
5422
|
-
const borderBottom = style$
|
5538
|
+
const borderBottom = style$2({
|
5423
5539
|
prop: 'borderBottom',
|
5424
5540
|
themeKey: 'borders',
|
5425
5541
|
transform: borderTransform
|
5426
5542
|
});
|
5427
|
-
const borderLeft = style$
|
5543
|
+
const borderLeft = style$2({
|
5428
5544
|
prop: 'borderLeft',
|
5429
5545
|
themeKey: 'borders',
|
5430
5546
|
transform: borderTransform
|
5431
5547
|
});
|
5432
|
-
const borderColor = style$
|
5548
|
+
const borderColor = style$2({
|
5433
5549
|
prop: 'borderColor',
|
5434
5550
|
themeKey: 'palette'
|
5435
5551
|
});
|
5436
|
-
const borderTopColor = style$
|
5552
|
+
const borderTopColor = style$2({
|
5437
5553
|
prop: 'borderTopColor',
|
5438
5554
|
themeKey: 'palette'
|
5439
5555
|
});
|
5440
|
-
const borderRightColor = style$
|
5556
|
+
const borderRightColor = style$2({
|
5441
5557
|
prop: 'borderRightColor',
|
5442
5558
|
themeKey: 'palette'
|
5443
5559
|
});
|
5444
|
-
const borderBottomColor = style$
|
5560
|
+
const borderBottomColor = style$2({
|
5445
5561
|
prop: 'borderBottomColor',
|
5446
5562
|
themeKey: 'palette'
|
5447
5563
|
});
|
5448
|
-
const borderLeftColor = style$
|
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$
|
5637
|
+
const gridColumn = style$2({
|
5522
5638
|
prop: 'gridColumn'
|
5523
5639
|
});
|
5524
|
-
const gridRow = style$
|
5640
|
+
const gridRow = style$2({
|
5525
5641
|
prop: 'gridRow'
|
5526
5642
|
});
|
5527
|
-
const gridAutoFlow = style$
|
5643
|
+
const gridAutoFlow = style$2({
|
5528
5644
|
prop: 'gridAutoFlow'
|
5529
5645
|
});
|
5530
|
-
const gridAutoColumns = style$
|
5646
|
+
const gridAutoColumns = style$2({
|
5531
5647
|
prop: 'gridAutoColumns'
|
5532
5648
|
});
|
5533
|
-
const gridAutoRows = style$
|
5649
|
+
const gridAutoRows = style$2({
|
5534
5650
|
prop: 'gridAutoRows'
|
5535
5651
|
});
|
5536
|
-
const gridTemplateColumns = style$
|
5652
|
+
const gridTemplateColumns = style$2({
|
5537
5653
|
prop: 'gridTemplateColumns'
|
5538
5654
|
});
|
5539
|
-
const gridTemplateRows = style$
|
5655
|
+
const gridTemplateRows = style$2({
|
5540
5656
|
prop: 'gridTemplateRows'
|
5541
5657
|
});
|
5542
|
-
const gridTemplateAreas = style$
|
5658
|
+
const gridTemplateAreas = style$2({
|
5543
5659
|
prop: 'gridTemplateAreas'
|
5544
5660
|
});
|
5545
|
-
const gridArea = style$
|
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$
|
5672
|
+
const color = style$2({
|
5557
5673
|
prop: 'color',
|
5558
5674
|
themeKey: 'palette',
|
5559
5675
|
transform: paletteTransform
|
5560
5676
|
});
|
5561
|
-
const bgcolor = style$
|
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$
|
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$
|
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$
|
5711
|
+
const minWidth = style$2({
|
5596
5712
|
prop: 'minWidth',
|
5597
5713
|
transform: sizingTransform
|
5598
5714
|
});
|
5599
|
-
const height = style$
|
5715
|
+
const height = style$2({
|
5600
5716
|
prop: 'height',
|
5601
5717
|
transform: sizingTransform
|
5602
5718
|
});
|
5603
|
-
const maxHeight = style$
|
5719
|
+
const maxHeight = style$2({
|
5604
5720
|
prop: 'maxHeight',
|
5605
5721
|
transform: sizingTransform
|
5606
5722
|
});
|
5607
|
-
const minHeight = style$
|
5723
|
+
const minHeight = style$2({
|
5608
5724
|
prop: 'minHeight',
|
5609
5725
|
transform: sizingTransform
|
5610
5726
|
});
|
5611
|
-
style$
|
5727
|
+
style$2({
|
5612
5728
|
prop: 'size',
|
5613
5729
|
cssProperty: 'width',
|
5614
5730
|
transform: sizingTransform
|
5615
5731
|
});
|
5616
|
-
style$
|
5732
|
+
style$2({
|
5617
5733
|
prop: 'size',
|
5618
5734
|
cssProperty: 'height',
|
5619
5735
|
transform: sizingTransform
|
5620
5736
|
});
|
5621
|
-
const boxSizing = style$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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
|
-
|
7657
|
-
|
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: '
|
8059
|
+
padding: '6px 5px'
|
7661
8060
|
},
|
7662
8061
|
sizeMedium: {
|
7663
|
-
padding: '
|
8062
|
+
padding: '8.5px 8px',
|
8063
|
+
".MuiSvgIcon-fontSizeMedium": {
|
8064
|
+
height: 18,
|
8065
|
+
width: 18
|
8066
|
+
}
|
7664
8067
|
},
|
7665
8068
|
sizeLarge: {
|
7666
|
-
padding: '10.5px
|
7667
|
-
fontSize: 14
|
7668
|
-
|
7669
|
-
|
7670
|
-
|
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
|
-
|
7926
|
-
|
7927
|
-
|
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
|
-
|
7932
|
-
|
7933
|
-
|
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
|
-
|
7944
|
-
|
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
|
-
|
7949
|
-
|
7950
|
-
|
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
|
-
|
7955
|
-
|
7956
|
-
|
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
|
-
|
7961
|
-
|
7962
|
-
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
8571
|
+
fontFamily: 'Nunito',
|
8092
8572
|
fontSize: 18,
|
8093
8573
|
fontWeight: 600,
|
8094
8574
|
lineHeight: 1.8
|
8095
8575
|
},
|
8096
8576
|
h4: {
|
8097
|
-
fontFamily:
|
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:
|
8584
|
+
fontFamily: 'Nunito',
|
8105
8585
|
fontSize: 28,
|
8106
8586
|
fontWeight: 500,
|
8107
8587
|
lineHeight: 1.2
|
8108
8588
|
},
|
8109
8589
|
h2: {
|
8110
|
-
fontFamily:
|
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:
|
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:
|
8125
|
-
textTransform:
|
8604
|
+
fontFamily: 'Roboto',
|
8605
|
+
textTransform: 'unset',
|
8126
8606
|
fontWeightLight: 300,
|
8127
8607
|
fontSize: 13,
|
8128
|
-
lineHeight:
|
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 };
|