@czi-sds/components 18.1.0 → 18.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +70 -40
- package/dist/index.esm.js +70 -40
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -3302,7 +3302,7 @@ var medium$1 = function (props) {
|
|
|
3302
3302
|
var large = function (props) {
|
|
3303
3303
|
var sdsType = props.sdsType;
|
|
3304
3304
|
var iconSizes = getIconSizes(props);
|
|
3305
|
-
return react.css(templateObject_8$
|
|
3305
|
+
return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType === "primary" ? "margin: 5px;" : "");
|
|
3306
3306
|
};
|
|
3307
3307
|
var doNotForwardProps$k = [
|
|
3308
3308
|
"on",
|
|
@@ -3315,9 +3315,9 @@ var StyledButtonIcon$2 = styles.styled(material.IconButton, {
|
|
|
3315
3315
|
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
3316
3316
|
})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n padding: 0;\n\n :focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n ", "\n"], ["\n padding: 0;\n\n :focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n ", "\n"])), function (props) {
|
|
3317
3317
|
var on = props.on, disabled = props.disabled, sdsSize = props.sdsSize, sdsType = props.sdsType;
|
|
3318
|
-
return react.css(templateObject_9$
|
|
3318
|
+
return react.css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), on && isOn(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
3319
3319
|
});
|
|
3320
|
-
var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$
|
|
3320
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$1;
|
|
3321
3321
|
|
|
3322
3322
|
var ButtonIconSizeToSdsIconSize = {
|
|
3323
3323
|
large: "xl",
|
|
@@ -3337,22 +3337,36 @@ var sdsPropNames$4 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
|
|
|
3337
3337
|
var rounded$3 = function (props) {
|
|
3338
3338
|
var corners = getCorners(props);
|
|
3339
3339
|
var borders = getBorders(props);
|
|
3340
|
-
return react.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n "], ["\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n "])), material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, borders === null || borders === void 0 ? void 0 : borders.gray[400]);
|
|
3340
|
+
return react.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n .", " .", " {\n border-radius: ", "px;\n border: ", ";\n }\n "], ["\n .", " .", " {\n border-radius: ", "px;\n border: ", ";\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, borders === null || borders === void 0 ? void 0 : borders.gray[400]);
|
|
3341
3341
|
};
|
|
3342
3342
|
var error$3 = function (props) {
|
|
3343
3343
|
var borders = getBorders(props);
|
|
3344
|
-
|
|
3344
|
+
var colors = getColors(props);
|
|
3345
|
+
return react.css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
3345
3346
|
};
|
|
3346
3347
|
var warning$3 = function (props) {
|
|
3347
3348
|
var borders = getBorders(props);
|
|
3348
|
-
|
|
3349
|
+
var colors = getColors(props);
|
|
3350
|
+
return react.css(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
3351
|
+
};
|
|
3352
|
+
var userInput$2 = function (props) {
|
|
3353
|
+
var intent = props.intent;
|
|
3354
|
+
var colors = getColors(props);
|
|
3355
|
+
var borders = getBorders(props);
|
|
3356
|
+
var border = intent === "error"
|
|
3357
|
+
? borders === null || borders === void 0 ? void 0 : borders.error[400]
|
|
3358
|
+
: intent === "warning"
|
|
3359
|
+
? borders === null || borders === void 0 ? void 0 : borders.warning[400]
|
|
3360
|
+
: borders === null || borders === void 0 ? void 0 : borders.primary[400];
|
|
3361
|
+
var color = intent === "default" ? colors === null || colors === void 0 ? void 0 : colors.primary[400] : colors === null || colors === void 0 ? void 0 : colors.gray[500];
|
|
3362
|
+
return react.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.inputAdornmentClasses.root, color);
|
|
3349
3363
|
};
|
|
3350
3364
|
var disabledStyled$2 = function (props) {
|
|
3351
3365
|
var borders = getBorders(props);
|
|
3352
3366
|
var colors = getColors(props);
|
|
3353
|
-
return react.css(
|
|
3367
|
+
return react.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[300], material.inputAdornmentClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[300], material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
3354
3368
|
};
|
|
3355
|
-
var StyledLabel$2 = styles.styled("label")(
|
|
3369
|
+
var StyledLabel$2 = styles.styled("label")(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
3356
3370
|
var typography = getTypography(props);
|
|
3357
3371
|
var spacings = getSpaces(props);
|
|
3358
3372
|
return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n position: absolute;\n overflow: hidden;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px; \n padding: 0; \n border: 0;\n ");
|
|
@@ -3361,15 +3375,15 @@ var StyledSearchBase = styles.styled(material.TextField, {
|
|
|
3361
3375
|
shouldForwardProp: function (prop) {
|
|
3362
3376
|
return !sdsPropNames$4.includes(prop.toString());
|
|
3363
3377
|
},
|
|
3364
|
-
})(
|
|
3365
|
-
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, value = props.value;
|
|
3378
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3379
|
+
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage, value = props.value;
|
|
3366
3380
|
var spacings = getSpaces(props);
|
|
3367
3381
|
var borders = getBorders(props);
|
|
3368
3382
|
var colors = getColors(props);
|
|
3369
|
-
return react.css(
|
|
3383
|
+
return react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n opacity: 0;\n margin-right: ", "px;\n }\n\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: ", ";\n }\n }\n\n .", " {\n padding: ", "px ", "px;\n height: 34px;\n box-sizing: border-box;\n background-color: #fff;\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n opacity: 0;\n margin-right: ", "px;\n }\n\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: ", ";\n }\n }\n\n .", " {\n padding: ", "px ", "px;\n height: 34px;\n box-sizing: border-box;\n background-color: #fff;\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.xl, spacings === null || spacings === void 0 ? void 0 : spacings.s, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[400], value ? 1 : 0, material.inputBaseClasses.inputSizeSmall, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.l, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[500], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.primary[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.primary[400], sdsStyle === "rounded" && rounded$3(props), intent === "error" && error$3(props), intent === "warning" && warning$3(props), disabled && disabledStyled$2(props), sdsStage === "userInput" && userInput$2(props));
|
|
3370
3384
|
});
|
|
3371
|
-
var StyledInputAdornment = styles.styled(material.InputAdornment)(
|
|
3372
|
-
var templateObject_1$L, templateObject_2$t, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$7, templateObject_8$
|
|
3385
|
+
var StyledInputAdornment = styles.styled(material.InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3386
|
+
var templateObject_1$L, templateObject_2$t, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$7, templateObject_8$5, templateObject_9$2;
|
|
3373
3387
|
|
|
3374
3388
|
var fontBodyXs$4 = fontBody("xs");
|
|
3375
3389
|
var StyledMenuItem$1 = styles.styled(material.MenuItem)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
@@ -3409,7 +3423,7 @@ var StyledIconWrapper = styles.styled("span")(templateObject_7$6 || (templateObj
|
|
|
3409
3423
|
});
|
|
3410
3424
|
var StyledCheck = styles.styled(iconsMaterial.Check, {
|
|
3411
3425
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
3412
|
-
})(templateObject_8$
|
|
3426
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3413
3427
|
var selected = props.selected, disabled = props.disabled;
|
|
3414
3428
|
var colors = getColors(props);
|
|
3415
3429
|
var iconSizes = getIconSizes(props);
|
|
@@ -3425,7 +3439,7 @@ var StyledMinus = styles.styled(iconsMaterial.Remove, {
|
|
|
3425
3439
|
var selectedColor = disabled ? colors === null || colors === void 0 ? void 0 : colors.gray[300] : colors === null || colors === void 0 ? void 0 : colors.primary[400];
|
|
3426
3440
|
return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n padding: 0;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n background-color: transparent;\n }\n ");
|
|
3427
3441
|
});
|
|
3428
|
-
var templateObject_1$K, templateObject_2$s, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$
|
|
3442
|
+
var templateObject_1$K, templateObject_2$s, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$4, templateObject_9$1;
|
|
3429
3443
|
|
|
3430
3444
|
/**
|
|
3431
3445
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -3920,8 +3934,8 @@ var arrowCss = function (props) {
|
|
|
3920
3934
|
* (masoudmanson): !importants are needed to override arrow's
|
|
3921
3935
|
* default placement which is calculated by javascript
|
|
3922
3936
|
*/
|
|
3923
|
-
var StyledPopper$1 = styles.styled(material.Popper)(templateObject_8$
|
|
3924
|
-
var templateObject_1$E, templateObject_2$o, templateObject_3$f, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$5, templateObject_8$
|
|
3937
|
+
var StyledPopper$1 = styles.styled(material.Popper)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
|
|
3938
|
+
var templateObject_1$E, templateObject_2$o, templateObject_3$f, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$5, templateObject_8$3;
|
|
3925
3939
|
|
|
3926
3940
|
/**
|
|
3927
3941
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -4344,7 +4358,7 @@ var rounded$1 = function (props) {
|
|
|
4344
4358
|
var corners = getCorners(props);
|
|
4345
4359
|
return react.css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n border-radius: ", "px;\n height: 34px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n height: 34px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
4346
4360
|
};
|
|
4347
|
-
var userInput = function (props) {
|
|
4361
|
+
var userInput$1 = function (props) {
|
|
4348
4362
|
var _a, _b;
|
|
4349
4363
|
var palette = getPalette(props);
|
|
4350
4364
|
return react.css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary);
|
|
@@ -4365,7 +4379,7 @@ var warning$1 = function (props) {
|
|
|
4365
4379
|
var error$1 = function (props) {
|
|
4366
4380
|
var colors = getColors(props);
|
|
4367
4381
|
var red = colors === null || colors === void 0 ? void 0 : colors.error[400];
|
|
4368
|
-
return react.css(templateObject_8$
|
|
4382
|
+
return react.css(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), red, red, red);
|
|
4369
4383
|
};
|
|
4370
4384
|
var isDisabled = function (props) {
|
|
4371
4385
|
var colors = getColors(props);
|
|
@@ -4385,7 +4399,7 @@ var StyledInputDropdown = styles.styled(Button, {
|
|
|
4385
4399
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4386
4400
|
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, function (props) {
|
|
4387
4401
|
var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
|
|
4388
|
-
return react.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), state === "open" && isOpen(props), sdsStage === "userInput" && userInput(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
|
|
4402
|
+
return react.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), state === "open" && isOpen(props), sdsStage === "userInput" && userInput$1(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
|
|
4389
4403
|
});
|
|
4390
4404
|
var StyledDetail = styles.styled("span", {
|
|
4391
4405
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
@@ -4439,7 +4453,7 @@ function labelStyle(props) {
|
|
|
4439
4453
|
var labelColor = props.sdsType === "value" ? (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary : colors === null || colors === void 0 ? void 0 : colors.gray[500];
|
|
4440
4454
|
return react.css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
|
|
4441
4455
|
}
|
|
4442
|
-
var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$
|
|
4456
|
+
var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
4443
4457
|
|
|
4444
4458
|
/**
|
|
4445
4459
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -4574,13 +4588,13 @@ var typeToCss = {
|
|
|
4574
4588
|
var doNotForwardProps$a = ["sdsType", "sdsStyle", "tagColor", "hover"];
|
|
4575
4589
|
var StyledTag$1 = styles.styled(material.Chip, {
|
|
4576
4590
|
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
4577
|
-
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
4591
|
+
})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
4578
4592
|
var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, icon = props.icon;
|
|
4579
4593
|
var isRounded = sdsStyle === "rounded";
|
|
4580
4594
|
var type = sdsType || "primary";
|
|
4581
4595
|
return react.css(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), icon ? withIcon(props) : withoutIcon(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover() : "pointer-events: none;");
|
|
4582
4596
|
});
|
|
4583
|
-
var templateObject_1$x, templateObject_2$h, templateObject_3$8, templateObject_4$6, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8;
|
|
4597
|
+
var templateObject_1$x, templateObject_2$h, templateObject_3$8, templateObject_4$6, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
4584
4598
|
|
|
4585
4599
|
/**
|
|
4586
4600
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -4877,9 +4891,6 @@ var Dropdown = function (_a) {
|
|
|
4877
4891
|
var _o = React.useState(null), anchorEl = _o[0], setAnchorEl = _o[1];
|
|
4878
4892
|
var _p = React.useState(getInitialValue), value = _p[0], setValue = _p[1];
|
|
4879
4893
|
var _q = React.useState([]), pendingValue = _q[0], setPendingValue = _q[1];
|
|
4880
|
-
React.useEffect(function () {
|
|
4881
|
-
onChange(value);
|
|
4882
|
-
}, [onChange, value]);
|
|
4883
4894
|
React.useEffect(function () {
|
|
4884
4895
|
if (isControlled) {
|
|
4885
4896
|
setValue(propValue);
|
|
@@ -4898,14 +4909,14 @@ var Dropdown = function (_a) {
|
|
|
4898
4909
|
setOpen(false);
|
|
4899
4910
|
}
|
|
4900
4911
|
if (multiple) {
|
|
4901
|
-
|
|
4912
|
+
setValueAndCallOnChange(pendingValue);
|
|
4902
4913
|
}
|
|
4903
4914
|
}
|
|
4904
4915
|
}
|
|
4905
4916
|
function handleClick(event) {
|
|
4906
4917
|
if (open) {
|
|
4907
4918
|
if (multiple) {
|
|
4908
|
-
|
|
4919
|
+
setValueAndCallOnChange(pendingValue);
|
|
4909
4920
|
}
|
|
4910
4921
|
setOpen(false);
|
|
4911
4922
|
if (anchorEl) {
|
|
@@ -4931,7 +4942,7 @@ var Dropdown = function (_a) {
|
|
|
4931
4942
|
return;
|
|
4932
4943
|
}
|
|
4933
4944
|
if (multiple) {
|
|
4934
|
-
|
|
4945
|
+
setValueAndCallOnChange(pendingValue);
|
|
4935
4946
|
}
|
|
4936
4947
|
if (anchorEl) {
|
|
4937
4948
|
anchorEl.focus();
|
|
@@ -4947,11 +4958,11 @@ var Dropdown = function (_a) {
|
|
|
4947
4958
|
if (multiple) {
|
|
4948
4959
|
if (isTriggerChangeOnOptionClick) {
|
|
4949
4960
|
setPendingValue(newValue);
|
|
4950
|
-
return
|
|
4961
|
+
return setValueAndCallOnChange(newValue);
|
|
4951
4962
|
}
|
|
4952
4963
|
return setPendingValue(newValue);
|
|
4953
4964
|
}
|
|
4954
|
-
|
|
4965
|
+
setValueAndCallOnChange(newValue);
|
|
4955
4966
|
setOpen(false);
|
|
4956
4967
|
}
|
|
4957
4968
|
function handleCancel() {
|
|
@@ -4975,6 +4986,10 @@ var Dropdown = function (_a) {
|
|
|
4975
4986
|
? []
|
|
4976
4987
|
: null;
|
|
4977
4988
|
}
|
|
4989
|
+
function setValueAndCallOnChange(newValue) {
|
|
4990
|
+
setValue(newValue);
|
|
4991
|
+
onChange(newValue);
|
|
4992
|
+
}
|
|
4978
4993
|
};
|
|
4979
4994
|
|
|
4980
4995
|
var _rect$1;
|
|
@@ -5178,21 +5193,36 @@ var InputSlider = React.forwardRef(function (props, ref) {
|
|
|
5178
5193
|
var sdsPropNames$2 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
|
|
5179
5194
|
var error = function (props) {
|
|
5180
5195
|
var borders = getBorders(props);
|
|
5181
|
-
|
|
5196
|
+
var colors = getColors(props);
|
|
5197
|
+
return react.css(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
5182
5198
|
};
|
|
5183
5199
|
var warning = function (props) {
|
|
5184
5200
|
var borders = getBorders(props);
|
|
5185
|
-
|
|
5201
|
+
var colors = getColors(props);
|
|
5202
|
+
return react.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
5186
5203
|
};
|
|
5187
5204
|
var disabledStyled$1 = function (props) {
|
|
5188
5205
|
var borders = getBorders(props);
|
|
5189
|
-
|
|
5206
|
+
var colors = getColors(props);
|
|
5207
|
+
return react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[300], material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
5190
5208
|
};
|
|
5191
5209
|
var textArea = function (props) {
|
|
5192
5210
|
var spacings = getSpaces(props);
|
|
5193
|
-
|
|
5211
|
+
console.log(material.outlinedInputClasses.multiline);
|
|
5212
|
+
console.log(material.outlinedInputClasses.inputMultiline);
|
|
5213
|
+
return react.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "], ["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "])), material.outlinedInputClasses.multiline, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, material.outlinedInputClasses.inputMultiline, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.m);
|
|
5194
5214
|
};
|
|
5195
|
-
var
|
|
5215
|
+
var userInput = function (props) {
|
|
5216
|
+
var intent = props.intent;
|
|
5217
|
+
var borders = getBorders(props);
|
|
5218
|
+
var border = intent === "error"
|
|
5219
|
+
? borders === null || borders === void 0 ? void 0 : borders.error[400]
|
|
5220
|
+
: intent === "warning"
|
|
5221
|
+
? borders === null || borders === void 0 ? void 0 : borders.warning[400]
|
|
5222
|
+
: borders === null || borders === void 0 ? void 0 : borders.primary[400];
|
|
5223
|
+
return react.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border);
|
|
5224
|
+
};
|
|
5225
|
+
var StyledLabel = styles.styled("label")(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$2, function (props) {
|
|
5196
5226
|
var typography = getTypography(props);
|
|
5197
5227
|
var spacings = getSpaces(props);
|
|
5198
5228
|
return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n ");
|
|
@@ -5201,14 +5231,14 @@ var StyledInputBase = styles.styled(material.TextField, {
|
|
|
5201
5231
|
shouldForwardProp: function (prop) {
|
|
5202
5232
|
return !sdsPropNames$2.includes(prop.toString());
|
|
5203
5233
|
},
|
|
5204
|
-
})(
|
|
5205
|
-
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
5234
|
+
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5235
|
+
var intent = props.intent, sdsType = props.sdsType, sdsStage = props.sdsStage, disabled = props.disabled;
|
|
5206
5236
|
var spacings = getSpaces(props);
|
|
5207
5237
|
var borders = getBorders(props);
|
|
5208
5238
|
var corners = getCorners(props);
|
|
5209
|
-
return react.css(
|
|
5239
|
+
return react.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n padding: ", "px ", "px;\n height: 34px;\n box-sizing: border-box;\n background-color: #fff;\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n padding: ", "px ", "px;\n height: 34px;\n box-sizing: border-box;\n background-color: #fff;\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spacings === null || spacings === void 0 ? void 0 : spacings.l, spacings === null || spacings === void 0 ? void 0 : spacings.m, material.outlinedInputClasses.inputSizeSmall, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.l, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, borders === null || borders === void 0 ? void 0 : borders.gray[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[500], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.primary[400], sdsType === "textArea" && textArea(props), intent === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
|
|
5210
5240
|
});
|
|
5211
|
-
var templateObject_1$l, templateObject_2$a, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7;
|
|
5241
|
+
var templateObject_1$l, templateObject_2$a, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
5212
5242
|
|
|
5213
5243
|
/**
|
|
5214
5244
|
* @see https://mui.com/material-ui/react-text-field/
|