@sinco/react 1.0.4-rc.6 → 1.0.4-rc.8
Sign up to get free protection for your applications and to get access to all the features.
- 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 };
|