@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.esm.js
CHANGED
|
@@ -3282,7 +3282,7 @@ var medium$1 = function (props) {
|
|
|
3282
3282
|
var large = function (props) {
|
|
3283
3283
|
var sdsType = props.sdsType;
|
|
3284
3284
|
var iconSizes = getIconSizes(props);
|
|
3285
|
-
return css(templateObject_8$
|
|
3285
|
+
return 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;" : "");
|
|
3286
3286
|
};
|
|
3287
3287
|
var doNotForwardProps$k = [
|
|
3288
3288
|
"on",
|
|
@@ -3295,9 +3295,9 @@ var StyledButtonIcon$2 = styled(IconButton, {
|
|
|
3295
3295
|
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
3296
3296
|
})(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) {
|
|
3297
3297
|
var on = props.on, disabled = props.disabled, sdsSize = props.sdsSize, sdsType = props.sdsType;
|
|
3298
|
-
return css(templateObject_9$
|
|
3298
|
+
return 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));
|
|
3299
3299
|
});
|
|
3300
|
-
var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$
|
|
3300
|
+
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;
|
|
3301
3301
|
|
|
3302
3302
|
var ButtonIconSizeToSdsIconSize = {
|
|
3303
3303
|
large: "xl",
|
|
@@ -3317,22 +3317,36 @@ var sdsPropNames$4 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
|
|
|
3317
3317
|
var rounded$3 = function (props) {
|
|
3318
3318
|
var corners = getCorners(props);
|
|
3319
3319
|
var borders = getBorders(props);
|
|
3320
|
-
return 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 "])), outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, borders === null || borders === void 0 ? void 0 : borders.gray[400]);
|
|
3320
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, borders === null || borders === void 0 ? void 0 : borders.gray[400]);
|
|
3321
3321
|
};
|
|
3322
3322
|
var error$3 = function (props) {
|
|
3323
3323
|
var borders = getBorders(props);
|
|
3324
|
-
|
|
3324
|
+
var colors = getColors(props);
|
|
3325
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], inputAdornmentClasses.root, buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
3325
3326
|
};
|
|
3326
3327
|
var warning$3 = function (props) {
|
|
3327
3328
|
var borders = getBorders(props);
|
|
3328
|
-
|
|
3329
|
+
var colors = getColors(props);
|
|
3330
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], inputAdornmentClasses.root, buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
3331
|
+
};
|
|
3332
|
+
var userInput$2 = function (props) {
|
|
3333
|
+
var intent = props.intent;
|
|
3334
|
+
var colors = getColors(props);
|
|
3335
|
+
var borders = getBorders(props);
|
|
3336
|
+
var border = intent === "error"
|
|
3337
|
+
? borders === null || borders === void 0 ? void 0 : borders.error[400]
|
|
3338
|
+
: intent === "warning"
|
|
3339
|
+
? borders === null || borders === void 0 ? void 0 : borders.warning[400]
|
|
3340
|
+
: borders === null || borders === void 0 ? void 0 : borders.primary[400];
|
|
3341
|
+
var color = intent === "default" ? colors === null || colors === void 0 ? void 0 : colors.primary[400] : colors === null || colors === void 0 ? void 0 : colors.gray[500];
|
|
3342
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, inputAdornmentClasses.root, color);
|
|
3329
3343
|
};
|
|
3330
3344
|
var disabledStyled$2 = function (props) {
|
|
3331
3345
|
var borders = getBorders(props);
|
|
3332
3346
|
var colors = getColors(props);
|
|
3333
|
-
return css(
|
|
3347
|
+
return 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 "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[300], inputAdornmentClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[300], outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
3334
3348
|
};
|
|
3335
|
-
var StyledLabel$2 = styled("label")(
|
|
3349
|
+
var StyledLabel$2 = styled("label")(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
3336
3350
|
var typography = getTypography(props);
|
|
3337
3351
|
var spacings = getSpaces(props);
|
|
3338
3352
|
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 ");
|
|
@@ -3341,15 +3355,15 @@ var StyledSearchBase = styled(TextField, {
|
|
|
3341
3355
|
shouldForwardProp: function (prop) {
|
|
3342
3356
|
return !sdsPropNames$4.includes(prop.toString());
|
|
3343
3357
|
},
|
|
3344
|
-
})(
|
|
3345
|
-
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, value = props.value;
|
|
3358
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3359
|
+
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage, value = props.value;
|
|
3346
3360
|
var spacings = getSpaces(props);
|
|
3347
3361
|
var borders = getBorders(props);
|
|
3348
3362
|
var colors = getColors(props);
|
|
3349
|
-
return css(
|
|
3363
|
+
return 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, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[400], value ? 1 : 0, inputBaseClasses.inputSizeSmall, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.l, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[500], outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.primary[400], inputAdornmentClasses.root, 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));
|
|
3350
3364
|
});
|
|
3351
|
-
var StyledInputAdornment = styled(InputAdornment)(
|
|
3352
|
-
var templateObject_1$L, templateObject_2$t, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$7, templateObject_8$
|
|
3365
|
+
var StyledInputAdornment = styled(InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3366
|
+
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;
|
|
3353
3367
|
|
|
3354
3368
|
var fontBodyXs$4 = fontBody("xs");
|
|
3355
3369
|
var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
@@ -3389,7 +3403,7 @@ var StyledIconWrapper = styled("span")(templateObject_7$6 || (templateObject_7$6
|
|
|
3389
3403
|
});
|
|
3390
3404
|
var StyledCheck = styled(Check, {
|
|
3391
3405
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
3392
|
-
})(templateObject_8$
|
|
3406
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3393
3407
|
var selected = props.selected, disabled = props.disabled;
|
|
3394
3408
|
var colors = getColors(props);
|
|
3395
3409
|
var iconSizes = getIconSizes(props);
|
|
@@ -3405,7 +3419,7 @@ var StyledMinus = styled(Remove, {
|
|
|
3405
3419
|
var selectedColor = disabled ? colors === null || colors === void 0 ? void 0 : colors.gray[300] : colors === null || colors === void 0 ? void 0 : colors.primary[400];
|
|
3406
3420
|
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 ");
|
|
3407
3421
|
});
|
|
3408
|
-
var templateObject_1$K, templateObject_2$s, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$
|
|
3422
|
+
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;
|
|
3409
3423
|
|
|
3410
3424
|
/**
|
|
3411
3425
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -3900,8 +3914,8 @@ var arrowCss = function (props) {
|
|
|
3900
3914
|
* (masoudmanson): !importants are needed to override arrow's
|
|
3901
3915
|
* default placement which is calculated by javascript
|
|
3902
3916
|
*/
|
|
3903
|
-
var StyledPopper$1 = styled(Popper)(templateObject_8$
|
|
3904
|
-
var templateObject_1$E, templateObject_2$o, templateObject_3$f, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$5, templateObject_8$
|
|
3917
|
+
var StyledPopper$1 = styled(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"])));
|
|
3918
|
+
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;
|
|
3905
3919
|
|
|
3906
3920
|
/**
|
|
3907
3921
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -4324,7 +4338,7 @@ var rounded$1 = function (props) {
|
|
|
4324
4338
|
var corners = getCorners(props);
|
|
4325
4339
|
return 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);
|
|
4326
4340
|
};
|
|
4327
|
-
var userInput = function (props) {
|
|
4341
|
+
var userInput$1 = function (props) {
|
|
4328
4342
|
var _a, _b;
|
|
4329
4343
|
var palette = getPalette(props);
|
|
4330
4344
|
return 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);
|
|
@@ -4345,7 +4359,7 @@ var warning$1 = function (props) {
|
|
|
4345
4359
|
var error$1 = function (props) {
|
|
4346
4360
|
var colors = getColors(props);
|
|
4347
4361
|
var red = colors === null || colors === void 0 ? void 0 : colors.error[400];
|
|
4348
|
-
return css(templateObject_8$
|
|
4362
|
+
return 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);
|
|
4349
4363
|
};
|
|
4350
4364
|
var isDisabled = function (props) {
|
|
4351
4365
|
var colors = getColors(props);
|
|
@@ -4365,7 +4379,7 @@ var StyledInputDropdown = styled(Button, {
|
|
|
4365
4379
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4366
4380
|
})(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) {
|
|
4367
4381
|
var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
|
|
4368
|
-
return 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));
|
|
4382
|
+
return 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));
|
|
4369
4383
|
});
|
|
4370
4384
|
var StyledDetail = styled("span", {
|
|
4371
4385
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
@@ -4419,7 +4433,7 @@ function labelStyle(props) {
|
|
|
4419
4433
|
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];
|
|
4420
4434
|
return 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);
|
|
4421
4435
|
}
|
|
4422
|
-
var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$
|
|
4436
|
+
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;
|
|
4423
4437
|
|
|
4424
4438
|
/**
|
|
4425
4439
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -4554,13 +4568,13 @@ var typeToCss = {
|
|
|
4554
4568
|
var doNotForwardProps$a = ["sdsType", "sdsStyle", "tagColor", "hover"];
|
|
4555
4569
|
var StyledTag$1 = styled(Chip$1, {
|
|
4556
4570
|
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
4557
|
-
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
4571
|
+
})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
4558
4572
|
var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, icon = props.icon;
|
|
4559
4573
|
var isRounded = sdsStyle === "rounded";
|
|
4560
4574
|
var type = sdsType || "primary";
|
|
4561
4575
|
return 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;");
|
|
4562
4576
|
});
|
|
4563
|
-
var templateObject_1$x, templateObject_2$h, templateObject_3$8, templateObject_4$6, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8;
|
|
4577
|
+
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;
|
|
4564
4578
|
|
|
4565
4579
|
/**
|
|
4566
4580
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -5158,21 +5172,36 @@ var InputSlider = forwardRef(function (props, ref) {
|
|
|
5158
5172
|
var sdsPropNames$2 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
|
|
5159
5173
|
var error = function (props) {
|
|
5160
5174
|
var borders = getBorders(props);
|
|
5161
|
-
|
|
5175
|
+
var colors = getColors(props);
|
|
5176
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], inputAdornmentClasses.root, buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
5162
5177
|
};
|
|
5163
5178
|
var warning = function (props) {
|
|
5164
5179
|
var borders = getBorders(props);
|
|
5165
|
-
|
|
5180
|
+
var colors = getColors(props);
|
|
5181
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], inputAdornmentClasses.root, buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
5166
5182
|
};
|
|
5167
5183
|
var disabledStyled$1 = function (props) {
|
|
5168
5184
|
var borders = getBorders(props);
|
|
5169
|
-
|
|
5185
|
+
var colors = getColors(props);
|
|
5186
|
+
return 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 "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[300], outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
5170
5187
|
};
|
|
5171
5188
|
var textArea = function (props) {
|
|
5172
5189
|
var spacings = getSpaces(props);
|
|
5173
|
-
|
|
5190
|
+
console.log(outlinedInputClasses.multiline);
|
|
5191
|
+
console.log(outlinedInputClasses.inputMultiline);
|
|
5192
|
+
return 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 "])), outlinedInputClasses.multiline, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, 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);
|
|
5174
5193
|
};
|
|
5175
|
-
var
|
|
5194
|
+
var userInput = function (props) {
|
|
5195
|
+
var intent = props.intent;
|
|
5196
|
+
var borders = getBorders(props);
|
|
5197
|
+
var border = intent === "error"
|
|
5198
|
+
? borders === null || borders === void 0 ? void 0 : borders.error[400]
|
|
5199
|
+
: intent === "warning"
|
|
5200
|
+
? borders === null || borders === void 0 ? void 0 : borders.warning[400]
|
|
5201
|
+
: borders === null || borders === void 0 ? void 0 : borders.primary[400];
|
|
5202
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border);
|
|
5203
|
+
};
|
|
5204
|
+
var StyledLabel = 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) {
|
|
5176
5205
|
var typography = getTypography(props);
|
|
5177
5206
|
var spacings = getSpaces(props);
|
|
5178
5207
|
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 ");
|
|
@@ -5181,14 +5210,14 @@ var StyledInputBase = styled(TextField, {
|
|
|
5181
5210
|
shouldForwardProp: function (prop) {
|
|
5182
5211
|
return !sdsPropNames$2.includes(prop.toString());
|
|
5183
5212
|
},
|
|
5184
|
-
})(
|
|
5185
|
-
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
5213
|
+
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5214
|
+
var intent = props.intent, sdsType = props.sdsType, sdsStage = props.sdsStage, disabled = props.disabled;
|
|
5186
5215
|
var spacings = getSpaces(props);
|
|
5187
5216
|
var borders = getBorders(props);
|
|
5188
5217
|
var corners = getCorners(props);
|
|
5189
|
-
return css(
|
|
5218
|
+
return 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, outlinedInputClasses.inputSizeSmall, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.l, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, borders === null || borders === void 0 ? void 0 : borders.gray[400], outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[500], outlinedInputClasses.root, outlinedInputClasses.focused, 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));
|
|
5190
5219
|
});
|
|
5191
|
-
var templateObject_1$l, templateObject_2$a, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7;
|
|
5220
|
+
var templateObject_1$l, templateObject_2$a, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
5192
5221
|
|
|
5193
5222
|
/**
|
|
5194
5223
|
* @see https://mui.com/material-ui/react-text-field/
|