@sinco/react 1.0.10-rc.29 → 1.0.10-rc.4
Sign up to get free protection for your applications and to get access to all the features.
- package/index.js +518 -2566
- package/package.json +1 -1
- package/src/lib/Components/Drawer.d.ts +3 -3
- package/src/lib/Components/index.d.ts +0 -2
- package/src/lib/Theme/breakpoints.d.ts +2 -1
- package/src/lib/Theme/components.d.ts +2 -11
- package/src/lib/Theme/index.d.ts +14 -0
- package/src/lib/Theme/mixins.d.ts +2 -1
- package/src/lib/Theme/palette.d.ts +2 -1
- package/src/lib/Theme/shadows.d.ts +2 -1
- package/src/lib/Theme/typography.d.ts +2 -15
- package/src/lib/Utils/dynamicColor.d.ts +2 -1
- package/README.md +0 -57
- package/src/lib/Components/PageHeader.d.ts +0 -25
- package/src/lib/Components/ToastNofitication.d.ts +0 -24
package/index.js
CHANGED
@@ -5458,10 +5458,10 @@ if (!isBrowser$2) {
|
|
5458
5458
|
};
|
5459
5459
|
}
|
5460
5460
|
|
5461
|
-
var ThemeContext
|
5461
|
+
var ThemeContext = /* #__PURE__ */React.createContext({});
|
5462
5462
|
|
5463
5463
|
if (process.env.NODE_ENV !== 'production') {
|
5464
|
-
ThemeContext
|
5464
|
+
ThemeContext.displayName = 'EmotionThemeContext';
|
5465
5465
|
}
|
5466
5466
|
|
5467
5467
|
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
|
@@ -5514,7 +5514,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
|
|
5514
5514
|
className = props.className + " ";
|
5515
5515
|
}
|
5516
5516
|
|
5517
|
-
var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext
|
5517
|
+
var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
|
5518
5518
|
|
5519
5519
|
if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
|
5520
5520
|
var labelFromStack = props[labelPropName];
|
@@ -5693,7 +5693,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
|
|
5693
5693
|
}
|
5694
5694
|
|
5695
5695
|
var styles = props.styles;
|
5696
|
-
var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext
|
5696
|
+
var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));
|
5697
5697
|
|
5698
5698
|
if (!isBrowser$2) {
|
5699
5699
|
var _ref;
|
@@ -5939,7 +5939,7 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
|
|
5939
5939
|
var content = {
|
5940
5940
|
css: css,
|
5941
5941
|
cx: cx,
|
5942
|
-
theme: React.useContext(ThemeContext
|
5942
|
+
theme: React.useContext(ThemeContext)
|
5943
5943
|
};
|
5944
5944
|
var ele = props.children(content);
|
5945
5945
|
hasRendered = true;
|
@@ -6095,7 +6095,7 @@ var createStyled$1 = function createStyled(tag, options) {
|
|
6095
6095
|
mergedProps[key] = props[key];
|
6096
6096
|
}
|
6097
6097
|
|
6098
|
-
mergedProps.theme = React.useContext(ThemeContext
|
6098
|
+
mergedProps.theme = React.useContext(ThemeContext);
|
6099
6099
|
}
|
6100
6100
|
|
6101
6101
|
if (typeof props.className === 'string') {
|
@@ -6199,7 +6199,7 @@ const internal_processStyles = (tag, processor) => {
|
|
6199
6199
|
}
|
6200
6200
|
};
|
6201
6201
|
|
6202
|
-
const _excluded$
|
6202
|
+
const _excluded$p = ["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$p);
|
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$o = ["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$o);
|
7330
7330
|
const breakpoints = createBreakpoints(breakpointsInput);
|
7331
7331
|
const spacing = createSpacing(spacingInput);
|
7332
7332
|
let muiTheme = deepmerge({
|
@@ -7354,17 +7354,17 @@ function createTheme$1(options = {}, ...args) {
|
|
7354
7354
|
function isObjectEmpty(obj) {
|
7355
7355
|
return Object.keys(obj).length === 0;
|
7356
7356
|
}
|
7357
|
-
function useTheme$
|
7358
|
-
const contextTheme = React.useContext(ThemeContext
|
7357
|
+
function useTheme$2(defaultTheme = null) {
|
7358
|
+
const contextTheme = React.useContext(ThemeContext);
|
7359
7359
|
return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
|
7360
7360
|
}
|
7361
7361
|
|
7362
7362
|
const systemDefaultTheme$1 = createTheme$1();
|
7363
|
-
function useTheme$
|
7364
|
-
return useTheme$
|
7363
|
+
function useTheme$1(defaultTheme = systemDefaultTheme$1) {
|
7364
|
+
return useTheme$2(defaultTheme);
|
7365
7365
|
}
|
7366
7366
|
|
7367
|
-
const _excluded$
|
7367
|
+
const _excluded$n = ["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$n);
|
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$m = ["className", "component"];
|
7415
7415
|
function createBox(options = {}) {
|
7416
7416
|
const {
|
7417
7417
|
themeId,
|
@@ -7423,13 +7423,13 @@ function createBox(options = {}) {
|
|
7423
7423
|
shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
|
7424
7424
|
})(styleFunctionSx$1);
|
7425
7425
|
const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
|
7426
|
-
const theme = useTheme$
|
7426
|
+
const theme = useTheme$1(defaultTheme);
|
7427
7427
|
const _extendSxProp = extendSxProp(inProps),
|
7428
7428
|
{
|
7429
7429
|
className,
|
7430
7430
|
component = 'div'
|
7431
7431
|
} = _extendSxProp,
|
7432
|
-
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$
|
7432
|
+
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$m);
|
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$l = ["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$l);
|
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$k = ["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$k);
|
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;
|
@@ -7695,7 +7695,7 @@ function useThemeProps$1({
|
|
7695
7695
|
defaultTheme,
|
7696
7696
|
themeId
|
7697
7697
|
}) {
|
7698
|
-
let theme = useTheme$
|
7698
|
+
let theme = useTheme$1(defaultTheme);
|
7699
7699
|
if (themeId) {
|
7700
7700
|
theme = theme[themeId] || theme;
|
7701
7701
|
}
|
@@ -7941,168 +7941,7 @@ 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
|
-
|
7955
|
-
const ThemeContext = /*#__PURE__*/React.createContext(null);
|
7956
|
-
if (process.env.NODE_ENV !== 'production') {
|
7957
|
-
ThemeContext.displayName = 'ThemeContext';
|
7958
|
-
}
|
7959
|
-
var ThemeContext$1 = ThemeContext;
|
7960
|
-
|
7961
|
-
function useTheme$1() {
|
7962
|
-
const theme = React.useContext(ThemeContext$1);
|
7963
|
-
if (process.env.NODE_ENV !== 'production') {
|
7964
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
7965
|
-
React.useDebugValue(theme);
|
7966
|
-
}
|
7967
|
-
return theme;
|
7968
|
-
}
|
7969
|
-
|
7970
|
-
const hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
7971
|
-
var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
|
7972
|
-
|
7973
|
-
function mergeOuterLocalTheme(outerTheme, localTheme) {
|
7974
|
-
if (typeof localTheme === 'function') {
|
7975
|
-
const mergedTheme = localTheme(outerTheme);
|
7976
|
-
if (process.env.NODE_ENV !== 'production') {
|
7977
|
-
if (!mergedTheme) {
|
7978
|
-
console.error(['MUI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
|
7979
|
-
}
|
7980
|
-
}
|
7981
|
-
return mergedTheme;
|
7982
|
-
}
|
7983
|
-
return {
|
7984
|
-
...outerTheme,
|
7985
|
-
...localTheme
|
7986
|
-
};
|
7987
|
-
}
|
7988
|
-
|
7989
|
-
/**
|
7990
|
-
* This component takes a `theme` prop.
|
7991
|
-
* It makes the `theme` available down the React tree thanks to React context.
|
7992
|
-
* This component should preferably be used at **the root of your component tree**.
|
7993
|
-
*/
|
7994
|
-
function ThemeProvider$2(props) {
|
7995
|
-
const {
|
7996
|
-
children,
|
7997
|
-
theme: localTheme
|
7998
|
-
} = props;
|
7999
|
-
const outerTheme = useTheme$1();
|
8000
|
-
if (process.env.NODE_ENV !== 'production') {
|
8001
|
-
if (outerTheme === null && typeof localTheme === 'function') {
|
8002
|
-
console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
|
8003
|
-
}
|
8004
|
-
}
|
8005
|
-
const theme = React.useMemo(() => {
|
8006
|
-
const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
|
8007
|
-
if (output != null) {
|
8008
|
-
output[nested] = outerTheme !== null;
|
8009
|
-
}
|
8010
|
-
return output;
|
8011
|
-
}, [localTheme, outerTheme]);
|
8012
|
-
return /*#__PURE__*/jsx(ThemeContext$1.Provider, {
|
8013
|
-
value: theme,
|
8014
|
-
children: children
|
8015
|
-
});
|
8016
|
-
}
|
8017
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = {
|
8018
|
-
/**
|
8019
|
-
* Your component tree.
|
8020
|
-
*/
|
8021
|
-
children: PropTypes.node,
|
8022
|
-
/**
|
8023
|
-
* A theme object. You can provide a function to extend the outer theme.
|
8024
|
-
*/
|
8025
|
-
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
|
8026
|
-
} : void 0;
|
8027
|
-
if (process.env.NODE_ENV !== 'production') {
|
8028
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) : void 0;
|
8029
|
-
}
|
8030
|
-
|
8031
|
-
const EMPTY_THEME = {};
|
8032
|
-
function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
|
8033
|
-
return React.useMemo(() => {
|
8034
|
-
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
|
8035
|
-
if (typeof localTheme === 'function') {
|
8036
|
-
const mergedTheme = localTheme(resolvedTheme);
|
8037
|
-
const result = themeId ? _extends({}, upperTheme, {
|
8038
|
-
[themeId]: mergedTheme
|
8039
|
-
}) : mergedTheme;
|
8040
|
-
// must return a function for the private theme to NOT merge with the upper theme.
|
8041
|
-
// see the test case "use provided theme from a callback" in ThemeProvider.test.js
|
8042
|
-
if (isPrivate) {
|
8043
|
-
return () => result;
|
8044
|
-
}
|
8045
|
-
return result;
|
8046
|
-
}
|
8047
|
-
return themeId ? _extends({}, upperTheme, {
|
8048
|
-
[themeId]: localTheme
|
8049
|
-
}) : _extends({}, upperTheme, localTheme);
|
8050
|
-
}, [themeId, upperTheme, localTheme, isPrivate]);
|
8051
|
-
}
|
8052
|
-
|
8053
|
-
/**
|
8054
|
-
* This component makes the `theme` available down the React tree.
|
8055
|
-
* It should preferably be used at **the root of your component tree**.
|
8056
|
-
*
|
8057
|
-
* <ThemeProvider theme={theme}> // existing use case
|
8058
|
-
* <ThemeProvider theme={{ id: theme }}> // theme scoping
|
8059
|
-
*/
|
8060
|
-
function ThemeProvider$1(props) {
|
8061
|
-
const {
|
8062
|
-
children,
|
8063
|
-
theme: localTheme,
|
8064
|
-
themeId
|
8065
|
-
} = props;
|
8066
|
-
const upperTheme = useTheme$3(EMPTY_THEME);
|
8067
|
-
const upperPrivateTheme = useTheme$1() || EMPTY_THEME;
|
8068
|
-
if (process.env.NODE_ENV !== 'production') {
|
8069
|
-
if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
|
8070
|
-
console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
|
8071
|
-
}
|
8072
|
-
}
|
8073
|
-
const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
|
8074
|
-
const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
|
8075
|
-
return /*#__PURE__*/jsx(ThemeProvider$2, {
|
8076
|
-
theme: privateTheme,
|
8077
|
-
children: /*#__PURE__*/jsx(ThemeContext$2.Provider, {
|
8078
|
-
value: engineTheme,
|
8079
|
-
children: children
|
8080
|
-
})
|
8081
|
-
});
|
8082
|
-
}
|
8083
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes /* remove-proptypes */ = {
|
8084
|
-
// ----------------------------- Warning --------------------------------
|
8085
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
8086
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
8087
|
-
// ----------------------------------------------------------------------
|
8088
|
-
/**
|
8089
|
-
* Your component tree.
|
8090
|
-
*/
|
8091
|
-
children: PropTypes.node,
|
8092
|
-
/**
|
8093
|
-
* A theme object. You can provide a function to extend the outer theme.
|
8094
|
-
*/
|
8095
|
-
theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
|
8096
|
-
/**
|
8097
|
-
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
|
8098
|
-
*/
|
8099
|
-
themeId: PropTypes.string
|
8100
|
-
} : void 0;
|
8101
|
-
if (process.env.NODE_ENV !== 'production') {
|
8102
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
|
8103
|
-
}
|
8104
|
-
|
8105
|
-
const _excluded$q = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
7944
|
+
const _excluded$j = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
8106
7945
|
const defaultTheme$3 = createTheme$1();
|
8107
7946
|
// widening Theme to any so that the consumer can own the theme structure.
|
8108
7947
|
const defaultCreateStyledComponent = systemStyled('div', {
|
@@ -8231,7 +8070,7 @@ function createStack(options = {}) {
|
|
8231
8070
|
className,
|
8232
8071
|
useFlexGap = false
|
8233
8072
|
} = props,
|
8234
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
8073
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$j);
|
8235
8074
|
const ownerState = {
|
8236
8075
|
direction,
|
8237
8076
|
spacing,
|
@@ -8405,7 +8244,7 @@ const green = {
|
|
8405
8244
|
};
|
8406
8245
|
var green$1 = green;
|
8407
8246
|
|
8408
|
-
const _excluded$
|
8247
|
+
const _excluded$i = ["mode", "contrastThreshold", "tonalOffset"];
|
8409
8248
|
const light = {
|
8410
8249
|
// The colors used to style the text.
|
8411
8250
|
text: {
|
@@ -8574,7 +8413,7 @@ function createPalette(palette) {
|
|
8574
8413
|
contrastThreshold = 3,
|
8575
8414
|
tonalOffset = 0.2
|
8576
8415
|
} = palette,
|
8577
|
-
other = _objectWithoutPropertiesLoose(palette, _excluded$
|
8416
|
+
other = _objectWithoutPropertiesLoose(palette, _excluded$i);
|
8578
8417
|
const primary = palette.primary || getDefaultPrimary(mode);
|
8579
8418
|
const secondary = palette.secondary || getDefaultSecondary(mode);
|
8580
8419
|
const error = palette.error || getDefaultError(mode);
|
@@ -8698,7 +8537,7 @@ const theme2 = createTheme({ palette: {
|
|
8698
8537
|
return paletteOutput;
|
8699
8538
|
}
|
8700
8539
|
|
8701
|
-
const _excluded$
|
8540
|
+
const _excluded$h = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
|
8702
8541
|
function round(value) {
|
8703
8542
|
return Math.round(value * 1e5) / 1e5;
|
8704
8543
|
}
|
@@ -8729,7 +8568,7 @@ function createTypography(palette, typography) {
|
|
8729
8568
|
allVariants,
|
8730
8569
|
pxToRem: pxToRem2
|
8731
8570
|
} = _ref,
|
8732
|
-
other = _objectWithoutPropertiesLoose(_ref, _excluded$
|
8571
|
+
other = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
8733
8572
|
if (process.env.NODE_ENV !== 'production') {
|
8734
8573
|
if (typeof fontSize !== 'number') {
|
8735
8574
|
console.error('MUI: `fontSize` is required to be a number.');
|
@@ -8796,7 +8635,7 @@ function createShadow(...px) {
|
|
8796
8635
|
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)];
|
8797
8636
|
var shadows$1 = shadows;
|
8798
8637
|
|
8799
|
-
const _excluded$
|
8638
|
+
const _excluded$g = ["duration", "easing", "delay"];
|
8800
8639
|
// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
|
8801
8640
|
// to learn the context in which each easing should be used.
|
8802
8641
|
const easing = {
|
@@ -8847,7 +8686,7 @@ function createTransitions(inputTransitions) {
|
|
8847
8686
|
easing: easingOption = mergedEasing.easeInOut,
|
8848
8687
|
delay = 0
|
8849
8688
|
} = options,
|
8850
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
8689
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$g);
|
8851
8690
|
if (process.env.NODE_ENV !== 'production') {
|
8852
8691
|
const isString = value => typeof value === 'string';
|
8853
8692
|
// IE11 support, replace with Number.isNaN
|
@@ -8894,7 +8733,7 @@ const zIndex = {
|
|
8894
8733
|
};
|
8895
8734
|
var zIndex$1 = zIndex;
|
8896
8735
|
|
8897
|
-
const _excluded$
|
8736
|
+
const _excluded$f = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
|
8898
8737
|
function createTheme(options = {}, ...args) {
|
8899
8738
|
const {
|
8900
8739
|
mixins: mixinsInput = {},
|
@@ -8902,7 +8741,7 @@ function createTheme(options = {}, ...args) {
|
|
8902
8741
|
transitions: transitionsInput = {},
|
8903
8742
|
typography: typographyInput = {}
|
8904
8743
|
} = options,
|
8905
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
8744
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$f);
|
8906
8745
|
if (options.vars) {
|
8907
8746
|
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
|
8908
8747
|
Please use another name.` : formatMuiErrorMessage(18));
|
@@ -8964,7 +8803,7 @@ const defaultTheme$1 = createTheme();
|
|
8964
8803
|
var defaultTheme$2 = defaultTheme$1;
|
8965
8804
|
|
8966
8805
|
function useTheme() {
|
8967
|
-
const theme = useTheme$
|
8806
|
+
const theme = useTheme$1(defaultTheme$2);
|
8968
8807
|
if (process.env.NODE_ENV !== 'production') {
|
8969
8808
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
8970
8809
|
React.useDebugValue(theme);
|
@@ -8992,29 +8831,6 @@ const styled = createStyled({
|
|
8992
8831
|
});
|
8993
8832
|
var styled$1 = styled;
|
8994
8833
|
|
8995
|
-
const _excluded$l = ["theme"];
|
8996
|
-
function ThemeProvider(_ref) {
|
8997
|
-
let {
|
8998
|
-
theme: themeInput
|
8999
|
-
} = _ref,
|
9000
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
|
9001
|
-
const scopedTheme = themeInput[THEME_ID];
|
9002
|
-
return /*#__PURE__*/jsx(ThemeProvider$1, _extends({}, props, {
|
9003
|
-
themeId: scopedTheme ? THEME_ID : undefined,
|
9004
|
-
theme: scopedTheme || themeInput
|
9005
|
-
}));
|
9006
|
-
}
|
9007
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
|
9008
|
-
/**
|
9009
|
-
* Your component tree.
|
9010
|
-
*/
|
9011
|
-
children: PropTypes.node,
|
9012
|
-
/**
|
9013
|
-
* A theme object. You can provide a function to extend the outer theme.
|
9014
|
-
*/
|
9015
|
-
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
|
9016
|
-
} : void 0;
|
9017
|
-
|
9018
8834
|
// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
|
9019
8835
|
const getOverlayAlpha = elevation => {
|
9020
8836
|
let alphaValue;
|
@@ -9193,7 +9009,7 @@ function mergeSlotProps(parameters) {
|
|
9193
9009
|
};
|
9194
9010
|
}
|
9195
9011
|
|
9196
|
-
const _excluded$
|
9012
|
+
const _excluded$e = ["elementType", "externalSlotProps", "ownerState"];
|
9197
9013
|
/**
|
9198
9014
|
* @ignore - do not document.
|
9199
9015
|
* Builds the props to be passed into the slot of an unstyled component.
|
@@ -9209,7 +9025,7 @@ function useSlotProps(parameters) {
|
|
9209
9025
|
externalSlotProps,
|
9210
9026
|
ownerState
|
9211
9027
|
} = parameters,
|
9212
|
-
rest = _objectWithoutPropertiesLoose(parameters, _excluded$
|
9028
|
+
rest = _objectWithoutPropertiesLoose(parameters, _excluded$e);
|
9213
9029
|
const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
|
9214
9030
|
const {
|
9215
9031
|
props: mergedProps,
|
@@ -9847,8 +9663,8 @@ function getModalUtilityClass(slot) {
|
|
9847
9663
|
}
|
9848
9664
|
generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
|
9849
9665
|
|
9850
|
-
const _excluded$
|
9851
|
-
const useUtilityClasses$
|
9666
|
+
const _excluded$d = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
|
9667
|
+
const useUtilityClasses$9 = ownerState => {
|
9852
9668
|
const {
|
9853
9669
|
open,
|
9854
9670
|
exited
|
@@ -9916,7 +9732,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
|
|
9916
9732
|
slotProps = {},
|
9917
9733
|
slots = {}
|
9918
9734
|
} = props,
|
9919
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
9735
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$d);
|
9920
9736
|
// TODO: `modal`` must change its type in this file to match the type of methods
|
9921
9737
|
// provided by `ModalManager`
|
9922
9738
|
const manager = managerProp;
|
@@ -9991,7 +9807,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
|
|
9991
9807
|
hideBackdrop,
|
9992
9808
|
keepMounted
|
9993
9809
|
});
|
9994
|
-
const classes = useUtilityClasses$
|
9810
|
+
const classes = useUtilityClasses$9(ownerState);
|
9995
9811
|
const handleEnter = () => {
|
9996
9812
|
setExited(false);
|
9997
9813
|
if (onTransitionEnter) {
|
@@ -10211,8 +10027,8 @@ function getSvgIconUtilityClass(slot) {
|
|
10211
10027
|
}
|
10212
10028
|
generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
|
10213
10029
|
|
10214
|
-
const _excluded$
|
10215
|
-
const useUtilityClasses$
|
10030
|
+
const _excluded$c = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
|
10031
|
+
const useUtilityClasses$8 = ownerState => {
|
10216
10032
|
const {
|
10217
10033
|
color,
|
10218
10034
|
fontSize,
|
@@ -10277,7 +10093,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
|
10277
10093
|
titleAccess,
|
10278
10094
|
viewBox = '0 0 24 24'
|
10279
10095
|
} = props,
|
10280
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
10096
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$c);
|
10281
10097
|
const ownerState = _extends({}, props, {
|
10282
10098
|
color,
|
10283
10099
|
component,
|
@@ -10290,7 +10106,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
|
10290
10106
|
if (!inheritViewBox) {
|
10291
10107
|
more.viewBox = viewBox;
|
10292
10108
|
}
|
10293
|
-
const classes = useUtilityClasses$
|
10109
|
+
const classes = useUtilityClasses$8(ownerState);
|
10294
10110
|
return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
|
10295
10111
|
as: component,
|
10296
10112
|
className: clsx(classes.root, className),
|
@@ -10432,22 +10248,10 @@ var utils = /*#__PURE__*/Object.freeze({
|
|
10432
10248
|
useIsFocusVisible: useIsFocusVisible
|
10433
10249
|
});
|
10434
10250
|
|
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
|
-
|
10443
10251
|
var CheckCircleRounded = createSvgIcon$1( /*#__PURE__*/jsx("path", {
|
10444
10252
|
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"
|
10445
10253
|
}), 'CheckCircleRounded');
|
10446
10254
|
|
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
|
-
|
10451
10255
|
var ErrorRounded = createSvgIcon$1( /*#__PURE__*/jsx("path", {
|
10452
10256
|
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"
|
10453
10257
|
}), 'ErrorRounded');
|
@@ -10595,64 +10399,13 @@ const components = {
|
|
10595
10399
|
}
|
10596
10400
|
}
|
10597
10401
|
},
|
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
|
-
}],
|
10621
|
-
defaultProps: {
|
10622
|
-
size: "small"
|
10623
|
-
}
|
10624
|
-
},
|
10625
10402
|
MuiChip: {
|
10626
|
-
|
10627
|
-
|
10628
|
-
|
10629
|
-
},
|
10630
|
-
style: {
|
10631
|
-
height: 16
|
10632
|
-
}
|
10633
|
-
}],
|
10403
|
+
defaultProps: {
|
10404
|
+
size: 'small'
|
10405
|
+
},
|
10634
10406
|
styleOverrides: {
|
10635
|
-
sizeSmall: {
|
10636
|
-
height: 24
|
10637
|
-
},
|
10638
|
-
sizeMedium: {
|
10639
|
-
height: 30
|
10640
|
-
},
|
10641
10407
|
root: {
|
10642
|
-
|
10643
|
-
borderRadius: 4,
|
10644
|
-
".MuiChip-deleteIconXsmall": {
|
10645
|
-
height: 12,
|
10646
|
-
width: 12
|
10647
|
-
},
|
10648
|
-
".MuiChip-deleteIconSmall": {
|
10649
|
-
height: 16,
|
10650
|
-
widht: 16
|
10651
|
-
},
|
10652
|
-
".MuiChip-deleteIconMedium": {
|
10653
|
-
height: 20,
|
10654
|
-
widht: 20
|
10655
|
-
}
|
10408
|
+
borderRadius: 4
|
10656
10409
|
}
|
10657
10410
|
}
|
10658
10411
|
},
|
@@ -10675,39 +10428,25 @@ const components = {
|
|
10675
10428
|
}
|
10676
10429
|
},
|
10677
10430
|
MuiButton: {
|
10431
|
+
defaultProps: {
|
10432
|
+
size: 'medium'
|
10433
|
+
},
|
10678
10434
|
styleOverrides: {
|
10679
|
-
|
10680
|
-
|
10681
|
-
},
|
10682
|
-
iconSizeSmall: {
|
10683
|
-
height: 14,
|
10684
|
-
width: 14
|
10685
|
-
},
|
10686
|
-
iconSizeMedium: {
|
10687
|
-
height: 18,
|
10688
|
-
width: 18
|
10689
|
-
},
|
10690
|
-
iconSizeLarge: {
|
10691
|
-
height: 18,
|
10692
|
-
width: 22
|
10435
|
+
fullWidth: {
|
10436
|
+
width: '100%'
|
10693
10437
|
},
|
10694
10438
|
sizeSmall: {
|
10695
|
-
|
10439
|
+
padding: '4px 10px'
|
10696
10440
|
},
|
10697
10441
|
sizeMedium: {
|
10698
|
-
|
10699
|
-
".MuiSvgIcon-fontSizeMedium": {
|
10700
|
-
height: 18,
|
10701
|
-
width: 18
|
10702
|
-
}
|
10442
|
+
padding: '7.5px 15px'
|
10703
10443
|
},
|
10704
10444
|
sizeLarge: {
|
10705
|
-
|
10706
|
-
fontSize: 14
|
10707
|
-
|
10708
|
-
|
10709
|
-
|
10710
|
-
}
|
10445
|
+
padding: '10.5px 22px',
|
10446
|
+
fontSize: 14
|
10447
|
+
},
|
10448
|
+
root: {
|
10449
|
+
width: "fit-content"
|
10711
10450
|
}
|
10712
10451
|
}
|
10713
10452
|
},
|
@@ -10716,6 +10455,11 @@ const components = {
|
|
10716
10455
|
size: "small"
|
10717
10456
|
}
|
10718
10457
|
},
|
10458
|
+
MuiCheckbox: {
|
10459
|
+
defaultProps: {
|
10460
|
+
size: "small"
|
10461
|
+
}
|
10462
|
+
},
|
10719
10463
|
MuiFab: {
|
10720
10464
|
defaultProps: {
|
10721
10465
|
size: "small"
|
@@ -10923,21 +10667,6 @@ const components = {
|
|
10923
10667
|
}
|
10924
10668
|
},
|
10925
10669
|
MuiRadio: {
|
10926
|
-
variants: [{
|
10927
|
-
props: {
|
10928
|
-
size: "small"
|
10929
|
-
},
|
10930
|
-
style: {
|
10931
|
-
padding: 2
|
10932
|
-
}
|
10933
|
-
}, {
|
10934
|
-
props: {
|
10935
|
-
size: "medium"
|
10936
|
-
},
|
10937
|
-
style: {
|
10938
|
-
padding: 9
|
10939
|
-
}
|
10940
|
-
}],
|
10941
10670
|
defaultProps: {
|
10942
10671
|
size: "small"
|
10943
10672
|
}
|
@@ -10972,105 +10701,44 @@ const components = {
|
|
10972
10701
|
|
10973
10702
|
const palette = {
|
10974
10703
|
primary: {
|
10975
|
-
|
10976
|
-
|
10977
|
-
|
10978
|
-
300: "#6392BD",
|
10979
|
-
light: "417AAE",
|
10980
|
-
main: "#2063A0",
|
10981
|
-
600: "#1C5B98",
|
10982
|
-
700: "#18518E",
|
10983
|
-
800: "#134784",
|
10984
|
-
dark: "#0B3573",
|
10985
|
-
A100: "#A5C5FF",
|
10986
|
-
A200: "#72A4FF",
|
10987
|
-
A400: "#3F83FF",
|
10988
|
-
A700: "#2572FF",
|
10704
|
+
main: "#1e62a1",
|
10705
|
+
light: "#5a8fd3",
|
10706
|
+
dark: "#003972",
|
10989
10707
|
contrastText: "#ffffff"
|
10990
10708
|
},
|
10991
10709
|
secondary: {
|
10992
|
-
|
10993
|
-
|
10994
|
-
|
10995
|
-
300: "#4DD0E1",
|
10996
|
-
light: "#26C6DA",
|
10997
|
-
main: "#00BCD4",
|
10998
|
-
600: "#00B6CF",
|
10999
|
-
700: "#00ADC9",
|
11000
|
-
800: "#00A5C3",
|
11001
|
-
dark: "#0097B9",
|
11002
|
-
A100: "#E2F9FF",
|
11003
|
-
A200: "#AFEEFF",
|
11004
|
-
A400: "#7CE3FF",
|
11005
|
-
A700: "#63DDFF",
|
10710
|
+
main: "#0CBBE2",
|
10711
|
+
light: "#67eeff",
|
10712
|
+
dark: "#008bb0",
|
11006
10713
|
contrastText: "#ffffff"
|
11007
10714
|
},
|
10715
|
+
text: {
|
10716
|
+
primary: "#101840de",
|
10717
|
+
secondary: "#10184099",
|
10718
|
+
disabled: "#10184061"
|
10719
|
+
},
|
11008
10720
|
error: {
|
11009
|
-
50: "#F9E8E8",
|
11010
|
-
100: "#F1C7C7",
|
11011
|
-
200: "#E8A1A1",
|
11012
|
-
300: "#DF7B7B",
|
11013
|
-
light: "#D85F5F",
|
11014
10721
|
main: "#D14343",
|
11015
|
-
|
11016
|
-
|
11017
|
-
800: "#C02C2C",
|
11018
|
-
dark: "#B51E1E",
|
11019
|
-
A100: "#FFECEC",
|
11020
|
-
A200: "#FFB9B9",
|
11021
|
-
A400: "#FF8686",
|
11022
|
-
A700: "#FF6D6D",
|
10722
|
+
light: "#d85f5f",
|
10723
|
+
dark: "#b51e1e",
|
11023
10724
|
contrastText: "#ffffff"
|
11024
10725
|
},
|
11025
10726
|
warning: {
|
11026
|
-
|
11027
|
-
|
11028
|
-
|
11029
|
-
300: "#FCAA4D",
|
11030
|
-
light: "#FC9726",
|
11031
|
-
main: "#FB8500",
|
11032
|
-
600: "#FA7D00",
|
11033
|
-
700: "#FA7200",
|
11034
|
-
800: "#F96800",
|
11035
|
-
dark: "#F85500",
|
11036
|
-
A100: "#FFFFFF",
|
11037
|
-
A200: "#FFF1EB",
|
11038
|
-
A400: "#FFCCB8",
|
11039
|
-
A700: "#FFBA9F",
|
10727
|
+
main: "#fb8500",
|
10728
|
+
light: "#fc9726",
|
10729
|
+
dark: "#f85500",
|
11040
10730
|
contrastText: "#ffffff"
|
11041
10731
|
},
|
11042
10732
|
info: {
|
11043
|
-
|
11044
|
-
|
11045
|
-
|
11046
|
-
300: "#6CBCD6",
|
11047
|
-
light: "#4DADCE",
|
11048
|
-
main: "#2D9FC5",
|
11049
|
-
600: "#2897BF",
|
11050
|
-
700: "#228DB8",
|
11051
|
-
800: "#1C83B0",
|
11052
|
-
dark: "#1172A3",
|
11053
|
-
A100: "#D4EFFF",
|
11054
|
-
A200: "#A1DCFF",
|
11055
|
-
A400: "#6ECAFF",
|
11056
|
-
A700: "#54C1FF",
|
10733
|
+
main: "#2d9fc5",
|
10734
|
+
light: "#4dadce",
|
10735
|
+
dark: "#1172a3",
|
11057
10736
|
contrastText: "#ffffff"
|
11058
10737
|
},
|
11059
10738
|
success: {
|
11060
|
-
|
11061
|
-
|
11062
|
-
|
11063
|
-
300: "#B1D975",
|
11064
|
-
light: "#A0D158",
|
11065
|
-
main: "#8FC93A",
|
11066
|
-
600: "#87C334",
|
11067
|
-
700: "#7CBC2C",
|
11068
|
-
800: "#72B525",
|
11069
|
-
dark: "#60A918",
|
11070
|
-
A100: "#EDFFDE",
|
11071
|
-
A200: "#D2FFAB",
|
11072
|
-
A400: "#B6FF78",
|
11073
|
-
A700: "#A9FF5E",
|
10739
|
+
main: "#8fc93a",
|
10740
|
+
dark: "#60a918",
|
10741
|
+
light: "#a0d158",
|
11074
10742
|
contrastText: "#ffffff"
|
11075
10743
|
},
|
11076
10744
|
grey: {
|
@@ -11089,11 +10757,6 @@ const palette = {
|
|
11089
10757
|
A400: "#696F8C",
|
11090
10758
|
A700: "#101840"
|
11091
10759
|
},
|
11092
|
-
text: {
|
11093
|
-
primary: "#101840de",
|
11094
|
-
secondary: "#10184099",
|
11095
|
-
disabled: "#10184061"
|
11096
|
-
},
|
11097
10760
|
action: {
|
11098
10761
|
active: "rgba(16, 24, 64, 0.54)",
|
11099
10762
|
hover: "rgba(16, 24, 64, 0.04)",
|
@@ -11134,18 +10797,8 @@ const mixins = {
|
|
11134
10797
|
|
11135
10798
|
const typography = {
|
11136
10799
|
fontSize: 13,
|
11137
|
-
body3: {
|
11138
|
-
fontFamily: 'Roboto',
|
11139
|
-
fontWeight: 310,
|
11140
|
-
fontSize: 12,
|
11141
|
-
letterSpacing: 0.17,
|
11142
|
-
lineHeight: 1.2,
|
11143
|
-
[breakpoints.down('md')]: {
|
11144
|
-
fontSize: 11
|
11145
|
-
}
|
11146
|
-
},
|
11147
10800
|
body1: {
|
11148
|
-
fontFamily:
|
10801
|
+
fontFamily: "Roboto",
|
11149
10802
|
fontSize: 14,
|
11150
10803
|
fontWeight: 400,
|
11151
10804
|
letterSpacing: 0.15,
|
@@ -11155,7 +10808,7 @@ const typography = {
|
|
11155
10808
|
}
|
11156
10809
|
},
|
11157
10810
|
body2: {
|
11158
|
-
fontFamily:
|
10811
|
+
fontFamily: "Roboto",
|
11159
10812
|
fontSize: 13,
|
11160
10813
|
fontWeight: 400,
|
11161
10814
|
letterSpacing: 0.17,
|
@@ -11165,7 +10818,7 @@ const typography = {
|
|
11165
10818
|
}
|
11166
10819
|
},
|
11167
10820
|
subtitle1: {
|
11168
|
-
fontFamily:
|
10821
|
+
fontFamily: "Roboto",
|
11169
10822
|
fontSize: 14,
|
11170
10823
|
fontWeight: 500,
|
11171
10824
|
letterSpacing: 0.15,
|
@@ -11175,7 +10828,7 @@ const typography = {
|
|
11175
10828
|
}
|
11176
10829
|
},
|
11177
10830
|
subtitle2: {
|
11178
|
-
fontFamily:
|
10831
|
+
fontFamily: "Roboto",
|
11179
10832
|
fontSize: 13,
|
11180
10833
|
fontWeight: 500,
|
11181
10834
|
letterSpacing: 0.1,
|
@@ -11185,7 +10838,7 @@ const typography = {
|
|
11185
10838
|
}
|
11186
10839
|
},
|
11187
10840
|
caption: {
|
11188
|
-
fontFamily:
|
10841
|
+
fontFamily: "Roboto",
|
11189
10842
|
fontSize: 11,
|
11190
10843
|
fontWeight: 400,
|
11191
10844
|
letterSpacing: 0.4,
|
@@ -11195,7 +10848,7 @@ const typography = {
|
|
11195
10848
|
}
|
11196
10849
|
},
|
11197
10850
|
overline: {
|
11198
|
-
fontFamily:
|
10851
|
+
fontFamily: "Roboto",
|
11199
10852
|
fontSize: 11,
|
11200
10853
|
fontWeight: 400,
|
11201
10854
|
letterSpacing: 1,
|
@@ -11205,7 +10858,7 @@ const typography = {
|
|
11205
10858
|
}
|
11206
10859
|
},
|
11207
10860
|
h6: {
|
11208
|
-
fontFamily:
|
10861
|
+
fontFamily: "Nunito",
|
11209
10862
|
fontSize: 16,
|
11210
10863
|
fontWeight: 600,
|
11211
10864
|
lineHeight: 1.6,
|
@@ -11214,44 +10867,44 @@ const typography = {
|
|
11214
10867
|
}
|
11215
10868
|
},
|
11216
10869
|
h5: {
|
11217
|
-
fontFamily:
|
10870
|
+
fontFamily: "Nunito",
|
11218
10871
|
fontSize: 18,
|
11219
10872
|
fontWeight: 600,
|
11220
10873
|
lineHeight: 1.8
|
11221
10874
|
},
|
11222
10875
|
h4: {
|
11223
|
-
fontFamily:
|
10876
|
+
fontFamily: "Nunito",
|
11224
10877
|
fontSize: 20,
|
11225
10878
|
fontWeight: 600,
|
11226
10879
|
letterSpacing: 0.25,
|
11227
10880
|
lineHeight: 1
|
11228
10881
|
},
|
11229
10882
|
h3: {
|
11230
|
-
fontFamily:
|
10883
|
+
fontFamily: "Nunito",
|
11231
10884
|
fontSize: 28,
|
11232
10885
|
fontWeight: 500,
|
11233
10886
|
lineHeight: 1.2
|
11234
10887
|
},
|
11235
10888
|
h2: {
|
11236
|
-
fontFamily:
|
10889
|
+
fontFamily: "Nunito",
|
11237
10890
|
fontSize: 32,
|
11238
10891
|
fontWeight: 400,
|
11239
10892
|
letterSpacing: -0.5,
|
11240
10893
|
lineHeight: 1.2
|
11241
10894
|
},
|
11242
10895
|
h1: {
|
11243
|
-
fontFamily:
|
10896
|
+
fontFamily: "Nunito",
|
11244
10897
|
fontSize: 40,
|
11245
10898
|
fontWeight: 300,
|
11246
10899
|
letterSpacing: -1.5,
|
11247
10900
|
lineHeight: 1.4
|
11248
10901
|
},
|
11249
10902
|
button: {
|
11250
|
-
fontFamily:
|
11251
|
-
textTransform:
|
10903
|
+
fontFamily: "Roboto",
|
10904
|
+
textTransform: "unset",
|
11252
10905
|
fontWeightLight: 300,
|
11253
10906
|
fontSize: 13,
|
11254
|
-
lineHeight:
|
10907
|
+
lineHeight: "normal",
|
11255
10908
|
'@media(max-width: 885px)': {
|
11256
10909
|
fontSize: 14
|
11257
10910
|
}
|
@@ -11267,7 +10920,20 @@ const themeOptions = {
|
|
11267
10920
|
breakpoints
|
11268
10921
|
};
|
11269
10922
|
|
11270
|
-
const SincoTheme = createTheme(Object.assign({}, themeOptions
|
10923
|
+
const SincoTheme = createTheme(Object.assign({}, themeOptions, {
|
10924
|
+
typography: {
|
10925
|
+
body3: {
|
10926
|
+
fontFamily: "Roboto",
|
10927
|
+
fontWeight: 310,
|
10928
|
+
fontSize: 12,
|
10929
|
+
letterSpacing: 0.17,
|
10930
|
+
lineHeight: 1.2,
|
10931
|
+
[breakpoints.down("md")]: {
|
10932
|
+
fontSize: 11
|
10933
|
+
}
|
10934
|
+
}
|
10935
|
+
}
|
10936
|
+
}));
|
11271
10937
|
|
11272
10938
|
var wellKnownSymbol$d = wellKnownSymbol$f;
|
11273
10939
|
|
@@ -12785,8 +12451,8 @@ function getPaperUtilityClass(slot) {
|
|
12785
12451
|
}
|
12786
12452
|
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']);
|
12787
12453
|
|
12788
|
-
const _excluded$
|
12789
|
-
const useUtilityClasses$
|
12454
|
+
const _excluded$b = ["className", "component", "elevation", "square", "variant"];
|
12455
|
+
const useUtilityClasses$7 = ownerState => {
|
12790
12456
|
const {
|
12791
12457
|
square,
|
12792
12458
|
elevation,
|
@@ -12840,14 +12506,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
|
|
12840
12506
|
square = false,
|
12841
12507
|
variant = 'elevation'
|
12842
12508
|
} = props,
|
12843
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
12509
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$b);
|
12844
12510
|
const ownerState = _extends({}, props, {
|
12845
12511
|
component,
|
12846
12512
|
elevation,
|
12847
12513
|
square,
|
12848
12514
|
variant
|
12849
12515
|
});
|
12850
|
-
const classes = useUtilityClasses$
|
12516
|
+
const classes = useUtilityClasses$7(ownerState);
|
12851
12517
|
if (process.env.NODE_ENV !== 'production') {
|
12852
12518
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
12853
12519
|
const theme = useTheme();
|
@@ -12998,15 +12664,15 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
|
|
12998
12664
|
const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
|
12999
12665
|
var touchRippleClasses$1 = touchRippleClasses;
|
13000
12666
|
|
13001
|
-
const _excluded$
|
13002
|
-
let _
|
13003
|
-
_t
|
13004
|
-
_t2
|
13005
|
-
_t3
|
13006
|
-
_t4
|
12667
|
+
const _excluded$a = ["center", "classes", "className"];
|
12668
|
+
let _ = t => t,
|
12669
|
+
_t,
|
12670
|
+
_t2,
|
12671
|
+
_t3,
|
12672
|
+
_t4;
|
13007
12673
|
const DURATION = 550;
|
13008
12674
|
const DELAY_RIPPLE = 80;
|
13009
|
-
const enterKeyframe = keyframes(_t
|
12675
|
+
const enterKeyframe = keyframes(_t || (_t = _`
|
13010
12676
|
0% {
|
13011
12677
|
transform: scale(0);
|
13012
12678
|
opacity: 0.1;
|
@@ -13017,7 +12683,7 @@ const enterKeyframe = keyframes(_t$1 || (_t$1 = _$1`
|
|
13017
12683
|
opacity: 0.3;
|
13018
12684
|
}
|
13019
12685
|
`));
|
13020
|
-
const exitKeyframe = keyframes(_t2
|
12686
|
+
const exitKeyframe = keyframes(_t2 || (_t2 = _`
|
13021
12687
|
0% {
|
13022
12688
|
opacity: 1;
|
13023
12689
|
}
|
@@ -13026,7 +12692,7 @@ const exitKeyframe = keyframes(_t2$1 || (_t2$1 = _$1`
|
|
13026
12692
|
opacity: 0;
|
13027
12693
|
}
|
13028
12694
|
`));
|
13029
|
-
const pulsateKeyframe = keyframes(_t3
|
12695
|
+
const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
|
13030
12696
|
0% {
|
13031
12697
|
transform: scale(1);
|
13032
12698
|
}
|
@@ -13059,7 +12725,7 @@ const TouchRippleRoot = styled$1('span', {
|
|
13059
12725
|
const TouchRippleRipple = styled$1(Ripple, {
|
13060
12726
|
name: 'MuiTouchRipple',
|
13061
12727
|
slot: 'Ripple'
|
13062
|
-
})(_t4
|
12728
|
+
})(_t4 || (_t4 = _`
|
13063
12729
|
opacity: 0;
|
13064
12730
|
position: absolute;
|
13065
12731
|
|
@@ -13127,7 +12793,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
|
|
13127
12793
|
classes = {},
|
13128
12794
|
className
|
13129
12795
|
} = props,
|
13130
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
12796
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$a);
|
13131
12797
|
const [ripples, setRipples] = React.useState([]);
|
13132
12798
|
const nextKey = React.useRef(0);
|
13133
12799
|
const rippleCallback = React.useRef(null);
|
@@ -13328,8 +12994,8 @@ function getButtonBaseUtilityClass(slot) {
|
|
13328
12994
|
const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
|
13329
12995
|
var buttonBaseClasses$1 = buttonBaseClasses;
|
13330
12996
|
|
13331
|
-
const _excluded$
|
13332
|
-
const useUtilityClasses$
|
12997
|
+
const _excluded$9 = ["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"];
|
12998
|
+
const useUtilityClasses$6 = ownerState => {
|
13333
12999
|
const {
|
13334
13000
|
disabled,
|
13335
13001
|
focusVisible,
|
@@ -13430,7 +13096,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
|
|
13430
13096
|
touchRippleRef,
|
13431
13097
|
type
|
13432
13098
|
} = props,
|
13433
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
13099
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$9);
|
13434
13100
|
const buttonRef = React.useRef(null);
|
13435
13101
|
const rippleRef = React.useRef(null);
|
13436
13102
|
const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
|
@@ -13597,7 +13263,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
|
|
13597
13263
|
tabIndex,
|
13598
13264
|
focusVisible
|
13599
13265
|
});
|
13600
|
-
const classes = useUtilityClasses$
|
13266
|
+
const classes = useUtilityClasses$6(ownerState);
|
13601
13267
|
return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
|
13602
13268
|
as: ComponentProp,
|
13603
13269
|
className: clsx(classes.root, className),
|
@@ -13794,8 +13460,8 @@ function getIconButtonUtilityClass(slot) {
|
|
13794
13460
|
const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
|
13795
13461
|
var iconButtonClasses$1 = iconButtonClasses;
|
13796
13462
|
|
13797
|
-
const _excluded$
|
13798
|
-
const useUtilityClasses$
|
13463
|
+
const _excluded$8 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
|
13464
|
+
const useUtilityClasses$5 = ownerState => {
|
13799
13465
|
const {
|
13800
13466
|
classes,
|
13801
13467
|
disabled,
|
@@ -13895,7 +13561,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
|
|
13895
13561
|
disableFocusRipple = false,
|
13896
13562
|
size = 'medium'
|
13897
13563
|
} = props,
|
13898
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
13564
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$8);
|
13899
13565
|
const ownerState = _extends({}, props, {
|
13900
13566
|
edge,
|
13901
13567
|
color,
|
@@ -13903,7 +13569,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
|
|
13903
13569
|
disableFocusRipple,
|
13904
13570
|
size
|
13905
13571
|
});
|
13906
|
-
const classes = useUtilityClasses$
|
13572
|
+
const classes = useUtilityClasses$5(ownerState);
|
13907
13573
|
return /*#__PURE__*/jsx(IconButtonRoot, _extends({
|
13908
13574
|
className: clsx(classes.root, className),
|
13909
13575
|
centerRipple: true,
|
@@ -13989,8 +13655,8 @@ function getTypographyUtilityClass(slot) {
|
|
13989
13655
|
}
|
13990
13656
|
generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
|
13991
13657
|
|
13992
|
-
const _excluded$
|
13993
|
-
const useUtilityClasses$
|
13658
|
+
const _excluded$7 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
|
13659
|
+
const useUtilityClasses$4 = ownerState => {
|
13994
13660
|
const {
|
13995
13661
|
align,
|
13996
13662
|
gutterBottom,
|
@@ -14044,22 +13710,22 @@ const defaultVariantMapping = {
|
|
14044
13710
|
};
|
14045
13711
|
|
14046
13712
|
// TODO v6: deprecate these color values in v5.x and remove the transformation in v6
|
14047
|
-
const colorTransformations
|
13713
|
+
const colorTransformations = {
|
14048
13714
|
primary: 'primary.main',
|
14049
13715
|
textPrimary: 'text.primary',
|
14050
13716
|
secondary: 'secondary.main',
|
14051
13717
|
textSecondary: 'text.secondary',
|
14052
13718
|
error: 'error.main'
|
14053
13719
|
};
|
14054
|
-
const transformDeprecatedColors
|
14055
|
-
return colorTransformations
|
13720
|
+
const transformDeprecatedColors = color => {
|
13721
|
+
return colorTransformations[color] || color;
|
14056
13722
|
};
|
14057
13723
|
const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
|
14058
13724
|
const themeProps = useThemeProps({
|
14059
13725
|
props: inProps,
|
14060
13726
|
name: 'MuiTypography'
|
14061
13727
|
});
|
14062
|
-
const color = transformDeprecatedColors
|
13728
|
+
const color = transformDeprecatedColors(themeProps.color);
|
14063
13729
|
const props = extendSxProp(_extends({}, themeProps, {
|
14064
13730
|
color
|
14065
13731
|
}));
|
@@ -14073,7 +13739,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
|
|
14073
13739
|
variant = 'body1',
|
14074
13740
|
variantMapping = defaultVariantMapping
|
14075
13741
|
} = props,
|
14076
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
13742
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$7);
|
14077
13743
|
const ownerState = _extends({}, props, {
|
14078
13744
|
align,
|
14079
13745
|
color,
|
@@ -14086,7 +13752,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
|
|
14086
13752
|
variantMapping
|
14087
13753
|
});
|
14088
13754
|
const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
|
14089
|
-
const classes = useUtilityClasses$
|
13755
|
+
const classes = useUtilityClasses$4(ownerState);
|
14090
13756
|
return /*#__PURE__*/jsx(TypographyRoot, _extends({
|
14091
13757
|
as: Component,
|
14092
13758
|
ref: ref,
|
@@ -14171,7 +13837,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
|
|
14171
13837
|
} : void 0;
|
14172
13838
|
var Typography$1 = Typography;
|
14173
13839
|
|
14174
|
-
const _excluded$
|
13840
|
+
const _excluded$6 = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
|
14175
13841
|
const styles = {
|
14176
13842
|
entering: {
|
14177
13843
|
opacity: 1
|
@@ -14208,7 +13874,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
|
|
14208
13874
|
// eslint-disable-next-line react/prop-types
|
14209
13875
|
TransitionComponent = Transition$1
|
14210
13876
|
} = props,
|
14211
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
13877
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$6);
|
14212
13878
|
const nodeRef = React.useRef(null);
|
14213
13879
|
const handleRef = useForkRef(nodeRef, children.ref, ref);
|
14214
13880
|
const normalizedTransitionCallback = callback => maybeIsAppearing => {
|
@@ -14369,8 +14035,8 @@ function getBackdropUtilityClass(slot) {
|
|
14369
14035
|
}
|
14370
14036
|
generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
|
14371
14037
|
|
14372
|
-
const _excluded$
|
14373
|
-
const useUtilityClasses$
|
14038
|
+
const _excluded$5 = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
|
14039
|
+
const useUtilityClasses$3 = ownerState => {
|
14374
14040
|
const {
|
14375
14041
|
classes,
|
14376
14042
|
invisible
|
@@ -14424,12 +14090,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
|
|
14424
14090
|
TransitionComponent = Fade$1,
|
14425
14091
|
transitionDuration
|
14426
14092
|
} = props,
|
14427
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14093
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$5);
|
14428
14094
|
const ownerState = _extends({}, props, {
|
14429
14095
|
component,
|
14430
14096
|
invisible
|
14431
14097
|
});
|
14432
|
-
const classes = useUtilityClasses$
|
14098
|
+
const classes = useUtilityClasses$3(ownerState);
|
14433
14099
|
const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
|
14434
14100
|
return /*#__PURE__*/jsx(TransitionComponent, _extends({
|
14435
14101
|
in: open,
|
@@ -14573,247 +14239,52 @@ process.env.NODE_ENV !== "production" ? Box$1.propTypes /* remove-proptypes */ =
|
|
14573
14239
|
} : void 0;
|
14574
14240
|
var Box$2 = Box$1;
|
14575
14241
|
|
14576
|
-
|
14577
|
-
|
14578
|
-
}), 'MoreHoriz');
|
14579
|
-
|
14580
|
-
const _excluded$a = ["slots", "slotProps"];
|
14581
|
-
const BreadcrumbCollapsedButton = styled$1(ButtonBase$1)(({
|
14582
|
-
theme
|
14583
|
-
}) => _extends({
|
14584
|
-
display: 'flex',
|
14585
|
-
marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
|
14586
|
-
marginRight: `calc(${theme.spacing(1)} * 0.5)`
|
14587
|
-
}, theme.palette.mode === 'light' ? {
|
14588
|
-
backgroundColor: theme.palette.grey[100],
|
14589
|
-
color: theme.palette.grey[700]
|
14590
|
-
} : {
|
14591
|
-
backgroundColor: theme.palette.grey[700],
|
14592
|
-
color: theme.palette.grey[100]
|
14593
|
-
}, {
|
14594
|
-
borderRadius: 2,
|
14595
|
-
'&:hover, &:focus': _extends({}, theme.palette.mode === 'light' ? {
|
14596
|
-
backgroundColor: theme.palette.grey[200]
|
14597
|
-
} : {
|
14598
|
-
backgroundColor: theme.palette.grey[600]
|
14599
|
-
}),
|
14600
|
-
'&:active': _extends({
|
14601
|
-
boxShadow: theme.shadows[0]
|
14602
|
-
}, theme.palette.mode === 'light' ? {
|
14603
|
-
backgroundColor: emphasize(theme.palette.grey[200], 0.12)
|
14604
|
-
} : {
|
14605
|
-
backgroundColor: emphasize(theme.palette.grey[600], 0.12)
|
14606
|
-
})
|
14607
|
-
}));
|
14608
|
-
const BreadcrumbCollapsedIcon = styled$1(MoreHorizIcon)({
|
14609
|
-
width: 24,
|
14610
|
-
height: 16
|
14611
|
-
});
|
14612
|
-
|
14613
|
-
/**
|
14614
|
-
* @ignore - internal component.
|
14615
|
-
*/
|
14616
|
-
function BreadcrumbCollapsed(props) {
|
14617
|
-
const {
|
14618
|
-
slots = {},
|
14619
|
-
slotProps = {}
|
14620
|
-
} = props,
|
14621
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
|
14622
|
-
const ownerState = props;
|
14623
|
-
return /*#__PURE__*/jsx("li", {
|
14624
|
-
children: /*#__PURE__*/jsx(BreadcrumbCollapsedButton, _extends({
|
14625
|
-
focusRipple: true
|
14626
|
-
}, otherProps, {
|
14627
|
-
ownerState: ownerState,
|
14628
|
-
children: /*#__PURE__*/jsx(BreadcrumbCollapsedIcon, _extends({
|
14629
|
-
as: slots.CollapsedIcon,
|
14630
|
-
ownerState: ownerState
|
14631
|
-
}, slotProps.collapsedIcon))
|
14632
|
-
}))
|
14633
|
-
});
|
14634
|
-
}
|
14635
|
-
process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
|
14636
|
-
/**
|
14637
|
-
* The props used for the CollapsedIcon slot.
|
14638
|
-
* @default {}
|
14639
|
-
*/
|
14640
|
-
slotProps: PropTypes.shape({
|
14641
|
-
collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
14642
|
-
}),
|
14643
|
-
/**
|
14644
|
-
* The components used for each slot inside the BreadcumbCollapsed.
|
14645
|
-
* Either a string to use a HTML element or a component.
|
14646
|
-
* @default {}
|
14647
|
-
*/
|
14648
|
-
slots: PropTypes.shape({
|
14649
|
-
CollapsedIcon: PropTypes.elementType
|
14650
|
-
}),
|
14651
|
-
/**
|
14652
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
14653
|
-
*/
|
14654
|
-
sx: PropTypes.object
|
14655
|
-
} : void 0;
|
14656
|
-
|
14657
|
-
function getBreadcrumbsUtilityClass(slot) {
|
14658
|
-
return generateUtilityClass('MuiBreadcrumbs', slot);
|
14242
|
+
function getCardUtilityClass(slot) {
|
14243
|
+
return generateUtilityClass('MuiCard', slot);
|
14659
14244
|
}
|
14660
|
-
|
14661
|
-
var breadcrumbsClasses$1 = breadcrumbsClasses;
|
14245
|
+
generateUtilityClasses('MuiCard', ['root']);
|
14662
14246
|
|
14663
|
-
const _excluded$
|
14664
|
-
const useUtilityClasses$
|
14247
|
+
const _excluded$4 = ["className", "raised"];
|
14248
|
+
const useUtilityClasses$2 = ownerState => {
|
14665
14249
|
const {
|
14666
14250
|
classes
|
14667
14251
|
} = ownerState;
|
14668
14252
|
const slots = {
|
14669
|
-
root: ['root']
|
14670
|
-
li: ['li'],
|
14671
|
-
ol: ['ol'],
|
14672
|
-
separator: ['separator']
|
14253
|
+
root: ['root']
|
14673
14254
|
};
|
14674
|
-
return composeClasses(slots,
|
14255
|
+
return composeClasses(slots, getCardUtilityClass, classes);
|
14675
14256
|
};
|
14676
|
-
const
|
14677
|
-
name: '
|
14257
|
+
const CardRoot = styled$1(Paper$1, {
|
14258
|
+
name: 'MuiCard',
|
14678
14259
|
slot: 'Root',
|
14679
|
-
overridesResolver: (props, styles) =>
|
14680
|
-
|
14681
|
-
|
14682
|
-
|
14683
|
-
}
|
14684
|
-
})({});
|
14685
|
-
const BreadcrumbsOl = styled$1('ol', {
|
14686
|
-
name: 'MuiBreadcrumbs',
|
14687
|
-
slot: 'Ol',
|
14688
|
-
overridesResolver: (props, styles) => styles.ol
|
14689
|
-
})({
|
14690
|
-
display: 'flex',
|
14691
|
-
flexWrap: 'wrap',
|
14692
|
-
alignItems: 'center',
|
14693
|
-
padding: 0,
|
14694
|
-
margin: 0,
|
14695
|
-
listStyle: 'none'
|
14696
|
-
});
|
14697
|
-
const BreadcrumbsSeparator = styled$1('li', {
|
14698
|
-
name: 'MuiBreadcrumbs',
|
14699
|
-
slot: 'Separator',
|
14700
|
-
overridesResolver: (props, styles) => styles.separator
|
14701
|
-
})({
|
14702
|
-
display: 'flex',
|
14703
|
-
userSelect: 'none',
|
14704
|
-
marginLeft: 8,
|
14705
|
-
marginRight: 8
|
14260
|
+
overridesResolver: (props, styles) => styles.root
|
14261
|
+
})(() => {
|
14262
|
+
return {
|
14263
|
+
overflow: 'hidden'
|
14264
|
+
};
|
14706
14265
|
});
|
14707
|
-
function
|
14708
|
-
return items.reduce((acc, current, index) => {
|
14709
|
-
if (index < items.length - 1) {
|
14710
|
-
acc = acc.concat(current, /*#__PURE__*/jsx(BreadcrumbsSeparator, {
|
14711
|
-
"aria-hidden": true,
|
14712
|
-
className: className,
|
14713
|
-
ownerState: ownerState,
|
14714
|
-
children: separator
|
14715
|
-
}, `separator-${index}`));
|
14716
|
-
} else {
|
14717
|
-
acc.push(current);
|
14718
|
-
}
|
14719
|
-
return acc;
|
14720
|
-
}, []);
|
14721
|
-
}
|
14722
|
-
const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, ref) {
|
14266
|
+
const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
|
14723
14267
|
const props = useThemeProps({
|
14724
14268
|
props: inProps,
|
14725
|
-
name: '
|
14269
|
+
name: 'MuiCard'
|
14726
14270
|
});
|
14727
14271
|
const {
|
14728
|
-
children,
|
14729
14272
|
className,
|
14730
|
-
|
14731
|
-
slots = {},
|
14732
|
-
slotProps = {},
|
14733
|
-
expandText = 'Show path',
|
14734
|
-
itemsAfterCollapse = 1,
|
14735
|
-
itemsBeforeCollapse = 1,
|
14736
|
-
maxItems = 8,
|
14737
|
-
separator = '/'
|
14273
|
+
raised = false
|
14738
14274
|
} = props,
|
14739
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14740
|
-
const [expanded, setExpanded] = React.useState(false);
|
14275
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$4);
|
14741
14276
|
const ownerState = _extends({}, props, {
|
14742
|
-
|
14743
|
-
expanded,
|
14744
|
-
expandText,
|
14745
|
-
itemsAfterCollapse,
|
14746
|
-
itemsBeforeCollapse,
|
14747
|
-
maxItems,
|
14748
|
-
separator
|
14749
|
-
});
|
14750
|
-
const classes = useUtilityClasses$7(ownerState);
|
14751
|
-
const collapsedIconSlotProps = useSlotProps({
|
14752
|
-
elementType: slots.CollapsedIcon,
|
14753
|
-
externalSlotProps: slotProps.collapsedIcon,
|
14754
|
-
ownerState
|
14277
|
+
raised
|
14755
14278
|
});
|
14756
|
-
const
|
14757
|
-
|
14758
|
-
const handleClickExpand = () => {
|
14759
|
-
setExpanded(true);
|
14760
|
-
|
14761
|
-
// The clicked element received the focus but gets removed from the DOM.
|
14762
|
-
// Let's keep the focus in the component after expanding.
|
14763
|
-
// Moving it to the <ol> or <nav> does not cause any announcement in NVDA.
|
14764
|
-
// By moving it to some link/button at least we have some announcement.
|
14765
|
-
const focusable = listRef.current.querySelector('a[href],button,[tabindex]');
|
14766
|
-
if (focusable) {
|
14767
|
-
focusable.focus();
|
14768
|
-
}
|
14769
|
-
};
|
14770
|
-
|
14771
|
-
// This defends against someone passing weird input, to ensure that if all
|
14772
|
-
// items would be shown anyway, we just show all items without the EllipsisItem
|
14773
|
-
if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
|
14774
|
-
if (process.env.NODE_ENV !== 'production') {
|
14775
|
-
console.error(['MUI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
|
14776
|
-
}
|
14777
|
-
return allItems;
|
14778
|
-
}
|
14779
|
-
return [...allItems.slice(0, itemsBeforeCollapse), /*#__PURE__*/jsx(BreadcrumbCollapsed, {
|
14780
|
-
"aria-label": expandText,
|
14781
|
-
slots: {
|
14782
|
-
CollapsedIcon: slots.CollapsedIcon
|
14783
|
-
},
|
14784
|
-
slotProps: {
|
14785
|
-
collapsedIcon: collapsedIconSlotProps
|
14786
|
-
},
|
14787
|
-
onClick: handleClickExpand
|
14788
|
-
}, "ellipsis"), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
|
14789
|
-
};
|
14790
|
-
const allItems = React.Children.toArray(children).filter(child => {
|
14791
|
-
if (process.env.NODE_ENV !== 'production') {
|
14792
|
-
if (reactIs$2.exports.isFragment(child)) {
|
14793
|
-
console.error(["MUI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
14794
|
-
}
|
14795
|
-
}
|
14796
|
-
return /*#__PURE__*/React.isValidElement(child);
|
14797
|
-
}).map((child, index) => /*#__PURE__*/jsx("li", {
|
14798
|
-
className: classes.li,
|
14799
|
-
children: child
|
14800
|
-
}, `child-${index}`));
|
14801
|
-
return /*#__PURE__*/jsx(BreadcrumbsRoot, _extends({
|
14802
|
-
ref: ref,
|
14803
|
-
component: component,
|
14804
|
-
color: "text.secondary",
|
14279
|
+
const classes = useUtilityClasses$2(ownerState);
|
14280
|
+
return /*#__PURE__*/jsx(CardRoot, _extends({
|
14805
14281
|
className: clsx(classes.root, className),
|
14282
|
+
elevation: raised ? 8 : undefined,
|
14283
|
+
ref: ref,
|
14806
14284
|
ownerState: ownerState
|
14807
|
-
}, other
|
14808
|
-
children: /*#__PURE__*/jsx(BreadcrumbsOl, {
|
14809
|
-
className: classes.ol,
|
14810
|
-
ref: listRef,
|
14811
|
-
ownerState: ownerState,
|
14812
|
-
children: insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator, ownerState)
|
14813
|
-
})
|
14814
|
-
}));
|
14285
|
+
}, other));
|
14815
14286
|
});
|
14816
|
-
process.env.NODE_ENV !== "production" ?
|
14287
|
+
process.env.NODE_ENV !== "production" ? Card.propTypes /* remove-proptypes */ = {
|
14817
14288
|
// ----------------------------- Warning --------------------------------
|
14818
14289
|
// | These PropTypes are generated from the TypeScript type definitions |
|
14819
14290
|
// | To update them edit the d.ts file and run "yarn proptypes" |
|
@@ -14831,563 +14302,71 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptype
|
|
14831
14302
|
*/
|
14832
14303
|
className: PropTypes.string,
|
14833
14304
|
/**
|
14834
|
-
*
|
14835
|
-
*
|
14836
|
-
*/
|
14837
|
-
component: PropTypes.elementType,
|
14838
|
-
/**
|
14839
|
-
* Override the default label for the expand button.
|
14840
|
-
*
|
14841
|
-
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
|
14842
|
-
* @default 'Show path'
|
14843
|
-
*/
|
14844
|
-
expandText: PropTypes.string,
|
14845
|
-
/**
|
14846
|
-
* If max items is exceeded, the number of items to show after the ellipsis.
|
14847
|
-
* @default 1
|
14848
|
-
*/
|
14849
|
-
itemsAfterCollapse: integerPropType,
|
14850
|
-
/**
|
14851
|
-
* If max items is exceeded, the number of items to show before the ellipsis.
|
14852
|
-
* @default 1
|
14853
|
-
*/
|
14854
|
-
itemsBeforeCollapse: integerPropType,
|
14855
|
-
/**
|
14856
|
-
* Specifies the maximum number of breadcrumbs to display. When there are more
|
14857
|
-
* than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
|
14858
|
-
* will be shown, with an ellipsis in between.
|
14859
|
-
* @default 8
|
14860
|
-
*/
|
14861
|
-
maxItems: integerPropType,
|
14862
|
-
/**
|
14863
|
-
* Custom separator node.
|
14864
|
-
* @default '/'
|
14865
|
-
*/
|
14866
|
-
separator: PropTypes.node,
|
14867
|
-
/**
|
14868
|
-
* The props used for each slot inside the Breadcumb.
|
14869
|
-
* @default {}
|
14870
|
-
*/
|
14871
|
-
slotProps: PropTypes.shape({
|
14872
|
-
collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
14873
|
-
}),
|
14874
|
-
/**
|
14875
|
-
* The components used for each slot inside the Breadcumb.
|
14876
|
-
* Either a string to use a HTML element or a component.
|
14877
|
-
* @default {}
|
14305
|
+
* If `true`, the card will use raised styling.
|
14306
|
+
* @default false
|
14878
14307
|
*/
|
14879
|
-
|
14880
|
-
|
14308
|
+
raised: chainPropTypes(PropTypes.bool, props => {
|
14309
|
+
if (props.raised && props.variant === 'outlined') {
|
14310
|
+
return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
|
14311
|
+
}
|
14312
|
+
return null;
|
14881
14313
|
}),
|
14882
14314
|
/**
|
14883
14315
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
14884
14316
|
*/
|
14885
14317
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
14886
14318
|
} : void 0;
|
14887
|
-
var
|
14888
|
-
|
14889
|
-
function getButtonUtilityClass(slot) {
|
14890
|
-
return generateUtilityClass('MuiButton', slot);
|
14891
|
-
}
|
14892
|
-
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']);
|
14893
|
-
var buttonClasses$1 = buttonClasses;
|
14319
|
+
var Card$1 = Card;
|
14894
14320
|
|
14895
|
-
|
14896
|
-
|
14897
|
-
*/
|
14898
|
-
const ButtonGroupContext = /*#__PURE__*/React.createContext({});
|
14899
|
-
if (process.env.NODE_ENV !== 'production') {
|
14900
|
-
ButtonGroupContext.displayName = 'ButtonGroupContext';
|
14321
|
+
function getCardContentUtilityClass(slot) {
|
14322
|
+
return generateUtilityClass('MuiCardContent', slot);
|
14901
14323
|
}
|
14902
|
-
|
14324
|
+
generateUtilityClasses('MuiCardContent', ['root']);
|
14903
14325
|
|
14904
|
-
const _excluded$
|
14905
|
-
const useUtilityClasses$
|
14326
|
+
const _excluded$3 = ["className", "component"];
|
14327
|
+
const useUtilityClasses$1 = ownerState => {
|
14906
14328
|
const {
|
14907
|
-
color,
|
14908
|
-
disableElevation,
|
14909
|
-
fullWidth,
|
14910
|
-
size,
|
14911
|
-
variant,
|
14912
14329
|
classes
|
14913
14330
|
} = ownerState;
|
14914
14331
|
const slots = {
|
14915
|
-
root: ['root'
|
14916
|
-
label: ['label'],
|
14917
|
-
startIcon: ['startIcon', `iconSize${capitalize(size)}`],
|
14918
|
-
endIcon: ['endIcon', `iconSize${capitalize(size)}`]
|
14332
|
+
root: ['root']
|
14919
14333
|
};
|
14920
|
-
|
14921
|
-
return _extends({}, classes, composedClasses);
|
14334
|
+
return composeClasses(slots, getCardContentUtilityClass, classes);
|
14922
14335
|
};
|
14923
|
-
const
|
14924
|
-
|
14925
|
-
fontSize: 18
|
14926
|
-
}
|
14927
|
-
}, ownerState.size === 'medium' && {
|
14928
|
-
'& > *:nth-of-type(1)': {
|
14929
|
-
fontSize: 20
|
14930
|
-
}
|
14931
|
-
}, ownerState.size === 'large' && {
|
14932
|
-
'& > *:nth-of-type(1)': {
|
14933
|
-
fontSize: 22
|
14934
|
-
}
|
14935
|
-
});
|
14936
|
-
const ButtonRoot = styled$1(ButtonBase$1, {
|
14937
|
-
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
14938
|
-
name: 'MuiButton',
|
14336
|
+
const CardContentRoot = styled$1('div', {
|
14337
|
+
name: 'MuiCardContent',
|
14939
14338
|
slot: 'Root',
|
14940
|
-
overridesResolver: (props, styles) =>
|
14941
|
-
|
14942
|
-
|
14943
|
-
|
14944
|
-
|
14945
|
-
|
14946
|
-
}
|
14947
|
-
|
14948
|
-
ownerState
|
14949
|
-
}) => {
|
14950
|
-
var _theme$palette$getCon, _theme$palette;
|
14951
|
-
const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
|
14952
|
-
const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
|
14953
|
-
return _extends({}, theme.typography.button, {
|
14954
|
-
minWidth: 64,
|
14955
|
-
padding: '6px 16px',
|
14956
|
-
borderRadius: (theme.vars || theme).shape.borderRadius,
|
14957
|
-
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
|
14958
|
-
duration: theme.transitions.duration.short
|
14959
|
-
}),
|
14960
|
-
'&:hover': _extends({
|
14961
|
-
textDecoration: 'none',
|
14962
|
-
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
|
14963
|
-
// Reset on touch devices, it doesn't add specificity
|
14964
|
-
'@media (hover: none)': {
|
14965
|
-
backgroundColor: 'transparent'
|
14966
|
-
}
|
14967
|
-
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
14968
|
-
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),
|
14969
|
-
// Reset on touch devices, it doesn't add specificity
|
14970
|
-
'@media (hover: none)': {
|
14971
|
-
backgroundColor: 'transparent'
|
14972
|
-
}
|
14973
|
-
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
14974
|
-
border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
|
14975
|
-
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),
|
14976
|
-
// Reset on touch devices, it doesn't add specificity
|
14977
|
-
'@media (hover: none)': {
|
14978
|
-
backgroundColor: 'transparent'
|
14979
|
-
}
|
14980
|
-
}, ownerState.variant === 'contained' && {
|
14981
|
-
backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
|
14982
|
-
boxShadow: (theme.vars || theme).shadows[4],
|
14983
|
-
// Reset on touch devices, it doesn't add specificity
|
14984
|
-
'@media (hover: none)': {
|
14985
|
-
boxShadow: (theme.vars || theme).shadows[2],
|
14986
|
-
backgroundColor: (theme.vars || theme).palette.grey[300]
|
14987
|
-
}
|
14988
|
-
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
14989
|
-
backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
|
14990
|
-
// Reset on touch devices, it doesn't add specificity
|
14991
|
-
'@media (hover: none)': {
|
14992
|
-
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
14993
|
-
}
|
14994
|
-
}),
|
14995
|
-
'&:active': _extends({}, ownerState.variant === 'contained' && {
|
14996
|
-
boxShadow: (theme.vars || theme).shadows[8]
|
14997
|
-
}),
|
14998
|
-
[`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
|
14999
|
-
boxShadow: (theme.vars || theme).shadows[6]
|
15000
|
-
}),
|
15001
|
-
[`&.${buttonClasses$1.disabled}`]: _extends({
|
15002
|
-
color: (theme.vars || theme).palette.action.disabled
|
15003
|
-
}, ownerState.variant === 'outlined' && {
|
15004
|
-
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
|
15005
|
-
}, ownerState.variant === 'contained' && {
|
15006
|
-
color: (theme.vars || theme).palette.action.disabled,
|
15007
|
-
boxShadow: (theme.vars || theme).shadows[0],
|
15008
|
-
backgroundColor: (theme.vars || theme).palette.action.disabledBackground
|
15009
|
-
})
|
15010
|
-
}, ownerState.variant === 'text' && {
|
15011
|
-
padding: '6px 8px'
|
15012
|
-
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
15013
|
-
color: (theme.vars || theme).palette[ownerState.color].main
|
15014
|
-
}, ownerState.variant === 'outlined' && {
|
15015
|
-
padding: '5px 15px',
|
15016
|
-
border: '1px solid currentColor'
|
15017
|
-
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
15018
|
-
color: (theme.vars || theme).palette[ownerState.color].main,
|
15019
|
-
border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
|
15020
|
-
}, ownerState.variant === 'contained' && {
|
15021
|
-
color: theme.vars ?
|
15022
|
-
// this is safe because grey does not change between default light/dark mode
|
15023
|
-
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]),
|
15024
|
-
backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
|
15025
|
-
boxShadow: (theme.vars || theme).shadows[2]
|
15026
|
-
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
15027
|
-
color: (theme.vars || theme).palette[ownerState.color].contrastText,
|
15028
|
-
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
15029
|
-
}, ownerState.color === 'inherit' && {
|
15030
|
-
color: 'inherit',
|
15031
|
-
borderColor: 'currentColor'
|
15032
|
-
}, ownerState.size === 'small' && ownerState.variant === 'text' && {
|
15033
|
-
padding: '4px 5px',
|
15034
|
-
fontSize: theme.typography.pxToRem(13)
|
15035
|
-
}, ownerState.size === 'large' && ownerState.variant === 'text' && {
|
15036
|
-
padding: '8px 11px',
|
15037
|
-
fontSize: theme.typography.pxToRem(15)
|
15038
|
-
}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
|
15039
|
-
padding: '3px 9px',
|
15040
|
-
fontSize: theme.typography.pxToRem(13)
|
15041
|
-
}, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
|
15042
|
-
padding: '7px 21px',
|
15043
|
-
fontSize: theme.typography.pxToRem(15)
|
15044
|
-
}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
|
15045
|
-
padding: '4px 10px',
|
15046
|
-
fontSize: theme.typography.pxToRem(13)
|
15047
|
-
}, ownerState.size === 'large' && ownerState.variant === 'contained' && {
|
15048
|
-
padding: '8px 22px',
|
15049
|
-
fontSize: theme.typography.pxToRem(15)
|
15050
|
-
}, ownerState.fullWidth && {
|
15051
|
-
width: '100%'
|
15052
|
-
});
|
15053
|
-
}, ({
|
15054
|
-
ownerState
|
15055
|
-
}) => ownerState.disableElevation && {
|
15056
|
-
boxShadow: 'none',
|
15057
|
-
'&:hover': {
|
15058
|
-
boxShadow: 'none'
|
15059
|
-
},
|
15060
|
-
[`&.${buttonClasses$1.focusVisible}`]: {
|
15061
|
-
boxShadow: 'none'
|
15062
|
-
},
|
15063
|
-
'&:active': {
|
15064
|
-
boxShadow: 'none'
|
15065
|
-
},
|
15066
|
-
[`&.${buttonClasses$1.disabled}`]: {
|
15067
|
-
boxShadow: 'none'
|
15068
|
-
}
|
14339
|
+
overridesResolver: (props, styles) => styles.root
|
14340
|
+
})(() => {
|
14341
|
+
return {
|
14342
|
+
padding: 16,
|
14343
|
+
'&:last-child': {
|
14344
|
+
paddingBottom: 24
|
14345
|
+
}
|
14346
|
+
};
|
15069
14347
|
});
|
15070
|
-
const
|
15071
|
-
name: 'MuiButton',
|
15072
|
-
slot: 'StartIcon',
|
15073
|
-
overridesResolver: (props, styles) => {
|
15074
|
-
const {
|
15075
|
-
ownerState
|
15076
|
-
} = props;
|
15077
|
-
return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
|
15078
|
-
}
|
15079
|
-
})(({
|
15080
|
-
ownerState
|
15081
|
-
}) => _extends({
|
15082
|
-
display: 'inherit',
|
15083
|
-
marginRight: 8,
|
15084
|
-
marginLeft: -4
|
15085
|
-
}, ownerState.size === 'small' && {
|
15086
|
-
marginLeft: -2
|
15087
|
-
}, commonIconStyles(ownerState)));
|
15088
|
-
const ButtonEndIcon = styled$1('span', {
|
15089
|
-
name: 'MuiButton',
|
15090
|
-
slot: 'EndIcon',
|
15091
|
-
overridesResolver: (props, styles) => {
|
15092
|
-
const {
|
15093
|
-
ownerState
|
15094
|
-
} = props;
|
15095
|
-
return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
|
15096
|
-
}
|
15097
|
-
})(({
|
15098
|
-
ownerState
|
15099
|
-
}) => _extends({
|
15100
|
-
display: 'inherit',
|
15101
|
-
marginRight: -4,
|
15102
|
-
marginLeft: 8
|
15103
|
-
}, ownerState.size === 'small' && {
|
15104
|
-
marginRight: -2
|
15105
|
-
}, commonIconStyles(ownerState)));
|
15106
|
-
const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
15107
|
-
// props priority: `inProps` > `contextProps` > `themeDefaultProps`
|
15108
|
-
const contextProps = React.useContext(ButtonGroupContext$1);
|
15109
|
-
const resolvedProps = resolveProps(contextProps, inProps);
|
14348
|
+
const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
|
15110
14349
|
const props = useThemeProps({
|
15111
|
-
props:
|
15112
|
-
name: '
|
14350
|
+
props: inProps,
|
14351
|
+
name: 'MuiCardContent'
|
15113
14352
|
});
|
15114
14353
|
const {
|
15115
|
-
children,
|
15116
|
-
color = 'primary',
|
15117
|
-
component = 'button',
|
15118
14354
|
className,
|
15119
|
-
|
15120
|
-
disableElevation = false,
|
15121
|
-
disableFocusRipple = false,
|
15122
|
-
endIcon: endIconProp,
|
15123
|
-
focusVisibleClassName,
|
15124
|
-
fullWidth = false,
|
15125
|
-
size = 'medium',
|
15126
|
-
startIcon: startIconProp,
|
15127
|
-
type,
|
15128
|
-
variant = 'text'
|
14355
|
+
component = 'div'
|
15129
14356
|
} = props,
|
15130
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14357
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$3);
|
15131
14358
|
const ownerState = _extends({}, props, {
|
15132
|
-
|
15133
|
-
component,
|
15134
|
-
disabled,
|
15135
|
-
disableElevation,
|
15136
|
-
disableFocusRipple,
|
15137
|
-
fullWidth,
|
15138
|
-
size,
|
15139
|
-
type,
|
15140
|
-
variant
|
15141
|
-
});
|
15142
|
-
const classes = useUtilityClasses$6(ownerState);
|
15143
|
-
const startIcon = startIconProp && /*#__PURE__*/jsx(ButtonStartIcon, {
|
15144
|
-
className: classes.startIcon,
|
15145
|
-
ownerState: ownerState,
|
15146
|
-
children: startIconProp
|
15147
|
-
});
|
15148
|
-
const endIcon = endIconProp && /*#__PURE__*/jsx(ButtonEndIcon, {
|
15149
|
-
className: classes.endIcon,
|
15150
|
-
ownerState: ownerState,
|
15151
|
-
children: endIconProp
|
14359
|
+
component
|
15152
14360
|
});
|
15153
|
-
|
14361
|
+
const classes = useUtilityClasses$1(ownerState);
|
14362
|
+
return /*#__PURE__*/jsx(CardContentRoot, _extends({
|
14363
|
+
as: component,
|
14364
|
+
className: clsx(classes.root, className),
|
15154
14365
|
ownerState: ownerState,
|
15155
|
-
|
15156
|
-
|
15157
|
-
disabled: disabled,
|
15158
|
-
focusRipple: !disableFocusRipple,
|
15159
|
-
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
15160
|
-
ref: ref,
|
15161
|
-
type: type
|
15162
|
-
}, other, {
|
15163
|
-
classes: classes,
|
15164
|
-
children: [startIcon, children, endIcon]
|
15165
|
-
}));
|
14366
|
+
ref: ref
|
14367
|
+
}, other));
|
15166
14368
|
});
|
15167
|
-
process.env.NODE_ENV !== "production" ?
|
15168
|
-
// ----------------------------- Warning --------------------------------
|
15169
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
15170
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
15171
|
-
// ----------------------------------------------------------------------
|
15172
|
-
/**
|
15173
|
-
* The content of the component.
|
15174
|
-
*/
|
15175
|
-
children: PropTypes.node,
|
15176
|
-
/**
|
15177
|
-
* Override or extend the styles applied to the component.
|
15178
|
-
*/
|
15179
|
-
classes: PropTypes.object,
|
15180
|
-
/**
|
15181
|
-
* @ignore
|
15182
|
-
*/
|
15183
|
-
className: PropTypes.string,
|
15184
|
-
/**
|
15185
|
-
* The color of the component.
|
15186
|
-
* It supports both default and custom theme colors, which can be added as shown in the
|
15187
|
-
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
15188
|
-
* @default 'primary'
|
15189
|
-
*/
|
15190
|
-
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning']), PropTypes.string]),
|
15191
|
-
/**
|
15192
|
-
* The component used for the root node.
|
15193
|
-
* Either a string to use a HTML element or a component.
|
15194
|
-
*/
|
15195
|
-
component: PropTypes.elementType,
|
15196
|
-
/**
|
15197
|
-
* If `true`, the component is disabled.
|
15198
|
-
* @default false
|
15199
|
-
*/
|
15200
|
-
disabled: PropTypes.bool,
|
15201
|
-
/**
|
15202
|
-
* If `true`, no elevation is used.
|
15203
|
-
* @default false
|
15204
|
-
*/
|
15205
|
-
disableElevation: PropTypes.bool,
|
15206
|
-
/**
|
15207
|
-
* If `true`, the keyboard focus ripple is disabled.
|
15208
|
-
* @default false
|
15209
|
-
*/
|
15210
|
-
disableFocusRipple: PropTypes.bool,
|
15211
|
-
/**
|
15212
|
-
* If `true`, the ripple effect is disabled.
|
15213
|
-
*
|
15214
|
-
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
|
15215
|
-
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
|
15216
|
-
* @default false
|
15217
|
-
*/
|
15218
|
-
disableRipple: PropTypes.bool,
|
15219
|
-
/**
|
15220
|
-
* Element placed after the children.
|
15221
|
-
*/
|
15222
|
-
endIcon: PropTypes.node,
|
15223
|
-
/**
|
15224
|
-
* @ignore
|
15225
|
-
*/
|
15226
|
-
focusVisibleClassName: PropTypes.string,
|
15227
|
-
/**
|
15228
|
-
* If `true`, the button will take up the full width of its container.
|
15229
|
-
* @default false
|
15230
|
-
*/
|
15231
|
-
fullWidth: PropTypes.bool,
|
15232
|
-
/**
|
15233
|
-
* The URL to link to when the button is clicked.
|
15234
|
-
* If defined, an `a` element will be used as the root node.
|
15235
|
-
*/
|
15236
|
-
href: PropTypes.string,
|
15237
|
-
/**
|
15238
|
-
* The size of the component.
|
15239
|
-
* `small` is equivalent to the dense button styling.
|
15240
|
-
* @default 'medium'
|
15241
|
-
*/
|
15242
|
-
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
|
15243
|
-
/**
|
15244
|
-
* Element placed before the children.
|
15245
|
-
*/
|
15246
|
-
startIcon: PropTypes.node,
|
15247
|
-
/**
|
15248
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
15249
|
-
*/
|
15250
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
15251
|
-
/**
|
15252
|
-
* @ignore
|
15253
|
-
*/
|
15254
|
-
type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
|
15255
|
-
/**
|
15256
|
-
* The variant to use.
|
15257
|
-
* @default 'text'
|
15258
|
-
*/
|
15259
|
-
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
|
15260
|
-
} : void 0;
|
15261
|
-
var Button$1 = Button;
|
15262
|
-
|
15263
|
-
function getCardUtilityClass(slot) {
|
15264
|
-
return generateUtilityClass('MuiCard', slot);
|
15265
|
-
}
|
15266
|
-
generateUtilityClasses('MuiCard', ['root']);
|
15267
|
-
|
15268
|
-
const _excluded$7 = ["className", "raised"];
|
15269
|
-
const useUtilityClasses$5 = ownerState => {
|
15270
|
-
const {
|
15271
|
-
classes
|
15272
|
-
} = ownerState;
|
15273
|
-
const slots = {
|
15274
|
-
root: ['root']
|
15275
|
-
};
|
15276
|
-
return composeClasses(slots, getCardUtilityClass, classes);
|
15277
|
-
};
|
15278
|
-
const CardRoot = styled$1(Paper$1, {
|
15279
|
-
name: 'MuiCard',
|
15280
|
-
slot: 'Root',
|
15281
|
-
overridesResolver: (props, styles) => styles.root
|
15282
|
-
})(() => {
|
15283
|
-
return {
|
15284
|
-
overflow: 'hidden'
|
15285
|
-
};
|
15286
|
-
});
|
15287
|
-
const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
|
15288
|
-
const props = useThemeProps({
|
15289
|
-
props: inProps,
|
15290
|
-
name: 'MuiCard'
|
15291
|
-
});
|
15292
|
-
const {
|
15293
|
-
className,
|
15294
|
-
raised = false
|
15295
|
-
} = props,
|
15296
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$7);
|
15297
|
-
const ownerState = _extends({}, props, {
|
15298
|
-
raised
|
15299
|
-
});
|
15300
|
-
const classes = useUtilityClasses$5(ownerState);
|
15301
|
-
return /*#__PURE__*/jsx(CardRoot, _extends({
|
15302
|
-
className: clsx(classes.root, className),
|
15303
|
-
elevation: raised ? 8 : undefined,
|
15304
|
-
ref: ref,
|
15305
|
-
ownerState: ownerState
|
15306
|
-
}, other));
|
15307
|
-
});
|
15308
|
-
process.env.NODE_ENV !== "production" ? Card.propTypes /* remove-proptypes */ = {
|
15309
|
-
// ----------------------------- Warning --------------------------------
|
15310
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
15311
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
15312
|
-
// ----------------------------------------------------------------------
|
15313
|
-
/**
|
15314
|
-
* The content of the component.
|
15315
|
-
*/
|
15316
|
-
children: PropTypes.node,
|
15317
|
-
/**
|
15318
|
-
* Override or extend the styles applied to the component.
|
15319
|
-
*/
|
15320
|
-
classes: PropTypes.object,
|
15321
|
-
/**
|
15322
|
-
* @ignore
|
15323
|
-
*/
|
15324
|
-
className: PropTypes.string,
|
15325
|
-
/**
|
15326
|
-
* If `true`, the card will use raised styling.
|
15327
|
-
* @default false
|
15328
|
-
*/
|
15329
|
-
raised: chainPropTypes(PropTypes.bool, props => {
|
15330
|
-
if (props.raised && props.variant === 'outlined') {
|
15331
|
-
return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
|
15332
|
-
}
|
15333
|
-
return null;
|
15334
|
-
}),
|
15335
|
-
/**
|
15336
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
15337
|
-
*/
|
15338
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
15339
|
-
} : void 0;
|
15340
|
-
var Card$1 = Card;
|
15341
|
-
|
15342
|
-
function getCardContentUtilityClass(slot) {
|
15343
|
-
return generateUtilityClass('MuiCardContent', slot);
|
15344
|
-
}
|
15345
|
-
generateUtilityClasses('MuiCardContent', ['root']);
|
15346
|
-
|
15347
|
-
const _excluded$6 = ["className", "component"];
|
15348
|
-
const useUtilityClasses$4 = ownerState => {
|
15349
|
-
const {
|
15350
|
-
classes
|
15351
|
-
} = ownerState;
|
15352
|
-
const slots = {
|
15353
|
-
root: ['root']
|
15354
|
-
};
|
15355
|
-
return composeClasses(slots, getCardContentUtilityClass, classes);
|
15356
|
-
};
|
15357
|
-
const CardContentRoot = styled$1('div', {
|
15358
|
-
name: 'MuiCardContent',
|
15359
|
-
slot: 'Root',
|
15360
|
-
overridesResolver: (props, styles) => styles.root
|
15361
|
-
})(() => {
|
15362
|
-
return {
|
15363
|
-
padding: 16,
|
15364
|
-
'&:last-child': {
|
15365
|
-
paddingBottom: 24
|
15366
|
-
}
|
15367
|
-
};
|
15368
|
-
});
|
15369
|
-
const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
|
15370
|
-
const props = useThemeProps({
|
15371
|
-
props: inProps,
|
15372
|
-
name: 'MuiCardContent'
|
15373
|
-
});
|
15374
|
-
const {
|
15375
|
-
className,
|
15376
|
-
component = 'div'
|
15377
|
-
} = props,
|
15378
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$6);
|
15379
|
-
const ownerState = _extends({}, props, {
|
15380
|
-
component
|
15381
|
-
});
|
15382
|
-
const classes = useUtilityClasses$4(ownerState);
|
15383
|
-
return /*#__PURE__*/jsx(CardContentRoot, _extends({
|
15384
|
-
as: component,
|
15385
|
-
className: clsx(classes.root, className),
|
15386
|
-
ownerState: ownerState,
|
15387
|
-
ref: ref
|
15388
|
-
}, other));
|
15389
|
-
});
|
15390
|
-
process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptypes */ = {
|
14369
|
+
process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptypes */ = {
|
15391
14370
|
// ----------------------------- Warning --------------------------------
|
15392
14371
|
// | These PropTypes are generated from the TypeScript type definitions |
|
15393
14372
|
// | To update them edit the d.ts file and run "yarn proptypes" |
|
@@ -15416,7 +14395,7 @@ process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptype
|
|
15416
14395
|
} : void 0;
|
15417
14396
|
var CardContent$1 = CardContent;
|
15418
14397
|
|
15419
|
-
const _excluded$
|
14398
|
+
const _excluded$2 = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
|
15420
14399
|
const ModalRoot = styled$1('div', {
|
15421
14400
|
name: 'MuiModal',
|
15422
14401
|
slot: 'Root',
|
@@ -15495,7 +14474,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
|
|
15495
14474
|
// eslint-disable-next-line react/prop-types
|
15496
14475
|
theme
|
15497
14476
|
} = props,
|
15498
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14477
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$2);
|
15499
14478
|
const [exited, setExited] = React.useState(true);
|
15500
14479
|
const commonProps = {
|
15501
14480
|
container,
|
@@ -15714,296 +14693,59 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
|
|
15714
14693
|
} : void 0;
|
15715
14694
|
var Modal$1 = Modal;
|
15716
14695
|
|
15717
|
-
|
15718
|
-
|
15719
|
-
|
15720
|
-
|
15721
|
-
|
15722
|
-
|
15723
|
-
|
15724
|
-
|
15725
|
-
|
15726
|
-
|
15727
|
-
|
15728
|
-
flexItem,
|
15729
|
-
light,
|
15730
|
-
orientation,
|
15731
|
-
textAlign,
|
15732
|
-
variant
|
15733
|
-
} = ownerState;
|
15734
|
-
const slots = {
|
15735
|
-
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'],
|
15736
|
-
wrapper: ['wrapper', orientation === 'vertical' && 'wrapperVertical']
|
15737
|
-
};
|
15738
|
-
return composeClasses(slots, getDividerUtilityClass, classes);
|
15739
|
-
};
|
15740
|
-
const DividerRoot = styled$1('div', {
|
15741
|
-
name: 'MuiDivider',
|
15742
|
-
slot: 'Root',
|
15743
|
-
overridesResolver: (props, styles) => {
|
15744
|
-
const {
|
15745
|
-
ownerState
|
15746
|
-
} = props;
|
15747
|
-
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];
|
14696
|
+
const _excluded$1 = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
|
14697
|
+
function getTranslateValue(direction, node, resolvedContainer) {
|
14698
|
+
const rect = node.getBoundingClientRect();
|
14699
|
+
const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
|
14700
|
+
const containerWindow = ownerWindow(node);
|
14701
|
+
let transform;
|
14702
|
+
if (node.fakeTransform) {
|
14703
|
+
transform = node.fakeTransform;
|
14704
|
+
} else {
|
14705
|
+
const computedStyle = containerWindow.getComputedStyle(node);
|
14706
|
+
transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
|
15748
14707
|
}
|
15749
|
-
|
15750
|
-
|
15751
|
-
|
15752
|
-
|
15753
|
-
|
15754
|
-
|
15755
|
-
flexShrink: 0,
|
15756
|
-
borderWidth: 0,
|
15757
|
-
borderStyle: 'solid',
|
15758
|
-
borderColor: (theme.vars || theme).palette.divider,
|
15759
|
-
borderBottomWidth: 'thin'
|
15760
|
-
}, ownerState.absolute && {
|
15761
|
-
position: 'absolute',
|
15762
|
-
bottom: 0,
|
15763
|
-
left: 0,
|
15764
|
-
width: '100%'
|
15765
|
-
}, ownerState.light && {
|
15766
|
-
borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
|
15767
|
-
}, ownerState.variant === 'inset' && {
|
15768
|
-
marginLeft: 72
|
15769
|
-
}, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
|
15770
|
-
marginLeft: theme.spacing(2),
|
15771
|
-
marginRight: theme.spacing(2)
|
15772
|
-
}, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
|
15773
|
-
marginTop: theme.spacing(1),
|
15774
|
-
marginBottom: theme.spacing(1)
|
15775
|
-
}, ownerState.orientation === 'vertical' && {
|
15776
|
-
height: '100%',
|
15777
|
-
borderBottomWidth: 0,
|
15778
|
-
borderRightWidth: 'thin'
|
15779
|
-
}, ownerState.flexItem && {
|
15780
|
-
alignSelf: 'stretch',
|
15781
|
-
height: 'auto'
|
15782
|
-
}), ({
|
15783
|
-
ownerState
|
15784
|
-
}) => _extends({}, ownerState.children && {
|
15785
|
-
display: 'flex',
|
15786
|
-
whiteSpace: 'nowrap',
|
15787
|
-
textAlign: 'center',
|
15788
|
-
border: 0,
|
15789
|
-
'&::before, &::after': {
|
15790
|
-
content: '""',
|
15791
|
-
alignSelf: 'center'
|
14708
|
+
let offsetX = 0;
|
14709
|
+
let offsetY = 0;
|
14710
|
+
if (transform && transform !== 'none' && typeof transform === 'string') {
|
14711
|
+
const transformValues = transform.split('(')[1].split(')')[0].split(',');
|
14712
|
+
offsetX = parseInt(transformValues[4], 10);
|
14713
|
+
offsetY = parseInt(transformValues[5], 10);
|
15792
14714
|
}
|
15793
|
-
|
15794
|
-
|
15795
|
-
|
15796
|
-
}
|
15797
|
-
|
15798
|
-
width: '100%',
|
15799
|
-
borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
|
14715
|
+
if (direction === 'left') {
|
14716
|
+
if (containerRect) {
|
14717
|
+
return `translateX(${containerRect.right + offsetX - rect.left}px)`;
|
14718
|
+
}
|
14719
|
+
return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;
|
15800
14720
|
}
|
15801
|
-
|
15802
|
-
|
15803
|
-
|
15804
|
-
}
|
15805
|
-
|
15806
|
-
'&::before, &::after': {
|
15807
|
-
height: '100%',
|
15808
|
-
borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
|
14721
|
+
if (direction === 'right') {
|
14722
|
+
if (containerRect) {
|
14723
|
+
return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
|
14724
|
+
}
|
14725
|
+
return `translateX(-${rect.left + rect.width - offsetX}px)`;
|
15809
14726
|
}
|
15810
|
-
|
15811
|
-
|
15812
|
-
|
15813
|
-
|
15814
|
-
|
15815
|
-
},
|
15816
|
-
'&::after': {
|
15817
|
-
width: '10%'
|
14727
|
+
if (direction === 'up') {
|
14728
|
+
if (containerRect) {
|
14729
|
+
return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
|
14730
|
+
}
|
14731
|
+
return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;
|
15818
14732
|
}
|
15819
|
-
|
15820
|
-
'
|
15821
|
-
|
15822
|
-
|
15823
|
-
'&::after': {
|
15824
|
-
width: '90%'
|
14733
|
+
|
14734
|
+
// direction === 'down'
|
14735
|
+
if (containerRect) {
|
14736
|
+
return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
|
15825
14737
|
}
|
15826
|
-
})
|
15827
|
-
|
15828
|
-
|
15829
|
-
|
15830
|
-
|
15831
|
-
|
15832
|
-
|
15833
|
-
|
15834
|
-
|
15835
|
-
|
15836
|
-
|
15837
|
-
theme,
|
15838
|
-
ownerState
|
15839
|
-
}) => _extends({
|
15840
|
-
display: 'inline-block',
|
15841
|
-
paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
|
15842
|
-
paddingRight: `calc(${theme.spacing(1)} * 1.2)`
|
15843
|
-
}, ownerState.orientation === 'vertical' && {
|
15844
|
-
paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
|
15845
|
-
paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
|
15846
|
-
}));
|
15847
|
-
const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
|
15848
|
-
const props = useThemeProps({
|
15849
|
-
props: inProps,
|
15850
|
-
name: 'MuiDivider'
|
15851
|
-
});
|
15852
|
-
const {
|
15853
|
-
absolute = false,
|
15854
|
-
children,
|
15855
|
-
className,
|
15856
|
-
component = children ? 'div' : 'hr',
|
15857
|
-
flexItem = false,
|
15858
|
-
light = false,
|
15859
|
-
orientation = 'horizontal',
|
15860
|
-
role = component !== 'hr' ? 'separator' : undefined,
|
15861
|
-
textAlign = 'center',
|
15862
|
-
variant = 'fullWidth'
|
15863
|
-
} = props,
|
15864
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$4);
|
15865
|
-
const ownerState = _extends({}, props, {
|
15866
|
-
absolute,
|
15867
|
-
component,
|
15868
|
-
flexItem,
|
15869
|
-
light,
|
15870
|
-
orientation,
|
15871
|
-
role,
|
15872
|
-
textAlign,
|
15873
|
-
variant
|
15874
|
-
});
|
15875
|
-
const classes = useUtilityClasses$3(ownerState);
|
15876
|
-
return /*#__PURE__*/jsx(DividerRoot, _extends({
|
15877
|
-
as: component,
|
15878
|
-
className: clsx(classes.root, className),
|
15879
|
-
role: role,
|
15880
|
-
ref: ref,
|
15881
|
-
ownerState: ownerState
|
15882
|
-
}, other, {
|
15883
|
-
children: children ? /*#__PURE__*/jsx(DividerWrapper, {
|
15884
|
-
className: classes.wrapper,
|
15885
|
-
ownerState: ownerState,
|
15886
|
-
children: children
|
15887
|
-
}) : null
|
15888
|
-
}));
|
15889
|
-
});
|
15890
|
-
process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
|
15891
|
-
// ----------------------------- Warning --------------------------------
|
15892
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
15893
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
15894
|
-
// ----------------------------------------------------------------------
|
15895
|
-
/**
|
15896
|
-
* Absolutely position the element.
|
15897
|
-
* @default false
|
15898
|
-
*/
|
15899
|
-
absolute: PropTypes.bool,
|
15900
|
-
/**
|
15901
|
-
* The content of the component.
|
15902
|
-
*/
|
15903
|
-
children: PropTypes.node,
|
15904
|
-
/**
|
15905
|
-
* Override or extend the styles applied to the component.
|
15906
|
-
*/
|
15907
|
-
classes: PropTypes.object,
|
15908
|
-
/**
|
15909
|
-
* @ignore
|
15910
|
-
*/
|
15911
|
-
className: PropTypes.string,
|
15912
|
-
/**
|
15913
|
-
* The component used for the root node.
|
15914
|
-
* Either a string to use a HTML element or a component.
|
15915
|
-
*/
|
15916
|
-
component: PropTypes.elementType,
|
15917
|
-
/**
|
15918
|
-
* If `true`, a vertical divider will have the correct height when used in flex container.
|
15919
|
-
* (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
|
15920
|
-
* @default false
|
15921
|
-
*/
|
15922
|
-
flexItem: PropTypes.bool,
|
15923
|
-
/**
|
15924
|
-
* If `true`, the divider will have a lighter color.
|
15925
|
-
* @default false
|
15926
|
-
*/
|
15927
|
-
light: PropTypes.bool,
|
15928
|
-
/**
|
15929
|
-
* The component orientation.
|
15930
|
-
* @default 'horizontal'
|
15931
|
-
*/
|
15932
|
-
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
15933
|
-
/**
|
15934
|
-
* @ignore
|
15935
|
-
*/
|
15936
|
-
role: PropTypes /* @typescript-to-proptypes-ignore */.string,
|
15937
|
-
/**
|
15938
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
15939
|
-
*/
|
15940
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
15941
|
-
/**
|
15942
|
-
* The text alignment.
|
15943
|
-
* @default 'center'
|
15944
|
-
*/
|
15945
|
-
textAlign: PropTypes.oneOf(['center', 'left', 'right']),
|
15946
|
-
/**
|
15947
|
-
* The variant to use.
|
15948
|
-
* @default 'fullWidth'
|
15949
|
-
*/
|
15950
|
-
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['fullWidth', 'inset', 'middle']), PropTypes.string])
|
15951
|
-
} : void 0;
|
15952
|
-
var Divider$1 = Divider;
|
15953
|
-
|
15954
|
-
const _excluded$3 = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
|
15955
|
-
function getTranslateValue(direction, node, resolvedContainer) {
|
15956
|
-
const rect = node.getBoundingClientRect();
|
15957
|
-
const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
|
15958
|
-
const containerWindow = ownerWindow(node);
|
15959
|
-
let transform;
|
15960
|
-
if (node.fakeTransform) {
|
15961
|
-
transform = node.fakeTransform;
|
15962
|
-
} else {
|
15963
|
-
const computedStyle = containerWindow.getComputedStyle(node);
|
15964
|
-
transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
|
15965
|
-
}
|
15966
|
-
let offsetX = 0;
|
15967
|
-
let offsetY = 0;
|
15968
|
-
if (transform && transform !== 'none' && typeof transform === 'string') {
|
15969
|
-
const transformValues = transform.split('(')[1].split(')')[0].split(',');
|
15970
|
-
offsetX = parseInt(transformValues[4], 10);
|
15971
|
-
offsetY = parseInt(transformValues[5], 10);
|
15972
|
-
}
|
15973
|
-
if (direction === 'left') {
|
15974
|
-
if (containerRect) {
|
15975
|
-
return `translateX(${containerRect.right + offsetX - rect.left}px)`;
|
15976
|
-
}
|
15977
|
-
return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;
|
15978
|
-
}
|
15979
|
-
if (direction === 'right') {
|
15980
|
-
if (containerRect) {
|
15981
|
-
return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
|
15982
|
-
}
|
15983
|
-
return `translateX(-${rect.left + rect.width - offsetX}px)`;
|
15984
|
-
}
|
15985
|
-
if (direction === 'up') {
|
15986
|
-
if (containerRect) {
|
15987
|
-
return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
|
15988
|
-
}
|
15989
|
-
return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;
|
15990
|
-
}
|
15991
|
-
|
15992
|
-
// direction === 'down'
|
15993
|
-
if (containerRect) {
|
15994
|
-
return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
|
15995
|
-
}
|
15996
|
-
return `translateY(-${rect.top + rect.height - offsetY}px)`;
|
15997
|
-
}
|
15998
|
-
function resolveContainer(containerPropProp) {
|
15999
|
-
return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
|
16000
|
-
}
|
16001
|
-
function setTranslateValue(direction, node, containerProp) {
|
16002
|
-
const resolvedContainer = resolveContainer(containerProp);
|
16003
|
-
const transform = getTranslateValue(direction, node, resolvedContainer);
|
16004
|
-
if (transform) {
|
16005
|
-
node.style.webkitTransform = transform;
|
16006
|
-
node.style.transform = transform;
|
14738
|
+
return `translateY(-${rect.top + rect.height - offsetY}px)`;
|
14739
|
+
}
|
14740
|
+
function resolveContainer(containerPropProp) {
|
14741
|
+
return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
|
14742
|
+
}
|
14743
|
+
function setTranslateValue(direction, node, containerProp) {
|
14744
|
+
const resolvedContainer = resolveContainer(containerProp);
|
14745
|
+
const transform = getTranslateValue(direction, node, resolvedContainer);
|
14746
|
+
if (transform) {
|
14747
|
+
node.style.webkitTransform = transform;
|
14748
|
+
node.style.transform = transform;
|
16007
14749
|
}
|
16008
14750
|
}
|
16009
14751
|
|
@@ -16040,7 +14782,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
|
|
16040
14782
|
// eslint-disable-next-line react/prop-types
|
16041
14783
|
TransitionComponent = Transition$1
|
16042
14784
|
} = props,
|
16043
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
14785
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$1);
|
16044
14786
|
const childrenRef = React.useRef(null);
|
16045
14787
|
const handleRef = useForkRef(children.ref, childrenRef, ref);
|
16046
14788
|
const normalizedTransitionCallback = callback => isAppearing => {
|
@@ -16268,7 +15010,7 @@ function getDrawerUtilityClass(slot) {
|
|
16268
15010
|
}
|
16269
15011
|
generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
|
16270
15012
|
|
16271
|
-
const _excluded
|
15013
|
+
const _excluded = ["BackdropProps"],
|
16272
15014
|
_excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
|
16273
15015
|
const overridesResolver = (props, styles) => {
|
16274
15016
|
const {
|
@@ -16276,7 +15018,7 @@ const overridesResolver = (props, styles) => {
|
|
16276
15018
|
} = props;
|
16277
15019
|
return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
|
16278
15020
|
};
|
16279
|
-
const useUtilityClasses
|
15021
|
+
const useUtilityClasses = ownerState => {
|
16280
15022
|
const {
|
16281
15023
|
classes,
|
16282
15024
|
anchor,
|
@@ -16368,715 +15110,129 @@ const oppositeDirection = {
|
|
16368
15110
|
top: 'down',
|
16369
15111
|
bottom: 'up'
|
16370
15112
|
};
|
16371
|
-
function isHorizontal(anchor) {
|
16372
|
-
return ['left', 'right'].indexOf(anchor) !== -1;
|
16373
|
-
}
|
16374
|
-
function getAnchor(theme, anchor) {
|
16375
|
-
return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
|
16376
|
-
}
|
16377
|
-
|
16378
|
-
/**
|
16379
|
-
* The props of the [Modal](/material-ui/api/modal/) component are available
|
16380
|
-
* when `variant="temporary"` is set.
|
16381
|
-
*/
|
16382
|
-
const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
|
16383
|
-
const props = useThemeProps({
|
16384
|
-
props: inProps,
|
16385
|
-
name: 'MuiDrawer'
|
16386
|
-
});
|
16387
|
-
const theme = useTheme();
|
16388
|
-
const defaultTransitionDuration = {
|
16389
|
-
enter: theme.transitions.duration.enteringScreen,
|
16390
|
-
exit: theme.transitions.duration.leavingScreen
|
16391
|
-
};
|
16392
|
-
const {
|
16393
|
-
anchor: anchorProp = 'left',
|
16394
|
-
BackdropProps,
|
16395
|
-
children,
|
16396
|
-
className,
|
16397
|
-
elevation = 16,
|
16398
|
-
hideBackdrop = false,
|
16399
|
-
ModalProps: {
|
16400
|
-
BackdropProps: BackdropPropsProp
|
16401
|
-
} = {},
|
16402
|
-
onClose,
|
16403
|
-
open = false,
|
16404
|
-
PaperProps = {},
|
16405
|
-
SlideProps,
|
16406
|
-
// eslint-disable-next-line react/prop-types
|
16407
|
-
TransitionComponent = Slide$1,
|
16408
|
-
transitionDuration = defaultTransitionDuration,
|
16409
|
-
variant = 'temporary'
|
16410
|
-
} = props,
|
16411
|
-
ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded$2),
|
16412
|
-
other = _objectWithoutPropertiesLoose(props, _excluded2);
|
16413
|
-
|
16414
|
-
// Let's assume that the Drawer will always be rendered on user space.
|
16415
|
-
// We use this state is order to skip the appear transition during the
|
16416
|
-
// initial mount of the component.
|
16417
|
-
const mounted = React.useRef(false);
|
16418
|
-
React.useEffect(() => {
|
16419
|
-
mounted.current = true;
|
16420
|
-
}, []);
|
16421
|
-
const anchorInvariant = getAnchor(theme, anchorProp);
|
16422
|
-
const anchor = anchorProp;
|
16423
|
-
const ownerState = _extends({}, props, {
|
16424
|
-
anchor,
|
16425
|
-
elevation,
|
16426
|
-
open,
|
16427
|
-
variant
|
16428
|
-
}, other);
|
16429
|
-
const classes = useUtilityClasses$2(ownerState);
|
16430
|
-
const drawer = /*#__PURE__*/jsx(DrawerPaper, _extends({
|
16431
|
-
elevation: variant === 'temporary' ? elevation : 0,
|
16432
|
-
square: true
|
16433
|
-
}, PaperProps, {
|
16434
|
-
className: clsx(classes.paper, PaperProps.className),
|
16435
|
-
ownerState: ownerState,
|
16436
|
-
children: children
|
16437
|
-
}));
|
16438
|
-
if (variant === 'permanent') {
|
16439
|
-
return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
|
16440
|
-
className: clsx(classes.root, classes.docked, className),
|
16441
|
-
ownerState: ownerState,
|
16442
|
-
ref: ref
|
16443
|
-
}, other, {
|
16444
|
-
children: drawer
|
16445
|
-
}));
|
16446
|
-
}
|
16447
|
-
const slidingDrawer = /*#__PURE__*/jsx(TransitionComponent, _extends({
|
16448
|
-
in: open,
|
16449
|
-
direction: oppositeDirection[anchorInvariant],
|
16450
|
-
timeout: transitionDuration,
|
16451
|
-
appear: mounted.current
|
16452
|
-
}, SlideProps, {
|
16453
|
-
children: drawer
|
16454
|
-
}));
|
16455
|
-
if (variant === 'persistent') {
|
16456
|
-
return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
|
16457
|
-
className: clsx(classes.root, classes.docked, className),
|
16458
|
-
ownerState: ownerState,
|
16459
|
-
ref: ref
|
16460
|
-
}, other, {
|
16461
|
-
children: slidingDrawer
|
16462
|
-
}));
|
16463
|
-
}
|
16464
|
-
|
16465
|
-
// variant === temporary
|
16466
|
-
return /*#__PURE__*/jsx(DrawerRoot, _extends({
|
16467
|
-
BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
|
16468
|
-
transitionDuration
|
16469
|
-
}),
|
16470
|
-
className: clsx(classes.root, classes.modal, className),
|
16471
|
-
open: open,
|
16472
|
-
ownerState: ownerState,
|
16473
|
-
onClose: onClose,
|
16474
|
-
hideBackdrop: hideBackdrop,
|
16475
|
-
ref: ref
|
16476
|
-
}, other, ModalProps, {
|
16477
|
-
children: slidingDrawer
|
16478
|
-
}));
|
16479
|
-
});
|
16480
|
-
process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */ = {
|
16481
|
-
// ----------------------------- Warning --------------------------------
|
16482
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
16483
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
16484
|
-
// ----------------------------------------------------------------------
|
16485
|
-
/**
|
16486
|
-
* Side from which the drawer will appear.
|
16487
|
-
* @default 'left'
|
16488
|
-
*/
|
16489
|
-
anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
16490
|
-
/**
|
16491
|
-
* @ignore
|
16492
|
-
*/
|
16493
|
-
BackdropProps: PropTypes.object,
|
16494
|
-
/**
|
16495
|
-
* The content of the component.
|
16496
|
-
*/
|
16497
|
-
children: PropTypes.node,
|
16498
|
-
/**
|
16499
|
-
* Override or extend the styles applied to the component.
|
16500
|
-
*/
|
16501
|
-
classes: PropTypes.object,
|
16502
|
-
/**
|
16503
|
-
* @ignore
|
16504
|
-
*/
|
16505
|
-
className: PropTypes.string,
|
16506
|
-
/**
|
16507
|
-
* The elevation of the drawer.
|
16508
|
-
* @default 16
|
16509
|
-
*/
|
16510
|
-
elevation: integerPropType,
|
16511
|
-
/**
|
16512
|
-
* If `true`, the backdrop is not rendered.
|
16513
|
-
* @default false
|
16514
|
-
*/
|
16515
|
-
hideBackdrop: PropTypes.bool,
|
16516
|
-
/**
|
16517
|
-
* Props applied to the [`Modal`](/material-ui/api/modal/) element.
|
16518
|
-
* @default {}
|
16519
|
-
*/
|
16520
|
-
ModalProps: PropTypes.object,
|
16521
|
-
/**
|
16522
|
-
* Callback fired when the component requests to be closed.
|
16523
|
-
*
|
16524
|
-
* @param {object} event The event source of the callback.
|
16525
|
-
*/
|
16526
|
-
onClose: PropTypes.func,
|
16527
|
-
/**
|
16528
|
-
* If `true`, the component is shown.
|
16529
|
-
* @default false
|
16530
|
-
*/
|
16531
|
-
open: PropTypes.bool,
|
16532
|
-
/**
|
16533
|
-
* Props applied to the [`Paper`](/material-ui/api/paper/) element.
|
16534
|
-
* @default {}
|
16535
|
-
*/
|
16536
|
-
PaperProps: PropTypes.object,
|
16537
|
-
/**
|
16538
|
-
* Props applied to the [`Slide`](/material-ui/api/slide/) element.
|
16539
|
-
*/
|
16540
|
-
SlideProps: PropTypes.object,
|
16541
|
-
/**
|
16542
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
16543
|
-
*/
|
16544
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
16545
|
-
/**
|
16546
|
-
* The duration for the transition, in milliseconds.
|
16547
|
-
* You may specify a single timeout for all transitions, or individually with an object.
|
16548
|
-
* @default {
|
16549
|
-
* enter: theme.transitions.duration.enteringScreen,
|
16550
|
-
* exit: theme.transitions.duration.leavingScreen,
|
16551
|
-
* }
|
16552
|
-
*/
|
16553
|
-
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
16554
|
-
appear: PropTypes.number,
|
16555
|
-
enter: PropTypes.number,
|
16556
|
-
exit: PropTypes.number
|
16557
|
-
})]),
|
16558
|
-
/**
|
16559
|
-
* The variant to use.
|
16560
|
-
* @default 'temporary'
|
16561
|
-
*/
|
16562
|
-
variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
|
16563
|
-
} : void 0;
|
16564
|
-
var Drawer$1 = Drawer;
|
16565
|
-
|
16566
|
-
function getLinearProgressUtilityClass(slot) {
|
16567
|
-
return generateUtilityClass('MuiLinearProgress', slot);
|
16568
|
-
}
|
16569
|
-
generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
|
16570
|
-
|
16571
|
-
const _excluded$1 = ["className", "color", "value", "valueBuffer", "variant"];
|
16572
|
-
let _ = t => t,
|
16573
|
-
_t,
|
16574
|
-
_t2,
|
16575
|
-
_t3,
|
16576
|
-
_t4,
|
16577
|
-
_t5,
|
16578
|
-
_t6;
|
16579
|
-
const TRANSITION_DURATION = 4; // seconds
|
16580
|
-
const indeterminate1Keyframe = keyframes(_t || (_t = _`
|
16581
|
-
0% {
|
16582
|
-
left: -35%;
|
16583
|
-
right: 100%;
|
16584
|
-
}
|
16585
|
-
|
16586
|
-
60% {
|
16587
|
-
left: 100%;
|
16588
|
-
right: -90%;
|
16589
|
-
}
|
16590
|
-
|
16591
|
-
100% {
|
16592
|
-
left: 100%;
|
16593
|
-
right: -90%;
|
16594
|
-
}
|
16595
|
-
`));
|
16596
|
-
const indeterminate2Keyframe = keyframes(_t2 || (_t2 = _`
|
16597
|
-
0% {
|
16598
|
-
left: -200%;
|
16599
|
-
right: 100%;
|
16600
|
-
}
|
16601
|
-
|
16602
|
-
60% {
|
16603
|
-
left: 107%;
|
16604
|
-
right: -8%;
|
16605
|
-
}
|
16606
|
-
|
16607
|
-
100% {
|
16608
|
-
left: 107%;
|
16609
|
-
right: -8%;
|
16610
|
-
}
|
16611
|
-
`));
|
16612
|
-
const bufferKeyframe = keyframes(_t3 || (_t3 = _`
|
16613
|
-
0% {
|
16614
|
-
opacity: 1;
|
16615
|
-
background-position: 0 -23px;
|
16616
|
-
}
|
16617
|
-
|
16618
|
-
60% {
|
16619
|
-
opacity: 0;
|
16620
|
-
background-position: 0 -23px;
|
16621
|
-
}
|
16622
|
-
|
16623
|
-
100% {
|
16624
|
-
opacity: 1;
|
16625
|
-
background-position: -200px -23px;
|
16626
|
-
}
|
16627
|
-
`));
|
16628
|
-
const useUtilityClasses$1 = ownerState => {
|
16629
|
-
const {
|
16630
|
-
classes,
|
16631
|
-
variant,
|
16632
|
-
color
|
16633
|
-
} = ownerState;
|
16634
|
-
const slots = {
|
16635
|
-
root: ['root', `color${capitalize(color)}`, variant],
|
16636
|
-
dashed: ['dashed', `dashedColor${capitalize(color)}`],
|
16637
|
-
bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
|
16638
|
-
bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
|
16639
|
-
};
|
16640
|
-
return composeClasses(slots, getLinearProgressUtilityClass, classes);
|
16641
|
-
};
|
16642
|
-
const getColorShade = (theme, color) => {
|
16643
|
-
if (color === 'inherit') {
|
16644
|
-
return 'currentColor';
|
16645
|
-
}
|
16646
|
-
if (theme.vars) {
|
16647
|
-
return theme.vars.palette.LinearProgress[`${color}Bg`];
|
16648
|
-
}
|
16649
|
-
return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);
|
16650
|
-
};
|
16651
|
-
const LinearProgressRoot = styled$1('span', {
|
16652
|
-
name: 'MuiLinearProgress',
|
16653
|
-
slot: 'Root',
|
16654
|
-
overridesResolver: (props, styles) => {
|
16655
|
-
const {
|
16656
|
-
ownerState
|
16657
|
-
} = props;
|
16658
|
-
return [styles.root, styles[`color${capitalize(ownerState.color)}`], styles[ownerState.variant]];
|
16659
|
-
}
|
16660
|
-
})(({
|
16661
|
-
ownerState,
|
16662
|
-
theme
|
16663
|
-
}) => _extends({
|
16664
|
-
position: 'relative',
|
16665
|
-
overflow: 'hidden',
|
16666
|
-
display: 'block',
|
16667
|
-
height: 4,
|
16668
|
-
zIndex: 0,
|
16669
|
-
// Fix Safari's bug during composition of different paint.
|
16670
|
-
'@media print': {
|
16671
|
-
colorAdjust: 'exact'
|
16672
|
-
},
|
16673
|
-
backgroundColor: getColorShade(theme, ownerState.color)
|
16674
|
-
}, ownerState.color === 'inherit' && ownerState.variant !== 'buffer' && {
|
16675
|
-
backgroundColor: 'none',
|
16676
|
-
'&::before': {
|
16677
|
-
content: '""',
|
16678
|
-
position: 'absolute',
|
16679
|
-
left: 0,
|
16680
|
-
top: 0,
|
16681
|
-
right: 0,
|
16682
|
-
bottom: 0,
|
16683
|
-
backgroundColor: 'currentColor',
|
16684
|
-
opacity: 0.3
|
16685
|
-
}
|
16686
|
-
}, ownerState.variant === 'buffer' && {
|
16687
|
-
backgroundColor: 'transparent'
|
16688
|
-
}, ownerState.variant === 'query' && {
|
16689
|
-
transform: 'rotate(180deg)'
|
16690
|
-
}));
|
16691
|
-
const LinearProgressDashed = styled$1('span', {
|
16692
|
-
name: 'MuiLinearProgress',
|
16693
|
-
slot: 'Dashed',
|
16694
|
-
overridesResolver: (props, styles) => {
|
16695
|
-
const {
|
16696
|
-
ownerState
|
16697
|
-
} = props;
|
16698
|
-
return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]];
|
16699
|
-
}
|
16700
|
-
})(({
|
16701
|
-
ownerState,
|
16702
|
-
theme
|
16703
|
-
}) => {
|
16704
|
-
const backgroundColor = getColorShade(theme, ownerState.color);
|
16705
|
-
return _extends({
|
16706
|
-
position: 'absolute',
|
16707
|
-
marginTop: 0,
|
16708
|
-
height: '100%',
|
16709
|
-
width: '100%'
|
16710
|
-
}, ownerState.color === 'inherit' && {
|
16711
|
-
opacity: 0.3
|
16712
|
-
}, {
|
16713
|
-
backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`,
|
16714
|
-
backgroundSize: '10px 10px',
|
16715
|
-
backgroundPosition: '0 -23px'
|
16716
|
-
});
|
16717
|
-
}, css(_t4 || (_t4 = _`
|
16718
|
-
animation: ${0} 3s infinite linear;
|
16719
|
-
`), bufferKeyframe));
|
16720
|
-
const LinearProgressBar1 = styled$1('span', {
|
16721
|
-
name: 'MuiLinearProgress',
|
16722
|
-
slot: 'Bar1',
|
16723
|
-
overridesResolver: (props, styles) => {
|
16724
|
-
const {
|
16725
|
-
ownerState
|
16726
|
-
} = props;
|
16727
|
-
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];
|
16728
|
-
}
|
16729
|
-
})(({
|
16730
|
-
ownerState,
|
16731
|
-
theme
|
16732
|
-
}) => _extends({
|
16733
|
-
width: '100%',
|
16734
|
-
position: 'absolute',
|
16735
|
-
left: 0,
|
16736
|
-
bottom: 0,
|
16737
|
-
top: 0,
|
16738
|
-
transition: 'transform 0.2s linear',
|
16739
|
-
transformOrigin: 'left',
|
16740
|
-
backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
|
16741
|
-
}, ownerState.variant === 'determinate' && {
|
16742
|
-
transition: `transform .${TRANSITION_DURATION}s linear`
|
16743
|
-
}, ownerState.variant === 'buffer' && {
|
16744
|
-
zIndex: 1,
|
16745
|
-
transition: `transform .${TRANSITION_DURATION}s linear`
|
16746
|
-
}), ({
|
16747
|
-
ownerState
|
16748
|
-
}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t5 || (_t5 = _`
|
16749
|
-
width: auto;
|
16750
|
-
animation: ${0} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
16751
|
-
`), indeterminate1Keyframe));
|
16752
|
-
const LinearProgressBar2 = styled$1('span', {
|
16753
|
-
name: 'MuiLinearProgress',
|
16754
|
-
slot: 'Bar2',
|
16755
|
-
overridesResolver: (props, styles) => {
|
16756
|
-
const {
|
16757
|
-
ownerState
|
16758
|
-
} = props;
|
16759
|
-
return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
|
16760
|
-
}
|
16761
|
-
})(({
|
16762
|
-
ownerState,
|
16763
|
-
theme
|
16764
|
-
}) => _extends({
|
16765
|
-
width: '100%',
|
16766
|
-
position: 'absolute',
|
16767
|
-
left: 0,
|
16768
|
-
bottom: 0,
|
16769
|
-
top: 0,
|
16770
|
-
transition: 'transform 0.2s linear',
|
16771
|
-
transformOrigin: 'left'
|
16772
|
-
}, ownerState.variant !== 'buffer' && {
|
16773
|
-
backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
|
16774
|
-
}, ownerState.color === 'inherit' && {
|
16775
|
-
opacity: 0.3
|
16776
|
-
}, ownerState.variant === 'buffer' && {
|
16777
|
-
backgroundColor: getColorShade(theme, ownerState.color),
|
16778
|
-
transition: `transform .${TRANSITION_DURATION}s linear`
|
16779
|
-
}), ({
|
16780
|
-
ownerState
|
16781
|
-
}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t6 || (_t6 = _`
|
16782
|
-
width: auto;
|
16783
|
-
animation: ${0} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
|
16784
|
-
`), indeterminate2Keyframe));
|
16785
|
-
|
16786
|
-
/**
|
16787
|
-
* ## ARIA
|
16788
|
-
*
|
16789
|
-
* If the progress bar is describing the loading progress of a particular region of a page,
|
16790
|
-
* you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
|
16791
|
-
* attribute to `true` on that region until it has finished loading.
|
16792
|
-
*/
|
16793
|
-
const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inProps, ref) {
|
16794
|
-
const props = useThemeProps({
|
16795
|
-
props: inProps,
|
16796
|
-
name: 'MuiLinearProgress'
|
16797
|
-
});
|
16798
|
-
const {
|
16799
|
-
className,
|
16800
|
-
color = 'primary',
|
16801
|
-
value,
|
16802
|
-
valueBuffer,
|
16803
|
-
variant = 'indeterminate'
|
16804
|
-
} = props,
|
16805
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$1);
|
16806
|
-
const ownerState = _extends({}, props, {
|
16807
|
-
color,
|
16808
|
-
variant
|
16809
|
-
});
|
16810
|
-
const classes = useUtilityClasses$1(ownerState);
|
16811
|
-
const theme = useTheme();
|
16812
|
-
const rootProps = {};
|
16813
|
-
const inlineStyles = {
|
16814
|
-
bar1: {},
|
16815
|
-
bar2: {}
|
16816
|
-
};
|
16817
|
-
if (variant === 'determinate' || variant === 'buffer') {
|
16818
|
-
if (value !== undefined) {
|
16819
|
-
rootProps['aria-valuenow'] = Math.round(value);
|
16820
|
-
rootProps['aria-valuemin'] = 0;
|
16821
|
-
rootProps['aria-valuemax'] = 100;
|
16822
|
-
let transform = value - 100;
|
16823
|
-
if (theme.direction === 'rtl') {
|
16824
|
-
transform = -transform;
|
16825
|
-
}
|
16826
|
-
inlineStyles.bar1.transform = `translateX(${transform}%)`;
|
16827
|
-
} else if (process.env.NODE_ENV !== 'production') {
|
16828
|
-
console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
|
16829
|
-
}
|
16830
|
-
}
|
16831
|
-
if (variant === 'buffer') {
|
16832
|
-
if (valueBuffer !== undefined) {
|
16833
|
-
let transform = (valueBuffer || 0) - 100;
|
16834
|
-
if (theme.direction === 'rtl') {
|
16835
|
-
transform = -transform;
|
16836
|
-
}
|
16837
|
-
inlineStyles.bar2.transform = `translateX(${transform}%)`;
|
16838
|
-
} else if (process.env.NODE_ENV !== 'production') {
|
16839
|
-
console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
|
16840
|
-
}
|
16841
|
-
}
|
16842
|
-
return /*#__PURE__*/jsxs(LinearProgressRoot, _extends({
|
16843
|
-
className: clsx(classes.root, className),
|
16844
|
-
ownerState: ownerState,
|
16845
|
-
role: "progressbar"
|
16846
|
-
}, rootProps, {
|
16847
|
-
ref: ref
|
16848
|
-
}, other, {
|
16849
|
-
children: [variant === 'buffer' ? /*#__PURE__*/jsx(LinearProgressDashed, {
|
16850
|
-
className: classes.dashed,
|
16851
|
-
ownerState: ownerState
|
16852
|
-
}) : null, /*#__PURE__*/jsx(LinearProgressBar1, {
|
16853
|
-
className: classes.bar1,
|
16854
|
-
ownerState: ownerState,
|
16855
|
-
style: inlineStyles.bar1
|
16856
|
-
}), variant === 'determinate' ? null : /*#__PURE__*/jsx(LinearProgressBar2, {
|
16857
|
-
className: classes.bar2,
|
16858
|
-
ownerState: ownerState,
|
16859
|
-
style: inlineStyles.bar2
|
16860
|
-
})]
|
16861
|
-
}));
|
16862
|
-
});
|
16863
|
-
process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-proptypes */ = {
|
16864
|
-
// ----------------------------- Warning --------------------------------
|
16865
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
16866
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
16867
|
-
// ----------------------------------------------------------------------
|
16868
|
-
/**
|
16869
|
-
* Override or extend the styles applied to the component.
|
16870
|
-
*/
|
16871
|
-
classes: PropTypes.object,
|
16872
|
-
/**
|
16873
|
-
* @ignore
|
16874
|
-
*/
|
16875
|
-
className: PropTypes.string,
|
16876
|
-
/**
|
16877
|
-
* The color of the component.
|
16878
|
-
* It supports both default and custom theme colors, which can be added as shown in the
|
16879
|
-
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
16880
|
-
* @default 'primary'
|
16881
|
-
*/
|
16882
|
-
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string]),
|
16883
|
-
/**
|
16884
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
16885
|
-
*/
|
16886
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
16887
|
-
/**
|
16888
|
-
* The value of the progress indicator for the determinate and buffer variants.
|
16889
|
-
* Value between 0 and 100.
|
16890
|
-
*/
|
16891
|
-
value: PropTypes.number,
|
16892
|
-
/**
|
16893
|
-
* The value for the buffer variant.
|
16894
|
-
* Value between 0 and 100.
|
16895
|
-
*/
|
16896
|
-
valueBuffer: PropTypes.number,
|
16897
|
-
/**
|
16898
|
-
* The variant to use.
|
16899
|
-
* Use indeterminate or query when there is no progress value.
|
16900
|
-
* @default 'indeterminate'
|
16901
|
-
*/
|
16902
|
-
variant: PropTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query'])
|
16903
|
-
} : void 0;
|
16904
|
-
var LinearProgress$1 = LinearProgress;
|
16905
|
-
|
16906
|
-
function getLinkUtilityClass(slot) {
|
16907
|
-
return generateUtilityClass('MuiLink', slot);
|
16908
|
-
}
|
16909
|
-
const linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
|
16910
|
-
var linkClasses$1 = linkClasses;
|
16911
|
-
|
16912
|
-
const colorTransformations = {
|
16913
|
-
primary: 'primary.main',
|
16914
|
-
textPrimary: 'text.primary',
|
16915
|
-
secondary: 'secondary.main',
|
16916
|
-
textSecondary: 'text.secondary',
|
16917
|
-
error: 'error.main'
|
16918
|
-
};
|
16919
|
-
const transformDeprecatedColors = color => {
|
16920
|
-
return colorTransformations[color] || color;
|
16921
|
-
};
|
16922
|
-
const getTextDecoration = ({
|
16923
|
-
theme,
|
16924
|
-
ownerState
|
16925
|
-
}) => {
|
16926
|
-
const transformedColor = transformDeprecatedColors(ownerState.color);
|
16927
|
-
const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
|
16928
|
-
const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
|
16929
|
-
if ('vars' in theme && channelColor) {
|
16930
|
-
return `rgba(${channelColor} / 0.4)`;
|
16931
|
-
}
|
16932
|
-
return alpha(color, 0.4);
|
16933
|
-
};
|
16934
|
-
var getTextDecoration$1 = getTextDecoration;
|
16935
|
-
|
16936
|
-
const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
|
16937
|
-
const useUtilityClasses = ownerState => {
|
16938
|
-
const {
|
16939
|
-
classes,
|
16940
|
-
component,
|
16941
|
-
focusVisible,
|
16942
|
-
underline
|
16943
|
-
} = ownerState;
|
16944
|
-
const slots = {
|
16945
|
-
root: ['root', `underline${capitalize(underline)}`, component === 'button' && 'button', focusVisible && 'focusVisible']
|
16946
|
-
};
|
16947
|
-
return composeClasses(slots, getLinkUtilityClass, classes);
|
16948
|
-
};
|
16949
|
-
const LinkRoot = styled$1(Typography$1, {
|
16950
|
-
name: 'MuiLink',
|
16951
|
-
slot: 'Root',
|
16952
|
-
overridesResolver: (props, styles) => {
|
16953
|
-
const {
|
16954
|
-
ownerState
|
16955
|
-
} = props;
|
16956
|
-
return [styles.root, styles[`underline${capitalize(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
|
16957
|
-
}
|
16958
|
-
})(({
|
16959
|
-
theme,
|
16960
|
-
ownerState
|
16961
|
-
}) => {
|
16962
|
-
return _extends({}, ownerState.underline === 'none' && {
|
16963
|
-
textDecoration: 'none'
|
16964
|
-
}, ownerState.underline === 'hover' && {
|
16965
|
-
textDecoration: 'none',
|
16966
|
-
'&:hover': {
|
16967
|
-
textDecoration: 'underline'
|
16968
|
-
}
|
16969
|
-
}, ownerState.underline === 'always' && _extends({
|
16970
|
-
textDecoration: 'underline'
|
16971
|
-
}, ownerState.color !== 'inherit' && {
|
16972
|
-
textDecorationColor: getTextDecoration$1({
|
16973
|
-
theme,
|
16974
|
-
ownerState
|
16975
|
-
})
|
16976
|
-
}, {
|
16977
|
-
'&:hover': {
|
16978
|
-
textDecorationColor: 'inherit'
|
16979
|
-
}
|
16980
|
-
}), ownerState.component === 'button' && {
|
16981
|
-
position: 'relative',
|
16982
|
-
WebkitTapHighlightColor: 'transparent',
|
16983
|
-
backgroundColor: 'transparent',
|
16984
|
-
// Reset default value
|
16985
|
-
// We disable the focus ring for mouse, touch and keyboard users.
|
16986
|
-
outline: 0,
|
16987
|
-
border: 0,
|
16988
|
-
margin: 0,
|
16989
|
-
// Remove the margin in Safari
|
16990
|
-
borderRadius: 0,
|
16991
|
-
padding: 0,
|
16992
|
-
// Remove the padding in Firefox
|
16993
|
-
cursor: 'pointer',
|
16994
|
-
userSelect: 'none',
|
16995
|
-
verticalAlign: 'middle',
|
16996
|
-
MozAppearance: 'none',
|
16997
|
-
// Reset
|
16998
|
-
WebkitAppearance: 'none',
|
16999
|
-
// Reset
|
17000
|
-
'&::-moz-focus-inner': {
|
17001
|
-
borderStyle: 'none' // Remove Firefox dotted outline.
|
17002
|
-
},
|
15113
|
+
function isHorizontal(anchor) {
|
15114
|
+
return ['left', 'right'].indexOf(anchor) !== -1;
|
15115
|
+
}
|
15116
|
+
function getAnchor(theme, anchor) {
|
15117
|
+
return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
|
15118
|
+
}
|
17003
15119
|
|
17004
|
-
|
17005
|
-
|
17006
|
-
|
17007
|
-
|
17008
|
-
|
17009
|
-
const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
|
15120
|
+
/**
|
15121
|
+
* The props of the [Modal](/material-ui/api/modal/) component are available
|
15122
|
+
* when `variant="temporary"` is set.
|
15123
|
+
*/
|
15124
|
+
const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
|
17010
15125
|
const props = useThemeProps({
|
17011
15126
|
props: inProps,
|
17012
|
-
name: '
|
15127
|
+
name: 'MuiDrawer'
|
17013
15128
|
});
|
15129
|
+
const theme = useTheme();
|
15130
|
+
const defaultTransitionDuration = {
|
15131
|
+
enter: theme.transitions.duration.enteringScreen,
|
15132
|
+
exit: theme.transitions.duration.leavingScreen
|
15133
|
+
};
|
17014
15134
|
const {
|
15135
|
+
anchor: anchorProp = 'left',
|
15136
|
+
BackdropProps,
|
15137
|
+
children,
|
17015
15138
|
className,
|
17016
|
-
|
17017
|
-
|
17018
|
-
|
17019
|
-
|
17020
|
-
|
17021
|
-
|
17022
|
-
|
17023
|
-
|
15139
|
+
elevation = 16,
|
15140
|
+
hideBackdrop = false,
|
15141
|
+
ModalProps: {
|
15142
|
+
BackdropProps: BackdropPropsProp
|
15143
|
+
} = {},
|
15144
|
+
onClose,
|
15145
|
+
open = false,
|
15146
|
+
PaperProps = {},
|
15147
|
+
SlideProps,
|
15148
|
+
// eslint-disable-next-line react/prop-types
|
15149
|
+
TransitionComponent = Slide$1,
|
15150
|
+
transitionDuration = defaultTransitionDuration,
|
15151
|
+
variant = 'temporary'
|
17024
15152
|
} = props,
|
17025
|
-
|
17026
|
-
|
17027
|
-
|
17028
|
-
|
17029
|
-
|
17030
|
-
|
17031
|
-
|
17032
|
-
|
17033
|
-
|
17034
|
-
|
17035
|
-
|
17036
|
-
|
17037
|
-
setFocusVisible(false);
|
17038
|
-
}
|
17039
|
-
if (onBlur) {
|
17040
|
-
onBlur(event);
|
17041
|
-
}
|
17042
|
-
};
|
17043
|
-
const handleFocus = event => {
|
17044
|
-
handleFocusVisible(event);
|
17045
|
-
if (isFocusVisibleRef.current === true) {
|
17046
|
-
setFocusVisible(true);
|
17047
|
-
}
|
17048
|
-
if (onFocus) {
|
17049
|
-
onFocus(event);
|
17050
|
-
}
|
17051
|
-
};
|
15153
|
+
ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
|
15154
|
+
other = _objectWithoutPropertiesLoose(props, _excluded2);
|
15155
|
+
|
15156
|
+
// Let's assume that the Drawer will always be rendered on user space.
|
15157
|
+
// We use this state is order to skip the appear transition during the
|
15158
|
+
// initial mount of the component.
|
15159
|
+
const mounted = React.useRef(false);
|
15160
|
+
React.useEffect(() => {
|
15161
|
+
mounted.current = true;
|
15162
|
+
}, []);
|
15163
|
+
const anchorInvariant = getAnchor(theme, anchorProp);
|
15164
|
+
const anchor = anchorProp;
|
17052
15165
|
const ownerState = _extends({}, props, {
|
17053
|
-
|
17054
|
-
|
17055
|
-
|
17056
|
-
underline,
|
15166
|
+
anchor,
|
15167
|
+
elevation,
|
15168
|
+
open,
|
17057
15169
|
variant
|
17058
|
-
});
|
15170
|
+
}, other);
|
17059
15171
|
const classes = useUtilityClasses(ownerState);
|
17060
|
-
|
17061
|
-
|
17062
|
-
|
17063
|
-
|
17064
|
-
|
17065
|
-
onBlur: handleBlur,
|
17066
|
-
onFocus: handleFocus,
|
17067
|
-
ref: handlerRef,
|
15172
|
+
const drawer = /*#__PURE__*/jsx(DrawerPaper, _extends({
|
15173
|
+
elevation: variant === 'temporary' ? elevation : 0,
|
15174
|
+
square: true
|
15175
|
+
}, PaperProps, {
|
15176
|
+
className: clsx(classes.paper, PaperProps.className),
|
17068
15177
|
ownerState: ownerState,
|
17069
|
-
|
17070
|
-
|
17071
|
-
|
17072
|
-
|
17073
|
-
|
15178
|
+
children: children
|
15179
|
+
}));
|
15180
|
+
if (variant === 'permanent') {
|
15181
|
+
return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
|
15182
|
+
className: clsx(classes.root, classes.docked, className),
|
15183
|
+
ownerState: ownerState,
|
15184
|
+
ref: ref
|
15185
|
+
}, other, {
|
15186
|
+
children: drawer
|
15187
|
+
}));
|
15188
|
+
}
|
15189
|
+
const slidingDrawer = /*#__PURE__*/jsx(TransitionComponent, _extends({
|
15190
|
+
in: open,
|
15191
|
+
direction: oppositeDirection[anchorInvariant],
|
15192
|
+
timeout: transitionDuration,
|
15193
|
+
appear: mounted.current
|
15194
|
+
}, SlideProps, {
|
15195
|
+
children: drawer
|
15196
|
+
}));
|
15197
|
+
if (variant === 'persistent') {
|
15198
|
+
return /*#__PURE__*/jsx(DrawerDockedRoot, _extends({
|
15199
|
+
className: clsx(classes.root, classes.docked, className),
|
15200
|
+
ownerState: ownerState,
|
15201
|
+
ref: ref
|
15202
|
+
}, other, {
|
15203
|
+
children: slidingDrawer
|
15204
|
+
}));
|
15205
|
+
}
|
15206
|
+
|
15207
|
+
// variant === temporary
|
15208
|
+
return /*#__PURE__*/jsx(DrawerRoot, _extends({
|
15209
|
+
BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
|
15210
|
+
transitionDuration
|
15211
|
+
}),
|
15212
|
+
className: clsx(classes.root, classes.modal, className),
|
15213
|
+
open: open,
|
15214
|
+
ownerState: ownerState,
|
15215
|
+
onClose: onClose,
|
15216
|
+
hideBackdrop: hideBackdrop,
|
15217
|
+
ref: ref
|
15218
|
+
}, other, ModalProps, {
|
15219
|
+
children: slidingDrawer
|
15220
|
+
}));
|
17074
15221
|
});
|
17075
|
-
process.env.NODE_ENV !== "production" ?
|
15222
|
+
process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */ = {
|
17076
15223
|
// ----------------------------- Warning --------------------------------
|
17077
15224
|
// | These PropTypes are generated from the TypeScript type definitions |
|
17078
15225
|
// | To update them edit the d.ts file and run "yarn proptypes" |
|
17079
15226
|
// ----------------------------------------------------------------------
|
15227
|
+
/**
|
15228
|
+
* Side from which the drawer will appear.
|
15229
|
+
* @default 'left'
|
15230
|
+
*/
|
15231
|
+
anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
15232
|
+
/**
|
15233
|
+
* @ignore
|
15234
|
+
*/
|
15235
|
+
BackdropProps: PropTypes.object,
|
17080
15236
|
/**
|
17081
15237
|
* The content of the component.
|
17082
15238
|
*/
|
@@ -17090,43 +15246,64 @@ process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ =
|
|
17090
15246
|
*/
|
17091
15247
|
className: PropTypes.string,
|
17092
15248
|
/**
|
17093
|
-
* The
|
17094
|
-
* @default
|
15249
|
+
* The elevation of the drawer.
|
15250
|
+
* @default 16
|
17095
15251
|
*/
|
17096
|
-
|
15252
|
+
elevation: integerPropType,
|
17097
15253
|
/**
|
17098
|
-
*
|
17099
|
-
*
|
15254
|
+
* If `true`, the backdrop is not rendered.
|
15255
|
+
* @default false
|
17100
15256
|
*/
|
17101
|
-
|
15257
|
+
hideBackdrop: PropTypes.bool,
|
17102
15258
|
/**
|
17103
|
-
*
|
15259
|
+
* Props applied to the [`Modal`](/material-ui/api/modal/) element.
|
15260
|
+
* @default {}
|
17104
15261
|
*/
|
17105
|
-
|
15262
|
+
ModalProps: PropTypes.object,
|
17106
15263
|
/**
|
17107
|
-
*
|
15264
|
+
* Callback fired when the component requests to be closed.
|
15265
|
+
*
|
15266
|
+
* @param {object} event The event source of the callback.
|
17108
15267
|
*/
|
17109
|
-
|
15268
|
+
onClose: PropTypes.func,
|
17110
15269
|
/**
|
17111
|
-
*
|
15270
|
+
* If `true`, the component is shown.
|
15271
|
+
* @default false
|
17112
15272
|
*/
|
17113
|
-
|
15273
|
+
open: PropTypes.bool,
|
17114
15274
|
/**
|
17115
|
-
*
|
15275
|
+
* Props applied to the [`Paper`](/material-ui/api/paper/) element.
|
15276
|
+
* @default {}
|
17116
15277
|
*/
|
17117
|
-
|
15278
|
+
PaperProps: PropTypes.object,
|
17118
15279
|
/**
|
17119
|
-
*
|
17120
|
-
* @default 'always'
|
15280
|
+
* Props applied to the [`Slide`](/material-ui/api/slide/) element.
|
17121
15281
|
*/
|
17122
|
-
|
15282
|
+
SlideProps: PropTypes.object,
|
17123
15283
|
/**
|
17124
|
-
*
|
17125
|
-
|
15284
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
15285
|
+
*/
|
15286
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
15287
|
+
/**
|
15288
|
+
* The duration for the transition, in milliseconds.
|
15289
|
+
* You may specify a single timeout for all transitions, or individually with an object.
|
15290
|
+
* @default {
|
15291
|
+
* enter: theme.transitions.duration.enteringScreen,
|
15292
|
+
* exit: theme.transitions.duration.leavingScreen,
|
15293
|
+
* }
|
15294
|
+
*/
|
15295
|
+
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
15296
|
+
appear: PropTypes.number,
|
15297
|
+
enter: PropTypes.number,
|
15298
|
+
exit: PropTypes.number
|
15299
|
+
})]),
|
15300
|
+
/**
|
15301
|
+
* The variant to use.
|
15302
|
+
* @default 'temporary'
|
17126
15303
|
*/
|
17127
|
-
variant: PropTypes
|
15304
|
+
variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
|
17128
15305
|
} : void 0;
|
17129
|
-
var
|
15306
|
+
var Drawer$1 = Drawer;
|
17130
15307
|
|
17131
15308
|
const Stack = createStack({
|
17132
15309
|
createStyledComponent: styled$1('div', {
|
@@ -17201,40 +15378,45 @@ const EmptyState = ({
|
|
17201
15378
|
content,
|
17202
15379
|
actions
|
17203
15380
|
}) => {
|
17204
|
-
return
|
17205
|
-
|
17206
|
-
|
17207
|
-
|
17208
|
-
|
17209
|
-
|
17210
|
-
|
17211
|
-
|
17212
|
-
|
17213
|
-
|
17214
|
-
|
17215
|
-
|
17216
|
-
|
17217
|
-
|
17218
|
-
|
17219
|
-
|
17220
|
-
|
17221
|
-
|
17222
|
-
|
17223
|
-
|
17224
|
-
|
17225
|
-
|
17226
|
-
|
17227
|
-
|
17228
|
-
|
17229
|
-
|
17230
|
-
|
17231
|
-
|
17232
|
-
|
17233
|
-
|
17234
|
-
|
17235
|
-
|
17236
|
-
|
17237
|
-
|
15381
|
+
return jsx(Card$1, {
|
15382
|
+
elevation: 1,
|
15383
|
+
children: jsxs(CardContent$1, {
|
15384
|
+
sx: {
|
15385
|
+
display: 'flex',
|
15386
|
+
alignItems: 'center',
|
15387
|
+
justifyContent: 'center',
|
15388
|
+
flexDirection: 'column',
|
15389
|
+
gap: 4
|
15390
|
+
},
|
15391
|
+
children: [jsx("svg", {
|
15392
|
+
style: {
|
15393
|
+
width: 206,
|
15394
|
+
height: 187
|
15395
|
+
},
|
15396
|
+
children: jsx("use", {
|
15397
|
+
xlinkHref: `${sincoIconos}#${UrlImage[_state]}`
|
15398
|
+
})
|
15399
|
+
}), jsxs(Stack$1, {
|
15400
|
+
direction: "column",
|
15401
|
+
spacing: 2,
|
15402
|
+
children: [title && jsx(Typography$1, {
|
15403
|
+
variant: "h6",
|
15404
|
+
textAlign: "center",
|
15405
|
+
children: title
|
15406
|
+
}), content && jsx(Typography$1, {
|
15407
|
+
variant: "body1",
|
15408
|
+
textAlign: "center",
|
15409
|
+
color: "text.secondary",
|
15410
|
+
children: content
|
15411
|
+
}), _state === 'create' && actions && jsx(Stack$1, {
|
15412
|
+
direction: "row",
|
15413
|
+
spacing: 2,
|
15414
|
+
justifyContent: "center",
|
15415
|
+
children: actions
|
15416
|
+
})]
|
15417
|
+
})]
|
15418
|
+
})
|
15419
|
+
});
|
17238
15420
|
};
|
17239
15421
|
|
17240
15422
|
var wellKnownSymbol$a = wellKnownSymbol$f;
|
@@ -17706,41 +15888,41 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
|
|
17706
15888
|
default_1 = Close.default = _default;
|
17707
15889
|
|
17708
15890
|
const stylesDrawerContainer = {
|
17709
|
-
display:
|
17710
|
-
flexDirection:
|
17711
|
-
alignContent:
|
17712
|
-
justifyContent:
|
17713
|
-
width:
|
17714
|
-
height:
|
17715
|
-
overflow:
|
15891
|
+
display: 'flex',
|
15892
|
+
flexDirection: 'column',
|
15893
|
+
alignContent: 'flex-start',
|
15894
|
+
justifyContent: 'space-between',
|
15895
|
+
width: '530px',
|
15896
|
+
height: '100%',
|
15897
|
+
overflow: 'hidden'
|
17716
15898
|
};
|
17717
15899
|
const stylesEncabezado = {
|
17718
|
-
display:
|
17719
|
-
alignContent:
|
17720
|
-
justifyContent:
|
17721
|
-
backgroundColor:
|
17722
|
-
py:
|
17723
|
-
px:
|
15900
|
+
display: 'flex',
|
15901
|
+
alignContent: 'center',
|
15902
|
+
justifyContent: 'space-between',
|
15903
|
+
backgroundColor: 'secondary.main',
|
15904
|
+
py: '12px',
|
15905
|
+
px: '8px'
|
17724
15906
|
};
|
17725
15907
|
const stylesContenido = {
|
17726
|
-
display:
|
17727
|
-
overflow:
|
17728
|
-
alignItems:
|
17729
|
-
flexDirection:
|
17730
|
-
height:
|
17731
|
-
py:
|
17732
|
-
px:
|
15908
|
+
display: 'flex',
|
15909
|
+
overflow: 'auto',
|
15910
|
+
alignItems: 'flex-start',
|
15911
|
+
flexDirection: 'column',
|
15912
|
+
height: '-webkit-fill-available',
|
15913
|
+
py: '12px',
|
15914
|
+
px: '8px'
|
17733
15915
|
};
|
17734
15916
|
const stylesAcciones = {
|
17735
|
-
display:
|
17736
|
-
alignContent:
|
17737
|
-
justifyContent:
|
17738
|
-
borderTop:
|
17739
|
-
backgroundColor:
|
17740
|
-
mt:
|
17741
|
-
gap:
|
17742
|
-
py:
|
17743
|
-
px:
|
15917
|
+
display: 'flex',
|
15918
|
+
alignContent: 'center',
|
15919
|
+
justifyContent: 'flex-end',
|
15920
|
+
borderTop: '1px solid rgba(16, 24, 64, 0.23)',
|
15921
|
+
backgroundColor: '#F1F0EE',
|
15922
|
+
mt: '4px',
|
15923
|
+
gap: '8px',
|
15924
|
+
py: '12px',
|
15925
|
+
px: '8px'
|
17744
15926
|
};
|
17745
15927
|
const DrawerComponent = ({
|
17746
15928
|
open,
|
@@ -17754,271 +15936,41 @@ const DrawerComponent = ({
|
|
17754
15936
|
const mostrarAcciones = () => {
|
17755
15937
|
setShowActions(true);
|
17756
15938
|
};
|
17757
|
-
return
|
17758
|
-
theme: SincoTheme
|
17759
|
-
}, /*#__PURE__*/React__default.createElement(Drawer$1, {
|
15939
|
+
return jsx(Drawer$1, {
|
17760
15940
|
anchor: anchor,
|
17761
15941
|
open: open,
|
17762
|
-
onClose: onClose
|
17763
|
-
|
17764
|
-
sx: stylesDrawerContainer
|
17765
|
-
}, /*#__PURE__*/React__default.createElement(Box$2, {
|
17766
|
-
sx: stylesEncabezado
|
17767
|
-
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17768
|
-
variant: "h6"
|
17769
|
-
}, titulo), /*#__PURE__*/React__default.createElement(Box$2, null, /*#__PURE__*/React__default.createElement(IconButton$1, {
|
17770
|
-
onClick: onClose,
|
17771
|
-
size: "small"
|
17772
|
-
}, /*#__PURE__*/React__default.createElement(default_1, {
|
17773
|
-
fontSize: "small"
|
17774
|
-
})))), /*#__PURE__*/React__default.createElement(Box$2, {
|
17775
|
-
onClick: mostrarAcciones,
|
17776
|
-
sx: stylesContenido
|
17777
|
-
}, children), showActions && /*#__PURE__*/React__default.createElement(Box$2, {
|
17778
|
-
sx: stylesAcciones
|
17779
|
-
}, acciones))));
|
17780
|
-
};
|
17781
|
-
|
17782
|
-
const ToastContent = styled$1(Stack$1)(() => ({
|
17783
|
-
position: "fixed",
|
17784
|
-
zIndex: 1400,
|
17785
|
-
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)",
|
17786
|
-
right: 16,
|
17787
|
-
marginTop: 16
|
17788
|
-
}));
|
17789
|
-
const ContentBox = styled$1(Box$2)(({
|
17790
|
-
theme
|
17791
|
-
}) => ({
|
17792
|
-
padding: theme.spacing(1.5),
|
17793
|
-
gap: theme.spacing(1.5),
|
17794
|
-
display: "flex",
|
17795
|
-
alignItems: "center",
|
17796
|
-
"&.color-error": {
|
17797
|
-
backgroundColor: "#FEEBEE"
|
17798
|
-
},
|
17799
|
-
"&.color-info": {
|
17800
|
-
backgroundColor: "#E1F5FE"
|
17801
|
-
},
|
17802
|
-
"&.color-warning": {
|
17803
|
-
backgroundColor: "#FFF3E0"
|
17804
|
-
},
|
17805
|
-
"&.color-success": {
|
17806
|
-
backgroundColor: "#E8F5E9"
|
17807
|
-
}
|
17808
|
-
}));
|
17809
|
-
const RippleIcon = styled$1(Stack$1)(({
|
17810
|
-
theme
|
17811
|
-
}) => ({
|
17812
|
-
padding: theme.spacing(1),
|
17813
|
-
gap: theme.spacing(1),
|
17814
|
-
height: 20,
|
17815
|
-
borderRadius: 50,
|
17816
|
-
"&.ripple-error": {
|
17817
|
-
backgroundColor: "#D143431F"
|
17818
|
-
},
|
17819
|
-
"&.ripple-info": {
|
17820
|
-
backgroundColor: "#2D9FC51F"
|
17821
|
-
},
|
17822
|
-
"&.ripple-warning": {
|
17823
|
-
backgroundColor: "#FB85001F"
|
17824
|
-
},
|
17825
|
-
"&.ripple-success": {
|
17826
|
-
backgroundColor: "#8FC93A1F"
|
17827
|
-
}
|
17828
|
-
}));
|
17829
|
-
const ContentIcon = styled$1(Stack$1)(({
|
17830
|
-
theme
|
17831
|
-
}) => ({
|
17832
|
-
"&.icon-color.color-info": {
|
17833
|
-
color: theme.palette.info.main
|
17834
|
-
},
|
17835
|
-
"&.icon-color.color-error": {
|
17836
|
-
color: theme.palette.error.main
|
17837
|
-
},
|
17838
|
-
"&.icon-color.color-warning": {
|
17839
|
-
color: theme.palette.warning.main
|
17840
|
-
},
|
17841
|
-
"&.icon-color.color-success": {
|
17842
|
-
color: theme.palette.success.main
|
17843
|
-
}
|
17844
|
-
}));
|
17845
|
-
const ToastNotification = toast => {
|
17846
|
-
const [openToast, setOpenToast] = useState(true);
|
17847
|
-
const [showOptions, setShowOptions] = useState(true);
|
17848
|
-
const [progress, setProgress] = useState(100);
|
17849
|
-
const timeProgress = toast.time || 8000;
|
17850
|
-
const IconMap = {
|
17851
|
-
success: /*#__PURE__*/React__default.createElement(CheckCircleRounded, null),
|
17852
|
-
error: /*#__PURE__*/React__default.createElement(ErrorRounded, null),
|
17853
|
-
warning: /*#__PURE__*/React__default.createElement(WarningRounded, null),
|
17854
|
-
info: /*#__PURE__*/React__default.createElement(InfoRounded, null)
|
17855
|
-
};
|
17856
|
-
const ToastIcon = IconMap[toast.type || "info"];
|
17857
|
-
const colorMap = {
|
17858
|
-
success: "success",
|
17859
|
-
error: "error",
|
17860
|
-
warning: "warning",
|
17861
|
-
info: "info"
|
17862
|
-
};
|
17863
|
-
const colors = colorMap[toast.type || "info"];
|
17864
|
-
const toastPosition = {
|
17865
|
-
center: "center",
|
17866
|
-
end: "end",
|
17867
|
-
start: "start"
|
17868
|
-
};
|
17869
|
-
toastPosition[toast.position || "end"];
|
17870
|
-
const close = () => {
|
17871
|
-
setOpenToast(false);
|
17872
|
-
};
|
17873
|
-
const toggleOptions = () => {
|
17874
|
-
setShowOptions(prevShowOptions => !prevShowOptions);
|
17875
|
-
};
|
17876
|
-
const seeOptions = toast.seeMore;
|
17877
|
-
useEffect(() => {
|
17878
|
-
let seconds = 0;
|
17879
|
-
const interval = setInterval(() => {
|
17880
|
-
seconds += 100;
|
17881
|
-
const progress = 100 - seconds / timeProgress * 100;
|
17882
|
-
setProgress(progress <= 0 ? 0 : progress);
|
17883
|
-
}, 100);
|
17884
|
-
const closeTimeout = setTimeout(() => {
|
17885
|
-
clearInterval(interval);
|
17886
|
-
setOpenToast(false);
|
17887
|
-
}, timeProgress);
|
17888
|
-
return () => {
|
17889
|
-
clearInterval(interval);
|
17890
|
-
clearTimeout(closeTimeout);
|
17891
|
-
};
|
17892
|
-
}, [timeProgress]);
|
17893
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
17894
|
-
theme: SincoTheme
|
17895
|
-
}, /*#__PURE__*/React__default.createElement(Stack$1, {
|
17896
|
-
height: 105,
|
17897
|
-
top: 16,
|
17898
|
-
right: 16,
|
17899
|
-
position: "absolute",
|
17900
|
-
zIndex: 1400
|
17901
|
-
}, /*#__PURE__*/React__default.createElement(ToastContent, {
|
17902
|
-
position: "fixed"
|
17903
|
-
}, /*#__PURE__*/React__default.createElement(ContentBox, {
|
17904
|
-
className: `color-${toast.type || "info"}`
|
17905
|
-
}, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
|
17906
|
-
className: `ripple-${toast.type || "info"}`
|
17907
|
-
}, /*#__PURE__*/React__default.createElement(ContentIcon, {
|
17908
|
-
className: `icon-color color-${toast.type || "info"}`
|
17909
|
-
}, ToastIcon)), /*#__PURE__*/React__default.createElement(Divider$1, {
|
17910
|
-
orientation: "vertical",
|
17911
|
-
flexItem: true
|
17912
|
-
}), /*#__PURE__*/React__default.createElement(Stack$1, {
|
17913
|
-
gap: 0.5,
|
17914
|
-
width: 285
|
17915
|
-
}, /*#__PURE__*/React__default.createElement(Stack$1, {
|
17916
|
-
justifyContent: "space-between",
|
17917
|
-
flexDirection: "row",
|
17918
|
-
alignItems: "center"
|
17919
|
-
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17920
|
-
variant: "subtitle2",
|
17921
|
-
color: "text.primary"
|
17922
|
-
}, toast.title), /*#__PURE__*/React__default.createElement(IconButton$1, {
|
17923
|
-
size: "small",
|
17924
|
-
"aria-label": "delete",
|
17925
|
-
onClick: close
|
17926
|
-
}, /*#__PURE__*/React__default.createElement(Close$1, null))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
17927
|
-
gap: "4px"
|
17928
|
-
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
17929
|
-
color: "text.primary",
|
17930
|
-
variant: "body2"
|
17931
|
-
}, toast.subtitle), !showOptions && toast.dataOpt && toast.dataOpt.length > 0 && /*#__PURE__*/React__default.createElement("ul", {
|
17932
|
-
style: {
|
17933
|
-
paddingLeft: 15,
|
17934
|
-
marginBlock: 0,
|
17935
|
-
fontSize: 11,
|
17936
|
-
color: "#101840de"
|
17937
|
-
}
|
17938
|
-
}, toast.dataOpt.map((element, i) => {
|
17939
|
-
const keyElement = Object.keys(element);
|
17940
|
-
let options = "";
|
17941
|
-
for (let _i = 0; _i < keyElement.length; _i++) {
|
17942
|
-
options += element[keyElement[_i]];
|
17943
|
-
}
|
17944
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
15942
|
+
onClose: onClose,
|
15943
|
+
PaperProps: {
|
17945
15944
|
style: {
|
17946
|
-
|
17947
|
-
}
|
17948
|
-
|
17949
|
-
|
17950
|
-
|
17951
|
-
|
17952
|
-
|
17953
|
-
|
17954
|
-
|
17955
|
-
|
17956
|
-
|
17957
|
-
|
17958
|
-
|
17959
|
-
|
17960
|
-
|
17961
|
-
|
17962
|
-
|
17963
|
-
|
17964
|
-
|
17965
|
-
|
17966
|
-
|
17967
|
-
|
15945
|
+
borderRadius: '8px 0px 0px 0px'
|
15946
|
+
}
|
15947
|
+
},
|
15948
|
+
children: jsxs(Box$2, {
|
15949
|
+
sx: stylesDrawerContainer,
|
15950
|
+
children: [jsxs(Box$2, {
|
15951
|
+
sx: stylesEncabezado,
|
15952
|
+
children: [jsx(Typography$1, {
|
15953
|
+
variant: "h6",
|
15954
|
+
children: titulo
|
15955
|
+
}), jsx(Box$2, {
|
15956
|
+
children: jsx(IconButton$1, {
|
15957
|
+
onClick: onClose,
|
15958
|
+
size: "small",
|
15959
|
+
children: jsx(default_1, {
|
15960
|
+
fontSize: "small"
|
15961
|
+
})
|
15962
|
+
})
|
15963
|
+
})]
|
15964
|
+
}), jsx(Box$2, {
|
15965
|
+
onClick: mostrarAcciones,
|
15966
|
+
sx: stylesContenido,
|
15967
|
+
children: children
|
15968
|
+
}), showActions && jsx(Box$2, {
|
15969
|
+
sx: stylesAcciones,
|
15970
|
+
children: acciones
|
15971
|
+
})]
|
17968
15972
|
})
|
17969
|
-
}
|
17970
|
-
color: colors,
|
17971
|
-
variant: "determinate",
|
17972
|
-
value: progress
|
17973
|
-
})))));
|
17974
|
-
};
|
17975
|
-
|
17976
|
-
const PageContent = styled$1(Stack$1)(({
|
17977
|
-
theme
|
17978
|
-
}) => ({
|
17979
|
-
backgroundColor: "#fff",
|
17980
|
-
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)",
|
17981
|
-
zIndex: 100,
|
17982
|
-
padding: "8px 24px",
|
17983
|
-
justifyContent: "space-between",
|
17984
|
-
minHeight: 39,
|
17985
|
-
position: "fixed",
|
17986
|
-
width: "100%"
|
17987
|
-
}));
|
17988
|
-
const PageHeader = page => {
|
17989
|
-
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
17990
|
-
theme: SincoTheme
|
17991
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
17992
|
-
style: {
|
17993
|
-
minHeight: 56
|
17994
|
-
}
|
17995
|
-
}, /*#__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) => {
|
17996
|
-
return /*#__PURE__*/React__default.createElement(Link$1, {
|
17997
|
-
underline: "hover",
|
17998
|
-
color: "inherit",
|
17999
|
-
href: element.link,
|
18000
|
-
key: i
|
18001
|
-
}, element.name);
|
18002
|
-
})), /*#__PURE__*/React__default.createElement(Stack$1, {
|
18003
|
-
width: "90%",
|
18004
|
-
justifyContent: "space-between",
|
18005
|
-
flexDirection: "row",
|
18006
|
-
alignItems: "center"
|
18007
|
-
}, /*#__PURE__*/React__default.createElement(Stack$1, {
|
18008
|
-
gap: 1.5,
|
18009
|
-
flexDirection: "row",
|
18010
|
-
alignItems: "center"
|
18011
|
-
}, page.back, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
|
18012
|
-
variant: "h6",
|
18013
|
-
color: "text.primary"
|
18014
|
-
}, page.title), /*#__PURE__*/React__default.createElement(Typography$1, {
|
18015
|
-
variant: "caption",
|
18016
|
-
color: "text.secondary"
|
18017
|
-
}, page.subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
18018
|
-
gap: 1,
|
18019
|
-
alignItems: "center",
|
18020
|
-
flexDirection: "row"
|
18021
|
-
}, page.actions)), page.tabs)));
|
15973
|
+
});
|
18022
15974
|
};
|
18023
15975
|
|
18024
15976
|
var classof$2 = classofRaw$2;
|
@@ -23476,4 +21428,4 @@ const useDynamicColor = url => {
|
|
23476
21428
|
};
|
23477
21429
|
};
|
23478
21430
|
|
23479
|
-
export { DrawerComponent, EmptyState,
|
21431
|
+
export { DrawerComponent, EmptyState, SincoTheme, UrlImage, useDynamicColor };
|