@sinco/react 1.0.4-rc.0 → 1.0.4-rc.10
Sign up to get free protection for your applications and to get access to all the features.
- package/index.js +143 -301
- package/package.json +1 -1
- package/src/index.d.ts +1 -3
- package/src/lib/Components/ToastNotification/ToastNofitication.d.ts +14 -0
- package/src/lib/Components/index.d.ts +2 -0
- package/src/lib/Components/pageHeader/PageHeader.d.ts +15 -0
- package/src/lib/toastNotification/ToastNofitication.d.ts +0 -4
- package/src/lib/toastNotification/interfaces.d.ts +0 -22
package/index.js
CHANGED
@@ -2279,26 +2279,6 @@ function elementTypeAcceptingRef(props, propName, componentName, location, propF
|
|
2279
2279
|
}
|
2280
2280
|
var elementTypeAcceptingRef$1 = chainPropTypes(PropTypes.elementType, elementTypeAcceptingRef);
|
2281
2281
|
|
2282
|
-
// This module is based on https://github.com/airbnb/prop-types-exact repository.
|
2283
|
-
// However, in order to reduce the number of dependencies and to remove some extra safe checks
|
2284
|
-
// the module was forked.
|
2285
|
-
const specialProperty = 'exact-prop: \u200b';
|
2286
|
-
function exactProp(propTypes) {
|
2287
|
-
if (process.env.NODE_ENV === 'production') {
|
2288
|
-
return propTypes;
|
2289
|
-
}
|
2290
|
-
return {
|
2291
|
-
...propTypes,
|
2292
|
-
[specialProperty]: props => {
|
2293
|
-
const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
|
2294
|
-
if (unsupportedProps.length > 0) {
|
2295
|
-
return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
|
2296
|
-
}
|
2297
|
-
return null;
|
2298
|
-
}
|
2299
|
-
};
|
2300
|
-
}
|
2301
|
-
|
2302
2282
|
/**
|
2303
2283
|
* WARNING: Don't import this directly.
|
2304
2284
|
* Use `MuiError` from `@mui/utils/macros/MuiError.macro` instead.
|
@@ -5156,10 +5136,10 @@ if (!isBrowser$2) {
|
|
5156
5136
|
};
|
5157
5137
|
}
|
5158
5138
|
|
5159
|
-
var ThemeContext
|
5139
|
+
var ThemeContext = /* #__PURE__ */React.createContext({});
|
5160
5140
|
|
5161
5141
|
if (process.env.NODE_ENV !== 'production') {
|
5162
|
-
ThemeContext
|
5142
|
+
ThemeContext.displayName = 'EmotionThemeContext';
|
5163
5143
|
}
|
5164
5144
|
|
5165
5145
|
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
|
@@ -5212,7 +5192,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
|
|
5212
5192
|
className = props.className + " ";
|
5213
5193
|
}
|
5214
5194
|
|
5215
|
-
var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext
|
5195
|
+
var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
|
5216
5196
|
|
5217
5197
|
if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
|
5218
5198
|
var labelFromStack = props[labelPropName];
|
@@ -5391,7 +5371,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
|
|
5391
5371
|
}
|
5392
5372
|
|
5393
5373
|
var styles = props.styles;
|
5394
|
-
var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext
|
5374
|
+
var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));
|
5395
5375
|
|
5396
5376
|
if (!isBrowser$2) {
|
5397
5377
|
var _ref;
|
@@ -5637,7 +5617,7 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
|
|
5637
5617
|
var content = {
|
5638
5618
|
css: css,
|
5639
5619
|
cx: cx,
|
5640
|
-
theme: React.useContext(ThemeContext
|
5620
|
+
theme: React.useContext(ThemeContext)
|
5641
5621
|
};
|
5642
5622
|
var ele = props.children(content);
|
5643
5623
|
hasRendered = true;
|
@@ -5793,7 +5773,7 @@ var createStyled$1 = function createStyled(tag, options) {
|
|
5793
5773
|
mergedProps[key] = props[key];
|
5794
5774
|
}
|
5795
5775
|
|
5796
|
-
mergedProps.theme = React.useContext(ThemeContext
|
5776
|
+
mergedProps.theme = React.useContext(ThemeContext);
|
5797
5777
|
}
|
5798
5778
|
|
5799
5779
|
if (typeof props.className === 'string') {
|
@@ -5897,7 +5877,7 @@ const internal_processStyles = (tag, processor) => {
|
|
5897
5877
|
}
|
5898
5878
|
};
|
5899
5879
|
|
5900
|
-
const _excluded$
|
5880
|
+
const _excluded$i = ["values", "unit", "step"];
|
5901
5881
|
const sortBreakpointsValues = values => {
|
5902
5882
|
const breakpointsAsArray = Object.keys(values).map(key => ({
|
5903
5883
|
key,
|
@@ -5932,7 +5912,7 @@ function createBreakpoints(breakpoints) {
|
|
5932
5912
|
unit = 'px',
|
5933
5913
|
step = 5
|
5934
5914
|
} = breakpoints,
|
5935
|
-
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$
|
5915
|
+
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$i);
|
5936
5916
|
const sortedValues = sortBreakpointsValues(values);
|
5937
5917
|
const keys = Object.keys(sortedValues);
|
5938
5918
|
function up(key) {
|
@@ -7016,7 +6996,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
|
|
7016
6996
|
styleFunctionSx.filterProps = ['sx'];
|
7017
6997
|
var styleFunctionSx$1 = styleFunctionSx;
|
7018
6998
|
|
7019
|
-
const _excluded$
|
6999
|
+
const _excluded$h = ["breakpoints", "palette", "spacing", "shape"];
|
7020
7000
|
function createTheme$1(options = {}, ...args) {
|
7021
7001
|
const {
|
7022
7002
|
breakpoints: breakpointsInput = {},
|
@@ -7024,7 +7004,7 @@ function createTheme$1(options = {}, ...args) {
|
|
7024
7004
|
spacing: spacingInput,
|
7025
7005
|
shape: shapeInput = {}
|
7026
7006
|
} = options,
|
7027
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
7007
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$h);
|
7028
7008
|
const breakpoints = createBreakpoints(breakpointsInput);
|
7029
7009
|
const spacing = createSpacing(spacingInput);
|
7030
7010
|
let muiTheme = deepmerge({
|
@@ -7052,17 +7032,17 @@ function createTheme$1(options = {}, ...args) {
|
|
7052
7032
|
function isObjectEmpty(obj) {
|
7053
7033
|
return Object.keys(obj).length === 0;
|
7054
7034
|
}
|
7055
|
-
function useTheme$
|
7056
|
-
const contextTheme = React.useContext(ThemeContext
|
7035
|
+
function useTheme$2(defaultTheme = null) {
|
7036
|
+
const contextTheme = React.useContext(ThemeContext);
|
7057
7037
|
return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
|
7058
7038
|
}
|
7059
7039
|
|
7060
7040
|
const systemDefaultTheme$1 = createTheme$1();
|
7061
|
-
function useTheme$
|
7062
|
-
return useTheme$
|
7041
|
+
function useTheme$1(defaultTheme = systemDefaultTheme$1) {
|
7042
|
+
return useTheme$2(defaultTheme);
|
7063
7043
|
}
|
7064
7044
|
|
7065
|
-
const _excluded$
|
7045
|
+
const _excluded$g = ["sx"];
|
7066
7046
|
const splitProps = props => {
|
7067
7047
|
var _props$theme$unstable, _props$theme;
|
7068
7048
|
const result = {
|
@@ -7083,7 +7063,7 @@ function extendSxProp(props) {
|
|
7083
7063
|
const {
|
7084
7064
|
sx: inSx
|
7085
7065
|
} = props,
|
7086
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
7066
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$g);
|
7087
7067
|
const {
|
7088
7068
|
systemProps,
|
7089
7069
|
otherProps
|
@@ -7109,7 +7089,7 @@ function extendSxProp(props) {
|
|
7109
7089
|
|
7110
7090
|
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}
|
7111
7091
|
|
7112
|
-
const _excluded$
|
7092
|
+
const _excluded$f = ["className", "component"];
|
7113
7093
|
function createBox(options = {}) {
|
7114
7094
|
const {
|
7115
7095
|
themeId,
|
@@ -7121,13 +7101,13 @@ function createBox(options = {}) {
|
|
7121
7101
|
shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
|
7122
7102
|
})(styleFunctionSx$1);
|
7123
7103
|
const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
|
7124
|
-
const theme = useTheme$
|
7104
|
+
const theme = useTheme$1(defaultTheme);
|
7125
7105
|
const _extendSxProp = extendSxProp(inProps),
|
7126
7106
|
{
|
7127
7107
|
className,
|
7128
7108
|
component = 'div'
|
7129
7109
|
} = _extendSxProp,
|
7130
|
-
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$
|
7110
|
+
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$f);
|
7131
7111
|
return /*#__PURE__*/jsx(BoxRoot, _extends({
|
7132
7112
|
as: component,
|
7133
7113
|
ref: ref,
|
@@ -7138,7 +7118,7 @@ function createBox(options = {}) {
|
|
7138
7118
|
return Box;
|
7139
7119
|
}
|
7140
7120
|
|
7141
|
-
const _excluded$
|
7121
|
+
const _excluded$e = ["variant"];
|
7142
7122
|
function isEmpty$1(string) {
|
7143
7123
|
return string.length === 0;
|
7144
7124
|
}
|
@@ -7152,7 +7132,7 @@ function propsToClassKey(props) {
|
|
7152
7132
|
const {
|
7153
7133
|
variant
|
7154
7134
|
} = props,
|
7155
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
7135
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$e);
|
7156
7136
|
let classKey = variant || '';
|
7157
7137
|
Object.keys(other).sort().forEach(key => {
|
7158
7138
|
if (key === 'color') {
|
@@ -7164,7 +7144,7 @@ function propsToClassKey(props) {
|
|
7164
7144
|
return classKey;
|
7165
7145
|
}
|
7166
7146
|
|
7167
|
-
const _excluded$
|
7147
|
+
const _excluded$d = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
|
7168
7148
|
function isEmpty(obj) {
|
7169
7149
|
return Object.keys(obj).length === 0;
|
7170
7150
|
}
|
@@ -7259,7 +7239,7 @@ function createStyled(input = {}) {
|
|
7259
7239
|
skipSx: inputSkipSx,
|
7260
7240
|
overridesResolver
|
7261
7241
|
} = inputOptions,
|
7262
|
-
options = _objectWithoutPropertiesLoose(inputOptions, _excluded$
|
7242
|
+
options = _objectWithoutPropertiesLoose(inputOptions, _excluded$d);
|
7263
7243
|
|
7264
7244
|
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
|
7265
7245
|
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
|
@@ -7393,7 +7373,7 @@ function useThemeProps$1({
|
|
7393
7373
|
defaultTheme,
|
7394
7374
|
themeId
|
7395
7375
|
}) {
|
7396
|
-
let theme = useTheme$
|
7376
|
+
let theme = useTheme$1(defaultTheme);
|
7397
7377
|
if (themeId) {
|
7398
7378
|
theme = theme[themeId] || theme;
|
7399
7379
|
}
|
@@ -7639,157 +7619,7 @@ function lighten(color, coefficient) {
|
|
7639
7619
|
return recomposeColor(color);
|
7640
7620
|
}
|
7641
7621
|
|
7642
|
-
const
|
7643
|
-
if (process.env.NODE_ENV !== 'production') {
|
7644
|
-
ThemeContext.displayName = 'ThemeContext';
|
7645
|
-
}
|
7646
|
-
var ThemeContext$1 = ThemeContext;
|
7647
|
-
|
7648
|
-
function useTheme$1() {
|
7649
|
-
const theme = React.useContext(ThemeContext$1);
|
7650
|
-
if (process.env.NODE_ENV !== 'production') {
|
7651
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
7652
|
-
React.useDebugValue(theme);
|
7653
|
-
}
|
7654
|
-
return theme;
|
7655
|
-
}
|
7656
|
-
|
7657
|
-
const hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
7658
|
-
var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
|
7659
|
-
|
7660
|
-
function mergeOuterLocalTheme(outerTheme, localTheme) {
|
7661
|
-
if (typeof localTheme === 'function') {
|
7662
|
-
const mergedTheme = localTheme(outerTheme);
|
7663
|
-
if (process.env.NODE_ENV !== 'production') {
|
7664
|
-
if (!mergedTheme) {
|
7665
|
-
console.error(['MUI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
|
7666
|
-
}
|
7667
|
-
}
|
7668
|
-
return mergedTheme;
|
7669
|
-
}
|
7670
|
-
return {
|
7671
|
-
...outerTheme,
|
7672
|
-
...localTheme
|
7673
|
-
};
|
7674
|
-
}
|
7675
|
-
|
7676
|
-
/**
|
7677
|
-
* This component takes a `theme` prop.
|
7678
|
-
* It makes the `theme` available down the React tree thanks to React context.
|
7679
|
-
* This component should preferably be used at **the root of your component tree**.
|
7680
|
-
*/
|
7681
|
-
function ThemeProvider$2(props) {
|
7682
|
-
const {
|
7683
|
-
children,
|
7684
|
-
theme: localTheme
|
7685
|
-
} = props;
|
7686
|
-
const outerTheme = useTheme$1();
|
7687
|
-
if (process.env.NODE_ENV !== 'production') {
|
7688
|
-
if (outerTheme === null && typeof localTheme === 'function') {
|
7689
|
-
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'));
|
7690
|
-
}
|
7691
|
-
}
|
7692
|
-
const theme = React.useMemo(() => {
|
7693
|
-
const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
|
7694
|
-
if (output != null) {
|
7695
|
-
output[nested] = outerTheme !== null;
|
7696
|
-
}
|
7697
|
-
return output;
|
7698
|
-
}, [localTheme, outerTheme]);
|
7699
|
-
return /*#__PURE__*/jsx(ThemeContext$1.Provider, {
|
7700
|
-
value: theme,
|
7701
|
-
children: children
|
7702
|
-
});
|
7703
|
-
}
|
7704
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = {
|
7705
|
-
/**
|
7706
|
-
* Your component tree.
|
7707
|
-
*/
|
7708
|
-
children: PropTypes.node,
|
7709
|
-
/**
|
7710
|
-
* A theme object. You can provide a function to extend the outer theme.
|
7711
|
-
*/
|
7712
|
-
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
|
7713
|
-
} : void 0;
|
7714
|
-
if (process.env.NODE_ENV !== 'production') {
|
7715
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) : void 0;
|
7716
|
-
}
|
7717
|
-
|
7718
|
-
const EMPTY_THEME = {};
|
7719
|
-
function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
|
7720
|
-
return React.useMemo(() => {
|
7721
|
-
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
|
7722
|
-
if (typeof localTheme === 'function') {
|
7723
|
-
const mergedTheme = localTheme(resolvedTheme);
|
7724
|
-
const result = themeId ? _extends({}, upperTheme, {
|
7725
|
-
[themeId]: mergedTheme
|
7726
|
-
}) : mergedTheme;
|
7727
|
-
// must return a function for the private theme to NOT merge with the upper theme.
|
7728
|
-
// see the test case "use provided theme from a callback" in ThemeProvider.test.js
|
7729
|
-
if (isPrivate) {
|
7730
|
-
return () => result;
|
7731
|
-
}
|
7732
|
-
return result;
|
7733
|
-
}
|
7734
|
-
return themeId ? _extends({}, upperTheme, {
|
7735
|
-
[themeId]: localTheme
|
7736
|
-
}) : _extends({}, upperTheme, localTheme);
|
7737
|
-
}, [themeId, upperTheme, localTheme, isPrivate]);
|
7738
|
-
}
|
7739
|
-
|
7740
|
-
/**
|
7741
|
-
* This component makes the `theme` available down the React tree.
|
7742
|
-
* It should preferably be used at **the root of your component tree**.
|
7743
|
-
*
|
7744
|
-
* <ThemeProvider theme={theme}> // existing use case
|
7745
|
-
* <ThemeProvider theme={{ id: theme }}> // theme scoping
|
7746
|
-
*/
|
7747
|
-
function ThemeProvider$1(props) {
|
7748
|
-
const {
|
7749
|
-
children,
|
7750
|
-
theme: localTheme,
|
7751
|
-
themeId
|
7752
|
-
} = props;
|
7753
|
-
const upperTheme = useTheme$3(EMPTY_THEME);
|
7754
|
-
const upperPrivateTheme = useTheme$1() || EMPTY_THEME;
|
7755
|
-
if (process.env.NODE_ENV !== 'production') {
|
7756
|
-
if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
|
7757
|
-
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'));
|
7758
|
-
}
|
7759
|
-
}
|
7760
|
-
const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
|
7761
|
-
const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
|
7762
|
-
return /*#__PURE__*/jsx(ThemeProvider$2, {
|
7763
|
-
theme: privateTheme,
|
7764
|
-
children: /*#__PURE__*/jsx(ThemeContext$2.Provider, {
|
7765
|
-
value: engineTheme,
|
7766
|
-
children: children
|
7767
|
-
})
|
7768
|
-
});
|
7769
|
-
}
|
7770
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes /* remove-proptypes */ = {
|
7771
|
-
// ----------------------------- Warning --------------------------------
|
7772
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
7773
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
7774
|
-
// ----------------------------------------------------------------------
|
7775
|
-
/**
|
7776
|
-
* Your component tree.
|
7777
|
-
*/
|
7778
|
-
children: PropTypes.node,
|
7779
|
-
/**
|
7780
|
-
* A theme object. You can provide a function to extend the outer theme.
|
7781
|
-
*/
|
7782
|
-
theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
|
7783
|
-
/**
|
7784
|
-
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
|
7785
|
-
*/
|
7786
|
-
themeId: PropTypes.string
|
7787
|
-
} : void 0;
|
7788
|
-
if (process.env.NODE_ENV !== 'production') {
|
7789
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
|
7790
|
-
}
|
7791
|
-
|
7792
|
-
const _excluded$d = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
7622
|
+
const _excluded$c = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
7793
7623
|
const defaultTheme$3 = createTheme$1();
|
7794
7624
|
// widening Theme to any so that the consumer can own the theme structure.
|
7795
7625
|
const defaultCreateStyledComponent = systemStyled('div', {
|
@@ -7918,7 +7748,7 @@ function createStack(options = {}) {
|
|
7918
7748
|
className,
|
7919
7749
|
useFlexGap = false
|
7920
7750
|
} = props,
|
7921
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
7751
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$c);
|
7922
7752
|
const ownerState = {
|
7923
7753
|
direction,
|
7924
7754
|
spacing,
|
@@ -8092,7 +7922,7 @@ const green = {
|
|
8092
7922
|
};
|
8093
7923
|
var green$1 = green;
|
8094
7924
|
|
8095
|
-
const _excluded$
|
7925
|
+
const _excluded$b = ["mode", "contrastThreshold", "tonalOffset"];
|
8096
7926
|
const light = {
|
8097
7927
|
// The colors used to style the text.
|
8098
7928
|
text: {
|
@@ -8261,7 +8091,7 @@ function createPalette(palette) {
|
|
8261
8091
|
contrastThreshold = 3,
|
8262
8092
|
tonalOffset = 0.2
|
8263
8093
|
} = palette,
|
8264
|
-
other = _objectWithoutPropertiesLoose(palette, _excluded$
|
8094
|
+
other = _objectWithoutPropertiesLoose(palette, _excluded$b);
|
8265
8095
|
const primary = palette.primary || getDefaultPrimary(mode);
|
8266
8096
|
const secondary = palette.secondary || getDefaultSecondary(mode);
|
8267
8097
|
const error = palette.error || getDefaultError(mode);
|
@@ -8385,7 +8215,7 @@ const theme2 = createTheme({ palette: {
|
|
8385
8215
|
return paletteOutput;
|
8386
8216
|
}
|
8387
8217
|
|
8388
|
-
const _excluded$
|
8218
|
+
const _excluded$a = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
|
8389
8219
|
function round(value) {
|
8390
8220
|
return Math.round(value * 1e5) / 1e5;
|
8391
8221
|
}
|
@@ -8416,7 +8246,7 @@ function createTypography(palette, typography) {
|
|
8416
8246
|
allVariants,
|
8417
8247
|
pxToRem: pxToRem2
|
8418
8248
|
} = _ref,
|
8419
|
-
other = _objectWithoutPropertiesLoose(_ref, _excluded$
|
8249
|
+
other = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
8420
8250
|
if (process.env.NODE_ENV !== 'production') {
|
8421
8251
|
if (typeof fontSize !== 'number') {
|
8422
8252
|
console.error('MUI: `fontSize` is required to be a number.');
|
@@ -8483,7 +8313,7 @@ function createShadow(...px) {
|
|
8483
8313
|
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)];
|
8484
8314
|
var shadows$1 = shadows;
|
8485
8315
|
|
8486
|
-
const _excluded$
|
8316
|
+
const _excluded$9 = ["duration", "easing", "delay"];
|
8487
8317
|
// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
|
8488
8318
|
// to learn the context in which each easing should be used.
|
8489
8319
|
const easing = {
|
@@ -8534,7 +8364,7 @@ function createTransitions(inputTransitions) {
|
|
8534
8364
|
easing: easingOption = mergedEasing.easeInOut,
|
8535
8365
|
delay = 0
|
8536
8366
|
} = options,
|
8537
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
8367
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$9);
|
8538
8368
|
if (process.env.NODE_ENV !== 'production') {
|
8539
8369
|
const isString = value => typeof value === 'string';
|
8540
8370
|
// IE11 support, replace with Number.isNaN
|
@@ -8581,7 +8411,7 @@ const zIndex = {
|
|
8581
8411
|
};
|
8582
8412
|
var zIndex$1 = zIndex;
|
8583
8413
|
|
8584
|
-
const _excluded$
|
8414
|
+
const _excluded$8 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
|
8585
8415
|
function createTheme(options = {}, ...args) {
|
8586
8416
|
const {
|
8587
8417
|
mixins: mixinsInput = {},
|
@@ -8589,7 +8419,7 @@ function createTheme(options = {}, ...args) {
|
|
8589
8419
|
transitions: transitionsInput = {},
|
8590
8420
|
typography: typographyInput = {}
|
8591
8421
|
} = options,
|
8592
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
8422
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$8);
|
8593
8423
|
if (options.vars) {
|
8594
8424
|
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
|
8595
8425
|
Please use another name.` : formatMuiErrorMessage(18));
|
@@ -8651,7 +8481,7 @@ const defaultTheme$1 = createTheme();
|
|
8651
8481
|
var defaultTheme$2 = defaultTheme$1;
|
8652
8482
|
|
8653
8483
|
function useTheme() {
|
8654
|
-
const theme = useTheme$
|
8484
|
+
const theme = useTheme$1(defaultTheme$2);
|
8655
8485
|
if (process.env.NODE_ENV !== 'production') {
|
8656
8486
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
8657
8487
|
React.useDebugValue(theme);
|
@@ -8679,29 +8509,6 @@ const styled = createStyled({
|
|
8679
8509
|
});
|
8680
8510
|
var styled$1 = styled;
|
8681
8511
|
|
8682
|
-
const _excluded$8 = ["theme"];
|
8683
|
-
function ThemeProvider(_ref) {
|
8684
|
-
let {
|
8685
|
-
theme: themeInput
|
8686
|
-
} = _ref,
|
8687
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
8688
|
-
const scopedTheme = themeInput[THEME_ID];
|
8689
|
-
return /*#__PURE__*/jsx(ThemeProvider$1, _extends({}, props, {
|
8690
|
-
themeId: scopedTheme ? THEME_ID : undefined,
|
8691
|
-
theme: scopedTheme || themeInput
|
8692
|
-
}));
|
8693
|
-
}
|
8694
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
|
8695
|
-
/**
|
8696
|
-
* Your component tree.
|
8697
|
-
*/
|
8698
|
-
children: PropTypes.node,
|
8699
|
-
/**
|
8700
|
-
* A theme object. You can provide a function to extend the outer theme.
|
8701
|
-
*/
|
8702
|
-
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
|
8703
|
-
} : void 0;
|
8704
|
-
|
8705
8512
|
function getSvgIconUtilityClass(slot) {
|
8706
8513
|
return generateUtilityClass('MuiSvgIcon', slot);
|
8707
8514
|
}
|
@@ -9059,15 +8866,44 @@ const components = {
|
|
9059
8866
|
}
|
9060
8867
|
},
|
9061
8868
|
MuiChip: {
|
9062
|
-
defaultProps: {
|
9063
|
-
size: 'small'
|
9064
|
-
},
|
9065
8869
|
styleOverrides: {
|
8870
|
+
sizeSmall: {
|
8871
|
+
paddingBlock: 4
|
8872
|
+
},
|
8873
|
+
sizeMedium: {
|
8874
|
+
paddingBlock: 7
|
8875
|
+
},
|
9066
8876
|
root: {
|
8877
|
+
height: "inherit",
|
9067
8878
|
borderRadius: 4
|
8879
|
+
// '&.MuiChip-colorPrimary': {
|
8880
|
+
// color: '#101840DE',
|
8881
|
+
// backgroundColor: '#E4ECF4',
|
8882
|
+
// ".MuiChip-deleteIcon": {
|
8883
|
+
// height: 12,
|
8884
|
+
// width: 12,
|
8885
|
+
// },
|
8886
|
+
// },
|
8887
|
+
// '&.MuiChip-colorPrimary.MuiChip-outlined': {
|
8888
|
+
// border: '1px solid #90B1D0',
|
8889
|
+
// backgroundColor: "#fff",
|
8890
|
+
// ".MuiChip-avatar": {
|
8891
|
+
// marginBlock: 2
|
8892
|
+
// },
|
8893
|
+
// "&.MuiChip-colorPrimary.MuiChip-outlined:hover": {
|
8894
|
+
// backgroundColor: "#E4ECF4"
|
8895
|
+
// },
|
8896
|
+
// ".MuiChip-deleteIcon": {
|
8897
|
+
// color: "#90B1D0",
|
8898
|
+
// "&:hover": {
|
8899
|
+
// color: "#6392BD !important"
|
8900
|
+
// }
|
8901
|
+
// },
|
8902
|
+
// },
|
9068
8903
|
}
|
9069
8904
|
}
|
9070
8905
|
},
|
8906
|
+
|
9071
8907
|
MuiAlert: {
|
9072
8908
|
defaultProps: {
|
9073
8909
|
iconMapping: {
|
@@ -12779,19 +12615,25 @@ var Stack$1 = Stack;
|
|
12779
12615
|
const ToastContent = styled$1(Stack$1)(({
|
12780
12616
|
theme
|
12781
12617
|
}) => ({
|
12618
|
+
position: "fixed",
|
12782
12619
|
marginBottom: theme.spacing(2),
|
12783
|
-
zIndex:
|
12784
|
-
boxShadow:
|
12785
|
-
|
12786
|
-
|
12787
|
-
|
12788
|
-
|
12789
|
-
|
12790
|
-
|
12791
|
-
|
12792
|
-
|
12793
|
-
|
12794
|
-
|
12620
|
+
zIndex: 1400,
|
12621
|
+
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)",
|
12622
|
+
"&.end": {
|
12623
|
+
top: 16,
|
12624
|
+
right: 16,
|
12625
|
+
left: "auto"
|
12626
|
+
},
|
12627
|
+
"&.center": {
|
12628
|
+
top: 16,
|
12629
|
+
left: "50%",
|
12630
|
+
right: "auto",
|
12631
|
+
transform: "translateX(-50%)"
|
12632
|
+
},
|
12633
|
+
"&.start": {
|
12634
|
+
top: 16,
|
12635
|
+
left: 16,
|
12636
|
+
right: "auto"
|
12795
12637
|
}
|
12796
12638
|
}));
|
12797
12639
|
const ContentBox = styled$1(Box$1)(({
|
@@ -12799,19 +12641,19 @@ const ContentBox = styled$1(Box$1)(({
|
|
12799
12641
|
}) => ({
|
12800
12642
|
padding: theme.spacing(1.5),
|
12801
12643
|
gap: theme.spacing(1.5),
|
12802
|
-
display:
|
12803
|
-
alignItems:
|
12804
|
-
|
12805
|
-
backgroundColor:
|
12644
|
+
display: "flex",
|
12645
|
+
alignItems: "center",
|
12646
|
+
"&.color-error": {
|
12647
|
+
backgroundColor: "#FEEBEE"
|
12806
12648
|
},
|
12807
|
-
|
12808
|
-
backgroundColor:
|
12649
|
+
"&.color-info": {
|
12650
|
+
backgroundColor: "#E1F5FE"
|
12809
12651
|
},
|
12810
|
-
|
12811
|
-
backgroundColor:
|
12652
|
+
"&.color-warning": {
|
12653
|
+
backgroundColor: "#FFF3E0"
|
12812
12654
|
},
|
12813
|
-
|
12814
|
-
backgroundColor:
|
12655
|
+
"&.color-success": {
|
12656
|
+
backgroundColor: "#E8F5E9"
|
12815
12657
|
}
|
12816
12658
|
}));
|
12817
12659
|
const RippleIcon = styled$1(Stack$1)(({
|
@@ -12821,31 +12663,33 @@ const RippleIcon = styled$1(Stack$1)(({
|
|
12821
12663
|
gap: theme.spacing(1),
|
12822
12664
|
height: 20,
|
12823
12665
|
borderRadius: 50,
|
12824
|
-
|
12825
|
-
backgroundColor:
|
12666
|
+
"&.ripple-error": {
|
12667
|
+
backgroundColor: "#D143431F"
|
12826
12668
|
},
|
12827
|
-
|
12828
|
-
backgroundColor:
|
12669
|
+
"&.ripple-info": {
|
12670
|
+
backgroundColor: "#2D9FC51F"
|
12829
12671
|
},
|
12830
|
-
|
12831
|
-
backgroundColor:
|
12672
|
+
"&.ripple-warning": {
|
12673
|
+
backgroundColor: "#FB85001F"
|
12832
12674
|
},
|
12833
|
-
|
12834
|
-
backgroundColor:
|
12675
|
+
"&.ripple-success": {
|
12676
|
+
backgroundColor: "#8FC93A1F"
|
12835
12677
|
}
|
12836
12678
|
}));
|
12837
|
-
const ContentIcon = styled$1(Stack$1)((
|
12838
|
-
|
12839
|
-
|
12679
|
+
const ContentIcon = styled$1(Stack$1)(({
|
12680
|
+
theme
|
12681
|
+
}) => ({
|
12682
|
+
"&.icon-color.color-info": {
|
12683
|
+
color: theme.palette.info.main
|
12840
12684
|
},
|
12841
|
-
|
12842
|
-
color:
|
12685
|
+
"&.icon-color.color-error": {
|
12686
|
+
color: theme.palette.error.main
|
12843
12687
|
},
|
12844
|
-
|
12845
|
-
color:
|
12688
|
+
"&.icon-color.color-warning": {
|
12689
|
+
color: theme.palette.warning.main
|
12846
12690
|
},
|
12847
|
-
|
12848
|
-
color:
|
12691
|
+
"&.icon-color.color-success": {
|
12692
|
+
color: theme.palette.success.main
|
12849
12693
|
}
|
12850
12694
|
}));
|
12851
12695
|
const ToastNotification = toast => {
|
@@ -12859,20 +12703,14 @@ const ToastNotification = toast => {
|
|
12859
12703
|
warning: /*#__PURE__*/React__default.createElement(WarningRounded, null),
|
12860
12704
|
info: /*#__PURE__*/React__default.createElement(InfoRounded, null)
|
12861
12705
|
};
|
12862
|
-
const ToastIcon = IconMap[toast.type ||
|
12706
|
+
const ToastIcon = IconMap[toast.type || "info"];
|
12863
12707
|
const colorMap = {
|
12864
|
-
success:
|
12865
|
-
error:
|
12866
|
-
warning:
|
12867
|
-
info:
|
12868
|
-
};
|
12869
|
-
const colors = colorMap[toast.type || 'info'];
|
12870
|
-
const toastPosition = {
|
12871
|
-
center: 'center',
|
12872
|
-
right: 'flex-end',
|
12873
|
-
left: 'flex-start'
|
12708
|
+
success: "success",
|
12709
|
+
error: "error",
|
12710
|
+
warning: "warning",
|
12711
|
+
info: "info"
|
12874
12712
|
};
|
12875
|
-
const
|
12713
|
+
const colors = colorMap[toast.type || "info"];
|
12876
12714
|
const close = () => {
|
12877
12715
|
setOpenToast(false);
|
12878
12716
|
};
|
@@ -12894,20 +12732,12 @@ const ToastNotification = toast => {
|
|
12894
12732
|
clearInterval(interval || toast.time);
|
12895
12733
|
};
|
12896
12734
|
}, [timeProgress, toast.time]);
|
12897
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(
|
12898
|
-
|
12899
|
-
}, /*#__PURE__*/React__default.createElement(Stack$1, {
|
12900
|
-
alignItems: position || 'right'
|
12901
|
-
}, /*#__PURE__*/React__default.createElement(ToastContent, {
|
12902
|
-
width: 370,
|
12903
|
-
role: "toast",
|
12904
|
-
className: `${position}`
|
12905
|
-
}, /*#__PURE__*/React__default.createElement(ContentBox, {
|
12906
|
-
className: `color-${toast.type || 'info'}`
|
12735
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(ToastContent, null, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(ContentBox, {
|
12736
|
+
className: `color-${toast.type || "info"}`
|
12907
12737
|
}, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
|
12908
|
-
className: `ripple-${toast.type ||
|
12738
|
+
className: `ripple-${toast.type || "info"}`
|
12909
12739
|
}, /*#__PURE__*/React__default.createElement(ContentIcon, {
|
12910
|
-
className: `icon-color color-${toast.type ||
|
12740
|
+
className: `icon-color color-${toast.type || "info"}`
|
12911
12741
|
}, ToastIcon)), /*#__PURE__*/React__default.createElement(Divider$1, {
|
12912
12742
|
orientation: "vertical",
|
12913
12743
|
flexItem: true
|
@@ -12926,7 +12756,8 @@ const ToastNotification = toast => {
|
|
12926
12756
|
"aria-label": "delete",
|
12927
12757
|
onClick: close
|
12928
12758
|
}, /*#__PURE__*/React__default.createElement(Close, null))), /*#__PURE__*/React__default.createElement(Stack$1, {
|
12929
|
-
gap: "4px"
|
12759
|
+
gap: "4px",
|
12760
|
+
alignItems: "flex-start"
|
12930
12761
|
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
12931
12762
|
color: "text.primary",
|
12932
12763
|
variant: "body2"
|
@@ -12935,17 +12766,17 @@ const ToastNotification = toast => {
|
|
12935
12766
|
paddingLeft: 15,
|
12936
12767
|
marginBlock: 0,
|
12937
12768
|
fontSize: 11,
|
12938
|
-
color:
|
12769
|
+
color: "#101840de"
|
12939
12770
|
}
|
12940
12771
|
}, toast.dataOpt.map((element, i) => {
|
12941
12772
|
const keyElement = Object.keys(element);
|
12942
|
-
let options =
|
12773
|
+
let options = "";
|
12943
12774
|
for (let _i = 0; _i < keyElement.length; _i++) {
|
12944
12775
|
options += element[keyElement[_i]];
|
12945
12776
|
}
|
12946
12777
|
return /*#__PURE__*/React__default.createElement("li", {
|
12947
12778
|
style: {
|
12948
|
-
width:
|
12779
|
+
width: "fit-content"
|
12949
12780
|
},
|
12950
12781
|
key: i
|
12951
12782
|
}, /*#__PURE__*/React__default.createElement(Typography$1, {
|
@@ -12968,11 +12799,22 @@ const ToastNotification = toast => {
|
|
12968
12799
|
}) : /*#__PURE__*/React__default.createElement(ArrowUpward, {
|
12969
12800
|
fontSize: "small"
|
12970
12801
|
})
|
12971
|
-
}, showOptions ?
|
12802
|
+
}, showOptions ? "Ver más" : "Ver menos")))), /*#__PURE__*/React__default.createElement(LinearProgress$1, {
|
12972
12803
|
color: colors,
|
12973
12804
|
variant: "determinate",
|
12974
12805
|
value: progress
|
12975
|
-
}))))
|
12976
|
-
};
|
12806
|
+
}))));
|
12807
|
+
};
|
12808
|
+
|
12809
|
+
styled$1(Stack$1)(() => ({
|
12810
|
+
backgroundColor: "#fff",
|
12811
|
+
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)",
|
12812
|
+
zIndex: 100,
|
12813
|
+
padding: "8px 24px",
|
12814
|
+
justifyContent: "space-between",
|
12815
|
+
minHeight: 39,
|
12816
|
+
position: "fixed",
|
12817
|
+
width: "100%"
|
12818
|
+
}));
|
12977
12819
|
|
12978
12820
|
export { SincoTheme, ToastNotification };
|
package/package.json
CHANGED
package/src/index.d.ts
CHANGED
@@ -0,0 +1,14 @@
|
|
1
|
+
import React from "react";
|
2
|
+
interface Option {
|
3
|
+
}
|
4
|
+
interface Toast {
|
5
|
+
type?: string;
|
6
|
+
subtitle?: string;
|
7
|
+
time?: number | any;
|
8
|
+
title?: string;
|
9
|
+
dataOpt?: Option[];
|
10
|
+
actions?: React.ReactNode;
|
11
|
+
seeMore?: boolean;
|
12
|
+
}
|
13
|
+
export declare const ToastNotification: (toast: Toast) => JSX.Element;
|
14
|
+
export {};
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import React from "react";
|
2
|
+
interface BreadcrumbCode {
|
3
|
+
link: string;
|
4
|
+
name: string;
|
5
|
+
}
|
6
|
+
interface Pageheader {
|
7
|
+
back?: React.ReactNode;
|
8
|
+
title?: string;
|
9
|
+
subtitle?: string;
|
10
|
+
breadcrumbs?: BreadcrumbCode[];
|
11
|
+
actions?: React.ReactNode;
|
12
|
+
tabs?: React.ReactNode;
|
13
|
+
}
|
14
|
+
declare const PageHeader: (page: Pageheader) => JSX.Element;
|
15
|
+
export default PageHeader;
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import { ReactElement } from "react";
|
2
|
-
export interface Option {
|
3
|
-
}
|
4
|
-
export interface Toast {
|
5
|
-
type?: string;
|
6
|
-
subtitle?: string;
|
7
|
-
time?: number | any;
|
8
|
-
title?: string;
|
9
|
-
dataOpt?: Option[];
|
10
|
-
actions?: React.ReactNode;
|
11
|
-
seeMore?: boolean;
|
12
|
-
position?: string;
|
13
|
-
}
|
14
|
-
export interface IconMap {
|
15
|
-
[key: string]: ReactElement;
|
16
|
-
}
|
17
|
-
export interface ColorMap {
|
18
|
-
[key: string]: "success" | "error" | "warning" | "info";
|
19
|
-
}
|
20
|
-
export interface position {
|
21
|
-
[key: string]: "center" | "flex-end" | "flex-start";
|
22
|
-
}
|