@czi-sds/components 18.1.0 → 18.1.1
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 +61 -32
- package/dist/index.esm.js +61 -32
- 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/
|
|
@@ -5178,21 +5192,36 @@ var InputSlider = React.forwardRef(function (props, ref) {
|
|
|
5178
5192
|
var sdsPropNames$2 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
|
|
5179
5193
|
var error = function (props) {
|
|
5180
5194
|
var borders = getBorders(props);
|
|
5181
|
-
|
|
5195
|
+
var colors = getColors(props);
|
|
5196
|
+
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
5197
|
};
|
|
5183
5198
|
var warning = function (props) {
|
|
5184
5199
|
var borders = getBorders(props);
|
|
5185
|
-
|
|
5200
|
+
var colors = getColors(props);
|
|
5201
|
+
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
5202
|
};
|
|
5187
5203
|
var disabledStyled$1 = function (props) {
|
|
5188
5204
|
var borders = getBorders(props);
|
|
5189
|
-
|
|
5205
|
+
var colors = getColors(props);
|
|
5206
|
+
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
5207
|
};
|
|
5191
5208
|
var textArea = function (props) {
|
|
5192
5209
|
var spacings = getSpaces(props);
|
|
5193
|
-
|
|
5210
|
+
console.log(material.outlinedInputClasses.multiline);
|
|
5211
|
+
console.log(material.outlinedInputClasses.inputMultiline);
|
|
5212
|
+
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
5213
|
};
|
|
5195
|
-
var
|
|
5214
|
+
var userInput = function (props) {
|
|
5215
|
+
var intent = props.intent;
|
|
5216
|
+
var borders = getBorders(props);
|
|
5217
|
+
var border = intent === "error"
|
|
5218
|
+
? borders === null || borders === void 0 ? void 0 : borders.error[400]
|
|
5219
|
+
: intent === "warning"
|
|
5220
|
+
? borders === null || borders === void 0 ? void 0 : borders.warning[400]
|
|
5221
|
+
: borders === null || borders === void 0 ? void 0 : borders.primary[400];
|
|
5222
|
+
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);
|
|
5223
|
+
};
|
|
5224
|
+
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
5225
|
var typography = getTypography(props);
|
|
5197
5226
|
var spacings = getSpaces(props);
|
|
5198
5227
|
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 +5230,14 @@ var StyledInputBase = styles.styled(material.TextField, {
|
|
|
5201
5230
|
shouldForwardProp: function (prop) {
|
|
5202
5231
|
return !sdsPropNames$2.includes(prop.toString());
|
|
5203
5232
|
},
|
|
5204
|
-
})(
|
|
5205
|
-
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
5233
|
+
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5234
|
+
var intent = props.intent, sdsType = props.sdsType, sdsStage = props.sdsStage, disabled = props.disabled;
|
|
5206
5235
|
var spacings = getSpaces(props);
|
|
5207
5236
|
var borders = getBorders(props);
|
|
5208
5237
|
var corners = getCorners(props);
|
|
5209
|
-
return react.css(
|
|
5238
|
+
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
5239
|
});
|
|
5211
|
-
var templateObject_1$l, templateObject_2$a, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7;
|
|
5240
|
+
var templateObject_1$l, templateObject_2$a, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
5212
5241
|
|
|
5213
5242
|
/**
|
|
5214
5243
|
* @see https://mui.com/material-ui/react-text-field/
|