@czi-sds/components 21.1.0 → 21.2.0
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.d.ts +1 -0
- package/dist/index.cjs.js +31 -26
- package/dist/index.esm.d.ts +1 -0
- package/dist/index.esm.js +31 -26
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.d.ts
CHANGED
|
@@ -997,6 +997,7 @@ interface ExtraDropdownMenuProps extends StyleProps$1 {
|
|
|
997
997
|
InputBaseProps?: Partial<InputSearchProps>;
|
|
998
998
|
PopperBaseProps?: Partial<PopperProps>;
|
|
999
999
|
title?: string;
|
|
1000
|
+
headerComponentSlot?: JSX.Element;
|
|
1000
1001
|
label?: string;
|
|
1001
1002
|
anchorEl: HTMLElement | null;
|
|
1002
1003
|
PopperComponent?: React.JSXElementConstructor<PopperProps>;
|
package/dist/index.cjs.js
CHANGED
|
@@ -4021,10 +4021,10 @@ var StyledSvgIcon = styled(material.SvgIcon, {
|
|
|
4021
4021
|
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
4022
4022
|
})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4023
4023
|
var sdsType = props.sdsType;
|
|
4024
|
-
return react.css(templateObject_5$
|
|
4024
|
+
return react.css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
|
|
4025
4025
|
});
|
|
4026
4026
|
var StyledIcon = styled("div")(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
|
|
4027
|
-
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$
|
|
4027
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$a;
|
|
4028
4028
|
|
|
4029
4029
|
/**
|
|
4030
4030
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4265,7 +4265,7 @@ var DestructiveButton = function (props) {
|
|
|
4265
4265
|
};
|
|
4266
4266
|
var StyledButton$3 = styled(material.Button, {
|
|
4267
4267
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
4268
|
-
})(templateObject_5$
|
|
4268
|
+
})(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4269
4269
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4270
4270
|
return react.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
|
|
4271
4271
|
});
|
|
@@ -4303,7 +4303,7 @@ var StyledButtonLegacy = styled(material.Button, {
|
|
|
4303
4303
|
var spaces = getSpaces(props);
|
|
4304
4304
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4305
4305
|
});
|
|
4306
|
-
var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$
|
|
4306
|
+
var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$9, templateObject_8$7, templateObject_9$3, templateObject_10$2, templateObject_11$1;
|
|
4307
4307
|
|
|
4308
4308
|
var isDisabled$1 = function (props) {
|
|
4309
4309
|
var _a, _b;
|
|
@@ -4329,7 +4329,7 @@ var small$1 = function (props) {
|
|
|
4329
4329
|
var sdsType = props.sdsType;
|
|
4330
4330
|
var iconSizes = getIconSizes(props);
|
|
4331
4331
|
var spaces = getSpaces(props);
|
|
4332
|
-
return react.css(templateObject_5$
|
|
4332
|
+
return react.css(templateObject_5$f || (templateObject_5$f = __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.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4333
4333
|
};
|
|
4334
4334
|
var medium$1 = function (props) {
|
|
4335
4335
|
var sdsType = props.sdsType;
|
|
@@ -4347,6 +4347,7 @@ var doNotForwardProps$o = [
|
|
|
4347
4347
|
"on",
|
|
4348
4348
|
"sdsSize",
|
|
4349
4349
|
"sdsType",
|
|
4350
|
+
"sdsStyle",
|
|
4350
4351
|
"sdsIcon",
|
|
4351
4352
|
"sdsIconProps",
|
|
4352
4353
|
];
|
|
@@ -4356,7 +4357,7 @@ var StyledButtonIcon = styled(material.IconButton, {
|
|
|
4356
4357
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4357
4358
|
return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\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), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
4358
4359
|
});
|
|
4359
|
-
var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$
|
|
4360
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$8, templateObject_8$6, templateObject_9$2;
|
|
4360
4361
|
|
|
4361
4362
|
var ButtonIconSizeToSdsIconSize = {
|
|
4362
4363
|
large: "xl",
|
|
@@ -4474,7 +4475,7 @@ var disabledStyled$2 = function (props) {
|
|
|
4474
4475
|
var semanticColors = getSemanticColors(props);
|
|
4475
4476
|
return react.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled);
|
|
4476
4477
|
};
|
|
4477
|
-
var StyledLabel$2 = styled("label")(templateObject_5$
|
|
4478
|
+
var StyledLabel$2 = styled("label")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4478
4479
|
var spaces = getSpaces(props);
|
|
4479
4480
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.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 ");
|
|
4480
4481
|
});
|
|
@@ -4491,7 +4492,7 @@ var StyledSearchBase = styled(material.TextField, {
|
|
|
4491
4492
|
return react.css(templateObject_6$9 || (templateObject_6$9 = __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 cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: 1;\n\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\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 cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: 1;\n\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && error$1(props), intent === "notice" && warning$1(props), disabled && disabledStyled$2(props));
|
|
4492
4493
|
});
|
|
4493
4494
|
var StyledInputAdornment = styled(material.InputAdornment)(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4494
|
-
var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$
|
|
4495
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$7, templateObject_8$5;
|
|
4495
4496
|
|
|
4496
4497
|
var StyledMenuItem$1 = styled(material.MenuItem)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4497
4498
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -4523,7 +4524,7 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$i || (templateObject_4$
|
|
|
4523
4524
|
var semanticColors = getSemanticColors(props);
|
|
4524
4525
|
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n }\n ");
|
|
4525
4526
|
});
|
|
4526
|
-
var ColumnWrapper = styled("span")(templateObject_5$
|
|
4527
|
+
var ColumnWrapper = styled("span")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4527
4528
|
var _a;
|
|
4528
4529
|
var semanticColors = getSemanticColors(props);
|
|
4529
4530
|
var spaces = getSpaces(props);
|
|
@@ -4558,7 +4559,7 @@ var StyledMinus = styled(iconsMaterial.Remove, {
|
|
|
4558
4559
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
|
|
4559
4560
|
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 ");
|
|
4560
4561
|
});
|
|
4561
|
-
var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$
|
|
4562
|
+
var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8, templateObject_7$6, templateObject_8$4;
|
|
4562
4563
|
|
|
4563
4564
|
/**
|
|
4564
4565
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -4768,13 +4769,13 @@ var StyledPaper$3 = styled(material.Paper)(templateObject_4$h || (templateObject
|
|
|
4768
4769
|
var semanticColors = getSemanticColors(props);
|
|
4769
4770
|
return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
|
|
4770
4771
|
});
|
|
4771
|
-
var StyledMenuItemDetails = styled("div")(templateObject_5$
|
|
4772
|
+
var StyledMenuItemDetails = styled("div")(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
4772
4773
|
var _a;
|
|
4773
4774
|
var semanticColors = getSemanticColors(props);
|
|
4774
4775
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n white-space: pre-wrap;\n ");
|
|
4775
4776
|
});
|
|
4776
4777
|
var StyledMenuItemText = styled("div")(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4777
|
-
var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$
|
|
4778
|
+
var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$7;
|
|
4778
4779
|
|
|
4779
4780
|
var AutocompleteBase = function (props) {
|
|
4780
4781
|
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose, disabled = props.disabled;
|
|
@@ -5268,12 +5269,12 @@ var secondary$1 = function (props) {
|
|
|
5268
5269
|
var doNotForwardProps$l = ["sdsType", "textChild"];
|
|
5269
5270
|
var StyledBanner = styled("div", {
|
|
5270
5271
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
5271
|
-
})(templateObject_5$
|
|
5272
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5272
5273
|
var sdsType = props.sdsType;
|
|
5273
5274
|
var spaces = getSpaces(props);
|
|
5274
5275
|
return "\n display: flex;\n align-items: center;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
|
|
5275
5276
|
});
|
|
5276
|
-
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$
|
|
5277
|
+
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$b;
|
|
5277
5278
|
|
|
5278
5279
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
5279
5280
|
var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, icon = props.icon, sdsIconProps = props.sdsIconProps, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps"]);
|
|
@@ -5466,7 +5467,7 @@ var tableStyles = function (props) {
|
|
|
5466
5467
|
var spaces = getSpaces(props);
|
|
5467
5468
|
return css.css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5468
5469
|
};
|
|
5469
|
-
var Subtitle$1 = styled("div")(templateObject_5$
|
|
5470
|
+
var Subtitle$1 = styled("div")(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5470
5471
|
var _a;
|
|
5471
5472
|
var semanticColors = getSemanticColors(props);
|
|
5472
5473
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
|
|
@@ -5474,7 +5475,7 @@ var Subtitle$1 = styled("div")(templateObject_5$9 || (templateObject_5$9 = __mak
|
|
|
5474
5475
|
var tooltipCss = function (props) {
|
|
5475
5476
|
var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5476
5477
|
var shadows = getShadows(props);
|
|
5477
|
-
return css.css(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n ", "\n ", "\n
|
|
5478
|
+
return css.css(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted ? dark(props) : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
|
|
5478
5479
|
};
|
|
5479
5480
|
var arrowCss = function (props) {
|
|
5480
5481
|
var _a, _b;
|
|
@@ -5489,7 +5490,7 @@ var arrowCss = function (props) {
|
|
|
5489
5490
|
* default placement which is calculated by javascript
|
|
5490
5491
|
*/
|
|
5491
5492
|
var StyledPopper$1 = 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"])));
|
|
5492
|
-
var templateObject_1$E, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$
|
|
5493
|
+
var templateObject_1$E, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$5, templateObject_8$3;
|
|
5493
5494
|
|
|
5494
5495
|
/**
|
|
5495
5496
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -5604,7 +5605,7 @@ var StyledCellIconWrapper = styled("div", {
|
|
|
5604
5605
|
var spaces = getSpaces(props);
|
|
5605
5606
|
return "\n padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n flex-direction: column;\n justify-content: ").concat(verticalAlignToFlexMap[iconVerticalAlign], ";\n ");
|
|
5606
5607
|
});
|
|
5607
|
-
var PrimaryTextWrapper = styled("div")(templateObject_5$
|
|
5608
|
+
var PrimaryTextWrapper = styled("div")(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5608
5609
|
var horizontalAlign = props.horizontalAlign;
|
|
5609
5610
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
5610
5611
|
});
|
|
@@ -5646,7 +5647,7 @@ var PrimaryTextComponentSlotRightWrapper = styled("div")(templateObject_10$1 ||
|
|
|
5646
5647
|
var spaces = getSpaces(props);
|
|
5647
5648
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
5648
5649
|
});
|
|
5649
|
-
var templateObject_1$D, templateObject_2$n, templateObject_3$f, templateObject_4$d, templateObject_5$
|
|
5650
|
+
var templateObject_1$D, templateObject_2$n, templateObject_3$f, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
5650
5651
|
|
|
5651
5652
|
var CellBasicContent = function (props) {
|
|
5652
5653
|
var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign, primaryTextComponentSlotRight = props.primaryTextComponentSlotRight, primaryTextComponentSlotBottom = props.primaryTextComponentSlotBottom, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
|
|
@@ -5798,7 +5799,7 @@ function createStatusCss(props, status) {
|
|
|
5798
5799
|
},
|
|
5799
5800
|
};
|
|
5800
5801
|
var statusColors = statusToColors[status];
|
|
5801
|
-
return react.css(templateObject_5$
|
|
5802
|
+
return react.css(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "], ["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "])), statusColors.light, statusColors.dark);
|
|
5802
5803
|
}
|
|
5803
5804
|
var statusToCss = {
|
|
5804
5805
|
beta: beta,
|
|
@@ -5815,7 +5816,7 @@ var StyledChip = styled(material.Chip, {
|
|
|
5815
5816
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
5816
5817
|
return react.css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
|
|
5817
5818
|
});
|
|
5818
|
-
var templateObject_1$A, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$
|
|
5819
|
+
var templateObject_1$A, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$8, templateObject_6$4, templateObject_7$3;
|
|
5819
5820
|
|
|
5820
5821
|
/**
|
|
5821
5822
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -5850,10 +5851,9 @@ var StyledHeaderTitle = styled("div", {
|
|
|
5850
5851
|
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
5851
5852
|
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
5852
5853
|
var _a;
|
|
5853
|
-
var search = props.search;
|
|
5854
5854
|
var spaces = getSpaces(props);
|
|
5855
5855
|
var semanticColors = getSemanticColors(props);
|
|
5856
|
-
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n
|
|
5856
|
+
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
5857
5857
|
});
|
|
5858
5858
|
var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
|
|
5859
5859
|
var StyledPopper = styled(material.Popper, {
|
|
@@ -5878,7 +5878,12 @@ var StyledPaper$1 = styled(material.Paper, {
|
|
|
5878
5878
|
var semanticColors = getSemanticColors(props);
|
|
5879
5879
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
|
|
5880
5880
|
});
|
|
5881
|
-
var
|
|
5881
|
+
var StyledDropdownMenuHeader = styled("div")(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5882
|
+
var search = props.search;
|
|
5883
|
+
var spaces = getSpaces(props);
|
|
5884
|
+
return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
5885
|
+
});
|
|
5886
|
+
var templateObject_1$z, templateObject_2$k, templateObject_3$c, templateObject_4$b, templateObject_5$7;
|
|
5882
5887
|
|
|
5883
5888
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
5884
5889
|
// for the dropdownMenu's popper component
|
|
@@ -5889,7 +5894,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
|
|
|
5889
5894
|
var DropdownMenu = function (props) {
|
|
5890
5895
|
var _a, _b;
|
|
5891
5896
|
var theme = material.useTheme();
|
|
5892
|
-
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search = _h === void 0 ? false : _h, title = props.title, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
5897
|
+
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search = _h === void 0 ? false : _h, title = props.title, headerComponentSlot = props.headerComponentSlot, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
5893
5898
|
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
5894
5899
|
// (masoudmanson): The DropdownMenu's Popper component should have a minimum
|
|
5895
5900
|
// width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
|
|
@@ -5913,7 +5918,7 @@ var DropdownMenu = function (props) {
|
|
|
5913
5918
|
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
5914
5919
|
// (masoudmanson): To override the width of the Popper,
|
|
5915
5920
|
// the sx prop's value must be set after spreading the PopperBaseProps.
|
|
5916
|
-
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title &&
|
|
5921
|
+
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] }), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
5917
5922
|
};
|
|
5918
5923
|
|
|
5919
5924
|
var doNotForwardProps$e = [
|
package/dist/index.esm.d.ts
CHANGED
|
@@ -997,6 +997,7 @@ interface ExtraDropdownMenuProps extends StyleProps$1 {
|
|
|
997
997
|
InputBaseProps?: Partial<InputSearchProps>;
|
|
998
998
|
PopperBaseProps?: Partial<PopperProps>;
|
|
999
999
|
title?: string;
|
|
1000
|
+
headerComponentSlot?: JSX.Element;
|
|
1000
1001
|
label?: string;
|
|
1001
1002
|
anchorEl: HTMLElement | null;
|
|
1002
1003
|
PopperComponent?: React.JSXElementConstructor<PopperProps>;
|
package/dist/index.esm.js
CHANGED
|
@@ -4001,10 +4001,10 @@ var StyledSvgIcon = styled(SvgIcon, {
|
|
|
4001
4001
|
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
4002
4002
|
})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4003
4003
|
var sdsType = props.sdsType;
|
|
4004
|
-
return css(templateObject_5$
|
|
4004
|
+
return css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
|
|
4005
4005
|
});
|
|
4006
4006
|
var StyledIcon = styled("div")(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
|
|
4007
|
-
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$
|
|
4007
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$a;
|
|
4008
4008
|
|
|
4009
4009
|
/**
|
|
4010
4010
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4245,7 +4245,7 @@ var DestructiveButton = function (props) {
|
|
|
4245
4245
|
};
|
|
4246
4246
|
var StyledButton$3 = styled(Button$1, {
|
|
4247
4247
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
4248
|
-
})(templateObject_5$
|
|
4248
|
+
})(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4249
4249
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4250
4250
|
return css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
|
|
4251
4251
|
});
|
|
@@ -4283,7 +4283,7 @@ var StyledButtonLegacy = styled(Button$1, {
|
|
|
4283
4283
|
var spaces = getSpaces(props);
|
|
4284
4284
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4285
4285
|
});
|
|
4286
|
-
var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$
|
|
4286
|
+
var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$9, templateObject_8$7, templateObject_9$3, templateObject_10$2, templateObject_11$1;
|
|
4287
4287
|
|
|
4288
4288
|
var isDisabled$1 = function (props) {
|
|
4289
4289
|
var _a, _b;
|
|
@@ -4309,7 +4309,7 @@ var small$1 = function (props) {
|
|
|
4309
4309
|
var sdsType = props.sdsType;
|
|
4310
4310
|
var iconSizes = getIconSizes(props);
|
|
4311
4311
|
var spaces = getSpaces(props);
|
|
4312
|
-
return css(templateObject_5$
|
|
4312
|
+
return css(templateObject_5$f || (templateObject_5$f = __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.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4313
4313
|
};
|
|
4314
4314
|
var medium$1 = function (props) {
|
|
4315
4315
|
var sdsType = props.sdsType;
|
|
@@ -4327,6 +4327,7 @@ var doNotForwardProps$o = [
|
|
|
4327
4327
|
"on",
|
|
4328
4328
|
"sdsSize",
|
|
4329
4329
|
"sdsType",
|
|
4330
|
+
"sdsStyle",
|
|
4330
4331
|
"sdsIcon",
|
|
4331
4332
|
"sdsIconProps",
|
|
4332
4333
|
];
|
|
@@ -4336,7 +4337,7 @@ var StyledButtonIcon = styled(IconButton, {
|
|
|
4336
4337
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4337
4338
|
return css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\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), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
4338
4339
|
});
|
|
4339
|
-
var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$
|
|
4340
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$8, templateObject_8$6, templateObject_9$2;
|
|
4340
4341
|
|
|
4341
4342
|
var ButtonIconSizeToSdsIconSize = {
|
|
4342
4343
|
large: "xl",
|
|
@@ -4454,7 +4455,7 @@ var disabledStyled$2 = function (props) {
|
|
|
4454
4455
|
var semanticColors = getSemanticColors(props);
|
|
4455
4456
|
return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled);
|
|
4456
4457
|
};
|
|
4457
|
-
var StyledLabel$2 = styled("label")(templateObject_5$
|
|
4458
|
+
var StyledLabel$2 = styled("label")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4458
4459
|
var spaces = getSpaces(props);
|
|
4459
4460
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.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 ");
|
|
4460
4461
|
});
|
|
@@ -4471,7 +4472,7 @@ var StyledSearchBase = styled(TextField, {
|
|
|
4471
4472
|
return css(templateObject_6$9 || (templateObject_6$9 = __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 cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: 1;\n\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\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 cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: 1;\n\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, outlinedInputClasses.root, buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && error$1(props), intent === "notice" && warning$1(props), disabled && disabledStyled$2(props));
|
|
4472
4473
|
});
|
|
4473
4474
|
var StyledInputAdornment = styled(InputAdornment)(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4474
|
-
var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$
|
|
4475
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$7, templateObject_8$5;
|
|
4475
4476
|
|
|
4476
4477
|
var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4477
4478
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -4503,7 +4504,7 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$i || (templateObject_4$
|
|
|
4503
4504
|
var semanticColors = getSemanticColors(props);
|
|
4504
4505
|
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n }\n ");
|
|
4505
4506
|
});
|
|
4506
|
-
var ColumnWrapper = styled("span")(templateObject_5$
|
|
4507
|
+
var ColumnWrapper = styled("span")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4507
4508
|
var _a;
|
|
4508
4509
|
var semanticColors = getSemanticColors(props);
|
|
4509
4510
|
var spaces = getSpaces(props);
|
|
@@ -4538,7 +4539,7 @@ var StyledMinus = styled(Remove, {
|
|
|
4538
4539
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
|
|
4539
4540
|
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 ");
|
|
4540
4541
|
});
|
|
4541
|
-
var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$
|
|
4542
|
+
var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8, templateObject_7$6, templateObject_8$4;
|
|
4542
4543
|
|
|
4543
4544
|
/**
|
|
4544
4545
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -4748,13 +4749,13 @@ var StyledPaper$3 = styled(Paper)(templateObject_4$h || (templateObject_4$h = __
|
|
|
4748
4749
|
var semanticColors = getSemanticColors(props);
|
|
4749
4750
|
return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
|
|
4750
4751
|
});
|
|
4751
|
-
var StyledMenuItemDetails = styled("div")(templateObject_5$
|
|
4752
|
+
var StyledMenuItemDetails = styled("div")(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
4752
4753
|
var _a;
|
|
4753
4754
|
var semanticColors = getSemanticColors(props);
|
|
4754
4755
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n white-space: pre-wrap;\n ");
|
|
4755
4756
|
});
|
|
4756
4757
|
var StyledMenuItemText = styled("div")(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4757
|
-
var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$
|
|
4758
|
+
var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$7;
|
|
4758
4759
|
|
|
4759
4760
|
var AutocompleteBase = function (props) {
|
|
4760
4761
|
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose, disabled = props.disabled;
|
|
@@ -5248,12 +5249,12 @@ var secondary$1 = function (props) {
|
|
|
5248
5249
|
var doNotForwardProps$l = ["sdsType", "textChild"];
|
|
5249
5250
|
var StyledBanner = styled("div", {
|
|
5250
5251
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
5251
|
-
})(templateObject_5$
|
|
5252
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5252
5253
|
var sdsType = props.sdsType;
|
|
5253
5254
|
var spaces = getSpaces(props);
|
|
5254
5255
|
return "\n display: flex;\n align-items: center;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
|
|
5255
5256
|
});
|
|
5256
|
-
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$
|
|
5257
|
+
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$b;
|
|
5257
5258
|
|
|
5258
5259
|
var Banner = forwardRef(function Banner(props, ref) {
|
|
5259
5260
|
var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, icon = props.icon, sdsIconProps = props.sdsIconProps, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps"]);
|
|
@@ -5446,7 +5447,7 @@ var tableStyles = function (props) {
|
|
|
5446
5447
|
var spaces = getSpaces(props);
|
|
5447
5448
|
return css$1(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5448
5449
|
};
|
|
5449
|
-
var Subtitle$1 = styled("div")(templateObject_5$
|
|
5450
|
+
var Subtitle$1 = styled("div")(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5450
5451
|
var _a;
|
|
5451
5452
|
var semanticColors = getSemanticColors(props);
|
|
5452
5453
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
|
|
@@ -5454,7 +5455,7 @@ var Subtitle$1 = styled("div")(templateObject_5$9 || (templateObject_5$9 = __mak
|
|
|
5454
5455
|
var tooltipCss = function (props) {
|
|
5455
5456
|
var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5456
5457
|
var shadows = getShadows(props);
|
|
5457
|
-
return css$1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n ", "\n ", "\n
|
|
5458
|
+
return css$1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted ? dark(props) : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
|
|
5458
5459
|
};
|
|
5459
5460
|
var arrowCss = function (props) {
|
|
5460
5461
|
var _a, _b;
|
|
@@ -5469,7 +5470,7 @@ var arrowCss = function (props) {
|
|
|
5469
5470
|
* default placement which is calculated by javascript
|
|
5470
5471
|
*/
|
|
5471
5472
|
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"])));
|
|
5472
|
-
var templateObject_1$E, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$
|
|
5473
|
+
var templateObject_1$E, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$5, templateObject_8$3;
|
|
5473
5474
|
|
|
5474
5475
|
/**
|
|
5475
5476
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -5584,7 +5585,7 @@ var StyledCellIconWrapper = styled("div", {
|
|
|
5584
5585
|
var spaces = getSpaces(props);
|
|
5585
5586
|
return "\n padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n flex-direction: column;\n justify-content: ").concat(verticalAlignToFlexMap[iconVerticalAlign], ";\n ");
|
|
5586
5587
|
});
|
|
5587
|
-
var PrimaryTextWrapper = styled("div")(templateObject_5$
|
|
5588
|
+
var PrimaryTextWrapper = styled("div")(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5588
5589
|
var horizontalAlign = props.horizontalAlign;
|
|
5589
5590
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
5590
5591
|
});
|
|
@@ -5626,7 +5627,7 @@ var PrimaryTextComponentSlotRightWrapper = styled("div")(templateObject_10$1 ||
|
|
|
5626
5627
|
var spaces = getSpaces(props);
|
|
5627
5628
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
5628
5629
|
});
|
|
5629
|
-
var templateObject_1$D, templateObject_2$n, templateObject_3$f, templateObject_4$d, templateObject_5$
|
|
5630
|
+
var templateObject_1$D, templateObject_2$n, templateObject_3$f, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
5630
5631
|
|
|
5631
5632
|
var CellBasicContent = function (props) {
|
|
5632
5633
|
var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign, primaryTextComponentSlotRight = props.primaryTextComponentSlotRight, primaryTextComponentSlotBottom = props.primaryTextComponentSlotBottom, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
|
|
@@ -5778,7 +5779,7 @@ function createStatusCss(props, status) {
|
|
|
5778
5779
|
},
|
|
5779
5780
|
};
|
|
5780
5781
|
var statusColors = statusToColors[status];
|
|
5781
|
-
return css(templateObject_5$
|
|
5782
|
+
return css(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "], ["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "])), statusColors.light, statusColors.dark);
|
|
5782
5783
|
}
|
|
5783
5784
|
var statusToCss = {
|
|
5784
5785
|
beta: beta,
|
|
@@ -5795,7 +5796,7 @@ var StyledChip = styled(Chip$1, {
|
|
|
5795
5796
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
5796
5797
|
return css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
|
|
5797
5798
|
});
|
|
5798
|
-
var templateObject_1$A, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$
|
|
5799
|
+
var templateObject_1$A, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$8, templateObject_6$4, templateObject_7$3;
|
|
5799
5800
|
|
|
5800
5801
|
/**
|
|
5801
5802
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -5830,10 +5831,9 @@ var StyledHeaderTitle = styled("div", {
|
|
|
5830
5831
|
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
5831
5832
|
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
5832
5833
|
var _a;
|
|
5833
|
-
var search = props.search;
|
|
5834
5834
|
var spaces = getSpaces(props);
|
|
5835
5835
|
var semanticColors = getSemanticColors(props);
|
|
5836
|
-
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n
|
|
5836
|
+
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
5837
5837
|
});
|
|
5838
5838
|
var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), autocompleteClasses.popper, autocompleteClasses.paper);
|
|
5839
5839
|
var StyledPopper = styled(Popper, {
|
|
@@ -5858,7 +5858,12 @@ var StyledPaper$1 = styled(Paper, {
|
|
|
5858
5858
|
var semanticColors = getSemanticColors(props);
|
|
5859
5859
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
|
|
5860
5860
|
});
|
|
5861
|
-
var
|
|
5861
|
+
var StyledDropdownMenuHeader = styled("div")(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5862
|
+
var search = props.search;
|
|
5863
|
+
var spaces = getSpaces(props);
|
|
5864
|
+
return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
5865
|
+
});
|
|
5866
|
+
var templateObject_1$z, templateObject_2$k, templateObject_3$c, templateObject_4$b, templateObject_5$7;
|
|
5862
5867
|
|
|
5863
5868
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
5864
5869
|
// for the dropdownMenu's popper component
|
|
@@ -5869,7 +5874,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
|
|
|
5869
5874
|
var DropdownMenu = function (props) {
|
|
5870
5875
|
var _a, _b;
|
|
5871
5876
|
var theme = useTheme();
|
|
5872
|
-
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search = _h === void 0 ? false : _h, title = props.title, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
5877
|
+
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search = _h === void 0 ? false : _h, title = props.title, headerComponentSlot = props.headerComponentSlot, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
5873
5878
|
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
5874
5879
|
// (masoudmanson): The DropdownMenu's Popper component should have a minimum
|
|
5875
5880
|
// width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
|
|
@@ -5893,7 +5898,7 @@ var DropdownMenu = function (props) {
|
|
|
5893
5898
|
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
5894
5899
|
// (masoudmanson): To override the width of the Popper,
|
|
5895
5900
|
// the sx prop's value must be set after spreading the PopperBaseProps.
|
|
5896
|
-
sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title &&
|
|
5901
|
+
sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] }), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
5897
5902
|
};
|
|
5898
5903
|
|
|
5899
5904
|
var doNotForwardProps$e = [
|