@sinco/react 1.0.11-rc.10 → 1.0.11-rc.12
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +57 -0
- package/index.js +3086 -1066
- package/package.json +1 -1
- package/src/lib/Components/Drawer.d.ts +7 -9
- package/src/lib/Components/PageHeader.d.ts +25 -0
- package/src/lib/Components/ToastNofitication.d.ts +24 -0
- package/src/lib/Components/index.d.ts +2 -0
- package/src/lib/Theme/breakpoints.d.ts +1 -2
- package/src/lib/Theme/components.d.ts +11 -2
- package/src/lib/Theme/index.d.ts +0 -14
- package/src/lib/Theme/mixins.d.ts +1 -2
- package/src/lib/Theme/palette.d.ts +1 -2
- package/src/lib/Theme/shadows.d.ts +1 -2
- package/src/lib/Theme/typography.d.ts +18 -2
- package/src/lib/Utils/dynamicColor.d.ts +1 -2
package/index.js
CHANGED
@@ -6199,7 +6199,7 @@ const internal_processStyles = (tag, processor) => {
|
|
6199
6199
|
}
|
6200
6200
|
};
|
6201
6201
|
|
6202
|
-
const _excluded$
|
6202
|
+
const _excluded$w = ["values", "unit", "step"];
|
6203
6203
|
const sortBreakpointsValues = values => {
|
6204
6204
|
const breakpointsAsArray = Object.keys(values).map(key => ({
|
6205
6205
|
key,
|
@@ -6234,7 +6234,7 @@ function createBreakpoints(breakpoints) {
|
|
6234
6234
|
unit = 'px',
|
6235
6235
|
step = 5
|
6236
6236
|
} = breakpoints,
|
6237
|
-
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$
|
6237
|
+
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$w);
|
6238
6238
|
const sortedValues = sortBreakpointsValues(values);
|
6239
6239
|
const keys = Object.keys(sortedValues);
|
6240
6240
|
function up(key) {
|
@@ -7318,7 +7318,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
|
|
7318
7318
|
styleFunctionSx.filterProps = ['sx'];
|
7319
7319
|
var styleFunctionSx$1 = styleFunctionSx;
|
7320
7320
|
|
7321
|
-
const _excluded$
|
7321
|
+
const _excluded$v = ["breakpoints", "palette", "spacing", "shape"];
|
7322
7322
|
function createTheme$1(options = {}, ...args) {
|
7323
7323
|
const {
|
7324
7324
|
breakpoints: breakpointsInput = {},
|
@@ -7326,7 +7326,7 @@ function createTheme$1(options = {}, ...args) {
|
|
7326
7326
|
spacing: spacingInput,
|
7327
7327
|
shape: shapeInput = {}
|
7328
7328
|
} = options,
|
7329
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
7329
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$v);
|
7330
7330
|
const breakpoints = createBreakpoints(breakpointsInput);
|
7331
7331
|
const spacing = createSpacing(spacingInput);
|
7332
7332
|
let muiTheme = deepmerge({
|
@@ -7364,7 +7364,7 @@ function useTheme$2(defaultTheme = systemDefaultTheme$1) {
|
|
7364
7364
|
return useTheme$3(defaultTheme);
|
7365
7365
|
}
|
7366
7366
|
|
7367
|
-
const _excluded$
|
7367
|
+
const _excluded$u = ["sx"];
|
7368
7368
|
const splitProps = props => {
|
7369
7369
|
var _props$theme$unstable, _props$theme;
|
7370
7370
|
const result = {
|
@@ -7385,7 +7385,7 @@ function extendSxProp(props) {
|
|
7385
7385
|
const {
|
7386
7386
|
sx: inSx
|
7387
7387
|
} = props,
|
7388
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
7388
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$u);
|
7389
7389
|
const {
|
7390
7390
|
systemProps,
|
7391
7391
|
otherProps
|
@@ -7411,7 +7411,7 @@ function extendSxProp(props) {
|
|
7411
7411
|
|
7412
7412
|
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}
|
7413
7413
|
|
7414
|
-
const _excluded$
|
7414
|
+
const _excluded$t = ["className", "component"];
|
7415
7415
|
function createBox(options = {}) {
|
7416
7416
|
const {
|
7417
7417
|
themeId,
|
@@ -7429,7 +7429,7 @@ function createBox(options = {}) {
|
|
7429
7429
|
className,
|
7430
7430
|
component = 'div'
|
7431
7431
|
} = _extendSxProp,
|
7432
|
-
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$
|
7432
|
+
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$t);
|
7433
7433
|
return /*#__PURE__*/jsx(BoxRoot, _extends({
|
7434
7434
|
as: component,
|
7435
7435
|
ref: ref,
|
@@ -7440,7 +7440,7 @@ function createBox(options = {}) {
|
|
7440
7440
|
return Box;
|
7441
7441
|
}
|
7442
7442
|
|
7443
|
-
const _excluded$
|
7443
|
+
const _excluded$s = ["variant"];
|
7444
7444
|
function isEmpty$1(string) {
|
7445
7445
|
return string.length === 0;
|
7446
7446
|
}
|
@@ -7454,7 +7454,7 @@ function propsToClassKey(props) {
|
|
7454
7454
|
const {
|
7455
7455
|
variant
|
7456
7456
|
} = props,
|
7457
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
7457
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$s);
|
7458
7458
|
let classKey = variant || '';
|
7459
7459
|
Object.keys(other).sort().forEach(key => {
|
7460
7460
|
if (key === 'color') {
|
@@ -7466,7 +7466,7 @@ function propsToClassKey(props) {
|
|
7466
7466
|
return classKey;
|
7467
7467
|
}
|
7468
7468
|
|
7469
|
-
const _excluded$
|
7469
|
+
const _excluded$r = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
|
7470
7470
|
function isEmpty(obj) {
|
7471
7471
|
return Object.keys(obj).length === 0;
|
7472
7472
|
}
|
@@ -7561,7 +7561,7 @@ function createStyled(input = {}) {
|
|
7561
7561
|
skipSx: inputSkipSx,
|
7562
7562
|
overridesResolver
|
7563
7563
|
} = inputOptions,
|
7564
|
-
options = _objectWithoutPropertiesLoose(inputOptions, _excluded$
|
7564
|
+
options = _objectWithoutPropertiesLoose(inputOptions, _excluded$r);
|
7565
7565
|
|
7566
7566
|
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
|
7567
7567
|
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
|
@@ -7941,6 +7941,17 @@ function lighten(color, coefficient) {
|
|
7941
7941
|
return recomposeColor(color);
|
7942
7942
|
}
|
7943
7943
|
|
7944
|
+
/**
|
7945
|
+
* Darken or lighten a color, depending on its luminance.
|
7946
|
+
* Light colors are darkened, dark colors are lightened.
|
7947
|
+
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
7948
|
+
* @param {number} coefficient=0.15 - multiplier in the range 0 - 1
|
7949
|
+
* @returns {string} A CSS color string. Hex input values are returned as rgb
|
7950
|
+
*/
|
7951
|
+
function emphasize(color, coefficient = 0.15) {
|
7952
|
+
return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
|
7953
|
+
}
|
7954
|
+
|
7944
7955
|
const ThemeContext = /*#__PURE__*/React.createContext(null);
|
7945
7956
|
if (process.env.NODE_ENV !== 'production') {
|
7946
7957
|
ThemeContext.displayName = 'ThemeContext';
|
@@ -8091,7 +8102,7 @@ if (process.env.NODE_ENV !== 'production') {
|
|
8091
8102
|
process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
|
8092
8103
|
}
|
8093
8104
|
|
8094
|
-
const _excluded$
|
8105
|
+
const _excluded$q = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
8095
8106
|
const defaultTheme$3 = createTheme$1();
|
8096
8107
|
// widening Theme to any so that the consumer can own the theme structure.
|
8097
8108
|
const defaultCreateStyledComponent = systemStyled('div', {
|
@@ -8220,7 +8231,7 @@ function createStack(options = {}) {
|
|
8220
8231
|
className,
|
8221
8232
|
useFlexGap = false
|
8222
8233
|
} = props,
|
8223
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
8234
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$q);
|
8224
8235
|
const ownerState = {
|
8225
8236
|
direction,
|
8226
8237
|
spacing,
|
@@ -8394,7 +8405,7 @@ const green = {
|
|
8394
8405
|
};
|
8395
8406
|
var green$1 = green;
|
8396
8407
|
|
8397
|
-
const _excluded$
|
8408
|
+
const _excluded$p = ["mode", "contrastThreshold", "tonalOffset"];
|
8398
8409
|
const light = {
|
8399
8410
|
// The colors used to style the text.
|
8400
8411
|
text: {
|
@@ -8563,7 +8574,7 @@ function createPalette(palette) {
|
|
8563
8574
|
contrastThreshold = 3,
|
8564
8575
|
tonalOffset = 0.2
|
8565
8576
|
} = palette,
|
8566
|
-
other = _objectWithoutPropertiesLoose(palette, _excluded$
|
8577
|
+
other = _objectWithoutPropertiesLoose(palette, _excluded$p);
|
8567
8578
|
const primary = palette.primary || getDefaultPrimary(mode);
|
8568
8579
|
const secondary = palette.secondary || getDefaultSecondary(mode);
|
8569
8580
|
const error = palette.error || getDefaultError(mode);
|
@@ -8687,7 +8698,7 @@ const theme2 = createTheme({ palette: {
|
|
8687
8698
|
return paletteOutput;
|
8688
8699
|
}
|
8689
8700
|
|
8690
|
-
const _excluded$
|
8701
|
+
const _excluded$o = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
|
8691
8702
|
function round(value) {
|
8692
8703
|
return Math.round(value * 1e5) / 1e5;
|
8693
8704
|
}
|
@@ -8718,7 +8729,7 @@ function createTypography(palette, typography) {
|
|
8718
8729
|
allVariants,
|
8719
8730
|
pxToRem: pxToRem2
|
8720
8731
|
} = _ref,
|
8721
|
-
other = _objectWithoutPropertiesLoose(_ref, _excluded$
|
8732
|
+
other = _objectWithoutPropertiesLoose(_ref, _excluded$o);
|
8722
8733
|
if (process.env.NODE_ENV !== 'production') {
|
8723
8734
|
if (typeof fontSize !== 'number') {
|
8724
8735
|
console.error('MUI: `fontSize` is required to be a number.');
|
@@ -8785,7 +8796,7 @@ function createShadow(...px) {
|
|
8785
8796
|
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)];
|
8786
8797
|
var shadows$1 = shadows;
|
8787
8798
|
|
8788
|
-
const _excluded$
|
8799
|
+
const _excluded$n = ["duration", "easing", "delay"];
|
8789
8800
|
// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
|
8790
8801
|
// to learn the context in which each easing should be used.
|
8791
8802
|
const easing = {
|
@@ -8836,7 +8847,7 @@ function createTransitions(inputTransitions) {
|
|
8836
8847
|
easing: easingOption = mergedEasing.easeInOut,
|
8837
8848
|
delay = 0
|
8838
8849
|
} = options,
|
8839
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
8850
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$n);
|
8840
8851
|
if (process.env.NODE_ENV !== 'production') {
|
8841
8852
|
const isString = value => typeof value === 'string';
|
8842
8853
|
// IE11 support, replace with Number.isNaN
|
@@ -8883,7 +8894,7 @@ const zIndex = {
|
|
8883
8894
|
};
|
8884
8895
|
var zIndex$1 = zIndex;
|
8885
8896
|
|
8886
|
-
const _excluded$
|
8897
|
+
const _excluded$m = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
|
8887
8898
|
function createTheme(options = {}, ...args) {
|
8888
8899
|
const {
|
8889
8900
|
mixins: mixinsInput = {},
|
@@ -8891,7 +8902,7 @@ function createTheme(options = {}, ...args) {
|
|
8891
8902
|
transitions: transitionsInput = {},
|
8892
8903
|
typography: typographyInput = {}
|
8893
8904
|
} = options,
|
8894
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
8905
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$m);
|
8895
8906
|
if (options.vars) {
|
8896
8907
|
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
|
8897
8908
|
Please use another name.` : formatMuiErrorMessage(18));
|
@@ -8981,12 +8992,12 @@ const styled = createStyled({
|
|
8981
8992
|
});
|
8982
8993
|
var styled$1 = styled;
|
8983
8994
|
|
8984
|
-
const _excluded$
|
8995
|
+
const _excluded$l = ["theme"];
|
8985
8996
|
function ThemeProvider(_ref) {
|
8986
8997
|
let {
|
8987
8998
|
theme: themeInput
|
8988
8999
|
} = _ref,
|
8989
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
9000
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
|
8990
9001
|
const scopedTheme = themeInput[THEME_ID];
|
8991
9002
|
return /*#__PURE__*/jsx(ThemeProvider$1, _extends({}, props, {
|
8992
9003
|
themeId: scopedTheme ? THEME_ID : undefined,
|
@@ -9182,7 +9193,7 @@ function mergeSlotProps(parameters) {
|
|
9182
9193
|
};
|
9183
9194
|
}
|
9184
9195
|
|
9185
|
-
const _excluded$
|
9196
|
+
const _excluded$k = ["elementType", "externalSlotProps", "ownerState"];
|
9186
9197
|
/**
|
9187
9198
|
* @ignore - do not document.
|
9188
9199
|
* Builds the props to be passed into the slot of an unstyled component.
|
@@ -9198,7 +9209,7 @@ function useSlotProps(parameters) {
|
|
9198
9209
|
externalSlotProps,
|
9199
9210
|
ownerState
|
9200
9211
|
} = parameters,
|
9201
|
-
rest = _objectWithoutPropertiesLoose(parameters, _excluded$
|
9212
|
+
rest = _objectWithoutPropertiesLoose(parameters, _excluded$k);
|
9202
9213
|
const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
|
9203
9214
|
const {
|
9204
9215
|
props: mergedProps,
|
@@ -9836,8 +9847,8 @@ function getModalUtilityClass(slot) {
|
|
9836
9847
|
}
|
9837
9848
|
generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
|
9838
9849
|
|
9839
|
-
const _excluded$
|
9840
|
-
const useUtilityClasses$
|
9850
|
+
const _excluded$j = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
|
9851
|
+
const useUtilityClasses$e = ownerState => {
|
9841
9852
|
const {
|
9842
9853
|
open,
|
9843
9854
|
exited
|
@@ -9905,7 +9916,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
|
|
9905
9916
|
slotProps = {},
|
9906
9917
|
slots = {}
|
9907
9918
|
} = props,
|
9908
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
9919
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$j);
|
9909
9920
|
// TODO: `modal`` must change its type in this file to match the type of methods
|
9910
9921
|
// provided by `ModalManager`
|
9911
9922
|
const manager = managerProp;
|
@@ -9980,7 +9991,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
|
|
9980
9991
|
hideBackdrop,
|
9981
9992
|
keepMounted
|
9982
9993
|
});
|
9983
|
-
const classes = useUtilityClasses$
|
9994
|
+
const classes = useUtilityClasses$e(ownerState);
|
9984
9995
|
const handleEnter = () => {
|
9985
9996
|
setExited(false);
|
9986
9997
|
if (onTransitionEnter) {
|
@@ -10200,8 +10211,8 @@ function getSvgIconUtilityClass(slot) {
|
|
10200
10211
|
}
|
10201
10212
|
generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
|
10202
10213
|
|
10203
|
-
const _excluded$
|
10204
|
-
const useUtilityClasses$
|
10214
|
+
const _excluded$i = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
|
10215
|
+
const useUtilityClasses$d = ownerState => {
|
10205
10216
|
const {
|
10206
10217
|
color,
|
10207
10218
|
fontSize,
|
@@ -10266,7 +10277,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
|
10266
10277
|
titleAccess,
|
10267
10278
|
viewBox = '0 0 24 24'
|
10268
10279
|
} = props,
|
10269
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
10280
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$i);
|
10270
10281
|
const ownerState = _extends({}, props, {
|
10271
10282
|
color,
|
10272
10283
|
component,
|
@@ -10279,7 +10290,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
|
10279
10290
|
if (!inheritViewBox) {
|
10280
10291
|
more.viewBox = viewBox;
|
10281
10292
|
}
|
10282
|
-
const classes = useUtilityClasses$
|
10293
|
+
const classes = useUtilityClasses$d(ownerState);
|
10283
10294
|
return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
|
10284
10295
|
as: component,
|
10285
10296
|
className: clsx(classes.root, className),
|
@@ -10421,10 +10432,22 @@ var utils = /*#__PURE__*/Object.freeze({
|
|
10421
10432
|
useIsFocusVisible: useIsFocusVisible
|
10422
10433
|
});
|
10423
10434
|
|
10435
|
+
var ArrowDownward = createSvgIcon$1( /*#__PURE__*/jsx("path", {
|
10436
|
+
d: "m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
10437
|
+
}), 'ArrowDownward');
|
10438
|
+
|
10439
|
+
var ArrowUpward = createSvgIcon$1( /*#__PURE__*/jsx("path", {
|
10440
|
+
d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
|
10441
|
+
}), 'ArrowUpward');
|
10442
|
+
|
10424
10443
|
var CheckCircleRounded = createSvgIcon$1( /*#__PURE__*/jsx("path", {
|
10425
10444
|
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29 5.7 12.7a.9959.9959 0 0 1 0-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"
|
10426
10445
|
}), 'CheckCircleRounded');
|
10427
10446
|
|
10447
|
+
var Close$1 = createSvgIcon$1( /*#__PURE__*/jsx("path", {
|
10448
|
+
d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
10449
|
+
}), 'Close');
|
10450
|
+
|
10428
10451
|
var ErrorRounded = createSvgIcon$1( /*#__PURE__*/jsx("path", {
|
10429
10452
|
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"
|
10430
10453
|
}), 'ErrorRounded');
|
@@ -10572,13 +10595,202 @@ const components = {
|
|
10572
10595
|
}
|
10573
10596
|
}
|
10574
10597
|
},
|
10575
|
-
|
10598
|
+
MuiCheckbox: {
|
10599
|
+
variants: [{
|
10600
|
+
props: {
|
10601
|
+
size: "xsmall"
|
10602
|
+
},
|
10603
|
+
style: {
|
10604
|
+
padding: 2
|
10605
|
+
}
|
10606
|
+
}, {
|
10607
|
+
props: {
|
10608
|
+
size: "small"
|
10609
|
+
},
|
10610
|
+
style: {
|
10611
|
+
padding: 4
|
10612
|
+
}
|
10613
|
+
}, {
|
10614
|
+
props: {
|
10615
|
+
size: "medium"
|
10616
|
+
},
|
10617
|
+
style: {
|
10618
|
+
padding: 11
|
10619
|
+
}
|
10620
|
+
}],
|
10576
10621
|
defaultProps: {
|
10577
|
-
size:
|
10578
|
-
}
|
10622
|
+
size: "small"
|
10623
|
+
}
|
10624
|
+
},
|
10625
|
+
MuiChip: {
|
10626
|
+
variants: [{
|
10627
|
+
props: {
|
10628
|
+
size: "xsmall"
|
10629
|
+
},
|
10630
|
+
style: {
|
10631
|
+
height: 16
|
10632
|
+
}
|
10633
|
+
}],
|
10579
10634
|
styleOverrides: {
|
10635
|
+
sizeSmall: {
|
10636
|
+
height: 24
|
10637
|
+
},
|
10638
|
+
sizeMedium: {
|
10639
|
+
height: 30
|
10640
|
+
},
|
10580
10641
|
root: {
|
10581
|
-
borderRadius: 4
|
10642
|
+
borderRadius: 4,
|
10643
|
+
"&.MuiChip-filled.MuiChip-colorPrimary": {
|
10644
|
+
color: SincoTheme.palette.text.primary,
|
10645
|
+
backgroundColor: "#E4ECF4",
|
10646
|
+
"&:hover": {
|
10647
|
+
backgroundColor: "#BCD0E3"
|
10648
|
+
},
|
10649
|
+
".MuiChip-deleteIcon": {
|
10650
|
+
color: "#90B1D0",
|
10651
|
+
"&:hover": {
|
10652
|
+
color: "#6392BD"
|
10653
|
+
}
|
10654
|
+
}
|
10655
|
+
},
|
10656
|
+
"&.MuiChip-filled.MuiChip-colorSecondary": {
|
10657
|
+
color: SincoTheme.palette.text.primary,
|
10658
|
+
backgroundColor: "#E0F7FA",
|
10659
|
+
"&:hover": {
|
10660
|
+
backgroundColor: "#B3EBF2"
|
10661
|
+
},
|
10662
|
+
".MuiChip-deleteIcon": {
|
10663
|
+
color: "#80DEEA",
|
10664
|
+
"&:hover": {
|
10665
|
+
color: "#4DD0E1"
|
10666
|
+
}
|
10667
|
+
}
|
10668
|
+
},
|
10669
|
+
"&.MuiChip-filled.MuiChip-colorError": {
|
10670
|
+
color: SincoTheme.palette.text.primary,
|
10671
|
+
backgroundColor: "#F9E8E8",
|
10672
|
+
"&:hover": {
|
10673
|
+
backgroundColor: "#F1C7C7"
|
10674
|
+
},
|
10675
|
+
".MuiChip-deleteIcon": {
|
10676
|
+
color: "#E8A1A1",
|
10677
|
+
"&:hover": {
|
10678
|
+
color: "#DF7B7B"
|
10679
|
+
}
|
10680
|
+
}
|
10681
|
+
},
|
10682
|
+
"&.MuiChip-filled.MuiChip-colorSuccess": {
|
10683
|
+
color: SincoTheme.palette.text.primary,
|
10684
|
+
backgroundColor: "#F2F9E7",
|
10685
|
+
"&:hover": {
|
10686
|
+
backgroundColor: "#DDEFC4"
|
10687
|
+
},
|
10688
|
+
".MuiChip-deleteIcon": {
|
10689
|
+
color: "#C7E49D",
|
10690
|
+
"&:hover": {
|
10691
|
+
color: "#A0D158"
|
10692
|
+
}
|
10693
|
+
}
|
10694
|
+
},
|
10695
|
+
"&.MuiChip-filled.MuiChip-colorInfo": {
|
10696
|
+
color: SincoTheme.palette.text.primary,
|
10697
|
+
backgroundColor: "#E6F3F8",
|
10698
|
+
"&:hover": {
|
10699
|
+
backgroundColor: "#C0E2EE"
|
10700
|
+
},
|
10701
|
+
".MuiChip-deleteIcon": {
|
10702
|
+
color: "#96CFE2",
|
10703
|
+
"&:hover": {
|
10704
|
+
color: "#6CBCD6"
|
10705
|
+
}
|
10706
|
+
}
|
10707
|
+
},
|
10708
|
+
"&.MuiChip-filled.MuiChip-colorWarning": {
|
10709
|
+
color: SincoTheme.palette.text.primary,
|
10710
|
+
backgroundColor: "#FFF0E0",
|
10711
|
+
"&:hover": {
|
10712
|
+
backgroundColor: "#FEDAB3"
|
10713
|
+
},
|
10714
|
+
".MuiChip-deleteIcon": {
|
10715
|
+
color: "#FDC280",
|
10716
|
+
"&:hover": {
|
10717
|
+
color: "#FCAA4D"
|
10718
|
+
}
|
10719
|
+
}
|
10720
|
+
},
|
10721
|
+
//////
|
10722
|
+
"&.MuiChip-outlined.MuiChip-colorPrimary": {
|
10723
|
+
color: SincoTheme.palette.primary.main,
|
10724
|
+
border: "solid 1px #90B1D0",
|
10725
|
+
".MuiChip-deleteIcon": {
|
10726
|
+
color: "#90B1D0",
|
10727
|
+
"&:hover": {
|
10728
|
+
color: "#6392BD"
|
10729
|
+
}
|
10730
|
+
}
|
10731
|
+
},
|
10732
|
+
"&.MuiChip-outlined.MuiChip-colorSecondary": {
|
10733
|
+
color: SincoTheme.palette.secondary.main,
|
10734
|
+
border: "solid 1px #80DEEA",
|
10735
|
+
".MuiChip-deleteIcon": {
|
10736
|
+
color: "#80DEEA",
|
10737
|
+
"&:hover": {
|
10738
|
+
color: "#80DEEA"
|
10739
|
+
}
|
10740
|
+
}
|
10741
|
+
},
|
10742
|
+
"&.MuiChip-outlined.MuiChip-colorError": {
|
10743
|
+
color: SincoTheme.palette.error.main,
|
10744
|
+
border: "solid 1px #E8A1A1",
|
10745
|
+
".MuiChip-deleteIcon": {
|
10746
|
+
color: "#E8A1A1",
|
10747
|
+
"&:hover": {
|
10748
|
+
color: "#DF7B7B"
|
10749
|
+
}
|
10750
|
+
}
|
10751
|
+
},
|
10752
|
+
"&.MuiChip-outlined.MuiChip-colorSuccess": {
|
10753
|
+
color: SincoTheme.palette.success.main,
|
10754
|
+
border: "solid 1px #C7E49D",
|
10755
|
+
".MuiChip-deleteIcon": {
|
10756
|
+
color: "#C7E49D",
|
10757
|
+
"&:hover": {
|
10758
|
+
color: "#B1D975"
|
10759
|
+
}
|
10760
|
+
}
|
10761
|
+
},
|
10762
|
+
"&.MuiChip-outlined.MuiChip-colorInfo": {
|
10763
|
+
color: SincoTheme.palette.info.main,
|
10764
|
+
border: "solid 1px #96CFE2",
|
10765
|
+
".MuiChip-deleteIcon": {
|
10766
|
+
color: "#96CFE2",
|
10767
|
+
"&:hover": {
|
10768
|
+
color: "#6CBCD6s"
|
10769
|
+
}
|
10770
|
+
}
|
10771
|
+
},
|
10772
|
+
"&.MuiChip-outlined.MuiChip-colorWarning": {
|
10773
|
+
color: SincoTheme.palette.warning.main,
|
10774
|
+
border: "solid 1px #FDC280",
|
10775
|
+
".MuiChip-deleteIcon": {
|
10776
|
+
color: "#FDC280",
|
10777
|
+
"&:hover": {
|
10778
|
+
color: "#FCAA4D"
|
10779
|
+
}
|
10780
|
+
}
|
10781
|
+
},
|
10782
|
+
".MuiChip-deleteIconXsmall": {
|
10783
|
+
height: 12,
|
10784
|
+
width: 12
|
10785
|
+
},
|
10786
|
+
".MuiChip-deleteIconSmall": {
|
10787
|
+
height: 16,
|
10788
|
+
width: 16
|
10789
|
+
},
|
10790
|
+
".MuiChip-deleteIconMedium": {
|
10791
|
+
height: 20,
|
10792
|
+
width: 20
|
10793
|
+
}
|
10582
10794
|
}
|
10583
10795
|
}
|
10584
10796
|
},
|
@@ -10601,25 +10813,39 @@ const components = {
|
|
10601
10813
|
}
|
10602
10814
|
},
|
10603
10815
|
MuiButton: {
|
10604
|
-
defaultProps: {
|
10605
|
-
size: 'medium'
|
10606
|
-
},
|
10607
10816
|
styleOverrides: {
|
10608
|
-
|
10609
|
-
|
10817
|
+
endIcon: {
|
10818
|
+
marginLeft: 2
|
10819
|
+
},
|
10820
|
+
iconSizeSmall: {
|
10821
|
+
height: 14,
|
10822
|
+
width: 14
|
10823
|
+
},
|
10824
|
+
iconSizeMedium: {
|
10825
|
+
height: 18,
|
10826
|
+
width: 18
|
10827
|
+
},
|
10828
|
+
iconSizeLarge: {
|
10829
|
+
height: 18,
|
10830
|
+
width: 22
|
10610
10831
|
},
|
10611
10832
|
sizeSmall: {
|
10612
|
-
|
10833
|
+
height: 26
|
10613
10834
|
},
|
10614
10835
|
sizeMedium: {
|
10615
|
-
|
10836
|
+
height: 32,
|
10837
|
+
".MuiSvgIcon-fontSizeMedium": {
|
10838
|
+
height: 18,
|
10839
|
+
width: 18
|
10840
|
+
}
|
10616
10841
|
},
|
10617
10842
|
sizeLarge: {
|
10618
|
-
|
10619
|
-
fontSize: 14
|
10620
|
-
|
10621
|
-
|
10622
|
-
|
10843
|
+
height: 38,
|
10844
|
+
fontSize: 14,
|
10845
|
+
".MuiSvgIcon-fontSizeLarge": {
|
10846
|
+
height: 20,
|
10847
|
+
width: 20
|
10848
|
+
}
|
10623
10849
|
}
|
10624
10850
|
}
|
10625
10851
|
},
|
@@ -10628,11 +10854,6 @@ const components = {
|
|
10628
10854
|
size: "small"
|
10629
10855
|
}
|
10630
10856
|
},
|
10631
|
-
MuiCheckbox: {
|
10632
|
-
defaultProps: {
|
10633
|
-
size: "small"
|
10634
|
-
}
|
10635
|
-
},
|
10636
10857
|
MuiFab: {
|
10637
10858
|
defaultProps: {
|
10638
10859
|
size: "small"
|
@@ -10840,6 +11061,21 @@ const components = {
|
|
10840
11061
|
}
|
10841
11062
|
},
|
10842
11063
|
MuiRadio: {
|
11064
|
+
variants: [{
|
11065
|
+
props: {
|
11066
|
+
size: "small"
|
11067
|
+
},
|
11068
|
+
style: {
|
11069
|
+
padding: 2
|
11070
|
+
}
|
11071
|
+
}, {
|
11072
|
+
props: {
|
11073
|
+
size: "medium"
|
11074
|
+
},
|
11075
|
+
style: {
|
11076
|
+
padding: 9
|
11077
|
+
}
|
11078
|
+
}],
|
10843
11079
|
defaultProps: {
|
10844
11080
|
size: "small"
|
10845
11081
|
}
|
@@ -10874,44 +11110,105 @@ const components = {
|
|
10874
11110
|
|
10875
11111
|
const palette = {
|
10876
11112
|
primary: {
|
10877
|
-
|
10878
|
-
|
10879
|
-
|
11113
|
+
50: "#E4ECF4",
|
11114
|
+
100: "#BCD0E3",
|
11115
|
+
200: "#8FB1D0",
|
11116
|
+
300: "#6392BD",
|
11117
|
+
light: "417AAE",
|
11118
|
+
main: "#2063A0",
|
11119
|
+
600: "#1C5B98",
|
11120
|
+
700: "#18518E",
|
11121
|
+
800: "#134784",
|
11122
|
+
dark: "#0B3573",
|
11123
|
+
A100: "#A5C5FF",
|
11124
|
+
A200: "#72A4FF",
|
11125
|
+
A400: "#3F83FF",
|
11126
|
+
A700: "#2572FF",
|
10880
11127
|
contrastText: "#ffffff"
|
10881
11128
|
},
|
10882
11129
|
secondary: {
|
10883
|
-
|
10884
|
-
|
10885
|
-
|
11130
|
+
50: "#E0F7FA",
|
11131
|
+
100: "#B3EBF2",
|
11132
|
+
200: "#80DEEA",
|
11133
|
+
300: "#4DD0E1",
|
11134
|
+
light: "#26C6DA",
|
11135
|
+
main: "#00BCD4",
|
11136
|
+
600: "#00B6CF",
|
11137
|
+
700: "#00ADC9",
|
11138
|
+
800: "#00A5C3",
|
11139
|
+
dark: "#0097B9",
|
11140
|
+
A100: "#E2F9FF",
|
11141
|
+
A200: "#AFEEFF",
|
11142
|
+
A400: "#7CE3FF",
|
11143
|
+
A700: "#63DDFF",
|
10886
11144
|
contrastText: "#ffffff"
|
10887
11145
|
},
|
10888
|
-
text: {
|
10889
|
-
primary: "#101840de",
|
10890
|
-
secondary: "#10184099",
|
10891
|
-
disabled: "#10184061"
|
10892
|
-
},
|
10893
11146
|
error: {
|
11147
|
+
50: "#F9E8E8",
|
11148
|
+
100: "#F1C7C7",
|
11149
|
+
200: "#E8A1A1",
|
11150
|
+
300: "#DF7B7B",
|
11151
|
+
light: "#D85F5F",
|
10894
11152
|
main: "#D14343",
|
10895
|
-
|
10896
|
-
|
11153
|
+
600: "#CC3D3D",
|
11154
|
+
700: "#C63434",
|
11155
|
+
800: "#C02C2C",
|
11156
|
+
dark: "#B51E1E",
|
11157
|
+
A100: "#FFECEC",
|
11158
|
+
A200: "#FFB9B9",
|
11159
|
+
A400: "#FF8686",
|
11160
|
+
A700: "#FF6D6D",
|
10897
11161
|
contrastText: "#ffffff"
|
10898
11162
|
},
|
10899
11163
|
warning: {
|
10900
|
-
|
10901
|
-
|
10902
|
-
|
11164
|
+
50: "#FFF0E0",
|
11165
|
+
100: "#FEDAB3",
|
11166
|
+
200: "#FDC280",
|
11167
|
+
300: "#FCAA4D",
|
11168
|
+
light: "#FC9726",
|
11169
|
+
main: "#FB8500",
|
11170
|
+
600: "#FA7D00",
|
11171
|
+
700: "#FA7200",
|
11172
|
+
800: "#F96800",
|
11173
|
+
dark: "#F85500",
|
11174
|
+
A100: "#FFFFFF",
|
11175
|
+
A200: "#FFF1EB",
|
11176
|
+
A400: "#FFCCB8",
|
11177
|
+
A700: "#FFBA9F",
|
10903
11178
|
contrastText: "#ffffff"
|
10904
11179
|
},
|
10905
11180
|
info: {
|
10906
|
-
|
10907
|
-
|
10908
|
-
|
11181
|
+
50: "#E6F3F8",
|
11182
|
+
100: "#C0E2EE",
|
11183
|
+
200: "#96CFE2",
|
11184
|
+
300: "#6CBCD6",
|
11185
|
+
light: "#4DADCE",
|
11186
|
+
main: "#2D9FC5",
|
11187
|
+
600: "#2897BF",
|
11188
|
+
700: "#228DB8",
|
11189
|
+
800: "#1C83B0",
|
11190
|
+
dark: "#1172A3",
|
11191
|
+
A100: "#D4EFFF",
|
11192
|
+
A200: "#A1DCFF",
|
11193
|
+
A400: "#6ECAFF",
|
11194
|
+
A700: "#54C1FF",
|
10909
11195
|
contrastText: "#ffffff"
|
10910
11196
|
},
|
10911
11197
|
success: {
|
10912
|
-
|
10913
|
-
|
10914
|
-
|
11198
|
+
50: "#F2F9E7",
|
11199
|
+
100: "#DDEFC4",
|
11200
|
+
200: "#C7E49D",
|
11201
|
+
300: "#B1D975",
|
11202
|
+
light: "#A0D158",
|
11203
|
+
main: "#8FC93A",
|
11204
|
+
600: "#87C334",
|
11205
|
+
700: "#7CBC2C",
|
11206
|
+
800: "#72B525",
|
11207
|
+
dark: "#60A918",
|
11208
|
+
A100: "#EDFFDE",
|
11209
|
+
A200: "#D2FFAB",
|
11210
|
+
A400: "#B6FF78",
|
11211
|
+
A700: "#A9FF5E",
|
10915
11212
|
contrastText: "#ffffff"
|
10916
11213
|
},
|
10917
11214
|
grey: {
|
@@ -10930,6 +11227,11 @@ const palette = {
|
|
10930
11227
|
A400: "#696F8C",
|
10931
11228
|
A700: "#101840"
|
10932
11229
|
},
|
11230
|
+
text: {
|
11231
|
+
primary: "#101840de",
|
11232
|
+
secondary: "#10184099",
|
11233
|
+
disabled: "#10184061"
|
11234
|
+
},
|
10933
11235
|
action: {
|
10934
11236
|
active: "rgba(16, 24, 64, 0.54)",
|
10935
11237
|
hover: "rgba(16, 24, 64, 0.04)",
|
@@ -10970,8 +11272,18 @@ const mixins = {
|
|
10970
11272
|
|
10971
11273
|
const typography = {
|
10972
11274
|
fontSize: 13,
|
11275
|
+
body3: {
|
11276
|
+
fontFamily: 'Roboto',
|
11277
|
+
fontWeight: 310,
|
11278
|
+
fontSize: 12,
|
11279
|
+
letterSpacing: 0.17,
|
11280
|
+
lineHeight: 1.2,
|
11281
|
+
[breakpoints.down('md')]: {
|
11282
|
+
fontSize: 11
|
11283
|
+
}
|
11284
|
+
},
|
10973
11285
|
body1: {
|
10974
|
-
fontFamily:
|
11286
|
+
fontFamily: 'Roboto',
|
10975
11287
|
fontSize: 14,
|
10976
11288
|
fontWeight: 400,
|
10977
11289
|
letterSpacing: 0.15,
|
@@ -10981,7 +11293,7 @@ const typography = {
|
|
10981
11293
|
}
|
10982
11294
|
},
|
10983
11295
|
body2: {
|
10984
|
-
fontFamily:
|
11296
|
+
fontFamily: 'Roboto',
|
10985
11297
|
fontSize: 13,
|
10986
11298
|
fontWeight: 400,
|
10987
11299
|
letterSpacing: 0.17,
|
@@ -10991,7 +11303,7 @@ const typography = {
|
|
10991
11303
|
}
|
10992
11304
|
},
|
10993
11305
|
subtitle1: {
|
10994
|
-
fontFamily:
|
11306
|
+
fontFamily: 'Roboto',
|
10995
11307
|
fontSize: 14,
|
10996
11308
|
fontWeight: 500,
|
10997
11309
|
letterSpacing: 0.15,
|
@@ -11001,7 +11313,7 @@ const typography = {
|
|
11001
11313
|
}
|
11002
11314
|
},
|
11003
11315
|
subtitle2: {
|
11004
|
-
fontFamily:
|
11316
|
+
fontFamily: 'Roboto',
|
11005
11317
|
fontSize: 13,
|
11006
11318
|
fontWeight: 500,
|
11007
11319
|
letterSpacing: 0.1,
|
@@ -11010,8 +11322,15 @@ const typography = {
|
|
11010
11322
|
fontSize: 14
|
11011
11323
|
}
|
11012
11324
|
},
|
11013
|
-
|
11325
|
+
subtitle3: {
|
11014
11326
|
fontFamily: "Roboto",
|
11327
|
+
fontSize: 12,
|
11328
|
+
lineHeight: 1.16,
|
11329
|
+
letterSpacing: 0.17,
|
11330
|
+
fontWeight: 400
|
11331
|
+
},
|
11332
|
+
caption: {
|
11333
|
+
fontFamily: 'Roboto',
|
11015
11334
|
fontSize: 11,
|
11016
11335
|
fontWeight: 400,
|
11017
11336
|
letterSpacing: 0.4,
|
@@ -11021,7 +11340,7 @@ const typography = {
|
|
11021
11340
|
}
|
11022
11341
|
},
|
11023
11342
|
overline: {
|
11024
|
-
fontFamily:
|
11343
|
+
fontFamily: 'Roboto',
|
11025
11344
|
fontSize: 11,
|
11026
11345
|
fontWeight: 400,
|
11027
11346
|
letterSpacing: 1,
|
@@ -11031,7 +11350,7 @@ const typography = {
|
|
11031
11350
|
}
|
11032
11351
|
},
|
11033
11352
|
h6: {
|
11034
|
-
fontFamily:
|
11353
|
+
fontFamily: 'Nunito',
|
11035
11354
|
fontSize: 16,
|
11036
11355
|
fontWeight: 600,
|
11037
11356
|
lineHeight: 1.6,
|
@@ -11040,44 +11359,44 @@ const typography = {
|
|
11040
11359
|
}
|
11041
11360
|
},
|
11042
11361
|
h5: {
|
11043
|
-
fontFamily:
|
11362
|
+
fontFamily: 'Nunito',
|
11044
11363
|
fontSize: 18,
|
11045
11364
|
fontWeight: 600,
|
11046
11365
|
lineHeight: 1.8
|
11047
11366
|
},
|
11048
11367
|
h4: {
|
11049
|
-
fontFamily:
|
11368
|
+
fontFamily: 'Nunito',
|
11050
11369
|
fontSize: 20,
|
11051
11370
|
fontWeight: 600,
|
11052
11371
|
letterSpacing: 0.25,
|
11053
11372
|
lineHeight: 1
|
11054
11373
|
},
|
11055
11374
|
h3: {
|
11056
|
-
fontFamily:
|
11375
|
+
fontFamily: 'Nunito',
|
11057
11376
|
fontSize: 28,
|
11058
11377
|
fontWeight: 500,
|
11059
11378
|
lineHeight: 1.2
|
11060
11379
|
},
|
11061
11380
|
h2: {
|
11062
|
-
fontFamily:
|
11381
|
+
fontFamily: 'Nunito',
|
11063
11382
|
fontSize: 32,
|
11064
11383
|
fontWeight: 400,
|
11065
11384
|
letterSpacing: -0.5,
|
11066
11385
|
lineHeight: 1.2
|
11067
11386
|
},
|
11068
11387
|
h1: {
|
11069
|
-
fontFamily:
|
11388
|
+
fontFamily: 'Nunito',
|
11070
11389
|
fontSize: 40,
|
11071
11390
|
fontWeight: 300,
|
11072
11391
|
letterSpacing: -1.5,
|
11073
11392
|
lineHeight: 1.4
|
11074
11393
|
},
|
11075
11394
|
button: {
|
11076
|
-
fontFamily:
|
11077
|
-
textTransform:
|
11395
|
+
fontFamily: 'Roboto',
|
11396
|
+
textTransform: 'unset',
|
11078
11397
|
fontWeightLight: 300,
|
11079
11398
|
fontSize: 13,
|
11080
|
-
lineHeight:
|
11399
|
+
lineHeight: 'normal',
|
11081
11400
|
'@media(max-width: 885px)': {
|
11082
11401
|
fontSize: 14
|
11083
11402
|
}
|
@@ -11093,20 +11412,7 @@ const themeOptions = {
|
|
11093
11412
|
breakpoints
|
11094
11413
|
};
|
11095
11414
|
|
11096
|
-
const SincoTheme = createTheme(Object.assign({}, themeOptions
|
11097
|
-
typography: {
|
11098
|
-
body3: {
|
11099
|
-
fontFamily: "Roboto",
|
11100
|
-
fontWeight: 310,
|
11101
|
-
fontSize: 12,
|
11102
|
-
letterSpacing: 0.17,
|
11103
|
-
lineHeight: 1.2,
|
11104
|
-
[breakpoints.down("md")]: {
|
11105
|
-
fontSize: 11
|
11106
|
-
}
|
11107
|
-
}
|
11108
|
-
}
|
11109
|
-
}));
|
11415
|
+
const SincoTheme = createTheme(Object.assign({}, themeOptions));
|
11110
11416
|
|
11111
11417
|
var wellKnownSymbol$d = wellKnownSymbol$f;
|
11112
11418
|
|
@@ -12624,8 +12930,8 @@ function getPaperUtilityClass(slot) {
|
|
12624
12930
|
}
|
12625
12931
|
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']);
|
12626
12932
|
|
12627
|
-
const _excluded$
|
12628
|
-
const useUtilityClasses$
|
12933
|
+
const _excluded$h = ["className", "component", "elevation", "square", "variant"];
|
12934
|
+
const useUtilityClasses$c = ownerState => {
|
12629
12935
|
const {
|
12630
12936
|
square,
|
12631
12937
|
elevation,
|
@@ -12679,14 +12985,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
|
|
12679
12985
|
square = false,
|
12680
12986
|
variant = 'elevation'
|
12681
12987
|
} = props,
|
12682
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
12988
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$h);
|
12683
12989
|
const ownerState = _extends({}, props, {
|
12684
12990
|
component,
|
12685
12991
|
elevation,
|
12686
12992
|
square,
|
12687
12993
|
variant
|
12688
12994
|
});
|
12689
|
-
const classes = useUtilityClasses$
|
12995
|
+
const classes = useUtilityClasses$c(ownerState);
|
12690
12996
|
if (process.env.NODE_ENV !== 'production') {
|
12691
12997
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
12692
12998
|
const theme = useTheme();
|
@@ -12837,15 +13143,15 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
|
|
12837
13143
|
const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
|
12838
13144
|
var touchRippleClasses$1 = touchRippleClasses;
|
12839
13145
|
|
12840
|
-
const _excluded$
|
12841
|
-
let _ = t => t,
|
12842
|
-
_t,
|
12843
|
-
_t2,
|
12844
|
-
_t3,
|
12845
|
-
_t4;
|
13146
|
+
const _excluded$g = ["center", "classes", "className"];
|
13147
|
+
let _$1 = t => t,
|
13148
|
+
_t$1,
|
13149
|
+
_t2$1,
|
13150
|
+
_t3$1,
|
13151
|
+
_t4$1;
|
12846
13152
|
const DURATION = 550;
|
12847
13153
|
const DELAY_RIPPLE = 80;
|
12848
|
-
const enterKeyframe = keyframes(_t || (_t = _`
|
13154
|
+
const enterKeyframe = keyframes(_t$1 || (_t$1 = _$1`
|
12849
13155
|
0% {
|
12850
13156
|
transform: scale(0);
|
12851
13157
|
opacity: 0.1;
|
@@ -12856,7 +13162,7 @@ const enterKeyframe = keyframes(_t || (_t = _`
|
|
12856
13162
|
opacity: 0.3;
|
12857
13163
|
}
|
12858
13164
|
`));
|
12859
|
-
const exitKeyframe = keyframes(_t2 || (_t2 = _`
|
13165
|
+
const exitKeyframe = keyframes(_t2$1 || (_t2$1 = _$1`
|
12860
13166
|
0% {
|
12861
13167
|
opacity: 1;
|
12862
13168
|
}
|
@@ -12865,7 +13171,7 @@ const exitKeyframe = keyframes(_t2 || (_t2 = _`
|
|
12865
13171
|
opacity: 0;
|
12866
13172
|
}
|
12867
13173
|
`));
|
12868
|
-
const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
|
13174
|
+
const pulsateKeyframe = keyframes(_t3$1 || (_t3$1 = _$1`
|
12869
13175
|
0% {
|
12870
13176
|
transform: scale(1);
|
12871
13177
|
}
|
@@ -12898,7 +13204,7 @@ const TouchRippleRoot = styled$1('span', {
|
|
12898
13204
|
const TouchRippleRipple = styled$1(Ripple, {
|
12899
13205
|
name: 'MuiTouchRipple',
|
12900
13206
|
slot: 'Ripple'
|
12901
|
-
})(_t4 || (_t4 = _`
|
13207
|
+
})(_t4$1 || (_t4$1 = _$1`
|
12902
13208
|
opacity: 0;
|
12903
13209
|
position: absolute;
|
12904
13210
|
|
@@ -12966,7 +13272,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
|
|
12966
13272
|
classes = {},
|
12967
13273
|
className
|
12968
13274
|
} = props,
|
12969
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
13275
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$g);
|
12970
13276
|
const [ripples, setRipples] = React.useState([]);
|
12971
13277
|
const nextKey = React.useRef(0);
|
12972
13278
|
const rippleCallback = React.useRef(null);
|
@@ -13167,8 +13473,8 @@ function getButtonBaseUtilityClass(slot) {
|
|
13167
13473
|
const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
|
13168
13474
|
var buttonBaseClasses$1 = buttonBaseClasses;
|
13169
13475
|
|
13170
|
-
const _excluded$
|
13171
|
-
const useUtilityClasses$
|
13476
|
+
const _excluded$f = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
|
13477
|
+
const useUtilityClasses$b = ownerState => {
|
13172
13478
|
const {
|
13173
13479
|
disabled,
|
13174
13480
|
focusVisible,
|
@@ -13269,7 +13575,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
|
|
13269
13575
|
touchRippleRef,
|
13270
13576
|
type
|
13271
13577
|
} = props,
|
13272
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
13578
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$f);
|
13273
13579
|
const buttonRef = React.useRef(null);
|
13274
13580
|
const rippleRef = React.useRef(null);
|
13275
13581
|
const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
|
@@ -13436,7 +13742,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
|
|
13436
13742
|
tabIndex,
|
13437
13743
|
focusVisible
|
13438
13744
|
});
|
13439
|
-
const classes = useUtilityClasses$
|
13745
|
+
const classes = useUtilityClasses$b(ownerState);
|
13440
13746
|
return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
|
13441
13747
|
as: ComponentProp,
|
13442
13748
|
className: clsx(classes.root, className),
|
@@ -13633,8 +13939,8 @@ function getIconButtonUtilityClass(slot) {
|
|
13633
13939
|
const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
|
13634
13940
|
var iconButtonClasses$1 = iconButtonClasses;
|
13635
13941
|
|
13636
|
-
const _excluded$
|
13637
|
-
const useUtilityClasses$
|
13942
|
+
const _excluded$e = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
|
13943
|
+
const useUtilityClasses$a = ownerState => {
|
13638
13944
|
const {
|
13639
13945
|
classes,
|
13640
13946
|
disabled,
|
@@ -13734,7 +14040,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
|
|
13734
14040
|
disableFocusRipple = false,
|
13735
14041
|
size = 'medium'
|
13736
14042
|
} = props,
|
13737
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14043
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$e);
|
13738
14044
|
const ownerState = _extends({}, props, {
|
13739
14045
|
edge,
|
13740
14046
|
color,
|
@@ -13742,7 +14048,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
|
|
13742
14048
|
disableFocusRipple,
|
13743
14049
|
size
|
13744
14050
|
});
|
13745
|
-
const classes = useUtilityClasses$
|
14051
|
+
const classes = useUtilityClasses$a(ownerState);
|
13746
14052
|
return /*#__PURE__*/jsx(IconButtonRoot, _extends({
|
13747
14053
|
className: clsx(classes.root, className),
|
13748
14054
|
centerRipple: true,
|
@@ -13828,8 +14134,8 @@ function getTypographyUtilityClass(slot) {
|
|
13828
14134
|
}
|
13829
14135
|
generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
|
13830
14136
|
|
13831
|
-
const _excluded$
|
13832
|
-
const useUtilityClasses$
|
14137
|
+
const _excluded$d = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
|
14138
|
+
const useUtilityClasses$9 = ownerState => {
|
13833
14139
|
const {
|
13834
14140
|
align,
|
13835
14141
|
gutterBottom,
|
@@ -13883,22 +14189,22 @@ const defaultVariantMapping = {
|
|
13883
14189
|
};
|
13884
14190
|
|
13885
14191
|
// TODO v6: deprecate these color values in v5.x and remove the transformation in v6
|
13886
|
-
const colorTransformations = {
|
14192
|
+
const colorTransformations$1 = {
|
13887
14193
|
primary: 'primary.main',
|
13888
14194
|
textPrimary: 'text.primary',
|
13889
14195
|
secondary: 'secondary.main',
|
13890
14196
|
textSecondary: 'text.secondary',
|
13891
14197
|
error: 'error.main'
|
13892
14198
|
};
|
13893
|
-
const transformDeprecatedColors = color => {
|
13894
|
-
return colorTransformations[color] || color;
|
14199
|
+
const transformDeprecatedColors$1 = color => {
|
14200
|
+
return colorTransformations$1[color] || color;
|
13895
14201
|
};
|
13896
14202
|
const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
|
13897
14203
|
const themeProps = useThemeProps({
|
13898
14204
|
props: inProps,
|
13899
14205
|
name: 'MuiTypography'
|
13900
14206
|
});
|
13901
|
-
const color = transformDeprecatedColors(themeProps.color);
|
14207
|
+
const color = transformDeprecatedColors$1(themeProps.color);
|
13902
14208
|
const props = extendSxProp(_extends({}, themeProps, {
|
13903
14209
|
color
|
13904
14210
|
}));
|
@@ -13912,7 +14218,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
|
|
13912
14218
|
variant = 'body1',
|
13913
14219
|
variantMapping = defaultVariantMapping
|
13914
14220
|
} = props,
|
13915
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14221
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$d);
|
13916
14222
|
const ownerState = _extends({}, props, {
|
13917
14223
|
align,
|
13918
14224
|
color,
|
@@ -13925,7 +14231,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
|
|
13925
14231
|
variantMapping
|
13926
14232
|
});
|
13927
14233
|
const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
|
13928
|
-
const classes = useUtilityClasses$
|
14234
|
+
const classes = useUtilityClasses$9(ownerState);
|
13929
14235
|
return /*#__PURE__*/jsx(TypographyRoot, _extends({
|
13930
14236
|
as: Component,
|
13931
14237
|
ref: ref,
|
@@ -14010,7 +14316,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
|
|
14010
14316
|
} : void 0;
|
14011
14317
|
var Typography$1 = Typography;
|
14012
14318
|
|
14013
|
-
const _excluded$
|
14319
|
+
const _excluded$c = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
|
14014
14320
|
const styles = {
|
14015
14321
|
entering: {
|
14016
14322
|
opacity: 1
|
@@ -14047,7 +14353,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
|
|
14047
14353
|
// eslint-disable-next-line react/prop-types
|
14048
14354
|
TransitionComponent = Transition$1
|
14049
14355
|
} = props,
|
14050
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14356
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$c);
|
14051
14357
|
const nodeRef = React.useRef(null);
|
14052
14358
|
const handleRef = useForkRef(nodeRef, children.ref, ref);
|
14053
14359
|
const normalizedTransitionCallback = callback => maybeIsAppearing => {
|
@@ -14208,8 +14514,8 @@ function getBackdropUtilityClass(slot) {
|
|
14208
14514
|
}
|
14209
14515
|
generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
|
14210
14516
|
|
14211
|
-
const _excluded$
|
14212
|
-
const useUtilityClasses$
|
14517
|
+
const _excluded$b = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
|
14518
|
+
const useUtilityClasses$8 = ownerState => {
|
14213
14519
|
const {
|
14214
14520
|
classes,
|
14215
14521
|
invisible
|
@@ -14263,12 +14569,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
|
|
14263
14569
|
TransitionComponent = Fade$1,
|
14264
14570
|
transitionDuration
|
14265
14571
|
} = props,
|
14266
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14572
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$b);
|
14267
14573
|
const ownerState = _extends({}, props, {
|
14268
14574
|
component,
|
14269
14575
|
invisible
|
14270
14576
|
});
|
14271
|
-
const classes = useUtilityClasses$
|
14577
|
+
const classes = useUtilityClasses$8(ownerState);
|
14272
14578
|
const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
|
14273
14579
|
return /*#__PURE__*/jsx(TransitionComponent, _extends({
|
14274
14580
|
in: open,
|
@@ -14412,134 +14718,247 @@ process.env.NODE_ENV !== "production" ? Box$1.propTypes /* remove-proptypes */ =
|
|
14412
14718
|
} : void 0;
|
14413
14719
|
var Box$2 = Box$1;
|
14414
14720
|
|
14415
|
-
|
14416
|
-
|
14417
|
-
}
|
14418
|
-
generateUtilityClasses('MuiCard', ['root']);
|
14721
|
+
var MoreHorizIcon = createSvgIcon$1( /*#__PURE__*/jsx("path", {
|
14722
|
+
d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
14723
|
+
}), 'MoreHoriz');
|
14419
14724
|
|
14420
|
-
const _excluded$
|
14421
|
-
const
|
14422
|
-
|
14423
|
-
|
14424
|
-
|
14425
|
-
|
14426
|
-
|
14427
|
-
|
14428
|
-
|
14429
|
-
|
14430
|
-
|
14431
|
-
|
14432
|
-
|
14433
|
-
|
14434
|
-
|
14435
|
-
|
14436
|
-
|
14437
|
-
}
|
14725
|
+
const _excluded$a = ["slots", "slotProps"];
|
14726
|
+
const BreadcrumbCollapsedButton = styled$1(ButtonBase$1)(({
|
14727
|
+
theme
|
14728
|
+
}) => _extends({
|
14729
|
+
display: 'flex',
|
14730
|
+
marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
|
14731
|
+
marginRight: `calc(${theme.spacing(1)} * 0.5)`
|
14732
|
+
}, theme.palette.mode === 'light' ? {
|
14733
|
+
backgroundColor: theme.palette.grey[100],
|
14734
|
+
color: theme.palette.grey[700]
|
14735
|
+
} : {
|
14736
|
+
backgroundColor: theme.palette.grey[700],
|
14737
|
+
color: theme.palette.grey[100]
|
14738
|
+
}, {
|
14739
|
+
borderRadius: 2,
|
14740
|
+
'&:hover, &:focus': _extends({}, theme.palette.mode === 'light' ? {
|
14741
|
+
backgroundColor: theme.palette.grey[200]
|
14742
|
+
} : {
|
14743
|
+
backgroundColor: theme.palette.grey[600]
|
14744
|
+
}),
|
14745
|
+
'&:active': _extends({
|
14746
|
+
boxShadow: theme.shadows[0]
|
14747
|
+
}, theme.palette.mode === 'light' ? {
|
14748
|
+
backgroundColor: emphasize(theme.palette.grey[200], 0.12)
|
14749
|
+
} : {
|
14750
|
+
backgroundColor: emphasize(theme.palette.grey[600], 0.12)
|
14751
|
+
})
|
14752
|
+
}));
|
14753
|
+
const BreadcrumbCollapsedIcon = styled$1(MoreHorizIcon)({
|
14754
|
+
width: 24,
|
14755
|
+
height: 16
|
14438
14756
|
});
|
14439
|
-
|
14440
|
-
|
14441
|
-
|
14442
|
-
|
14443
|
-
|
14757
|
+
|
14758
|
+
/**
|
14759
|
+
* @ignore - internal component.
|
14760
|
+
*/
|
14761
|
+
function BreadcrumbCollapsed(props) {
|
14444
14762
|
const {
|
14445
|
-
|
14446
|
-
|
14763
|
+
slots = {},
|
14764
|
+
slotProps = {}
|
14447
14765
|
} = props,
|
14448
|
-
|
14449
|
-
const ownerState =
|
14450
|
-
|
14766
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
|
14767
|
+
const ownerState = props;
|
14768
|
+
return /*#__PURE__*/jsx("li", {
|
14769
|
+
children: /*#__PURE__*/jsx(BreadcrumbCollapsedButton, _extends({
|
14770
|
+
focusRipple: true
|
14771
|
+
}, otherProps, {
|
14772
|
+
ownerState: ownerState,
|
14773
|
+
children: /*#__PURE__*/jsx(BreadcrumbCollapsedIcon, _extends({
|
14774
|
+
as: slots.CollapsedIcon,
|
14775
|
+
ownerState: ownerState
|
14776
|
+
}, slotProps.collapsedIcon))
|
14777
|
+
}))
|
14451
14778
|
});
|
14452
|
-
|
14453
|
-
|
14454
|
-
className: clsx(classes.root, className),
|
14455
|
-
elevation: raised ? 8 : undefined,
|
14456
|
-
ref: ref,
|
14457
|
-
ownerState: ownerState
|
14458
|
-
}, other));
|
14459
|
-
});
|
14460
|
-
process.env.NODE_ENV !== "production" ? Card.propTypes /* remove-proptypes */ = {
|
14461
|
-
// ----------------------------- Warning --------------------------------
|
14462
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
14463
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
14464
|
-
// ----------------------------------------------------------------------
|
14465
|
-
/**
|
14466
|
-
* The content of the component.
|
14467
|
-
*/
|
14468
|
-
children: PropTypes.node,
|
14469
|
-
/**
|
14470
|
-
* Override or extend the styles applied to the component.
|
14471
|
-
*/
|
14472
|
-
classes: PropTypes.object,
|
14779
|
+
}
|
14780
|
+
process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
|
14473
14781
|
/**
|
14474
|
-
*
|
14782
|
+
* The props used for the CollapsedIcon slot.
|
14783
|
+
* @default {}
|
14475
14784
|
*/
|
14476
|
-
|
14785
|
+
slotProps: PropTypes.shape({
|
14786
|
+
collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
14787
|
+
}),
|
14477
14788
|
/**
|
14478
|
-
*
|
14479
|
-
*
|
14789
|
+
* The components used for each slot inside the BreadcumbCollapsed.
|
14790
|
+
* Either a string to use a HTML element or a component.
|
14791
|
+
* @default {}
|
14480
14792
|
*/
|
14481
|
-
|
14482
|
-
|
14483
|
-
return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
|
14484
|
-
}
|
14485
|
-
return null;
|
14793
|
+
slots: PropTypes.shape({
|
14794
|
+
CollapsedIcon: PropTypes.elementType
|
14486
14795
|
}),
|
14487
14796
|
/**
|
14488
14797
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
14489
14798
|
*/
|
14490
|
-
sx: PropTypes.
|
14799
|
+
sx: PropTypes.object
|
14491
14800
|
} : void 0;
|
14492
|
-
var Card$1 = Card;
|
14493
14801
|
|
14494
|
-
function
|
14495
|
-
return generateUtilityClass('
|
14802
|
+
function getBreadcrumbsUtilityClass(slot) {
|
14803
|
+
return generateUtilityClass('MuiBreadcrumbs', slot);
|
14496
14804
|
}
|
14497
|
-
generateUtilityClasses('
|
14805
|
+
const breadcrumbsClasses = generateUtilityClasses('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
|
14806
|
+
var breadcrumbsClasses$1 = breadcrumbsClasses;
|
14498
14807
|
|
14499
|
-
const _excluded$
|
14500
|
-
const useUtilityClasses$
|
14808
|
+
const _excluded$9 = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
|
14809
|
+
const useUtilityClasses$7 = ownerState => {
|
14501
14810
|
const {
|
14502
14811
|
classes
|
14503
14812
|
} = ownerState;
|
14504
14813
|
const slots = {
|
14505
|
-
root: ['root']
|
14814
|
+
root: ['root'],
|
14815
|
+
li: ['li'],
|
14816
|
+
ol: ['ol'],
|
14817
|
+
separator: ['separator']
|
14506
14818
|
};
|
14507
|
-
return composeClasses(slots,
|
14819
|
+
return composeClasses(slots, getBreadcrumbsUtilityClass, classes);
|
14508
14820
|
};
|
14509
|
-
const
|
14510
|
-
name: '
|
14821
|
+
const BreadcrumbsRoot = styled$1(Typography$1, {
|
14822
|
+
name: 'MuiBreadcrumbs',
|
14511
14823
|
slot: 'Root',
|
14512
|
-
overridesResolver: (props, styles) =>
|
14513
|
-
|
14514
|
-
|
14515
|
-
|
14516
|
-
|
14517
|
-
|
14518
|
-
|
14519
|
-
|
14824
|
+
overridesResolver: (props, styles) => {
|
14825
|
+
return [{
|
14826
|
+
[`& .${breadcrumbsClasses$1.li}`]: styles.li
|
14827
|
+
}, styles.root];
|
14828
|
+
}
|
14829
|
+
})({});
|
14830
|
+
const BreadcrumbsOl = styled$1('ol', {
|
14831
|
+
name: 'MuiBreadcrumbs',
|
14832
|
+
slot: 'Ol',
|
14833
|
+
overridesResolver: (props, styles) => styles.ol
|
14834
|
+
})({
|
14835
|
+
display: 'flex',
|
14836
|
+
flexWrap: 'wrap',
|
14837
|
+
alignItems: 'center',
|
14838
|
+
padding: 0,
|
14839
|
+
margin: 0,
|
14840
|
+
listStyle: 'none'
|
14520
14841
|
});
|
14521
|
-
const
|
14842
|
+
const BreadcrumbsSeparator = styled$1('li', {
|
14843
|
+
name: 'MuiBreadcrumbs',
|
14844
|
+
slot: 'Separator',
|
14845
|
+
overridesResolver: (props, styles) => styles.separator
|
14846
|
+
})({
|
14847
|
+
display: 'flex',
|
14848
|
+
userSelect: 'none',
|
14849
|
+
marginLeft: 8,
|
14850
|
+
marginRight: 8
|
14851
|
+
});
|
14852
|
+
function insertSeparators(items, className, separator, ownerState) {
|
14853
|
+
return items.reduce((acc, current, index) => {
|
14854
|
+
if (index < items.length - 1) {
|
14855
|
+
acc = acc.concat(current, /*#__PURE__*/jsx(BreadcrumbsSeparator, {
|
14856
|
+
"aria-hidden": true,
|
14857
|
+
className: className,
|
14858
|
+
ownerState: ownerState,
|
14859
|
+
children: separator
|
14860
|
+
}, `separator-${index}`));
|
14861
|
+
} else {
|
14862
|
+
acc.push(current);
|
14863
|
+
}
|
14864
|
+
return acc;
|
14865
|
+
}, []);
|
14866
|
+
}
|
14867
|
+
const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, ref) {
|
14522
14868
|
const props = useThemeProps({
|
14523
14869
|
props: inProps,
|
14524
|
-
name: '
|
14870
|
+
name: 'MuiBreadcrumbs'
|
14525
14871
|
});
|
14526
14872
|
const {
|
14873
|
+
children,
|
14527
14874
|
className,
|
14528
|
-
component = '
|
14875
|
+
component = 'nav',
|
14876
|
+
slots = {},
|
14877
|
+
slotProps = {},
|
14878
|
+
expandText = 'Show path',
|
14879
|
+
itemsAfterCollapse = 1,
|
14880
|
+
itemsBeforeCollapse = 1,
|
14881
|
+
maxItems = 8,
|
14882
|
+
separator = '/'
|
14529
14883
|
} = props,
|
14530
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14884
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$9);
|
14885
|
+
const [expanded, setExpanded] = React.useState(false);
|
14531
14886
|
const ownerState = _extends({}, props, {
|
14532
|
-
component
|
14887
|
+
component,
|
14888
|
+
expanded,
|
14889
|
+
expandText,
|
14890
|
+
itemsAfterCollapse,
|
14891
|
+
itemsBeforeCollapse,
|
14892
|
+
maxItems,
|
14893
|
+
separator
|
14533
14894
|
});
|
14534
|
-
const classes = useUtilityClasses$
|
14535
|
-
|
14536
|
-
|
14895
|
+
const classes = useUtilityClasses$7(ownerState);
|
14896
|
+
const collapsedIconSlotProps = useSlotProps({
|
14897
|
+
elementType: slots.CollapsedIcon,
|
14898
|
+
externalSlotProps: slotProps.collapsedIcon,
|
14899
|
+
ownerState
|
14900
|
+
});
|
14901
|
+
const listRef = React.useRef(null);
|
14902
|
+
const renderItemsBeforeAndAfter = allItems => {
|
14903
|
+
const handleClickExpand = () => {
|
14904
|
+
setExpanded(true);
|
14905
|
+
|
14906
|
+
// The clicked element received the focus but gets removed from the DOM.
|
14907
|
+
// Let's keep the focus in the component after expanding.
|
14908
|
+
// Moving it to the <ol> or <nav> does not cause any announcement in NVDA.
|
14909
|
+
// By moving it to some link/button at least we have some announcement.
|
14910
|
+
const focusable = listRef.current.querySelector('a[href],button,[tabindex]');
|
14911
|
+
if (focusable) {
|
14912
|
+
focusable.focus();
|
14913
|
+
}
|
14914
|
+
};
|
14915
|
+
|
14916
|
+
// This defends against someone passing weird input, to ensure that if all
|
14917
|
+
// items would be shown anyway, we just show all items without the EllipsisItem
|
14918
|
+
if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
|
14919
|
+
if (process.env.NODE_ENV !== 'production') {
|
14920
|
+
console.error(['MUI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
|
14921
|
+
}
|
14922
|
+
return allItems;
|
14923
|
+
}
|
14924
|
+
return [...allItems.slice(0, itemsBeforeCollapse), /*#__PURE__*/jsx(BreadcrumbCollapsed, {
|
14925
|
+
"aria-label": expandText,
|
14926
|
+
slots: {
|
14927
|
+
CollapsedIcon: slots.CollapsedIcon
|
14928
|
+
},
|
14929
|
+
slotProps: {
|
14930
|
+
collapsedIcon: collapsedIconSlotProps
|
14931
|
+
},
|
14932
|
+
onClick: handleClickExpand
|
14933
|
+
}, "ellipsis"), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
|
14934
|
+
};
|
14935
|
+
const allItems = React.Children.toArray(children).filter(child => {
|
14936
|
+
if (process.env.NODE_ENV !== 'production') {
|
14937
|
+
if (reactIs$2.exports.isFragment(child)) {
|
14938
|
+
console.error(["MUI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
14939
|
+
}
|
14940
|
+
}
|
14941
|
+
return /*#__PURE__*/React.isValidElement(child);
|
14942
|
+
}).map((child, index) => /*#__PURE__*/jsx("li", {
|
14943
|
+
className: classes.li,
|
14944
|
+
children: child
|
14945
|
+
}, `child-${index}`));
|
14946
|
+
return /*#__PURE__*/jsx(BreadcrumbsRoot, _extends({
|
14947
|
+
ref: ref,
|
14948
|
+
component: component,
|
14949
|
+
color: "text.secondary",
|
14537
14950
|
className: clsx(classes.root, className),
|
14538
|
-
ownerState: ownerState
|
14539
|
-
|
14540
|
-
|
14951
|
+
ownerState: ownerState
|
14952
|
+
}, other, {
|
14953
|
+
children: /*#__PURE__*/jsx(BreadcrumbsOl, {
|
14954
|
+
className: classes.ol,
|
14955
|
+
ref: listRef,
|
14956
|
+
ownerState: ownerState,
|
14957
|
+
children: insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator, ownerState)
|
14958
|
+
})
|
14959
|
+
}));
|
14541
14960
|
});
|
14542
|
-
process.env.NODE_ENV !== "production" ?
|
14961
|
+
process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptypes */ = {
|
14543
14962
|
// ----------------------------- Warning --------------------------------
|
14544
14963
|
// | These PropTypes are generated from the TypeScript type definitions |
|
14545
14964
|
// | To update them edit the d.ts file and run "yarn proptypes" |
|
@@ -14561,168 +14980,344 @@ process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptype
|
|
14561
14980
|
* Either a string to use a HTML element or a component.
|
14562
14981
|
*/
|
14563
14982
|
component: PropTypes.elementType,
|
14983
|
+
/**
|
14984
|
+
* Override the default label for the expand button.
|
14985
|
+
*
|
14986
|
+
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
|
14987
|
+
* @default 'Show path'
|
14988
|
+
*/
|
14989
|
+
expandText: PropTypes.string,
|
14990
|
+
/**
|
14991
|
+
* If max items is exceeded, the number of items to show after the ellipsis.
|
14992
|
+
* @default 1
|
14993
|
+
*/
|
14994
|
+
itemsAfterCollapse: integerPropType,
|
14995
|
+
/**
|
14996
|
+
* If max items is exceeded, the number of items to show before the ellipsis.
|
14997
|
+
* @default 1
|
14998
|
+
*/
|
14999
|
+
itemsBeforeCollapse: integerPropType,
|
15000
|
+
/**
|
15001
|
+
* Specifies the maximum number of breadcrumbs to display. When there are more
|
15002
|
+
* than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
|
15003
|
+
* will be shown, with an ellipsis in between.
|
15004
|
+
* @default 8
|
15005
|
+
*/
|
15006
|
+
maxItems: integerPropType,
|
15007
|
+
/**
|
15008
|
+
* Custom separator node.
|
15009
|
+
* @default '/'
|
15010
|
+
*/
|
15011
|
+
separator: PropTypes.node,
|
15012
|
+
/**
|
15013
|
+
* The props used for each slot inside the Breadcumb.
|
15014
|
+
* @default {}
|
15015
|
+
*/
|
15016
|
+
slotProps: PropTypes.shape({
|
15017
|
+
collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
15018
|
+
}),
|
15019
|
+
/**
|
15020
|
+
* The components used for each slot inside the Breadcumb.
|
15021
|
+
* Either a string to use a HTML element or a component.
|
15022
|
+
* @default {}
|
15023
|
+
*/
|
15024
|
+
slots: PropTypes.shape({
|
15025
|
+
CollapsedIcon: PropTypes.elementType
|
15026
|
+
}),
|
14564
15027
|
/**
|
14565
15028
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
14566
15029
|
*/
|
14567
15030
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
14568
15031
|
} : void 0;
|
14569
|
-
var
|
15032
|
+
var Breadcrumbs$1 = Breadcrumbs;
|
14570
15033
|
|
14571
|
-
|
14572
|
-
|
14573
|
-
|
15034
|
+
function getButtonUtilityClass(slot) {
|
15035
|
+
return generateUtilityClass('MuiButton', slot);
|
15036
|
+
}
|
15037
|
+
const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
|
15038
|
+
var buttonClasses$1 = buttonClasses;
|
15039
|
+
|
15040
|
+
/**
|
15041
|
+
* @ignore - internal component.
|
15042
|
+
*/
|
15043
|
+
const ButtonGroupContext = /*#__PURE__*/React.createContext({});
|
15044
|
+
if (process.env.NODE_ENV !== 'production') {
|
15045
|
+
ButtonGroupContext.displayName = 'ButtonGroupContext';
|
15046
|
+
}
|
15047
|
+
var ButtonGroupContext$1 = ButtonGroupContext;
|
15048
|
+
|
15049
|
+
const _excluded$8 = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
|
15050
|
+
const useUtilityClasses$6 = ownerState => {
|
15051
|
+
const {
|
15052
|
+
color,
|
15053
|
+
disableElevation,
|
15054
|
+
fullWidth,
|
15055
|
+
size,
|
15056
|
+
variant,
|
15057
|
+
classes
|
15058
|
+
} = ownerState;
|
15059
|
+
const slots = {
|
15060
|
+
root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, color === 'inherit' && 'colorInherit', disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
|
15061
|
+
label: ['label'],
|
15062
|
+
startIcon: ['startIcon', `iconSize${capitalize(size)}`],
|
15063
|
+
endIcon: ['endIcon', `iconSize${capitalize(size)}`]
|
15064
|
+
};
|
15065
|
+
const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
|
15066
|
+
return _extends({}, classes, composedClasses);
|
15067
|
+
};
|
15068
|
+
const commonIconStyles = ownerState => _extends({}, ownerState.size === 'small' && {
|
15069
|
+
'& > *:nth-of-type(1)': {
|
15070
|
+
fontSize: 18
|
15071
|
+
}
|
15072
|
+
}, ownerState.size === 'medium' && {
|
15073
|
+
'& > *:nth-of-type(1)': {
|
15074
|
+
fontSize: 20
|
15075
|
+
}
|
15076
|
+
}, ownerState.size === 'large' && {
|
15077
|
+
'& > *:nth-of-type(1)': {
|
15078
|
+
fontSize: 22
|
15079
|
+
}
|
15080
|
+
});
|
15081
|
+
const ButtonRoot = styled$1(ButtonBase$1, {
|
15082
|
+
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
15083
|
+
name: 'MuiButton',
|
14574
15084
|
slot: 'Root',
|
14575
15085
|
overridesResolver: (props, styles) => {
|
14576
15086
|
const {
|
14577
15087
|
ownerState
|
14578
15088
|
} = props;
|
14579
|
-
return [styles.root,
|
15089
|
+
return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
|
14580
15090
|
}
|
14581
15091
|
})(({
|
14582
15092
|
theme,
|
14583
15093
|
ownerState
|
15094
|
+
}) => {
|
15095
|
+
var _theme$palette$getCon, _theme$palette;
|
15096
|
+
const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
|
15097
|
+
const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
|
15098
|
+
return _extends({}, theme.typography.button, {
|
15099
|
+
minWidth: 64,
|
15100
|
+
padding: '6px 16px',
|
15101
|
+
borderRadius: (theme.vars || theme).shape.borderRadius,
|
15102
|
+
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
|
15103
|
+
duration: theme.transitions.duration.short
|
15104
|
+
}),
|
15105
|
+
'&:hover': _extends({
|
15106
|
+
textDecoration: 'none',
|
15107
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
|
15108
|
+
// Reset on touch devices, it doesn't add specificity
|
15109
|
+
'@media (hover: none)': {
|
15110
|
+
backgroundColor: 'transparent'
|
15111
|
+
}
|
15112
|
+
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
15113
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
15114
|
+
// Reset on touch devices, it doesn't add specificity
|
15115
|
+
'@media (hover: none)': {
|
15116
|
+
backgroundColor: 'transparent'
|
15117
|
+
}
|
15118
|
+
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
15119
|
+
border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
|
15120
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
15121
|
+
// Reset on touch devices, it doesn't add specificity
|
15122
|
+
'@media (hover: none)': {
|
15123
|
+
backgroundColor: 'transparent'
|
15124
|
+
}
|
15125
|
+
}, ownerState.variant === 'contained' && {
|
15126
|
+
backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
|
15127
|
+
boxShadow: (theme.vars || theme).shadows[4],
|
15128
|
+
// Reset on touch devices, it doesn't add specificity
|
15129
|
+
'@media (hover: none)': {
|
15130
|
+
boxShadow: (theme.vars || theme).shadows[2],
|
15131
|
+
backgroundColor: (theme.vars || theme).palette.grey[300]
|
15132
|
+
}
|
15133
|
+
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
15134
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
|
15135
|
+
// Reset on touch devices, it doesn't add specificity
|
15136
|
+
'@media (hover: none)': {
|
15137
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
15138
|
+
}
|
15139
|
+
}),
|
15140
|
+
'&:active': _extends({}, ownerState.variant === 'contained' && {
|
15141
|
+
boxShadow: (theme.vars || theme).shadows[8]
|
15142
|
+
}),
|
15143
|
+
[`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
|
15144
|
+
boxShadow: (theme.vars || theme).shadows[6]
|
15145
|
+
}),
|
15146
|
+
[`&.${buttonClasses$1.disabled}`]: _extends({
|
15147
|
+
color: (theme.vars || theme).palette.action.disabled
|
15148
|
+
}, ownerState.variant === 'outlined' && {
|
15149
|
+
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
|
15150
|
+
}, ownerState.variant === 'contained' && {
|
15151
|
+
color: (theme.vars || theme).palette.action.disabled,
|
15152
|
+
boxShadow: (theme.vars || theme).shadows[0],
|
15153
|
+
backgroundColor: (theme.vars || theme).palette.action.disabledBackground
|
15154
|
+
})
|
15155
|
+
}, ownerState.variant === 'text' && {
|
15156
|
+
padding: '6px 8px'
|
15157
|
+
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
15158
|
+
color: (theme.vars || theme).palette[ownerState.color].main
|
15159
|
+
}, ownerState.variant === 'outlined' && {
|
15160
|
+
padding: '5px 15px',
|
15161
|
+
border: '1px solid currentColor'
|
15162
|
+
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
15163
|
+
color: (theme.vars || theme).palette[ownerState.color].main,
|
15164
|
+
border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
|
15165
|
+
}, ownerState.variant === 'contained' && {
|
15166
|
+
color: theme.vars ?
|
15167
|
+
// this is safe because grey does not change between default light/dark mode
|
15168
|
+
theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
|
15169
|
+
backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
|
15170
|
+
boxShadow: (theme.vars || theme).shadows[2]
|
15171
|
+
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
15172
|
+
color: (theme.vars || theme).palette[ownerState.color].contrastText,
|
15173
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
15174
|
+
}, ownerState.color === 'inherit' && {
|
15175
|
+
color: 'inherit',
|
15176
|
+
borderColor: 'currentColor'
|
15177
|
+
}, ownerState.size === 'small' && ownerState.variant === 'text' && {
|
15178
|
+
padding: '4px 5px',
|
15179
|
+
fontSize: theme.typography.pxToRem(13)
|
15180
|
+
}, ownerState.size === 'large' && ownerState.variant === 'text' && {
|
15181
|
+
padding: '8px 11px',
|
15182
|
+
fontSize: theme.typography.pxToRem(15)
|
15183
|
+
}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
|
15184
|
+
padding: '3px 9px',
|
15185
|
+
fontSize: theme.typography.pxToRem(13)
|
15186
|
+
}, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
|
15187
|
+
padding: '7px 21px',
|
15188
|
+
fontSize: theme.typography.pxToRem(15)
|
15189
|
+
}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
|
15190
|
+
padding: '4px 10px',
|
15191
|
+
fontSize: theme.typography.pxToRem(13)
|
15192
|
+
}, ownerState.size === 'large' && ownerState.variant === 'contained' && {
|
15193
|
+
padding: '8px 22px',
|
15194
|
+
fontSize: theme.typography.pxToRem(15)
|
15195
|
+
}, ownerState.fullWidth && {
|
15196
|
+
width: '100%'
|
15197
|
+
});
|
15198
|
+
}, ({
|
15199
|
+
ownerState
|
15200
|
+
}) => ownerState.disableElevation && {
|
15201
|
+
boxShadow: 'none',
|
15202
|
+
'&:hover': {
|
15203
|
+
boxShadow: 'none'
|
15204
|
+
},
|
15205
|
+
[`&.${buttonClasses$1.focusVisible}`]: {
|
15206
|
+
boxShadow: 'none'
|
15207
|
+
},
|
15208
|
+
'&:active': {
|
15209
|
+
boxShadow: 'none'
|
15210
|
+
},
|
15211
|
+
[`&.${buttonClasses$1.disabled}`]: {
|
15212
|
+
boxShadow: 'none'
|
15213
|
+
}
|
15214
|
+
});
|
15215
|
+
const ButtonStartIcon = styled$1('span', {
|
15216
|
+
name: 'MuiButton',
|
15217
|
+
slot: 'StartIcon',
|
15218
|
+
overridesResolver: (props, styles) => {
|
15219
|
+
const {
|
15220
|
+
ownerState
|
15221
|
+
} = props;
|
15222
|
+
return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
|
15223
|
+
}
|
15224
|
+
})(({
|
15225
|
+
ownerState
|
14584
15226
|
}) => _extends({
|
14585
|
-
|
14586
|
-
|
14587
|
-
|
14588
|
-
|
14589
|
-
|
14590
|
-
|
14591
|
-
|
14592
|
-
|
14593
|
-
|
14594
|
-
const ModalBackdrop = styled$1(Backdrop$1, {
|
14595
|
-
name: 'MuiModal',
|
14596
|
-
slot: 'Backdrop',
|
15227
|
+
display: 'inherit',
|
15228
|
+
marginRight: 8,
|
15229
|
+
marginLeft: -4
|
15230
|
+
}, ownerState.size === 'small' && {
|
15231
|
+
marginLeft: -2
|
15232
|
+
}, commonIconStyles(ownerState)));
|
15233
|
+
const ButtonEndIcon = styled$1('span', {
|
15234
|
+
name: 'MuiButton',
|
15235
|
+
slot: 'EndIcon',
|
14597
15236
|
overridesResolver: (props, styles) => {
|
14598
|
-
|
15237
|
+
const {
|
15238
|
+
ownerState
|
15239
|
+
} = props;
|
15240
|
+
return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
|
14599
15241
|
}
|
14600
|
-
})({
|
14601
|
-
|
14602
|
-
})
|
14603
|
-
|
14604
|
-
|
14605
|
-
|
14606
|
-
|
14607
|
-
|
14608
|
-
|
14609
|
-
|
14610
|
-
|
14611
|
-
|
14612
|
-
|
14613
|
-
* rather than directly using Modal.
|
14614
|
-
*
|
14615
|
-
* This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
|
14616
|
-
*/
|
14617
|
-
const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
|
14618
|
-
var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
|
15242
|
+
})(({
|
15243
|
+
ownerState
|
15244
|
+
}) => _extends({
|
15245
|
+
display: 'inherit',
|
15246
|
+
marginRight: -4,
|
15247
|
+
marginLeft: 8
|
15248
|
+
}, ownerState.size === 'small' && {
|
15249
|
+
marginRight: -2
|
15250
|
+
}, commonIconStyles(ownerState)));
|
15251
|
+
const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
15252
|
+
// props priority: `inProps` > `contextProps` > `themeDefaultProps`
|
15253
|
+
const contextProps = React.useContext(ButtonGroupContext$1);
|
15254
|
+
const resolvedProps = resolveProps(contextProps, inProps);
|
14619
15255
|
const props = useThemeProps({
|
14620
|
-
|
14621
|
-
|
15256
|
+
props: resolvedProps,
|
15257
|
+
name: 'MuiButton'
|
14622
15258
|
});
|
14623
15259
|
const {
|
14624
|
-
BackdropComponent = ModalBackdrop,
|
14625
|
-
BackdropProps,
|
14626
|
-
classes,
|
14627
|
-
className,
|
14628
|
-
closeAfterTransition = false,
|
14629
15260
|
children,
|
14630
|
-
|
14631
|
-
component,
|
14632
|
-
|
14633
|
-
|
14634
|
-
|
14635
|
-
|
14636
|
-
|
14637
|
-
|
14638
|
-
|
14639
|
-
|
14640
|
-
|
14641
|
-
|
14642
|
-
|
14643
|
-
onClose,
|
14644
|
-
open,
|
14645
|
-
slotProps,
|
14646
|
-
slots,
|
14647
|
-
// eslint-disable-next-line react/prop-types
|
14648
|
-
theme
|
15261
|
+
color = 'primary',
|
15262
|
+
component = 'button',
|
15263
|
+
className,
|
15264
|
+
disabled = false,
|
15265
|
+
disableElevation = false,
|
15266
|
+
disableFocusRipple = false,
|
15267
|
+
endIcon: endIconProp,
|
15268
|
+
focusVisibleClassName,
|
15269
|
+
fullWidth = false,
|
15270
|
+
size = 'medium',
|
15271
|
+
startIcon: startIconProp,
|
15272
|
+
type,
|
15273
|
+
variant = 'text'
|
14649
15274
|
} = props,
|
14650
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14651
|
-
const
|
14652
|
-
|
14653
|
-
|
14654
|
-
|
14655
|
-
|
14656
|
-
|
14657
|
-
|
14658
|
-
|
14659
|
-
|
14660
|
-
|
14661
|
-
hideBackdrop,
|
14662
|
-
keepMounted,
|
14663
|
-
onBackdropClick,
|
14664
|
-
onClose,
|
14665
|
-
open
|
14666
|
-
};
|
14667
|
-
const ownerState = _extends({}, props, commonProps, {
|
14668
|
-
exited
|
15275
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$8);
|
15276
|
+
const ownerState = _extends({}, props, {
|
15277
|
+
color,
|
15278
|
+
component,
|
15279
|
+
disabled,
|
15280
|
+
disableElevation,
|
15281
|
+
disableFocusRipple,
|
15282
|
+
fullWidth,
|
15283
|
+
size,
|
15284
|
+
type,
|
15285
|
+
variant
|
14669
15286
|
});
|
14670
|
-
const
|
14671
|
-
const
|
14672
|
-
|
14673
|
-
|
14674
|
-
|
14675
|
-
|
14676
|
-
|
14677
|
-
|
14678
|
-
|
14679
|
-
|
14680
|
-
|
14681
|
-
|
14682
|
-
|
14683
|
-
|
14684
|
-
|
14685
|
-
|
14686
|
-
|
14687
|
-
|
14688
|
-
|
14689
|
-
|
14690
|
-
|
14691
|
-
|
14692
|
-
|
14693
|
-
}, other, commonProps, {
|
14694
|
-
children: children
|
15287
|
+
const classes = useUtilityClasses$6(ownerState);
|
15288
|
+
const startIcon = startIconProp && /*#__PURE__*/jsx(ButtonStartIcon, {
|
15289
|
+
className: classes.startIcon,
|
15290
|
+
ownerState: ownerState,
|
15291
|
+
children: startIconProp
|
15292
|
+
});
|
15293
|
+
const endIcon = endIconProp && /*#__PURE__*/jsx(ButtonEndIcon, {
|
15294
|
+
className: classes.endIcon,
|
15295
|
+
ownerState: ownerState,
|
15296
|
+
children: endIconProp
|
15297
|
+
});
|
15298
|
+
return /*#__PURE__*/jsxs(ButtonRoot, _extends({
|
15299
|
+
ownerState: ownerState,
|
15300
|
+
className: clsx(contextProps.className, classes.root, className),
|
15301
|
+
component: component,
|
15302
|
+
disabled: disabled,
|
15303
|
+
focusRipple: !disableFocusRipple,
|
15304
|
+
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
15305
|
+
ref: ref,
|
15306
|
+
type: type
|
15307
|
+
}, other, {
|
15308
|
+
classes: classes,
|
15309
|
+
children: [startIcon, children, endIcon]
|
14695
15310
|
}));
|
14696
15311
|
});
|
14697
|
-
process.env.NODE_ENV !== "production" ?
|
15312
|
+
process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
|
14698
15313
|
// ----------------------------- Warning --------------------------------
|
14699
15314
|
// | These PropTypes are generated from the TypeScript type definitions |
|
14700
15315
|
// | To update them edit the d.ts file and run "yarn proptypes" |
|
14701
15316
|
// ----------------------------------------------------------------------
|
14702
15317
|
/**
|
14703
|
-
*
|
14704
|
-
* @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
|
14705
|
-
* Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
|
14706
|
-
* @default styled(Backdrop, {
|
14707
|
-
* name: 'MuiModal',
|
14708
|
-
* slot: 'Backdrop',
|
14709
|
-
* overridesResolver: (props, styles) => {
|
14710
|
-
* return styles.backdrop;
|
14711
|
-
* },
|
14712
|
-
* })({
|
14713
|
-
* zIndex: -1,
|
14714
|
-
* })
|
14715
|
-
*/
|
14716
|
-
BackdropComponent: PropTypes.elementType,
|
14717
|
-
/**
|
14718
|
-
* Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
|
14719
|
-
* @deprecated Use `slotProps.backdrop` instead.
|
14720
|
-
*/
|
14721
|
-
BackdropProps: PropTypes.object,
|
14722
|
-
/**
|
14723
|
-
* A single child content element.
|
15318
|
+
* The content of the component.
|
14724
15319
|
*/
|
14725
|
-
children:
|
15320
|
+
children: PropTypes.node,
|
14726
15321
|
/**
|
14727
15322
|
* Override or extend the styles applied to the component.
|
14728
15323
|
*/
|
@@ -14732,275 +15327,910 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
|
|
14732
15327
|
*/
|
14733
15328
|
className: PropTypes.string,
|
14734
15329
|
/**
|
14735
|
-
*
|
14736
|
-
*
|
15330
|
+
* The color of the component.
|
15331
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
15332
|
+
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
15333
|
+
* @default 'primary'
|
14737
15334
|
*/
|
14738
|
-
|
15335
|
+
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning']), PropTypes.string]),
|
14739
15336
|
/**
|
14740
15337
|
* The component used for the root node.
|
14741
15338
|
* Either a string to use a HTML element or a component.
|
14742
15339
|
*/
|
14743
15340
|
component: PropTypes.elementType,
|
14744
15341
|
/**
|
14745
|
-
*
|
14746
|
-
*
|
14747
|
-
* This prop is an alias for the `slots` prop.
|
14748
|
-
* It's recommended to use the `slots` prop instead.
|
14749
|
-
*
|
14750
|
-
* @default {}
|
15342
|
+
* If `true`, the component is disabled.
|
15343
|
+
* @default false
|
14751
15344
|
*/
|
14752
|
-
|
14753
|
-
Backdrop: PropTypes.elementType,
|
14754
|
-
Root: PropTypes.elementType
|
14755
|
-
}),
|
15345
|
+
disabled: PropTypes.bool,
|
14756
15346
|
/**
|
14757
|
-
*
|
14758
|
-
*
|
14759
|
-
*
|
14760
|
-
* This prop is an alias for the `slotProps` prop.
|
14761
|
-
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
|
14762
|
-
*
|
14763
|
-
* @default {}
|
15347
|
+
* If `true`, no elevation is used.
|
15348
|
+
* @default false
|
14764
15349
|
*/
|
14765
|
-
|
14766
|
-
backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
14767
|
-
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
14768
|
-
}),
|
15350
|
+
disableElevation: PropTypes.bool,
|
14769
15351
|
/**
|
14770
|
-
*
|
14771
|
-
*
|
14772
|
-
*
|
14773
|
-
* By default, it uses the body of the top-level document object,
|
14774
|
-
* so it's simply `document.body` most of the time.
|
15352
|
+
* If `true`, the keyboard focus ripple is disabled.
|
15353
|
+
* @default false
|
14775
15354
|
*/
|
14776
|
-
|
15355
|
+
disableFocusRipple: PropTypes.bool,
|
14777
15356
|
/**
|
14778
|
-
* If `true`, the
|
14779
|
-
* replace it to the last focused element when it closes.
|
14780
|
-
* This also works correctly with any modal children that have the `disableAutoFocus` prop.
|
15357
|
+
* If `true`, the ripple effect is disabled.
|
14781
15358
|
*
|
14782
|
-
*
|
14783
|
-
*
|
15359
|
+
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
|
15360
|
+
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
|
14784
15361
|
* @default false
|
14785
15362
|
*/
|
14786
|
-
|
15363
|
+
disableRipple: PropTypes.bool,
|
14787
15364
|
/**
|
14788
|
-
*
|
14789
|
-
*
|
14790
|
-
* Generally this should never be set to `true` as it makes the modal less
|
14791
|
-
* accessible to assistive technologies, like screen readers.
|
14792
|
-
* @default false
|
15365
|
+
* Element placed after the children.
|
14793
15366
|
*/
|
14794
|
-
|
15367
|
+
endIcon: PropTypes.node,
|
14795
15368
|
/**
|
14796
|
-
*
|
14797
|
-
* @default false
|
15369
|
+
* @ignore
|
14798
15370
|
*/
|
14799
|
-
|
15371
|
+
focusVisibleClassName: PropTypes.string,
|
14800
15372
|
/**
|
14801
|
-
*
|
15373
|
+
* If `true`, the button will take up the full width of its container.
|
14802
15374
|
* @default false
|
14803
15375
|
*/
|
14804
|
-
|
15376
|
+
fullWidth: PropTypes.bool,
|
14805
15377
|
/**
|
14806
|
-
*
|
14807
|
-
*
|
14808
|
-
* @default false
|
15378
|
+
* The URL to link to when the button is clicked.
|
15379
|
+
* If defined, an `a` element will be used as the root node.
|
14809
15380
|
*/
|
14810
|
-
|
15381
|
+
href: PropTypes.string,
|
14811
15382
|
/**
|
14812
|
-
*
|
14813
|
-
*
|
15383
|
+
* The size of the component.
|
15384
|
+
* `small` is equivalent to the dense button styling.
|
15385
|
+
* @default 'medium'
|
14814
15386
|
*/
|
14815
|
-
|
15387
|
+
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
|
14816
15388
|
/**
|
14817
|
-
*
|
14818
|
-
* @default false
|
15389
|
+
* Element placed before the children.
|
14819
15390
|
*/
|
14820
|
-
|
15391
|
+
startIcon: PropTypes.node,
|
14821
15392
|
/**
|
14822
|
-
*
|
14823
|
-
* This prop can be useful in SEO situation or
|
14824
|
-
* when you want to maximize the responsiveness of the Modal.
|
14825
|
-
* @default false
|
15393
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
14826
15394
|
*/
|
14827
|
-
|
15395
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
14828
15396
|
/**
|
14829
|
-
*
|
14830
|
-
* @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
|
15397
|
+
* @ignore
|
14831
15398
|
*/
|
14832
|
-
|
15399
|
+
type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
|
14833
15400
|
/**
|
14834
|
-
*
|
14835
|
-
*
|
14836
|
-
*
|
14837
|
-
* @param {object} event The event source of the callback.
|
14838
|
-
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
|
15401
|
+
* The variant to use.
|
15402
|
+
* @default 'text'
|
14839
15403
|
*/
|
14840
|
-
|
15404
|
+
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
|
15405
|
+
} : void 0;
|
15406
|
+
var Button$1 = Button;
|
15407
|
+
|
15408
|
+
function getCardUtilityClass(slot) {
|
15409
|
+
return generateUtilityClass('MuiCard', slot);
|
15410
|
+
}
|
15411
|
+
generateUtilityClasses('MuiCard', ['root']);
|
15412
|
+
|
15413
|
+
const _excluded$7 = ["className", "raised"];
|
15414
|
+
const useUtilityClasses$5 = ownerState => {
|
15415
|
+
const {
|
15416
|
+
classes
|
15417
|
+
} = ownerState;
|
15418
|
+
const slots = {
|
15419
|
+
root: ['root']
|
15420
|
+
};
|
15421
|
+
return composeClasses(slots, getCardUtilityClass, classes);
|
15422
|
+
};
|
15423
|
+
const CardRoot = styled$1(Paper$1, {
|
15424
|
+
name: 'MuiCard',
|
15425
|
+
slot: 'Root',
|
15426
|
+
overridesResolver: (props, styles) => styles.root
|
15427
|
+
})(() => {
|
15428
|
+
return {
|
15429
|
+
overflow: 'hidden'
|
15430
|
+
};
|
15431
|
+
});
|
15432
|
+
const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
|
15433
|
+
const props = useThemeProps({
|
15434
|
+
props: inProps,
|
15435
|
+
name: 'MuiCard'
|
15436
|
+
});
|
15437
|
+
const {
|
15438
|
+
className,
|
15439
|
+
raised = false
|
15440
|
+
} = props,
|
15441
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$7);
|
15442
|
+
const ownerState = _extends({}, props, {
|
15443
|
+
raised
|
15444
|
+
});
|
15445
|
+
const classes = useUtilityClasses$5(ownerState);
|
15446
|
+
return /*#__PURE__*/jsx(CardRoot, _extends({
|
15447
|
+
className: clsx(classes.root, className),
|
15448
|
+
elevation: raised ? 8 : undefined,
|
15449
|
+
ref: ref,
|
15450
|
+
ownerState: ownerState
|
15451
|
+
}, other));
|
15452
|
+
});
|
15453
|
+
process.env.NODE_ENV !== "production" ? Card.propTypes /* remove-proptypes */ = {
|
15454
|
+
// ----------------------------- Warning --------------------------------
|
15455
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
15456
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
15457
|
+
// ----------------------------------------------------------------------
|
14841
15458
|
/**
|
14842
|
-
*
|
15459
|
+
* The content of the component.
|
14843
15460
|
*/
|
14844
|
-
|
15461
|
+
children: PropTypes.node,
|
14845
15462
|
/**
|
14846
|
-
*
|
14847
|
-
* @default {}
|
15463
|
+
* Override or extend the styles applied to the component.
|
14848
15464
|
*/
|
14849
|
-
|
14850
|
-
backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
14851
|
-
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
14852
|
-
}),
|
15465
|
+
classes: PropTypes.object,
|
14853
15466
|
/**
|
14854
|
-
*
|
14855
|
-
* Either a string to use a HTML element or a component.
|
14856
|
-
* @default {}
|
15467
|
+
* @ignore
|
14857
15468
|
*/
|
14858
|
-
|
14859
|
-
|
14860
|
-
|
15469
|
+
className: PropTypes.string,
|
15470
|
+
/**
|
15471
|
+
* If `true`, the card will use raised styling.
|
15472
|
+
* @default false
|
15473
|
+
*/
|
15474
|
+
raised: chainPropTypes(PropTypes.bool, props => {
|
15475
|
+
if (props.raised && props.variant === 'outlined') {
|
15476
|
+
return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
|
15477
|
+
}
|
15478
|
+
return null;
|
14861
15479
|
}),
|
14862
15480
|
/**
|
14863
15481
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
14864
15482
|
*/
|
14865
15483
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
14866
15484
|
} : void 0;
|
14867
|
-
var
|
15485
|
+
var Card$1 = Card;
|
14868
15486
|
|
14869
|
-
|
14870
|
-
|
14871
|
-
|
14872
|
-
|
14873
|
-
|
14874
|
-
|
14875
|
-
|
14876
|
-
|
14877
|
-
|
14878
|
-
|
14879
|
-
|
14880
|
-
|
14881
|
-
|
14882
|
-
|
14883
|
-
|
14884
|
-
|
14885
|
-
|
14886
|
-
|
14887
|
-
|
14888
|
-
|
14889
|
-
|
14890
|
-
|
14891
|
-
|
14892
|
-
|
14893
|
-
}
|
14894
|
-
if (direction === 'right') {
|
14895
|
-
if (containerRect) {
|
14896
|
-
return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
|
14897
|
-
}
|
14898
|
-
return `translateX(-${rect.left + rect.width - offsetX}px)`;
|
14899
|
-
}
|
14900
|
-
if (direction === 'up') {
|
14901
|
-
if (containerRect) {
|
14902
|
-
return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
|
15487
|
+
function getCardContentUtilityClass(slot) {
|
15488
|
+
return generateUtilityClass('MuiCardContent', slot);
|
15489
|
+
}
|
15490
|
+
generateUtilityClasses('MuiCardContent', ['root']);
|
15491
|
+
|
15492
|
+
const _excluded$6 = ["className", "component"];
|
15493
|
+
const useUtilityClasses$4 = ownerState => {
|
15494
|
+
const {
|
15495
|
+
classes
|
15496
|
+
} = ownerState;
|
15497
|
+
const slots = {
|
15498
|
+
root: ['root']
|
15499
|
+
};
|
15500
|
+
return composeClasses(slots, getCardContentUtilityClass, classes);
|
15501
|
+
};
|
15502
|
+
const CardContentRoot = styled$1('div', {
|
15503
|
+
name: 'MuiCardContent',
|
15504
|
+
slot: 'Root',
|
15505
|
+
overridesResolver: (props, styles) => styles.root
|
15506
|
+
})(() => {
|
15507
|
+
return {
|
15508
|
+
padding: 16,
|
15509
|
+
'&:last-child': {
|
15510
|
+
paddingBottom: 24
|
14903
15511
|
}
|
14904
|
-
|
14905
|
-
|
15512
|
+
};
|
15513
|
+
});
|
15514
|
+
const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
|
15515
|
+
const props = useThemeProps({
|
15516
|
+
props: inProps,
|
15517
|
+
name: 'MuiCardContent'
|
15518
|
+
});
|
15519
|
+
const {
|
15520
|
+
className,
|
15521
|
+
component = 'div'
|
15522
|
+
} = props,
|
15523
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$6);
|
15524
|
+
const ownerState = _extends({}, props, {
|
15525
|
+
component
|
15526
|
+
});
|
15527
|
+
const classes = useUtilityClasses$4(ownerState);
|
15528
|
+
return /*#__PURE__*/jsx(CardContentRoot, _extends({
|
15529
|
+
as: component,
|
15530
|
+
className: clsx(classes.root, className),
|
15531
|
+
ownerState: ownerState,
|
15532
|
+
ref: ref
|
15533
|
+
}, other));
|
15534
|
+
});
|
15535
|
+
process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptypes */ = {
|
15536
|
+
// ----------------------------- Warning --------------------------------
|
15537
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
15538
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
15539
|
+
// ----------------------------------------------------------------------
|
15540
|
+
/**
|
15541
|
+
* The content of the component.
|
15542
|
+
*/
|
15543
|
+
children: PropTypes.node,
|
15544
|
+
/**
|
15545
|
+
* Override or extend the styles applied to the component.
|
15546
|
+
*/
|
15547
|
+
classes: PropTypes.object,
|
15548
|
+
/**
|
15549
|
+
* @ignore
|
15550
|
+
*/
|
15551
|
+
className: PropTypes.string,
|
15552
|
+
/**
|
15553
|
+
* The component used for the root node.
|
15554
|
+
* Either a string to use a HTML element or a component.
|
15555
|
+
*/
|
15556
|
+
component: PropTypes.elementType,
|
15557
|
+
/**
|
15558
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
15559
|
+
*/
|
15560
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
15561
|
+
} : void 0;
|
15562
|
+
var CardContent$1 = CardContent;
|
14906
15563
|
|
14907
|
-
|
14908
|
-
|
14909
|
-
|
15564
|
+
const _excluded$5 = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
|
15565
|
+
const ModalRoot = styled$1('div', {
|
15566
|
+
name: 'MuiModal',
|
15567
|
+
slot: 'Root',
|
15568
|
+
overridesResolver: (props, styles) => {
|
15569
|
+
const {
|
15570
|
+
ownerState
|
15571
|
+
} = props;
|
15572
|
+
return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
|
14910
15573
|
}
|
14911
|
-
|
14912
|
-
|
14913
|
-
|
14914
|
-
|
14915
|
-
|
14916
|
-
|
14917
|
-
|
14918
|
-
|
14919
|
-
|
14920
|
-
|
14921
|
-
|
15574
|
+
})(({
|
15575
|
+
theme,
|
15576
|
+
ownerState
|
15577
|
+
}) => _extends({
|
15578
|
+
position: 'fixed',
|
15579
|
+
zIndex: (theme.vars || theme).zIndex.modal,
|
15580
|
+
right: 0,
|
15581
|
+
bottom: 0,
|
15582
|
+
top: 0,
|
15583
|
+
left: 0
|
15584
|
+
}, !ownerState.open && ownerState.exited && {
|
15585
|
+
visibility: 'hidden'
|
15586
|
+
}));
|
15587
|
+
const ModalBackdrop = styled$1(Backdrop$1, {
|
15588
|
+
name: 'MuiModal',
|
15589
|
+
slot: 'Backdrop',
|
15590
|
+
overridesResolver: (props, styles) => {
|
15591
|
+
return styles.backdrop;
|
14922
15592
|
}
|
14923
|
-
}
|
15593
|
+
})({
|
15594
|
+
zIndex: -1
|
15595
|
+
});
|
14924
15596
|
|
14925
15597
|
/**
|
14926
|
-
*
|
14927
|
-
*
|
15598
|
+
* Modal is a lower-level construct that is leveraged by the following components:
|
15599
|
+
*
|
15600
|
+
* - [Dialog](/material-ui/api/dialog/)
|
15601
|
+
* - [Drawer](/material-ui/api/drawer/)
|
15602
|
+
* - [Menu](/material-ui/api/menu/)
|
15603
|
+
* - [Popover](/material-ui/api/popover/)
|
15604
|
+
*
|
15605
|
+
* If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
|
15606
|
+
* rather than directly using Modal.
|
15607
|
+
*
|
15608
|
+
* This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
|
14928
15609
|
*/
|
14929
|
-
const
|
14930
|
-
|
14931
|
-
const
|
14932
|
-
|
14933
|
-
|
14934
|
-
};
|
14935
|
-
const defaultTimeout = {
|
14936
|
-
enter: theme.transitions.duration.enteringScreen,
|
14937
|
-
exit: theme.transitions.duration.leavingScreen
|
14938
|
-
};
|
15610
|
+
const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
|
15611
|
+
var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
|
15612
|
+
const props = useThemeProps({
|
15613
|
+
name: 'MuiModal',
|
15614
|
+
props: inProps
|
15615
|
+
});
|
14939
15616
|
const {
|
14940
|
-
|
14941
|
-
|
15617
|
+
BackdropComponent = ModalBackdrop,
|
15618
|
+
BackdropProps,
|
15619
|
+
classes,
|
15620
|
+
className,
|
15621
|
+
closeAfterTransition = false,
|
14942
15622
|
children,
|
14943
|
-
container
|
14944
|
-
|
14945
|
-
|
14946
|
-
|
14947
|
-
|
14948
|
-
|
14949
|
-
|
14950
|
-
|
14951
|
-
|
14952
|
-
|
14953
|
-
|
14954
|
-
|
15623
|
+
container,
|
15624
|
+
component,
|
15625
|
+
components = {},
|
15626
|
+
componentsProps = {},
|
15627
|
+
disableAutoFocus = false,
|
15628
|
+
disableEnforceFocus = false,
|
15629
|
+
disableEscapeKeyDown = false,
|
15630
|
+
disablePortal = false,
|
15631
|
+
disableRestoreFocus = false,
|
15632
|
+
disableScrollLock = false,
|
15633
|
+
hideBackdrop = false,
|
15634
|
+
keepMounted = false,
|
15635
|
+
onBackdropClick,
|
15636
|
+
onClose,
|
15637
|
+
open,
|
15638
|
+
slotProps,
|
15639
|
+
slots,
|
14955
15640
|
// eslint-disable-next-line react/prop-types
|
14956
|
-
|
15641
|
+
theme
|
14957
15642
|
} = props,
|
14958
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14959
|
-
const
|
14960
|
-
const
|
14961
|
-
|
14962
|
-
|
14963
|
-
|
14964
|
-
|
14965
|
-
|
14966
|
-
|
14967
|
-
|
14968
|
-
|
14969
|
-
|
15643
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$5);
|
15644
|
+
const [exited, setExited] = React.useState(true);
|
15645
|
+
const commonProps = {
|
15646
|
+
container,
|
15647
|
+
closeAfterTransition,
|
15648
|
+
disableAutoFocus,
|
15649
|
+
disableEnforceFocus,
|
15650
|
+
disableEscapeKeyDown,
|
15651
|
+
disablePortal,
|
15652
|
+
disableRestoreFocus,
|
15653
|
+
disableScrollLock,
|
15654
|
+
hideBackdrop,
|
15655
|
+
keepMounted,
|
15656
|
+
onBackdropClick,
|
15657
|
+
onClose,
|
15658
|
+
open
|
14970
15659
|
};
|
14971
|
-
const
|
14972
|
-
|
14973
|
-
reflow(node);
|
14974
|
-
if (onEnter) {
|
14975
|
-
onEnter(node, isAppearing);
|
14976
|
-
}
|
14977
|
-
});
|
14978
|
-
const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
|
14979
|
-
const transitionProps = getTransitionProps({
|
14980
|
-
timeout,
|
14981
|
-
style,
|
14982
|
-
easing: easingProp
|
14983
|
-
}, {
|
14984
|
-
mode: 'enter'
|
14985
|
-
});
|
14986
|
-
node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps));
|
14987
|
-
node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps));
|
14988
|
-
node.style.webkitTransform = 'none';
|
14989
|
-
node.style.transform = 'none';
|
14990
|
-
if (onEntering) {
|
14991
|
-
onEntering(node, isAppearing);
|
14992
|
-
}
|
15660
|
+
const ownerState = _extends({}, props, commonProps, {
|
15661
|
+
exited
|
14993
15662
|
});
|
14994
|
-
const
|
14995
|
-
const
|
14996
|
-
const
|
14997
|
-
|
14998
|
-
|
14999
|
-
|
15000
|
-
|
15001
|
-
|
15002
|
-
|
15003
|
-
|
15663
|
+
const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
|
15664
|
+
const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
|
15665
|
+
const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
|
15666
|
+
const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
|
15667
|
+
return /*#__PURE__*/jsx(ModalUnstyled, _extends({
|
15668
|
+
slots: {
|
15669
|
+
root: RootSlot,
|
15670
|
+
backdrop: BackdropSlot
|
15671
|
+
},
|
15672
|
+
slotProps: {
|
15673
|
+
root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
|
15674
|
+
as: component,
|
15675
|
+
theme
|
15676
|
+
}, {
|
15677
|
+
className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
|
15678
|
+
}),
|
15679
|
+
backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
|
15680
|
+
className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
|
15681
|
+
})
|
15682
|
+
},
|
15683
|
+
onTransitionEnter: () => setExited(false),
|
15684
|
+
onTransitionExited: () => setExited(true),
|
15685
|
+
ref: ref
|
15686
|
+
}, other, commonProps, {
|
15687
|
+
children: children
|
15688
|
+
}));
|
15689
|
+
});
|
15690
|
+
process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {
|
15691
|
+
// ----------------------------- Warning --------------------------------
|
15692
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
15693
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
15694
|
+
// ----------------------------------------------------------------------
|
15695
|
+
/**
|
15696
|
+
* A backdrop component. This prop enables custom backdrop rendering.
|
15697
|
+
* @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
|
15698
|
+
* Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
|
15699
|
+
* @default styled(Backdrop, {
|
15700
|
+
* name: 'MuiModal',
|
15701
|
+
* slot: 'Backdrop',
|
15702
|
+
* overridesResolver: (props, styles) => {
|
15703
|
+
* return styles.backdrop;
|
15704
|
+
* },
|
15705
|
+
* })({
|
15706
|
+
* zIndex: -1,
|
15707
|
+
* })
|
15708
|
+
*/
|
15709
|
+
BackdropComponent: PropTypes.elementType,
|
15710
|
+
/**
|
15711
|
+
* Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
|
15712
|
+
* @deprecated Use `slotProps.backdrop` instead.
|
15713
|
+
*/
|
15714
|
+
BackdropProps: PropTypes.object,
|
15715
|
+
/**
|
15716
|
+
* A single child content element.
|
15717
|
+
*/
|
15718
|
+
children: elementAcceptingRef$1.isRequired,
|
15719
|
+
/**
|
15720
|
+
* Override or extend the styles applied to the component.
|
15721
|
+
*/
|
15722
|
+
classes: PropTypes.object,
|
15723
|
+
/**
|
15724
|
+
* @ignore
|
15725
|
+
*/
|
15726
|
+
className: PropTypes.string,
|
15727
|
+
/**
|
15728
|
+
* When set to true the Modal waits until a nested Transition is completed before closing.
|
15729
|
+
* @default false
|
15730
|
+
*/
|
15731
|
+
closeAfterTransition: PropTypes.bool,
|
15732
|
+
/**
|
15733
|
+
* The component used for the root node.
|
15734
|
+
* Either a string to use a HTML element or a component.
|
15735
|
+
*/
|
15736
|
+
component: PropTypes.elementType,
|
15737
|
+
/**
|
15738
|
+
* The components used for each slot inside.
|
15739
|
+
*
|
15740
|
+
* This prop is an alias for the `slots` prop.
|
15741
|
+
* It's recommended to use the `slots` prop instead.
|
15742
|
+
*
|
15743
|
+
* @default {}
|
15744
|
+
*/
|
15745
|
+
components: PropTypes.shape({
|
15746
|
+
Backdrop: PropTypes.elementType,
|
15747
|
+
Root: PropTypes.elementType
|
15748
|
+
}),
|
15749
|
+
/**
|
15750
|
+
* The extra props for the slot components.
|
15751
|
+
* You can override the existing props or add new ones.
|
15752
|
+
*
|
15753
|
+
* This prop is an alias for the `slotProps` prop.
|
15754
|
+
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
|
15755
|
+
*
|
15756
|
+
* @default {}
|
15757
|
+
*/
|
15758
|
+
componentsProps: PropTypes.shape({
|
15759
|
+
backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
15760
|
+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
15761
|
+
}),
|
15762
|
+
/**
|
15763
|
+
* An HTML element or function that returns one.
|
15764
|
+
* The `container` will have the portal children appended to it.
|
15765
|
+
*
|
15766
|
+
* By default, it uses the body of the top-level document object,
|
15767
|
+
* so it's simply `document.body` most of the time.
|
15768
|
+
*/
|
15769
|
+
container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
|
15770
|
+
/**
|
15771
|
+
* If `true`, the modal will not automatically shift focus to itself when it opens, and
|
15772
|
+
* replace it to the last focused element when it closes.
|
15773
|
+
* This also works correctly with any modal children that have the `disableAutoFocus` prop.
|
15774
|
+
*
|
15775
|
+
* Generally this should never be set to `true` as it makes the modal less
|
15776
|
+
* accessible to assistive technologies, like screen readers.
|
15777
|
+
* @default false
|
15778
|
+
*/
|
15779
|
+
disableAutoFocus: PropTypes.bool,
|
15780
|
+
/**
|
15781
|
+
* If `true`, the modal will not prevent focus from leaving the modal while open.
|
15782
|
+
*
|
15783
|
+
* Generally this should never be set to `true` as it makes the modal less
|
15784
|
+
* accessible to assistive technologies, like screen readers.
|
15785
|
+
* @default false
|
15786
|
+
*/
|
15787
|
+
disableEnforceFocus: PropTypes.bool,
|
15788
|
+
/**
|
15789
|
+
* If `true`, hitting escape will not fire the `onClose` callback.
|
15790
|
+
* @default false
|
15791
|
+
*/
|
15792
|
+
disableEscapeKeyDown: PropTypes.bool,
|
15793
|
+
/**
|
15794
|
+
* The `children` will be under the DOM hierarchy of the parent component.
|
15795
|
+
* @default false
|
15796
|
+
*/
|
15797
|
+
disablePortal: PropTypes.bool,
|
15798
|
+
/**
|
15799
|
+
* If `true`, the modal will not restore focus to previously focused element once
|
15800
|
+
* modal is hidden or unmounted.
|
15801
|
+
* @default false
|
15802
|
+
*/
|
15803
|
+
disableRestoreFocus: PropTypes.bool,
|
15804
|
+
/**
|
15805
|
+
* Disable the scroll lock behavior.
|
15806
|
+
* @default false
|
15807
|
+
*/
|
15808
|
+
disableScrollLock: PropTypes.bool,
|
15809
|
+
/**
|
15810
|
+
* If `true`, the backdrop is not rendered.
|
15811
|
+
* @default false
|
15812
|
+
*/
|
15813
|
+
hideBackdrop: PropTypes.bool,
|
15814
|
+
/**
|
15815
|
+
* Always keep the children in the DOM.
|
15816
|
+
* This prop can be useful in SEO situation or
|
15817
|
+
* when you want to maximize the responsiveness of the Modal.
|
15818
|
+
* @default false
|
15819
|
+
*/
|
15820
|
+
keepMounted: PropTypes.bool,
|
15821
|
+
/**
|
15822
|
+
* Callback fired when the backdrop is clicked.
|
15823
|
+
* @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
|
15824
|
+
*/
|
15825
|
+
onBackdropClick: PropTypes.func,
|
15826
|
+
/**
|
15827
|
+
* Callback fired when the component requests to be closed.
|
15828
|
+
* The `reason` parameter can optionally be used to control the response to `onClose`.
|
15829
|
+
*
|
15830
|
+
* @param {object} event The event source of the callback.
|
15831
|
+
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
|
15832
|
+
*/
|
15833
|
+
onClose: PropTypes.func,
|
15834
|
+
/**
|
15835
|
+
* If `true`, the component is shown.
|
15836
|
+
*/
|
15837
|
+
open: PropTypes.bool.isRequired,
|
15838
|
+
/**
|
15839
|
+
* The props used for each slot inside the Modal.
|
15840
|
+
* @default {}
|
15841
|
+
*/
|
15842
|
+
slotProps: PropTypes.shape({
|
15843
|
+
backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
15844
|
+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
15845
|
+
}),
|
15846
|
+
/**
|
15847
|
+
* The components used for each slot inside the Modal.
|
15848
|
+
* Either a string to use a HTML element or a component.
|
15849
|
+
* @default {}
|
15850
|
+
*/
|
15851
|
+
slots: PropTypes.shape({
|
15852
|
+
backdrop: PropTypes.elementType,
|
15853
|
+
root: PropTypes.elementType
|
15854
|
+
}),
|
15855
|
+
/**
|
15856
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
15857
|
+
*/
|
15858
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
15859
|
+
} : void 0;
|
15860
|
+
var Modal$1 = Modal;
|
15861
|
+
|
15862
|
+
function getDividerUtilityClass(slot) {
|
15863
|
+
return generateUtilityClass('MuiDivider', slot);
|
15864
|
+
}
|
15865
|
+
generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
|
15866
|
+
|
15867
|
+
const _excluded$4 = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
|
15868
|
+
const useUtilityClasses$3 = ownerState => {
|
15869
|
+
const {
|
15870
|
+
absolute,
|
15871
|
+
children,
|
15872
|
+
classes,
|
15873
|
+
flexItem,
|
15874
|
+
light,
|
15875
|
+
orientation,
|
15876
|
+
textAlign,
|
15877
|
+
variant
|
15878
|
+
} = ownerState;
|
15879
|
+
const slots = {
|
15880
|
+
root: ['root', absolute && 'absolute', variant, light && 'light', orientation === 'vertical' && 'vertical', flexItem && 'flexItem', children && 'withChildren', children && orientation === 'vertical' && 'withChildrenVertical', textAlign === 'right' && orientation !== 'vertical' && 'textAlignRight', textAlign === 'left' && orientation !== 'vertical' && 'textAlignLeft'],
|
15881
|
+
wrapper: ['wrapper', orientation === 'vertical' && 'wrapperVertical']
|
15882
|
+
};
|
15883
|
+
return composeClasses(slots, getDividerUtilityClass, classes);
|
15884
|
+
};
|
15885
|
+
const DividerRoot = styled$1('div', {
|
15886
|
+
name: 'MuiDivider',
|
15887
|
+
slot: 'Root',
|
15888
|
+
overridesResolver: (props, styles) => {
|
15889
|
+
const {
|
15890
|
+
ownerState
|
15891
|
+
} = props;
|
15892
|
+
return [styles.root, ownerState.absolute && styles.absolute, styles[ownerState.variant], ownerState.light && styles.light, ownerState.orientation === 'vertical' && styles.vertical, ownerState.flexItem && styles.flexItem, ownerState.children && styles.withChildren, ownerState.children && ownerState.orientation === 'vertical' && styles.withChildrenVertical, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && styles.textAlignRight, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && styles.textAlignLeft];
|
15893
|
+
}
|
15894
|
+
})(({
|
15895
|
+
theme,
|
15896
|
+
ownerState
|
15897
|
+
}) => _extends({
|
15898
|
+
margin: 0,
|
15899
|
+
// Reset browser default style.
|
15900
|
+
flexShrink: 0,
|
15901
|
+
borderWidth: 0,
|
15902
|
+
borderStyle: 'solid',
|
15903
|
+
borderColor: (theme.vars || theme).palette.divider,
|
15904
|
+
borderBottomWidth: 'thin'
|
15905
|
+
}, ownerState.absolute && {
|
15906
|
+
position: 'absolute',
|
15907
|
+
bottom: 0,
|
15908
|
+
left: 0,
|
15909
|
+
width: '100%'
|
15910
|
+
}, ownerState.light && {
|
15911
|
+
borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
|
15912
|
+
}, ownerState.variant === 'inset' && {
|
15913
|
+
marginLeft: 72
|
15914
|
+
}, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
|
15915
|
+
marginLeft: theme.spacing(2),
|
15916
|
+
marginRight: theme.spacing(2)
|
15917
|
+
}, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
|
15918
|
+
marginTop: theme.spacing(1),
|
15919
|
+
marginBottom: theme.spacing(1)
|
15920
|
+
}, ownerState.orientation === 'vertical' && {
|
15921
|
+
height: '100%',
|
15922
|
+
borderBottomWidth: 0,
|
15923
|
+
borderRightWidth: 'thin'
|
15924
|
+
}, ownerState.flexItem && {
|
15925
|
+
alignSelf: 'stretch',
|
15926
|
+
height: 'auto'
|
15927
|
+
}), ({
|
15928
|
+
ownerState
|
15929
|
+
}) => _extends({}, ownerState.children && {
|
15930
|
+
display: 'flex',
|
15931
|
+
whiteSpace: 'nowrap',
|
15932
|
+
textAlign: 'center',
|
15933
|
+
border: 0,
|
15934
|
+
'&::before, &::after': {
|
15935
|
+
content: '""',
|
15936
|
+
alignSelf: 'center'
|
15937
|
+
}
|
15938
|
+
}), ({
|
15939
|
+
theme,
|
15940
|
+
ownerState
|
15941
|
+
}) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
|
15942
|
+
'&::before, &::after': {
|
15943
|
+
width: '100%',
|
15944
|
+
borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
|
15945
|
+
}
|
15946
|
+
}), ({
|
15947
|
+
theme,
|
15948
|
+
ownerState
|
15949
|
+
}) => _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
|
15950
|
+
flexDirection: 'column',
|
15951
|
+
'&::before, &::after': {
|
15952
|
+
height: '100%',
|
15953
|
+
borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
|
15954
|
+
}
|
15955
|
+
}), ({
|
15956
|
+
ownerState
|
15957
|
+
}) => _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
|
15958
|
+
'&::before': {
|
15959
|
+
width: '90%'
|
15960
|
+
},
|
15961
|
+
'&::after': {
|
15962
|
+
width: '10%'
|
15963
|
+
}
|
15964
|
+
}, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {
|
15965
|
+
'&::before': {
|
15966
|
+
width: '10%'
|
15967
|
+
},
|
15968
|
+
'&::after': {
|
15969
|
+
width: '90%'
|
15970
|
+
}
|
15971
|
+
}));
|
15972
|
+
const DividerWrapper = styled$1('span', {
|
15973
|
+
name: 'MuiDivider',
|
15974
|
+
slot: 'Wrapper',
|
15975
|
+
overridesResolver: (props, styles) => {
|
15976
|
+
const {
|
15977
|
+
ownerState
|
15978
|
+
} = props;
|
15979
|
+
return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
|
15980
|
+
}
|
15981
|
+
})(({
|
15982
|
+
theme,
|
15983
|
+
ownerState
|
15984
|
+
}) => _extends({
|
15985
|
+
display: 'inline-block',
|
15986
|
+
paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
|
15987
|
+
paddingRight: `calc(${theme.spacing(1)} * 1.2)`
|
15988
|
+
}, ownerState.orientation === 'vertical' && {
|
15989
|
+
paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
|
15990
|
+
paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
|
15991
|
+
}));
|
15992
|
+
const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
|
15993
|
+
const props = useThemeProps({
|
15994
|
+
props: inProps,
|
15995
|
+
name: 'MuiDivider'
|
15996
|
+
});
|
15997
|
+
const {
|
15998
|
+
absolute = false,
|
15999
|
+
children,
|
16000
|
+
className,
|
16001
|
+
component = children ? 'div' : 'hr',
|
16002
|
+
flexItem = false,
|
16003
|
+
light = false,
|
16004
|
+
orientation = 'horizontal',
|
16005
|
+
role = component !== 'hr' ? 'separator' : undefined,
|
16006
|
+
textAlign = 'center',
|
16007
|
+
variant = 'fullWidth'
|
16008
|
+
} = props,
|
16009
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$4);
|
16010
|
+
const ownerState = _extends({}, props, {
|
16011
|
+
absolute,
|
16012
|
+
component,
|
16013
|
+
flexItem,
|
16014
|
+
light,
|
16015
|
+
orientation,
|
16016
|
+
role,
|
16017
|
+
textAlign,
|
16018
|
+
variant
|
16019
|
+
});
|
16020
|
+
const classes = useUtilityClasses$3(ownerState);
|
16021
|
+
return /*#__PURE__*/jsx(DividerRoot, _extends({
|
16022
|
+
as: component,
|
16023
|
+
className: clsx(classes.root, className),
|
16024
|
+
role: role,
|
16025
|
+
ref: ref,
|
16026
|
+
ownerState: ownerState
|
16027
|
+
}, other, {
|
16028
|
+
children: children ? /*#__PURE__*/jsx(DividerWrapper, {
|
16029
|
+
className: classes.wrapper,
|
16030
|
+
ownerState: ownerState,
|
16031
|
+
children: children
|
16032
|
+
}) : null
|
16033
|
+
}));
|
16034
|
+
});
|
16035
|
+
process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
|
16036
|
+
// ----------------------------- Warning --------------------------------
|
16037
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
16038
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
16039
|
+
// ----------------------------------------------------------------------
|
16040
|
+
/**
|
16041
|
+
* Absolutely position the element.
|
16042
|
+
* @default false
|
16043
|
+
*/
|
16044
|
+
absolute: PropTypes.bool,
|
16045
|
+
/**
|
16046
|
+
* The content of the component.
|
16047
|
+
*/
|
16048
|
+
children: PropTypes.node,
|
16049
|
+
/**
|
16050
|
+
* Override or extend the styles applied to the component.
|
16051
|
+
*/
|
16052
|
+
classes: PropTypes.object,
|
16053
|
+
/**
|
16054
|
+
* @ignore
|
16055
|
+
*/
|
16056
|
+
className: PropTypes.string,
|
16057
|
+
/**
|
16058
|
+
* The component used for the root node.
|
16059
|
+
* Either a string to use a HTML element or a component.
|
16060
|
+
*/
|
16061
|
+
component: PropTypes.elementType,
|
16062
|
+
/**
|
16063
|
+
* If `true`, a vertical divider will have the correct height when used in flex container.
|
16064
|
+
* (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
|
16065
|
+
* @default false
|
16066
|
+
*/
|
16067
|
+
flexItem: PropTypes.bool,
|
16068
|
+
/**
|
16069
|
+
* If `true`, the divider will have a lighter color.
|
16070
|
+
* @default false
|
16071
|
+
*/
|
16072
|
+
light: PropTypes.bool,
|
16073
|
+
/**
|
16074
|
+
* The component orientation.
|
16075
|
+
* @default 'horizontal'
|
16076
|
+
*/
|
16077
|
+
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
16078
|
+
/**
|
16079
|
+
* @ignore
|
16080
|
+
*/
|
16081
|
+
role: PropTypes /* @typescript-to-proptypes-ignore */.string,
|
16082
|
+
/**
|
16083
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
16084
|
+
*/
|
16085
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
16086
|
+
/**
|
16087
|
+
* The text alignment.
|
16088
|
+
* @default 'center'
|
16089
|
+
*/
|
16090
|
+
textAlign: PropTypes.oneOf(['center', 'left', 'right']),
|
16091
|
+
/**
|
16092
|
+
* The variant to use.
|
16093
|
+
* @default 'fullWidth'
|
16094
|
+
*/
|
16095
|
+
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['fullWidth', 'inset', 'middle']), PropTypes.string])
|
16096
|
+
} : void 0;
|
16097
|
+
var Divider$1 = Divider;
|
16098
|
+
|
16099
|
+
const _excluded$3 = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
|
16100
|
+
function getTranslateValue(direction, node, resolvedContainer) {
|
16101
|
+
const rect = node.getBoundingClientRect();
|
16102
|
+
const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
|
16103
|
+
const containerWindow = ownerWindow(node);
|
16104
|
+
let transform;
|
16105
|
+
if (node.fakeTransform) {
|
16106
|
+
transform = node.fakeTransform;
|
16107
|
+
} else {
|
16108
|
+
const computedStyle = containerWindow.getComputedStyle(node);
|
16109
|
+
transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
|
16110
|
+
}
|
16111
|
+
let offsetX = 0;
|
16112
|
+
let offsetY = 0;
|
16113
|
+
if (transform && transform !== 'none' && typeof transform === 'string') {
|
16114
|
+
const transformValues = transform.split('(')[1].split(')')[0].split(',');
|
16115
|
+
offsetX = parseInt(transformValues[4], 10);
|
16116
|
+
offsetY = parseInt(transformValues[5], 10);
|
16117
|
+
}
|
16118
|
+
if (direction === 'left') {
|
16119
|
+
if (containerRect) {
|
16120
|
+
return `translateX(${containerRect.right + offsetX - rect.left}px)`;
|
16121
|
+
}
|
16122
|
+
return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;
|
16123
|
+
}
|
16124
|
+
if (direction === 'right') {
|
16125
|
+
if (containerRect) {
|
16126
|
+
return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
|
16127
|
+
}
|
16128
|
+
return `translateX(-${rect.left + rect.width - offsetX}px)`;
|
16129
|
+
}
|
16130
|
+
if (direction === 'up') {
|
16131
|
+
if (containerRect) {
|
16132
|
+
return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
|
16133
|
+
}
|
16134
|
+
return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;
|
16135
|
+
}
|
16136
|
+
|
16137
|
+
// direction === 'down'
|
16138
|
+
if (containerRect) {
|
16139
|
+
return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
|
16140
|
+
}
|
16141
|
+
return `translateY(-${rect.top + rect.height - offsetY}px)`;
|
16142
|
+
}
|
16143
|
+
function resolveContainer(containerPropProp) {
|
16144
|
+
return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
|
16145
|
+
}
|
16146
|
+
function setTranslateValue(direction, node, containerProp) {
|
16147
|
+
const resolvedContainer = resolveContainer(containerProp);
|
16148
|
+
const transform = getTranslateValue(direction, node, resolvedContainer);
|
16149
|
+
if (transform) {
|
16150
|
+
node.style.webkitTransform = transform;
|
16151
|
+
node.style.transform = transform;
|
16152
|
+
}
|
16153
|
+
}
|
16154
|
+
|
16155
|
+
/**
|
16156
|
+
* The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
|
16157
|
+
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
|
16158
|
+
*/
|
16159
|
+
const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
|
16160
|
+
const theme = useTheme();
|
16161
|
+
const defaultEasing = {
|
16162
|
+
enter: theme.transitions.easing.easeOut,
|
16163
|
+
exit: theme.transitions.easing.sharp
|
16164
|
+
};
|
16165
|
+
const defaultTimeout = {
|
16166
|
+
enter: theme.transitions.duration.enteringScreen,
|
16167
|
+
exit: theme.transitions.duration.leavingScreen
|
16168
|
+
};
|
16169
|
+
const {
|
16170
|
+
addEndListener,
|
16171
|
+
appear = true,
|
16172
|
+
children,
|
16173
|
+
container: containerProp,
|
16174
|
+
direction = 'down',
|
16175
|
+
easing: easingProp = defaultEasing,
|
16176
|
+
in: inProp,
|
16177
|
+
onEnter,
|
16178
|
+
onEntered,
|
16179
|
+
onEntering,
|
16180
|
+
onExit,
|
16181
|
+
onExited,
|
16182
|
+
onExiting,
|
16183
|
+
style,
|
16184
|
+
timeout = defaultTimeout,
|
16185
|
+
// eslint-disable-next-line react/prop-types
|
16186
|
+
TransitionComponent = Transition$1
|
16187
|
+
} = props,
|
16188
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$3);
|
16189
|
+
const childrenRef = React.useRef(null);
|
16190
|
+
const handleRef = useForkRef(children.ref, childrenRef, ref);
|
16191
|
+
const normalizedTransitionCallback = callback => isAppearing => {
|
16192
|
+
if (callback) {
|
16193
|
+
// onEnterXxx and onExitXxx callbacks have a different arguments.length value.
|
16194
|
+
if (isAppearing === undefined) {
|
16195
|
+
callback(childrenRef.current);
|
16196
|
+
} else {
|
16197
|
+
callback(childrenRef.current, isAppearing);
|
16198
|
+
}
|
16199
|
+
}
|
16200
|
+
};
|
16201
|
+
const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
|
16202
|
+
setTranslateValue(direction, node, containerProp);
|
16203
|
+
reflow(node);
|
16204
|
+
if (onEnter) {
|
16205
|
+
onEnter(node, isAppearing);
|
16206
|
+
}
|
16207
|
+
});
|
16208
|
+
const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
|
16209
|
+
const transitionProps = getTransitionProps({
|
16210
|
+
timeout,
|
16211
|
+
style,
|
16212
|
+
easing: easingProp
|
16213
|
+
}, {
|
16214
|
+
mode: 'enter'
|
16215
|
+
});
|
16216
|
+
node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps));
|
16217
|
+
node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps));
|
16218
|
+
node.style.webkitTransform = 'none';
|
16219
|
+
node.style.transform = 'none';
|
16220
|
+
if (onEntering) {
|
16221
|
+
onEntering(node, isAppearing);
|
16222
|
+
}
|
16223
|
+
});
|
16224
|
+
const handleEntered = normalizedTransitionCallback(onEntered);
|
16225
|
+
const handleExiting = normalizedTransitionCallback(onExiting);
|
16226
|
+
const handleExit = normalizedTransitionCallback(node => {
|
16227
|
+
const transitionProps = getTransitionProps({
|
16228
|
+
timeout,
|
16229
|
+
style,
|
16230
|
+
easing: easingProp
|
16231
|
+
}, {
|
16232
|
+
mode: 'exit'
|
16233
|
+
});
|
15004
16234
|
node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
|
15005
16235
|
node.style.transition = theme.transitions.create('transform', transitionProps);
|
15006
16236
|
setTranslateValue(direction, node, containerProp);
|
@@ -15008,404 +16238,990 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
|
|
15008
16238
|
onExit(node);
|
15009
16239
|
}
|
15010
16240
|
});
|
15011
|
-
const handleExited = normalizedTransitionCallback(node => {
|
15012
|
-
// No need for transitions when the component is hidden
|
15013
|
-
node.style.webkitTransition = '';
|
15014
|
-
node.style.transition = '';
|
15015
|
-
if (onExited) {
|
15016
|
-
onExited(node);
|
15017
|
-
}
|
16241
|
+
const handleExited = normalizedTransitionCallback(node => {
|
16242
|
+
// No need for transitions when the component is hidden
|
16243
|
+
node.style.webkitTransition = '';
|
16244
|
+
node.style.transition = '';
|
16245
|
+
if (onExited) {
|
16246
|
+
onExited(node);
|
16247
|
+
}
|
16248
|
+
});
|
16249
|
+
const handleAddEndListener = next => {
|
16250
|
+
if (addEndListener) {
|
16251
|
+
// Old call signature before `react-transition-group` implemented `nodeRef`
|
16252
|
+
addEndListener(childrenRef.current, next);
|
16253
|
+
}
|
16254
|
+
};
|
16255
|
+
const updatePosition = React.useCallback(() => {
|
16256
|
+
if (childrenRef.current) {
|
16257
|
+
setTranslateValue(direction, childrenRef.current, containerProp);
|
16258
|
+
}
|
16259
|
+
}, [direction, containerProp]);
|
16260
|
+
React.useEffect(() => {
|
16261
|
+
// Skip configuration where the position is screen size invariant.
|
16262
|
+
if (inProp || direction === 'down' || direction === 'right') {
|
16263
|
+
return undefined;
|
16264
|
+
}
|
16265
|
+
const handleResize = debounce(() => {
|
16266
|
+
if (childrenRef.current) {
|
16267
|
+
setTranslateValue(direction, childrenRef.current, containerProp);
|
16268
|
+
}
|
16269
|
+
});
|
16270
|
+
const containerWindow = ownerWindow(childrenRef.current);
|
16271
|
+
containerWindow.addEventListener('resize', handleResize);
|
16272
|
+
return () => {
|
16273
|
+
handleResize.clear();
|
16274
|
+
containerWindow.removeEventListener('resize', handleResize);
|
16275
|
+
};
|
16276
|
+
}, [direction, inProp, containerProp]);
|
16277
|
+
React.useEffect(() => {
|
16278
|
+
if (!inProp) {
|
16279
|
+
// We need to update the position of the drawer when the direction change and
|
16280
|
+
// when it's hidden.
|
16281
|
+
updatePosition();
|
16282
|
+
}
|
16283
|
+
}, [inProp, updatePosition]);
|
16284
|
+
return /*#__PURE__*/jsx(TransitionComponent, _extends({
|
16285
|
+
nodeRef: childrenRef,
|
16286
|
+
onEnter: handleEnter,
|
16287
|
+
onEntered: handleEntered,
|
16288
|
+
onEntering: handleEntering,
|
16289
|
+
onExit: handleExit,
|
16290
|
+
onExited: handleExited,
|
16291
|
+
onExiting: handleExiting,
|
16292
|
+
addEndListener: handleAddEndListener,
|
16293
|
+
appear: appear,
|
16294
|
+
in: inProp,
|
16295
|
+
timeout: timeout
|
16296
|
+
}, other, {
|
16297
|
+
children: (state, childProps) => {
|
16298
|
+
return /*#__PURE__*/React.cloneElement(children, _extends({
|
16299
|
+
ref: handleRef,
|
16300
|
+
style: _extends({
|
16301
|
+
visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
16302
|
+
}, style, children.props.style)
|
16303
|
+
}, childProps));
|
16304
|
+
}
|
16305
|
+
}));
|
16306
|
+
});
|
16307
|
+
process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ = {
|
16308
|
+
// ----------------------------- Warning --------------------------------
|
16309
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
16310
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
16311
|
+
// ----------------------------------------------------------------------
|
16312
|
+
/**
|
16313
|
+
* Add a custom transition end trigger. Called with the transitioning DOM
|
16314
|
+
* node and a done callback. Allows for more fine grained transition end
|
16315
|
+
* logic. Note: Timeouts are still used as a fallback if provided.
|
16316
|
+
*/
|
16317
|
+
addEndListener: PropTypes.func,
|
16318
|
+
/**
|
16319
|
+
* Perform the enter transition when it first mounts if `in` is also `true`.
|
16320
|
+
* Set this to `false` to disable this behavior.
|
16321
|
+
* @default true
|
16322
|
+
*/
|
16323
|
+
appear: PropTypes.bool,
|
16324
|
+
/**
|
16325
|
+
* A single child content element.
|
16326
|
+
*/
|
16327
|
+
children: elementAcceptingRef$1.isRequired,
|
16328
|
+
/**
|
16329
|
+
* An HTML element, or a function that returns one.
|
16330
|
+
* It's used to set the container the Slide is transitioning from.
|
16331
|
+
*/
|
16332
|
+
container: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.func]), props => {
|
16333
|
+
if (props.open) {
|
16334
|
+
const resolvedContainer = resolveContainer(props.container);
|
16335
|
+
if (resolvedContainer && resolvedContainer.nodeType === 1) {
|
16336
|
+
const box = resolvedContainer.getBoundingClientRect();
|
16337
|
+
if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
16338
|
+
return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
|
16339
|
+
}
|
16340
|
+
} else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
|
16341
|
+
return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));
|
16342
|
+
}
|
16343
|
+
}
|
16344
|
+
return null;
|
16345
|
+
}),
|
16346
|
+
/**
|
16347
|
+
* Direction the child node will enter from.
|
16348
|
+
* @default 'down'
|
16349
|
+
*/
|
16350
|
+
direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
|
16351
|
+
/**
|
16352
|
+
* The transition timing function.
|
16353
|
+
* You may specify a single easing or a object containing enter and exit values.
|
16354
|
+
* @default {
|
16355
|
+
* enter: theme.transitions.easing.easeOut,
|
16356
|
+
* exit: theme.transitions.easing.sharp,
|
16357
|
+
* }
|
16358
|
+
*/
|
16359
|
+
easing: PropTypes.oneOfType([PropTypes.shape({
|
16360
|
+
enter: PropTypes.string,
|
16361
|
+
exit: PropTypes.string
|
16362
|
+
}), PropTypes.string]),
|
16363
|
+
/**
|
16364
|
+
* If `true`, the component will transition in.
|
16365
|
+
*/
|
16366
|
+
in: PropTypes.bool,
|
16367
|
+
/**
|
16368
|
+
* @ignore
|
16369
|
+
*/
|
16370
|
+
onEnter: PropTypes.func,
|
16371
|
+
/**
|
16372
|
+
* @ignore
|
16373
|
+
*/
|
16374
|
+
onEntered: PropTypes.func,
|
16375
|
+
/**
|
16376
|
+
* @ignore
|
16377
|
+
*/
|
16378
|
+
onEntering: PropTypes.func,
|
16379
|
+
/**
|
16380
|
+
* @ignore
|
16381
|
+
*/
|
16382
|
+
onExit: PropTypes.func,
|
16383
|
+
/**
|
16384
|
+
* @ignore
|
16385
|
+
*/
|
16386
|
+
onExited: PropTypes.func,
|
16387
|
+
/**
|
16388
|
+
* @ignore
|
16389
|
+
*/
|
16390
|
+
onExiting: PropTypes.func,
|
16391
|
+
/**
|
16392
|
+
* @ignore
|
16393
|
+
*/
|
16394
|
+
style: PropTypes.object,
|
16395
|
+
/**
|
16396
|
+
* The duration for the transition, in milliseconds.
|
16397
|
+
* You may specify a single timeout for all transitions, or individually with an object.
|
16398
|
+
* @default {
|
16399
|
+
* enter: theme.transitions.duration.enteringScreen,
|
16400
|
+
* exit: theme.transitions.duration.leavingScreen,
|
16401
|
+
* }
|
16402
|
+
*/
|
16403
|
+
timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
16404
|
+
appear: PropTypes.number,
|
16405
|
+
enter: PropTypes.number,
|
16406
|
+
exit: PropTypes.number
|
16407
|
+
})])
|
16408
|
+
} : void 0;
|
16409
|
+
var Slide$1 = Slide;
|
16410
|
+
|
16411
|
+
function getDrawerUtilityClass(slot) {
|
16412
|
+
return generateUtilityClass('MuiDrawer', slot);
|
16413
|
+
}
|
16414
|
+
generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
|
16415
|
+
|
16416
|
+
const _excluded$2 = ["BackdropProps"],
|
16417
|
+
_excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
|
16418
|
+
const overridesResolver = (props, styles) => {
|
16419
|
+
const {
|
16420
|
+
ownerState
|
16421
|
+
} = props;
|
16422
|
+
return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
|
16423
|
+
};
|
16424
|
+
const useUtilityClasses$2 = ownerState => {
|
16425
|
+
const {
|
16426
|
+
classes,
|
16427
|
+
anchor,
|
16428
|
+
variant
|
16429
|
+
} = ownerState;
|
16430
|
+
const slots = {
|
16431
|
+
root: ['root'],
|
16432
|
+
docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
|
16433
|
+
modal: ['modal'],
|
16434
|
+
paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
|
16435
|
+
};
|
16436
|
+
return composeClasses(slots, getDrawerUtilityClass, classes);
|
16437
|
+
};
|
16438
|
+
const DrawerRoot = styled$1(Modal$1, {
|
16439
|
+
name: 'MuiDrawer',
|
16440
|
+
slot: 'Root',
|
16441
|
+
overridesResolver
|
16442
|
+
})(({
|
16443
|
+
theme
|
16444
|
+
}) => ({
|
16445
|
+
zIndex: (theme.vars || theme).zIndex.drawer
|
16446
|
+
}));
|
16447
|
+
const DrawerDockedRoot = styled$1('div', {
|
16448
|
+
shouldForwardProp: rootShouldForwardProp,
|
16449
|
+
name: 'MuiDrawer',
|
16450
|
+
slot: 'Docked',
|
16451
|
+
skipVariantsResolver: false,
|
16452
|
+
overridesResolver
|
16453
|
+
})({
|
16454
|
+
flex: '0 0 auto'
|
16455
|
+
});
|
16456
|
+
const DrawerPaper = styled$1(Paper$1, {
|
16457
|
+
name: 'MuiDrawer',
|
16458
|
+
slot: 'Paper',
|
16459
|
+
overridesResolver: (props, styles) => {
|
16460
|
+
const {
|
16461
|
+
ownerState
|
16462
|
+
} = props;
|
16463
|
+
return [styles.paper, styles[`paperAnchor${capitalize(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`]];
|
16464
|
+
}
|
16465
|
+
})(({
|
16466
|
+
theme,
|
16467
|
+
ownerState
|
16468
|
+
}) => _extends({
|
16469
|
+
overflowY: 'auto',
|
16470
|
+
display: 'flex',
|
16471
|
+
flexDirection: 'column',
|
16472
|
+
height: '100%',
|
16473
|
+
flex: '1 0 auto',
|
16474
|
+
zIndex: (theme.vars || theme).zIndex.drawer,
|
16475
|
+
// Add iOS momentum scrolling for iOS < 13.0
|
16476
|
+
WebkitOverflowScrolling: 'touch',
|
16477
|
+
// temporary style
|
16478
|
+
position: 'fixed',
|
16479
|
+
top: 0,
|
16480
|
+
// We disable the focus ring for mouse, touch and keyboard users.
|
16481
|
+
// At some point, it would be better to keep it for keyboard users.
|
16482
|
+
// :focus-ring CSS pseudo-class will help.
|
16483
|
+
outline: 0
|
16484
|
+
}, ownerState.anchor === 'left' && {
|
16485
|
+
left: 0
|
16486
|
+
}, ownerState.anchor === 'top' && {
|
16487
|
+
top: 0,
|
16488
|
+
left: 0,
|
16489
|
+
right: 0,
|
16490
|
+
height: 'auto',
|
16491
|
+
maxHeight: '100%'
|
16492
|
+
}, ownerState.anchor === 'right' && {
|
16493
|
+
right: 0
|
16494
|
+
}, ownerState.anchor === 'bottom' && {
|
16495
|
+
top: 'auto',
|
16496
|
+
left: 0,
|
16497
|
+
bottom: 0,
|
16498
|
+
right: 0,
|
16499
|
+
height: 'auto',
|
16500
|
+
maxHeight: '100%'
|
16501
|
+
}, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
|
16502
|
+
borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
|
16503
|
+
}, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
|
16504
|
+
borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
|
16505
|
+
}, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
|
16506
|
+
borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
|
16507
|
+
}, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
|
16508
|
+
borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
|
16509
|
+
}));
|
16510
|
+
const oppositeDirection = {
|
16511
|
+
left: 'right',
|
16512
|
+
right: 'left',
|
16513
|
+
top: 'down',
|
16514
|
+
bottom: 'up'
|
16515
|
+
};
|
16516
|
+
function isHorizontal(anchor) {
|
16517
|
+
return ['left', 'right'].indexOf(anchor) !== -1;
|
16518
|
+
}
|
16519
|
+
function getAnchor(theme, anchor) {
|
16520
|
+
return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
|
16521
|
+
}
|
16522
|
+
|
16523
|
+
/**
|
16524
|
+
* The props of the [Modal](/material-ui/api/modal/) component are available
|
16525
|
+
* when `variant="temporary"` is set.
|
16526
|
+
*/
|
16527
|
+
const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
|
16528
|
+
const props = useThemeProps({
|
16529
|
+
props: inProps,
|
16530
|
+
name: 'MuiDrawer'
|
16531
|
+
});
|
16532
|
+
const theme = useTheme();
|
16533
|
+
const defaultTransitionDuration = {
|
16534
|
+
enter: theme.transitions.duration.enteringScreen,
|
16535
|
+
exit: theme.transitions.duration.leavingScreen
|
16536
|
+
};
|
16537
|
+
const {
|
16538
|
+
anchor: anchorProp = 'left',
|
16539
|
+
BackdropProps,
|
16540
|
+
children,
|
16541
|
+
className,
|
16542
|
+
elevation = 16,
|
16543
|
+
hideBackdrop = false,
|
16544
|
+
ModalProps: {
|
16545
|
+
BackdropProps: BackdropPropsProp
|
16546
|
+
} = {},
|
16547
|
+
onClose,
|
16548
|
+
open = false,
|
16549
|
+
PaperProps = {},
|
16550
|
+
SlideProps,
|
16551
|
+
// eslint-disable-next-line react/prop-types
|
16552
|
+
TransitionComponent = Slide$1,
|
16553
|
+
transitionDuration = defaultTransitionDuration,
|
16554
|
+
variant = 'temporary'
|
16555
|
+
} = props,
|
16556
|
+
ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded$2),
|
16557
|
+
other = _objectWithoutPropertiesLoose(props, _excluded2);
|
16558
|
+
|
16559
|
+
// Let's assume that the Drawer will always be rendered on user space.
|
16560
|
+
// We use this state is order to skip the appear transition during the
|
16561
|
+
// initial mount of the component.
|
16562
|
+
const mounted = React.useRef(false);
|
16563
|
+
React.useEffect(() => {
|
16564
|
+
mounted.current = true;
|
16565
|
+
}, []);
|
16566
|
+
const anchorInvariant = getAnchor(theme, anchorProp);
|
16567
|
+
const anchor = anchorProp;
|
16568
|
+
const ownerState = _extends({}, props, {
|
16569
|
+
anchor,
|
16570
|
+
elevation,
|
16571
|
+
open,
|
16572
|
+
variant
|
16573
|
+
}, other);
|
16574
|
+
const classes = useUtilityClasses$2(ownerState);
|
16575
|
+
const drawer = /*#__PURE__*/jsx(DrawerPaper, _extends({
|
16576
|
+
elevation: variant === 'temporary' ? elevation : 0,
|
16577
|
+
square: true
|
16578
|
+
}, PaperProps, {
|
16579
|
+
className: clsx(classes.paper, PaperProps.className),
|
16580
|
+
ownerState: ownerState,
|
16581
|
+
children: children
|
16582
|
+
}));
|
16583
|
+
if (variant === 'permanent') {
|
16584
|
+
return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
|
16585
|
+
className: clsx(classes.root, classes.docked, className),
|
16586
|
+
ownerState: ownerState,
|
16587
|
+
ref: ref
|
16588
|
+
}, other, {
|
16589
|
+
children: drawer
|
16590
|
+
}));
|
16591
|
+
}
|
16592
|
+
const slidingDrawer = /*#__PURE__*/jsx(TransitionComponent, _extends({
|
16593
|
+
in: open,
|
16594
|
+
direction: oppositeDirection[anchorInvariant],
|
16595
|
+
timeout: transitionDuration,
|
16596
|
+
appear: mounted.current
|
16597
|
+
}, SlideProps, {
|
16598
|
+
children: drawer
|
16599
|
+
}));
|
16600
|
+
if (variant === 'persistent') {
|
16601
|
+
return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
|
16602
|
+
className: clsx(classes.root, classes.docked, className),
|
16603
|
+
ownerState: ownerState,
|
16604
|
+
ref: ref
|
16605
|
+
}, other, {
|
16606
|
+
children: slidingDrawer
|
16607
|
+
}));
|
16608
|
+
}
|
16609
|
+
|
16610
|
+
// variant === temporary
|
16611
|
+
return /*#__PURE__*/jsx(DrawerRoot, _extends({
|
16612
|
+
BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
|
16613
|
+
transitionDuration
|
16614
|
+
}),
|
16615
|
+
className: clsx(classes.root, classes.modal, className),
|
16616
|
+
open: open,
|
16617
|
+
ownerState: ownerState,
|
16618
|
+
onClose: onClose,
|
16619
|
+
hideBackdrop: hideBackdrop,
|
16620
|
+
ref: ref
|
16621
|
+
}, other, ModalProps, {
|
16622
|
+
children: slidingDrawer
|
16623
|
+
}));
|
16624
|
+
});
|
16625
|
+
process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */ = {
|
16626
|
+
// ----------------------------- Warning --------------------------------
|
16627
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
16628
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
16629
|
+
// ----------------------------------------------------------------------
|
16630
|
+
/**
|
16631
|
+
* Side from which the drawer will appear.
|
16632
|
+
* @default 'left'
|
16633
|
+
*/
|
16634
|
+
anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
16635
|
+
/**
|
16636
|
+
* @ignore
|
16637
|
+
*/
|
16638
|
+
BackdropProps: PropTypes.object,
|
16639
|
+
/**
|
16640
|
+
* The content of the component.
|
16641
|
+
*/
|
16642
|
+
children: PropTypes.node,
|
16643
|
+
/**
|
16644
|
+
* Override or extend the styles applied to the component.
|
16645
|
+
*/
|
16646
|
+
classes: PropTypes.object,
|
16647
|
+
/**
|
16648
|
+
* @ignore
|
16649
|
+
*/
|
16650
|
+
className: PropTypes.string,
|
16651
|
+
/**
|
16652
|
+
* The elevation of the drawer.
|
16653
|
+
* @default 16
|
16654
|
+
*/
|
16655
|
+
elevation: integerPropType,
|
16656
|
+
/**
|
16657
|
+
* If `true`, the backdrop is not rendered.
|
16658
|
+
* @default false
|
16659
|
+
*/
|
16660
|
+
hideBackdrop: PropTypes.bool,
|
16661
|
+
/**
|
16662
|
+
* Props applied to the [`Modal`](/material-ui/api/modal/) element.
|
16663
|
+
* @default {}
|
16664
|
+
*/
|
16665
|
+
ModalProps: PropTypes.object,
|
16666
|
+
/**
|
16667
|
+
* Callback fired when the component requests to be closed.
|
16668
|
+
*
|
16669
|
+
* @param {object} event The event source of the callback.
|
16670
|
+
*/
|
16671
|
+
onClose: PropTypes.func,
|
16672
|
+
/**
|
16673
|
+
* If `true`, the component is shown.
|
16674
|
+
* @default false
|
16675
|
+
*/
|
16676
|
+
open: PropTypes.bool,
|
16677
|
+
/**
|
16678
|
+
* Props applied to the [`Paper`](/material-ui/api/paper/) element.
|
16679
|
+
* @default {}
|
16680
|
+
*/
|
16681
|
+
PaperProps: PropTypes.object,
|
16682
|
+
/**
|
16683
|
+
* Props applied to the [`Slide`](/material-ui/api/slide/) element.
|
16684
|
+
*/
|
16685
|
+
SlideProps: PropTypes.object,
|
16686
|
+
/**
|
16687
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
16688
|
+
*/
|
16689
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
16690
|
+
/**
|
16691
|
+
* The duration for the transition, in milliseconds.
|
16692
|
+
* You may specify a single timeout for all transitions, or individually with an object.
|
16693
|
+
* @default {
|
16694
|
+
* enter: theme.transitions.duration.enteringScreen,
|
16695
|
+
* exit: theme.transitions.duration.leavingScreen,
|
16696
|
+
* }
|
16697
|
+
*/
|
16698
|
+
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
16699
|
+
appear: PropTypes.number,
|
16700
|
+
enter: PropTypes.number,
|
16701
|
+
exit: PropTypes.number
|
16702
|
+
})]),
|
16703
|
+
/**
|
16704
|
+
* The variant to use.
|
16705
|
+
* @default 'temporary'
|
16706
|
+
*/
|
16707
|
+
variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
|
16708
|
+
} : void 0;
|
16709
|
+
var Drawer$1 = Drawer;
|
16710
|
+
|
16711
|
+
function getLinearProgressUtilityClass(slot) {
|
16712
|
+
return generateUtilityClass('MuiLinearProgress', slot);
|
16713
|
+
}
|
16714
|
+
generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
|
16715
|
+
|
16716
|
+
const _excluded$1 = ["className", "color", "value", "valueBuffer", "variant"];
|
16717
|
+
let _ = t => t,
|
16718
|
+
_t,
|
16719
|
+
_t2,
|
16720
|
+
_t3,
|
16721
|
+
_t4,
|
16722
|
+
_t5,
|
16723
|
+
_t6;
|
16724
|
+
const TRANSITION_DURATION = 4; // seconds
|
16725
|
+
const indeterminate1Keyframe = keyframes(_t || (_t = _`
|
16726
|
+
0% {
|
16727
|
+
left: -35%;
|
16728
|
+
right: 100%;
|
16729
|
+
}
|
16730
|
+
|
16731
|
+
60% {
|
16732
|
+
left: 100%;
|
16733
|
+
right: -90%;
|
16734
|
+
}
|
16735
|
+
|
16736
|
+
100% {
|
16737
|
+
left: 100%;
|
16738
|
+
right: -90%;
|
16739
|
+
}
|
16740
|
+
`));
|
16741
|
+
const indeterminate2Keyframe = keyframes(_t2 || (_t2 = _`
|
16742
|
+
0% {
|
16743
|
+
left: -200%;
|
16744
|
+
right: 100%;
|
16745
|
+
}
|
16746
|
+
|
16747
|
+
60% {
|
16748
|
+
left: 107%;
|
16749
|
+
right: -8%;
|
16750
|
+
}
|
16751
|
+
|
16752
|
+
100% {
|
16753
|
+
left: 107%;
|
16754
|
+
right: -8%;
|
16755
|
+
}
|
16756
|
+
`));
|
16757
|
+
const bufferKeyframe = keyframes(_t3 || (_t3 = _`
|
16758
|
+
0% {
|
16759
|
+
opacity: 1;
|
16760
|
+
background-position: 0 -23px;
|
16761
|
+
}
|
16762
|
+
|
16763
|
+
60% {
|
16764
|
+
opacity: 0;
|
16765
|
+
background-position: 0 -23px;
|
16766
|
+
}
|
16767
|
+
|
16768
|
+
100% {
|
16769
|
+
opacity: 1;
|
16770
|
+
background-position: -200px -23px;
|
16771
|
+
}
|
16772
|
+
`));
|
16773
|
+
const useUtilityClasses$1 = ownerState => {
|
16774
|
+
const {
|
16775
|
+
classes,
|
16776
|
+
variant,
|
16777
|
+
color
|
16778
|
+
} = ownerState;
|
16779
|
+
const slots = {
|
16780
|
+
root: ['root', `color${capitalize(color)}`, variant],
|
16781
|
+
dashed: ['dashed', `dashedColor${capitalize(color)}`],
|
16782
|
+
bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
|
16783
|
+
bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
|
16784
|
+
};
|
16785
|
+
return composeClasses(slots, getLinearProgressUtilityClass, classes);
|
16786
|
+
};
|
16787
|
+
const getColorShade = (theme, color) => {
|
16788
|
+
if (color === 'inherit') {
|
16789
|
+
return 'currentColor';
|
16790
|
+
}
|
16791
|
+
if (theme.vars) {
|
16792
|
+
return theme.vars.palette.LinearProgress[`${color}Bg`];
|
16793
|
+
}
|
16794
|
+
return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);
|
16795
|
+
};
|
16796
|
+
const LinearProgressRoot = styled$1('span', {
|
16797
|
+
name: 'MuiLinearProgress',
|
16798
|
+
slot: 'Root',
|
16799
|
+
overridesResolver: (props, styles) => {
|
16800
|
+
const {
|
16801
|
+
ownerState
|
16802
|
+
} = props;
|
16803
|
+
return [styles.root, styles[`color${capitalize(ownerState.color)}`], styles[ownerState.variant]];
|
16804
|
+
}
|
16805
|
+
})(({
|
16806
|
+
ownerState,
|
16807
|
+
theme
|
16808
|
+
}) => _extends({
|
16809
|
+
position: 'relative',
|
16810
|
+
overflow: 'hidden',
|
16811
|
+
display: 'block',
|
16812
|
+
height: 4,
|
16813
|
+
zIndex: 0,
|
16814
|
+
// Fix Safari's bug during composition of different paint.
|
16815
|
+
'@media print': {
|
16816
|
+
colorAdjust: 'exact'
|
16817
|
+
},
|
16818
|
+
backgroundColor: getColorShade(theme, ownerState.color)
|
16819
|
+
}, ownerState.color === 'inherit' && ownerState.variant !== 'buffer' && {
|
16820
|
+
backgroundColor: 'none',
|
16821
|
+
'&::before': {
|
16822
|
+
content: '""',
|
16823
|
+
position: 'absolute',
|
16824
|
+
left: 0,
|
16825
|
+
top: 0,
|
16826
|
+
right: 0,
|
16827
|
+
bottom: 0,
|
16828
|
+
backgroundColor: 'currentColor',
|
16829
|
+
opacity: 0.3
|
16830
|
+
}
|
16831
|
+
}, ownerState.variant === 'buffer' && {
|
16832
|
+
backgroundColor: 'transparent'
|
16833
|
+
}, ownerState.variant === 'query' && {
|
16834
|
+
transform: 'rotate(180deg)'
|
16835
|
+
}));
|
16836
|
+
const LinearProgressDashed = styled$1('span', {
|
16837
|
+
name: 'MuiLinearProgress',
|
16838
|
+
slot: 'Dashed',
|
16839
|
+
overridesResolver: (props, styles) => {
|
16840
|
+
const {
|
16841
|
+
ownerState
|
16842
|
+
} = props;
|
16843
|
+
return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]];
|
16844
|
+
}
|
16845
|
+
})(({
|
16846
|
+
ownerState,
|
16847
|
+
theme
|
16848
|
+
}) => {
|
16849
|
+
const backgroundColor = getColorShade(theme, ownerState.color);
|
16850
|
+
return _extends({
|
16851
|
+
position: 'absolute',
|
16852
|
+
marginTop: 0,
|
16853
|
+
height: '100%',
|
16854
|
+
width: '100%'
|
16855
|
+
}, ownerState.color === 'inherit' && {
|
16856
|
+
opacity: 0.3
|
16857
|
+
}, {
|
16858
|
+
backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`,
|
16859
|
+
backgroundSize: '10px 10px',
|
16860
|
+
backgroundPosition: '0 -23px'
|
16861
|
+
});
|
16862
|
+
}, css(_t4 || (_t4 = _`
|
16863
|
+
animation: ${0} 3s infinite linear;
|
16864
|
+
`), bufferKeyframe));
|
16865
|
+
const LinearProgressBar1 = styled$1('span', {
|
16866
|
+
name: 'MuiLinearProgress',
|
16867
|
+
slot: 'Bar1',
|
16868
|
+
overridesResolver: (props, styles) => {
|
16869
|
+
const {
|
16870
|
+
ownerState
|
16871
|
+
} = props;
|
16872
|
+
return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
|
16873
|
+
}
|
16874
|
+
})(({
|
16875
|
+
ownerState,
|
16876
|
+
theme
|
16877
|
+
}) => _extends({
|
16878
|
+
width: '100%',
|
16879
|
+
position: 'absolute',
|
16880
|
+
left: 0,
|
16881
|
+
bottom: 0,
|
16882
|
+
top: 0,
|
16883
|
+
transition: 'transform 0.2s linear',
|
16884
|
+
transformOrigin: 'left',
|
16885
|
+
backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
|
16886
|
+
}, ownerState.variant === 'determinate' && {
|
16887
|
+
transition: `transform .${TRANSITION_DURATION}s linear`
|
16888
|
+
}, ownerState.variant === 'buffer' && {
|
16889
|
+
zIndex: 1,
|
16890
|
+
transition: `transform .${TRANSITION_DURATION}s linear`
|
16891
|
+
}), ({
|
16892
|
+
ownerState
|
16893
|
+
}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t5 || (_t5 = _`
|
16894
|
+
width: auto;
|
16895
|
+
animation: ${0} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
16896
|
+
`), indeterminate1Keyframe));
|
16897
|
+
const LinearProgressBar2 = styled$1('span', {
|
16898
|
+
name: 'MuiLinearProgress',
|
16899
|
+
slot: 'Bar2',
|
16900
|
+
overridesResolver: (props, styles) => {
|
16901
|
+
const {
|
16902
|
+
ownerState
|
16903
|
+
} = props;
|
16904
|
+
return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
|
16905
|
+
}
|
16906
|
+
})(({
|
16907
|
+
ownerState,
|
16908
|
+
theme
|
16909
|
+
}) => _extends({
|
16910
|
+
width: '100%',
|
16911
|
+
position: 'absolute',
|
16912
|
+
left: 0,
|
16913
|
+
bottom: 0,
|
16914
|
+
top: 0,
|
16915
|
+
transition: 'transform 0.2s linear',
|
16916
|
+
transformOrigin: 'left'
|
16917
|
+
}, ownerState.variant !== 'buffer' && {
|
16918
|
+
backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
|
16919
|
+
}, ownerState.color === 'inherit' && {
|
16920
|
+
opacity: 0.3
|
16921
|
+
}, ownerState.variant === 'buffer' && {
|
16922
|
+
backgroundColor: getColorShade(theme, ownerState.color),
|
16923
|
+
transition: `transform .${TRANSITION_DURATION}s linear`
|
16924
|
+
}), ({
|
16925
|
+
ownerState
|
16926
|
+
}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t6 || (_t6 = _`
|
16927
|
+
width: auto;
|
16928
|
+
animation: ${0} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
|
16929
|
+
`), indeterminate2Keyframe));
|
16930
|
+
|
16931
|
+
/**
|
16932
|
+
* ## ARIA
|
16933
|
+
*
|
16934
|
+
* If the progress bar is describing the loading progress of a particular region of a page,
|
16935
|
+
* you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
|
16936
|
+
* attribute to `true` on that region until it has finished loading.
|
16937
|
+
*/
|
16938
|
+
const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inProps, ref) {
|
16939
|
+
const props = useThemeProps({
|
16940
|
+
props: inProps,
|
16941
|
+
name: 'MuiLinearProgress'
|
15018
16942
|
});
|
15019
|
-
const
|
15020
|
-
|
15021
|
-
|
15022
|
-
|
15023
|
-
|
15024
|
-
|
15025
|
-
|
15026
|
-
|
15027
|
-
|
15028
|
-
|
15029
|
-
|
15030
|
-
|
15031
|
-
|
15032
|
-
|
15033
|
-
|
16943
|
+
const {
|
16944
|
+
className,
|
16945
|
+
color = 'primary',
|
16946
|
+
value,
|
16947
|
+
valueBuffer,
|
16948
|
+
variant = 'indeterminate'
|
16949
|
+
} = props,
|
16950
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$1);
|
16951
|
+
const ownerState = _extends({}, props, {
|
16952
|
+
color,
|
16953
|
+
variant
|
16954
|
+
});
|
16955
|
+
const classes = useUtilityClasses$1(ownerState);
|
16956
|
+
const theme = useTheme();
|
16957
|
+
const rootProps = {};
|
16958
|
+
const inlineStyles = {
|
16959
|
+
bar1: {},
|
16960
|
+
bar2: {}
|
16961
|
+
};
|
16962
|
+
if (variant === 'determinate' || variant === 'buffer') {
|
16963
|
+
if (value !== undefined) {
|
16964
|
+
rootProps['aria-valuenow'] = Math.round(value);
|
16965
|
+
rootProps['aria-valuemin'] = 0;
|
16966
|
+
rootProps['aria-valuemax'] = 100;
|
16967
|
+
let transform = value - 100;
|
16968
|
+
if (theme.direction === 'rtl') {
|
16969
|
+
transform = -transform;
|
16970
|
+
}
|
16971
|
+
inlineStyles.bar1.transform = `translateX(${transform}%)`;
|
16972
|
+
} else if (process.env.NODE_ENV !== 'production') {
|
16973
|
+
console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
|
15034
16974
|
}
|
15035
|
-
|
15036
|
-
|
15037
|
-
|
16975
|
+
}
|
16976
|
+
if (variant === 'buffer') {
|
16977
|
+
if (valueBuffer !== undefined) {
|
16978
|
+
let transform = (valueBuffer || 0) - 100;
|
16979
|
+
if (theme.direction === 'rtl') {
|
16980
|
+
transform = -transform;
|
15038
16981
|
}
|
15039
|
-
|
15040
|
-
|
15041
|
-
|
15042
|
-
return () => {
|
15043
|
-
handleResize.clear();
|
15044
|
-
containerWindow.removeEventListener('resize', handleResize);
|
15045
|
-
};
|
15046
|
-
}, [direction, inProp, containerProp]);
|
15047
|
-
React.useEffect(() => {
|
15048
|
-
if (!inProp) {
|
15049
|
-
// We need to update the position of the drawer when the direction change and
|
15050
|
-
// when it's hidden.
|
15051
|
-
updatePosition();
|
16982
|
+
inlineStyles.bar2.transform = `translateX(${transform}%)`;
|
16983
|
+
} else if (process.env.NODE_ENV !== 'production') {
|
16984
|
+
console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
|
15052
16985
|
}
|
15053
|
-
}
|
15054
|
-
return /*#__PURE__*/
|
15055
|
-
|
15056
|
-
|
15057
|
-
|
15058
|
-
|
15059
|
-
|
15060
|
-
onExited: handleExited,
|
15061
|
-
onExiting: handleExiting,
|
15062
|
-
addEndListener: handleAddEndListener,
|
15063
|
-
appear: appear,
|
15064
|
-
in: inProp,
|
15065
|
-
timeout: timeout
|
16986
|
+
}
|
16987
|
+
return /*#__PURE__*/jsxs(LinearProgressRoot, _extends({
|
16988
|
+
className: clsx(classes.root, className),
|
16989
|
+
ownerState: ownerState,
|
16990
|
+
role: "progressbar"
|
16991
|
+
}, rootProps, {
|
16992
|
+
ref: ref
|
15066
16993
|
}, other, {
|
15067
|
-
children: (
|
15068
|
-
|
15069
|
-
|
15070
|
-
|
15071
|
-
|
15072
|
-
|
15073
|
-
|
15074
|
-
}
|
16994
|
+
children: [variant === 'buffer' ? /*#__PURE__*/jsx(LinearProgressDashed, {
|
16995
|
+
className: classes.dashed,
|
16996
|
+
ownerState: ownerState
|
16997
|
+
}) : null, /*#__PURE__*/jsx(LinearProgressBar1, {
|
16998
|
+
className: classes.bar1,
|
16999
|
+
ownerState: ownerState,
|
17000
|
+
style: inlineStyles.bar1
|
17001
|
+
}), variant === 'determinate' ? null : /*#__PURE__*/jsx(LinearProgressBar2, {
|
17002
|
+
className: classes.bar2,
|
17003
|
+
ownerState: ownerState,
|
17004
|
+
style: inlineStyles.bar2
|
17005
|
+
})]
|
15075
17006
|
}));
|
15076
17007
|
});
|
15077
|
-
process.env.NODE_ENV !== "production" ?
|
17008
|
+
process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-proptypes */ = {
|
15078
17009
|
// ----------------------------- Warning --------------------------------
|
15079
17010
|
// | These PropTypes are generated from the TypeScript type definitions |
|
15080
17011
|
// | To update them edit the d.ts file and run "yarn proptypes" |
|
15081
17012
|
// ----------------------------------------------------------------------
|
15082
17013
|
/**
|
15083
|
-
*
|
15084
|
-
* node and a done callback. Allows for more fine grained transition end
|
15085
|
-
* logic. Note: Timeouts are still used as a fallback if provided.
|
15086
|
-
*/
|
15087
|
-
addEndListener: PropTypes.func,
|
15088
|
-
/**
|
15089
|
-
* Perform the enter transition when it first mounts if `in` is also `true`.
|
15090
|
-
* Set this to `false` to disable this behavior.
|
15091
|
-
* @default true
|
15092
|
-
*/
|
15093
|
-
appear: PropTypes.bool,
|
15094
|
-
/**
|
15095
|
-
* A single child content element.
|
15096
|
-
*/
|
15097
|
-
children: elementAcceptingRef$1.isRequired,
|
15098
|
-
/**
|
15099
|
-
* An HTML element, or a function that returns one.
|
15100
|
-
* It's used to set the container the Slide is transitioning from.
|
15101
|
-
*/
|
15102
|
-
container: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.func]), props => {
|
15103
|
-
if (props.open) {
|
15104
|
-
const resolvedContainer = resolveContainer(props.container);
|
15105
|
-
if (resolvedContainer && resolvedContainer.nodeType === 1) {
|
15106
|
-
const box = resolvedContainer.getBoundingClientRect();
|
15107
|
-
if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
15108
|
-
return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
|
15109
|
-
}
|
15110
|
-
} else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
|
15111
|
-
return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));
|
15112
|
-
}
|
15113
|
-
}
|
15114
|
-
return null;
|
15115
|
-
}),
|
15116
|
-
/**
|
15117
|
-
* Direction the child node will enter from.
|
15118
|
-
* @default 'down'
|
15119
|
-
*/
|
15120
|
-
direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
|
15121
|
-
/**
|
15122
|
-
* The transition timing function.
|
15123
|
-
* You may specify a single easing or a object containing enter and exit values.
|
15124
|
-
* @default {
|
15125
|
-
* enter: theme.transitions.easing.easeOut,
|
15126
|
-
* exit: theme.transitions.easing.sharp,
|
15127
|
-
* }
|
15128
|
-
*/
|
15129
|
-
easing: PropTypes.oneOfType([PropTypes.shape({
|
15130
|
-
enter: PropTypes.string,
|
15131
|
-
exit: PropTypes.string
|
15132
|
-
}), PropTypes.string]),
|
15133
|
-
/**
|
15134
|
-
* If `true`, the component will transition in.
|
15135
|
-
*/
|
15136
|
-
in: PropTypes.bool,
|
15137
|
-
/**
|
15138
|
-
* @ignore
|
15139
|
-
*/
|
15140
|
-
onEnter: PropTypes.func,
|
15141
|
-
/**
|
15142
|
-
* @ignore
|
17014
|
+
* Override or extend the styles applied to the component.
|
15143
17015
|
*/
|
15144
|
-
|
17016
|
+
classes: PropTypes.object,
|
15145
17017
|
/**
|
15146
17018
|
* @ignore
|
15147
17019
|
*/
|
15148
|
-
|
17020
|
+
className: PropTypes.string,
|
15149
17021
|
/**
|
15150
|
-
*
|
17022
|
+
* The color of the component.
|
17023
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
17024
|
+
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
17025
|
+
* @default 'primary'
|
15151
17026
|
*/
|
15152
|
-
|
17027
|
+
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string]),
|
15153
17028
|
/**
|
15154
|
-
*
|
17029
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
15155
17030
|
*/
|
15156
|
-
|
17031
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
15157
17032
|
/**
|
15158
|
-
*
|
17033
|
+
* The value of the progress indicator for the determinate and buffer variants.
|
17034
|
+
* Value between 0 and 100.
|
15159
17035
|
*/
|
15160
|
-
|
17036
|
+
value: PropTypes.number,
|
15161
17037
|
/**
|
15162
|
-
*
|
17038
|
+
* The value for the buffer variant.
|
17039
|
+
* Value between 0 and 100.
|
15163
17040
|
*/
|
15164
|
-
|
17041
|
+
valueBuffer: PropTypes.number,
|
15165
17042
|
/**
|
15166
|
-
* The
|
15167
|
-
*
|
15168
|
-
* @default
|
15169
|
-
* enter: theme.transitions.duration.enteringScreen,
|
15170
|
-
* exit: theme.transitions.duration.leavingScreen,
|
15171
|
-
* }
|
17043
|
+
* The variant to use.
|
17044
|
+
* Use indeterminate or query when there is no progress value.
|
17045
|
+
* @default 'indeterminate'
|
15172
17046
|
*/
|
15173
|
-
|
15174
|
-
appear: PropTypes.number,
|
15175
|
-
enter: PropTypes.number,
|
15176
|
-
exit: PropTypes.number
|
15177
|
-
})])
|
17047
|
+
variant: PropTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query'])
|
15178
17048
|
} : void 0;
|
15179
|
-
var
|
17049
|
+
var LinearProgress$1 = LinearProgress;
|
15180
17050
|
|
15181
|
-
function
|
15182
|
-
return generateUtilityClass('
|
17051
|
+
function getLinkUtilityClass(slot) {
|
17052
|
+
return generateUtilityClass('MuiLink', slot);
|
15183
17053
|
}
|
15184
|
-
generateUtilityClasses('
|
17054
|
+
const linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
|
17055
|
+
var linkClasses$1 = linkClasses;
|
15185
17056
|
|
15186
|
-
const
|
15187
|
-
|
15188
|
-
|
15189
|
-
|
15190
|
-
|
15191
|
-
|
15192
|
-
|
17057
|
+
const colorTransformations = {
|
17058
|
+
primary: 'primary.main',
|
17059
|
+
textPrimary: 'text.primary',
|
17060
|
+
secondary: 'secondary.main',
|
17061
|
+
textSecondary: 'text.secondary',
|
17062
|
+
error: 'error.main'
|
17063
|
+
};
|
17064
|
+
const transformDeprecatedColors = color => {
|
17065
|
+
return colorTransformations[color] || color;
|
17066
|
+
};
|
17067
|
+
const getTextDecoration = ({
|
17068
|
+
theme,
|
17069
|
+
ownerState
|
17070
|
+
}) => {
|
17071
|
+
const transformedColor = transformDeprecatedColors(ownerState.color);
|
17072
|
+
const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
|
17073
|
+
const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
|
17074
|
+
if ('vars' in theme && channelColor) {
|
17075
|
+
return `rgba(${channelColor} / 0.4)`;
|
17076
|
+
}
|
17077
|
+
return alpha(color, 0.4);
|
15193
17078
|
};
|
17079
|
+
var getTextDecoration$1 = getTextDecoration;
|
17080
|
+
|
17081
|
+
const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
|
15194
17082
|
const useUtilityClasses = ownerState => {
|
15195
17083
|
const {
|
15196
17084
|
classes,
|
15197
|
-
|
15198
|
-
|
17085
|
+
component,
|
17086
|
+
focusVisible,
|
17087
|
+
underline
|
15199
17088
|
} = ownerState;
|
15200
17089
|
const slots = {
|
15201
|
-
root: ['root']
|
15202
|
-
docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
|
15203
|
-
modal: ['modal'],
|
15204
|
-
paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
|
17090
|
+
root: ['root', `underline${capitalize(underline)}`, component === 'button' && 'button', focusVisible && 'focusVisible']
|
15205
17091
|
};
|
15206
|
-
return composeClasses(slots,
|
17092
|
+
return composeClasses(slots, getLinkUtilityClass, classes);
|
15207
17093
|
};
|
15208
|
-
const
|
15209
|
-
name: '
|
17094
|
+
const LinkRoot = styled$1(Typography$1, {
|
17095
|
+
name: 'MuiLink',
|
15210
17096
|
slot: 'Root',
|
15211
|
-
overridesResolver
|
15212
|
-
})(({
|
15213
|
-
theme
|
15214
|
-
}) => ({
|
15215
|
-
zIndex: (theme.vars || theme).zIndex.drawer
|
15216
|
-
}));
|
15217
|
-
const DrawerDockedRoot = styled$1('div', {
|
15218
|
-
shouldForwardProp: rootShouldForwardProp,
|
15219
|
-
name: 'MuiDrawer',
|
15220
|
-
slot: 'Docked',
|
15221
|
-
skipVariantsResolver: false,
|
15222
|
-
overridesResolver
|
15223
|
-
})({
|
15224
|
-
flex: '0 0 auto'
|
15225
|
-
});
|
15226
|
-
const DrawerPaper = styled$1(Paper$1, {
|
15227
|
-
name: 'MuiDrawer',
|
15228
|
-
slot: 'Paper',
|
15229
17097
|
overridesResolver: (props, styles) => {
|
15230
17098
|
const {
|
15231
17099
|
ownerState
|
15232
17100
|
} = props;
|
15233
|
-
return [styles.
|
17101
|
+
return [styles.root, styles[`underline${capitalize(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
|
15234
17102
|
}
|
15235
17103
|
})(({
|
15236
17104
|
theme,
|
15237
17105
|
ownerState
|
15238
|
-
}) =>
|
15239
|
-
|
15240
|
-
|
15241
|
-
|
15242
|
-
|
15243
|
-
|
15244
|
-
|
15245
|
-
|
15246
|
-
|
15247
|
-
|
15248
|
-
|
15249
|
-
|
15250
|
-
|
15251
|
-
|
15252
|
-
|
15253
|
-
|
15254
|
-
|
15255
|
-
|
15256
|
-
}
|
15257
|
-
|
15258
|
-
|
15259
|
-
|
15260
|
-
|
15261
|
-
|
15262
|
-
|
15263
|
-
|
15264
|
-
|
15265
|
-
|
15266
|
-
|
15267
|
-
|
15268
|
-
|
15269
|
-
|
15270
|
-
|
15271
|
-
|
15272
|
-
|
15273
|
-
|
15274
|
-
|
15275
|
-
|
15276
|
-
|
15277
|
-
|
15278
|
-
|
15279
|
-
}
|
15280
|
-
const oppositeDirection = {
|
15281
|
-
left: 'right',
|
15282
|
-
right: 'left',
|
15283
|
-
top: 'down',
|
15284
|
-
bottom: 'up'
|
15285
|
-
};
|
15286
|
-
function isHorizontal(anchor) {
|
15287
|
-
return ['left', 'right'].indexOf(anchor) !== -1;
|
15288
|
-
}
|
15289
|
-
function getAnchor(theme, anchor) {
|
15290
|
-
return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
|
15291
|
-
}
|
17106
|
+
}) => {
|
17107
|
+
return _extends({}, ownerState.underline === 'none' && {
|
17108
|
+
textDecoration: 'none'
|
17109
|
+
}, ownerState.underline === 'hover' && {
|
17110
|
+
textDecoration: 'none',
|
17111
|
+
'&:hover': {
|
17112
|
+
textDecoration: 'underline'
|
17113
|
+
}
|
17114
|
+
}, ownerState.underline === 'always' && _extends({
|
17115
|
+
textDecoration: 'underline'
|
17116
|
+
}, ownerState.color !== 'inherit' && {
|
17117
|
+
textDecorationColor: getTextDecoration$1({
|
17118
|
+
theme,
|
17119
|
+
ownerState
|
17120
|
+
})
|
17121
|
+
}, {
|
17122
|
+
'&:hover': {
|
17123
|
+
textDecorationColor: 'inherit'
|
17124
|
+
}
|
17125
|
+
}), ownerState.component === 'button' && {
|
17126
|
+
position: 'relative',
|
17127
|
+
WebkitTapHighlightColor: 'transparent',
|
17128
|
+
backgroundColor: 'transparent',
|
17129
|
+
// Reset default value
|
17130
|
+
// We disable the focus ring for mouse, touch and keyboard users.
|
17131
|
+
outline: 0,
|
17132
|
+
border: 0,
|
17133
|
+
margin: 0,
|
17134
|
+
// Remove the margin in Safari
|
17135
|
+
borderRadius: 0,
|
17136
|
+
padding: 0,
|
17137
|
+
// Remove the padding in Firefox
|
17138
|
+
cursor: 'pointer',
|
17139
|
+
userSelect: 'none',
|
17140
|
+
verticalAlign: 'middle',
|
17141
|
+
MozAppearance: 'none',
|
17142
|
+
// Reset
|
17143
|
+
WebkitAppearance: 'none',
|
17144
|
+
// Reset
|
17145
|
+
'&::-moz-focus-inner': {
|
17146
|
+
borderStyle: 'none' // Remove Firefox dotted outline.
|
17147
|
+
},
|
15292
17148
|
|
15293
|
-
|
15294
|
-
|
15295
|
-
|
15296
|
-
|
15297
|
-
|
17149
|
+
[`&.${linkClasses$1.focusVisible}`]: {
|
17150
|
+
outline: 'auto'
|
17151
|
+
}
|
17152
|
+
});
|
17153
|
+
});
|
17154
|
+
const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
|
15298
17155
|
const props = useThemeProps({
|
15299
17156
|
props: inProps,
|
15300
|
-
name: '
|
17157
|
+
name: 'MuiLink'
|
15301
17158
|
});
|
15302
|
-
const theme = useTheme();
|
15303
|
-
const defaultTransitionDuration = {
|
15304
|
-
enter: theme.transitions.duration.enteringScreen,
|
15305
|
-
exit: theme.transitions.duration.leavingScreen
|
15306
|
-
};
|
15307
17159
|
const {
|
15308
|
-
anchor: anchorProp = 'left',
|
15309
|
-
BackdropProps,
|
15310
|
-
children,
|
15311
17160
|
className,
|
15312
|
-
|
15313
|
-
|
15314
|
-
|
15315
|
-
|
15316
|
-
|
15317
|
-
|
15318
|
-
|
15319
|
-
|
15320
|
-
SlideProps,
|
15321
|
-
// eslint-disable-next-line react/prop-types
|
15322
|
-
TransitionComponent = Slide$1,
|
15323
|
-
transitionDuration = defaultTransitionDuration,
|
15324
|
-
variant = 'temporary'
|
17161
|
+
color = 'primary',
|
17162
|
+
component = 'a',
|
17163
|
+
onBlur,
|
17164
|
+
onFocus,
|
17165
|
+
TypographyClasses,
|
17166
|
+
underline = 'always',
|
17167
|
+
variant = 'inherit',
|
17168
|
+
sx
|
15325
17169
|
} = props,
|
15326
|
-
|
15327
|
-
|
15328
|
-
|
15329
|
-
|
15330
|
-
|
15331
|
-
|
15332
|
-
|
15333
|
-
React.
|
15334
|
-
|
15335
|
-
|
15336
|
-
|
15337
|
-
|
17170
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
17171
|
+
const {
|
17172
|
+
isFocusVisibleRef,
|
17173
|
+
onBlur: handleBlurVisible,
|
17174
|
+
onFocus: handleFocusVisible,
|
17175
|
+
ref: focusVisibleRef
|
17176
|
+
} = useIsFocusVisible();
|
17177
|
+
const [focusVisible, setFocusVisible] = React.useState(false);
|
17178
|
+
const handlerRef = useForkRef(ref, focusVisibleRef);
|
17179
|
+
const handleBlur = event => {
|
17180
|
+
handleBlurVisible(event);
|
17181
|
+
if (isFocusVisibleRef.current === false) {
|
17182
|
+
setFocusVisible(false);
|
17183
|
+
}
|
17184
|
+
if (onBlur) {
|
17185
|
+
onBlur(event);
|
17186
|
+
}
|
17187
|
+
};
|
17188
|
+
const handleFocus = event => {
|
17189
|
+
handleFocusVisible(event);
|
17190
|
+
if (isFocusVisibleRef.current === true) {
|
17191
|
+
setFocusVisible(true);
|
17192
|
+
}
|
17193
|
+
if (onFocus) {
|
17194
|
+
onFocus(event);
|
17195
|
+
}
|
17196
|
+
};
|
15338
17197
|
const ownerState = _extends({}, props, {
|
15339
|
-
|
15340
|
-
|
15341
|
-
|
17198
|
+
color,
|
17199
|
+
component,
|
17200
|
+
focusVisible,
|
17201
|
+
underline,
|
15342
17202
|
variant
|
15343
|
-
}
|
17203
|
+
});
|
15344
17204
|
const classes = useUtilityClasses(ownerState);
|
15345
|
-
|
15346
|
-
|
15347
|
-
|
15348
|
-
|
15349
|
-
|
15350
|
-
|
15351
|
-
|
15352
|
-
|
15353
|
-
if (variant === 'permanent') {
|
15354
|
-
return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
|
15355
|
-
className: clsx(classes.root, classes.docked, className),
|
15356
|
-
ownerState: ownerState,
|
15357
|
-
ref: ref
|
15358
|
-
}, other, {
|
15359
|
-
children: drawer
|
15360
|
-
}));
|
15361
|
-
}
|
15362
|
-
const slidingDrawer = /*#__PURE__*/jsx(TransitionComponent, _extends({
|
15363
|
-
in: open,
|
15364
|
-
direction: oppositeDirection[anchorInvariant],
|
15365
|
-
timeout: transitionDuration,
|
15366
|
-
appear: mounted.current
|
15367
|
-
}, SlideProps, {
|
15368
|
-
children: drawer
|
15369
|
-
}));
|
15370
|
-
if (variant === 'persistent') {
|
15371
|
-
return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
|
15372
|
-
className: clsx(classes.root, classes.docked, className),
|
15373
|
-
ownerState: ownerState,
|
15374
|
-
ref: ref
|
15375
|
-
}, other, {
|
15376
|
-
children: slidingDrawer
|
15377
|
-
}));
|
15378
|
-
}
|
15379
|
-
|
15380
|
-
// variant === temporary
|
15381
|
-
return /*#__PURE__*/jsx(DrawerRoot, _extends({
|
15382
|
-
BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
|
15383
|
-
transitionDuration
|
15384
|
-
}),
|
15385
|
-
className: clsx(classes.root, classes.modal, className),
|
15386
|
-
open: open,
|
17205
|
+
return /*#__PURE__*/jsx(LinkRoot, _extends({
|
17206
|
+
color: color,
|
17207
|
+
className: clsx(classes.root, className),
|
17208
|
+
classes: TypographyClasses,
|
17209
|
+
component: component,
|
17210
|
+
onBlur: handleBlur,
|
17211
|
+
onFocus: handleFocus,
|
17212
|
+
ref: handlerRef,
|
15387
17213
|
ownerState: ownerState,
|
15388
|
-
|
15389
|
-
|
15390
|
-
|
15391
|
-
|
15392
|
-
|
15393
|
-
}));
|
17214
|
+
variant: variant,
|
17215
|
+
sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
|
17216
|
+
color
|
17217
|
+
}] : []), ...(Array.isArray(sx) ? sx : [sx])]
|
17218
|
+
}, other));
|
15394
17219
|
});
|
15395
|
-
process.env.NODE_ENV !== "production" ?
|
17220
|
+
process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ = {
|
15396
17221
|
// ----------------------------- Warning --------------------------------
|
15397
17222
|
// | These PropTypes are generated from the TypeScript type definitions |
|
15398
17223
|
// | To update them edit the d.ts file and run "yarn proptypes" |
|
15399
17224
|
// ----------------------------------------------------------------------
|
15400
|
-
/**
|
15401
|
-
* Side from which the drawer will appear.
|
15402
|
-
* @default 'left'
|
15403
|
-
*/
|
15404
|
-
anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
15405
|
-
/**
|
15406
|
-
* @ignore
|
15407
|
-
*/
|
15408
|
-
BackdropProps: PropTypes.object,
|
15409
17225
|
/**
|
15410
17226
|
* The content of the component.
|
15411
17227
|
*/
|
@@ -15419,64 +17235,43 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
|
|
15419
17235
|
*/
|
15420
17236
|
className: PropTypes.string,
|
15421
17237
|
/**
|
15422
|
-
* The
|
15423
|
-
* @default
|
15424
|
-
*/
|
15425
|
-
elevation: integerPropType,
|
15426
|
-
/**
|
15427
|
-
* If `true`, the backdrop is not rendered.
|
15428
|
-
* @default false
|
15429
|
-
*/
|
15430
|
-
hideBackdrop: PropTypes.bool,
|
15431
|
-
/**
|
15432
|
-
* Props applied to the [`Modal`](/material-ui/api/modal/) element.
|
15433
|
-
* @default {}
|
15434
|
-
*/
|
15435
|
-
ModalProps: PropTypes.object,
|
15436
|
-
/**
|
15437
|
-
* Callback fired when the component requests to be closed.
|
15438
|
-
*
|
15439
|
-
* @param {object} event The event source of the callback.
|
17238
|
+
* The color of the link.
|
17239
|
+
* @default 'primary'
|
15440
17240
|
*/
|
15441
|
-
|
17241
|
+
color: PropTypes /* @typescript-to-proptypes-ignore */.any,
|
15442
17242
|
/**
|
15443
|
-
*
|
15444
|
-
*
|
17243
|
+
* The component used for the root node.
|
17244
|
+
* Either a string to use a HTML element or a component.
|
15445
17245
|
*/
|
15446
|
-
|
17246
|
+
component: elementTypeAcceptingRef$1,
|
15447
17247
|
/**
|
15448
|
-
*
|
15449
|
-
* @default {}
|
17248
|
+
* @ignore
|
15450
17249
|
*/
|
15451
|
-
|
17250
|
+
onBlur: PropTypes.func,
|
15452
17251
|
/**
|
15453
|
-
*
|
17252
|
+
* @ignore
|
15454
17253
|
*/
|
15455
|
-
|
17254
|
+
onFocus: PropTypes.func,
|
15456
17255
|
/**
|
15457
17256
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
15458
17257
|
*/
|
15459
17258
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
15460
17259
|
/**
|
15461
|
-
*
|
15462
|
-
* You may specify a single timeout for all transitions, or individually with an object.
|
15463
|
-
* @default {
|
15464
|
-
* enter: theme.transitions.duration.enteringScreen,
|
15465
|
-
* exit: theme.transitions.duration.leavingScreen,
|
15466
|
-
* }
|
17260
|
+
* `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
|
15467
17261
|
*/
|
15468
|
-
|
15469
|
-
appear: PropTypes.number,
|
15470
|
-
enter: PropTypes.number,
|
15471
|
-
exit: PropTypes.number
|
15472
|
-
})]),
|
17262
|
+
TypographyClasses: PropTypes.object,
|
15473
17263
|
/**
|
15474
|
-
*
|
15475
|
-
* @default '
|
17264
|
+
* Controls when the link should have an underline.
|
17265
|
+
* @default 'always'
|
15476
17266
|
*/
|
15477
|
-
|
17267
|
+
underline: PropTypes.oneOf(['always', 'hover', 'none']),
|
17268
|
+
/**
|
17269
|
+
* Applies the theme typography styles.
|
17270
|
+
* @default 'inherit'
|
17271
|
+
*/
|
17272
|
+
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])
|
15478
17273
|
} : void 0;
|
15479
|
-
var
|
17274
|
+
var Link$1 = Link;
|
15480
17275
|
|
15481
17276
|
const Stack = createStack({
|
15482
17277
|
createStyledComponent: styled$1('div', {
|
@@ -15551,45 +17346,40 @@ const EmptyState = ({
|
|
15551
17346
|
content,
|
15552
17347
|
actions
|
15553
17348
|
}) => {
|
15554
|
-
return
|
15555
|
-
|
15556
|
-
|
15557
|
-
|
15558
|
-
|
15559
|
-
|
15560
|
-
|
15561
|
-
|
15562
|
-
|
15563
|
-
|
15564
|
-
|
15565
|
-
|
15566
|
-
|
15567
|
-
|
15568
|
-
|
15569
|
-
|
15570
|
-
|
15571
|
-
|
15572
|
-
|
15573
|
-
|
15574
|
-
|
15575
|
-
|
15576
|
-
|
15577
|
-
|
15578
|
-
|
15579
|
-
|
15580
|
-
|
15581
|
-
|
15582
|
-
|
15583
|
-
|
15584
|
-
|
15585
|
-
|
15586
|
-
|
15587
|
-
|
15588
|
-
children: actions
|
15589
|
-
})]
|
15590
|
-
})]
|
15591
|
-
})
|
15592
|
-
});
|
17349
|
+
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
17350
|
+
theme: SincoTheme
|
17351
|
+
}, /*#__PURE__*/React__default.createElement(Card$1, {
|
17352
|
+
elevation: 1
|
17353
|
+
}, /*#__PURE__*/React__default.createElement(CardContent$1, {
|
17354
|
+
sx: {
|
17355
|
+
display: 'flex',
|
17356
|
+
alignItems: 'center',
|
17357
|
+
justifyContent: 'center',
|
17358
|
+
flexDirection: 'column',
|
17359
|
+
gap: 4
|
17360
|
+
}
|
17361
|
+
}, /*#__PURE__*/React__default.createElement("svg", {
|
17362
|
+
style: {
|
17363
|
+
width: 206,
|
17364
|
+
height: 187
|
17365
|
+
}
|
17366
|
+
}, /*#__PURE__*/React__default.createElement("use", {
|
17367
|
+
xlinkHref: `${sincoIconos}#${UrlImage[_state]}`
|
17368
|
+
})), /*#__PURE__*/React__default.createElement(Stack$1, {
|
17369
|
+
direction: "column",
|
17370
|
+
spacing: 2
|
17371
|
+
}, title && /*#__PURE__*/React__default.createElement(Typography$1, {
|
17372
|
+
variant: "h6",
|
17373
|
+
textAlign: "center"
|
17374
|
+
}, title), content && /*#__PURE__*/React__default.createElement(Typography$1, {
|
17375
|
+
variant: "body1",
|
17376
|
+
textAlign: "center",
|
17377
|
+
color: "text.secondary"
|
17378
|
+
}, content), _state === 'create' && actions && /*#__PURE__*/React__default.createElement(Stack$1, {
|
17379
|
+
direction: "row",
|
17380
|
+
spacing: 2,
|
17381
|
+
justifyContent: "center"
|
17382
|
+
}, actions)))));
|
15593
17383
|
};
|
15594
17384
|
|
15595
17385
|
var wellKnownSymbol$a = wellKnownSymbol$f;
|
@@ -16060,90 +17850,320 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
|
|
16060
17850
|
}), 'Close');
|
16061
17851
|
default_1 = Close.default = _default;
|
16062
17852
|
|
16063
|
-
const
|
16064
|
-
display:
|
16065
|
-
flexDirection:
|
16066
|
-
alignContent:
|
16067
|
-
justifyContent:
|
16068
|
-
|
16069
|
-
|
17853
|
+
const stylesDrawerContainer = {
|
17854
|
+
display: "flex",
|
17855
|
+
flexDirection: "column",
|
17856
|
+
alignContent: "flex-start",
|
17857
|
+
justifyContent: "space-between",
|
17858
|
+
width: "530px",
|
17859
|
+
height: "100%",
|
17860
|
+
overflow: "hidden"
|
16070
17861
|
};
|
16071
|
-
const
|
16072
|
-
display:
|
16073
|
-
alignContent:
|
16074
|
-
justifyContent:
|
16075
|
-
backgroundColor:
|
16076
|
-
py:
|
16077
|
-
px:
|
17862
|
+
const stylesEncabezado = {
|
17863
|
+
display: "flex",
|
17864
|
+
alignContent: "center",
|
17865
|
+
justifyContent: "space-between",
|
17866
|
+
backgroundColor: "secondary.main",
|
17867
|
+
py: "12px",
|
17868
|
+
px: "8px"
|
16078
17869
|
};
|
16079
|
-
const
|
16080
|
-
display:
|
16081
|
-
overflow:
|
16082
|
-
alignItems:
|
16083
|
-
flexDirection:
|
16084
|
-
height:
|
16085
|
-
py:
|
16086
|
-
px:
|
17870
|
+
const stylesContenido = {
|
17871
|
+
display: "flex",
|
17872
|
+
overflow: "auto",
|
17873
|
+
alignItems: "flex-start",
|
17874
|
+
flexDirection: "column",
|
17875
|
+
height: "-webkit-fill-available",
|
17876
|
+
py: "12px",
|
17877
|
+
px: "8px"
|
16087
17878
|
};
|
16088
|
-
const
|
16089
|
-
display:
|
16090
|
-
alignContent:
|
16091
|
-
justifyContent:
|
16092
|
-
borderTop:
|
16093
|
-
backgroundColor:
|
16094
|
-
|
16095
|
-
|
16096
|
-
py:
|
16097
|
-
px:
|
17879
|
+
const stylesAcciones = {
|
17880
|
+
display: "flex",
|
17881
|
+
alignContent: "center",
|
17882
|
+
justifyContent: "flex-end",
|
17883
|
+
borderTop: "1px solid rgba(16, 24, 64, 0.23)",
|
17884
|
+
backgroundColor: "#F1F0EE",
|
17885
|
+
mt: "4px",
|
17886
|
+
gap: "8px",
|
17887
|
+
py: "12px",
|
17888
|
+
px: "8px"
|
16098
17889
|
};
|
16099
17890
|
const DrawerComponent = ({
|
16100
|
-
title,
|
16101
|
-
children,
|
16102
|
-
renderActions,
|
16103
|
-
showActions,
|
16104
|
-
position,
|
16105
|
-
width,
|
16106
17891
|
open,
|
16107
|
-
onClose
|
17892
|
+
onClose,
|
17893
|
+
titulo,
|
17894
|
+
children,
|
17895
|
+
acciones,
|
17896
|
+
anchor
|
16108
17897
|
}) => {
|
16109
|
-
const [
|
16110
|
-
const
|
16111
|
-
|
17898
|
+
const [showActions, setShowActions] = useState(false);
|
17899
|
+
const mostrarAcciones = () => {
|
17900
|
+
setShowActions(true);
|
16112
17901
|
};
|
16113
|
-
return
|
16114
|
-
theme: SincoTheme
|
16115
|
-
|
16116
|
-
|
16117
|
-
|
16118
|
-
|
16119
|
-
|
16120
|
-
|
16121
|
-
|
16122
|
-
|
16123
|
-
|
16124
|
-
|
16125
|
-
|
16126
|
-
|
16127
|
-
|
16128
|
-
|
16129
|
-
|
16130
|
-
|
16131
|
-
|
16132
|
-
|
16133
|
-
|
16134
|
-
|
16135
|
-
|
16136
|
-
|
16137
|
-
|
16138
|
-
|
16139
|
-
|
16140
|
-
|
16141
|
-
|
16142
|
-
|
16143
|
-
|
16144
|
-
|
17902
|
+
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
17903
|
+
theme: SincoTheme
|
17904
|
+
}, /*#__PURE__*/React__default.createElement(Drawer$1, {
|
17905
|
+
anchor: anchor,
|
17906
|
+
open: open,
|
17907
|
+
onClose: onClose
|
17908
|
+
}, /*#__PURE__*/React__default.createElement(Box$2, {
|
17909
|
+
sx: stylesDrawerContainer
|
17910
|
+
}, /*#__PURE__*/React__default.createElement(Box$2, {
|
17911
|
+
sx: stylesEncabezado
|
17912
|
+
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17913
|
+
variant: "h6"
|
17914
|
+
}, titulo), /*#__PURE__*/React__default.createElement(Box$2, null, /*#__PURE__*/React__default.createElement(IconButton$1, {
|
17915
|
+
onClick: onClose,
|
17916
|
+
size: "small"
|
17917
|
+
}, /*#__PURE__*/React__default.createElement(default_1, {
|
17918
|
+
fontSize: "small"
|
17919
|
+
})))), /*#__PURE__*/React__default.createElement(Box$2, {
|
17920
|
+
onClick: mostrarAcciones,
|
17921
|
+
sx: stylesContenido
|
17922
|
+
}, children), showActions && /*#__PURE__*/React__default.createElement(Box$2, {
|
17923
|
+
sx: stylesAcciones
|
17924
|
+
}, acciones))));
|
17925
|
+
};
|
17926
|
+
|
17927
|
+
const ToastContent = styled$1(Stack$1)(() => ({
|
17928
|
+
position: "fixed",
|
17929
|
+
zIndex: 1400,
|
17930
|
+
boxShadow: "0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)",
|
17931
|
+
right: 16,
|
17932
|
+
marginTop: 16
|
17933
|
+
}));
|
17934
|
+
const ContentBox = styled$1(Box$2)(({
|
17935
|
+
theme
|
17936
|
+
}) => ({
|
17937
|
+
padding: theme.spacing(1.5),
|
17938
|
+
gap: theme.spacing(1.5),
|
17939
|
+
display: "flex",
|
17940
|
+
alignItems: "center",
|
17941
|
+
"&.color-error": {
|
17942
|
+
backgroundColor: "#FEEBEE"
|
17943
|
+
},
|
17944
|
+
"&.color-info": {
|
17945
|
+
backgroundColor: "#E1F5FE"
|
17946
|
+
},
|
17947
|
+
"&.color-warning": {
|
17948
|
+
backgroundColor: "#FFF3E0"
|
17949
|
+
},
|
17950
|
+
"&.color-success": {
|
17951
|
+
backgroundColor: "#E8F5E9"
|
17952
|
+
}
|
17953
|
+
}));
|
17954
|
+
const RippleIcon = styled$1(Stack$1)(({
|
17955
|
+
theme
|
17956
|
+
}) => ({
|
17957
|
+
padding: theme.spacing(1),
|
17958
|
+
gap: theme.spacing(1),
|
17959
|
+
height: 20,
|
17960
|
+
borderRadius: 50,
|
17961
|
+
"&.ripple-error": {
|
17962
|
+
backgroundColor: "#D143431F"
|
17963
|
+
},
|
17964
|
+
"&.ripple-info": {
|
17965
|
+
backgroundColor: "#2D9FC51F"
|
17966
|
+
},
|
17967
|
+
"&.ripple-warning": {
|
17968
|
+
backgroundColor: "#FB85001F"
|
17969
|
+
},
|
17970
|
+
"&.ripple-success": {
|
17971
|
+
backgroundColor: "#8FC93A1F"
|
17972
|
+
}
|
17973
|
+
}));
|
17974
|
+
const ContentIcon = styled$1(Stack$1)(({
|
17975
|
+
theme
|
17976
|
+
}) => ({
|
17977
|
+
"&.icon-color.color-info": {
|
17978
|
+
color: theme.palette.info.main
|
17979
|
+
},
|
17980
|
+
"&.icon-color.color-error": {
|
17981
|
+
color: theme.palette.error.main
|
17982
|
+
},
|
17983
|
+
"&.icon-color.color-warning": {
|
17984
|
+
color: theme.palette.warning.main
|
17985
|
+
},
|
17986
|
+
"&.icon-color.color-success": {
|
17987
|
+
color: theme.palette.success.main
|
17988
|
+
}
|
17989
|
+
}));
|
17990
|
+
const ToastNotification = toast => {
|
17991
|
+
const [openToast, setOpenToast] = useState(true);
|
17992
|
+
const [showOptions, setShowOptions] = useState(true);
|
17993
|
+
const [progress, setProgress] = useState(100);
|
17994
|
+
const timeProgress = toast.time || 8000;
|
17995
|
+
const IconMap = {
|
17996
|
+
success: /*#__PURE__*/React__default.createElement(CheckCircleRounded, null),
|
17997
|
+
error: /*#__PURE__*/React__default.createElement(ErrorRounded, null),
|
17998
|
+
warning: /*#__PURE__*/React__default.createElement(WarningRounded, null),
|
17999
|
+
info: /*#__PURE__*/React__default.createElement(InfoRounded, null)
|
18000
|
+
};
|
18001
|
+
const ToastIcon = IconMap[toast.type || "info"];
|
18002
|
+
const colorMap = {
|
18003
|
+
success: "success",
|
18004
|
+
error: "error",
|
18005
|
+
warning: "warning",
|
18006
|
+
info: "info"
|
18007
|
+
};
|
18008
|
+
const colors = colorMap[toast.type || "info"];
|
18009
|
+
const toastPosition = {
|
18010
|
+
center: "center",
|
18011
|
+
end: "end",
|
18012
|
+
start: "start"
|
18013
|
+
};
|
18014
|
+
toastPosition[toast.position || "end"];
|
18015
|
+
const close = () => {
|
18016
|
+
setOpenToast(false);
|
18017
|
+
};
|
18018
|
+
const toggleOptions = () => {
|
18019
|
+
setShowOptions(prevShowOptions => !prevShowOptions);
|
18020
|
+
};
|
18021
|
+
const seeOptions = toast.seeMore;
|
18022
|
+
useEffect(() => {
|
18023
|
+
let seconds = 0;
|
18024
|
+
const interval = setInterval(() => {
|
18025
|
+
seconds += 100;
|
18026
|
+
const progress = 100 - seconds / timeProgress * 100;
|
18027
|
+
setProgress(progress <= 0 ? 0 : progress);
|
18028
|
+
}, 100);
|
18029
|
+
const closeTimeout = setTimeout(() => {
|
18030
|
+
clearInterval(interval);
|
18031
|
+
setOpenToast(false);
|
18032
|
+
}, timeProgress);
|
18033
|
+
return () => {
|
18034
|
+
clearInterval(interval);
|
18035
|
+
clearTimeout(closeTimeout);
|
18036
|
+
};
|
18037
|
+
}, [timeProgress]);
|
18038
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
18039
|
+
theme: SincoTheme
|
18040
|
+
}, /*#__PURE__*/React__default.createElement(Stack$1, {
|
18041
|
+
height: 105,
|
18042
|
+
top: 16,
|
18043
|
+
right: 16,
|
18044
|
+
position: "absolute",
|
18045
|
+
zIndex: 1400
|
18046
|
+
}, /*#__PURE__*/React__default.createElement(ToastContent, {
|
18047
|
+
position: "fixed"
|
18048
|
+
}, /*#__PURE__*/React__default.createElement(ContentBox, {
|
18049
|
+
className: `color-${toast.type || "info"}`
|
18050
|
+
}, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
|
18051
|
+
className: `ripple-${toast.type || "info"}`
|
18052
|
+
}, /*#__PURE__*/React__default.createElement(ContentIcon, {
|
18053
|
+
className: `icon-color color-${toast.type || "info"}`
|
18054
|
+
}, ToastIcon)), /*#__PURE__*/React__default.createElement(Divider$1, {
|
18055
|
+
orientation: "vertical",
|
18056
|
+
flexItem: true
|
18057
|
+
}), /*#__PURE__*/React__default.createElement(Stack$1, {
|
18058
|
+
gap: 0.5,
|
18059
|
+
width: 285
|
18060
|
+
}, /*#__PURE__*/React__default.createElement(Stack$1, {
|
18061
|
+
justifyContent: "space-between",
|
18062
|
+
flexDirection: "row",
|
18063
|
+
alignItems: "center"
|
18064
|
+
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
18065
|
+
variant: "subtitle2",
|
18066
|
+
color: "text.primary"
|
18067
|
+
}, toast.title), /*#__PURE__*/React__default.createElement(IconButton$1, {
|
18068
|
+
size: "small",
|
18069
|
+
"aria-label": "delete",
|
18070
|
+
onClick: close
|
18071
|
+
}, /*#__PURE__*/React__default.createElement(Close$1, null))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
18072
|
+
gap: "4px"
|
18073
|
+
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
18074
|
+
color: "text.primary",
|
18075
|
+
variant: "body2"
|
18076
|
+
}, toast.subtitle), !showOptions && toast.dataOpt && toast.dataOpt.length > 0 && /*#__PURE__*/React__default.createElement("ul", {
|
18077
|
+
style: {
|
18078
|
+
paddingLeft: 15,
|
18079
|
+
marginBlock: 0,
|
18080
|
+
fontSize: 11,
|
18081
|
+
color: "#101840de"
|
18082
|
+
}
|
18083
|
+
}, toast.dataOpt.map((element, i) => {
|
18084
|
+
const keyElement = Object.keys(element);
|
18085
|
+
let options = "";
|
18086
|
+
for (let _i = 0; _i < keyElement.length; _i++) {
|
18087
|
+
options += element[keyElement[_i]];
|
18088
|
+
}
|
18089
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
18090
|
+
style: {
|
18091
|
+
width: "fit-content"
|
18092
|
+
},
|
18093
|
+
key: i
|
18094
|
+
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
18095
|
+
variant: "caption"
|
18096
|
+
}, options));
|
18097
|
+
}))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
18098
|
+
justifyContent: "flex-end",
|
18099
|
+
flexDirection: "row",
|
18100
|
+
alignItems: "flex-end"
|
18101
|
+
}, toast.actions && /*#__PURE__*/React__default.createElement(Stack$1, {
|
18102
|
+
flexDirection: "row",
|
18103
|
+
gap: 1
|
18104
|
+
}, toast.actions), seeOptions && /*#__PURE__*/React__default.createElement(Button$1, {
|
18105
|
+
onClick: toggleOptions,
|
18106
|
+
size: "small",
|
18107
|
+
variant: "text",
|
18108
|
+
color: colors,
|
18109
|
+
endIcon: showOptions ? /*#__PURE__*/React__default.createElement(ArrowDownward, {
|
18110
|
+
fontSize: "small"
|
18111
|
+
}) : /*#__PURE__*/React__default.createElement(ArrowUpward, {
|
18112
|
+
fontSize: "small"
|
16145
18113
|
})
|
16146
|
-
})
|
18114
|
+
}, showOptions ? "Ver más" : "Ver menos")))), /*#__PURE__*/React__default.createElement(LinearProgress$1, {
|
18115
|
+
color: colors,
|
18116
|
+
variant: "determinate",
|
18117
|
+
value: progress
|
18118
|
+
})))));
|
18119
|
+
};
|
18120
|
+
|
18121
|
+
const PageContent = styled$1(Stack$1)(({
|
18122
|
+
theme
|
18123
|
+
}) => ({
|
18124
|
+
backgroundColor: "#fff",
|
18125
|
+
boxShadow: "0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)",
|
18126
|
+
zIndex: 100,
|
18127
|
+
padding: "8px 24px",
|
18128
|
+
justifyContent: "space-between",
|
18129
|
+
minHeight: 39,
|
18130
|
+
position: "fixed",
|
18131
|
+
width: "100%"
|
18132
|
+
}));
|
18133
|
+
const PageHeader = page => {
|
18134
|
+
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
18135
|
+
theme: SincoTheme
|
18136
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
18137
|
+
style: {
|
18138
|
+
minHeight: 56
|
18139
|
+
}
|
18140
|
+
}, /*#__PURE__*/React__default.createElement(PageContent, null, Array.isArray(page.breadcrumbs) && page.breadcrumbs.length > 0 && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, null, page.breadcrumbs.map((element, i) => {
|
18141
|
+
return /*#__PURE__*/React__default.createElement(Link$1, {
|
18142
|
+
underline: "hover",
|
18143
|
+
color: "inherit",
|
18144
|
+
href: element.link,
|
18145
|
+
key: i
|
18146
|
+
}, element.name);
|
18147
|
+
})), /*#__PURE__*/React__default.createElement(Stack$1, {
|
18148
|
+
width: "90%",
|
18149
|
+
justifyContent: "space-between",
|
18150
|
+
flexDirection: "row",
|
18151
|
+
alignItems: "center"
|
18152
|
+
}, /*#__PURE__*/React__default.createElement(Stack$1, {
|
18153
|
+
gap: 1.5,
|
18154
|
+
flexDirection: "row",
|
18155
|
+
alignItems: "center"
|
18156
|
+
}, page.back, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
|
18157
|
+
variant: "h6",
|
18158
|
+
color: "text.primary"
|
18159
|
+
}, page.title), /*#__PURE__*/React__default.createElement(Typography$1, {
|
18160
|
+
variant: "caption",
|
18161
|
+
color: "text.secondary"
|
18162
|
+
}, page.subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
18163
|
+
gap: 1,
|
18164
|
+
alignItems: "center",
|
18165
|
+
flexDirection: "row"
|
18166
|
+
}, page.actions)), page.tabs)));
|
16147
18167
|
};
|
16148
18168
|
|
16149
18169
|
var classof$2 = classofRaw$2;
|
@@ -21601,4 +23621,4 @@ const useDynamicColor = url => {
|
|
21601
23621
|
};
|
21602
23622
|
};
|
21603
23623
|
|
21604
|
-
export { DrawerComponent, EmptyState, SincoTheme, UrlImage, useDynamicColor };
|
23624
|
+
export { DrawerComponent, EmptyState, PageContent, PageHeader, SincoTheme, ToastNotification, UrlImage, dynamicColor, useDynamicColor };
|