@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.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/
|
|
@@ -4857,9 +4871,6 @@ var Dropdown = function (_a) {
|
|
|
4857
4871
|
var _o = useState(null), anchorEl = _o[0], setAnchorEl = _o[1];
|
|
4858
4872
|
var _p = useState(getInitialValue), value = _p[0], setValue = _p[1];
|
|
4859
4873
|
var _q = useState([]), pendingValue = _q[0], setPendingValue = _q[1];
|
|
4860
|
-
useEffect(function () {
|
|
4861
|
-
onChange(value);
|
|
4862
|
-
}, [onChange, value]);
|
|
4863
4874
|
useEffect(function () {
|
|
4864
4875
|
if (isControlled) {
|
|
4865
4876
|
setValue(propValue);
|
|
@@ -4878,14 +4889,14 @@ var Dropdown = function (_a) {
|
|
|
4878
4889
|
setOpen(false);
|
|
4879
4890
|
}
|
|
4880
4891
|
if (multiple) {
|
|
4881
|
-
|
|
4892
|
+
setValueAndCallOnChange(pendingValue);
|
|
4882
4893
|
}
|
|
4883
4894
|
}
|
|
4884
4895
|
}
|
|
4885
4896
|
function handleClick(event) {
|
|
4886
4897
|
if (open) {
|
|
4887
4898
|
if (multiple) {
|
|
4888
|
-
|
|
4899
|
+
setValueAndCallOnChange(pendingValue);
|
|
4889
4900
|
}
|
|
4890
4901
|
setOpen(false);
|
|
4891
4902
|
if (anchorEl) {
|
|
@@ -4911,7 +4922,7 @@ var Dropdown = function (_a) {
|
|
|
4911
4922
|
return;
|
|
4912
4923
|
}
|
|
4913
4924
|
if (multiple) {
|
|
4914
|
-
|
|
4925
|
+
setValueAndCallOnChange(pendingValue);
|
|
4915
4926
|
}
|
|
4916
4927
|
if (anchorEl) {
|
|
4917
4928
|
anchorEl.focus();
|
|
@@ -4927,11 +4938,11 @@ var Dropdown = function (_a) {
|
|
|
4927
4938
|
if (multiple) {
|
|
4928
4939
|
if (isTriggerChangeOnOptionClick) {
|
|
4929
4940
|
setPendingValue(newValue);
|
|
4930
|
-
return
|
|
4941
|
+
return setValueAndCallOnChange(newValue);
|
|
4931
4942
|
}
|
|
4932
4943
|
return setPendingValue(newValue);
|
|
4933
4944
|
}
|
|
4934
|
-
|
|
4945
|
+
setValueAndCallOnChange(newValue);
|
|
4935
4946
|
setOpen(false);
|
|
4936
4947
|
}
|
|
4937
4948
|
function handleCancel() {
|
|
@@ -4955,6 +4966,10 @@ var Dropdown = function (_a) {
|
|
|
4955
4966
|
? []
|
|
4956
4967
|
: null;
|
|
4957
4968
|
}
|
|
4969
|
+
function setValueAndCallOnChange(newValue) {
|
|
4970
|
+
setValue(newValue);
|
|
4971
|
+
onChange(newValue);
|
|
4972
|
+
}
|
|
4958
4973
|
};
|
|
4959
4974
|
|
|
4960
4975
|
var _rect$1;
|
|
@@ -5158,21 +5173,36 @@ var InputSlider = forwardRef(function (props, ref) {
|
|
|
5158
5173
|
var sdsPropNames$2 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
|
|
5159
5174
|
var error = function (props) {
|
|
5160
5175
|
var borders = getBorders(props);
|
|
5161
|
-
|
|
5176
|
+
var colors = getColors(props);
|
|
5177
|
+
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
5178
|
};
|
|
5163
5179
|
var warning = function (props) {
|
|
5164
5180
|
var borders = getBorders(props);
|
|
5165
|
-
|
|
5181
|
+
var colors = getColors(props);
|
|
5182
|
+
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
5183
|
};
|
|
5167
5184
|
var disabledStyled$1 = function (props) {
|
|
5168
5185
|
var borders = getBorders(props);
|
|
5169
|
-
|
|
5186
|
+
var colors = getColors(props);
|
|
5187
|
+
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
5188
|
};
|
|
5171
5189
|
var textArea = function (props) {
|
|
5172
5190
|
var spacings = getSpaces(props);
|
|
5173
|
-
|
|
5191
|
+
console.log(outlinedInputClasses.multiline);
|
|
5192
|
+
console.log(outlinedInputClasses.inputMultiline);
|
|
5193
|
+
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
5194
|
};
|
|
5175
|
-
var
|
|
5195
|
+
var userInput = function (props) {
|
|
5196
|
+
var intent = props.intent;
|
|
5197
|
+
var borders = getBorders(props);
|
|
5198
|
+
var border = intent === "error"
|
|
5199
|
+
? borders === null || borders === void 0 ? void 0 : borders.error[400]
|
|
5200
|
+
: intent === "warning"
|
|
5201
|
+
? borders === null || borders === void 0 ? void 0 : borders.warning[400]
|
|
5202
|
+
: borders === null || borders === void 0 ? void 0 : borders.primary[400];
|
|
5203
|
+
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);
|
|
5204
|
+
};
|
|
5205
|
+
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
5206
|
var typography = getTypography(props);
|
|
5177
5207
|
var spacings = getSpaces(props);
|
|
5178
5208
|
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 +5211,14 @@ var StyledInputBase = styled(TextField, {
|
|
|
5181
5211
|
shouldForwardProp: function (prop) {
|
|
5182
5212
|
return !sdsPropNames$2.includes(prop.toString());
|
|
5183
5213
|
},
|
|
5184
|
-
})(
|
|
5185
|
-
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
5214
|
+
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5215
|
+
var intent = props.intent, sdsType = props.sdsType, sdsStage = props.sdsStage, disabled = props.disabled;
|
|
5186
5216
|
var spacings = getSpaces(props);
|
|
5187
5217
|
var borders = getBorders(props);
|
|
5188
5218
|
var corners = getCorners(props);
|
|
5189
|
-
return css(
|
|
5219
|
+
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
5220
|
});
|
|
5191
|
-
var templateObject_1$l, templateObject_2$a, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7;
|
|
5221
|
+
var templateObject_1$l, templateObject_2$a, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
5192
5222
|
|
|
5193
5223
|
/**
|
|
5194
5224
|
* @see https://mui.com/material-ui/react-text-field/
|