@czi-sds/components 22.16.0 → 22.16.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.d.ts +11 -10
- package/dist/index.cjs.js +709 -624
- package/dist/index.esm.d.ts +11 -10
- package/dist/index.esm.js +709 -624
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -1474,9 +1474,9 @@ function createFontFunction(config) {
|
|
|
1474
1474
|
var fontFamily = typography.fontFamily[styleType];
|
|
1475
1475
|
var additionalCss = config.additionalCss || "";
|
|
1476
1476
|
if (isNarrow) {
|
|
1477
|
-
return react.css(templateObject_1$
|
|
1477
|
+
return react.css(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), additionalCss, themeToCss(narrowStyles[weight][fontSize], fontFamily));
|
|
1478
1478
|
}
|
|
1479
|
-
return react.css(templateObject_2$
|
|
1479
|
+
return react.css(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n ", "\n ", "\n\n ", " {\n ", "\n }\n "], ["\n ", "\n ", "\n\n ", " {\n ", "\n }\n "])), additionalCss, themeToCss(wideStyles[weight][fontSize], fontFamily), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowStyles[weight][fontSize], fontFamily));
|
|
1480
1480
|
};
|
|
1481
1481
|
};
|
|
1482
1482
|
}
|
|
@@ -1580,41 +1580,41 @@ var fontLinkSemiboldXxs = fontLink("xxs", "semibold");
|
|
|
1580
1580
|
var fontLinkSemiboldXxxs = fontLink("xxxs", "semibold");
|
|
1581
1581
|
function themeToCss(fontTheme, fontFamily) {
|
|
1582
1582
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1583
|
-
return react.css(templateObject_3$
|
|
1583
|
+
return react.css(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n ", "\n "], ["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n ", "\n "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform, fontTheme.textDecoration
|
|
1584
1584
|
? "text-decoration: ".concat(fontTheme.textDecoration, ";")
|
|
1585
1585
|
: "");
|
|
1586
1586
|
}
|
|
1587
|
-
var templateObject_1$
|
|
1587
|
+
var templateObject_1$1d, templateObject_2$P, templateObject_3$F;
|
|
1588
1588
|
|
|
1589
|
-
var StyledAccordionDetails$1 = styled__default.default(material.AccordionDetails)(templateObject_2$
|
|
1589
|
+
var StyledAccordionDetails$1 = styled__default.default(material.AccordionDetails)(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
1590
1590
|
var spaces = getSpaces(props);
|
|
1591
|
-
return react.css(templateObject_1$
|
|
1591
|
+
return react.css(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n padding: ", "px ", "px ", "px;\n "], ["\n padding: ", "px ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
1592
1592
|
});
|
|
1593
|
-
var templateObject_1$
|
|
1593
|
+
var templateObject_1$1c, templateObject_2$O;
|
|
1594
1594
|
|
|
1595
1595
|
var AccordionDetails = function (props) {
|
|
1596
1596
|
var children = props.children, id = props.id, rest = __rest(props, ["children", "id"]);
|
|
1597
1597
|
return (jsxRuntime.jsx(StyledAccordionDetails$1, __assign({ id: id }, rest, { children: children })));
|
|
1598
1598
|
};
|
|
1599
1599
|
|
|
1600
|
-
var doNotForwardProps$
|
|
1600
|
+
var doNotForwardProps$K = ["chevronSize", "hasInvertedStyle"];
|
|
1601
1601
|
var StyledAccordionHeader = styled__default.default(material.AccordionSummary, {
|
|
1602
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
1603
|
-
})(templateObject_2$
|
|
1602
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$K.includes(prop); },
|
|
1603
|
+
})(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodySemiboldL, function (props) {
|
|
1604
1604
|
var _a, _b;
|
|
1605
1605
|
var chevronSize = props.chevronSize;
|
|
1606
1606
|
var spaces = getSpaces(props);
|
|
1607
1607
|
var semanticColors = getSemanticColors(props);
|
|
1608
|
-
return react.css(templateObject_1$
|
|
1608
|
+
return react.css(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n padding-right: ", "px;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-top: ", "px !important;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n padding-right: ", "px;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-top: ", "px !important;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, chevronSize === "xs"
|
|
1609
1609
|
? spaces === null || spaces === void 0 ? void 0 : spaces.xs
|
|
1610
1610
|
: spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
|
|
1611
1611
|
});
|
|
1612
|
-
var StyledSubtitle$1 = styled__default.default("p")(templateObject_4$
|
|
1612
|
+
var StyledSubtitle$1 = styled__default.default("p")(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1613
1613
|
var _a;
|
|
1614
1614
|
var semanticColors = getSemanticColors(props);
|
|
1615
|
-
return react.css(templateObject_3$
|
|
1615
|
+
return react.css(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
|
|
1616
1616
|
});
|
|
1617
|
-
var templateObject_1$
|
|
1617
|
+
var templateObject_1$1b, templateObject_2$N, templateObject_3$E, templateObject_4$B;
|
|
1618
1618
|
|
|
1619
1619
|
var _path$2h, _path2$G, _path3$7;
|
|
1620
1620
|
function _extends$2n() { return _extends$2n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2n.apply(null, arguments); }
|
|
@@ -4510,22 +4510,22 @@ var iconMap = {
|
|
|
4510
4510
|
},
|
|
4511
4511
|
};
|
|
4512
4512
|
|
|
4513
|
-
var doNotForwardProps$
|
|
4513
|
+
var doNotForwardProps$J = ["sdsIcon", "sdsSize", "iconColor"];
|
|
4514
4514
|
/**
|
|
4515
4515
|
* @see https://mui.com/material-ui/icons/#svgicon
|
|
4516
4516
|
*/
|
|
4517
4517
|
var StyledSvgIcon = styled__default.default(material.SvgIcon, {
|
|
4518
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4519
|
-
})(templateObject_2$
|
|
4518
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$J.includes(prop); },
|
|
4519
|
+
})(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4520
4520
|
var _a, _b, _c;
|
|
4521
4521
|
var mode = getMode(props);
|
|
4522
4522
|
var _d = props.iconColor, iconColor = _d === void 0 ? "indigo" : _d, _e = props.shade, shade = _e === void 0 ? mode === "dark" ? 600 : 500 : _e, sdsSize = props.sdsSize;
|
|
4523
4523
|
var iconSizes = getIconSizes(props);
|
|
4524
4524
|
var colors = getColors(props);
|
|
4525
|
-
return react.css(templateObject_1$
|
|
4525
|
+
return react.css(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "], ["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade], (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _c === void 0 ? void 0 : _c.width);
|
|
4526
4526
|
});
|
|
4527
|
-
var StyledIcon$2 = styled__default.default("div")(templateObject_3$
|
|
4528
|
-
var templateObject_1$
|
|
4527
|
+
var StyledIcon$2 = styled__default.default("div")(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
4528
|
+
var templateObject_1$1a, templateObject_2$M, templateObject_3$D;
|
|
4529
4529
|
|
|
4530
4530
|
/**
|
|
4531
4531
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4556,21 +4556,21 @@ var StyledAccordion$1 = styled__default.default(material.Accordion, {
|
|
|
4556
4556
|
shouldForwardProp: function (prop) {
|
|
4557
4557
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4558
4558
|
},
|
|
4559
|
-
})(templateObject_2$
|
|
4559
|
+
})(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4560
4560
|
var _a;
|
|
4561
4561
|
var useDivider = props.useDivider, togglePosition = props.togglePosition;
|
|
4562
4562
|
var shadows = getShadows(props);
|
|
4563
4563
|
var borders = getBorders(props);
|
|
4564
4564
|
var spaces = getSpaces(props);
|
|
4565
|
-
return react.css(templateObject_1$
|
|
4565
|
+
return react.css(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n border-bottom: ", ";\n height: fit-content;\n padding: ", "px;\n\n & .", " {\n ", "\n ", "\n padding: 0;\n min-height: unset;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n }\n }\n\n .", " {\n ", "\n padding: ", "px 0 0 0;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n border-bottom: ", ";\n height: fit-content;\n padding: ", "px;\n\n & .", " {\n ", "\n ", "\n padding: 0;\n min-height: unset;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n }\n }\n\n .", " {\n ", "\n padding: ", "px 0 0 0;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, useDivider ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider : "none", spaces === null || spaces === void 0 ? void 0 : spaces.s, material.accordionSummaryClasses.root, fontBodyMediumS(props), focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.l, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
|
|
4566
4566
|
});
|
|
4567
4567
|
var leftPosition = function (props) {
|
|
4568
4568
|
var _a, _b;
|
|
4569
4569
|
var spaces = getSpaces(props);
|
|
4570
4570
|
var iconSizes = getIconSizes(props);
|
|
4571
|
-
return react.css(templateObject_3$
|
|
4571
|
+
return react.css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n padding: 0;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n\n &.", " {\n transform: rotate(0deg);\n }\n }\n }\n\n /** This is to adjust the padding of the AccordionDetails when the togglePosition is left\n * The padding-left is the sum of the\n * left padding of the AccordionButton = spaces?.s\n * the width of the expandIcon = iconSizes?.xs.width\n * and the left padding of the AccordionSummary = spaces?.s \n */\n & .", " {\n padding-left: ", "px;\n }\n }\n "], ["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n padding: 0;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n\n &.", " {\n transform: rotate(0deg);\n }\n }\n }\n\n /** This is to adjust the padding of the AccordionDetails when the togglePosition is left\n * The padding-left is the sum of the\n * left padding of the AccordionButton = spaces?.s\n * the width of the expandIcon = iconSizes?.xs.width\n * and the left padding of the AccordionSummary = spaces?.s \n */\n & .", " {\n padding-left: ", "px;\n }\n }\n "])), material.accordionClasses.root, material.accordionSummaryClasses.root, material.accordionSummaryClasses.content, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.accordionSummaryClasses.expandIconWrapper, material.accordionSummaryClasses.expanded, material.accordionDetailsClasses.root, ((_a = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _a !== void 0 ? _a : 8) + ((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12));
|
|
4572
4572
|
};
|
|
4573
|
-
var templateObject_1$
|
|
4573
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$C;
|
|
4574
4574
|
|
|
4575
4575
|
/**
|
|
4576
4576
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4600,7 +4600,7 @@ var Accordion = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4600
4600
|
return (jsxRuntime.jsx(StyledAccordion$1, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, ref: ref, expanded: expanded === id, onChange: handleChange(id) }, rest, { children: enhancedChildren })));
|
|
4601
4601
|
});
|
|
4602
4602
|
|
|
4603
|
-
var StyledAlert = styled__default.default(material.Alert)(templateObject_1$
|
|
4603
|
+
var StyledAlert = styled__default.default(material.Alert)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4604
4604
|
var _a;
|
|
4605
4605
|
var colors = getColors(props);
|
|
4606
4606
|
var spaces = getSpaces(props);
|
|
@@ -4627,7 +4627,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4627
4627
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4628
4628
|
}
|
|
4629
4629
|
}
|
|
4630
|
-
var templateObject_1$
|
|
4630
|
+
var templateObject_1$18;
|
|
4631
4631
|
|
|
4632
4632
|
/**
|
|
4633
4633
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4774,7 +4774,7 @@ var showWarningIfFirstOccurence = function (warningType) {
|
|
|
4774
4774
|
SDS_WARNINGS[warningType].hasWarned = true;
|
|
4775
4775
|
};
|
|
4776
4776
|
|
|
4777
|
-
var doNotForwardProps$
|
|
4777
|
+
var doNotForwardProps$I = [
|
|
4778
4778
|
"isAllCaps",
|
|
4779
4779
|
"isRounded",
|
|
4780
4780
|
"sdsStyle",
|
|
@@ -4814,7 +4814,7 @@ var ButtonStyles = function (props) {
|
|
|
4814
4814
|
var boxshadow = variant === "outlined"
|
|
4815
4815
|
? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
|
|
4816
4816
|
: "none";
|
|
4817
|
-
return react.css(templateObject_1$
|
|
4817
|
+
return react.css(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n ", "\n background-color: ", ";\n border: none;\n border-radius: ", "px;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n white-space: nowrap;\n min-width: fit-content;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n background-color: ", ";\n border: none;\n border-radius: ", "px;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n white-space: nowrap;\n min-width: fit-content;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), fontBodyMediumXs(props), backgroundColor, corners === null || corners === void 0 ? void 0 : corners.l, boxshadow, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, variant === "outlined"
|
|
4818
4818
|
? (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.textActionHover
|
|
4819
4819
|
: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimaryInverse, variant === "outlined"
|
|
4820
4820
|
? (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.surfaceSecondary
|
|
@@ -4830,7 +4830,7 @@ var ButtonStyles = function (props) {
|
|
|
4830
4830
|
};
|
|
4831
4831
|
var Rounded = function (props) {
|
|
4832
4832
|
var corners = getCorners(props);
|
|
4833
|
-
return react.css(templateObject_2$
|
|
4833
|
+
return react.css(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.rounded);
|
|
4834
4834
|
};
|
|
4835
4835
|
var DestructiveButton = function (props) {
|
|
4836
4836
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4849,13 +4849,13 @@ var DestructiveButton = function (props) {
|
|
|
4849
4849
|
var boxshadow = variant === "outlined"
|
|
4850
4850
|
? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
|
|
4851
4851
|
: "none";
|
|
4852
|
-
return react.css(templateObject_3$
|
|
4852
|
+
return react.css(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), boxshadow, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.ornamentPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.ornamentDisabled);
|
|
4853
4853
|
};
|
|
4854
4854
|
var StyledButton$3 = styled__default.default(material.Button, {
|
|
4855
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4856
|
-
})(templateObject_5$
|
|
4855
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$I.includes(prop); },
|
|
4856
|
+
})(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4857
4857
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4858
|
-
return react.css(templateObject_4$
|
|
4858
|
+
return react.css(templateObject_4$A || (templateObject_4$A = __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));
|
|
4859
4859
|
});
|
|
4860
4860
|
// Minimal Button Styles
|
|
4861
4861
|
var Minimal = function (props) {
|
|
@@ -4865,60 +4865,60 @@ var Minimal = function (props) {
|
|
|
4865
4865
|
var iconSizes = getIconSizes(props);
|
|
4866
4866
|
var semanticColors = getSemanticColors(props);
|
|
4867
4867
|
var corners = getCorners(props);
|
|
4868
|
-
return react.css(templateObject_6$
|
|
4868
|
+
return react.css(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxs(props) : fontBodyMediumXs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, (_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _l === void 0 ? void 0 : _l.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
4869
4869
|
};
|
|
4870
4870
|
var PrimaryMinimalButton = function (props) {
|
|
4871
4871
|
var _a, _b;
|
|
4872
4872
|
var semanticColors = getSemanticColors(props);
|
|
4873
|
-
return react.css(templateObject_7$
|
|
4873
|
+
return react.css(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
|
|
4874
4874
|
};
|
|
4875
4875
|
var SecondaryMinimalButton = function (props) {
|
|
4876
4876
|
var _a, _b;
|
|
4877
4877
|
var semanticColors = getSemanticColors(props);
|
|
4878
|
-
return react.css(templateObject_8$
|
|
4878
|
+
return react.css(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
|
|
4879
4879
|
};
|
|
4880
4880
|
var StyledMinimalButton = styled__default.default(material.Button, {
|
|
4881
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4882
|
-
})(templateObject_10$
|
|
4881
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$I.includes(prop); },
|
|
4882
|
+
})(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4883
4883
|
var sdsType = props.sdsType;
|
|
4884
|
-
return react.css(templateObject_9$
|
|
4884
|
+
return react.css(templateObject_9$f || (templateObject_9$f = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4885
4885
|
});
|
|
4886
4886
|
var StyledButtonLegacy = styled__default.default(material.Button, {
|
|
4887
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4888
|
-
})(templateObject_11$
|
|
4887
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$I.includes(prop); },
|
|
4888
|
+
})(templateObject_11$9 || (templateObject_11$9 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4889
4889
|
if (!props.isRounded)
|
|
4890
4890
|
return "";
|
|
4891
4891
|
var corners = getCorners(props);
|
|
4892
4892
|
var spaces = getSpaces(props);
|
|
4893
4893
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.rounded, "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 ");
|
|
4894
4894
|
});
|
|
4895
|
-
var templateObject_1$
|
|
4895
|
+
var templateObject_1$17, templateObject_2$K, templateObject_3$B, templateObject_4$A, templateObject_5$t, templateObject_6$p, templateObject_7$k, templateObject_8$i, templateObject_9$f, templateObject_10$b, templateObject_11$9;
|
|
4896
4896
|
|
|
4897
4897
|
var isDisabled$1 = function (props) {
|
|
4898
4898
|
var _a, _b;
|
|
4899
4899
|
var semanticColors = getSemanticColors(props);
|
|
4900
|
-
return react.css(templateObject_1$
|
|
4900
|
+
return react.css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled);
|
|
4901
4901
|
};
|
|
4902
4902
|
var primary$2 = function (props) {
|
|
4903
4903
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4904
4904
|
var semanticColors = getSemanticColors(props);
|
|
4905
|
-
return react.css(templateObject_2$
|
|
4905
|
+
return react.css(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
|
|
4906
4906
|
};
|
|
4907
4907
|
var secondary$2 = function (props) {
|
|
4908
4908
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4909
4909
|
var semanticColors = getSemanticColors(props);
|
|
4910
|
-
return react.css(templateObject_3$
|
|
4910
|
+
return react.css(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
|
|
4911
4911
|
};
|
|
4912
4912
|
var tertiary = function (props) {
|
|
4913
4913
|
var _a, _b, _c, _d, _e, _f;
|
|
4914
4914
|
var semanticColors = getSemanticColors(props);
|
|
4915
|
-
return react.css(templateObject_4$
|
|
4915
|
+
return react.css(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryPressed);
|
|
4916
4916
|
};
|
|
4917
4917
|
var small$1 = function (props) {
|
|
4918
4918
|
var sdsType = props.sdsType;
|
|
4919
4919
|
var iconSizes = getIconSizes(props);
|
|
4920
4920
|
var spaces = getSpaces(props);
|
|
4921
|
-
return react.css(templateObject_5$
|
|
4921
|
+
return react.css(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4922
4922
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;")
|
|
4923
4923
|
: "", 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;") : "");
|
|
4924
4924
|
};
|
|
@@ -4926,7 +4926,7 @@ var medium$1 = function (props) {
|
|
|
4926
4926
|
var sdsType = props.sdsType;
|
|
4927
4927
|
var iconSizes = getIconSizes(props);
|
|
4928
4928
|
var spaces = getSpaces(props);
|
|
4929
|
-
return react.css(templateObject_6$
|
|
4929
|
+
return react.css(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4930
4930
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;")
|
|
4931
4931
|
: "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4932
4932
|
};
|
|
@@ -4934,11 +4934,11 @@ var large = function (props) {
|
|
|
4934
4934
|
var sdsType = props.sdsType;
|
|
4935
4935
|
var iconSizes = getIconSizes(props);
|
|
4936
4936
|
var spaces = getSpaces(props);
|
|
4937
|
-
return react.css(templateObject_7$
|
|
4937
|
+
return react.css(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4938
4938
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0;")
|
|
4939
4939
|
: "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;") : "");
|
|
4940
4940
|
};
|
|
4941
|
-
var doNotForwardProps$
|
|
4941
|
+
var doNotForwardProps$H = [
|
|
4942
4942
|
"on",
|
|
4943
4943
|
"sdsSize",
|
|
4944
4944
|
"sdsType",
|
|
@@ -4948,12 +4948,12 @@ var doNotForwardProps$G = [
|
|
|
4948
4948
|
"customTheme",
|
|
4949
4949
|
];
|
|
4950
4950
|
var StyledButtonIcon = styled__default.default(material.IconButton, {
|
|
4951
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4952
|
-
})(templateObject_9$
|
|
4951
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$H.includes(prop); },
|
|
4952
|
+
})(templateObject_9$e || (templateObject_9$e = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4953
4953
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4954
|
-
return react.css(templateObject_8$
|
|
4954
|
+
return react.css(templateObject_8$h || (templateObject_8$h = __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));
|
|
4955
4955
|
});
|
|
4956
|
-
var templateObject_1$
|
|
4956
|
+
var templateObject_1$16, templateObject_2$J, templateObject_3$A, templateObject_4$z, templateObject_5$s, templateObject_6$o, templateObject_7$j, templateObject_8$h, templateObject_9$e;
|
|
4957
4957
|
|
|
4958
4958
|
var ButtonIconSizeToSdsIconSize = {
|
|
4959
4959
|
large: "xl",
|
|
@@ -5051,7 +5051,7 @@ var Button = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5051
5051
|
}
|
|
5052
5052
|
});
|
|
5053
5053
|
|
|
5054
|
-
var doNotForwardProps$
|
|
5054
|
+
var doNotForwardProps$G = [
|
|
5055
5055
|
"sdsStyle",
|
|
5056
5056
|
"intent",
|
|
5057
5057
|
"handleSubmit",
|
|
@@ -5062,40 +5062,40 @@ var rounded$3 = function (props) {
|
|
|
5062
5062
|
var _a;
|
|
5063
5063
|
var corners = getCorners(props);
|
|
5064
5064
|
var semanticColors = getSemanticColors(props);
|
|
5065
|
-
return react.css(templateObject_1$
|
|
5065
|
+
return react.css(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "], ["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "])), material.outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.rounded, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.rounded, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary);
|
|
5066
5066
|
};
|
|
5067
5067
|
var applyIntentColor$2 = function (props, intent) {
|
|
5068
5068
|
var _a, _b, _c, _d;
|
|
5069
5069
|
var semanticColors = getSemanticColors(props);
|
|
5070
5070
|
var borders = getBorders(props);
|
|
5071
|
-
return react.css(templateObject_2$
|
|
5071
|
+
return react.css(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryPressed);
|
|
5072
5072
|
};
|
|
5073
5073
|
var disabledStyled$2 = function (props) {
|
|
5074
5074
|
var _a, _b, _c, _d, _e;
|
|
5075
5075
|
var semanticColors = getSemanticColors(props);
|
|
5076
|
-
return react.css(templateObject_3$
|
|
5076
|
+
return react.css(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n background-color: unset;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\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 background-color: unset;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\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.borderPrimaryDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryDisabled, material.inputAdornmentClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled);
|
|
5077
5077
|
};
|
|
5078
|
-
var StyledLabel$
|
|
5078
|
+
var StyledLabel$4 = styled__default.default("label")(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
5079
5079
|
var spaces = getSpaces(props);
|
|
5080
5080
|
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 ");
|
|
5081
5081
|
});
|
|
5082
5082
|
var StyledSearchBase = styled__default.default(material.TextField, {
|
|
5083
5083
|
shouldForwardProp: function (prop) {
|
|
5084
|
-
return !doNotForwardProps$
|
|
5084
|
+
return !doNotForwardProps$G.includes(prop.toString());
|
|
5085
5085
|
},
|
|
5086
|
-
})(templateObject_6$
|
|
5086
|
+
})(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5087
5087
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
5088
5088
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
5089
5089
|
var spaces = getSpaces(props);
|
|
5090
5090
|
var iconSizes = getIconSizes(props);
|
|
5091
5091
|
var semanticColors = getSemanticColors(props);
|
|
5092
5092
|
var corners = getCorners(props);
|
|
5093
|
-
return react.css(templateObject_5$
|
|
5093
|
+
return react.css(templateObject_5$r || (templateObject_5$r = __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 cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n border-radius: ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\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 }\n\n .", ":hover {\n background-color: ", ";\n\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 "], ["\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 cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n border-radius: ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\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 }\n\n .", ":hover {\n background-color: ", ";\n\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 "])), 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, corners === null || corners === void 0 ? void 0 : corners.l, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, (_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, material.outlinedInputClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.fillHover, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.ornamentSecondary, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderPrimaryHover, 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.base) === null || _m === void 0 ? void 0 : _m.ornamentSecondaryPressed, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderPrimaryHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
|
|
5094
5094
|
});
|
|
5095
|
-
var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$
|
|
5096
|
-
var templateObject_1$
|
|
5095
|
+
var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
5096
|
+
var templateObject_1$15, templateObject_2$I, templateObject_3$z, templateObject_4$y, templateObject_5$r, templateObject_6$n, templateObject_7$i;
|
|
5097
5097
|
|
|
5098
|
-
var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$
|
|
5098
|
+
var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5099
5099
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
5100
5100
|
var selected = props.selected;
|
|
5101
5101
|
var spaces = getSpaces(props);
|
|
@@ -5103,7 +5103,7 @@ var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject
|
|
|
5103
5103
|
var semanticColors = getSemanticColors(props);
|
|
5104
5104
|
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px !important;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n background-color: unset !important;\n\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n ").concat(StyledIcon$1, ", ").concat(DotIcon, " {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimary : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n ").concat(StyledIcon$1, ", ").concat(DotIcon, " {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentPrimary : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surface, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n }\n\n &:active {\n ").concat(StyledIcon$1, ", ").concat(DotIcon, " {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentPrimary, ";\n }\n\n &:active {\n ").concat(StyledIcon$1, ", ").concat(DotIcon, " {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentPrimary, ";\n }\n }\n }\n ");
|
|
5105
5105
|
});
|
|
5106
|
-
var ContentWrapper = styled__default.default("span")(templateObject_2$
|
|
5106
|
+
var ContentWrapper = styled__default.default("span")(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
|
|
5107
5107
|
var disabledStyles$2 = function (props) {
|
|
5108
5108
|
var _a;
|
|
5109
5109
|
var disabled = props.disabled;
|
|
@@ -5112,12 +5112,12 @@ var disabledStyles$2 = function (props) {
|
|
|
5112
5112
|
var semanticColors = getSemanticColors(props);
|
|
5113
5113
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n cursor: default;\n ");
|
|
5114
5114
|
};
|
|
5115
|
-
var TextWrapper = styled__default.default("span")(templateObject_3$
|
|
5115
|
+
var TextWrapper = styled__default.default("span")(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5116
5116
|
var _a;
|
|
5117
5117
|
var semanticColors = getSemanticColors(props);
|
|
5118
5118
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n display: flex;\n white-space: pre-wrap;\n ");
|
|
5119
5119
|
}, disabledStyles$2);
|
|
5120
|
-
var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$
|
|
5120
|
+
var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5121
5121
|
var _a;
|
|
5122
5122
|
var disabled = props.disabled;
|
|
5123
5123
|
var spaces = getSpaces(props);
|
|
@@ -5125,18 +5125,18 @@ var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$w || (
|
|
|
5125
5125
|
var semanticColors = getSemanticColors(props);
|
|
5126
5126
|
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.ornamentDisabled, ";") : null, ";\n }\n ");
|
|
5127
5127
|
});
|
|
5128
|
-
var ColumnWrapper = styled__default.default("span")(templateObject_5$
|
|
5128
|
+
var ColumnWrapper = styled__default.default("span")(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5129
5129
|
var _a;
|
|
5130
5130
|
var semanticColors = getSemanticColors(props);
|
|
5131
5131
|
var spaces = getSpaces(props);
|
|
5132
5132
|
return "\n text-align: right;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
5133
5133
|
}, disabledStyles$2);
|
|
5134
|
-
var StyledIconWrapper$1 = styled__default.default("span")(templateObject_6$
|
|
5134
|
+
var StyledIconWrapper$1 = styled__default.default("span")(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5135
5135
|
var spaces = getSpaces(props);
|
|
5136
5136
|
var iconSizes = getIconSizes(props);
|
|
5137
5137
|
return "\n display: flex;\n align-self: start;\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.xxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n ");
|
|
5138
5138
|
});
|
|
5139
|
-
var StyledIcon$1 = styled__default.default(Icon)(templateObject_7$
|
|
5139
|
+
var StyledIcon$1 = styled__default.default(Icon)(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5140
5140
|
var _a, _b;
|
|
5141
5141
|
var selected = props.selected, disabled = props.disabled;
|
|
5142
5142
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5145,7 +5145,7 @@ var StyledIcon$1 = styled__default.default(Icon)(templateObject_7$g || (template
|
|
|
5145
5145
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary;
|
|
5146
5146
|
return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n ");
|
|
5147
5147
|
});
|
|
5148
|
-
var DotIcon = styled__default.default("svg")(templateObject_8$
|
|
5148
|
+
var DotIcon = styled__default.default("svg")(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5149
5149
|
var _a, _b;
|
|
5150
5150
|
var selected = props.selected, disabled = props.disabled;
|
|
5151
5151
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5156,7 +5156,7 @@ var DotIcon = styled__default.default("svg")(templateObject_8$f || (templateObje
|
|
|
5156
5156
|
});
|
|
5157
5157
|
styled__default.default(iconsMaterial.Remove, {
|
|
5158
5158
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
5159
|
-
})(templateObject_9$
|
|
5159
|
+
})(templateObject_9$d || (templateObject_9$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5160
5160
|
var _a, _b;
|
|
5161
5161
|
var selected = props.selected, disabled = props.disabled;
|
|
5162
5162
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5166,7 +5166,7 @@ styled__default.default(iconsMaterial.Remove, {
|
|
|
5166
5166
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary;
|
|
5167
5167
|
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 ");
|
|
5168
5168
|
});
|
|
5169
|
-
var templateObject_1$
|
|
5169
|
+
var templateObject_1$14, templateObject_2$H, templateObject_3$y, templateObject_4$x, templateObject_5$q, templateObject_6$m, templateObject_7$h, templateObject_8$g, templateObject_9$d;
|
|
5170
5170
|
|
|
5171
5171
|
/**
|
|
5172
5172
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5323,7 +5323,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5323
5323
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
5324
5324
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
5325
5325
|
}
|
|
5326
|
-
return (jsxRuntime.jsxs("div", { className: cn(rootClassName), children: [jsxRuntime.jsx(StyledLabel$
|
|
5326
|
+
return (jsxRuntime.jsxs("div", { className: cn(rootClassName), children: [jsxRuntime.jsx(StyledLabel$4, { htmlFor: id, className: cn(labelClassName), children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef, className: cn(inputClassName, className),
|
|
5327
5327
|
// passed to mui Input
|
|
5328
5328
|
InputProps: {
|
|
5329
5329
|
endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", className: cn(endAdornmentClassName), children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: cn("input-search-clear-icon", clearButtonClassName), onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
|
|
@@ -5336,7 +5336,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5336
5336
|
autoComplete: "one-time-code" }, rest))] }));
|
|
5337
5337
|
});
|
|
5338
5338
|
|
|
5339
|
-
var doNotForwardProps$
|
|
5339
|
+
var doNotForwardProps$F = [
|
|
5340
5340
|
"count",
|
|
5341
5341
|
"keepSearchOnSelect",
|
|
5342
5342
|
"search",
|
|
@@ -5346,8 +5346,8 @@ var doNotForwardProps$E = [
|
|
|
5346
5346
|
"hasGroupBy",
|
|
5347
5347
|
];
|
|
5348
5348
|
var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
|
|
5349
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5350
|
-
})(templateObject_1$
|
|
5349
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$F.includes(prop); },
|
|
5350
|
+
})(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper, material.autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
|
|
5351
5351
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5352
5352
|
var search = props.search, groupBy = props.groupBy;
|
|
5353
5353
|
var spaces = getSpaces(props);
|
|
@@ -5356,8 +5356,8 @@ var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
|
|
|
5356
5356
|
return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, ";\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(groupBy ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surface, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surface, ";\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n }\n }\n ");
|
|
5357
5357
|
});
|
|
5358
5358
|
var InputBaseWrapper$1 = styled__default.default("div", {
|
|
5359
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5360
|
-
})(templateObject_2$
|
|
5359
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$F.includes(prop); },
|
|
5360
|
+
})(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5361
5361
|
var search = props.search;
|
|
5362
5362
|
if (!search) {
|
|
5363
5363
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -5367,12 +5367,12 @@ var InputBaseWrapper$1 = styled__default.default("div", {
|
|
|
5367
5367
|
}
|
|
5368
5368
|
});
|
|
5369
5369
|
var StyledMenuInputSearch$1 = styled__default.default(InputSearch, {
|
|
5370
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5371
|
-
})(templateObject_3$
|
|
5370
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$F.includes(prop); },
|
|
5371
|
+
})(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
5372
5372
|
var search = _a.search;
|
|
5373
5373
|
return (search ? "auto" : "transparent");
|
|
5374
5374
|
});
|
|
5375
|
-
var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$
|
|
5375
|
+
var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5376
5376
|
var _a, _b;
|
|
5377
5377
|
var corners = getCorners(props);
|
|
5378
5378
|
var shadows = getShadows(props);
|
|
@@ -5381,13 +5381,13 @@ var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$v |
|
|
|
5381
5381
|
var semanticColors = getSemanticColors(props);
|
|
5382
5382
|
return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n outline: 1px solid ").concat(addOpacityToHex(((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderSecondary) || "#000", 15), ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
|
|
5383
5383
|
});
|
|
5384
|
-
var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$
|
|
5384
|
+
var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5385
5385
|
var _a;
|
|
5386
5386
|
var semanticColors = getSemanticColors(props);
|
|
5387
5387
|
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 ");
|
|
5388
5388
|
});
|
|
5389
|
-
var StyledMenuItemText = styled__default.default("div")(templateObject_6$
|
|
5390
|
-
var templateObject_1$
|
|
5389
|
+
var StyledMenuItemText = styled__default.default("div")(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5390
|
+
var templateObject_1$13, templateObject_2$G, templateObject_3$x, templateObject_4$w, templateObject_5$p, templateObject_6$l;
|
|
5391
5391
|
|
|
5392
5392
|
var AutocompleteBase = function (props) {
|
|
5393
5393
|
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, _r = props.intent, intent = _r === void 0 ? "default" : _r;
|
|
@@ -5548,17 +5548,17 @@ var AutocompleteBase = function (props) {
|
|
|
5548
5548
|
}
|
|
5549
5549
|
};
|
|
5550
5550
|
|
|
5551
|
-
var StyledColumn = styled__default.default("div")(templateObject_1$
|
|
5551
|
+
var StyledColumn = styled__default.default("div")(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5552
5552
|
var _a = props.width, width = _a === void 0 ? 280 : _a;
|
|
5553
5553
|
return "\n position: relative;\n width: ".concat(width, "px;\n ");
|
|
5554
5554
|
});
|
|
5555
|
-
var StyledColumnTitle = styled__default.default("p")(templateObject_2$
|
|
5555
|
+
var StyledColumnTitle = styled__default.default("p")(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
5556
5556
|
var _a;
|
|
5557
5557
|
var spaces = getSpaces(props);
|
|
5558
5558
|
var semanticColors = getSemanticColors(props);
|
|
5559
5559
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n margin: 0;\n ");
|
|
5560
5560
|
});
|
|
5561
|
-
var templateObject_1$
|
|
5561
|
+
var templateObject_1$12, templateObject_2$F;
|
|
5562
5562
|
|
|
5563
5563
|
var AutocompleteGroup = function (props) {
|
|
5564
5564
|
var autocompleteProps = props.autocompleteProps, onValueChange = props.onValueChange, propValue = props.value, multiple = props.multiple, label = props.label, InputBaseProps = props.InputBaseProps, popperOpen = props.popperOpen, inputValue = props.inputValue, PaperComponent = props.PaperComponent, rest = __rest(props, ["autocompleteProps", "onValueChange", "value", "multiple", "label", "InputBaseProps", "popperOpen", "inputValue", "PaperComponent"]);
|
|
@@ -5598,7 +5598,7 @@ var AutocompleteGroup = function (props) {
|
|
|
5598
5598
|
}
|
|
5599
5599
|
};
|
|
5600
5600
|
|
|
5601
|
-
var doNotForwardProps$
|
|
5601
|
+
var doNotForwardProps$E = [
|
|
5602
5602
|
"anchorEl",
|
|
5603
5603
|
"count",
|
|
5604
5604
|
"keepSearchOnSelect",
|
|
@@ -5611,9 +5611,9 @@ var doNotForwardProps$D = [
|
|
|
5611
5611
|
];
|
|
5612
5612
|
var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
5613
5613
|
shouldForwardProp: function (prop) {
|
|
5614
|
-
return !doNotForwardProps$
|
|
5614
|
+
return !doNotForwardProps$E.includes(prop) || prop === "anchorEl";
|
|
5615
5615
|
},
|
|
5616
|
-
})(templateObject_1$
|
|
5616
|
+
})(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5617
5617
|
var _a;
|
|
5618
5618
|
var corners = getCorners(props);
|
|
5619
5619
|
var shadows = getShadows(props);
|
|
@@ -5623,39 +5623,39 @@ var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
|
5623
5623
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n padding: 0;\n }\n }\n ");
|
|
5624
5624
|
});
|
|
5625
5625
|
var StyledPaper$2 = styled__default.default(material.Paper, {
|
|
5626
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5627
|
-
})(templateObject_2$
|
|
5626
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
5627
|
+
})(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5628
5628
|
var _a;
|
|
5629
5629
|
var shadows = getShadows(props);
|
|
5630
5630
|
var semanticColors = getSemanticColors(props);
|
|
5631
5631
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n ");
|
|
5632
5632
|
});
|
|
5633
|
-
var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$
|
|
5633
|
+
var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5634
5634
|
var StyledAutocompleteInput = styled__default.default(InputSearch, {
|
|
5635
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5636
|
-
})(templateObject_4$
|
|
5635
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
5636
|
+
})(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
5637
5637
|
var search = _a.search;
|
|
5638
5638
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5639
5639
|
}, function (_a) {
|
|
5640
5640
|
var search = _a.search;
|
|
5641
5641
|
return (search ? "auto" : "transparent");
|
|
5642
5642
|
});
|
|
5643
|
-
var templateObject_1$
|
|
5643
|
+
var templateObject_1$11, templateObject_2$E, templateObject_3$w, templateObject_4$v;
|
|
5644
5644
|
|
|
5645
|
-
var StyledVerticalDivider = material.styled("div")(templateObject_1
|
|
5645
|
+
var StyledVerticalDivider = material.styled("div")(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5646
5646
|
var _a;
|
|
5647
5647
|
var spaces = getSpaces(props);
|
|
5648
5648
|
var semanticColors = getSemanticColors(props);
|
|
5649
5649
|
return "\n position: relative;\n width: 1px;\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
5650
5650
|
});
|
|
5651
|
-
var StyledColumnIcon = material.styled("span")(templateObject_2$
|
|
5651
|
+
var StyledColumnIcon = material.styled("span")(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5652
5652
|
var _a, _b;
|
|
5653
5653
|
var spaces = getSpaces(props);
|
|
5654
5654
|
var iconSizes = getIconSizes(props);
|
|
5655
5655
|
var semanticColors = getSemanticColors(props);
|
|
5656
5656
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n position: absolute;\n right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n top: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n\n svg {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, ";\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n }\n ");
|
|
5657
5657
|
});
|
|
5658
|
-
var templateObject_1
|
|
5658
|
+
var templateObject_1$10, templateObject_2$D;
|
|
5659
5659
|
|
|
5660
5660
|
var VerticalDivider = function (_a) {
|
|
5661
5661
|
var icon = _a.icon;
|
|
@@ -5842,13 +5842,13 @@ var Autocomplete = function (props) {
|
|
|
5842
5842
|
}
|
|
5843
5843
|
};
|
|
5844
5844
|
|
|
5845
|
-
var Centered = styled__default.default("div")(templateObject_1
|
|
5845
|
+
var Centered = styled__default.default("div")(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
5846
5846
|
var doNotForwardPropsIconWrapper = ["bannerType", "intent"];
|
|
5847
5847
|
var IconWrapper$1 = styled__default.default("div", {
|
|
5848
5848
|
shouldForwardProp: function (prop) {
|
|
5849
5849
|
return !doNotForwardPropsIconWrapper.includes(prop);
|
|
5850
5850
|
},
|
|
5851
|
-
})(templateObject_2$
|
|
5851
|
+
})(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5852
5852
|
var _a, _b;
|
|
5853
5853
|
var bannerType = props.bannerType, _c = props.intent, intent = _c === void 0 ? "info" : _c;
|
|
5854
5854
|
var spaces = getSpaces(props);
|
|
@@ -5863,7 +5863,7 @@ var StyledButton$2 = styled__default.default(Button, {
|
|
|
5863
5863
|
shouldForwardProp: function (prop) {
|
|
5864
5864
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5865
5865
|
},
|
|
5866
|
-
})(templateObject_3$
|
|
5866
|
+
})(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
|
|
5867
5867
|
var _a, _b;
|
|
5868
5868
|
var bannerType = props.bannerType;
|
|
5869
5869
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5871,7 +5871,7 @@ var StyledButton$2 = styled__default.default(Button, {
|
|
|
5871
5871
|
return "\n svg {\n fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill, ";\n opacity: .65;\n }\n\n svg:hover {\n opacity: 1;\n }\n ");
|
|
5872
5872
|
return "\n svg {\n fill: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary, ";\n opacity: .55;\n }\n\n svg:hover {\n opacity: 1;\n }\n ");
|
|
5873
5873
|
});
|
|
5874
|
-
styled__default.default("div")(templateObject_4$
|
|
5874
|
+
styled__default.default("div")(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5875
5875
|
var primary$1 = function (props) {
|
|
5876
5876
|
var _a, _b;
|
|
5877
5877
|
var _c = props.intent, intent = _c === void 0 ? "info" : _c;
|
|
@@ -5884,15 +5884,15 @@ var secondary$1 = function (props) {
|
|
|
5884
5884
|
var semanticColors = getSemanticColors(props);
|
|
5885
5885
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
|
|
5886
5886
|
};
|
|
5887
|
-
var doNotForwardProps$
|
|
5887
|
+
var doNotForwardProps$D = ["sdsType", "textChild", "intent"];
|
|
5888
5888
|
var StyledBanner = styled__default.default("div", {
|
|
5889
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5890
|
-
})(templateObject_5$
|
|
5889
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
5890
|
+
})(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5891
5891
|
var sdsType = props.sdsType;
|
|
5892
5892
|
var spaces = getSpaces(props);
|
|
5893
5893
|
return "\n display: flex;\n align-items: center;\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 \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
|
|
5894
5894
|
});
|
|
5895
|
-
var templateObject_1
|
|
5895
|
+
var templateObject_1$$, templateObject_2$C, templateObject_3$v, templateObject_4$u, templateObject_5$o;
|
|
5896
5896
|
|
|
5897
5897
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
5898
5898
|
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, _b = props.intent, intent = _b === void 0 ? "info" : _b, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps", "intent"]);
|
|
@@ -5964,16 +5964,16 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5964
5964
|
* All other props should be passed down to ButtonIcon; otherwise,
|
|
5965
5965
|
* the component won’t function as expected.
|
|
5966
5966
|
*/
|
|
5967
|
-
var doNotForwardProps$
|
|
5967
|
+
var doNotForwardProps$C = ["sdsStage"];
|
|
5968
5968
|
var StyledButtonToggle = styled__default.default(ButtonIcon, {
|
|
5969
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5970
|
-
})(templateObject_1$
|
|
5969
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$C.includes(prop); },
|
|
5970
|
+
})(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5971
5971
|
var _a;
|
|
5972
5972
|
var sdsStage = props.sdsStage;
|
|
5973
5973
|
var semanticColors = getSemanticColors(props);
|
|
5974
5974
|
return "\n background-color: ".concat(sdsStage === "on" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen : "transparent", ";\n ");
|
|
5975
5975
|
});
|
|
5976
|
-
var templateObject_1$
|
|
5976
|
+
var templateObject_1$_;
|
|
5977
5977
|
|
|
5978
5978
|
/**
|
|
5979
5979
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -5989,7 +5989,7 @@ var ButtonToggle = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5989
5989
|
}
|
|
5990
5990
|
});
|
|
5991
5991
|
|
|
5992
|
-
var doNotForwardProps$
|
|
5992
|
+
var doNotForwardProps$B = [
|
|
5993
5993
|
"calloutTitle",
|
|
5994
5994
|
"collapsed",
|
|
5995
5995
|
"severity",
|
|
@@ -5997,8 +5997,8 @@ var doNotForwardProps$A = [
|
|
|
5997
5997
|
"hideBody",
|
|
5998
5998
|
];
|
|
5999
5999
|
var StyledCallout = styled__default.default(material.Alert, {
|
|
6000
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6001
|
-
})(templateObject_1$
|
|
6000
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
6001
|
+
})(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
6002
6002
|
var _a, _b, _c, _d, _e;
|
|
6003
6003
|
var _f = props.intent, intent = _f === void 0 ? "info" : _f, sdsStyle = props.sdsStyle, hideBody = props.hideBody, collapsed = props.collapsed;
|
|
6004
6004
|
var spaces = getSpaces(props);
|
|
@@ -6009,12 +6009,12 @@ var StyledCallout = styled__default.default(material.Alert, {
|
|
|
6009
6009
|
var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfaceSecondary) !== null && _d !== void 0 ? _d : "white";
|
|
6010
6010
|
return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.xl, "px;\n color: ").concat((_e = palette === null || palette === void 0 ? void 0 : palette.text) === null || _e === void 0 ? void 0 : _e.primary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n background-color: ").concat(backgroundColor, ";\n align-items: ").concat((hideBody && sdsStyle === "expandable" && collapsed) || (hideBody && sdsStyle !== "expandable") ? "center" : "flex-start", ";\n\n .").concat(material.alertClasses.icon, " {\n margin-top: ").concat((hideBody && sdsStyle === "expandable" && collapsed) || (hideBody && sdsStyle !== "expandable") ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n padding: 0;\n\n path {\n fill: ").concat(iconColor, ";\n }\n }\n\n .").concat(material.alertClasses.message, " {\n width: 100%;\n padding: 0;\n margin: 0;\n\n .").concat(material.alertTitleClasses.root, " {\n margin: 0;\n }\n }\n\n .").concat(material.alertClasses.action, " {\n display: ").concat(sdsStyle === "persistent" ? "none" : "block", ";\n margin: 0 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n padding: 0;\n align-items: flex-start;\n\n > button {\n padding: 0;\n }\n }\n ");
|
|
6011
6011
|
});
|
|
6012
|
-
var templateObject_1$
|
|
6012
|
+
var templateObject_1$Z;
|
|
6013
6013
|
|
|
6014
6014
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
6015
6015
|
|
|
6016
|
-
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$
|
|
6017
|
-
var templateObject_1$
|
|
6016
|
+
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n margin: 0;\n"], ["\n ", "\n margin: 0;\n"])), fontBodySemiboldXs);
|
|
6017
|
+
var templateObject_1$Y;
|
|
6018
6018
|
|
|
6019
6019
|
var CalloutTitle = function (_a) {
|
|
6020
6020
|
var children = _a.children;
|
|
@@ -6023,24 +6023,24 @@ var CalloutTitle = function (_a) {
|
|
|
6023
6023
|
// Display name required to ensure Callout expand works correctly.
|
|
6024
6024
|
CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
|
|
6025
6025
|
|
|
6026
|
-
var StyledCalloutBody = styled__default.default("div")(templateObject_1$
|
|
6026
|
+
var StyledCalloutBody = styled__default.default("div")(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
6027
6027
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a;
|
|
6028
6028
|
var spaces = getSpaces(props);
|
|
6029
6029
|
return "\n margin: ".concat(!hideTitle ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0 0;\n ");
|
|
6030
6030
|
});
|
|
6031
|
-
var templateObject_1$
|
|
6031
|
+
var templateObject_1$X;
|
|
6032
6032
|
|
|
6033
6033
|
var CalloutBody = function (_a) {
|
|
6034
6034
|
var children = _a.children, hideTitle = _a.hideTitle;
|
|
6035
6035
|
return (jsxRuntime.jsx(StyledCalloutBody, { hideTitle: hideTitle, children: children }));
|
|
6036
6036
|
};
|
|
6037
6037
|
|
|
6038
|
-
var StyledCalloutExtraContent = styled__default.default("div")(templateObject_1$
|
|
6038
|
+
var StyledCalloutExtraContent = styled__default.default("div")(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6039
6039
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a, _b = props.hideBody, hideBody = _b === void 0 ? false : _b;
|
|
6040
6040
|
var spaces = getSpaces(props);
|
|
6041
6041
|
return "\n margin: ".concat(hideTitle && hideBody ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0 0;\n ");
|
|
6042
6042
|
});
|
|
6043
|
-
var templateObject_1$
|
|
6043
|
+
var templateObject_1$W;
|
|
6044
6044
|
|
|
6045
6045
|
var CalloutExtraContent = function (_a) {
|
|
6046
6046
|
var children = _a.children, hideTitle = _a.hideTitle, hideBody = _a.hideBody;
|
|
@@ -6109,30 +6109,30 @@ var dark$1 = function (props) {
|
|
|
6109
6109
|
var _a, _b;
|
|
6110
6110
|
var spaces = getSpaces(props);
|
|
6111
6111
|
var semanticColors = getSemanticColors(props);
|
|
6112
|
-
return css.css(templateObject_1$
|
|
6112
|
+
return css.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceOnDark, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryOnDark, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
6113
6113
|
};
|
|
6114
6114
|
var light$1 = function (props) {
|
|
6115
6115
|
var _a, _b;
|
|
6116
6116
|
var spaces = getSpaces(props);
|
|
6117
6117
|
var semanticColors = getSemanticColors(props);
|
|
6118
|
-
return css.css(templateObject_2$
|
|
6118
|
+
return css.css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
6119
6119
|
};
|
|
6120
6120
|
var tableStyles = function (props) {
|
|
6121
6121
|
var spaces = getSpaces(props);
|
|
6122
|
-
return css.css(templateObject_3$
|
|
6122
|
+
return css.css(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
6123
6123
|
};
|
|
6124
|
-
var doNotForwardProps$
|
|
6124
|
+
var doNotForwardProps$A = ["hasInvertedStyle", "textAlign"];
|
|
6125
6125
|
var StyledTitle = styled__default.default("p", {
|
|
6126
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6127
|
-
})(templateObject_4$
|
|
6126
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
6127
|
+
})(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyMediumXs, function (props) {
|
|
6128
6128
|
var _a, _b;
|
|
6129
6129
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
6130
6130
|
var semanticColors = getSemanticColors(props);
|
|
6131
6131
|
return "\n margin: 0;\n color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryOnDark : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
|
|
6132
6132
|
});
|
|
6133
6133
|
var StyledSubtitle = styled__default.default("p", {
|
|
6134
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6135
|
-
})(templateObject_5$
|
|
6134
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
6135
|
+
})(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6136
6136
|
var _a, _b;
|
|
6137
6137
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
6138
6138
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6144,7 +6144,7 @@ var tooltipCss = function (props) {
|
|
|
6144
6144
|
var shadows = getShadows(props);
|
|
6145
6145
|
var corners = getCorners(props);
|
|
6146
6146
|
var semanticColors = getSemanticColors(props);
|
|
6147
|
-
return css.css(templateObject_6$
|
|
6147
|
+
return css.css(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n border-radius: ", "px;\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n border-radius: ", "px;\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n\n ", "\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.l, shadows === null || shadows === void 0 ? void 0 : shadows.m, width === "wide" ? "550px" : "250px", textAlign
|
|
6148
6148
|
? textAlign
|
|
6149
6149
|
: width === "wide"
|
|
6150
6150
|
? "left"
|
|
@@ -6157,7 +6157,7 @@ var arrowCss = function (props) {
|
|
|
6157
6157
|
var _a, _b;
|
|
6158
6158
|
var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
6159
6159
|
var semanticColors = getSemanticColors(props);
|
|
6160
|
-
return css.css(templateObject_7$
|
|
6160
|
+
return css.css(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
|
|
6161
6161
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceOnDark
|
|
6162
6162
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
|
|
6163
6163
|
};
|
|
@@ -6165,13 +6165,13 @@ var arrowCss = function (props) {
|
|
|
6165
6165
|
* (masoudmanson): !important is needed to override arrow's
|
|
6166
6166
|
* default placement which is calculated by javascript
|
|
6167
6167
|
*/
|
|
6168
|
-
var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$
|
|
6169
|
-
var StyledComponentSlotWrapper = styled__default.default("div")(templateObject_9$
|
|
6168
|
+
var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$f || (templateObject_8$f = __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"])));
|
|
6169
|
+
var StyledComponentSlotWrapper = styled__default.default("div")(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6170
6170
|
var shouldAddMargin = props.shouldAddMargin;
|
|
6171
6171
|
var spaces = getSpaces(props);
|
|
6172
6172
|
return "\n margin-top: ".concat(shouldAddMargin ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 0, "px;\n ");
|
|
6173
6173
|
});
|
|
6174
|
-
var templateObject_1$
|
|
6174
|
+
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$t, templateObject_5$n, templateObject_6$k, templateObject_7$g, templateObject_8$f, templateObject_9$c;
|
|
6175
6175
|
|
|
6176
6176
|
/**
|
|
6177
6177
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -6249,7 +6249,7 @@ function mergeClass$1(_a) {
|
|
|
6249
6249
|
return propClassName ? "".concat(propClassName, " ").concat(className) : className;
|
|
6250
6250
|
}
|
|
6251
6251
|
|
|
6252
|
-
var doNotForwardProps$
|
|
6252
|
+
var doNotForwardProps$z = [
|
|
6253
6253
|
"icon",
|
|
6254
6254
|
"iconVerticalAlign",
|
|
6255
6255
|
"horizontalAlign",
|
|
@@ -6279,8 +6279,8 @@ var verticalAlignToFlexMap = {
|
|
|
6279
6279
|
top: "flex-start",
|
|
6280
6280
|
};
|
|
6281
6281
|
var StyledTableData = styled__default.default("td", {
|
|
6282
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6283
|
-
})(templateObject_1$
|
|
6282
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
6283
|
+
})(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6284
6284
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6285
6285
|
var spaces = getSpaces(props);
|
|
6286
6286
|
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlignCSSMap[verticalAlign], ";\n overflow: hidden;\n ");
|
|
@@ -6291,30 +6291,30 @@ var ShouldWrap = function (lineCount) {
|
|
|
6291
6291
|
var ShouldTruncate$1 = function () {
|
|
6292
6292
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n word-break: break-all;\n ";
|
|
6293
6293
|
};
|
|
6294
|
-
var StyledCellContent = styled__default.default("div")(templateObject_2$
|
|
6295
|
-
var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$
|
|
6294
|
+
var StyledCellContent = styled__default.default("div")(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6295
|
+
var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
6296
6296
|
var StyledCellIconWrapper = styled__default.default("div", {
|
|
6297
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6298
|
-
})(templateObject_4$
|
|
6297
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
6298
|
+
})(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6299
6299
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
6300
6300
|
var spaces = getSpaces(props);
|
|
6301
6301
|
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 ");
|
|
6302
6302
|
});
|
|
6303
|
-
var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$
|
|
6303
|
+
var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6304
6304
|
var horizontalAlign = props.horizontalAlign;
|
|
6305
6305
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
6306
6306
|
});
|
|
6307
6307
|
var PrimaryText = styled__default.default("div", {
|
|
6308
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6309
|
-
})(templateObject_6$
|
|
6308
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
6309
|
+
})(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6310
6310
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a, _b = props.tabularNums, tabularNums = _b === void 0 ? false : _b;
|
|
6311
6311
|
return "\n display: block;\n font-variant-numeric: ".concat(tabularNums ? TABULAR_NUMS : "normal", ";\n \n ").concat(props.shouldTextWrap
|
|
6312
6312
|
? ShouldWrap(primaryTextWrapLineCount)
|
|
6313
6313
|
: ShouldTruncate$1(), "\n ");
|
|
6314
6314
|
});
|
|
6315
6315
|
var SecondaryText = styled__default.default("span", {
|
|
6316
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6317
|
-
})(templateObject_7$
|
|
6316
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
6317
|
+
})(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6318
6318
|
var _a;
|
|
6319
6319
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
|
|
6320
6320
|
var spaces = getSpaces(props);
|
|
@@ -6324,8 +6324,8 @@ var SecondaryText = styled__default.default("span", {
|
|
|
6324
6324
|
: ShouldTruncate$1(), "\n ");
|
|
6325
6325
|
});
|
|
6326
6326
|
var TertiaryText = styled__default.default("span", {
|
|
6327
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6328
|
-
})(templateObject_8$
|
|
6327
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
6328
|
+
})(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6329
6329
|
var _a;
|
|
6330
6330
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
|
|
6331
6331
|
var spaces = getSpaces(props);
|
|
@@ -6334,15 +6334,15 @@ var TertiaryText = styled__default.default("span", {
|
|
|
6334
6334
|
? ShouldWrap(tertiaryTextWrapLineCount)
|
|
6335
6335
|
: ShouldTruncate$1(), "\n ");
|
|
6336
6336
|
});
|
|
6337
|
-
var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$
|
|
6337
|
+
var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6338
6338
|
var spaces = getSpaces(props);
|
|
6339
6339
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6340
6340
|
});
|
|
6341
|
-
var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$
|
|
6341
|
+
var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6342
6342
|
var spaces = getSpaces(props);
|
|
6343
6343
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6344
6344
|
});
|
|
6345
|
-
var templateObject_1$
|
|
6345
|
+
var templateObject_1$U, templateObject_2$A, templateObject_3$t, templateObject_4$s, templateObject_5$m, templateObject_6$j, templateObject_7$f, templateObject_8$e, templateObject_9$b, templateObject_10$a;
|
|
6346
6346
|
|
|
6347
6347
|
var CellBasicContent = function (props) {
|
|
6348
6348
|
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, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
|
|
@@ -6356,15 +6356,15 @@ var CellBasic = React.forwardRef(function (props, ref) {
|
|
|
6356
6356
|
return (jsxRuntime.jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) })));
|
|
6357
6357
|
});
|
|
6358
6358
|
|
|
6359
|
-
var doNotForwardProps$
|
|
6359
|
+
var doNotForwardProps$y = ["horizontalAlign", "verticalAlign"];
|
|
6360
6360
|
var StyledCellComponentData = styled__default.default("td", {
|
|
6361
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6362
|
-
})(templateObject_1$
|
|
6361
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
6362
|
+
})(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6363
6363
|
var spaces = getSpaces(props);
|
|
6364
6364
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6365
6365
|
return "\n align-items: center;\n text-align: ".concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlign, ";\n overflow: hidden;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
6366
6366
|
});
|
|
6367
|
-
var templateObject_1$
|
|
6367
|
+
var templateObject_1$T;
|
|
6368
6368
|
|
|
6369
6369
|
var CellComponent = React.forwardRef(function (props, _) {
|
|
6370
6370
|
var children = props.children, rest = __rest(props, ["children"]);
|
|
@@ -6376,7 +6376,7 @@ var contentPositionMapping = {
|
|
|
6376
6376
|
left: "flex-start",
|
|
6377
6377
|
right: "flex-end",
|
|
6378
6378
|
};
|
|
6379
|
-
var doNotForwardProps$
|
|
6379
|
+
var doNotForwardProps$x = [
|
|
6380
6380
|
"active",
|
|
6381
6381
|
"horizontalAlign",
|
|
6382
6382
|
"shouldShowTooltipOnHover",
|
|
@@ -6387,8 +6387,8 @@ var doNotForwardProps$w = [
|
|
|
6387
6387
|
"shouldTruncate",
|
|
6388
6388
|
];
|
|
6389
6389
|
var StyledSortingIcon = styled__default.default(Icon, {
|
|
6390
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6391
|
-
})(templateObject_1$
|
|
6390
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6391
|
+
})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6392
6392
|
var _a;
|
|
6393
6393
|
var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
|
|
6394
6394
|
var spaces = getSpaces(props);
|
|
@@ -6399,8 +6399,8 @@ var ShouldTruncate = function () {
|
|
|
6399
6399
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n word-break: break-all;\n ";
|
|
6400
6400
|
};
|
|
6401
6401
|
var StyledTableHeader$1 = styled__default.default("th", {
|
|
6402
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6403
|
-
})(templateObject_2$
|
|
6402
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6403
|
+
})(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
6404
6404
|
var _a, _b, _c, _d, _e, _f;
|
|
6405
6405
|
var _g = props.active, active = _g === void 0 ? false : _g, _h = props.horizontalAlign, horizontalAlign = _h === void 0 ? "left" : _h, _j = props.hover, hover = _j === void 0 ? true : _j;
|
|
6406
6406
|
var spaces = getSpaces(props);
|
|
@@ -6414,18 +6414,18 @@ var StyledTableHeader$1 = styled__default.default("th", {
|
|
|
6414
6414
|
return "\n color: ".concat(defaultColor, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: ").concat(hover ? "pointer" : "default", ";\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(hover ? hoverColor : defaultColor, ";\n\n & .MuiButtonBase-root {\n color: ").concat(hoverColor, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n ");
|
|
6415
6415
|
});
|
|
6416
6416
|
var StyledCellHeaderText = styled__default.default("div", {
|
|
6417
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6418
|
-
})(templateObject_3$
|
|
6417
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6418
|
+
})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
|
|
6419
6419
|
var _a = props.shouldTruncate, shouldTruncate = _a === void 0 ? false : _a;
|
|
6420
6420
|
return "\n ".concat(shouldTruncate && ShouldTruncate(), "\n ");
|
|
6421
6421
|
});
|
|
6422
6422
|
var StyledCellHeaderContainer = styled__default.default("div", {
|
|
6423
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6424
|
-
})(templateObject_4$
|
|
6423
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6424
|
+
})(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6425
6425
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
6426
6426
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
6427
6427
|
});
|
|
6428
|
-
var templateObject_1$
|
|
6428
|
+
var templateObject_1$S, templateObject_2$z, templateObject_3$s, templateObject_4$r;
|
|
6429
6429
|
|
|
6430
6430
|
var CellHeaderContent = function (props) {
|
|
6431
6431
|
var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign, hover = props.hover, _c = props.shouldTruncate, shouldTruncate = _c === void 0 ? false : _c;
|
|
@@ -6445,20 +6445,20 @@ var CellHeader = React.forwardRef(function (props, ref) {
|
|
|
6445
6445
|
|
|
6446
6446
|
var small = function (props) {
|
|
6447
6447
|
var spaces = getSpaces(props);
|
|
6448
|
-
return react.css(templateObject_1$
|
|
6448
|
+
return react.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px ", "px;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n "], ["\n height: ", "px;\n padding: ", "px ", "px;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontCapsXxxxs(props));
|
|
6449
6449
|
};
|
|
6450
6450
|
var medium = function (props) {
|
|
6451
6451
|
var spaces = getSpaces(props);
|
|
6452
6452
|
var colors = getColors(props);
|
|
6453
|
-
return react.css(templateObject_2$
|
|
6453
|
+
return react.css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "], ["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
6454
6454
|
};
|
|
6455
6455
|
var rounded$2 = function (props) {
|
|
6456
6456
|
var corners = getCorners(props);
|
|
6457
|
-
return react.css(templateObject_3$
|
|
6457
|
+
return react.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.rounded);
|
|
6458
6458
|
};
|
|
6459
6459
|
var square$2 = function (props) {
|
|
6460
6460
|
var corners = getCorners(props);
|
|
6461
|
-
return react.css(templateObject_4$
|
|
6461
|
+
return react.css(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6462
6462
|
};
|
|
6463
6463
|
var success = function (props) {
|
|
6464
6464
|
return createStatusCss(props, "success");
|
|
@@ -6511,7 +6511,7 @@ function createStatusCss(props, status) {
|
|
|
6511
6511
|
},
|
|
6512
6512
|
};
|
|
6513
6513
|
var statusColors = statusToColors[status];
|
|
6514
|
-
return react.css(templateObject_5$
|
|
6514
|
+
return react.css(templateObject_5$l || (templateObject_5$l = __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);
|
|
6515
6515
|
}
|
|
6516
6516
|
var statusToCss = {
|
|
6517
6517
|
beta: beta,
|
|
@@ -6521,14 +6521,14 @@ var statusToCss = {
|
|
|
6521
6521
|
success: success,
|
|
6522
6522
|
warning: warning,
|
|
6523
6523
|
};
|
|
6524
|
-
var doNotForwardProps$
|
|
6524
|
+
var doNotForwardProps$w = ["isRounded"];
|
|
6525
6525
|
var StyledChip = styled__default.default(material.Chip, {
|
|
6526
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6527
|
-
})(templateObject_7$
|
|
6526
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
6527
|
+
})(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6528
6528
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6529
|
-
return react.css(templateObject_6$
|
|
6529
|
+
return react.css(templateObject_6$i || (templateObject_6$i = __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));
|
|
6530
6530
|
});
|
|
6531
|
-
var templateObject_1$
|
|
6531
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$r, templateObject_4$q, templateObject_5$l, templateObject_6$i, templateObject_7$e;
|
|
6532
6532
|
|
|
6533
6533
|
/**
|
|
6534
6534
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6546,7 +6546,7 @@ var Chip = function (props) {
|
|
|
6546
6546
|
return jsxRuntime.jsx(StyledChip, __assign({}, props));
|
|
6547
6547
|
};
|
|
6548
6548
|
|
|
6549
|
-
var doNotForwardProps$
|
|
6549
|
+
var doNotForwardProps$v = [
|
|
6550
6550
|
"anchorEl",
|
|
6551
6551
|
"count",
|
|
6552
6552
|
"keepSearchOnSelect",
|
|
@@ -6561,25 +6561,25 @@ var doNotForwardProps$u = [
|
|
|
6561
6561
|
"titleValue",
|
|
6562
6562
|
];
|
|
6563
6563
|
var StyledHeaderTitle = styled__default.default("div", {
|
|
6564
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6565
|
-
})(templateObject_1$
|
|
6564
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6565
|
+
})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyMediumXs, function (props) {
|
|
6566
6566
|
var _a;
|
|
6567
6567
|
var spaces = getSpaces(props);
|
|
6568
6568
|
var semanticColors = getSemanticColors(props);
|
|
6569
6569
|
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 ");
|
|
6570
6570
|
});
|
|
6571
6571
|
var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div", {
|
|
6572
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6573
|
-
})(templateObject_2$
|
|
6572
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6573
|
+
})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6574
6574
|
var search = props.search, titleValue = props.titleValue;
|
|
6575
6575
|
var spaces = getSpaces(props);
|
|
6576
6576
|
return "\n & .SdsAutocompleteMultiColumn-wrapper {\n padding: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n }\n\n & .").concat(material.autocompleteClasses.popper, ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: ").concat(!search && !titleValue ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0;\n border: none;\n outline: none !important;\n\n .MuiAutocomplete-listbox {\n outline: none !important;\n }\n\n .").concat(material.autocompleteClasses.paper, ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n outline: none !important;\n }\n }\n ");
|
|
6577
6577
|
});
|
|
6578
6578
|
var StyledPopper = styled__default.default(material.Popper, {
|
|
6579
6579
|
shouldForwardProp: function (prop) {
|
|
6580
|
-
return !doNotForwardProps$
|
|
6580
|
+
return !doNotForwardProps$v.includes(prop) || prop === "anchorEl";
|
|
6581
6581
|
},
|
|
6582
|
-
})(templateObject_3$
|
|
6582
|
+
})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6583
6583
|
var _a;
|
|
6584
6584
|
var borders = getBorders(props);
|
|
6585
6585
|
var corners = getCorners(props);
|
|
@@ -6588,8 +6588,8 @@ var StyledPopper = styled__default.default(material.Popper, {
|
|
|
6588
6588
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n z-index: 1400;\n ");
|
|
6589
6589
|
});
|
|
6590
6590
|
var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
6591
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6592
|
-
})(templateObject_4$
|
|
6591
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6592
|
+
})(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6593
6593
|
var _a, _b, _c, _d;
|
|
6594
6594
|
var spaces = getSpaces(props);
|
|
6595
6595
|
var shadows = getShadows(props);
|
|
@@ -6597,14 +6597,14 @@ var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
|
6597
6597
|
var corners = getCorners(props);
|
|
6598
6598
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: none !important;\n outline: 1px solid ").concat(addOpacityToHex(((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary) || "#000000", 15), ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n background-image: none;\n margin: 0;\n padding: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0;\n overflow: hidden;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n\n & .MuiInputBase-root.MuiOutlinedInput-root {\n border-radius: 0;\n }\n\n & fieldset {\n border-left: none !important;\n border-right: none !important;\n border-top: none !important;\n border-bottom: 1px solid ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.divider, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.divider, " !important;\n border-radius: 0;\n }\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 ");
|
|
6599
6599
|
});
|
|
6600
|
-
var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$
|
|
6600
|
+
var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6601
6601
|
var _a;
|
|
6602
6602
|
var search = props.search;
|
|
6603
6603
|
var spaces = getSpaces(props);
|
|
6604
6604
|
var semanticColors = getSemanticColors(props);
|
|
6605
6605
|
return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ").concat(search && "border-bottom: solid 1px ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";"), "\n ");
|
|
6606
6606
|
});
|
|
6607
|
-
var templateObject_1$
|
|
6607
|
+
var templateObject_1$Q, templateObject_2$x, templateObject_3$q, templateObject_4$p, templateObject_5$k;
|
|
6608
6608
|
|
|
6609
6609
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
6610
6610
|
// for the dropdownMenu's popper component
|
|
@@ -6640,7 +6640,7 @@ var DropdownMenu = function (props) {
|
|
|
6640
6640
|
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (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, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
6641
6641
|
};
|
|
6642
6642
|
|
|
6643
|
-
var doNotForwardProps$
|
|
6643
|
+
var doNotForwardProps$u = [
|
|
6644
6644
|
"intent",
|
|
6645
6645
|
"state",
|
|
6646
6646
|
"sdsType",
|
|
@@ -6664,27 +6664,27 @@ var inputDropdownStyles = function (props) {
|
|
|
6664
6664
|
var _m = props.width, width = _m === void 0 ? "auto" : _m;
|
|
6665
6665
|
var spaces = getSpaces(props);
|
|
6666
6666
|
var semanticColors = getSemanticColors(props);
|
|
6667
|
-
return react.css(templateObject_1$
|
|
6667
|
+
return react.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", ";\n min-width: 90px !important;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n ", " {\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", ";\n min-width: 90px !important;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n ", " {\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, /^\d+$/.test(width) ? "".concat(width, "px") : width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, IconWrapper, 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.ornamentSecondary, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
|
|
6668
6668
|
};
|
|
6669
6669
|
var minimal$1 = function (props) {
|
|
6670
6670
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6671
6671
|
var spaces = getSpaces(props);
|
|
6672
6672
|
var semanticColors = getSemanticColors(props);
|
|
6673
|
-
return react.css(templateObject_2$
|
|
6673
|
+
return react.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n box-shadow: none !important;\n background-color: transparent;\n min-width: auto;\n\n span {\n color: ", ";\n }\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n\n & > span {\n ", "\n margin-left: 0;\n }\n\n ", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n box-shadow: none !important;\n background-color: transparent;\n min-width: auto;\n\n span {\n color: ", ";\n }\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n\n & > span {\n ", "\n margin-left: 0;\n }\n\n ", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, labelFontBodyS(props), IconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xs, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover);
|
|
6674
6674
|
};
|
|
6675
6675
|
var square$1 = function (props) {
|
|
6676
6676
|
var corners = getCorners(props);
|
|
6677
|
-
return react.css(templateObject_3$
|
|
6677
|
+
return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6678
6678
|
};
|
|
6679
6679
|
var rounded$1 = function (props) {
|
|
6680
6680
|
var corners = getCorners(props);
|
|
6681
|
-
return react.css(templateObject_4$
|
|
6681
|
+
return react.css(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.rounded);
|
|
6682
6682
|
};
|
|
6683
6683
|
var userInput = function (props) {
|
|
6684
6684
|
var _a, _b, _c, _d;
|
|
6685
6685
|
var _e = props.sdsStyle, sdsStyle = _e === void 0 ? "square" : _e;
|
|
6686
6686
|
var semanticColors = getSemanticColors(props);
|
|
6687
|
-
return react.css(templateObject_5$
|
|
6687
|
+
return react.css(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, sdsStyle === "minimal"
|
|
6688
6688
|
? "\n border: none;\n color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n\n .styled-label {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n }\n ")
|
|
6689
6689
|
: "");
|
|
6690
6690
|
};
|
|
@@ -6693,7 +6693,7 @@ var isOpen = function (props) {
|
|
|
6693
6693
|
var _j = props.sdsStyle, sdsStyle = _j === void 0 ? "square" : _j, _k = props.intent, intent = _k === void 0 ? "default" : _k;
|
|
6694
6694
|
var semanticColors = getSemanticColors(props);
|
|
6695
6695
|
var inputColor = intentToColor$2[intent];
|
|
6696
|
-
return react.css(templateObject_6$
|
|
6696
|
+
return react.css(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n box-shadow: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n box-shadow: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
|
|
6697
6697
|
? "\n & > span, \n &:hover > span { \n color: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, "; \n }\n\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, "; \n ")
|
|
6698
6698
|
: "", (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryPressed, sdsStyle === "minimal"
|
|
6699
6699
|
? "none"
|
|
@@ -6704,12 +6704,12 @@ var isOpen = function (props) {
|
|
|
6704
6704
|
var applyIntentColor$1 = function (props, intent) {
|
|
6705
6705
|
var _a, _b, _c;
|
|
6706
6706
|
var semanticColors = getSemanticColors(props);
|
|
6707
|
-
return react.css(templateObject_7$
|
|
6707
|
+
return react.css(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n box-shadow: inset 0 0 0 1px ", ";\n\n &:hover {\n box-shadow: inset 0 0 0 1px ", ";\n }\n\n &:active {\n box-shadow: inset 0 0 0 1px ", ";\n }\n "], ["\n box-shadow: inset 0 0 0 1px ", ";\n\n &:hover {\n box-shadow: inset 0 0 0 1px ", ";\n }\n\n &:active {\n box-shadow: inset 0 0 0 1px ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.border, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderPrimaryHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryPressed);
|
|
6708
6708
|
};
|
|
6709
6709
|
var isDisabled = function (props) {
|
|
6710
6710
|
var _a, _b, _c, _d, _e, _f;
|
|
6711
6711
|
var semanticColors = getSemanticColors(props);
|
|
6712
|
-
return react.css(templateObject_8$
|
|
6712
|
+
return react.css(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n cursor: default;\n box-shadow: inset 0 0 0 1px ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label,\n ", ", ", " {\n color: ", ";\n }\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n box-shadow: inset 0 0 0 1px ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label,\n ", ", ", " {\n color: ", ";\n }\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, MinimalDetails, StyledDetail, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, StyledCounter, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundTertiary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentDisabled);
|
|
6713
6713
|
};
|
|
6714
6714
|
/**
|
|
6715
6715
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6720,10 +6720,10 @@ var isDisabled = function (props) {
|
|
|
6720
6720
|
* to the InputDropdownProps interface.
|
|
6721
6721
|
*/
|
|
6722
6722
|
var StyledInputDropdown = styled__default.default(Button, {
|
|
6723
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6724
|
-
})(templateObject_10$
|
|
6723
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6724
|
+
})(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n ", "\n ", "\n outline-offset: 1px !important;\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 outline-offset: 1px !important;\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, focusVisibleA11yStyle, function (props) {
|
|
6725
6725
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a;
|
|
6726
|
-
return react.css(templateObject_9$
|
|
6726
|
+
return react.css(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n ", "\n ", "\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), value && userInput(props), intent === "notice" &&
|
|
6727
6727
|
sdsStyle !== "minimal" &&
|
|
6728
6728
|
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6729
6729
|
sdsStyle !== "minimal" &&
|
|
@@ -6732,15 +6732,15 @@ var StyledInputDropdown = styled__default.default(Button, {
|
|
|
6732
6732
|
applyIntentColor$1(props, "positive"), state === "open" && isOpen(props), disabled && isDisabled(props));
|
|
6733
6733
|
});
|
|
6734
6734
|
var StyledDetail = styled__default.default("span", {
|
|
6735
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6736
|
-
})(templateObject_11$
|
|
6735
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6736
|
+
})(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6737
6737
|
var _a;
|
|
6738
6738
|
var spaces = getSpaces(props);
|
|
6739
6739
|
var semanticColors = getSemanticColors(props);
|
|
6740
6740
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
|
|
6741
6741
|
});
|
|
6742
|
-
var StyledLabel$
|
|
6743
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6742
|
+
var StyledLabel$3 = styled__default.default("span", {
|
|
6743
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6744
6744
|
})(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6745
6745
|
var _a, _b;
|
|
6746
6746
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
@@ -6752,7 +6752,7 @@ var StyledLabel$2 = styled__default.default("span", {
|
|
|
6752
6752
|
return "\n color: ".concat(labelColor, ";\n\n font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n ");
|
|
6753
6753
|
});
|
|
6754
6754
|
var StyledCounter = styled__default.default("span", {
|
|
6755
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6755
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6756
6756
|
})(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6757
6757
|
var _a, _b;
|
|
6758
6758
|
var corners = getCorners(props);
|
|
@@ -6761,7 +6761,7 @@ var StyledCounter = styled__default.default("span", {
|
|
|
6761
6761
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundTertiary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.rounded, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n height: 18px;\n min-width: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n ");
|
|
6762
6762
|
});
|
|
6763
6763
|
var MinimalDetails = styled__default.default("div", {
|
|
6764
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6764
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6765
6765
|
})(templateObject_14$5 || (templateObject_14$5 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (props) {
|
|
6766
6766
|
var _a;
|
|
6767
6767
|
var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
|
|
@@ -6770,10 +6770,10 @@ var MinimalDetails = styled__default.default("div", {
|
|
|
6770
6770
|
"overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;", "\n ");
|
|
6771
6771
|
});
|
|
6772
6772
|
var LabelWrapper = styled__default.default("span", {
|
|
6773
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6773
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6774
6774
|
})(templateObject_15$5 || (templateObject_15$5 = __makeTemplateObject(["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width: 100%;\n overflow: hidden;\n }\n"], ["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width: 100%;\n overflow: hidden;\n }\n"])));
|
|
6775
6775
|
var IconWrapper = styled__default.default("span", {
|
|
6776
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6776
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6777
6777
|
})(templateObject_16$4 || (templateObject_16$4 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-self: end;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-self: end;\n"])));
|
|
6778
6778
|
function labelStyle(props) {
|
|
6779
6779
|
var _a, _b;
|
|
@@ -6783,7 +6783,7 @@ function labelStyle(props) {
|
|
|
6783
6783
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6784
6784
|
return react.css(templateObject_17$4 || (templateObject_17$4 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
|
|
6785
6785
|
}
|
|
6786
|
-
var templateObject_1$
|
|
6786
|
+
var templateObject_1$P, templateObject_2$w, templateObject_3$p, templateObject_4$o, templateObject_5$j, templateObject_6$h, templateObject_7$d, templateObject_8$d, templateObject_9$a, templateObject_10$9, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$5, templateObject_15$5, templateObject_16$4, templateObject_17$4;
|
|
6787
6787
|
|
|
6788
6788
|
var VALID_SDS_STYLES = ["minimal", "square", "rounded"];
|
|
6789
6789
|
var validateSdsStyle = function (sdsStyle) {
|
|
@@ -6805,7 +6805,7 @@ var InputDropdown = function (props) {
|
|
|
6805
6805
|
var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
|
|
6806
6806
|
var shouldRenderCounter = multiple && counter !== undefined && counter !== "0" && !isMinimal;
|
|
6807
6807
|
var rootClassName = classes.root, labelClassName = classes.label, contentWrapperClassName = classes.contentWrapper, labelDetailsWrapperClassName = classes.labelDetailsWrapper, detailsClassName = classes.details, counterClassName = classes.counter, iconWrapperClassName = classes.iconWrapper, chevronIconClassName = classes.chevronIcon, minimalDetailsClassName = classes.minimalDetails;
|
|
6808
|
-
return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { className: cn(rootClassName, className), sdsStyle: sdsStyle, "aria-label": "Dropdown input", children: [jsxRuntime.jsxs(LabelWrapper, { className: cn(contentWrapperClassName), children: [jsxRuntime.jsxs("div", { className: cn(labelDetailsWrapperClassName), children: [jsxRuntime.jsx(StyledLabel$
|
|
6808
|
+
return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { className: cn(rootClassName, className), sdsStyle: sdsStyle, "aria-label": "Dropdown input", children: [jsxRuntime.jsxs(LabelWrapper, { className: cn(contentWrapperClassName), children: [jsxRuntime.jsxs("div", { className: cn(labelDetailsWrapperClassName), children: [jsxRuntime.jsx(StyledLabel$3, { className: cn("styled-label", labelClassName), details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
|
|
6809
6809
|
counter: counter,
|
|
6810
6810
|
details: details,
|
|
6811
6811
|
isMinimal: isMinimal,
|
|
@@ -6853,15 +6853,15 @@ function renderDetailsText(_a) {
|
|
|
6853
6853
|
}
|
|
6854
6854
|
}
|
|
6855
6855
|
|
|
6856
|
-
var doNotForwardProps$
|
|
6856
|
+
var doNotForwardProps$t = ["buttonPosition"];
|
|
6857
6857
|
var StyledButtonsWrapper = styled__default.default("div", {
|
|
6858
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6859
|
-
})(templateObject_1$
|
|
6858
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6859
|
+
})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6860
6860
|
var buttonPosition = props.buttonPosition;
|
|
6861
6861
|
var spaces = getSpaces(props);
|
|
6862
6862
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n width: 100%;\n\n & > div {\n gap: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0;\n display: flex;\n align-items: center;\n flex-direction: row;\n width: 100%;\n\n & > button {\n width: 100%;\n }\n }\n ");
|
|
6863
6863
|
});
|
|
6864
|
-
var templateObject_1$
|
|
6864
|
+
var templateObject_1$O;
|
|
6865
6865
|
|
|
6866
6866
|
// Custom hook for managing dropdown state
|
|
6867
6867
|
function useDropdownState(propValue, multiple, options) {
|
|
@@ -7153,33 +7153,33 @@ var tagSizeS = function (props) {
|
|
|
7153
7153
|
var spaces = getSpaces(props);
|
|
7154
7154
|
var iconSizes = getIconSizes(props);
|
|
7155
7155
|
var semanticColors = getSemanticColors(props);
|
|
7156
|
-
return react.css(templateObject_1$
|
|
7156
|
+
return react.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
7157
7157
|
};
|
|
7158
7158
|
var tagSizeL = function (props) {
|
|
7159
7159
|
var _a;
|
|
7160
7160
|
var spaces = getSpaces(props);
|
|
7161
7161
|
var iconSizes = getIconSizes(props);
|
|
7162
7162
|
var semanticColors = getSemanticColors(props);
|
|
7163
|
-
return react.css(templateObject_2$
|
|
7163
|
+
return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
7164
7164
|
};
|
|
7165
7165
|
var rounded = function (props) {
|
|
7166
7166
|
var corners = getCorners(props);
|
|
7167
7167
|
var spaces = getSpaces(props);
|
|
7168
7168
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
7169
7169
|
var topBottomPadding = sdsSize === "s" ? spaces === null || spaces === void 0 ? void 0 : spaces.xxxs : icon ? spaces === null || spaces === void 0 ? void 0 : spaces.xxs : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
|
|
7170
|
-
return react.css(templateObject_3$
|
|
7170
|
+
return react.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.rounded, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.rounded);
|
|
7171
7171
|
};
|
|
7172
7172
|
var square = function (props) {
|
|
7173
7173
|
var corners = getCorners(props);
|
|
7174
7174
|
var spaces = getSpaces(props);
|
|
7175
7175
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
7176
7176
|
var topBottomPadding = sdsSize === "s" ? spaces === null || spaces === void 0 ? void 0 : spaces.xxxs : icon ? spaces === null || spaces === void 0 ? void 0 : spaces.xxs : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
|
|
7177
|
-
return react.css(templateObject_4$
|
|
7177
|
+
return react.css(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.m, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.m);
|
|
7178
7178
|
};
|
|
7179
7179
|
var withHover = function (props) {
|
|
7180
7180
|
var _a;
|
|
7181
7181
|
var semanticColors = getSemanticColors(props);
|
|
7182
|
-
return react.css(templateObject_5$
|
|
7182
|
+
return react.css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "], ["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse);
|
|
7183
7183
|
};
|
|
7184
7184
|
var primary = function (props) {
|
|
7185
7185
|
return createTypeCss(props, "primary");
|
|
@@ -7248,13 +7248,13 @@ function createTypeCss(props, type) {
|
|
|
7248
7248
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
7249
7249
|
};
|
|
7250
7250
|
var typeColors = typeToColors[type];
|
|
7251
|
-
return react.css(templateObject_6$
|
|
7251
|
+
return react.css(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
|
|
7252
7252
|
}
|
|
7253
7253
|
var typeToCss = {
|
|
7254
7254
|
primary: primary,
|
|
7255
7255
|
secondary: secondary,
|
|
7256
7256
|
};
|
|
7257
|
-
var doNotForwardProps$
|
|
7257
|
+
var doNotForwardProps$s = [
|
|
7258
7258
|
"sdsType",
|
|
7259
7259
|
"sdsStyle",
|
|
7260
7260
|
"sdsSize",
|
|
@@ -7262,14 +7262,14 @@ var doNotForwardProps$r = [
|
|
|
7262
7262
|
"hover",
|
|
7263
7263
|
];
|
|
7264
7264
|
var StyledTag$4 = styled__default.default(material.Chip, {
|
|
7265
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7266
|
-
})(templateObject_8$
|
|
7265
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
7266
|
+
})(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
7267
7267
|
var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7268
7268
|
var isRounded = sdsStyle === "rounded";
|
|
7269
7269
|
var type = sdsType || "primary";
|
|
7270
|
-
return react.css(templateObject_7$
|
|
7270
|
+
return react.css(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
|
|
7271
7271
|
});
|
|
7272
|
-
var templateObject_1$
|
|
7272
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$o, templateObject_4$n, templateObject_5$i, templateObject_6$g, templateObject_7$c, templateObject_8$c;
|
|
7273
7273
|
|
|
7274
7274
|
/**
|
|
7275
7275
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -7283,14 +7283,14 @@ var Tag = function (props) {
|
|
|
7283
7283
|
return jsxRuntime.jsx(StyledTag$4, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
7284
7284
|
};
|
|
7285
7285
|
|
|
7286
|
-
var StyledTag$3 = styled__default.default(Tag)(templateObject_2$
|
|
7286
|
+
var StyledTag$3 = styled__default.default(Tag)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7287
7287
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
7288
7288
|
var spaces = getSpaces(props);
|
|
7289
7289
|
var iconSizes = getIconSizes(props);
|
|
7290
7290
|
var semanticColors = getSemanticColors(props);
|
|
7291
|
-
return react.css(templateObject_1$
|
|
7291
|
+
return react.css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.height, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed);
|
|
7292
7292
|
});
|
|
7293
|
-
var templateObject_1$
|
|
7293
|
+
var templateObject_1$M, templateObject_2$u;
|
|
7294
7294
|
|
|
7295
7295
|
/**
|
|
7296
7296
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -7357,12 +7357,12 @@ var Chips = function (_a) {
|
|
|
7357
7357
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: chipLabels.map(function (label) { return (jsxRuntime.jsx(TagFilter, { label: label, onDelete: function () { return onDelete(label); }, onClick: function () { return onDelete(label); } }, label)); }) }));
|
|
7358
7358
|
};
|
|
7359
7359
|
|
|
7360
|
-
var Wrapper = styled__default.default("div")(templateObject_1$
|
|
7361
|
-
var StyledChipsWrapper = styled__default.default("div")(templateObject_2$
|
|
7360
|
+
var Wrapper = styled__default.default("div")(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
|
|
7361
|
+
var StyledChipsWrapper = styled__default.default("div")(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7362
7362
|
var spaces = getSpaces(props);
|
|
7363
7363
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
7364
7364
|
});
|
|
7365
|
-
var templateObject_1$
|
|
7365
|
+
var templateObject_1$L, templateObject_2$t;
|
|
7366
7366
|
|
|
7367
7367
|
// Helper function to remove item from array
|
|
7368
7368
|
var removeItemFromArray = function (arr, tag) {
|
|
@@ -7492,7 +7492,7 @@ var ComplexFilter = function (_a) {
|
|
|
7492
7492
|
return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(Dropdown, __assign({ label: label, multiple: multiple, search: search, value: value, onChange: handleDropdownChange, options: options, InputDropdownProps: __assign({}, InputDropdownProps), buttons: true }, rest)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] }));
|
|
7493
7493
|
};
|
|
7494
7494
|
|
|
7495
|
-
var doNotForwardProps$
|
|
7495
|
+
var doNotForwardProps$r = [
|
|
7496
7496
|
"visualElement",
|
|
7497
7497
|
"sdsType",
|
|
7498
7498
|
"imagePosition",
|
|
@@ -7516,8 +7516,8 @@ var doNotForwardProps$q = [
|
|
|
7516
7516
|
"classes",
|
|
7517
7517
|
];
|
|
7518
7518
|
var StyledCard = styled__default.default(material.Card, {
|
|
7519
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7520
|
-
})(templateObject_5$
|
|
7519
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
7520
|
+
})(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7521
7521
|
var _a, _b, _c, _d;
|
|
7522
7522
|
var _e = props.imagePosition, imagePosition = _e === void 0 ? "left" : _e, _f = props.sdsType, sdsType = _f === void 0 ? "wide" : _f, _g = props.boundingBox, boundingBox = _g === void 0 ? true : _g, _h = props.decorativeBorder, decorativeBorder = _h === void 0 ? false : _h, _j = props.imagePadding, imagePadding = _j === void 0 ? false : _j, visualElementType = props.visualElementType, _k = props.clickableCard, clickableCard = _k === void 0 ? false : _k;
|
|
7523
7523
|
var semanticColors = getSemanticColors(props);
|
|
@@ -7533,13 +7533,13 @@ var StyledCard = styled__default.default(material.Card, {
|
|
|
7533
7533
|
var showDecorativeBorder = visualElementType === "image"
|
|
7534
7534
|
? boundingBox && decorativeBorder && imagePadding
|
|
7535
7535
|
: boundingBox && decorativeBorder;
|
|
7536
|
-
return react.css(templateObject_4$
|
|
7537
|
-
showDecorativeBorder && react.css(templateObject_2$
|
|
7538
|
-
showDecorativeBorder && react.css(templateObject_3$
|
|
7536
|
+
return react.css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n overflow: auto;\n box-shadow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n &:hover,\n &:active {\n box-shadow: ", " !important;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n overflow: auto;\n box-shadow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n &:hover,\n &:active {\n box-shadow: ", " !important;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, corners === null || corners === void 0 ? void 0 : corners.xl, clickableCard ? shadows === null || shadows === void 0 ? void 0 : shadows.l : shadows === null || shadows === void 0 ? void 0 : shadows.none, boundingBox && react.css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n border: 1px solid ", ";\n background-color: ", ";\n "], ["\n border: 1px solid ", ";\n background-color: ", ";\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundPrimary), sdsType === "wide" &&
|
|
7537
|
+
showDecorativeBorder && react.css(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n border-left: 4px solid ", ";\n "], ["\n border-left: 4px solid ", ";\n "])), (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.border), sdsType === "narrow" &&
|
|
7538
|
+
showDecorativeBorder && react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n border-top: 4px solid ", ";\n "], ["\n border-top: 4px solid ", ";\n "])), (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border));
|
|
7539
7539
|
});
|
|
7540
7540
|
var StyledCardActionArea = styled__default.default(Button, {
|
|
7541
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7542
|
-
})(templateObject_6$
|
|
7541
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
7542
|
+
})(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7543
7543
|
var _a, _b;
|
|
7544
7544
|
var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
|
|
7545
7545
|
var semanticColors = getSemanticColors(props);
|
|
@@ -7553,22 +7553,22 @@ var StyledCardActionArea = styled__default.default(Button, {
|
|
|
7553
7553
|
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 100%;\n width: 100%;\n padding: 0;\n margin: 0;\n overflow: auto;\n text-align: unset;\n\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n &:hover,\n &:active {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n }\n ");
|
|
7554
7554
|
});
|
|
7555
7555
|
var StyledIconMediaWrapper = styled__default.default("div", {
|
|
7556
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7557
|
-
})(templateObject_10$
|
|
7556
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
7557
|
+
})(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7558
7558
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
7559
7559
|
var spaces = getSpaces(props);
|
|
7560
|
-
return react.css(templateObject_9$
|
|
7561
|
-
? react.css(templateObject_7$
|
|
7560
|
+
return react.css(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), boundingBox
|
|
7561
|
+
? react.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n padding: ", "px 0 ", "px ", "px;\n "], ["\n padding: ", "px 0 ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : react.css(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n padding-right: ", "px;\n "], ["\n padding-right: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
7562
7562
|
});
|
|
7563
7563
|
var StyledCardContent = styled__default.default("div", {
|
|
7564
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7564
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
7565
7565
|
})(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7566
7566
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
7567
7567
|
var spaces = getSpaces(props);
|
|
7568
|
-
return react.css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "])), boundingBox && react.css(templateObject_11$
|
|
7568
|
+
return react.css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "])), boundingBox && react.css(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
7569
7569
|
});
|
|
7570
7570
|
var StyledContentCardBody = styled__default.default(material.CardContent, {
|
|
7571
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7571
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
7572
7572
|
})(templateObject_14$4 || (templateObject_14$4 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7573
7573
|
var _a;
|
|
7574
7574
|
var semanticColors = getSemanticColors(props);
|
|
@@ -7576,9 +7576,9 @@ var StyledContentCardBody = styled__default.default(material.CardContent, {
|
|
|
7576
7576
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px 0 0;\n padding: 0;\n ");
|
|
7577
7577
|
});
|
|
7578
7578
|
var StyledCardContentAligner = styled__default.default("div")(templateObject_15$4 || (templateObject_15$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n"])));
|
|
7579
|
-
var templateObject_1$
|
|
7579
|
+
var templateObject_1$K, templateObject_2$s, templateObject_3$n, templateObject_4$m, templateObject_5$h, templateObject_6$f, templateObject_7$b, templateObject_8$b, templateObject_9$9, templateObject_10$8, templateObject_11$7, templateObject_12$4, templateObject_13$4, templateObject_14$4, templateObject_15$4;
|
|
7580
7580
|
|
|
7581
|
-
var doNotForwardProps$
|
|
7581
|
+
var doNotForwardProps$q = [
|
|
7582
7582
|
"visualElement",
|
|
7583
7583
|
"sdsType",
|
|
7584
7584
|
"imagePosition",
|
|
@@ -7590,41 +7590,41 @@ var doNotForwardProps$p = [
|
|
|
7590
7590
|
"contentBlock",
|
|
7591
7591
|
];
|
|
7592
7592
|
var StyledTitleWrapper = material.styled("div", {
|
|
7593
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7594
|
-
})(templateObject_1$
|
|
7593
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
7594
|
+
})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7595
7595
|
var spaces = getSpaces(props);
|
|
7596
7596
|
return "\n display: flex;\n flex-direction: column;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7597
7597
|
});
|
|
7598
7598
|
var StyledOverlineText = material.styled("p", {
|
|
7599
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7600
|
-
})(templateObject_2$
|
|
7599
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
7600
|
+
})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxs, function (props) {
|
|
7601
7601
|
var _a;
|
|
7602
7602
|
var semanticColors = getSemanticColors(props);
|
|
7603
7603
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin: 0;\n ");
|
|
7604
7604
|
});
|
|
7605
7605
|
var StyledTitleText = material.styled("p", {
|
|
7606
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7607
|
-
})(templateObject_3$
|
|
7606
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
7607
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderXl, function (props) {
|
|
7608
7608
|
var _a;
|
|
7609
7609
|
var semanticColors = getSemanticColors(props);
|
|
7610
7610
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin: 0;\n ");
|
|
7611
7611
|
});
|
|
7612
7612
|
var StyledSubtitleText = material.styled("p", {
|
|
7613
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7614
|
-
})(templateObject_4$
|
|
7613
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
7614
|
+
})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
|
|
7615
7615
|
var _a;
|
|
7616
7616
|
var semanticColors = getSemanticColors(props);
|
|
7617
7617
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin: 0;\n ");
|
|
7618
7618
|
});
|
|
7619
7619
|
var StyledMetadataText = material.styled("p", {
|
|
7620
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7621
|
-
})(templateObject_5$
|
|
7620
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
7621
|
+
})(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7622
7622
|
var _a;
|
|
7623
7623
|
var semanticColors = getSemanticColors(props);
|
|
7624
7624
|
var spaces = getSpaces(props);
|
|
7625
7625
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0 0;\n ");
|
|
7626
7626
|
});
|
|
7627
|
-
var templateObject_1$
|
|
7627
|
+
var templateObject_1$J, templateObject_2$r, templateObject_3$m, templateObject_4$l, templateObject_5$g;
|
|
7628
7628
|
|
|
7629
7629
|
var createTextComponent = function (StyledComponent) {
|
|
7630
7630
|
return function (_a) {
|
|
@@ -7644,15 +7644,15 @@ var ContentCardTitle = React.forwardRef(function ContentCardTitle(props, ref) {
|
|
|
7644
7644
|
return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { className: cn(cardHeader), children: [jsxRuntime.jsx(OverlineText, { text: overlineText, className: cardOverline }), jsxRuntime.jsx(TitleText, { text: titleText, className: cardTitle }), jsxRuntime.jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsxRuntime.jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
|
|
7645
7645
|
});
|
|
7646
7646
|
|
|
7647
|
-
var doNotForwardProps$
|
|
7647
|
+
var doNotForwardProps$p = ["buttonsPosition"];
|
|
7648
7648
|
var StyledCardActions = styled__default.default(material.CardActions, {
|
|
7649
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7650
|
-
})(templateObject_1$
|
|
7649
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7650
|
+
})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7651
7651
|
var _a = props.buttonsPosition, buttonsPosition = _a === void 0 ? "left" : _a;
|
|
7652
7652
|
var spaces = getSpaces(props);
|
|
7653
7653
|
return "\n margin: 0;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px 0 0;\n display: flex;\n gap: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n justify-content: ").concat(buttonsPosition === "right" ? "flex-end" : "flex-start", ";\n\n & > * {\n margin: 0 !important;\n }\n ");
|
|
7654
7654
|
});
|
|
7655
|
-
var templateObject_1$
|
|
7655
|
+
var templateObject_1$I;
|
|
7656
7656
|
|
|
7657
7657
|
var isButtonElement = function (child) {
|
|
7658
7658
|
if (React__namespace.default.isValidElement(child) && child.type === Button) {
|
|
@@ -7703,7 +7703,7 @@ var ContentCardActions = React.forwardRef(function ContentCardActions(props, ref
|
|
|
7703
7703
|
return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cn(cardActions), children: validChildren }));
|
|
7704
7704
|
});
|
|
7705
7705
|
|
|
7706
|
-
var doNotForwardProps$
|
|
7706
|
+
var doNotForwardProps$o = [
|
|
7707
7707
|
"imagePadding",
|
|
7708
7708
|
"boundingBox",
|
|
7709
7709
|
"sdsType",
|
|
@@ -7712,23 +7712,23 @@ var doNotForwardProps$n = [
|
|
|
7712
7712
|
"imagePosition",
|
|
7713
7713
|
];
|
|
7714
7714
|
var StyledImageMediaWrapper = material.styled("div", {
|
|
7715
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7716
|
-
})(templateObject_9$
|
|
7715
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7716
|
+
})(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7717
7717
|
var _a = props.imagePadding, imagePadding = _a === void 0 ? false : _a, _b = props.boundingBox, boundingBox = _b === void 0 ? true : _b, _c = props.sdsType, sdsType = _c === void 0 ? "wide" : _c, _d = props.imagePosition, imagePosition = _d === void 0 ? "left" : _d;
|
|
7718
7718
|
var spaces = getSpaces(props);
|
|
7719
|
-
return material.css(templateObject_8$
|
|
7719
|
+
return material.css(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n display: flex;\n align-items: start;\n\n ", "\n\n ", "\n "], ["\n display: flex;\n align-items: start;\n\n ", "\n\n ", "\n "])), boundingBox
|
|
7720
7720
|
? imagePadding
|
|
7721
|
-
? material.css(templateObject_1$
|
|
7721
|
+
? material.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n padding: ", "px;\n ", "\n "], ["\n padding: ", "px;\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, imagePosition === "left"
|
|
7722
7722
|
? "padding-right: 0;"
|
|
7723
|
-
: "padding-left: 0;") : material.css(templateObject_2$
|
|
7724
|
-
: material.css(templateObject_3$
|
|
7723
|
+
: "padding-left: 0;") : material.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7724
|
+
: material.css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
|
|
7725
7725
|
? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
|
|
7726
|
-
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$
|
|
7726
|
+
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
|
|
7727
7727
|
? imagePadding
|
|
7728
|
-
? material.css(templateObject_4$
|
|
7729
|
-
: material.css(templateObject_6$
|
|
7728
|
+
? material.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n padding: ", "px;\n padding-bottom: 0;\n "], ["\n padding: ", "px;\n padding-bottom: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl) : material.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7729
|
+
: material.css(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n padding-bottom: ", "px;\n "], ["\n padding-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl)));
|
|
7730
7730
|
});
|
|
7731
|
-
var templateObject_1$
|
|
7731
|
+
var templateObject_1$H, templateObject_2$q, templateObject_3$l, templateObject_4$k, templateObject_5$f, templateObject_6$e, templateObject_7$a, templateObject_8$a, templateObject_9$8;
|
|
7732
7732
|
|
|
7733
7733
|
/**
|
|
7734
7734
|
* @see https://mui.com/material-ui/api/card-media/
|
|
@@ -7839,10 +7839,10 @@ var ContentCard = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
7839
7839
|
});
|
|
7840
7840
|
|
|
7841
7841
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
7842
|
-
var doNotForwardProps$
|
|
7842
|
+
var doNotForwardProps$n = ["sdsSize"];
|
|
7843
7843
|
var StyledPaper = styled__default.default(material.Paper, {
|
|
7844
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7845
|
-
})(templateObject_1$
|
|
7844
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
7845
|
+
})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
|
|
7846
7846
|
var _a, _b;
|
|
7847
7847
|
var sdsSize = props.sdsSize;
|
|
7848
7848
|
var spaces = getSpaces(props);
|
|
@@ -7875,7 +7875,7 @@ function paperDimensions(props) {
|
|
|
7875
7875
|
var _b = sizeToDimensions[sdsSize], width = _b.width, minHeight = _b.minHeight;
|
|
7876
7876
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
7877
7877
|
}
|
|
7878
|
-
var templateObject_1$
|
|
7878
|
+
var templateObject_1$G;
|
|
7879
7879
|
|
|
7880
7880
|
/**
|
|
7881
7881
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -7885,14 +7885,14 @@ var DialogPaper = React.forwardRef(function DialogPaper(props, ref) {
|
|
|
7885
7885
|
return jsxRuntime.jsx(StyledPaper, __assign({ sdsSize: sdsSize, ref: ref }, rest));
|
|
7886
7886
|
});
|
|
7887
7887
|
|
|
7888
|
-
var StyledButton$1 = styled__default.default(Button)(templateObject_1$
|
|
7888
|
+
var StyledButton$1 = styled__default.default(Button)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
7889
7889
|
var sdsSize = props.sdsSize;
|
|
7890
7890
|
var isSmall = sdsSize === "small" || sdsSize === "medium";
|
|
7891
7891
|
var spaces = getSpaces(props);
|
|
7892
7892
|
var right = isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.xxl;
|
|
7893
7893
|
return "\n right: ".concat(right, "px;\n ");
|
|
7894
7894
|
});
|
|
7895
|
-
var templateObject_1$
|
|
7895
|
+
var templateObject_1$F;
|
|
7896
7896
|
|
|
7897
7897
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
7898
7898
|
l: "large",
|
|
@@ -7907,18 +7907,18 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
7907
7907
|
return (jsxRuntime.jsx(StyledButton$1, __assign({ "aria-label": "Close", ref: ref, onClick: onClick, sdsSize: size, icon: "XMark", sdsStyle: "icon", sdsType: "tertiary", className: className }, rest)));
|
|
7908
7908
|
});
|
|
7909
7909
|
|
|
7910
|
-
var doNotForwardProps$
|
|
7910
|
+
var doNotForwardProps$m = ["sdsSize"];
|
|
7911
7911
|
var StyledDialogTitle = styled__default.default(material.DialogTitle, {
|
|
7912
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7913
|
-
})(templateObject_1$
|
|
7912
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7913
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n padding: 0;\n ", "\n"], ["\n padding: 0;\n ", "\n"])), function (props) {
|
|
7914
7914
|
var sdsSize = props.sdsSize;
|
|
7915
7915
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
7916
7916
|
var spaces = getSpaces(props);
|
|
7917
7917
|
return "\n margin-bottom: ".concat(isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n ");
|
|
7918
7918
|
});
|
|
7919
7919
|
var Title = styled__default.default(material.Typography, {
|
|
7920
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7921
|
-
})(templateObject_2$
|
|
7920
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7921
|
+
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7922
7922
|
var _a;
|
|
7923
7923
|
var sdsSize = props.sdsSize;
|
|
7924
7924
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7929,8 +7929,8 @@ var Title = styled__default.default(material.Typography, {
|
|
|
7929
7929
|
];
|
|
7930
7930
|
});
|
|
7931
7931
|
var Subtitle = styled__default.default(material.Typography, {
|
|
7932
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7933
|
-
})(templateObject_3$
|
|
7932
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7933
|
+
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7934
7934
|
var _a;
|
|
7935
7935
|
var sdsSize = props.sdsSize;
|
|
7936
7936
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7941,8 +7941,8 @@ var Subtitle = styled__default.default(material.Typography, {
|
|
|
7941
7941
|
];
|
|
7942
7942
|
});
|
|
7943
7943
|
var Overline = styled__default.default(material.Typography, {
|
|
7944
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7945
|
-
})(templateObject_4$
|
|
7944
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7945
|
+
})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7946
7946
|
var _a;
|
|
7947
7947
|
var sdsSize = props.sdsSize;
|
|
7948
7948
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7953,7 +7953,7 @@ var Overline = styled__default.default(material.Typography, {
|
|
|
7953
7953
|
"\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n "),
|
|
7954
7954
|
];
|
|
7955
7955
|
});
|
|
7956
|
-
var templateObject_1$
|
|
7956
|
+
var templateObject_1$E, templateObject_2$p, templateObject_3$k, templateObject_4$j;
|
|
7957
7957
|
|
|
7958
7958
|
var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
7959
7959
|
var children = props.children, title = props.title, subtitle = props.subtitle, overline = props.overline, onClose = props.onClose, sdsSize = props.sdsSize, _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a, rest = __rest(props, ["children", "title", "subtitle", "overline", "onClose", "sdsSize", "classes"]);
|
|
@@ -7962,16 +7962,16 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
|
7962
7962
|
});
|
|
7963
7963
|
|
|
7964
7964
|
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
7965
|
-
var doNotForwardProps$
|
|
7965
|
+
var doNotForwardProps$l = ["buttonPosition", "sdsSize"];
|
|
7966
7966
|
var StyledDialogActions = styled__default.default(material.DialogActions, {
|
|
7967
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7968
|
-
})(templateObject_1$
|
|
7967
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
7968
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
7969
7969
|
var spaces = getSpaces(props);
|
|
7970
7970
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a, sdsSize = props.sdsSize;
|
|
7971
7971
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
7972
7972
|
return "\n justify-content: ".concat(buttonPosition === "right" ? "flex-end" : "flex-start", ";;\n\n margin-top: ").concat(isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n\n &.").concat(material.dialogActionsClasses.spacing, " > :not(:first-of-type) {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n ");
|
|
7973
7973
|
});
|
|
7974
|
-
var templateObject_1$
|
|
7974
|
+
var templateObject_1$D;
|
|
7975
7975
|
|
|
7976
7976
|
/**
|
|
7977
7977
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -8008,11 +8008,11 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
|
8008
8008
|
}) })));
|
|
8009
8009
|
});
|
|
8010
8010
|
|
|
8011
|
-
var doNotForwardProps$
|
|
8011
|
+
var doNotForwardProps$k = ["sdsSize"];
|
|
8012
8012
|
var StyledDialogContent = styled__default.default(material.DialogContent, {
|
|
8013
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8014
|
-
})(templateObject_1$
|
|
8015
|
-
var templateObject_1$
|
|
8013
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
8014
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
8015
|
+
var templateObject_1$C;
|
|
8016
8016
|
|
|
8017
8017
|
var index = React.forwardRef(
|
|
8018
8018
|
/**
|
|
@@ -8057,7 +8057,7 @@ var overlayContentPositionJustifyMapping = {
|
|
|
8057
8057
|
"bottom-right": "flex-end",
|
|
8058
8058
|
};
|
|
8059
8059
|
|
|
8060
|
-
var doNotForwardProps$
|
|
8060
|
+
var doNotForwardProps$j = [
|
|
8061
8061
|
"heroHeight",
|
|
8062
8062
|
"overlayContainerMinMargin",
|
|
8063
8063
|
"backgroundFillColor",
|
|
@@ -8067,28 +8067,28 @@ var getResponsivePadding = function (props) {
|
|
|
8067
8067
|
var overlayContainerMinMargin = props.overlayContainerMinMargin;
|
|
8068
8068
|
var spaces = getSpaces(props);
|
|
8069
8069
|
var breakpoints = getBreakpoints(props);
|
|
8070
|
-
return react.css(templateObject_1$
|
|
8070
|
+
return react.css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n padding: ", "px\n ", ";\n\n ", " {\n padding: ", "px\n ", ";\n }\n\n ", " {\n padding: ", "px\n ", ";\n }\n "], ["\n padding: ", "px\n ", ";\n\n ", " {\n padding: ", "px\n ", ";\n }\n\n ", " {\n padding: ", "px\n ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl, (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.small) || HeroMargins.SMALL, breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.up("md"), spaces === null || spaces === void 0 ? void 0 : spaces.xxl, (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.medium) || HeroMargins.MEDIUM, breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.up("lg"), spaces === null || spaces === void 0 ? void 0 : spaces.xxl, (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.large) || HeroMargins.LARGE);
|
|
8071
8071
|
};
|
|
8072
8072
|
// Main Hero Container
|
|
8073
8073
|
var StyledHeroContainer = styled__default.default("section", {
|
|
8074
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8075
|
-
})(templateObject_3$
|
|
8074
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
8075
|
+
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8076
8076
|
var _a = props.heroHeight, heroHeight = _a === void 0 ? "fit-content" : _a, overlayContentPosition = props.overlayContentPosition, backgroundFillColor = props.backgroundFillColor;
|
|
8077
8077
|
var breakpoints = getBreakpoints(props);
|
|
8078
|
-
return react.css(templateObject_2$
|
|
8078
|
+
return react.css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n display: flex;\n position: relative;\n overflow: hidden;\n height: ", ";\n width: 100%;\n flex-direction: column;\n align-items: ", ";\n justify-content: ", ";\n ", "\n\n ", " {\n height: fit-content;\n }\n "], ["\n ", "\n display: flex;\n position: relative;\n overflow: hidden;\n height: ", ";\n width: 100%;\n flex-direction: column;\n align-items: ", ";\n justify-content: ", ";\n ", "\n\n ", " {\n height: fit-content;\n }\n "])), getResponsivePadding(props), heroHeight, overlayContentPosition
|
|
8079
8079
|
? overlayContentPositionAlignMapping[overlayContentPosition]
|
|
8080
8080
|
: "center", overlayContentPosition
|
|
8081
8081
|
? overlayContentPositionJustifyMapping[overlayContentPosition]
|
|
8082
8082
|
: "center", backgroundFillColor ? "background-color: ".concat(backgroundFillColor, ";") : "", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.down("md"));
|
|
8083
8083
|
});
|
|
8084
|
-
var BackgroundFillContainer = styled__default.default("div")(templateObject_4$
|
|
8085
|
-
var OverlayContent = styled__default.default("div")(templateObject_6$
|
|
8084
|
+
var BackgroundFillContainer = styled__default.default("div")(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n overflow: hidden;\n\n img,\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n overflow: hidden;\n\n img,\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n"])));
|
|
8085
|
+
var OverlayContent = styled__default.default("div")(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8086
8086
|
var textAlignment = props.textAlignment, _a = props.overlayContentWidth, overlayContentWidth = _a === void 0 ? "100%" : _a;
|
|
8087
|
-
return react.css(templateObject_5$
|
|
8087
|
+
return react.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: ", ";\n text-align: ", ";\n width: ", ";\n "], ["\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: ", ";\n text-align: ", ";\n width: ", ";\n "])), textAlignment
|
|
8088
8088
|
? textAlignmentMapping[textAlignment]
|
|
8089
8089
|
: "start", textAlignment, overlayContentWidth);
|
|
8090
8090
|
});
|
|
8091
|
-
var HeroTitle = styled__default.default("h1")(templateObject_8$
|
|
8091
|
+
var HeroTitle = styled__default.default("h1")(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n ", "\n\n ", "\n\n margin: 0;\n padding: 0;\n"], ["\n ", "\n\n ", "\n\n margin: 0;\n padding: 0;\n"])), function (props) {
|
|
8092
8092
|
var _a = props.headerFontSize, headerFontSize = _a === void 0 ? "m" : _a;
|
|
8093
8093
|
if (headerFontSize === "s") {
|
|
8094
8094
|
return fontHeaderS(props);
|
|
@@ -8103,22 +8103,22 @@ var HeroTitle = styled__default.default("h1")(templateObject_8$8 || (templateObj
|
|
|
8103
8103
|
var _a, _b;
|
|
8104
8104
|
var hasInvertTextColor = props.hasInvertTextColor;
|
|
8105
8105
|
var semanticColors = getSemanticColors(props);
|
|
8106
|
-
return react.css(templateObject_7$
|
|
8106
|
+
return react.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), hasInvertTextColor
|
|
8107
8107
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse
|
|
8108
8108
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary);
|
|
8109
8109
|
});
|
|
8110
|
-
var HeroCaption = styled__default.default("p")(templateObject_10$
|
|
8110
|
+
var HeroCaption = styled__default.default("p")(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n ", "\n\n ", "\n\n padding: 0;\n"], ["\n ", "\n\n ", "\n\n padding: 0;\n"])), fontBodyXxxs$1, function (props) {
|
|
8111
8111
|
var _a, _b;
|
|
8112
8112
|
var hasInvertTextColor = props.hasInvertTextColor;
|
|
8113
8113
|
var semanticColors = getSemanticColors(props);
|
|
8114
8114
|
var spaces = getSpaces(props);
|
|
8115
|
-
return react.css(templateObject_9$
|
|
8115
|
+
return react.css(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n color: ", ";\n\n margin: ", "px 0 0;\n "], ["\n color: ", ";\n\n margin: ", "px 0 0;\n "])), hasInvertTextColor
|
|
8116
8116
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse
|
|
8117
8117
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
8118
8118
|
});
|
|
8119
8119
|
var ContentSlot = styled__default.default("div")(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8120
8120
|
var spaces = getSpaces(props);
|
|
8121
|
-
return react.css(templateObject_11$
|
|
8121
|
+
return react.css(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n margin: ", "px 0 0;\n width: 100%;\n height: 100%;\n "], ["\n margin: ", "px 0 0;\n width: 100%;\n height: 100%;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
8122
8122
|
});
|
|
8123
8123
|
var DarkeningMask = styled__default.default("div")(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8124
8124
|
var _a = props.darkeningMaskColor, darkeningMaskColor = _a === void 0 ? "#000000" : _a, _b = props.darkeningMaskOpacity, darkeningMaskOpacity = _b === void 0 ? 0 : _b;
|
|
@@ -8155,7 +8155,7 @@ var OverlayMedia = styled__default.default("div")(templateObject_21$2 || (templa
|
|
|
8155
8155
|
: overlayMediaMargin === null || overlayMediaMargin === void 0 ? void 0 : overlayMediaMargin.small
|
|
8156
8156
|
: "0");
|
|
8157
8157
|
});
|
|
8158
|
-
var templateObject_1$
|
|
8158
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$j, templateObject_4$i, templateObject_5$e, templateObject_6$d, templateObject_7$9, templateObject_8$9, templateObject_9$7, templateObject_10$7, templateObject_11$6, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$3, templateObject_17$3, templateObject_18$3, templateObject_19$2, templateObject_20$2, templateObject_21$2;
|
|
8159
8159
|
|
|
8160
8160
|
var Hero = React__namespace.default.forwardRef(function (props, ref) {
|
|
8161
8161
|
var heroHeight = props.heroHeight, children = props.children, headerText = props.headerText, captionText = props.captionText, headerFontSize = props.headerFontSize, hasInvertTextColor = props.hasInvertTextColor, overlayContentWidth = props.overlayContentWidth, textAlignment = props.textAlignment, darkeningMask = props.darkeningMask, _a = props.darkeningMaskColor, darkeningMaskColor = _a === void 0 ? "#000000" : _a, _b = props.darkeningMaskOpacity, darkeningMaskOpacity = _b === void 0 ? 0 : _b, darkeningVignette = props.darkeningVignette, overlayMedia = props.overlayMedia, overlayMediaPosition = props.overlayMediaPosition, overlayMediaMaxHeight = props.overlayMediaMaxHeight, overlayMediaMaxWidth = props.overlayMediaMaxWidth, overlayMediaMargin = props.overlayMediaMargin, backgroundFill = props.backgroundFill, rest = __rest(props, ["heroHeight", "children", "headerText", "captionText", "headerFontSize", "hasInvertTextColor", "overlayContentWidth", "textAlignment", "darkeningMask", "darkeningMaskColor", "darkeningMaskOpacity", "darkeningVignette", "overlayMedia", "overlayMediaPosition", "overlayMediaMaxHeight", "overlayMediaMaxWidth", "overlayMediaMargin", "backgroundFill"]);
|
|
@@ -8172,11 +8172,11 @@ var intentToColor$1 = {
|
|
|
8172
8172
|
notice: "notice",
|
|
8173
8173
|
positive: "positive",
|
|
8174
8174
|
};
|
|
8175
|
-
var StyledIcon = styled__default.default(Icon)(templateObject_1$
|
|
8175
|
+
var StyledIcon = styled__default.default(Icon)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8176
8176
|
var iconSizes = getIconSizes(props);
|
|
8177
8177
|
return "\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n ");
|
|
8178
8178
|
});
|
|
8179
|
-
var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2$
|
|
8179
|
+
var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8180
8180
|
var _a;
|
|
8181
8181
|
var _b = props.intent, intent = _b === void 0 ? "default" : _b;
|
|
8182
8182
|
var iconSizes = getIconSizes(props);
|
|
@@ -8184,22 +8184,22 @@ var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2
|
|
|
8184
8184
|
var borderColor = intentToColor$1[intent];
|
|
8185
8185
|
return "\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 border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders[borderColor]) === null || _a === void 0 ? void 0 : _a.default, ";\n border-radius: 2px;\n ");
|
|
8186
8186
|
});
|
|
8187
|
-
var StyledCheckboxCheckedIcon = styled__default.default("div")(templateObject_3$
|
|
8187
|
+
var StyledCheckboxCheckedIcon = styled__default.default("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8188
8188
|
var _a, _b;
|
|
8189
8189
|
var iconSizes = getIconSizes(props);
|
|
8190
8190
|
var semanticColors = getSemanticColors(props);
|
|
8191
8191
|
return "\n display: flex;\n align-items: center;\n justify-content: center;\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 border-radius: 2px;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, ";\n\n ").concat(StyledIcon, " {\n fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, ";\n }\n ");
|
|
8192
8192
|
});
|
|
8193
|
-
var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_4$
|
|
8193
|
+
var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8194
8194
|
var spaces = getSpaces(props);
|
|
8195
8195
|
return "\n &.".concat(material.checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n \n padding: 0;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n border-radius: 0;\n\n &:hover {\n background-color: transparent;\n }\n }\n ");
|
|
8196
8196
|
});
|
|
8197
|
-
var StyledLabelContainer$1 = styled__default.default("span")(templateObject_5$
|
|
8198
|
-
var StyledCheckboxLabel = styled__default.default("span")(templateObject_6$
|
|
8197
|
+
var StyledLabelContainer$1 = styled__default.default("span")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
|
|
8198
|
+
var StyledCheckboxLabel = styled__default.default("span")(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
8199
8199
|
var spaces = getSpaces(props);
|
|
8200
8200
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
8201
8201
|
});
|
|
8202
|
-
var StyledCheckboxCaption = styled__default.default("span")(templateObject_7$
|
|
8202
|
+
var StyledCheckboxCaption = styled__default.default("span")(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
8203
8203
|
var _a;
|
|
8204
8204
|
var semanticColors = getSemanticColors(props);
|
|
8205
8205
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -8210,7 +8210,7 @@ var disabledStyles$1 = function (props) {
|
|
|
8210
8210
|
var borders = getBorders(props);
|
|
8211
8211
|
return "\n user-select: none;\n\n ".concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, ";\n }\n\n ").concat(StyledCheckboxCaption, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n }\n\n &:hover, &:active {\n ").concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_d = borders === null || borders === void 0 ? void 0 : borders.base) === null || _d === void 0 ? void 0 : _d.disabled, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentDisabled, ";\n }\n }\n ");
|
|
8212
8212
|
};
|
|
8213
|
-
var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_8$
|
|
8213
|
+
var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8214
8214
|
var _a, _b, _c, _d, _e;
|
|
8215
8215
|
var disabled = props.disabled;
|
|
8216
8216
|
var spaces = getSpaces(props);
|
|
@@ -8218,7 +8218,7 @@ var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel
|
|
|
8218
8218
|
var borders = getBorders(props);
|
|
8219
8219
|
return "\n align-items: start;\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-left: 0;\n margin-right: 0;\n width: fit-content;\n\n &:hover {\n ").concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.hover, ";\n background-color: ").concat(disabled ? "transparent" : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n }\n }\n\n &:active {\n ").concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_d = borders === null || borders === void 0 ? void 0 : borders.base) === null || _d === void 0 ? void 0 : _d.pressed, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPressed, ";\n }\n }\n\n ").concat(disabled && disabledStyles$1(props), "\n ");
|
|
8220
8220
|
});
|
|
8221
|
-
var templateObject_1$
|
|
8221
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$i, templateObject_4$h, templateObject_5$d, templateObject_6$c, templateObject_7$8, templateObject_8$8;
|
|
8222
8222
|
|
|
8223
8223
|
/**
|
|
8224
8224
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -8250,12 +8250,12 @@ var intentToColor = {
|
|
|
8250
8250
|
notice: "notice",
|
|
8251
8251
|
positive: "positive",
|
|
8252
8252
|
};
|
|
8253
|
-
var StyledRadioDot = styled__default.default("span")(templateObject_1$
|
|
8253
|
+
var StyledRadioDot = styled__default.default("span")(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8254
8254
|
var _a;
|
|
8255
8255
|
var semanticColors = getSemanticColors(props);
|
|
8256
8256
|
return "\n height: 6px;\n width: 6px;\n border-radius: 50%;\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, ";\n ");
|
|
8257
8257
|
});
|
|
8258
|
-
var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$
|
|
8258
|
+
var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8259
8259
|
var _a;
|
|
8260
8260
|
var _b = props.intent, intent = _b === void 0 ? "default" : _b;
|
|
8261
8261
|
var iconSizes = getIconSizes(props);
|
|
@@ -8263,22 +8263,22 @@ var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$l
|
|
|
8263
8263
|
var borderColor = intentToColor[intent];
|
|
8264
8264
|
return "\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 border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders[borderColor]) === null || _a === void 0 ? void 0 : _a.default, ";\n border-radius: 50%;\n ");
|
|
8265
8265
|
});
|
|
8266
|
-
var StyledRadioCheckedIcon = styled__default.default("div")(templateObject_3$
|
|
8266
|
+
var StyledRadioCheckedIcon = styled__default.default("div")(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8267
8267
|
var _a;
|
|
8268
8268
|
var iconSizes = getIconSizes(props);
|
|
8269
8269
|
var semanticColors = getSemanticColors(props);
|
|
8270
8270
|
return "\n display: flex;\n align-items: center;\n justify-content: center;\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 border-radius: 50%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, ";\n ");
|
|
8271
8271
|
});
|
|
8272
|
-
var StyledRadioButton = styled__default.default(material.Radio)(templateObject_4$
|
|
8272
|
+
var StyledRadioButton = styled__default.default(material.Radio)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8273
8273
|
var spaces = getSpaces(props);
|
|
8274
8274
|
return "\n &.".concat(material.radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n padding: 0;\n }\n ");
|
|
8275
8275
|
});
|
|
8276
|
-
var StyledLabelContainer = styled__default.default("span")(templateObject_5$
|
|
8277
|
-
var StyledRadioLabel = styled__default.default("span")(templateObject_6$
|
|
8276
|
+
var StyledLabelContainer = styled__default.default("span")(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
|
|
8277
|
+
var StyledRadioLabel = styled__default.default("span")(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
8278
8278
|
var spaces = getSpaces(props);
|
|
8279
8279
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
8280
8280
|
});
|
|
8281
|
-
var StyledRadioCaption = styled__default.default("span")(templateObject_7$
|
|
8281
|
+
var StyledRadioCaption = styled__default.default("span")(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
8282
8282
|
var _a;
|
|
8283
8283
|
var semanticColors = getSemanticColors(props);
|
|
8284
8284
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -8288,14 +8288,14 @@ var disabledStyles = function (props) {
|
|
|
8288
8288
|
var semanticColors = getSemanticColors(props);
|
|
8289
8289
|
return "\n user-select: none;\n\n ".concat(StyledRadioCaption, " {\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n }\n\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderPrimaryDisabled, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled, ";\n }\n\n &:hover, &:active {\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimaryDisabled, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentDisabled, ";\n }\n }\n ");
|
|
8290
8290
|
};
|
|
8291
|
-
var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_8$
|
|
8291
|
+
var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8292
8292
|
var _a, _b, _c, _d, _e;
|
|
8293
8293
|
var disabled = props.disabled;
|
|
8294
8294
|
var spaces = getSpaces(props);
|
|
8295
8295
|
var semanticColors = getSemanticColors(props);
|
|
8296
8296
|
return "\n align-items: start;\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-left: 0;\n margin-right: 0;\n width: fit-content;\n\n &:hover {\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, "; \n background-color: ").concat(disabled ? "transparent" : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n }\n }\n\n &:active {\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimaryPressed, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPressed, ";\n }\n }\n\n ").concat(disabled && disabledStyles(props), "\n ");
|
|
8297
8297
|
});
|
|
8298
|
-
var templateObject_1$
|
|
8298
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$h, templateObject_4$g, templateObject_5$c, templateObject_6$b, templateObject_7$7, templateObject_8$7;
|
|
8299
8299
|
|
|
8300
8300
|
/**
|
|
8301
8301
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -8342,11 +8342,11 @@ var disabledSlider = function (props) {
|
|
|
8342
8342
|
var semanticColors = getSemanticColors(props);
|
|
8343
8343
|
return "\n .".concat(material.sliderClasses.track, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.thumb, ".").concat(material.sliderClasses.disabled, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundSecondary, ";\n \n & * {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, ";\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n }\n ");
|
|
8344
8344
|
};
|
|
8345
|
-
var StyledSlider = styled__default.default(material.Slider)(templateObject_1$
|
|
8345
|
+
var StyledSlider = styled__default.default(material.Slider)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
8346
8346
|
var disabled = props.disabled;
|
|
8347
8347
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
8348
8348
|
});
|
|
8349
|
-
var templateObject_1$
|
|
8349
|
+
var templateObject_1$y;
|
|
8350
8350
|
|
|
8351
8351
|
/**
|
|
8352
8352
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -8373,19 +8373,19 @@ var applyIntentColor = function (props, intent) {
|
|
|
8373
8373
|
var _a, _b, _c, _d;
|
|
8374
8374
|
var borders = getBorders(props);
|
|
8375
8375
|
var semanticColors = getSemanticColors(props);
|
|
8376
|
-
return react.css(templateObject_1$
|
|
8376
|
+
return react.css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
|
|
8377
8377
|
};
|
|
8378
8378
|
var disabledStyled$1 = function (props) {
|
|
8379
8379
|
var _a, _b, _c;
|
|
8380
8380
|
var borders = getBorders(props);
|
|
8381
8381
|
var semanticColors = getSemanticColors(props);
|
|
8382
|
-
return react.css(templateObject_2$
|
|
8382
|
+
return react.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n background-color: unset;\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n background-color: unset;\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
|
|
8383
8383
|
};
|
|
8384
8384
|
var textArea = function (props) {
|
|
8385
8385
|
var spaces = getSpaces(props);
|
|
8386
|
-
return react.css(templateObject_3$
|
|
8386
|
+
return react.css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "], ["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "])), material.outlinedInputClasses.multiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.outlinedInputClasses.inputMultiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
8387
8387
|
};
|
|
8388
|
-
var StyledLabel$
|
|
8388
|
+
var StyledLabel$2 = styled__default.default("label")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
8389
8389
|
var spaces = getSpaces(props);
|
|
8390
8390
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
8391
8391
|
});
|
|
@@ -8393,16 +8393,16 @@ var StyledInputBase = styled__default.default(material.TextField, {
|
|
|
8393
8393
|
shouldForwardProp: function (prop) {
|
|
8394
8394
|
return !sdsPropNames$1.includes(prop.toString());
|
|
8395
8395
|
},
|
|
8396
|
-
})(templateObject_6$
|
|
8396
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8397
8397
|
var _a, _b, _c, _d, _e;
|
|
8398
8398
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
8399
8399
|
var spaces = getSpaces(props);
|
|
8400
8400
|
var borders = getBorders(props);
|
|
8401
8401
|
var corners = getCorners(props);
|
|
8402
8402
|
var semanticColors = getSemanticColors(props);
|
|
8403
|
-
return react.css(templateObject_5$
|
|
8403
|
+
return react.css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n background-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n background-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.root, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.input, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textTertiary, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_e = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _e === void 0 ? void 0 : _e.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
|
|
8404
8404
|
});
|
|
8405
|
-
var templateObject_1$
|
|
8405
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$f, templateObject_5$b, templateObject_6$a;
|
|
8406
8406
|
|
|
8407
8407
|
/**
|
|
8408
8408
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -8431,7 +8431,7 @@ var InputText = React.forwardRef(function InputText(props, ref) {
|
|
|
8431
8431
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
8432
8432
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
8433
8433
|
}
|
|
8434
|
-
var finalLabel = typeof label === "string" ? (jsxRuntime.jsx(StyledLabel$
|
|
8434
|
+
var finalLabel = typeof label === "string" ? (jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, className: cn(labelClassName), children: label })) : (label);
|
|
8435
8435
|
return (jsxRuntime.jsxs("div", { className: cn(rootClassName), children: [!hideLabel && finalLabel, jsxRuntime.jsx(StyledInputBase, __assign({ className: cn(inputClassName, className), ref: ref ? ref : inputRef, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsType: sdsType }, rest))] }));
|
|
8436
8436
|
});
|
|
8437
8437
|
|
|
@@ -8463,11 +8463,11 @@ var toggleOff = function (props) {
|
|
|
8463
8463
|
: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n content: ").concat(JSON.stringify(value), ";\n }\n\n &:hover {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, ";\n }\n }\n\n &:hover {\n .").concat(material.switchClasses.switchBase, " {\n &:after {\n color: ").concat(disabled ? (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textDisabled : (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimary, ";\n }\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
|
|
8464
8464
|
"&:hover {\n outline: ".concat((_k = borders === null || borders === void 0 ? void 0 : borders.base) === null || _k === void 0 ? void 0 : _k.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryHover, ";\n }\n }"), "\n ");
|
|
8465
8465
|
};
|
|
8466
|
-
var Toggle = styled__default.default(material.Switch)(templateObject_1$
|
|
8466
|
+
var Toggle = styled__default.default(material.Switch)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
8467
8467
|
var checked = props.checked;
|
|
8468
8468
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
8469
8469
|
});
|
|
8470
|
-
var templateObject_1$
|
|
8470
|
+
var templateObject_1$w;
|
|
8471
8471
|
|
|
8472
8472
|
/**
|
|
8473
8473
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -8485,14 +8485,14 @@ var InputToggle = function (props) {
|
|
|
8485
8485
|
return (jsxRuntime.jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
|
|
8486
8486
|
};
|
|
8487
8487
|
|
|
8488
|
-
var doNotForwardProps$
|
|
8488
|
+
var doNotForwardProps$i = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
8489
8489
|
var defaultStyle = function (props) {
|
|
8490
8490
|
var _a, _b, _c, _d;
|
|
8491
8491
|
var semanticColors = getSemanticColors(props);
|
|
8492
|
-
return react.css(templateObject_1$
|
|
8492
|
+
return react.css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "], ["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
|
|
8493
8493
|
};
|
|
8494
8494
|
var dashedStyle = function () {
|
|
8495
|
-
return react.css(templateObject_2$
|
|
8495
|
+
return react.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "], ["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "])));
|
|
8496
8496
|
};
|
|
8497
8497
|
var smallStyle = function (props) {
|
|
8498
8498
|
return fontBodyS$1(props);
|
|
@@ -8502,13 +8502,13 @@ var extraSmallStyle = function (props) {
|
|
|
8502
8502
|
};
|
|
8503
8503
|
var StyledLink = styled__default.default(material.Link, {
|
|
8504
8504
|
shouldForwardProp: function (prop) {
|
|
8505
|
-
return !doNotForwardProps$
|
|
8505
|
+
return !doNotForwardProps$i.includes(prop.toString());
|
|
8506
8506
|
},
|
|
8507
|
-
})(templateObject_4$
|
|
8507
|
+
})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
8508
8508
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "default" : _b, _c = props.sdsSize, sdsSize = _c === void 0 ? "s" : _c;
|
|
8509
|
-
return react.css(templateObject_3$
|
|
8509
|
+
return react.css(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
|
|
8510
8510
|
});
|
|
8511
|
-
var templateObject_1$
|
|
8511
|
+
var templateObject_1$v, templateObject_2$k, templateObject_3$f, templateObject_4$e;
|
|
8512
8512
|
|
|
8513
8513
|
/**
|
|
8514
8514
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -8519,10 +8519,10 @@ var Link = React.forwardRef(function (props, ref) {
|
|
|
8519
8519
|
});
|
|
8520
8520
|
|
|
8521
8521
|
// (thuang): Please keep this in sync with the props used in `ListExtraProps`
|
|
8522
|
-
var doNotForwardProps$
|
|
8522
|
+
var doNotForwardProps$h = ["marginBottom", "ordered"];
|
|
8523
8523
|
var StyledList = styled__default.default(material.List, {
|
|
8524
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8525
|
-
})(templateObject_1$
|
|
8524
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
8525
|
+
})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"], ["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"])), propsToMarginBottom$1, function (props) {
|
|
8526
8526
|
if (!props.ordered)
|
|
8527
8527
|
return "";
|
|
8528
8528
|
return "\n counter-reset: section;\n ";
|
|
@@ -8540,7 +8540,7 @@ function propsToMarginBottom$1(props) {
|
|
|
8540
8540
|
var marginBottom = props.marginBottom;
|
|
8541
8541
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
8542
8542
|
}
|
|
8543
|
-
var templateObject_1$
|
|
8543
|
+
var templateObject_1$u;
|
|
8544
8544
|
|
|
8545
8545
|
/**
|
|
8546
8546
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -8557,10 +8557,10 @@ var fontBodyXs$1 = fontBody("xs");
|
|
|
8557
8557
|
var fontBodyXxs = fontBody("xxs");
|
|
8558
8558
|
var fontBodyXxxs = fontBody("xxxs");
|
|
8559
8559
|
// (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
|
|
8560
|
-
var doNotForwardProps$
|
|
8560
|
+
var doNotForwardProps$g = ["marginBottom", "fontSize", "ordered"];
|
|
8561
8561
|
var StyledListItem = styled__default.default(material.ListItem, {
|
|
8562
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8563
|
-
})(templateObject_1$
|
|
8562
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
8563
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n ", "\n ", "\n\n padding: 0;\n\n ", "\n\n &:before {\n display: inline-block;\n\n ", "\n }\n"], ["\n ", "\n ", "\n\n padding: 0;\n\n ", "\n\n &:before {\n display: inline-block;\n\n ", "\n }\n"])), propsToMarginBottom, propsToFontBody, function (props) {
|
|
8564
8564
|
var ordered = props.ordered;
|
|
8565
8565
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
8566
8566
|
}, function (props) {
|
|
@@ -8591,11 +8591,11 @@ function propsToMarginBottom(props) {
|
|
|
8591
8591
|
var marginBottom = props.marginBottom;
|
|
8592
8592
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
|
|
8593
8593
|
}
|
|
8594
|
-
var ListItemLabel = styled__default.default("span")(templateObject_2$
|
|
8594
|
+
var ListItemLabel = styled__default.default("span")(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
|
|
8595
8595
|
var fontWeights = getFontWeights(props);
|
|
8596
8596
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
8597
8597
|
});
|
|
8598
|
-
var templateObject_1$
|
|
8598
|
+
var templateObject_1$t, templateObject_2$j;
|
|
8599
8599
|
|
|
8600
8600
|
/**
|
|
8601
8601
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -8605,11 +8605,11 @@ var ListItem = function (props) {
|
|
|
8605
8605
|
};
|
|
8606
8606
|
|
|
8607
8607
|
var fontHeaderM = fontHeader("m");
|
|
8608
|
-
var StyledListSubheader = styled__default.default(material.ListSubheader)(templateObject_1$
|
|
8608
|
+
var StyledListSubheader = styled__default.default(material.ListSubheader)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n\n line-height: unset;\n color: unset;\n\n ", "\n }\n"], ["\n &.MuiListSubheader-root {\n ", "\n\n line-height: unset;\n color: unset;\n\n ", "\n }\n"])), fontHeaderM, function (props) {
|
|
8609
8609
|
var spaces = getSpaces(props);
|
|
8610
8610
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
8611
8611
|
});
|
|
8612
|
-
var templateObject_1$
|
|
8612
|
+
var templateObject_1$s;
|
|
8613
8613
|
|
|
8614
8614
|
/**
|
|
8615
8615
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -8618,7 +8618,7 @@ var ListSubheader = function (props) {
|
|
|
8618
8618
|
return jsxRuntime.jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
8619
8619
|
};
|
|
8620
8620
|
|
|
8621
|
-
var StyledText = styled__default.default("span")(templateObject_1$
|
|
8621
|
+
var StyledText = styled__default.default("span")(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8622
8622
|
var spaces = getSpaces(props);
|
|
8623
8623
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
8624
8624
|
});
|
|
@@ -8626,38 +8626,38 @@ var minimal = function (props) {
|
|
|
8626
8626
|
var _a, _b;
|
|
8627
8627
|
var iconSizes = getIconSizes(props);
|
|
8628
8628
|
var semanticColors = getSemanticColors(props);
|
|
8629
|
-
return react.css(templateObject_2$
|
|
8629
|
+
return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary);
|
|
8630
8630
|
};
|
|
8631
8631
|
var tag = function (props) {
|
|
8632
8632
|
var _a, _b, _c;
|
|
8633
8633
|
var corners = getCorners(props);
|
|
8634
8634
|
var semanticColors = getSemanticColors(props);
|
|
8635
|
-
return react.css(templateObject_3$
|
|
8635
|
+
return react.css(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, corners === null || corners === void 0 ? void 0 : corners.rounded, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornament);
|
|
8636
8636
|
};
|
|
8637
|
-
var doNotForwardProps$
|
|
8637
|
+
var doNotForwardProps$f = ["sdsStyle"];
|
|
8638
8638
|
var StyledLoadingIndicator = styled__default.default("div", {
|
|
8639
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8640
|
-
})(templateObject_6$
|
|
8639
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
8640
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8641
8641
|
var sdsStyle = props.sdsStyle;
|
|
8642
8642
|
var spaces = getSpaces(props);
|
|
8643
|
-
var style = react.css(templateObject_4$
|
|
8644
|
-
return react.css(templateObject_5$
|
|
8643
|
+
var style = react.css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "], ["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
8644
|
+
return react.css(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), style, sdsStyle === "minimal" && minimal(props), sdsStyle === "tag" && tag(props));
|
|
8645
8645
|
});
|
|
8646
|
-
var templateObject_1$
|
|
8646
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$e, templateObject_4$d, templateObject_5$a, templateObject_6$9;
|
|
8647
8647
|
|
|
8648
8648
|
var LoadingIndicator = function (_a) {
|
|
8649
8649
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
8650
8650
|
return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
|
|
8651
8651
|
};
|
|
8652
8652
|
|
|
8653
|
-
var StyledMenu = styled__default.default(material.Menu)(templateObject_1$
|
|
8653
|
+
var StyledMenu = styled__default.default(material.Menu)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"], ["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"])), material.menuClasses.paper, function (props) {
|
|
8654
8654
|
var _a;
|
|
8655
8655
|
var spaces = getSpaces(props);
|
|
8656
8656
|
var corners = getCorners(props);
|
|
8657
8657
|
var semanticColors = getSemanticColors(props);
|
|
8658
8658
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n ");
|
|
8659
8659
|
});
|
|
8660
|
-
var templateObject_1$
|
|
8660
|
+
var templateObject_1$q;
|
|
8661
8661
|
|
|
8662
8662
|
var ANCHOR_ORIGIN = {
|
|
8663
8663
|
horizontal: "center",
|
|
@@ -8674,19 +8674,19 @@ var Menu = function (props) {
|
|
|
8674
8674
|
return (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
8675
8675
|
};
|
|
8676
8676
|
|
|
8677
|
-
var StyledMenuItem = styled__default.default(MenuItem)(templateObject_1$
|
|
8678
|
-
var doNotForwardProps$
|
|
8677
|
+
var StyledMenuItem = styled__default.default(MenuItem)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
8678
|
+
var doNotForwardProps$e = ["search", "InputBaseProps", "keepSearchOnSelect"];
|
|
8679
8679
|
// (thuang): Casting the type to `Autocomplete`
|
|
8680
8680
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
8681
8681
|
var StyledAutocomplete = styled__default.default(material.Autocomplete, {
|
|
8682
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8683
|
-
})(templateObject_2$
|
|
8682
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
8683
|
+
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
|
|
8684
8684
|
var search = _a.search;
|
|
8685
8685
|
return !search && "height: 0; margin: 0 !important;";
|
|
8686
8686
|
});
|
|
8687
8687
|
var InputBaseWrapper = styled__default.default("div", {
|
|
8688
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8689
|
-
})(templateObject_3$
|
|
8688
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
8689
|
+
})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8690
8690
|
var search = props.search;
|
|
8691
8691
|
if (!search) {
|
|
8692
8692
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -8698,12 +8698,12 @@ var InputBaseWrapper = styled__default.default("div", {
|
|
|
8698
8698
|
return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
8699
8699
|
});
|
|
8700
8700
|
var StyledMenuInputSearch = styled__default.default(InputSearch, {
|
|
8701
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8702
|
-
})(templateObject_4$
|
|
8701
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
8702
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"], ["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"])), material.inputBaseClasses.root, function (_a) {
|
|
8703
8703
|
var search = _a.search;
|
|
8704
8704
|
return (search ? "auto" : "transparent");
|
|
8705
8705
|
});
|
|
8706
|
-
var templateObject_1$
|
|
8706
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$d, templateObject_4$c;
|
|
8707
8707
|
|
|
8708
8708
|
/**
|
|
8709
8709
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -8754,55 +8754,55 @@ var MenuSelect = function (props) {
|
|
|
8754
8754
|
}
|
|
8755
8755
|
};
|
|
8756
8756
|
|
|
8757
|
-
var doNotForwardProps$
|
|
8757
|
+
var doNotForwardProps$d = ["hasInvertedStyle", "isNarrow"];
|
|
8758
8758
|
var StyledFooter = styled__default.default("footer", {
|
|
8759
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8760
|
-
})(templateObject_3$
|
|
8759
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8760
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8761
8761
|
var isNarrow = props.isNarrow;
|
|
8762
8762
|
var spaces = getSpaces(props);
|
|
8763
8763
|
var semanticColors = getSemanticColors(props);
|
|
8764
|
-
return material.css(templateObject_2$
|
|
8764
|
+
return material.css(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n background: ", ";\n padding: ", "px ", "px;\n\n ", "\n "], ["\n background: ", ";\n padding: ", "px ", "px;\n\n ", "\n "])), props.hasInvertedStyle
|
|
8765
8765
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryDark
|
|
8766
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xl, isNarrow && material.css(templateObject_1$
|
|
8766
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xl, isNarrow && material.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n border-top: 1px solid\n ", ";\n padding: ", "px ", "px ", "px ", "px;\n "], ["\n border-top: 1px solid\n ", ";\n padding: ", "px ", "px ", "px ", "px;\n "])), props.hasInvertedStyle
|
|
8767
8767
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerOnDark
|
|
8768
8768
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8769
8769
|
});
|
|
8770
8770
|
var StyledLogoWrapper$1 = styled__default.default("div", {
|
|
8771
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8772
|
-
})(templateObject_6$
|
|
8771
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8772
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n\n p {\n margin: 0;\n padding: 0;\n ", "\n }\n"], ["\n ", "\n\n p {\n margin: 0;\n padding: 0;\n ", "\n }\n"])), function (props) {
|
|
8773
8773
|
var spaces = getSpaces(props);
|
|
8774
|
-
return material.css(templateObject_4$
|
|
8774
|
+
return material.css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n\n a {\n text-decoration: none;\n }\n\n .MuiChip-root {\n margin: 0;\n }\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n\n a {\n text-decoration: none;\n }\n\n .MuiChip-root {\n margin: 0;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s);
|
|
8775
8775
|
}, function (props) {
|
|
8776
8776
|
var isNarrow = props.isNarrow;
|
|
8777
8777
|
var semanticColors = getSemanticColors(props);
|
|
8778
8778
|
return [
|
|
8779
8779
|
isNarrow ? fontHeader("l", "semibold", true) : fontHeaderL,
|
|
8780
|
-
material.css(templateObject_5$
|
|
8780
|
+
material.css(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n "], ["\n color: ", ";\n white-space: nowrap;\n "])), props.hasInvertedStyle
|
|
8781
8781
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
8782
8782
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary),
|
|
8783
8783
|
];
|
|
8784
8784
|
});
|
|
8785
8785
|
var StyledNavSection = styled__default.default("div", {
|
|
8786
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8787
|
-
})(templateObject_9$
|
|
8786
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8787
|
+
})(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8788
8788
|
var isNarrow = props.isNarrow;
|
|
8789
8789
|
var spaces = getSpaces(props);
|
|
8790
|
-
return material.css(templateObject_8$
|
|
8790
|
+
return material.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && material.css(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "], ["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l));
|
|
8791
8791
|
});
|
|
8792
8792
|
var StyledTopSection = styled__default.default("div", {
|
|
8793
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8793
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8794
8794
|
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8795
8795
|
var isNarrow = props.isNarrow;
|
|
8796
8796
|
var semanticColors = getSemanticColors(props);
|
|
8797
8797
|
var spaces = getSpaces(props);
|
|
8798
|
-
return material.css(templateObject_11$
|
|
8798
|
+
return material.css(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: ", "px;\n\n a:hover {\n text-decoration: none;\n }\n\n color: ", ";\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: ", "px;\n\n a:hover {\n text-decoration: none;\n }\n\n color: ", ";\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, props.hasInvertedStyle
|
|
8799
8799
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryOnDark
|
|
8800
8800
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, props.hasInvertedStyle
|
|
8801
8801
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
8802
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && material.css(templateObject_10$
|
|
8802
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && material.css(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n flex-direction: column;\n "], ["\n flex-direction: column;\n "]))));
|
|
8803
8803
|
});
|
|
8804
8804
|
var StyledLinkSection = styled__default.default("div", {
|
|
8805
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8805
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8806
8806
|
})(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n\n .MuiDivider-root {\n height: 18px;\n }\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n\n .MuiDivider-root {\n height: 18px;\n }\n\n ", "\n"])), function (props) {
|
|
8807
8807
|
var isNarrow = props.isNarrow;
|
|
8808
8808
|
var spaces = getSpaces(props);
|
|
@@ -8813,7 +8813,7 @@ var StyledMobileLinkRow = styled__default.default.div(templateObject_16$2 || (te
|
|
|
8813
8813
|
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
8814
8814
|
});
|
|
8815
8815
|
var StyledImageSection = styled__default.default("div", {
|
|
8816
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8816
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8817
8817
|
})(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n\n ", "\n"])), function (props) {
|
|
8818
8818
|
var isNarrow = props.isNarrow;
|
|
8819
8819
|
var spaces = getSpaces(props);
|
|
@@ -8824,13 +8824,13 @@ var StyledMobileImageRow = styled__default.default.div(templateObject_20$1 || (t
|
|
|
8824
8824
|
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n ");
|
|
8825
8825
|
});
|
|
8826
8826
|
var StyledBottomSection = styled__default.default("div", {
|
|
8827
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
8827
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8828
8828
|
})(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n a:hover {\n text-decoration: none;\n }\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n a:hover {\n text-decoration: none;\n }\n\n ", "\n"])), function (props) {
|
|
8829
8829
|
var isNarrow = props.isNarrow;
|
|
8830
8830
|
var spaces = getSpaces(props);
|
|
8831
8831
|
return material.css(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n margin-top: ", "px;\n\n ", "\n "], ["\n margin-top: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && material.css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n flex-direction: column-reverse;\n "], ["\n flex-direction: column-reverse;\n "]))));
|
|
8832
8832
|
});
|
|
8833
|
-
var templateObject_1$
|
|
8833
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$c, templateObject_4$b, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$6, templateObject_9$6, templateObject_10$6, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
|
|
8834
8834
|
|
|
8835
8835
|
/**
|
|
8836
8836
|
* WARNING: Don't import this directly.
|
|
@@ -14792,24 +14792,24 @@ function useTheme() {
|
|
|
14792
14792
|
return theme[THEME_ID] || theme;
|
|
14793
14793
|
}
|
|
14794
14794
|
|
|
14795
|
-
var doNotForwardProps$
|
|
14795
|
+
var doNotForwardProps$c = ["hasInvertedStyle", "isNarrow"];
|
|
14796
14796
|
var NarrowNavItemLinkStyles = function (props) {
|
|
14797
14797
|
var semanticColors = getSemanticColors(props);
|
|
14798
14798
|
var spaces = getSpaces(props);
|
|
14799
|
-
return material.css(templateObject_1$
|
|
14799
|
+
return material.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n text-align: center;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", "px;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "], ["\n text-align: center;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", "px;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, props.hasInvertedStyle
|
|
14800
14800
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14801
14801
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, props.hasInvertedStyle
|
|
14802
14802
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryOnDark
|
|
14803
14803
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary);
|
|
14804
14804
|
};
|
|
14805
14805
|
var StyledNavItemLink = styled__default.default(Link, {
|
|
14806
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
14807
|
-
})(templateObject_3$
|
|
14806
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
14807
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyMediumS, function (props) {
|
|
14808
14808
|
var isNarrow = props.isNarrow;
|
|
14809
14809
|
var semanticColors = getSemanticColors(props);
|
|
14810
14810
|
var spaces = getSpaces(props);
|
|
14811
14811
|
var corners = getCorners(props);
|
|
14812
|
-
return material.css(templateObject_2$
|
|
14812
|
+
return material.css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), props.hasInvertedStyle
|
|
14813
14813
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryOnDark
|
|
14814
14814
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, corners === null || corners === void 0 ? void 0 : corners.l, props.hasInvertedStyle
|
|
14815
14815
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
@@ -14817,7 +14817,7 @@ var StyledNavItemLink = styled__default.default(Link, {
|
|
|
14817
14817
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
14818
14818
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, isNarrow && NarrowNavItemLinkStyles(props));
|
|
14819
14819
|
});
|
|
14820
|
-
var templateObject_1$
|
|
14820
|
+
var templateObject_1$n, templateObject_2$f, templateObject_3$b;
|
|
14821
14821
|
|
|
14822
14822
|
var NavItem = React.memo(function (_a) {
|
|
14823
14823
|
var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
@@ -14825,30 +14825,30 @@ var NavItem = React.memo(function (_a) {
|
|
|
14825
14825
|
});
|
|
14826
14826
|
NavItem.displayName = "NavItem";
|
|
14827
14827
|
|
|
14828
|
-
var doNotForwardProps$
|
|
14828
|
+
var doNotForwardProps$b = ["hasInvertedStyle", "showDivider"];
|
|
14829
14829
|
var StyledLinkItemLink = styled__default.default(Link, {
|
|
14830
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
14831
|
-
})(templateObject_3$
|
|
14830
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
14831
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
14832
14832
|
var showDivider = props.showDivider, hasInvertedStyle = props.hasInvertedStyle;
|
|
14833
14833
|
var spaces = getSpaces(props);
|
|
14834
14834
|
var semanticColors = getSemanticColors(props);
|
|
14835
|
-
return material.css(templateObject_2$
|
|
14835
|
+
return material.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), hasInvertedStyle
|
|
14836
14836
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryOnDark
|
|
14837
14837
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, hasInvertedStyle
|
|
14838
14838
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14839
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, showDivider && material.css(templateObject_1$
|
|
14839
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, showDivider && material.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: -", "px;\n display: block;\n height: 100%;\n width: 1px;\n margin-left: ", "px;\n background-color: ", ";\n }\n "], ["\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: -", "px;\n display: block;\n height: 100%;\n width: 1px;\n margin-left: ", "px;\n background-color: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, hasInvertedStyle
|
|
14840
14840
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerOnDark
|
|
14841
14841
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider));
|
|
14842
14842
|
});
|
|
14843
14843
|
var StyledDivider$1 = styled__default.default(material.Divider, {
|
|
14844
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
14845
|
-
})(templateObject_4$
|
|
14844
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
14845
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14846
14846
|
var semanticColors = getSemanticColors(props);
|
|
14847
14847
|
return "\n border-color: ".concat(props.hasInvertedStyle
|
|
14848
14848
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerOnDark
|
|
14849
14849
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, ";\n ");
|
|
14850
14850
|
});
|
|
14851
|
-
var templateObject_1$
|
|
14851
|
+
var templateObject_1$m, templateObject_2$e, templateObject_3$a, templateObject_4$a;
|
|
14852
14852
|
|
|
14853
14853
|
var FooterLink = React.memo(React.forwardRef(function (_a, ref) {
|
|
14854
14854
|
var link = _a.link, showDivider = _a.showDivider, hasInvertedStyle = _a.hasInvertedStyle;
|
|
@@ -15011,7 +15011,7 @@ function NavigationFooter(_a) {
|
|
|
15011
15011
|
return (jsxRuntime.jsxs(StyledFooter, __assign({ ref: footerRef, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, rest, { children: [jsxRuntime.jsxs(StyledTopSection, { isNarrow: dimensions.isNarrow, hasInvertedStyle: hasInvertedStyle, children: [logoNode, navItemsSection] }), jsxRuntime.jsx(MemoizedStyledDivider, { hasInvertedStyle: hasInvertedStyle }), jsxRuntime.jsxs(StyledBottomSection, { isNarrow: dimensions.isNarrow, children: [jsxRuntime.jsx(StyledLinkSection, { isNarrow: dimensions.isNarrow, children: renderLinks() }), jsxRuntime.jsx(StyledImageSection, { isNarrow: dimensions.isNarrow, children: renderImages() })] })] })));
|
|
15012
15012
|
}
|
|
15013
15013
|
|
|
15014
|
-
var doNotForwardProps$
|
|
15014
|
+
var doNotForwardProps$a = [
|
|
15015
15015
|
"hasInvertedStyle",
|
|
15016
15016
|
"isNarrow",
|
|
15017
15017
|
"primaryNavPosition",
|
|
@@ -15023,19 +15023,19 @@ var doNotForwardProps$9 = [
|
|
|
15023
15023
|
"hasIcon",
|
|
15024
15024
|
"sectionProps",
|
|
15025
15025
|
];
|
|
15026
|
-
var StyledTopComponentSlot = styled__default.default("div")(templateObject_1$
|
|
15026
|
+
var StyledTopComponentSlot = styled__default.default("div")(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: sticky;\n top: 0;\n z-index: 1300;\n"], ["\n position: sticky;\n top: 0;\n z-index: 1300;\n"])));
|
|
15027
15027
|
var StyledAppBar = styled__default.default(material.AppBar, {
|
|
15028
15028
|
shouldForwardProp: function (prop) {
|
|
15029
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15029
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15030
15030
|
},
|
|
15031
|
-
})(templateObject_2$
|
|
15031
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15032
15032
|
var _a, _b;
|
|
15033
15033
|
var colors = getSemanticColors(props);
|
|
15034
15034
|
return "\n background-color: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryDark : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n background-image: none;\n max-width: 100%;\n overflow-x: auto;\n z-index: ").concat(((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.zIndex) === null || _b === void 0 ? void 0 : _b.drawer) ? props.theme.zIndex.drawer + 10 : 1210, ";\n ");
|
|
15035
15035
|
});
|
|
15036
15036
|
var NarrowToolbar = function (props) {
|
|
15037
15037
|
var semanticColors = getSemanticColors(props);
|
|
15038
|
-
return material.css(templateObject_3$
|
|
15038
|
+
return material.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n border-bottom: 1px solid\n ", ";\n background-color: ", ";\n background-image: none;\n box-shadow: none;\n position: sticky !important;\n top: 0;\n justify-content: space-between;\n "], ["\n border-bottom: 1px solid\n ", ";\n background-color: ", ";\n background-image: none;\n box-shadow: none;\n position: sticky !important;\n top: 0;\n justify-content: space-between;\n "])), props.hasInvertedStyle
|
|
15039
15039
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerOnDark
|
|
15040
15040
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, props.hasInvertedStyle
|
|
15041
15041
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryDark
|
|
@@ -15043,51 +15043,51 @@ var NarrowToolbar = function (props) {
|
|
|
15043
15043
|
};
|
|
15044
15044
|
var StyledToolbar = styled__default.default(material.Toolbar, {
|
|
15045
15045
|
shouldForwardProp: function (prop) {
|
|
15046
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15046
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15047
15047
|
},
|
|
15048
|
-
})(templateObject_5$
|
|
15048
|
+
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15049
15049
|
var isNarrow = props.isNarrow;
|
|
15050
15050
|
var spaces = getSpaces(props);
|
|
15051
|
-
return material.css(templateObject_4$
|
|
15051
|
+
return material.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n &.MuiToolbar-root {\n min-height: 48px;\n max-height: 48px;\n padding: ", "px ", "px;\n\n ", "\n }\n "], ["\n &.MuiToolbar-root {\n min-height: 48px;\n max-height: 48px;\n padding: ", "px ", "px;\n\n ", "\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && NarrowToolbar(props));
|
|
15052
15052
|
});
|
|
15053
15053
|
styled__default.default("div", {
|
|
15054
15054
|
shouldForwardProp: function (prop) {
|
|
15055
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15055
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15056
15056
|
},
|
|
15057
|
-
})(templateObject_6$
|
|
15057
|
+
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15058
15058
|
var shadows = getShadows(props);
|
|
15059
15059
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n height: 10px;\n display: block;\n position: fixed;\n width: 100%;\n top: 46px;\n left: 0;\n ");
|
|
15060
15060
|
});
|
|
15061
15061
|
styled__default.default("div", {
|
|
15062
15062
|
shouldForwardProp: function (prop) {
|
|
15063
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15063
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15064
15064
|
},
|
|
15065
|
-
})(templateObject_7$
|
|
15065
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15066
15066
|
var colors = getSemanticColors(props);
|
|
15067
15067
|
return "\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryDark : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n height: 10px;\n display: block;\n position: absolute;\n width: 100%;\n top: 56px;\n left: 0;\n ");
|
|
15068
15068
|
});
|
|
15069
15069
|
var StyledHeaderButton = styled__default.default(Button, {
|
|
15070
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
15071
|
-
})(templateObject_9$
|
|
15070
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
15071
|
+
})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15072
15072
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
15073
15073
|
var sdsType = props.sdsType, hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
15074
15074
|
var mode = ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.mode) || "light";
|
|
15075
15075
|
var semanticColors = getSemanticColors(props);
|
|
15076
15076
|
var secondaryButtonStyles = "\n box-shadow: inset 0 0 0 1px ".concat(mode === "light" ? "white" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n color: ").concat(mode === "light" ? "white" : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPrimary, ";\n &:hover {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n box-shadow: inset 0 0 0 1px ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryOnDark, ";\n }\n ");
|
|
15077
|
-
return material.css(templateObject_8$
|
|
15077
|
+
return material.css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "secondary" && hasInvertedStyle
|
|
15078
15078
|
? secondaryButtonStyles
|
|
15079
15079
|
: "", isNarrow && fontBodyL$1(props));
|
|
15080
15080
|
});
|
|
15081
15081
|
var invertedNarrowButtonStyles = function (props) {
|
|
15082
15082
|
var _a, _b, _c, _d;
|
|
15083
15083
|
var semanticColors = getSemanticColors(props);
|
|
15084
|
-
return material.css(templateObject_10$
|
|
15084
|
+
return material.css(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "], ["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryOnDark, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryOnDark, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimaryOnDark, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryOnDark);
|
|
15085
15085
|
};
|
|
15086
15086
|
var StyledNarrowIconButton = styled__default.default(Button, {
|
|
15087
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
15087
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
15088
15088
|
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15089
15089
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
15090
|
-
return material.css(templateObject_11$
|
|
15090
|
+
return material.css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props), isNarrow && fontBodyL$1(props));
|
|
15091
15091
|
});
|
|
15092
15092
|
var invertedWideButtonStyles = function (props) {
|
|
15093
15093
|
var _a, _b;
|
|
@@ -15095,14 +15095,14 @@ var invertedWideButtonStyles = function (props) {
|
|
|
15095
15095
|
return material.css(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "], ["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryOnDark, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryOnDark);
|
|
15096
15096
|
};
|
|
15097
15097
|
var StyledWideIconButton = styled__default.default(Button, {
|
|
15098
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
15098
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
15099
15099
|
})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15100
15100
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
15101
15101
|
return material.css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n ", "\n margin: 0;\n "], ["\n ", "\n margin: 0;\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
15102
15102
|
});
|
|
15103
15103
|
var StyledLogoLinkWrapper = styled__default.default(Link, {
|
|
15104
15104
|
shouldForwardProp: function (prop) {
|
|
15105
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15105
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15106
15106
|
},
|
|
15107
15107
|
})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n text-decoration: none !important;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n text-decoration: none !important;\n\n ", "\n"])), function (props) {
|
|
15108
15108
|
var isNarrow = props.isNarrow;
|
|
@@ -15114,7 +15114,7 @@ var NarrowTitleContainer = function () {
|
|
|
15114
15114
|
};
|
|
15115
15115
|
var StyledTitleContainer = styled__default.default("div", {
|
|
15116
15116
|
shouldForwardProp: function (prop) {
|
|
15117
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15117
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15118
15118
|
},
|
|
15119
15119
|
})(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n\n ", "\n"])), function (props) {
|
|
15120
15120
|
var isNarrow = props.isNarrow;
|
|
@@ -15126,7 +15126,7 @@ var StyledTitleContainer = styled__default.default("div", {
|
|
|
15126
15126
|
});
|
|
15127
15127
|
var StyledTitleTagWrapper = styled__default.default("div", {
|
|
15128
15128
|
shouldForwardProp: function (prop) {
|
|
15129
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15129
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15130
15130
|
},
|
|
15131
15131
|
})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15132
15132
|
var spaces = getSpaces(props);
|
|
@@ -15135,7 +15135,7 @@ var StyledTitleTagWrapper = styled__default.default("div", {
|
|
|
15135
15135
|
var StyledTag$2 = styled__default.default(Tag)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
15136
15136
|
var StyledPrimaryNavContainer = styled__default.default("div", {
|
|
15137
15137
|
shouldForwardProp: function (prop) {
|
|
15138
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15138
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15139
15139
|
},
|
|
15140
15140
|
})(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"])), function (props) {
|
|
15141
15141
|
var showSearch = props.showSearch, primaryNavPosition = props.primaryNavPosition, isNarrow = props.isNarrow;
|
|
@@ -15147,7 +15147,7 @@ var StyledPrimaryNavContainer = styled__default.default("div", {
|
|
|
15147
15147
|
: primaryNavPositionWithoutSearch);
|
|
15148
15148
|
});
|
|
15149
15149
|
var StyledSearch = styled__default.default(InputSearch, {
|
|
15150
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
15150
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
15151
15151
|
})(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n margin: 0;\n width: 100%;\n\n ", "\n"], ["\n margin: 0;\n width: 100%;\n\n ", "\n"])), function (props) {
|
|
15152
15152
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
15153
15153
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
@@ -15186,7 +15186,7 @@ var NarrowButtonStyles = function (props) {
|
|
|
15186
15186
|
};
|
|
15187
15187
|
var StyledButtonSection = styled__default.default("section", {
|
|
15188
15188
|
shouldForwardProp: function (prop) {
|
|
15189
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15189
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15190
15190
|
},
|
|
15191
15191
|
})(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n z-index: 100;\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n z-index: 100;\n\n ", "\n"])), function (props) {
|
|
15192
15192
|
var isNarrow = props.isNarrow;
|
|
@@ -15195,7 +15195,7 @@ var StyledButtonSection = styled__default.default("section", {
|
|
|
15195
15195
|
});
|
|
15196
15196
|
var StyledDrawer$1 = styled__default.default(material.Drawer, {
|
|
15197
15197
|
shouldForwardProp: function (prop) {
|
|
15198
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15198
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle", "topOffset"], false).includes(prop);
|
|
15199
15199
|
},
|
|
15200
15200
|
})(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15201
15201
|
var colors = getSemanticColors(props);
|
|
@@ -15204,14 +15204,14 @@ var StyledDrawer$1 = styled__default.default(material.Drawer, {
|
|
|
15204
15204
|
});
|
|
15205
15205
|
var StyledDrawerContent = styled__default.default("div", {
|
|
15206
15206
|
shouldForwardProp: function (prop) {
|
|
15207
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15207
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15208
15208
|
},
|
|
15209
15209
|
})(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15210
15210
|
var spaces = getSpaces(props);
|
|
15211
15211
|
return material.css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n padding: 0 ", "px;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n "], ["\n padding: 0 ", "px;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
15212
15212
|
});
|
|
15213
15213
|
var StyledNarrowButton = styled__default.default(Button, {
|
|
15214
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
15214
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
15215
15215
|
})(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15216
15216
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
15217
15217
|
return material.css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n ", "\n margin: 0;\n "], ["\n ", "\n margin: 0;\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
@@ -15232,7 +15232,7 @@ var DrawerAccordionStyles = function (props) {
|
|
|
15232
15232
|
};
|
|
15233
15233
|
var StyledAccordion = styled__default.default(Accordion, {
|
|
15234
15234
|
shouldForwardProp: function (prop) {
|
|
15235
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15235
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15236
15236
|
},
|
|
15237
15237
|
})(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n padding: 0 !important;\n width: 100%;\n min-width: unset;\n\n .MuiAccordionSummary-content {\n ", "\n }\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"], ["\n padding: 0 !important;\n width: 100%;\n min-width: unset;\n\n .MuiAccordionSummary-content {\n ", "\n }\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"])), fontBodyMediumL, fontBodyS$1, function (props) {
|
|
15238
15238
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
@@ -15273,7 +15273,7 @@ var StyledAccordion = styled__default.default(Accordion, {
|
|
|
15273
15273
|
});
|
|
15274
15274
|
var StyledSectionDivider = styled__default.default(material.Divider, {
|
|
15275
15275
|
shouldForwardProp: function (prop) {
|
|
15276
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15276
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15277
15277
|
},
|
|
15278
15278
|
})(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15279
15279
|
var semanticColors = getSemanticColors(props);
|
|
@@ -15285,31 +15285,31 @@ var StyledSectionDivider = styled__default.default(material.Divider, {
|
|
|
15285
15285
|
// Hover Drawer Components for sdsStyle="drawer"
|
|
15286
15286
|
var StyledMegaMenuDrawer = styled__default.default(material.Drawer, {
|
|
15287
15287
|
shouldForwardProp: function (prop) {
|
|
15288
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15288
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle", "topOffset"], false).includes(prop);
|
|
15289
15289
|
},
|
|
15290
15290
|
})(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15291
15291
|
var hasInvertedStyle = props.hasInvertedStyle, _a = props.topOffset, topOffset = _a === void 0 ? 0 : _a;
|
|
15292
15292
|
var semanticColors = getSemanticColors(props);
|
|
15293
15293
|
var spaces = getSpaces(props);
|
|
15294
|
-
return material.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n pointer-events: none;\n top: ", "px;\n\n .MuiDrawer-paper {\n background-color: ", ";\n height: auto;\n max-height: calc(100vh - ", "px);\n overflow: visible;\n pointer-events: auto;\n box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);\n background-image: none;\n padding: ", "px ", "px\n ", "px;\n transform: translateY(48px);\n top: ", "px;\n }\n\n .MuiBackdrop-root {\n background-color: rgba(0, 0, 0, 0
|
|
15294
|
+
return material.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n pointer-events: none;\n top: ", "px;\n\n .MuiDrawer-paper {\n background-color: ", ";\n height: auto;\n max-height: calc(100vh - ", "px);\n overflow: visible;\n pointer-events: auto;\n box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);\n background-image: none;\n padding: ", "px ", "px\n ", "px;\n transform: translateY(48px);\n top: ", "px;\n }\n\n .MuiBackdrop-root {\n background-color: rgba(0, 0, 0, 0);\n backdrop-filter: blur(2px);\n top: ", "px;\n }\n "], ["\n pointer-events: none;\n top: ", "px;\n\n .MuiDrawer-paper {\n background-color: ", ";\n height: auto;\n max-height: calc(100vh - ", "px);\n overflow: visible;\n pointer-events: auto;\n box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);\n background-image: none;\n padding: ", "px ", "px\n ", "px;\n transform: translateY(48px);\n top: ", "px;\n }\n\n .MuiBackdrop-root {\n background-color: rgba(0, 0, 0, 0);\n backdrop-filter: blur(2px);\n top: ", "px;\n }\n "])), topOffset, hasInvertedStyle
|
|
15295
15295
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryDark
|
|
15296
15296
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimary, topOffset, (spaces === null || spaces === void 0 ? void 0 : spaces.xl) ? (spaces === null || spaces === void 0 ? void 0 : spaces.xl) + 48 : 48, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, topOffset, topOffset);
|
|
15297
15297
|
});
|
|
15298
15298
|
var StyledMegaMenuContent = styled__default.default("div", {
|
|
15299
15299
|
shouldForwardProp: function (prop) {
|
|
15300
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15300
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15301
15301
|
},
|
|
15302
15302
|
})(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15303
15303
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
15304
15304
|
var semanticColors = getSemanticColors(props);
|
|
15305
15305
|
var spaces = getSpaces(props);
|
|
15306
|
-
return material.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: ", "px;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n justify-content: center;\n transition: opacity
|
|
15306
|
+
return material.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: ", "px;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n justify-content: center;\n transition: opacity 150ms ease-in-out;\n "], ["\n background-color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: ", "px;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n justify-content: center;\n transition: opacity 150ms ease-in-out;\n "])), hasInvertedStyle
|
|
15307
15307
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryDark
|
|
15308
15308
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl);
|
|
15309
15309
|
});
|
|
15310
15310
|
var StyledHoverDrawerColumn = styled__default.default("div", {
|
|
15311
15311
|
shouldForwardProp: function (prop) {
|
|
15312
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15312
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle", "totalColumns"], false).includes(prop);
|
|
15313
15313
|
},
|
|
15314
15314
|
})(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15315
15315
|
var spaces = getSpaces(props);
|
|
@@ -15335,7 +15335,7 @@ var StyledContentWrapper = styled__default.default("div")(templateObject_50 || (
|
|
|
15335
15335
|
});
|
|
15336
15336
|
var StyledHoverDrawerColumnHeader = styled__default.default("div", {
|
|
15337
15337
|
shouldForwardProp: function (prop) {
|
|
15338
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15338
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15339
15339
|
},
|
|
15340
15340
|
})(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15341
15341
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
@@ -15347,7 +15347,7 @@ var StyledHoverDrawerColumnHeader = styled__default.default("div", {
|
|
|
15347
15347
|
});
|
|
15348
15348
|
var StyledHoverDrawerItem = styled__default.default(Button, {
|
|
15349
15349
|
shouldForwardProp: function (prop) {
|
|
15350
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15350
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15351
15351
|
},
|
|
15352
15352
|
})(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15353
15353
|
var _a;
|
|
@@ -15355,13 +15355,13 @@ var StyledHoverDrawerItem = styled__default.default(Button, {
|
|
|
15355
15355
|
var semanticColors = getSemanticColors(props);
|
|
15356
15356
|
var corners = getCorners(props);
|
|
15357
15357
|
var spaces = getSpaces(props);
|
|
15358
|
-
return material.css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, hasDetails ? spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
15358
|
+
return material.css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, hasDetails ? spaces === null || spaces === void 0 ? void 0 : spaces.l : 0, corners === null || corners === void 0 ? void 0 : corners.xl, hasInvertedStyle
|
|
15359
15359
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
15360
15360
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament);
|
|
15361
15361
|
});
|
|
15362
15362
|
var StyledHoverDrawerItemContent = styled__default.default("div", {
|
|
15363
15363
|
shouldForwardProp: function (prop) {
|
|
15364
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15364
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15365
15365
|
},
|
|
15366
15366
|
})(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15367
15367
|
var spaces = getSpaces(props);
|
|
@@ -15369,7 +15369,7 @@ var StyledHoverDrawerItemContent = styled__default.default("div", {
|
|
|
15369
15369
|
});
|
|
15370
15370
|
var StyledHoverDrawerItemIcon = styled__default.default("div", {
|
|
15371
15371
|
shouldForwardProp: function (prop) {
|
|
15372
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15372
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15373
15373
|
},
|
|
15374
15374
|
})(templateObject_58 || (templateObject_58 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15375
15375
|
var _a, _b;
|
|
@@ -15380,14 +15380,14 @@ var StyledHoverDrawerItemIcon = styled__default.default("div", {
|
|
|
15380
15380
|
});
|
|
15381
15381
|
var StyledHoverDrawerItemText = styled__default.default("div", {
|
|
15382
15382
|
shouldForwardProp: function (prop) {
|
|
15383
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15383
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15384
15384
|
},
|
|
15385
15385
|
})(templateObject_60 || (templateObject_60 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
|
|
15386
15386
|
return material.css(templateObject_59 || (templateObject_59 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n min-width: 0;\n "], ["\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n min-width: 0;\n "])));
|
|
15387
15387
|
});
|
|
15388
15388
|
var EmptyIcon = styled__default.default("div", {
|
|
15389
15389
|
shouldForwardProp: function (prop) {
|
|
15390
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15390
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15391
15391
|
},
|
|
15392
15392
|
})(templateObject_62 || (templateObject_62 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15393
15393
|
var _a, _b, _c, _d;
|
|
@@ -15398,7 +15398,7 @@ var EmptyIcon = styled__default.default("div", {
|
|
|
15398
15398
|
});
|
|
15399
15399
|
var StyledHoverDrawerItemTitle = styled__default.default("div", {
|
|
15400
15400
|
shouldForwardProp: function (prop) {
|
|
15401
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15401
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15402
15402
|
},
|
|
15403
15403
|
})(templateObject_64 || (templateObject_64 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15404
15404
|
var hasInvertedStyle = props.hasInvertedStyle, hasDetails = props.hasDetails;
|
|
@@ -15411,7 +15411,7 @@ var StyledHoverDrawerItemTitle = styled__default.default("div", {
|
|
|
15411
15411
|
});
|
|
15412
15412
|
var StyledHoverDrawerItemDetails = styled__default.default("div", {
|
|
15413
15413
|
shouldForwardProp: function (prop) {
|
|
15414
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15414
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15415
15415
|
},
|
|
15416
15416
|
})(templateObject_66 || (templateObject_66 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15417
15417
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
@@ -15422,12 +15422,12 @@ var StyledHoverDrawerItemDetails = styled__default.default("div", {
|
|
|
15422
15422
|
});
|
|
15423
15423
|
var StyledHoverDrawerActions = styled__default.default("div", {
|
|
15424
15424
|
shouldForwardProp: function (prop) {
|
|
15425
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15425
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15426
15426
|
},
|
|
15427
15427
|
})(templateObject_68 || (templateObject_68 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15428
15428
|
var spaces = getSpaces(props);
|
|
15429
15429
|
var isNarrow = props.isNarrow;
|
|
15430
|
-
return material.css(templateObject_67 || (templateObject_67 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n margin-top: ", "px;\n padding-left: ", ";\n flex-wrap: wrap;\n "], ["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n margin-top: ", "px;\n padding-left: ", ";\n flex-wrap: wrap;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
15430
|
+
return material.css(templateObject_67 || (templateObject_67 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n margin-top: ", "px;\n padding-left: ", ";\n flex-wrap: wrap;\n "], ["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n margin-top: ", "px;\n padding-left: ", ";\n flex-wrap: wrap;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow
|
|
15431
15431
|
? "calc(".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px + ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px)")
|
|
15432
15432
|
: "calc(".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px + ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px)"));
|
|
15433
15433
|
});
|
|
@@ -15448,12 +15448,12 @@ var StyledButton = styled__default.default(Button)(templateObject_70 || (templat
|
|
|
15448
15448
|
});
|
|
15449
15449
|
var StyledHoverDrawerContainer = styled__default.default("div", {
|
|
15450
15450
|
shouldForwardProp: function (prop) {
|
|
15451
|
-
return !__spreadArray(__spreadArray([], doNotForwardProps$
|
|
15451
|
+
return !__spreadArray(__spreadArray([], doNotForwardProps$a, true), ["sdsStyle"], false).includes(prop);
|
|
15452
15452
|
},
|
|
15453
15453
|
})(templateObject_71 || (templateObject_71 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
15454
|
-
var templateObject_1$
|
|
15454
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$9, templateObject_4$9, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$5, templateObject_9$5, templateObject_10$5, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57, templateObject_58, templateObject_59, templateObject_60, templateObject_61, templateObject_62, templateObject_63, templateObject_64, templateObject_65, templateObject_66, templateObject_67, templateObject_68, templateObject_69, templateObject_70, templateObject_71;
|
|
15455
15455
|
|
|
15456
|
-
var doNotForwardProps$
|
|
15456
|
+
var doNotForwardProps$9 = [
|
|
15457
15457
|
"active",
|
|
15458
15458
|
"hasInvertedStyle",
|
|
15459
15459
|
"isNarrow",
|
|
@@ -15473,21 +15473,21 @@ var NarrowPrimaryNavItem = function (props) {
|
|
|
15473
15473
|
var ChevronHoverColor = hasInvertedStyle
|
|
15474
15474
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryHoverOnDark
|
|
15475
15475
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover;
|
|
15476
|
-
return react.css(templateObject_5$
|
|
15477
|
-
? react.css(templateObject_1$
|
|
15476
|
+
return react.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n border-radius: ", "px;\n justify-content: start;\n padding: ", "px ", "px;\n ", "\n width: 100%;\n\n &:hover {\n ", "\n box-shadow: none;\n\n ", " {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n "], ["\n border-radius: ", "px;\n justify-content: start;\n padding: ", "px ", "px;\n ", "\n width: 100%;\n\n &:hover {\n ", "\n box-shadow: none;\n\n ", " {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.l, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, innerSdsStyle === "drawer"
|
|
15477
|
+
? react.css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n background-color: transparent !important;\n "], ["\n background-color: transparent !important;\n "]))) : react.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), active
|
|
15478
15478
|
? hasInvertedStyle
|
|
15479
15479
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillPressedOnDark
|
|
15480
15480
|
: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillPressed
|
|
15481
15481
|
: "transparent"), innerSdsStyle === "drawer"
|
|
15482
|
-
? react.css(templateObject_3$
|
|
15482
|
+
? react.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n background: transparent !important;\n "], ["\n background: transparent !important;\n "]))) : react.css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), hasInvertedStyle
|
|
15483
15483
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
15484
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover), StyledLabel, hasInvertedStyle
|
|
15484
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover), StyledLabel$1, hasInvertedStyle
|
|
15485
15485
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
15486
15486
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, ChevronHoverColor);
|
|
15487
15487
|
};
|
|
15488
|
-
|
|
15489
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
15490
|
-
})(templateObject_7$
|
|
15488
|
+
styled__default.default(Button, {
|
|
15489
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
15490
|
+
})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-width: fit-content;\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n min-width: fit-content;\n\n ", "\n"])), function (props) {
|
|
15491
15491
|
var _a, _b, _c;
|
|
15492
15492
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow, active = props.active;
|
|
15493
15493
|
var spaces = getSpaces(props);
|
|
@@ -15502,21 +15502,113 @@ var PrimaryNavItem = styled__default.default(Button, {
|
|
|
15502
15502
|
var ChevronOpenColor = hasInvertedStyle
|
|
15503
15503
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryPressedOnDark
|
|
15504
15504
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryPressed;
|
|
15505
|
-
return react.css(templateObject_6$
|
|
15505
|
+
return react.css(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n border: none;\n padding: ", "px ", "px;\n border-radius: ", "px;\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", " !important;\n box-shadow: none;\n\n ", " {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n\n ", "\n "], ["\n border: none;\n padding: ", "px ", "px;\n border-radius: ", "px;\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", " !important;\n box-shadow: none;\n\n ", " {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, corners === null || corners === void 0 ? void 0 : corners.l, active
|
|
15506
15506
|
? hasInvertedStyle
|
|
15507
15507
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillPressedOnDark
|
|
15508
15508
|
: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillPressed
|
|
15509
15509
|
: "transparent", active ? ChevronOpenColor : ChevronDefaultColor, hasInvertedStyle
|
|
15510
15510
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
15511
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, StyledLabel, hasInvertedStyle
|
|
15511
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, StyledLabel$1, hasInvertedStyle
|
|
15512
15512
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
15513
15513
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, ChevronHoverColor, isNarrow && NarrowPrimaryNavItem(props));
|
|
15514
15514
|
});
|
|
15515
|
-
var StyledTag$1 = styled__default.default(Tag)(templateObject_8$
|
|
15515
|
+
var StyledTag$1 = styled__default.default(Tag)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
15516
15516
|
var NarrowStyledLabel = function (props) {
|
|
15517
15517
|
var active = props.active;
|
|
15518
|
-
return react.css(templateObject_9$
|
|
15518
|
+
return react.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), active ? fontBodySemiboldL(props) : fontBodyMediumL(props));
|
|
15519
|
+
};
|
|
15520
|
+
var StyledLabel$1 = styled__default.default("span", {
|
|
15521
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
15522
|
+
})(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15523
|
+
var hasInvertedStyle = props.hasInvertedStyle, active = props.active, isNarrow = props.isNarrow;
|
|
15524
|
+
var spaces = getSpaces(props);
|
|
15525
|
+
var colors = getSemanticColors(props);
|
|
15526
|
+
var activeColor = hasInvertedStyle
|
|
15527
|
+
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryOnDark
|
|
15528
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.textPrimary;
|
|
15529
|
+
var inactiveColor = hasInvertedStyle
|
|
15530
|
+
? colors === null || colors === void 0 ? void 0 : colors.base.textSecondaryOnDark
|
|
15531
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.textSecondary;
|
|
15532
|
+
return [
|
|
15533
|
+
active ? fontBodySemiboldS(props) : fontBodyMediumS(props),
|
|
15534
|
+
react.css(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n /* TODO: Double check with Connor! */\n /* ", " {\n margin-right: -", "px;margin-right\n } */\n\n ", "\n "], ["\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n /* TODO: Double check with Connor! */\n /* ", " {\n margin-right: -", "px;margin-right\n } */\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeColor : inactiveColor, StyledTag$1, spaces === null || spaces === void 0 ? void 0 : spaces.s, isNarrow && NarrowStyledLabel(props)),
|
|
15535
|
+
];
|
|
15536
|
+
});
|
|
15537
|
+
var templateObject_1$k, templateObject_2$c, templateObject_3$8, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$4, templateObject_9$4, templateObject_10$4, templateObject_11$3;
|
|
15538
|
+
|
|
15539
|
+
var doNotForwardProps$8 = [
|
|
15540
|
+
"active",
|
|
15541
|
+
"hasInvertedStyle",
|
|
15542
|
+
"isNarrow",
|
|
15543
|
+
"hasSection",
|
|
15544
|
+
"innerSdsStyle",
|
|
15545
|
+
"defaultUrl",
|
|
15546
|
+
"hasDetails",
|
|
15547
|
+
"hasIcon",
|
|
15548
|
+
"sectionProps",
|
|
15549
|
+
"navVariant",
|
|
15550
|
+
"itemType",
|
|
15551
|
+
];
|
|
15552
|
+
var NarrowNavItemStyles = function (props) {
|
|
15553
|
+
var _a, _b, _c;
|
|
15554
|
+
var active = props.active, hasInvertedStyle = props.hasInvertedStyle, innerSdsStyle = props.innerSdsStyle, navVariant = props.navVariant;
|
|
15555
|
+
var spaces = getSpaces(props);
|
|
15556
|
+
var semanticColors = getSemanticColors(props);
|
|
15557
|
+
var corners = getCorners(props);
|
|
15558
|
+
var ChevronHoverColor = hasInvertedStyle
|
|
15559
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryHoverOnDark
|
|
15560
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover;
|
|
15561
|
+
return react.css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n ", "\n border-radius: ", "px;\n padding: ", "px\n ", "px;\n ", "\n ", "\n width: 100%;\n\n &:hover {\n ", "\n box-shadow: none;\n\n ", " {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n "], ["\n ", "\n border-radius: ", "px;\n padding: ", "px\n ", "px;\n ", "\n ", "\n width: 100%;\n\n &:hover {\n ", "\n box-shadow: none;\n\n ", " {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n "])), active ? fontBodySemiboldL(props) : fontBodyMediumL(props), corners === null || corners === void 0 ? void 0 : corners.l, spaces === null || spaces === void 0 ? void 0 : spaces.s, navVariant === "primary" ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.m, navVariant === "primary" ? "justify-content: start;" : "", innerSdsStyle === "drawer"
|
|
15562
|
+
? react.css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background-color: transparent !important;\n "], ["\n background-color: transparent !important;\n "]))) : react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), active
|
|
15563
|
+
? hasInvertedStyle
|
|
15564
|
+
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillPressedOnDark
|
|
15565
|
+
: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillPressed
|
|
15566
|
+
: "transparent"), innerSdsStyle === "drawer"
|
|
15567
|
+
? react.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n background: transparent !important;\n "], ["\n background: transparent !important;\n "]))) : react.css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), hasInvertedStyle
|
|
15568
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
15569
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover), navVariant === "primary" && StyledLabel, hasInvertedStyle
|
|
15570
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
15571
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, ChevronHoverColor);
|
|
15519
15572
|
};
|
|
15573
|
+
var UnifiedNavItem = styled__default.default(Button, {
|
|
15574
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
15575
|
+
})(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-width: fit-content;\n border: none;\n background: transparent;\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n min-width: fit-content;\n border: none;\n background: transparent;\n\n ", "\n"])), function (props) {
|
|
15576
|
+
var _a, _b, _c;
|
|
15577
|
+
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow, active = props.active, navVariant = props.navVariant;
|
|
15578
|
+
var spaces = getSpaces(props);
|
|
15579
|
+
var semanticColors = getSemanticColors(props);
|
|
15580
|
+
var corners = getCorners(props);
|
|
15581
|
+
var textDefaultColor = hasInvertedStyle
|
|
15582
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryOnDark
|
|
15583
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary;
|
|
15584
|
+
var textActiveColor = hasInvertedStyle
|
|
15585
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
15586
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary;
|
|
15587
|
+
var ChevronDefaultColor = hasInvertedStyle
|
|
15588
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryOnDark
|
|
15589
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
|
|
15590
|
+
var ChevronHoverColor = hasInvertedStyle
|
|
15591
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryHoverOnDark
|
|
15592
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover;
|
|
15593
|
+
var ChevronOpenColor = hasInvertedStyle
|
|
15594
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryPressedOnDark
|
|
15595
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryPressed;
|
|
15596
|
+
return [
|
|
15597
|
+
navVariant === "secondary" &&
|
|
15598
|
+
(active ? fontBodySemiboldS(props) : fontBodyMediumS(props)),
|
|
15599
|
+
react.css(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n padding: ", "px ", "px;\n border-radius: ", "px;\n background-color: ", ";\n\n ", "\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", " !important;\n box-shadow: none;\n\n ", " {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n\n ", "\n "], ["\n padding: ", "px ", "px;\n border-radius: ", "px;\n background-color: ", ";\n\n ", "\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", " !important;\n box-shadow: none;\n\n ", " {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, corners === null || corners === void 0 ? void 0 : corners.l, active
|
|
15600
|
+
? hasInvertedStyle
|
|
15601
|
+
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillPressedOnDark
|
|
15602
|
+
: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillPressed
|
|
15603
|
+
: "transparent", navVariant === "secondary"
|
|
15604
|
+
? react.css(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n gap: ", "px;\n color: ", ";\n justify-content: flex-start;\n width: fit-content;\n "], ["\n gap: ", "px;\n color: ", ";\n justify-content: flex-start;\n width: fit-content;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? textActiveColor : textDefaultColor) : "", active ? ChevronOpenColor : ChevronDefaultColor, hasInvertedStyle
|
|
15605
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
15606
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, navVariant === "primary" && StyledLabel, hasInvertedStyle
|
|
15607
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
15608
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, ChevronHoverColor, isNarrow && NarrowNavItemStyles(props)),
|
|
15609
|
+
];
|
|
15610
|
+
});
|
|
15611
|
+
// StyledLabel for primary nav items (secondary nav doesn't use this)
|
|
15520
15612
|
var StyledLabel = styled__default.default("span", {
|
|
15521
15613
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
15522
15614
|
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
@@ -15531,7 +15623,7 @@ var StyledLabel = styled__default.default("span", {
|
|
|
15531
15623
|
: colors === null || colors === void 0 ? void 0 : colors.base.textSecondary;
|
|
15532
15624
|
return [
|
|
15533
15625
|
active ? fontBodySemiboldS(props) : fontBodyMediumS(props),
|
|
15534
|
-
react.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n
|
|
15626
|
+
react.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", "\n "], ["\n position: relative;\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeColor : inactiveColor, isNarrow && react.css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), active ? fontBodySemiboldL(props) : fontBodyMediumL(props))),
|
|
15535
15627
|
];
|
|
15536
15628
|
});
|
|
15537
15629
|
var templateObject_1$j, templateObject_2$b, templateObject_3$7, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$3, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
@@ -15823,41 +15915,32 @@ function AccordionNavItem(props) {
|
|
|
15823
15915
|
}) })] }, accordionId));
|
|
15824
15916
|
}
|
|
15825
15917
|
|
|
15826
|
-
|
|
15827
|
-
|
|
15828
|
-
|
|
15829
|
-
|
|
15830
|
-
|
|
15831
|
-
var
|
|
15918
|
+
/**
|
|
15919
|
+
* Custom hook to manage navigation drawer and dropdown state
|
|
15920
|
+
* Includes hover delay logic for smooth drawer transitions
|
|
15921
|
+
*/
|
|
15922
|
+
function useNavigationState() {
|
|
15923
|
+
var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
|
|
15924
|
+
var _b = React.useState(null), activeDropdownKey = _b[0], setActiveDropdownKey = _b[1];
|
|
15925
|
+
var _c = React.useState(null), activeDrawerKey = _c[0], setActiveDrawerKey = _c[1];
|
|
15832
15926
|
var buttonRef = React.useRef(null);
|
|
15833
|
-
var
|
|
15927
|
+
var _d = React.useState("100%"), menuWidth = _d[0], setMenuWidth = _d[1];
|
|
15834
15928
|
var hoverTimeoutRef = React.useRef(null);
|
|
15835
|
-
var
|
|
15836
|
-
var
|
|
15929
|
+
var hoverEnterTimeoutRef = React.useRef(null);
|
|
15930
|
+
var _e = React.useState(null), contentKey = _e[0], setContentKey = _e[1];
|
|
15931
|
+
var _f = React.useState(false), isContentFading = _f[0], setIsContentFading = _f[1];
|
|
15837
15932
|
var open = Boolean(anchorEl);
|
|
15838
15933
|
var drawerOpen = activeDrawerKey !== null;
|
|
15839
|
-
// Helper function to wrap dropdown items' onClick handlers
|
|
15840
|
-
// This automatically sets the parent dropdown as active when an item is clicked
|
|
15841
|
-
var wrapDropdownItemsWithActiveKey = function (dropdownItems, parentKey) {
|
|
15842
|
-
return dropdownItems.map(function (item) {
|
|
15843
|
-
var originalOnClick = item.onClick;
|
|
15844
|
-
return __assign(__assign({}, item), { onClick: function (e) {
|
|
15845
|
-
// Call original onClick if it exists
|
|
15846
|
-
originalOnClick === null || originalOnClick === void 0 ? void 0 : originalOnClick(e);
|
|
15847
|
-
// Set the active key to the parent dropdown's key
|
|
15848
|
-
onChange(parentKey);
|
|
15849
|
-
} });
|
|
15850
|
-
});
|
|
15851
|
-
};
|
|
15852
15934
|
function onClose() {
|
|
15853
15935
|
setAnchorEl(null);
|
|
15854
15936
|
setActiveDropdownKey(null);
|
|
15855
|
-
// Close mobile drawer when in narrow mode
|
|
15856
|
-
if (isNarrow) {
|
|
15857
|
-
onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
|
|
15858
|
-
}
|
|
15859
15937
|
}
|
|
15860
15938
|
function onDrawerClose() {
|
|
15939
|
+
// Clear any pending hover enter timeout
|
|
15940
|
+
if (hoverEnterTimeoutRef.current) {
|
|
15941
|
+
clearTimeout(hoverEnterTimeoutRef.current);
|
|
15942
|
+
}
|
|
15943
|
+
// Clear any existing close timeout
|
|
15861
15944
|
if (hoverTimeoutRef.current) {
|
|
15862
15945
|
clearTimeout(hoverTimeoutRef.current);
|
|
15863
15946
|
}
|
|
@@ -15867,20 +15950,28 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15867
15950
|
}, 200);
|
|
15868
15951
|
}
|
|
15869
15952
|
function onDrawerOpen(key) {
|
|
15953
|
+
// Clear any pending close timeout
|
|
15870
15954
|
if (hoverTimeoutRef.current) {
|
|
15871
15955
|
clearTimeout(hoverTimeoutRef.current);
|
|
15872
15956
|
}
|
|
15873
|
-
// If drawer is already open with different content,
|
|
15957
|
+
// If drawer is already open with different content, add a delay before changing
|
|
15874
15958
|
if (activeDrawerKey !== null && activeDrawerKey !== key) {
|
|
15875
|
-
|
|
15876
|
-
|
|
15877
|
-
|
|
15878
|
-
|
|
15879
|
-
|
|
15880
|
-
|
|
15959
|
+
// Clear any pending hover enter timeout
|
|
15960
|
+
if (hoverEnterTimeoutRef.current) {
|
|
15961
|
+
clearTimeout(hoverEnterTimeoutRef.current);
|
|
15962
|
+
}
|
|
15963
|
+
// Wait 100ms before changing content
|
|
15964
|
+
hoverEnterTimeoutRef.current = setTimeout(function () {
|
|
15965
|
+
setIsContentFading(true);
|
|
15966
|
+
setTimeout(function () {
|
|
15967
|
+
setActiveDrawerKey(key);
|
|
15968
|
+
setContentKey(key);
|
|
15969
|
+
setIsContentFading(false);
|
|
15970
|
+
}, 100);
|
|
15971
|
+
}, 100);
|
|
15881
15972
|
}
|
|
15882
15973
|
else {
|
|
15883
|
-
// First time opening or reopening same drawer
|
|
15974
|
+
// First time opening or reopening same drawer - open immediately
|
|
15884
15975
|
setActiveDrawerKey(key);
|
|
15885
15976
|
setContentKey(key);
|
|
15886
15977
|
setIsContentFading(false);
|
|
@@ -15891,19 +15982,18 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15891
15982
|
clearTimeout(hoverTimeoutRef.current);
|
|
15892
15983
|
}
|
|
15893
15984
|
}
|
|
15985
|
+
// Cleanup timeouts on unmount
|
|
15894
15986
|
React.useEffect(function () {
|
|
15895
15987
|
return function () {
|
|
15896
15988
|
if (hoverTimeoutRef.current) {
|
|
15897
15989
|
clearTimeout(hoverTimeoutRef.current);
|
|
15898
15990
|
}
|
|
15991
|
+
if (hoverEnterTimeoutRef.current) {
|
|
15992
|
+
clearTimeout(hoverEnterTimeoutRef.current);
|
|
15993
|
+
}
|
|
15899
15994
|
};
|
|
15900
15995
|
}, []);
|
|
15901
|
-
//
|
|
15902
|
-
React.useEffect(function () {
|
|
15903
|
-
if (sdsStyle === "drawer" && onDrawerStateChange) {
|
|
15904
|
-
onDrawerStateChange(drawerOpen);
|
|
15905
|
-
}
|
|
15906
|
-
}, [drawerOpen, sdsStyle, onDrawerStateChange]);
|
|
15996
|
+
// Update menu width when button ref changes
|
|
15907
15997
|
React.useEffect(function () {
|
|
15908
15998
|
var button = buttonRef.current;
|
|
15909
15999
|
if (!button) {
|
|
@@ -15911,6 +16001,59 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15911
16001
|
}
|
|
15912
16002
|
setMenuWidth(button.offsetWidth);
|
|
15913
16003
|
}, []);
|
|
16004
|
+
return {
|
|
16005
|
+
// State
|
|
16006
|
+
anchorEl: anchorEl,
|
|
16007
|
+
activeDropdownKey: activeDropdownKey,
|
|
16008
|
+
activeDrawerKey: activeDrawerKey,
|
|
16009
|
+
contentKey: contentKey,
|
|
16010
|
+
isContentFading: isContentFading,
|
|
16011
|
+
open: open,
|
|
16012
|
+
drawerOpen: drawerOpen,
|
|
16013
|
+
buttonRef: buttonRef,
|
|
16014
|
+
menuWidth: menuWidth,
|
|
16015
|
+
// Actions
|
|
16016
|
+
setAnchorEl: setAnchorEl,
|
|
16017
|
+
setActiveDropdownKey: setActiveDropdownKey,
|
|
16018
|
+
setActiveDrawerKey: setActiveDrawerKey,
|
|
16019
|
+
setContentKey: setContentKey,
|
|
16020
|
+
onClose: onClose,
|
|
16021
|
+
onDrawerClose: onDrawerClose,
|
|
16022
|
+
onDrawerOpen: onDrawerOpen,
|
|
16023
|
+
cancelDrawerClose: cancelDrawerClose,
|
|
16024
|
+
};
|
|
16025
|
+
}
|
|
16026
|
+
|
|
16027
|
+
function NavigationHeaderPrimaryNav(_a) {
|
|
16028
|
+
var menuProps = _a.menuProps, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value, _b = _a.sdsStyle, sdsStyle = _b === void 0 ? "dropdown" : _b, expandedAccordion = _a.expandedAccordion, setExpandedAccordion = _a.setExpandedAccordion, accordionRefs = _a.accordionRefs, scrollToAccordion = _a.scrollToAccordion, onDrawerStateChange = _a.onDrawerStateChange, _c = _a.topOffset, topOffset = _c === void 0 ? 0 : _c, onCloseProp = _a.onClose;
|
|
16029
|
+
var theme = material.useTheme();
|
|
16030
|
+
var _d = useNavigationState(), anchorEl = _d.anchorEl, activeDropdownKey = _d.activeDropdownKey, activeDrawerKey = _d.activeDrawerKey, contentKey = _d.contentKey, isContentFading = _d.isContentFading, open = _d.open, drawerOpen = _d.drawerOpen, buttonRef = _d.buttonRef, menuWidth = _d.menuWidth, setAnchorEl = _d.setAnchorEl, setActiveDropdownKey = _d.setActiveDropdownKey, setActiveDrawerKey = _d.setActiveDrawerKey, setContentKey = _d.setContentKey, handleClose = _d.onClose, onDrawerClose = _d.onDrawerClose, onDrawerOpen = _d.onDrawerOpen, cancelDrawerClose = _d.cancelDrawerClose;
|
|
16031
|
+
// Helper function to wrap dropdown items' onClick handlers
|
|
16032
|
+
// This automatically sets the parent dropdown as active when an item is clicked
|
|
16033
|
+
var wrapDropdownItemsWithActiveKey = function (dropdownItems, parentKey) {
|
|
16034
|
+
return dropdownItems.map(function (item) {
|
|
16035
|
+
var originalOnClick = item.onClick;
|
|
16036
|
+
return __assign(__assign({}, item), { onClick: function (e) {
|
|
16037
|
+
// Call original onClick if it exists
|
|
16038
|
+
originalOnClick === null || originalOnClick === void 0 ? void 0 : originalOnClick(e);
|
|
16039
|
+
// Set the active key to the parent dropdown's key
|
|
16040
|
+
onChange(parentKey);
|
|
16041
|
+
} });
|
|
16042
|
+
});
|
|
16043
|
+
};
|
|
16044
|
+
function onClose() {
|
|
16045
|
+
handleClose();
|
|
16046
|
+
// Close mobile drawer when in narrow mode
|
|
16047
|
+
if (isNarrow) {
|
|
16048
|
+
onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
|
|
16049
|
+
}
|
|
16050
|
+
}
|
|
16051
|
+
// Notify parent when drawer state changes (only for drawer style)
|
|
16052
|
+
React.useEffect(function () {
|
|
16053
|
+
if (sdsStyle === "drawer" && onDrawerStateChange) {
|
|
16054
|
+
onDrawerStateChange(drawerOpen);
|
|
16055
|
+
}
|
|
16056
|
+
}, [drawerOpen, sdsStyle, onDrawerStateChange]);
|
|
15914
16057
|
var renderDrawerItem = function (item, key, label, parentOnClick, rest) {
|
|
15915
16058
|
var isDrawerOpen = drawerOpen && activeDrawerKey === key;
|
|
15916
16059
|
var isActive = key === value || isDrawerOpen;
|
|
@@ -15921,18 +16064,18 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15921
16064
|
onChange(key);
|
|
15922
16065
|
parentOnClick === null || parentOnClick === void 0 ? void 0 : parentOnClick(e);
|
|
15923
16066
|
};
|
|
15924
|
-
return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: function () { return onDrawerOpen(key); }, onMouseLeave: onDrawerClose, children: jsxRuntime.jsx(
|
|
16067
|
+
return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: function () { return onDrawerOpen(key); }, onMouseLeave: onDrawerClose, children: jsxRuntime.jsx(UnifiedNavItem, __assign({}, rest, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, sdsStyle: "minimal", onClick: handleClick, innerSdsStyle: sdsStyle, navVariant: "primary", component: componentProp, href: defaultUrl, target: target, rel: rel, children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, navVariant: "primary", children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })) }, key));
|
|
15925
16068
|
};
|
|
15926
16069
|
var renderDropdownItem = function (item, key, label, parentOnClick, rest) {
|
|
15927
16070
|
var _a, _b;
|
|
15928
16071
|
var isDropdownOpen = open && activeDropdownKey === key;
|
|
15929
16072
|
var isActive = key === value || isDropdownOpen;
|
|
15930
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(
|
|
16073
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(UnifiedNavItem, __assign({}, rest, { itemType: item.itemType, ref: buttonRef, active: isActive, onClick: function (e) {
|
|
15931
16074
|
setAnchorEl(e.currentTarget);
|
|
15932
16075
|
setActiveDropdownKey(key);
|
|
15933
16076
|
onChange(key);
|
|
15934
16077
|
parentOnClick === null || parentOnClick === void 0 ? void 0 : parentOnClick(e);
|
|
15935
|
-
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsxRuntime.jsx(Menu, __assign({ anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
16078
|
+
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "primary", children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, navVariant: "primary", children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsxRuntime.jsx(Menu, __assign({ anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15936
16079
|
paper: {
|
|
15937
16080
|
style: {
|
|
15938
16081
|
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
@@ -15973,11 +16116,11 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15973
16116
|
};
|
|
15974
16117
|
var renderTextItem = function (item, key, label, tag, tagColor, rest) {
|
|
15975
16118
|
var isActive = key === value;
|
|
15976
|
-
return (jsxRuntime.jsx(
|
|
16119
|
+
return (jsxRuntime.jsx(UnifiedNavItem, __assign({}, rest, { active: isActive, sdsStyle: "minimal", onClick: function (e) {
|
|
15977
16120
|
var _a;
|
|
15978
16121
|
onChange(key);
|
|
15979
16122
|
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
|
|
15980
|
-
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, innerSdsStyle: sdsStyle, children: jsxRuntime.jsxs(StyledLabel, { active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), tag && (jsxRuntime.jsx(StyledTag$1, { label: tag, color: tagColor, hover: false }))] }) }), key));
|
|
16123
|
+
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, innerSdsStyle: sdsStyle, navVariant: "primary", children: jsxRuntime.jsxs(StyledLabel, { active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, navVariant: "primary", children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), tag && (jsxRuntime.jsx(StyledTag$1, { label: tag, color: tagColor, hover: false }))] }) }), key));
|
|
15981
16124
|
};
|
|
15982
16125
|
// Get the active drawer item for rendering shared content
|
|
15983
16126
|
var activeDrawerItem = items.find(function (item) { return item.itemType === "dropdown" && item.key === contentKey; });
|
|
@@ -16004,7 +16147,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
16004
16147
|
}) }), sdsStyle === "drawer" && !isNarrow && (jsxRuntime.jsx(StyledMegaMenuDrawer, { anchor: "top", open: drawerOpen, onClose: function () {
|
|
16005
16148
|
setActiveDrawerKey(null);
|
|
16006
16149
|
setContentKey(null);
|
|
16007
|
-
}, hasInvertedStyle: hasInvertedStyle, hideBackdrop: false, disableScrollLock: true, transitionDuration:
|
|
16150
|
+
}, hasInvertedStyle: hasInvertedStyle, hideBackdrop: false, disableScrollLock: true, transitionDuration: 100, topOffset: topOffset, SlideProps: {
|
|
16008
16151
|
onMouseEnter: cancelDrawerClose,
|
|
16009
16152
|
onMouseLeave: onDrawerClose,
|
|
16010
16153
|
}, children: jsxRuntime.jsx(StyledMegaMenuContent, { hasInvertedStyle: hasInvertedStyle, style: {
|
|
@@ -16081,7 +16224,7 @@ var NarrowStyledTextItem = function (props) {
|
|
|
16081
16224
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
16082
16225
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover);
|
|
16083
16226
|
};
|
|
16084
|
-
|
|
16227
|
+
styled__default.default(Button, {
|
|
16085
16228
|
shouldForwardProp: function (prop) {
|
|
16086
16229
|
return !ButtonDoNotForwardProps.includes(prop);
|
|
16087
16230
|
},
|
|
@@ -16124,99 +16267,39 @@ var templateObject_1$g, templateObject_2$8, templateObject_3$4, templateObject_4
|
|
|
16124
16267
|
|
|
16125
16268
|
function NavigationHeaderSecondaryNav(_a) {
|
|
16126
16269
|
var menuProps = _a.menuProps, items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, _b = _a.sdsStyle, sdsStyle = _b === void 0 ? "dropdown" : _b, expandedAccordion = _a.expandedAccordion, setExpandedAccordion = _a.setExpandedAccordion, accordionRefs = _a.accordionRefs, scrollToAccordion = _a.scrollToAccordion, onDrawerStateChange = _a.onDrawerStateChange, _c = _a.topOffset, topOffset = _c === void 0 ? 0 : _c, onCloseProp = _a.onClose;
|
|
16127
|
-
var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
|
|
16128
|
-
var _e = React.useState(null), activeDropdownKey = _e[0], setActiveDropdownKey = _e[1];
|
|
16129
|
-
var _f = React.useState(null), activeDrawerKey = _f[0], setActiveDrawerKey = _f[1];
|
|
16130
16270
|
var theme = material.useTheme();
|
|
16131
|
-
var
|
|
16132
|
-
var _g = React.useState(null), contentKey = _g[0], setContentKey = _g[1];
|
|
16133
|
-
var _h = React.useState(false), isContentFading = _h[0], setIsContentFading = _h[1];
|
|
16134
|
-
var open = Boolean(anchorEl);
|
|
16135
|
-
var drawerOpen = activeDrawerKey !== null;
|
|
16271
|
+
var _d = useNavigationState(), anchorEl = _d.anchorEl, activeDropdownKey = _d.activeDropdownKey, activeDrawerKey = _d.activeDrawerKey, contentKey = _d.contentKey, isContentFading = _d.isContentFading, open = _d.open, drawerOpen = _d.drawerOpen, buttonRef = _d.buttonRef, menuWidth = _d.menuWidth, setAnchorEl = _d.setAnchorEl, setActiveDropdownKey = _d.setActiveDropdownKey, setActiveDrawerKey = _d.setActiveDrawerKey, setContentKey = _d.setContentKey, handleClose = _d.onClose, onDrawerClose = _d.onDrawerClose, onDrawerOpen = _d.onDrawerOpen, cancelDrawerClose = _d.cancelDrawerClose;
|
|
16136
16272
|
function onClose() {
|
|
16137
|
-
|
|
16138
|
-
setActiveDropdownKey(null);
|
|
16273
|
+
handleClose();
|
|
16139
16274
|
// Close mobile drawer when in narrow mode
|
|
16140
16275
|
if (isNarrow) {
|
|
16141
16276
|
onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
|
|
16142
16277
|
}
|
|
16143
16278
|
}
|
|
16144
|
-
function onDrawerClose() {
|
|
16145
|
-
if (hoverTimeoutRef.current) {
|
|
16146
|
-
clearTimeout(hoverTimeoutRef.current);
|
|
16147
|
-
}
|
|
16148
|
-
hoverTimeoutRef.current = setTimeout(function () {
|
|
16149
|
-
setActiveDrawerKey(null);
|
|
16150
|
-
setContentKey(null);
|
|
16151
|
-
}, 200);
|
|
16152
|
-
}
|
|
16153
|
-
function onDrawerOpen(key) {
|
|
16154
|
-
if (hoverTimeoutRef.current) {
|
|
16155
|
-
clearTimeout(hoverTimeoutRef.current);
|
|
16156
|
-
}
|
|
16157
|
-
// If drawer is already open with different content, fade out then change
|
|
16158
|
-
if (activeDrawerKey !== null && activeDrawerKey !== key) {
|
|
16159
|
-
setIsContentFading(true);
|
|
16160
|
-
setTimeout(function () {
|
|
16161
|
-
setActiveDrawerKey(key);
|
|
16162
|
-
setContentKey(key);
|
|
16163
|
-
setIsContentFading(false);
|
|
16164
|
-
}, 150);
|
|
16165
|
-
}
|
|
16166
|
-
else {
|
|
16167
|
-
// First time opening or reopening same drawer
|
|
16168
|
-
setActiveDrawerKey(key);
|
|
16169
|
-
setContentKey(key);
|
|
16170
|
-
setIsContentFading(false);
|
|
16171
|
-
}
|
|
16172
|
-
}
|
|
16173
|
-
function cancelDrawerClose() {
|
|
16174
|
-
if (hoverTimeoutRef.current) {
|
|
16175
|
-
clearTimeout(hoverTimeoutRef.current);
|
|
16176
|
-
}
|
|
16177
|
-
}
|
|
16178
|
-
React.useEffect(function () {
|
|
16179
|
-
return function () {
|
|
16180
|
-
if (hoverTimeoutRef.current) {
|
|
16181
|
-
clearTimeout(hoverTimeoutRef.current);
|
|
16182
|
-
}
|
|
16183
|
-
};
|
|
16184
|
-
}, []);
|
|
16185
16279
|
// Notify parent when drawer state changes (only for drawer style)
|
|
16186
16280
|
React.useEffect(function () {
|
|
16187
16281
|
if (sdsStyle === "drawer" && onDrawerStateChange) {
|
|
16188
16282
|
onDrawerStateChange(drawerOpen);
|
|
16189
16283
|
}
|
|
16190
16284
|
}, [drawerOpen, sdsStyle, onDrawerStateChange]);
|
|
16191
|
-
var
|
|
16192
|
-
|
|
16193
|
-
|
|
16194
|
-
var button = buttonRef.current;
|
|
16195
|
-
if (!button) {
|
|
16196
|
-
return;
|
|
16197
|
-
}
|
|
16198
|
-
setMenuWidth(button.offsetWidth);
|
|
16199
|
-
}, []);
|
|
16200
|
-
var renderDrawerItem = function (item, itemKey, label, tag, tagColor, rest) {
|
|
16201
|
-
var isDrawerOpen = drawerOpen && activeDrawerKey === itemKey;
|
|
16202
|
-
var defaultUrl = item.defaultUrl, component = item.component, target = item.target, rel = item.rel, onClick = item.onClick;
|
|
16285
|
+
var renderDrawerItem = function (item, key, label, parentOnClick, rest) {
|
|
16286
|
+
var isDrawerOpen = drawerOpen && activeDrawerKey === key;
|
|
16287
|
+
var defaultUrl = item.defaultUrl, component = item.component, target = item.target, rel = item.rel;
|
|
16203
16288
|
// If defaultUrl is provided without a component, default to anchor tag
|
|
16204
16289
|
var componentProp = defaultUrl && !component ? "a" : component;
|
|
16205
|
-
|
|
16206
|
-
|
|
16207
|
-
|
|
16290
|
+
var handleClick = function (e) {
|
|
16291
|
+
parentOnClick === null || parentOnClick === void 0 ? void 0 : parentOnClick(e);
|
|
16292
|
+
};
|
|
16293
|
+
return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: function () { return onDrawerOpen(key); }, onMouseLeave: onDrawerClose, children: jsxRuntime.jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
|
|
16208
16294
|
};
|
|
16209
|
-
var renderDropdownItem = function (item,
|
|
16295
|
+
var renderDropdownItem = function (item, key, label, parentOnClick, rest) {
|
|
16210
16296
|
var _a, _b;
|
|
16211
|
-
var isDropdownOpen = open && activeDropdownKey ===
|
|
16212
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs(
|
|
16213
|
-
|
|
16214
|
-
|
|
16215
|
-
|
|
16216
|
-
|
|
16217
|
-
setActiveDropdownKey(itemKey);
|
|
16218
|
-
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
|
|
16219
|
-
}, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDropdownOpen, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), tag && (jsxRuntime.jsx(StyledTag, { label: tag, color: tagColor, hover: false })), jsxRuntime.jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsxRuntime.jsx(Menu, __assign({ anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
16297
|
+
var isDropdownOpen = open && activeDropdownKey === key;
|
|
16298
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs(UnifiedNavItem, __assign({}, rest, { ref: buttonRef, hasInvertedStyle: hasInvertedStyle, active: isDropdownOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: function (e) {
|
|
16299
|
+
setAnchorEl(e.currentTarget);
|
|
16300
|
+
setActiveDropdownKey(key);
|
|
16301
|
+
parentOnClick === null || parentOnClick === void 0 ? void 0 : parentOnClick(e);
|
|
16302
|
+
}, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDropdownOpen, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsxRuntime.jsx(Menu, __assign({ anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
16220
16303
|
paper: {
|
|
16221
16304
|
style: {
|
|
16222
16305
|
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
@@ -16236,51 +16319,53 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
16236
16319
|
var sectionItems = groupedItems[section];
|
|
16237
16320
|
var showDivider = hasMultipleSections && sectionIndex > 0;
|
|
16238
16321
|
return (jsxRuntime.jsxs("div", { children: [showDivider && (jsxRuntime.jsx(StyledDivider, { hasSection: !!section, isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle })), section && hasMultipleSections && (jsxRuntime.jsx(StyledSectionHeader, { isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle, children: section })), sectionItems.map(function (subItem) {
|
|
16239
|
-
var subLabel = subItem.label, onClick = subItem.onClick;
|
|
16240
|
-
return (jsxRuntime.jsx(MenuItem, { onClick: function (e) {
|
|
16322
|
+
var subLabel = subItem.label, onClick = subItem.onClick, sectionSubItemRestProps = __rest(subItem, ["label", "onClick"]);
|
|
16323
|
+
return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
|
|
16241
16324
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
16242
16325
|
onClose();
|
|
16243
|
-
}, sdsType: "action", sx: { minWidth: menuWidth }, children: subLabel }, "menu-item-".concat(subLabel)));
|
|
16326
|
+
}, sdsType: "action", sx: { minWidth: menuWidth } }, sectionSubItemRestProps, { icon: undefined, children: subLabel }), "menu-item-".concat(subLabel)));
|
|
16244
16327
|
})] }, "section-".concat(section || "default")));
|
|
16245
16328
|
});
|
|
16246
|
-
})() }))] },
|
|
16329
|
+
})() }))] }, key));
|
|
16247
16330
|
};
|
|
16248
|
-
var renderAccordionItem = function (item,
|
|
16331
|
+
var renderAccordionItem = function (item, _key) {
|
|
16332
|
+
var _a;
|
|
16333
|
+
var labelKebabCase = (_a = item.label) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().replace(" ", "-");
|
|
16249
16334
|
var accordionId = "".concat(labelKebabCase, "-dropdown");
|
|
16250
|
-
return (jsxRuntime.jsx(AccordionNavItem, { accordionId: accordionId, label: label, items: item.items, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, chevronSize: "s", onClose: onClose, sdsStyle: sdsStyle, sectionProps: item.sectionProps }, accordionId));
|
|
16335
|
+
return (jsxRuntime.jsx(AccordionNavItem, { accordionId: accordionId, label: item.label, items: item.items, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, chevronSize: isNarrow ? "s" : "xs", onClose: onClose, sdsStyle: sdsStyle, sectionProps: item.sectionProps }, accordionId));
|
|
16251
16336
|
};
|
|
16252
|
-
var renderTextItem = function (
|
|
16253
|
-
return (jsxRuntime.jsxs(
|
|
16337
|
+
var renderTextItem = function (item, key, label, tag, tagColor, rest) {
|
|
16338
|
+
return (jsxRuntime.jsxs(UnifiedNavItem, __assign({}, rest, { onClick: function (e) {
|
|
16339
|
+
var _a;
|
|
16340
|
+
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
|
|
16341
|
+
}, hasInvertedStyle: hasInvertedStyle, active: false, isNarrow: isNarrow, sdsStyle: "minimal", navVariant: "secondary", children: [label, tag && (jsxRuntime.jsx(StyledTag, { label: tag, color: tagColor, hover: false }))] }), key));
|
|
16254
16342
|
};
|
|
16255
16343
|
// Get the active drawer item for rendering shared content
|
|
16256
|
-
var activeDrawerItem = items.find(function (item
|
|
16257
|
-
|
|
16258
|
-
|
|
16259
|
-
var itemKey = String(key || "".concat(labelKebabCase, "-").concat(index));
|
|
16260
|
-
return item.itemType === "dropdown" && itemKey === contentKey;
|
|
16261
|
-
});
|
|
16262
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledSection, { isNarrow: isNarrow, children: items.map(function (item, index) {
|
|
16263
|
-
var itemType = item.itemType, label = item.label, key = item.key, tag = item.tag, tagColor = item.tagColor, rest = __rest(item, ["itemType", "label", "key", "tag", "tagColor"]);
|
|
16264
|
-
var labelKebabCase = label === null || label === void 0 ? void 0 : label.toString().toLowerCase().replace(" ", "-");
|
|
16265
|
-
var itemKey = String(key || "".concat(labelKebabCase, "-").concat(index));
|
|
16344
|
+
var activeDrawerItem = items.find(function (item) { return item.itemType === "dropdown" && item.key === contentKey; });
|
|
16345
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledSection, { isNarrow: isNarrow, children: items.map(function (item) {
|
|
16346
|
+
var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, parentOnClick = item.onClick, rest = __rest(item, ["key", "label", "tag", "tagColor", "onClick"]);
|
|
16266
16347
|
// Drawer style (hover-based)
|
|
16267
|
-
if (itemType === "dropdown" &&
|
|
16268
|
-
|
|
16348
|
+
if (item.itemType === "dropdown" &&
|
|
16349
|
+
!isNarrow &&
|
|
16350
|
+
sdsStyle === "drawer") {
|
|
16351
|
+
return renderDrawerItem(item, key, label, parentOnClick, rest);
|
|
16269
16352
|
}
|
|
16270
16353
|
// Dropdown style (click-based)
|
|
16271
|
-
if (itemType === "dropdown" &&
|
|
16272
|
-
|
|
16354
|
+
if (item.itemType === "dropdown" &&
|
|
16355
|
+
!isNarrow &&
|
|
16356
|
+
sdsStyle === "dropdown") {
|
|
16357
|
+
return renderDropdownItem(item, key, label, parentOnClick, rest);
|
|
16273
16358
|
}
|
|
16274
16359
|
// Narrow/Accordion style
|
|
16275
|
-
if (itemType === "dropdown" && isNarrow) {
|
|
16276
|
-
return renderAccordionItem(item
|
|
16360
|
+
if (item.itemType === "dropdown" && isNarrow) {
|
|
16361
|
+
return renderAccordionItem(item);
|
|
16277
16362
|
}
|
|
16278
16363
|
// Simple text item
|
|
16279
|
-
return renderTextItem(item
|
|
16364
|
+
return renderTextItem(item, key, label, "tag" in item ? tag : undefined, "tagColor" in item ? tagColor : undefined, rest);
|
|
16280
16365
|
}) }), sdsStyle === "drawer" && !isNarrow && (jsxRuntime.jsx(StyledMegaMenuDrawer, { anchor: "top", open: drawerOpen, onClose: function () {
|
|
16281
16366
|
setActiveDrawerKey(null);
|
|
16282
16367
|
setContentKey(null);
|
|
16283
|
-
}, hasInvertedStyle: hasInvertedStyle, hideBackdrop: false, disableScrollLock: true, transitionDuration:
|
|
16368
|
+
}, hasInvertedStyle: hasInvertedStyle, hideBackdrop: false, disableScrollLock: true, transitionDuration: 100, topOffset: topOffset, SlideProps: {
|
|
16284
16369
|
onMouseEnter: cancelDrawerClose,
|
|
16285
16370
|
onMouseLeave: onDrawerClose,
|
|
16286
16371
|
}, children: jsxRuntime.jsx(StyledMegaMenuContent, { hasInvertedStyle: hasInvertedStyle, style: {
|
|
@@ -16519,7 +16604,7 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
16519
16604
|
return (showSearch && (jsxRuntime.jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, searchProps))));
|
|
16520
16605
|
};
|
|
16521
16606
|
var renderLogoNode = function () {
|
|
16522
|
-
var logoNode = (jsxRuntime.jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logo && jsxRuntime.jsx(StyledLogoWrapper, { children: logo }), jsxRuntime.jsxs(StyledTitleTagWrapper, { children: [title && jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(StyledTag$2, { color: tagColor, label: tag, hover: false })] })] }));
|
|
16607
|
+
var logoNode = (jsxRuntime.jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logo && jsxRuntime.jsx(StyledLogoWrapper, { children: logo }), (title || tag) && (jsxRuntime.jsxs(StyledTitleTagWrapper, { children: [title && jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(StyledTag$2, { color: tagColor, label: tag, hover: false })] }))] }));
|
|
16523
16608
|
if (logoLinkComponent || logoUrl) {
|
|
16524
16609
|
logoNode = (jsxRuntime.jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: dimensions.isNarrow, children: logoNode })));
|
|
16525
16610
|
}
|