@czi-sds/components 22.3.1 → 22.3.3
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 +34 -12
- package/dist/index.cjs.js +446 -286
- package/dist/index.esm.d.ts +34 -12
- package/dist/index.esm.js +447 -287
- package/dist/tailwind.json +51 -45
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +51 -45
- package/dist/variables.scss +51 -45
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -1028,6 +1028,8 @@ var SDSPaletteLight = function (appTheme) {
|
|
|
1028
1028
|
textPrimaryInverse: appTheme.colors.gray[50],
|
|
1029
1029
|
textSecondary: appTheme.colors.gray[600],
|
|
1030
1030
|
textSecondaryInverse: appTheme.colors.gray[300],
|
|
1031
|
+
textTertiary: appTheme.colors.gray[400],
|
|
1032
|
+
textTertiaryInverse: appTheme.colors.gray[500],
|
|
1031
1033
|
},
|
|
1032
1034
|
beta: {
|
|
1033
1035
|
border: appTheme.colors.purple[600],
|
|
@@ -1164,6 +1166,8 @@ var SDSPaletteDark = function (appTheme) {
|
|
|
1164
1166
|
textPrimaryInverse: appTheme.colors.gray[50],
|
|
1165
1167
|
textSecondary: appTheme.colors.gray[600],
|
|
1166
1168
|
textSecondaryInverse: appTheme.colors.gray[300],
|
|
1169
|
+
textTertiary: appTheme.colors.gray[400],
|
|
1170
|
+
textTertiaryInverse: appTheme.colors.gray[500],
|
|
1167
1171
|
},
|
|
1168
1172
|
beta: {
|
|
1169
1173
|
border: appTheme.colors.purple[600],
|
|
@@ -1572,7 +1576,7 @@ var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
|
1572
1576
|
return null;
|
|
1573
1577
|
var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
|
|
1574
1578
|
if (isNarrow) {
|
|
1575
|
-
return react.css(templateObject_1$
|
|
1579
|
+
return react.css(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowBody[fontWeight][fontSize], bodyFontFamily));
|
|
1576
1580
|
}
|
|
1577
1581
|
return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
|
|
1578
1582
|
};
|
|
@@ -1597,7 +1601,7 @@ var fontCaps = function (fontSize, isNarrow) {
|
|
|
1597
1601
|
if (!typography)
|
|
1598
1602
|
return null;
|
|
1599
1603
|
var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
|
|
1600
|
-
return react.css(templateObject_3$
|
|
1604
|
+
return react.css(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n "], ["\n text-transform: uppercase;\n\n ", "\n "])), isNarrow
|
|
1601
1605
|
? react.css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowCaps.semibold[fontSize], capsFontFamily)) : themeToCss(caps.semibold[fontSize], capsFontFamily));
|
|
1602
1606
|
};
|
|
1603
1607
|
};
|
|
@@ -1613,7 +1617,7 @@ var fontHeader = function (fontSize, isNarrow) {
|
|
|
1613
1617
|
return null;
|
|
1614
1618
|
var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
|
|
1615
1619
|
if (isNarrow) {
|
|
1616
|
-
return react.css(templateObject_4$
|
|
1620
|
+
return react.css(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowHeader.semibold[fontSize], headerFontFamily));
|
|
1617
1621
|
}
|
|
1618
1622
|
return themeToCss(header.semibold[fontSize], headerFontFamily);
|
|
1619
1623
|
};
|
|
@@ -1666,13 +1670,13 @@ function themeToCss(fontTheme, fontFamily) {
|
|
|
1666
1670
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1667
1671
|
return react.css(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "], ["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
|
|
1668
1672
|
}
|
|
1669
|
-
var templateObject_1$
|
|
1673
|
+
var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$w, templateObject_5$p, templateObject_6$l, templateObject_7$g, templateObject_8$d;
|
|
1670
1674
|
|
|
1671
1675
|
var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
1672
1676
|
var spaces = getSpaces(props);
|
|
1673
|
-
return react.css(templateObject_1$
|
|
1677
|
+
return react.css(templateObject_1$19 || (templateObject_1$19 = __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);
|
|
1674
1678
|
});
|
|
1675
|
-
var templateObject_1$
|
|
1679
|
+
var templateObject_1$19, templateObject_2$M;
|
|
1676
1680
|
|
|
1677
1681
|
var AccordionDetails = function (props) {
|
|
1678
1682
|
var children = props.children;
|
|
@@ -1683,14 +1687,14 @@ var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(t
|
|
|
1683
1687
|
var _a, _b;
|
|
1684
1688
|
var spaces = getSpaces(props);
|
|
1685
1689
|
var semanticColors = getSemanticColors(props);
|
|
1686
|
-
return react.css(templateObject_1$
|
|
1690
|
+
return react.css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\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\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\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, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, 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);
|
|
1687
1691
|
});
|
|
1688
|
-
var StyledSubtitle = styled__default.default("p")(templateObject_4$
|
|
1692
|
+
var StyledSubtitle = styled__default.default("p")(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1689
1693
|
var _a;
|
|
1690
1694
|
var semanticColors = getSemanticColors(props);
|
|
1691
|
-
return react.css(templateObject_3$
|
|
1695
|
+
return react.css(templateObject_3$C || (templateObject_3$C = __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);
|
|
1692
1696
|
});
|
|
1693
|
-
var templateObject_1$
|
|
1697
|
+
var templateObject_1$18, templateObject_2$L, templateObject_3$C, templateObject_4$v;
|
|
1694
1698
|
|
|
1695
1699
|
var _path$26, _path2$C, _path3$6;
|
|
1696
1700
|
function _extends$2c() { return _extends$2c = 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$2c.apply(null, arguments); }
|
|
@@ -4412,10 +4416,10 @@ var StyledSvgIcon = styled__default.default(material.SvgIcon, {
|
|
|
4412
4416
|
var _d = props.iconColor, iconColor = _d === void 0 ? "blue" : _d, _e = props.shade, shade = _e === void 0 ? mode === "dark" ? 600 : 500 : _e, sdsSize = props.sdsSize;
|
|
4413
4417
|
var iconSizes = getIconSizes(props);
|
|
4414
4418
|
var colors = getColors(props);
|
|
4415
|
-
return react.css(templateObject_1$
|
|
4419
|
+
return react.css(templateObject_1$17 || (templateObject_1$17 = __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);
|
|
4416
4420
|
});
|
|
4417
|
-
var StyledIcon$1 = styled__default.default("div")(templateObject_3$
|
|
4418
|
-
var templateObject_1$
|
|
4421
|
+
var StyledIcon$1 = styled__default.default("div")(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
4422
|
+
var templateObject_1$17, templateObject_2$K, templateObject_3$B;
|
|
4419
4423
|
|
|
4420
4424
|
/**
|
|
4421
4425
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4453,17 +4457,17 @@ var StyledAccordion$1 = styled__default.default(material.Accordion, {
|
|
|
4453
4457
|
var typography = getTypography(props);
|
|
4454
4458
|
var borders = getBorders(props);
|
|
4455
4459
|
var spaces = getSpaces(props);
|
|
4456
|
-
return react.css(templateObject_1$
|
|
4460
|
+
return react.css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\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 margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\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 font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\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 margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\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, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
|
|
4457
4461
|
});
|
|
4458
4462
|
var leftPosition = function (props) {
|
|
4459
4463
|
var _a, _b, _c;
|
|
4460
4464
|
var spaces = getSpaces(props);
|
|
4461
4465
|
var iconSizes = getIconSizes(props);
|
|
4462
|
-
return react.css(templateObject_3$
|
|
4466
|
+
return react.css(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\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?.m\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\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\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?.m\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, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionSummaryClasses.expanded, material.accordionDetailsClasses.root, ((_a = spaces === null || spaces === void 0 ? void 0 : spaces.m) !== null && _a !== void 0 ? _a : 12) +
|
|
4463
4467
|
((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
|
|
4464
4468
|
((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
|
|
4465
4469
|
};
|
|
4466
|
-
var templateObject_1$
|
|
4470
|
+
var templateObject_1$16, templateObject_2$J, templateObject_3$A;
|
|
4467
4471
|
|
|
4468
4472
|
/**
|
|
4469
4473
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4479,7 +4483,7 @@ var Accordion = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4479
4483
|
return (jsxRuntime.jsx(StyledAccordion$1, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
|
|
4480
4484
|
});
|
|
4481
4485
|
|
|
4482
|
-
var StyledAlert = styled__default.default(material.Alert)(templateObject_1$
|
|
4486
|
+
var StyledAlert = styled__default.default(material.Alert)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4483
4487
|
var _a;
|
|
4484
4488
|
var colors = getColors(props);
|
|
4485
4489
|
var spaces = getSpaces(props);
|
|
@@ -4506,7 +4510,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4506
4510
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4507
4511
|
}
|
|
4508
4512
|
}
|
|
4509
|
-
var templateObject_1$
|
|
4513
|
+
var templateObject_1$15;
|
|
4510
4514
|
|
|
4511
4515
|
/**
|
|
4512
4516
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4671,11 +4675,10 @@ var ButtonStyles = function (props) {
|
|
|
4671
4675
|
? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
|
|
4672
4676
|
: "none";
|
|
4673
4677
|
fontBody("xs", "semibold");
|
|
4674
|
-
return react.css(templateObject_1$
|
|
4678
|
+
return react.css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\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 background-color: ", ";\n border: none;\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 "])), backgroundColor, boxshadow, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.ornamentPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
|
|
4675
4679
|
};
|
|
4676
|
-
var Rounded = function (
|
|
4677
|
-
|
|
4678
|
-
return react.css(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
4680
|
+
var Rounded = function () {
|
|
4681
|
+
return react.css(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n border-radius: 100px;\n "], ["\n border-radius: 100px;\n "])));
|
|
4679
4682
|
};
|
|
4680
4683
|
var DestructiveButton = function (props) {
|
|
4681
4684
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4694,13 +4697,13 @@ var DestructiveButton = function (props) {
|
|
|
4694
4697
|
var boxshadow = variant === "outlined"
|
|
4695
4698
|
? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
|
|
4696
4699
|
: "none";
|
|
4697
|
-
return react.css(templateObject_3$
|
|
4700
|
+
return react.css(templateObject_3$z || (templateObject_3$z = __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);
|
|
4698
4701
|
};
|
|
4699
4702
|
var StyledButton$3 = styled__default.default(material.Button, {
|
|
4700
4703
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4701
4704
|
})(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4702
4705
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4703
|
-
return react.css(templateObject_4$
|
|
4706
|
+
return react.css(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(), sdsType === "destructive" && DestructiveButton(props));
|
|
4704
4707
|
});
|
|
4705
4708
|
// Minimal Button Styles
|
|
4706
4709
|
var Minimal = function (props) {
|
|
@@ -4709,7 +4712,7 @@ var Minimal = function (props) {
|
|
|
4709
4712
|
var spaces = getSpaces(props);
|
|
4710
4713
|
var iconSizes = getIconSizes(props);
|
|
4711
4714
|
var semanticColors = getSemanticColors(props);
|
|
4712
|
-
return react.css(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n ", "\n\n min-width:
|
|
4715
|
+
return react.css(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "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\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 ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, 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.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.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
4713
4716
|
};
|
|
4714
4717
|
var PrimaryMinimalButton = function (props) {
|
|
4715
4718
|
var _a, _b;
|
|
@@ -4736,12 +4739,12 @@ var StyledButtonLegacy = styled__default.default(material.Button, {
|
|
|
4736
4739
|
var spaces = getSpaces(props);
|
|
4737
4740
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4738
4741
|
});
|
|
4739
|
-
var templateObject_1$
|
|
4742
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$u, templateObject_5$o, templateObject_6$k, templateObject_7$f, templateObject_8$c, templateObject_9$7, templateObject_10$5, templateObject_11$4;
|
|
4740
4743
|
|
|
4741
4744
|
var isDisabled$1 = function (props) {
|
|
4742
4745
|
var _a, _b;
|
|
4743
4746
|
var semanticColors = getSemanticColors(props);
|
|
4744
|
-
return react.css(templateObject_1$
|
|
4747
|
+
return react.css(templateObject_1$13 || (templateObject_1$13 = __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);
|
|
4745
4748
|
};
|
|
4746
4749
|
var primary$2 = function (props) {
|
|
4747
4750
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -4751,12 +4754,12 @@ var primary$2 = function (props) {
|
|
|
4751
4754
|
var secondary$2 = function (props) {
|
|
4752
4755
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4753
4756
|
var semanticColors = getSemanticColors(props);
|
|
4754
|
-
return react.css(templateObject_3$
|
|
4757
|
+
return react.css(templateObject_3$y || (templateObject_3$y = __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);
|
|
4755
4758
|
};
|
|
4756
4759
|
var tertiary = function (props) {
|
|
4757
4760
|
var _a, _b, _c, _d, _e, _f;
|
|
4758
4761
|
var semanticColors = getSemanticColors(props);
|
|
4759
|
-
return react.css(templateObject_4$
|
|
4762
|
+
return react.css(templateObject_4$t || (templateObject_4$t = __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);
|
|
4760
4763
|
};
|
|
4761
4764
|
var small$1 = function (props) {
|
|
4762
4765
|
var sdsType = props.sdsType;
|
|
@@ -4797,7 +4800,7 @@ var StyledButtonIcon = styled__default.default(material.IconButton, {
|
|
|
4797
4800
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4798
4801
|
return react.css(templateObject_8$b || (templateObject_8$b = __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));
|
|
4799
4802
|
});
|
|
4800
|
-
var templateObject_1$
|
|
4803
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$t, templateObject_5$n, templateObject_6$j, templateObject_7$e, templateObject_8$b, templateObject_9$6;
|
|
4801
4804
|
|
|
4802
4805
|
var ButtonIconSizeToSdsIconSize = {
|
|
4803
4806
|
large: "xl",
|
|
@@ -4906,7 +4909,7 @@ var rounded$3 = function (props) {
|
|
|
4906
4909
|
var _a;
|
|
4907
4910
|
var corners = getCorners(props);
|
|
4908
4911
|
var semanticColors = getSemanticColors(props);
|
|
4909
|
-
return react.css(templateObject_1$
|
|
4912
|
+
return react.css(templateObject_1$12 || (templateObject_1$12 = __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.l, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary);
|
|
4910
4913
|
};
|
|
4911
4914
|
var applyIntentColor$2 = function (props, intent) {
|
|
4912
4915
|
var _a, _b, _c, _d;
|
|
@@ -4917,9 +4920,9 @@ var applyIntentColor$2 = function (props, intent) {
|
|
|
4917
4920
|
var disabledStyled$2 = function (props) {
|
|
4918
4921
|
var _a, _b, _c, _d, _e;
|
|
4919
4922
|
var semanticColors = getSemanticColors(props);
|
|
4920
|
-
return react.css(templateObject_3$
|
|
4923
|
+
return react.css(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\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 .", " {\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);
|
|
4921
4924
|
};
|
|
4922
|
-
var StyledLabel$3 = styled__default.default("label")(templateObject_4$
|
|
4925
|
+
var StyledLabel$3 = styled__default.default("label")(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4923
4926
|
var spaces = getSpaces(props);
|
|
4924
4927
|
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 ");
|
|
4925
4928
|
});
|
|
@@ -4928,17 +4931,17 @@ var StyledSearchBase = styled__default.default(material.TextField, {
|
|
|
4928
4931
|
return !doNotForwardProps$C.includes(prop.toString());
|
|
4929
4932
|
},
|
|
4930
4933
|
})(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4931
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
4934
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4932
4935
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4933
4936
|
var spaces = getSpaces(props);
|
|
4934
4937
|
var iconSizes = getIconSizes(props);
|
|
4935
4938
|
var semanticColors = getSemanticColors(props);
|
|
4936
|
-
return react.css(templateObject_5$m || (templateObject_5$m = __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 width: 100%;\n\n .", " {\n padding-right: ", "px;\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 & .", ":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 width: 100%;\n\n .", " {\n padding-right: ", "px;\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 & .", ":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, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (
|
|
4939
|
+
return react.css(templateObject_5$m || (templateObject_5$m = __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 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 & .", ":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 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 & .", ":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, 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, material.buttonBaseClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, material.outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentFocus, material.outlinedInputClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.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));
|
|
4937
4940
|
});
|
|
4938
4941
|
var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4939
|
-
var templateObject_1$
|
|
4942
|
+
var templateObject_1$12, templateObject_2$G, templateObject_3$x, templateObject_4$s, templateObject_5$m, templateObject_6$i, templateObject_7$d;
|
|
4940
4943
|
|
|
4941
|
-
var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$
|
|
4944
|
+
var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4942
4945
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4943
4946
|
var selected = props.selected;
|
|
4944
4947
|
var fontWeights = getFontWeights(props);
|
|
@@ -4955,12 +4958,12 @@ var disabledStyles$2 = function (props) {
|
|
|
4955
4958
|
var semanticColors = getSemanticColors(props);
|
|
4956
4959
|
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 ");
|
|
4957
4960
|
};
|
|
4958
|
-
var TextWrapper = styled__default.default("span")(templateObject_3$
|
|
4961
|
+
var TextWrapper = styled__default.default("span")(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4959
4962
|
var _a;
|
|
4960
4963
|
var semanticColors = getSemanticColors(props);
|
|
4961
4964
|
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 ");
|
|
4962
4965
|
}, disabledStyles$2);
|
|
4963
|
-
var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$
|
|
4966
|
+
var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4964
4967
|
var _a;
|
|
4965
4968
|
var disabled = props.disabled;
|
|
4966
4969
|
var spaces = getSpaces(props);
|
|
@@ -5003,7 +5006,7 @@ var StyledMinus = styled__default.default(iconsMaterial.Remove, {
|
|
|
5003
5006
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
|
|
5004
5007
|
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 ");
|
|
5005
5008
|
});
|
|
5006
|
-
var templateObject_1$
|
|
5009
|
+
var templateObject_1$11, templateObject_2$F, templateObject_3$w, templateObject_4$r, templateObject_5$l, templateObject_6$h, templateObject_7$c, templateObject_8$a;
|
|
5007
5010
|
|
|
5008
5011
|
/**
|
|
5009
5012
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5175,7 +5178,7 @@ var doNotForwardProps$B = [
|
|
|
5175
5178
|
];
|
|
5176
5179
|
var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
|
|
5177
5180
|
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5178
|
-
})(templateObject_1
|
|
5181
|
+
})(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
5179
5182
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5180
5183
|
var search = props.search;
|
|
5181
5184
|
var spaces = getSpaces(props);
|
|
@@ -5196,11 +5199,11 @@ var InputBaseWrapper$1 = styled__default.default("div", {
|
|
|
5196
5199
|
});
|
|
5197
5200
|
var StyledMenuInputSearch$1 = styled__default.default(InputSearch, {
|
|
5198
5201
|
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5199
|
-
})(templateObject_3$
|
|
5202
|
+
})(templateObject_3$v || (templateObject_3$v = __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) {
|
|
5200
5203
|
var search = _a.search;
|
|
5201
5204
|
return (search ? "auto" : "transparent");
|
|
5202
5205
|
});
|
|
5203
|
-
var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$
|
|
5206
|
+
var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5204
5207
|
var _a;
|
|
5205
5208
|
var spaces = getSpaces(props);
|
|
5206
5209
|
var corners = getCorners(props);
|
|
@@ -5215,7 +5218,7 @@ var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$k ||
|
|
|
5215
5218
|
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 ");
|
|
5216
5219
|
});
|
|
5217
5220
|
var StyledMenuItemText = styled__default.default("div")(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5218
|
-
var templateObject_1
|
|
5221
|
+
var templateObject_1$10, templateObject_2$E, templateObject_3$v, templateObject_4$q, templateObject_5$k, templateObject_6$g;
|
|
5219
5222
|
|
|
5220
5223
|
var AutocompleteBase = function (props) {
|
|
5221
5224
|
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;
|
|
@@ -5376,7 +5379,7 @@ var AutocompleteBase = function (props) {
|
|
|
5376
5379
|
}
|
|
5377
5380
|
};
|
|
5378
5381
|
|
|
5379
|
-
var StyledColumn = styled__default.default("div")(templateObject_1
|
|
5382
|
+
var StyledColumn = styled__default.default("div")(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5380
5383
|
var _a;
|
|
5381
5384
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
5382
5385
|
var spaces = getSpaces(props);
|
|
@@ -5389,14 +5392,14 @@ var StyledColumnTitle = styled__default.default("p")(templateObject_2$D || (temp
|
|
|
5389
5392
|
var semanticColors = getSemanticColors(props);
|
|
5390
5393
|
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.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n margin: 0;\n ");
|
|
5391
5394
|
});
|
|
5392
|
-
var StyledColumnIcon = styled__default.default("span")(templateObject_3$
|
|
5395
|
+
var StyledColumnIcon = styled__default.default("span")(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5393
5396
|
var _a, _b;
|
|
5394
5397
|
var spaces = getSpaces(props);
|
|
5395
5398
|
var iconSizes = getIconSizes(props);
|
|
5396
5399
|
var semanticColors = getSemanticColors(props);
|
|
5397
5400
|
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: -2px;\n padding-bottom: 2px;\n\n svg {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, ";\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 ");
|
|
5398
5401
|
});
|
|
5399
|
-
var templateObject_1
|
|
5402
|
+
var templateObject_1$$, templateObject_2$D, templateObject_3$u;
|
|
5400
5403
|
|
|
5401
5404
|
var AutocompleteGroup = function (props) {
|
|
5402
5405
|
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"]);
|
|
@@ -5451,7 +5454,7 @@ var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
|
5451
5454
|
shouldForwardProp: function (prop) {
|
|
5452
5455
|
return !doNotForwardProps$A.includes(prop) || prop === "anchorEl";
|
|
5453
5456
|
},
|
|
5454
|
-
})(templateObject_1$
|
|
5457
|
+
})(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5455
5458
|
var _a;
|
|
5456
5459
|
var corners = getCorners(props);
|
|
5457
5460
|
var shadows = getShadows(props);
|
|
@@ -5468,17 +5471,17 @@ var StyledPaper$2 = styled__default.default(material.Paper, {
|
|
|
5468
5471
|
var semanticColors = getSemanticColors(props);
|
|
5469
5472
|
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 ");
|
|
5470
5473
|
});
|
|
5471
|
-
var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$
|
|
5474
|
+
var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5472
5475
|
var StyledAutocompleteInput = styled__default.default(InputSearch, {
|
|
5473
5476
|
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
5474
|
-
})(templateObject_4$
|
|
5477
|
+
})(templateObject_4$p || (templateObject_4$p = __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) {
|
|
5475
5478
|
var search = _a.search;
|
|
5476
5479
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5477
5480
|
}, function (_a) {
|
|
5478
5481
|
var search = _a.search;
|
|
5479
5482
|
return (search ? "auto" : "transparent");
|
|
5480
5483
|
});
|
|
5481
|
-
var templateObject_1$
|
|
5484
|
+
var templateObject_1$_, templateObject_2$C, templateObject_3$t, templateObject_4$p;
|
|
5482
5485
|
|
|
5483
5486
|
var AutocompleteMultiColumn = function (props) {
|
|
5484
5487
|
var _a;
|
|
@@ -5660,7 +5663,7 @@ var Autocomplete = function (props) {
|
|
|
5660
5663
|
}
|
|
5661
5664
|
};
|
|
5662
5665
|
|
|
5663
|
-
var Centered = styled__default.default("div")(templateObject_1$
|
|
5666
|
+
var Centered = styled__default.default("div")(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
5664
5667
|
var doNotForwardPropsIconWrapper = ["bannerType"];
|
|
5665
5668
|
var IconWrapper$1 = styled__default.default("div", {
|
|
5666
5669
|
shouldForwardProp: function (prop) {
|
|
@@ -5679,7 +5682,7 @@ var StyledButton$2 = styled__default.default(Button, {
|
|
|
5679
5682
|
shouldForwardProp: function (prop) {
|
|
5680
5683
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5681
5684
|
},
|
|
5682
|
-
})(templateObject_3$
|
|
5685
|
+
})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
|
|
5683
5686
|
var _a, _b;
|
|
5684
5687
|
var bannerType = props.bannerType;
|
|
5685
5688
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5687,7 +5690,7 @@ var StyledButton$2 = styled__default.default(Button, {
|
|
|
5687
5690
|
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 ");
|
|
5688
5691
|
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 ");
|
|
5689
5692
|
});
|
|
5690
|
-
styled__default.default("div")(templateObject_4$
|
|
5693
|
+
styled__default.default("div")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5691
5694
|
var primary$1 = function (props) {
|
|
5692
5695
|
var _a, _b;
|
|
5693
5696
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5706,7 +5709,7 @@ var StyledBanner = styled__default.default("div", {
|
|
|
5706
5709
|
var spaces = getSpaces(props);
|
|
5707
5710
|
return "\n display: flex;\n align-items: center;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
|
|
5708
5711
|
});
|
|
5709
|
-
var templateObject_1$
|
|
5712
|
+
var templateObject_1$Z, templateObject_2$B, templateObject_3$s, templateObject_4$o, templateObject_5$j;
|
|
5710
5713
|
|
|
5711
5714
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
5712
5715
|
var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, icon = props.icon, sdsIconProps = props.sdsIconProps, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps"]);
|
|
@@ -5772,13 +5775,13 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5772
5775
|
var doNotForwardProps$y = ["sdsStage"];
|
|
5773
5776
|
var StyledButtonToggle = styled__default.default(ButtonIcon, {
|
|
5774
5777
|
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
5775
|
-
})(templateObject_1$
|
|
5778
|
+
})(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5776
5779
|
var _a;
|
|
5777
5780
|
var sdsStage = props.sdsStage;
|
|
5778
5781
|
var semanticColors = getSemanticColors(props);
|
|
5779
5782
|
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 ");
|
|
5780
5783
|
});
|
|
5781
|
-
var templateObject_1$
|
|
5784
|
+
var templateObject_1$Y;
|
|
5782
5785
|
|
|
5783
5786
|
/**
|
|
5784
5787
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -5803,7 +5806,7 @@ var doNotForwardProps$x = [
|
|
|
5803
5806
|
];
|
|
5804
5807
|
var StyledCallout = styled__default.default(material.Alert, {
|
|
5805
5808
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
5806
|
-
})(templateObject_1$
|
|
5809
|
+
})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5807
5810
|
var _a, _b, _c, _d, _e;
|
|
5808
5811
|
var _f = props.intent, intent = _f === void 0 ? "info" : _f, sdsStyle = props.sdsStyle, hideBody = props.hideBody, collapsed = props.collapsed;
|
|
5809
5812
|
var spaces = getSpaces(props);
|
|
@@ -5815,12 +5818,12 @@ var StyledCallout = styled__default.default(material.Alert, {
|
|
|
5815
5818
|
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";
|
|
5816
5819
|
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.m, "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 height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "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 ");
|
|
5817
5820
|
});
|
|
5818
|
-
var templateObject_1$
|
|
5821
|
+
var templateObject_1$X;
|
|
5819
5822
|
|
|
5820
5823
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5821
5824
|
|
|
5822
|
-
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$
|
|
5823
|
-
var templateObject_1$
|
|
5825
|
+
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n margin: 0;\n"], ["\n ", "\n margin: 0;\n"])), fontBodySemiboldXs);
|
|
5826
|
+
var templateObject_1$W;
|
|
5824
5827
|
|
|
5825
5828
|
var CalloutTitle = function (_a) {
|
|
5826
5829
|
var children = _a.children;
|
|
@@ -5829,24 +5832,24 @@ var CalloutTitle = function (_a) {
|
|
|
5829
5832
|
// Display name required to ensure Callout expand works correctly.
|
|
5830
5833
|
CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
|
|
5831
5834
|
|
|
5832
|
-
var StyledCalloutBody = styled__default.default("p")(templateObject_1$
|
|
5835
|
+
var StyledCalloutBody = styled__default.default("p")(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5833
5836
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a;
|
|
5834
5837
|
var spaces = getSpaces(props);
|
|
5835
5838
|
return "\n margin: ".concat(!hideTitle ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0 0;\n ");
|
|
5836
5839
|
});
|
|
5837
|
-
var templateObject_1$
|
|
5840
|
+
var templateObject_1$V;
|
|
5838
5841
|
|
|
5839
5842
|
var CalloutBody = function (_a) {
|
|
5840
5843
|
var children = _a.children, hideTitle = _a.hideTitle;
|
|
5841
5844
|
return (jsxRuntime.jsx(StyledCalloutBody, { hideTitle: hideTitle, children: children }));
|
|
5842
5845
|
};
|
|
5843
5846
|
|
|
5844
|
-
var StyledCalloutExtraContent = styled__default.default("div")(templateObject_1$
|
|
5847
|
+
var StyledCalloutExtraContent = styled__default.default("div")(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5845
5848
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a, _b = props.hideBody, hideBody = _b === void 0 ? false : _b;
|
|
5846
5849
|
var spaces = getSpaces(props);
|
|
5847
5850
|
return "\n margin: ".concat(hideTitle && hideBody ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0 0;\n ");
|
|
5848
5851
|
});
|
|
5849
|
-
var templateObject_1$
|
|
5852
|
+
var templateObject_1$U;
|
|
5850
5853
|
|
|
5851
5854
|
var CalloutExtraContent = function (_a) {
|
|
5852
5855
|
var children = _a.children, hideTitle = _a.hideTitle, hideBody = _a.hideBody;
|
|
@@ -5915,7 +5918,7 @@ var dark$1 = function (props) {
|
|
|
5915
5918
|
var _a, _b;
|
|
5916
5919
|
var spaces = getSpaces(props);
|
|
5917
5920
|
var semanticColors = getSemanticColors(props);
|
|
5918
|
-
return css.css(templateObject_1$
|
|
5921
|
+
return css.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5919
5922
|
};
|
|
5920
5923
|
var light$1 = function (props) {
|
|
5921
5924
|
var _a, _b;
|
|
@@ -5924,11 +5927,11 @@ var light$1 = function (props) {
|
|
|
5924
5927
|
return css.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\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.l);
|
|
5925
5928
|
};
|
|
5926
5929
|
var wide = function () {
|
|
5927
|
-
return css.css(templateObject_3$
|
|
5930
|
+
return css.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
|
|
5928
5931
|
};
|
|
5929
5932
|
var tableStyles = function (props) {
|
|
5930
5933
|
var spaces = getSpaces(props);
|
|
5931
|
-
return css.css(templateObject_4$
|
|
5934
|
+
return css.css(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5932
5935
|
};
|
|
5933
5936
|
var doNotForwardProps$w = ["hasInvertedStyle"];
|
|
5934
5937
|
var Subtitle$1 = styled__default.default("div", {
|
|
@@ -5959,7 +5962,7 @@ var arrowCss = function (props) {
|
|
|
5959
5962
|
* default placement which is calculated by javascript
|
|
5960
5963
|
*/
|
|
5961
5964
|
var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$9 || (templateObject_8$9 = __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"])));
|
|
5962
|
-
var templateObject_1$
|
|
5965
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$9;
|
|
5963
5966
|
|
|
5964
5967
|
/**
|
|
5965
5968
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -6065,7 +6068,7 @@ var verticalAlignToFlexMap = {
|
|
|
6065
6068
|
};
|
|
6066
6069
|
var StyledTableData = styled__default.default("td", {
|
|
6067
6070
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6068
|
-
})(templateObject_1$
|
|
6071
|
+
})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6069
6072
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6070
6073
|
var spaces = getSpaces(props);
|
|
6071
6074
|
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 ");
|
|
@@ -6077,10 +6080,10 @@ var ShouldTruncate = function () {
|
|
|
6077
6080
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
|
|
6078
6081
|
};
|
|
6079
6082
|
var StyledCellContent = styled__default.default("div")(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6080
|
-
var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$
|
|
6083
|
+
var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
6081
6084
|
var StyledCellIconWrapper = styled__default.default("div", {
|
|
6082
6085
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6083
|
-
})(templateObject_4$
|
|
6086
|
+
})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6084
6087
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
6085
6088
|
var spaces = getSpaces(props);
|
|
6086
6089
|
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 ");
|
|
@@ -6127,7 +6130,7 @@ var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templa
|
|
|
6127
6130
|
var spaces = getSpaces(props);
|
|
6128
6131
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6129
6132
|
});
|
|
6130
|
-
var templateObject_1$
|
|
6133
|
+
var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$8, templateObject_9$5, templateObject_10$4;
|
|
6131
6134
|
|
|
6132
6135
|
var CellBasicContent = function (props) {
|
|
6133
6136
|
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;
|
|
@@ -6144,12 +6147,12 @@ var CellBasic = React.forwardRef(function (props, ref) {
|
|
|
6144
6147
|
var doNotForwardProps$u = ["horizontalAlign", "verticalAlign"];
|
|
6145
6148
|
var StyledCellComponentData = styled__default.default("td", {
|
|
6146
6149
|
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6147
|
-
})(templateObject_1$
|
|
6150
|
+
})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6148
6151
|
var spaces = getSpaces(props);
|
|
6149
6152
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6150
6153
|
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 ");
|
|
6151
6154
|
});
|
|
6152
|
-
var templateObject_1$
|
|
6155
|
+
var templateObject_1$R;
|
|
6153
6156
|
|
|
6154
6157
|
var CellComponent = React.forwardRef(function (props, _) {
|
|
6155
6158
|
var children = props.children;
|
|
@@ -6172,7 +6175,7 @@ var doNotForwardProps$t = [
|
|
|
6172
6175
|
];
|
|
6173
6176
|
var StyledSortingIcon = styled__default.default(Icon, {
|
|
6174
6177
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6175
|
-
})(templateObject_1$
|
|
6178
|
+
})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6176
6179
|
var _a;
|
|
6177
6180
|
var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
|
|
6178
6181
|
var spaces = getSpaces(props);
|
|
@@ -6196,11 +6199,11 @@ var StyledTableHeader$1 = styled__default.default("th", {
|
|
|
6196
6199
|
});
|
|
6197
6200
|
var StyledCellHeaderContainer = styled__default.default("div", {
|
|
6198
6201
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6199
|
-
})(templateObject_3$
|
|
6202
|
+
})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6200
6203
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
6201
6204
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
6202
6205
|
});
|
|
6203
|
-
var templateObject_1$
|
|
6206
|
+
var templateObject_1$Q, templateObject_2$y, templateObject_3$p;
|
|
6204
6207
|
|
|
6205
6208
|
var CellHeaderContent = function (props) {
|
|
6206
6209
|
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;
|
|
@@ -6220,7 +6223,7 @@ var CellHeader = React.forwardRef(function (props, ref) {
|
|
|
6220
6223
|
|
|
6221
6224
|
var small = function (props) {
|
|
6222
6225
|
var spaces = getSpaces(props);
|
|
6223
|
-
return react.css(templateObject_1$
|
|
6226
|
+
return react.css(templateObject_1$P || (templateObject_1$P = __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));
|
|
6224
6227
|
};
|
|
6225
6228
|
var medium = function (props) {
|
|
6226
6229
|
var spaces = getSpaces(props);
|
|
@@ -6229,11 +6232,11 @@ var medium = function (props) {
|
|
|
6229
6232
|
};
|
|
6230
6233
|
var rounded$2 = function (props) {
|
|
6231
6234
|
var corners = getCorners(props);
|
|
6232
|
-
return react.css(templateObject_3$
|
|
6235
|
+
return react.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6233
6236
|
};
|
|
6234
6237
|
var square$2 = function (props) {
|
|
6235
6238
|
var corners = getCorners(props);
|
|
6236
|
-
return react.css(templateObject_4$
|
|
6239
|
+
return react.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6237
6240
|
};
|
|
6238
6241
|
var success = function (props) {
|
|
6239
6242
|
return createStatusCss(props, "success");
|
|
@@ -6303,7 +6306,7 @@ var StyledChip = styled__default.default(material.Chip, {
|
|
|
6303
6306
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6304
6307
|
return react.css(templateObject_6$d || (templateObject_6$d = __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));
|
|
6305
6308
|
});
|
|
6306
|
-
var templateObject_1$
|
|
6309
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$9;
|
|
6307
6310
|
|
|
6308
6311
|
/**
|
|
6309
6312
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6336,7 +6339,7 @@ var doNotForwardProps$r = [
|
|
|
6336
6339
|
];
|
|
6337
6340
|
var StyledHeaderTitle = styled__default.default("div", {
|
|
6338
6341
|
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6339
|
-
})(templateObject_1$
|
|
6342
|
+
})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
6340
6343
|
var _a;
|
|
6341
6344
|
var spaces = getSpaces(props);
|
|
6342
6345
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6347,7 +6350,7 @@ var StyledPopper = styled__default.default(material.Popper, {
|
|
|
6347
6350
|
shouldForwardProp: function (prop) {
|
|
6348
6351
|
return !doNotForwardProps$r.includes(prop) || prop === "anchorEl";
|
|
6349
6352
|
},
|
|
6350
|
-
})(templateObject_3$
|
|
6353
|
+
})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6351
6354
|
var _a;
|
|
6352
6355
|
var borders = getBorders(props);
|
|
6353
6356
|
var corners = getCorners(props);
|
|
@@ -6357,7 +6360,7 @@ var StyledPopper = styled__default.default(material.Popper, {
|
|
|
6357
6360
|
});
|
|
6358
6361
|
var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
6359
6362
|
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6360
|
-
})(templateObject_4$
|
|
6363
|
+
})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6361
6364
|
var _a;
|
|
6362
6365
|
var spaces = getSpaces(props);
|
|
6363
6366
|
var borders = getBorders(props);
|
|
@@ -6370,7 +6373,7 @@ var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$f
|
|
|
6370
6373
|
var spaces = getSpaces(props);
|
|
6371
6374
|
return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
6372
6375
|
});
|
|
6373
|
-
var templateObject_1$
|
|
6376
|
+
var templateObject_1$O, templateObject_2$w, templateObject_3$n, templateObject_4$k, templateObject_5$f;
|
|
6374
6377
|
|
|
6375
6378
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
6376
6379
|
// for the dropdownMenu's popper component
|
|
@@ -6436,21 +6439,21 @@ var inputDropdownStyles = function (props) {
|
|
|
6436
6439
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
6437
6440
|
*/
|
|
6438
6441
|
var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
|
|
6439
|
-
return react.css(templateObject_1$
|
|
6442
|
+
return react.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\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: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.hover, (_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 = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_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);
|
|
6440
6443
|
};
|
|
6441
6444
|
var minimal$1 = function (props) {
|
|
6442
6445
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6443
6446
|
var spaces = getSpaces(props);
|
|
6444
6447
|
var semanticColors = getSemanticColors(props);
|
|
6445
|
-
return react.css(templateObject_2$v || (templateObject_2$v = __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 background-color: transparent;\n
|
|
6448
|
+
return react.css(templateObject_2$v || (templateObject_2$v = __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 background-color: transparent;\n min-width: fit-content;\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\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 &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\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 background-color: transparent;\n min-width: fit-content;\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\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 &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, 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, (_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, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
6446
6449
|
};
|
|
6447
6450
|
var square$1 = function (props) {
|
|
6448
6451
|
var corners = getCorners(props);
|
|
6449
|
-
return react.css(templateObject_3$
|
|
6452
|
+
return react.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: fit-content;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: fit-content;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6450
6453
|
};
|
|
6451
6454
|
var rounded$1 = function (props) {
|
|
6452
6455
|
var corners = getCorners(props);
|
|
6453
|
-
return react.css(templateObject_4$
|
|
6456
|
+
return react.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: fit-content;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: fit-content;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6454
6457
|
};
|
|
6455
6458
|
var userInput = function (props) {
|
|
6456
6459
|
var _a, _b, _c, _d;
|
|
@@ -6561,7 +6564,7 @@ function labelStyle(props) {
|
|
|
6561
6564
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6562
6565
|
return react.css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
|
|
6563
6566
|
}
|
|
6564
|
-
var templateObject_1$
|
|
6567
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$8, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2;
|
|
6565
6568
|
|
|
6566
6569
|
/**
|
|
6567
6570
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -6628,7 +6631,7 @@ var tagSizeS = function (props) {
|
|
|
6628
6631
|
var spaces = getSpaces(props);
|
|
6629
6632
|
var iconSizes = getIconSizes(props);
|
|
6630
6633
|
var semanticColors = getSemanticColors(props);
|
|
6631
|
-
return react.css(templateObject_1$
|
|
6634
|
+
return react.css(templateObject_1$M || (templateObject_1$M = __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);
|
|
6632
6635
|
};
|
|
6633
6636
|
var tagSizeL = function (props) {
|
|
6634
6637
|
var _a;
|
|
@@ -6642,14 +6645,14 @@ var rounded = function (props) {
|
|
|
6642
6645
|
var spaces = getSpaces(props);
|
|
6643
6646
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6644
6647
|
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;
|
|
6645
|
-
return react.css(templateObject_3$
|
|
6648
|
+
return react.css(templateObject_3$l || (templateObject_3$l = __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.l, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6646
6649
|
};
|
|
6647
6650
|
var square = function (props) {
|
|
6648
6651
|
var corners = getCorners(props);
|
|
6649
6652
|
var spaces = getSpaces(props);
|
|
6650
6653
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6651
6654
|
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;
|
|
6652
|
-
return react.css(templateObject_4$
|
|
6655
|
+
return react.css(templateObject_4$i || (templateObject_4$i = __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);
|
|
6653
6656
|
};
|
|
6654
6657
|
var withHover = function (props) {
|
|
6655
6658
|
var _a;
|
|
@@ -6744,7 +6747,7 @@ var StyledTag$2 = styled__default.default(material.Chip, {
|
|
|
6744
6747
|
var type = sdsType || "primary";
|
|
6745
6748
|
return react.css(templateObject_7$7 || (templateObject_7$7 = __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;");
|
|
6746
6749
|
});
|
|
6747
|
-
var templateObject_1$
|
|
6750
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$7, templateObject_8$6;
|
|
6748
6751
|
|
|
6749
6752
|
/**
|
|
6750
6753
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6763,9 +6766,9 @@ var StyledTag$1 = styled__default.default(Tag)(templateObject_2$t || (templateOb
|
|
|
6763
6766
|
var spaces = getSpaces(props);
|
|
6764
6767
|
var iconSizes = getIconSizes(props);
|
|
6765
6768
|
var semanticColors = getSemanticColors(props);
|
|
6766
|
-
return react.css(templateObject_1$
|
|
6769
|
+
return react.css(templateObject_1$L || (templateObject_1$L = __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);
|
|
6767
6770
|
});
|
|
6768
|
-
var templateObject_1$
|
|
6771
|
+
var templateObject_1$L, templateObject_2$t;
|
|
6769
6772
|
|
|
6770
6773
|
/**
|
|
6771
6774
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6788,12 +6791,12 @@ var Chips = function (_a) {
|
|
|
6788
6791
|
}) }));
|
|
6789
6792
|
};
|
|
6790
6793
|
|
|
6791
|
-
var Wrapper$1 = styled__default.default("div")(templateObject_1$
|
|
6794
|
+
var Wrapper$1 = styled__default.default("div")(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
|
|
6792
6795
|
var StyledChipsWrapper = styled__default.default("div")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6793
6796
|
var spaces = getSpaces(props);
|
|
6794
6797
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
6795
6798
|
});
|
|
6796
|
-
var templateObject_1$
|
|
6799
|
+
var templateObject_1$K, templateObject_2$s;
|
|
6797
6800
|
|
|
6798
6801
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6799
6802
|
var ComplexFilter = function (_a) {
|
|
@@ -6921,9 +6924,9 @@ var StyledCard = styled__default.default(material.Card, {
|
|
|
6921
6924
|
var showDecorativeBorder = visualElementType === "image"
|
|
6922
6925
|
? boundingBox && decorativeBorder && imagePadding
|
|
6923
6926
|
: boundingBox && decorativeBorder;
|
|
6924
|
-
return react.css(templateObject_4$
|
|
6927
|
+
return react.css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: visible;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: visible;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, boundingBox && react.css(templateObject_1$J || (templateObject_1$J = __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" &&
|
|
6925
6928
|
showDecorativeBorder && react.css(templateObject_2$r || (templateObject_2$r = __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" &&
|
|
6926
|
-
showDecorativeBorder && react.css(templateObject_3$
|
|
6929
|
+
showDecorativeBorder && react.css(templateObject_3$k || (templateObject_3$k = __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));
|
|
6927
6930
|
});
|
|
6928
6931
|
var StyledCardActionArea = styled__default.default(Button, {
|
|
6929
6932
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
@@ -6939,7 +6942,7 @@ var StyledCardActionArea = styled__default.default(Button, {
|
|
|
6939
6942
|
: visualElementType === "image"
|
|
6940
6943
|
? "column"
|
|
6941
6944
|
: "row";
|
|
6942
|
-
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 100%;\n padding: 0;\n margin: 0;\n overflow:
|
|
6945
|
+
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n height: 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 box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, " !important;\n }\n ");
|
|
6943
6946
|
});
|
|
6944
6947
|
var StyledIconMediaWrapper = styled__default.default("div", {
|
|
6945
6948
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
@@ -6954,7 +6957,7 @@ var StyledCardContent = styled__default.default("div", {
|
|
|
6954
6957
|
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6955
6958
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
6956
6959
|
var spaces = getSpaces(props);
|
|
6957
|
-
return react.css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n\n ", "\n "])), boundingBox && react.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6960
|
+
return react.css(templateObject_12$2 || (templateObject_12$2 = __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$2 || (templateObject_11$2 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6958
6961
|
});
|
|
6959
6962
|
var StyledContentCardBody = styled__default.default(material.CardContent, {
|
|
6960
6963
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
@@ -6965,7 +6968,7 @@ var StyledContentCardBody = styled__default.default(material.CardContent, {
|
|
|
6965
6968
|
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 ");
|
|
6966
6969
|
});
|
|
6967
6970
|
var StyledCardContentAligner = styled__default.default("div")(templateObject_15$2 || (templateObject_15$2 = __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"])));
|
|
6968
|
-
var templateObject_1$
|
|
6971
|
+
var templateObject_1$J, templateObject_2$r, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2;
|
|
6969
6972
|
|
|
6970
6973
|
var doNotForwardProps$n = [
|
|
6971
6974
|
"visualElement",
|
|
@@ -6980,7 +6983,7 @@ var doNotForwardProps$n = [
|
|
|
6980
6983
|
];
|
|
6981
6984
|
var StyledTitleWrapper = material.styled("div", {
|
|
6982
6985
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6983
|
-
})(templateObject_1$
|
|
6986
|
+
})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6984
6987
|
var spaces = getSpaces(props);
|
|
6985
6988
|
return "\n display: flex;\n flex-direction: column;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6986
6989
|
});
|
|
@@ -6993,14 +6996,14 @@ var StyledOverlineText = material.styled("p", {
|
|
|
6993
6996
|
});
|
|
6994
6997
|
var StyledTitleText = material.styled("p", {
|
|
6995
6998
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6996
|
-
})(templateObject_3$
|
|
6999
|
+
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderXl, function (props) {
|
|
6997
7000
|
var _a;
|
|
6998
7001
|
var semanticColors = getSemanticColors(props);
|
|
6999
7002
|
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 ");
|
|
7000
7003
|
});
|
|
7001
7004
|
var StyledSubtitleText = material.styled("p", {
|
|
7002
7005
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
7003
|
-
})(templateObject_4$
|
|
7006
|
+
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
|
|
7004
7007
|
var _a;
|
|
7005
7008
|
var semanticColors = getSemanticColors(props);
|
|
7006
7009
|
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 ");
|
|
@@ -7013,7 +7016,7 @@ var StyledMetadataText = material.styled("p", {
|
|
|
7013
7016
|
var spaces = getSpaces(props);
|
|
7014
7017
|
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 ");
|
|
7015
7018
|
});
|
|
7016
|
-
var templateObject_1$
|
|
7019
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$j, templateObject_4$g, templateObject_5$b;
|
|
7017
7020
|
|
|
7018
7021
|
/**
|
|
7019
7022
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7027,12 +7030,12 @@ var ContentCardTitle = React.forwardRef(function ContentCardTitle(props, ref) {
|
|
|
7027
7030
|
var doNotForwardProps$m = ["buttonsPosition"];
|
|
7028
7031
|
var StyledCardActions = styled__default.default(material.CardActions, {
|
|
7029
7032
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7030
|
-
})(templateObject_1$
|
|
7033
|
+
})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7031
7034
|
var _a = props.buttonsPosition, buttonsPosition = _a === void 0 ? "left" : _a;
|
|
7032
7035
|
var spaces = getSpaces(props);
|
|
7033
7036
|
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 ");
|
|
7034
7037
|
});
|
|
7035
|
-
var templateObject_1$
|
|
7038
|
+
var templateObject_1$H;
|
|
7036
7039
|
|
|
7037
7040
|
var isButtonElement = function (child) {
|
|
7038
7041
|
if (React__namespace.default.isValidElement(child) && child.type === Button) {
|
|
@@ -7098,17 +7101,17 @@ var StyledImageMediaWrapper = material.styled("div", {
|
|
|
7098
7101
|
var spaces = getSpaces(props);
|
|
7099
7102
|
return material.css(templateObject_8$4 || (templateObject_8$4 = __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
|
|
7100
7103
|
? imagePadding
|
|
7101
|
-
? material.css(templateObject_1$
|
|
7104
|
+
? material.css(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n padding: ", "px;\n ", "\n "], ["\n padding: ", "px;\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, imagePosition === "left"
|
|
7102
7105
|
? "padding-right: 0;"
|
|
7103
7106
|
: "padding-left: 0;") : material.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7104
|
-
: material.css(templateObject_3$
|
|
7107
|
+
: material.css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
|
|
7105
7108
|
? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
|
|
7106
7109
|
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
|
|
7107
7110
|
? imagePadding
|
|
7108
|
-
? material.css(templateObject_4$
|
|
7111
|
+
? material.css(templateObject_4$f || (templateObject_4$f = __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$a || (templateObject_5$a = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7109
7112
|
: material.css(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n padding-bottom: ", "px;\n "], ["\n padding-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl)));
|
|
7110
7113
|
});
|
|
7111
|
-
var templateObject_1$
|
|
7114
|
+
var templateObject_1$G, templateObject_2$p, templateObject_3$i, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2;
|
|
7112
7115
|
|
|
7113
7116
|
/**
|
|
7114
7117
|
* @see https://mui.com/material-ui/api/card-media/
|
|
@@ -7211,7 +7214,11 @@ var ContentCard = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
7211
7214
|
} }), jsxRuntime.jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition, {
|
|
7212
7215
|
cardActions: cardActions,
|
|
7213
7216
|
}) })] })] }));
|
|
7214
|
-
return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, __assign({
|
|
7217
|
+
return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, __assign({}, clickableCardProps, {
|
|
7218
|
+
// (masoudmanson): The following props are for internal use only and should not be user editable.
|
|
7219
|
+
// To prevent users from overriding them, we use the spread operator to pass user provided props
|
|
7220
|
+
// to the StyledCardActionArea component on top while hardcoding the rest after it.
|
|
7221
|
+
sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton, children: cardInnerContent }))) : (cardInnerContent) })));
|
|
7215
7222
|
});
|
|
7216
7223
|
|
|
7217
7224
|
var DialogContext = React.createContext({ sdsSize: "m" });
|
|
@@ -7220,7 +7227,7 @@ var DialogContext = React.createContext({ sdsSize: "m" });
|
|
|
7220
7227
|
var doNotForwardProps$k = ["sdsSize"];
|
|
7221
7228
|
var StyledPaper = styled__default.default(material.Paper, {
|
|
7222
7229
|
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7223
|
-
})(templateObject_1$
|
|
7230
|
+
})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
|
|
7224
7231
|
var _a;
|
|
7225
7232
|
var spaces = getSpaces(props);
|
|
7226
7233
|
var corners = getCorners(props);
|
|
@@ -7251,7 +7258,7 @@ function paperDimensions(props) {
|
|
|
7251
7258
|
var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
|
|
7252
7259
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
7253
7260
|
}
|
|
7254
|
-
var templateObject_1$
|
|
7261
|
+
var templateObject_1$F;
|
|
7255
7262
|
|
|
7256
7263
|
/**
|
|
7257
7264
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -7283,12 +7290,12 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
|
7283
7290
|
var doNotForwardProps$j = ["buttonPosition"];
|
|
7284
7291
|
var StyledDialogActions = styled__default.default(material.DialogActions, {
|
|
7285
7292
|
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7286
|
-
})(templateObject_1$
|
|
7293
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
7287
7294
|
var spaces = getSpaces(props);
|
|
7288
7295
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
7289
7296
|
return "\n justify-content: ".concat(buttonPosition === "right" ? "flex-end" : "flex-start", ";;\n\n margin-top: ").concat(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 ");
|
|
7290
7297
|
});
|
|
7291
|
-
var templateObject_1$
|
|
7298
|
+
var templateObject_1$E;
|
|
7292
7299
|
|
|
7293
7300
|
/**
|
|
7294
7301
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7297,8 +7304,8 @@ var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
|
|
7297
7304
|
return jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref }, props));
|
|
7298
7305
|
});
|
|
7299
7306
|
|
|
7300
|
-
var StyledDialogContent = styled__default.default(material.DialogContent)(templateObject_1$
|
|
7301
|
-
var templateObject_1$
|
|
7307
|
+
var StyledDialogContent = styled__default.default(material.DialogContent)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
7308
|
+
var templateObject_1$D;
|
|
7302
7309
|
|
|
7303
7310
|
var index = React.forwardRef(
|
|
7304
7311
|
/**
|
|
@@ -7308,11 +7315,11 @@ function DialogContent(props, ref) {
|
|
|
7308
7315
|
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
7309
7316
|
});
|
|
7310
7317
|
|
|
7311
|
-
var StyledButton$1 = styled__default.default(Button)(templateObject_1$
|
|
7318
|
+
var StyledButton$1 = styled__default.default(Button)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
7312
7319
|
var spaces = getSpaces(props);
|
|
7313
7320
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
7314
7321
|
});
|
|
7315
|
-
var templateObject_1$
|
|
7322
|
+
var templateObject_1$C;
|
|
7316
7323
|
|
|
7317
7324
|
var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
7318
7325
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
@@ -7328,7 +7335,7 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
7328
7335
|
} }));
|
|
7329
7336
|
});
|
|
7330
7337
|
|
|
7331
|
-
var StyledDialogTitle = styled__default.default(material.DialogTitle)(templateObject_1$
|
|
7338
|
+
var StyledDialogTitle = styled__default.default(material.DialogTitle)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n padding: 0;\n ", "\n"], ["\n padding: 0;\n ", "\n"])), function (props) {
|
|
7332
7339
|
var spaces = getSpaces(props);
|
|
7333
7340
|
return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
|
|
7334
7341
|
});
|
|
@@ -7337,18 +7344,18 @@ var Title = styled__default.default(material.Typography)(templateObject_2$o || (
|
|
|
7337
7344
|
var semanticColors = getSemanticColors(props);
|
|
7338
7345
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
|
|
7339
7346
|
});
|
|
7340
|
-
var Subtitle = styled__default.default(material.Typography)(templateObject_3$
|
|
7347
|
+
var Subtitle = styled__default.default(material.Typography)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7341
7348
|
var _a;
|
|
7342
7349
|
var semanticColors = getSemanticColors(props);
|
|
7343
7350
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
7344
7351
|
});
|
|
7345
|
-
var Overline = styled__default.default(material.Typography)(templateObject_4$
|
|
7352
|
+
var Overline = styled__default.default(material.Typography)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7346
7353
|
var _a;
|
|
7347
7354
|
var semanticColors = getSemanticColors(props);
|
|
7348
7355
|
var spaces = getSpaces(props);
|
|
7349
7356
|
return "\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 ");
|
|
7350
7357
|
});
|
|
7351
|
-
var templateObject_1$
|
|
7358
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$h, templateObject_4$e;
|
|
7352
7359
|
|
|
7353
7360
|
/**
|
|
7354
7361
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7361,7 +7368,7 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
|
7361
7368
|
var doNotForwardProps$i = ["buttonPosition"];
|
|
7362
7369
|
var StyledButtonsWrapper = styled__default.default("div", {
|
|
7363
7370
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7364
|
-
})(templateObject_1$
|
|
7371
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7365
7372
|
var buttonPosition = props.buttonPosition;
|
|
7366
7373
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
7367
7374
|
});
|
|
@@ -7371,7 +7378,7 @@ var StyledButton = styled__default.default(Button, {
|
|
|
7371
7378
|
var spaces = getSpaces(props);
|
|
7372
7379
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
7373
7380
|
});
|
|
7374
|
-
var templateObject_1$
|
|
7381
|
+
var templateObject_1$A, templateObject_2$n;
|
|
7375
7382
|
|
|
7376
7383
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
7377
7384
|
var Dropdown = function (props) {
|
|
@@ -7507,7 +7514,7 @@ var intentToColor$1 = {
|
|
|
7507
7514
|
notice: "notice",
|
|
7508
7515
|
positive: "positive",
|
|
7509
7516
|
};
|
|
7510
|
-
var StyledIcon = styled__default.default(Icon)(templateObject_1$
|
|
7517
|
+
var StyledIcon = styled__default.default(Icon)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7511
7518
|
var iconSizes = getIconSizes(props);
|
|
7512
7519
|
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 ");
|
|
7513
7520
|
});
|
|
@@ -7519,13 +7526,13 @@ var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2
|
|
|
7519
7526
|
var borderColor = intentToColor$1[intent];
|
|
7520
7527
|
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 ");
|
|
7521
7528
|
});
|
|
7522
|
-
var StyledCheckboxCheckedIcon = styled__default.default("div")(templateObject_3$
|
|
7529
|
+
var StyledCheckboxCheckedIcon = styled__default.default("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7523
7530
|
var _a, _b;
|
|
7524
7531
|
var iconSizes = getIconSizes(props);
|
|
7525
7532
|
var semanticColors = getSemanticColors(props);
|
|
7526
|
-
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.
|
|
7533
|
+
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\n &:hover {\n background-color: red;\n }\n ");
|
|
7527
7534
|
});
|
|
7528
|
-
var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_4$
|
|
7535
|
+
var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7529
7536
|
var spaces = getSpaces(props);
|
|
7530
7537
|
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 ");
|
|
7531
7538
|
});
|
|
@@ -7553,7 +7560,7 @@ var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel
|
|
|
7553
7560
|
var borders = getBorders(props);
|
|
7554
7561
|
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 }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n\n &:active {\n ").concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, ";\n }\n }\n\n ").concat(disabled && disabledStyles$1(props), "\n ");
|
|
7555
7562
|
});
|
|
7556
|
-
var templateObject_1$
|
|
7563
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$4, templateObject_8$3;
|
|
7557
7564
|
|
|
7558
7565
|
/**
|
|
7559
7566
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -7588,7 +7595,7 @@ var intentToColor = {
|
|
|
7588
7595
|
notice: "notice",
|
|
7589
7596
|
positive: "positive",
|
|
7590
7597
|
};
|
|
7591
|
-
var StyledRadioDot = styled__default.default("span")(templateObject_1$
|
|
7598
|
+
var StyledRadioDot = styled__default.default("span")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7592
7599
|
var _a;
|
|
7593
7600
|
var semanticColors = getSemanticColors(props);
|
|
7594
7601
|
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 ");
|
|
@@ -7601,13 +7608,13 @@ var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$l
|
|
|
7601
7608
|
var borderColor = intentToColor[intent];
|
|
7602
7609
|
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 ");
|
|
7603
7610
|
});
|
|
7604
|
-
var StyledRadioCheckedIcon = styled__default.default("div")(templateObject_3$
|
|
7611
|
+
var StyledRadioCheckedIcon = styled__default.default("div")(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7605
7612
|
var _a;
|
|
7606
7613
|
var iconSizes = getIconSizes(props);
|
|
7607
7614
|
var semanticColors = getSemanticColors(props);
|
|
7608
7615
|
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 ");
|
|
7609
7616
|
});
|
|
7610
|
-
var StyledRadioButton = styled__default.default(material.Radio)(templateObject_4$
|
|
7617
|
+
var StyledRadioButton = styled__default.default(material.Radio)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7611
7618
|
var spaces = getSpaces(props);
|
|
7612
7619
|
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 ");
|
|
7613
7620
|
});
|
|
@@ -7633,7 +7640,7 @@ var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(
|
|
|
7633
7640
|
var semanticColors = getSemanticColors(props);
|
|
7634
7641
|
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 }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n\n &:active {\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryPressed, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, ";\n }\n }\n\n ").concat(disabled && disabledStyles(props), "\n ");
|
|
7635
7642
|
});
|
|
7636
|
-
var templateObject_1$
|
|
7643
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$3, templateObject_8$2;
|
|
7637
7644
|
|
|
7638
7645
|
/**
|
|
7639
7646
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -7679,11 +7686,11 @@ var disabledSlider = function (props) {
|
|
|
7679
7686
|
var semanticColors = getSemanticColors(props);
|
|
7680
7687
|
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 ");
|
|
7681
7688
|
};
|
|
7682
|
-
var StyledSlider = styled__default.default(material.Slider)(templateObject_1$
|
|
7689
|
+
var StyledSlider = styled__default.default(material.Slider)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7683
7690
|
var disabled = props.disabled;
|
|
7684
7691
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
7685
7692
|
});
|
|
7686
|
-
var templateObject_1$
|
|
7693
|
+
var templateObject_1$x;
|
|
7687
7694
|
|
|
7688
7695
|
/**
|
|
7689
7696
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -7698,7 +7705,7 @@ var applyIntentColor = function (props, intent) {
|
|
|
7698
7705
|
var _a, _b, _c, _d;
|
|
7699
7706
|
var borders = getBorders(props);
|
|
7700
7707
|
var semanticColors = getSemanticColors(props);
|
|
7701
|
-
return react.css(templateObject_1$
|
|
7708
|
+
return react.css(templateObject_1$w || (templateObject_1$w = __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);
|
|
7702
7709
|
};
|
|
7703
7710
|
var disabledStyled$1 = function (props) {
|
|
7704
7711
|
var _a, _b, _c;
|
|
@@ -7708,9 +7715,9 @@ var disabledStyled$1 = function (props) {
|
|
|
7708
7715
|
};
|
|
7709
7716
|
var textArea = function (props) {
|
|
7710
7717
|
var spaces = getSpaces(props);
|
|
7711
|
-
return react.css(templateObject_3$
|
|
7718
|
+
return react.css(templateObject_3$e || (templateObject_3$e = __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);
|
|
7712
7719
|
};
|
|
7713
|
-
var StyledLabel$1 = styled__default.default("label")(templateObject_4$
|
|
7720
|
+
var StyledLabel$1 = styled__default.default("label")(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7714
7721
|
var spaces = getSpaces(props);
|
|
7715
7722
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7716
7723
|
});
|
|
@@ -7719,14 +7726,15 @@ var StyledInputBase = styled__default.default(material.TextField, {
|
|
|
7719
7726
|
return !sdsPropNames$1.includes(prop.toString());
|
|
7720
7727
|
},
|
|
7721
7728
|
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7722
|
-
var _a, _b, _c;
|
|
7729
|
+
var _a, _b, _c, _d;
|
|
7723
7730
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
7724
7731
|
var spaces = getSpaces(props);
|
|
7725
7732
|
var borders = getBorders(props);
|
|
7726
7733
|
var corners = getCorners(props);
|
|
7727
|
-
|
|
7734
|
+
var semanticColors = getSemanticColors(props);
|
|
7735
|
+
return react.css(templateObject_5$7 || (templateObject_5$7 = __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 }\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 }\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.m, (_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, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
|
|
7728
7736
|
});
|
|
7729
|
-
var templateObject_1$
|
|
7737
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$e, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
7730
7738
|
|
|
7731
7739
|
/**
|
|
7732
7740
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -7787,11 +7795,11 @@ var toggleOff = function (props) {
|
|
|
7787
7795
|
: (_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(value, "\";\n }\n }\n\n &:hover {\n .").concat(material.switchClasses.switchBase, " {\n &:after {\n color: ").concat(disabled ? (_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.textPrimary, ";\n }\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
|
|
7788
7796
|
"&:hover {\n outline: ".concat((_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentSecondaryHover, ";\n }\n }"), "\n ");
|
|
7789
7797
|
};
|
|
7790
|
-
var Toggle = styled__default.default(material.Switch)(templateObject_1$
|
|
7798
|
+
var Toggle = styled__default.default(material.Switch)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7791
7799
|
var checked = props.checked;
|
|
7792
7800
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
7793
7801
|
});
|
|
7794
|
-
var templateObject_1$
|
|
7802
|
+
var templateObject_1$v;
|
|
7795
7803
|
|
|
7796
7804
|
/**
|
|
7797
7805
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -7813,7 +7821,7 @@ var doNotForwardProps$h = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
|
7813
7821
|
var defaultStyle = function (props) {
|
|
7814
7822
|
var _a, _b, _c, _d;
|
|
7815
7823
|
var semanticColors = getSemanticColors(props);
|
|
7816
|
-
return react.css(templateObject_1$
|
|
7824
|
+
return react.css(templateObject_1$u || (templateObject_1$u = __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);
|
|
7817
7825
|
};
|
|
7818
7826
|
var dashedStyle = function () {
|
|
7819
7827
|
return react.css(templateObject_2$j || (templateObject_2$j = __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 "])));
|
|
@@ -7828,11 +7836,11 @@ var StyledLink = styled__default.default(material.Link, {
|
|
|
7828
7836
|
shouldForwardProp: function (prop) {
|
|
7829
7837
|
return !doNotForwardProps$h.includes(prop.toString());
|
|
7830
7838
|
},
|
|
7831
|
-
})(templateObject_4$
|
|
7839
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
7832
7840
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7833
|
-
return react.css(templateObject_3$
|
|
7841
|
+
return react.css(templateObject_3$d || (templateObject_3$d = __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");
|
|
7834
7842
|
});
|
|
7835
|
-
var templateObject_1$
|
|
7843
|
+
var templateObject_1$u, templateObject_2$j, templateObject_3$d, templateObject_4$a;
|
|
7836
7844
|
|
|
7837
7845
|
/**
|
|
7838
7846
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -7850,7 +7858,7 @@ var Link = React.forwardRef(function (props, ref) {
|
|
|
7850
7858
|
var doNotForwardProps$g = ["marginBottom", "ordered"];
|
|
7851
7859
|
var StyledList = styled__default.default(material.List, {
|
|
7852
7860
|
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
7853
|
-
})(templateObject_1$
|
|
7861
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"], ["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"])), propsToMarginBottom$1, function (props) {
|
|
7854
7862
|
if (!props.ordered)
|
|
7855
7863
|
return "";
|
|
7856
7864
|
return "\n counter-reset: section;\n ";
|
|
@@ -7868,7 +7876,7 @@ function propsToMarginBottom$1(props) {
|
|
|
7868
7876
|
var marginBottom = props.marginBottom;
|
|
7869
7877
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
7870
7878
|
}
|
|
7871
|
-
var templateObject_1$
|
|
7879
|
+
var templateObject_1$t;
|
|
7872
7880
|
|
|
7873
7881
|
/**
|
|
7874
7882
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7888,7 +7896,7 @@ var fontBodyXxxs = fontBody("xxxs");
|
|
|
7888
7896
|
var doNotForwardProps$f = ["marginBottom", "fontSize", "ordered"];
|
|
7889
7897
|
var StyledListItem = styled__default.default(material.ListItem, {
|
|
7890
7898
|
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
7891
|
-
})(templateObject_1$
|
|
7899
|
+
})(templateObject_1$s || (templateObject_1$s = __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) {
|
|
7892
7900
|
var ordered = props.ordered;
|
|
7893
7901
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
7894
7902
|
}, function (props) {
|
|
@@ -7923,7 +7931,7 @@ var ListItemLabel = styled__default.default("span")(templateObject_2$i || (templ
|
|
|
7923
7931
|
var fontWeights = getFontWeights(props);
|
|
7924
7932
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
7925
7933
|
});
|
|
7926
|
-
var templateObject_1$
|
|
7934
|
+
var templateObject_1$s, templateObject_2$i;
|
|
7927
7935
|
|
|
7928
7936
|
/**
|
|
7929
7937
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7933,11 +7941,11 @@ var ListItem = function (props) {
|
|
|
7933
7941
|
};
|
|
7934
7942
|
|
|
7935
7943
|
var fontHeaderM = fontHeader("m");
|
|
7936
|
-
var StyledListSubheader = styled__default.default(material.ListSubheader)(templateObject_1$
|
|
7944
|
+
var StyledListSubheader = styled__default.default(material.ListSubheader)(templateObject_1$r || (templateObject_1$r = __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) {
|
|
7937
7945
|
var spaces = getSpaces(props);
|
|
7938
7946
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7939
7947
|
});
|
|
7940
|
-
var templateObject_1$
|
|
7948
|
+
var templateObject_1$r;
|
|
7941
7949
|
|
|
7942
7950
|
/**
|
|
7943
7951
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7946,7 +7954,7 @@ var ListSubheader = function (props) {
|
|
|
7946
7954
|
return jsxRuntime.jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
7947
7955
|
};
|
|
7948
7956
|
|
|
7949
|
-
var StyledText = styled__default.default("span")(templateObject_1$
|
|
7957
|
+
var StyledText = styled__default.default("span")(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7950
7958
|
var spaces = getSpaces(props);
|
|
7951
7959
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7952
7960
|
});
|
|
@@ -7960,7 +7968,7 @@ var tag = function (props) {
|
|
|
7960
7968
|
var _a, _b, _c;
|
|
7961
7969
|
var corners = getCorners(props);
|
|
7962
7970
|
var semanticColors = getSemanticColors(props);
|
|
7963
|
-
return react.css(templateObject_3$
|
|
7971
|
+
return react.css(templateObject_3$c || (templateObject_3$c = __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.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
|
|
7964
7972
|
};
|
|
7965
7973
|
var doNotForwardProps$e = ["sdsStyle"];
|
|
7966
7974
|
var StyledLoadingIndicator = styled__default.default("div", {
|
|
@@ -7968,23 +7976,23 @@ var StyledLoadingIndicator = styled__default.default("div", {
|
|
|
7968
7976
|
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7969
7977
|
var sdsStyle = props.sdsStyle;
|
|
7970
7978
|
var spaces = getSpaces(props);
|
|
7971
|
-
var style = react.css(templateObject_4$
|
|
7979
|
+
var style = react.css(templateObject_4$9 || (templateObject_4$9 = __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);
|
|
7972
7980
|
return react.css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), style, sdsStyle === "minimal" && minimal(props), sdsStyle === "tag" && tag(props));
|
|
7973
7981
|
});
|
|
7974
|
-
var templateObject_1$
|
|
7982
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$9, templateObject_5$6, templateObject_6$5;
|
|
7975
7983
|
|
|
7976
7984
|
var LoadingIndicator = function (_a) {
|
|
7977
7985
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
7978
7986
|
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" })] }));
|
|
7979
7987
|
};
|
|
7980
7988
|
|
|
7981
|
-
var StyledMenu = styled__default.default(material.Menu)(templateObject_1$
|
|
7989
|
+
var StyledMenu = styled__default.default(material.Menu)(templateObject_1$p || (templateObject_1$p = __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) {
|
|
7982
7990
|
var _a;
|
|
7983
7991
|
var spaces = getSpaces(props);
|
|
7984
7992
|
var semanticColors = getSemanticColors(props);
|
|
7985
7993
|
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 ");
|
|
7986
7994
|
});
|
|
7987
|
-
var templateObject_1$
|
|
7995
|
+
var templateObject_1$p;
|
|
7988
7996
|
|
|
7989
7997
|
var ANCHOR_ORIGIN = {
|
|
7990
7998
|
horizontal: "center",
|
|
@@ -8001,7 +8009,7 @@ var Menu = function (props) {
|
|
|
8001
8009
|
return (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
8002
8010
|
};
|
|
8003
8011
|
|
|
8004
|
-
var StyledMenuItem = styled__default.default(MenuItem)(templateObject_1$
|
|
8012
|
+
var StyledMenuItem = styled__default.default(MenuItem)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
8005
8013
|
var doNotForwardProps$d = ["search", "InputBaseProps", "keepSearchOnSelect"];
|
|
8006
8014
|
// (thuang): Casting the type to `Autocomplete`
|
|
8007
8015
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
@@ -8013,7 +8021,7 @@ var StyledAutocomplete = styled__default.default(material.Autocomplete, {
|
|
|
8013
8021
|
});
|
|
8014
8022
|
var InputBaseWrapper = styled__default.default("div", {
|
|
8015
8023
|
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8016
|
-
})(templateObject_3$
|
|
8024
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8017
8025
|
var search = props.search;
|
|
8018
8026
|
if (!search) {
|
|
8019
8027
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -8026,11 +8034,11 @@ var InputBaseWrapper = styled__default.default("div", {
|
|
|
8026
8034
|
});
|
|
8027
8035
|
var StyledMenuInputSearch = styled__default.default(InputSearch, {
|
|
8028
8036
|
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8029
|
-
})(templateObject_4$
|
|
8037
|
+
})(templateObject_4$8 || (templateObject_4$8 = __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) {
|
|
8030
8038
|
var search = _a.search;
|
|
8031
8039
|
return (search ? "auto" : "transparent");
|
|
8032
8040
|
});
|
|
8033
|
-
var templateObject_1$
|
|
8041
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$8;
|
|
8034
8042
|
|
|
8035
8043
|
/**
|
|
8036
8044
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -8084,13 +8092,13 @@ var MenuSelect = function (props) {
|
|
|
8084
8092
|
var doNotForwardProps$c = ["hasInvertedStyle", "isNarrow"];
|
|
8085
8093
|
var StyledFooter = styled__default.default("footer", {
|
|
8086
8094
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8087
|
-
})(templateObject_3$
|
|
8095
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8088
8096
|
var isNarrow = props.isNarrow;
|
|
8089
8097
|
var spaces = getSpaces(props);
|
|
8090
8098
|
var semanticColors = getSemanticColors(props);
|
|
8091
8099
|
return material.css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n background: ", ";\n padding: ", "px ", "px ", "px\n ", "px;\n\n ", "\n "], ["\n background: ", ";\n padding: ", "px ", "px ", "px\n ", "px;\n\n ", "\n "])), props.hasInvertedStyle
|
|
8092
8100
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryInverse
|
|
8093
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && material.css(templateObject_1$
|
|
8101
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && material.css(templateObject_1$n || (templateObject_1$n = __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
|
|
8094
8102
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
8095
8103
|
: 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));
|
|
8096
8104
|
});
|
|
@@ -8098,7 +8106,7 @@ var StyledLogoWrapper$1 = styled__default.default("div", {
|
|
|
8098
8106
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8099
8107
|
})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n ", "\n\n p {\n ", "\n ", "\n\n ", "\n }\n"], ["\n ", "\n\n p {\n ", "\n ", "\n\n ", "\n }\n"])), function (props) {
|
|
8100
8108
|
var spaces = getSpaces(props);
|
|
8101
|
-
return material.css(templateObject_4$
|
|
8109
|
+
return material.css(templateObject_4$7 || (templateObject_4$7 = __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);
|
|
8102
8110
|
}, fontHeader("l"), fontHeader("l", /* isNarrow */ true), function (props) {
|
|
8103
8111
|
var semanticColors = getSemanticColors(props);
|
|
8104
8112
|
return material.css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n "], ["\n color: ", ";\n white-space: nowrap;\n "])), props.hasInvertedStyle
|
|
@@ -8129,11 +8137,11 @@ var StyledLinkSection = styled__default.default("div", {
|
|
|
8129
8137
|
})(templateObject_15$1 || (templateObject_15$1 = __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) {
|
|
8130
8138
|
var isNarrow = props.isNarrow;
|
|
8131
8139
|
var spaces = getSpaces(props);
|
|
8132
|
-
return material.css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n gap: ", "px;\n\n ", "\n "], ["\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
8140
|
+
return material.css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n gap: ", "px;\n\n ", "\n "], ["\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && material.css(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n margin-top: ", "px;\n flex-direction: column;\n "], ["\n margin-top: ", "px;\n flex-direction: column;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8133
8141
|
});
|
|
8134
|
-
var StyledMobileLinkRow = styled__default.default.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n\n ", "\n"])), function (props) {
|
|
8142
|
+
var StyledMobileLinkRow = styled__default.default.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n\n ", "\n"])), function (props) {
|
|
8135
8143
|
var spaces = getSpaces(props);
|
|
8136
|
-
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
8144
|
+
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
8137
8145
|
});
|
|
8138
8146
|
var StyledImageSection = styled__default.default("div", {
|
|
8139
8147
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
@@ -8142,7 +8150,7 @@ var StyledImageSection = styled__default.default("div", {
|
|
|
8142
8150
|
var spaces = getSpaces(props);
|
|
8143
8151
|
return material.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "], ["\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.xxl, isNarrow && material.css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n padding-left: 0;\n gap: ", "px;\n flex-direction: column;\n justify-content: center;\n "], ["\n padding-left: 0;\n gap: ", "px;\n flex-direction: column;\n justify-content: center;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8144
8152
|
});
|
|
8145
|
-
var StyledMobileImageRow = styled__default.default.div(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n\n ", "\n"])), function (props) {
|
|
8153
|
+
var StyledMobileImageRow = styled__default.default.div(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n\n ", "\n"])), function (props) {
|
|
8146
8154
|
var spaces = getSpaces(props);
|
|
8147
8155
|
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n ");
|
|
8148
8156
|
});
|
|
@@ -8153,7 +8161,7 @@ var StyledBottomSection = styled__default.default("div", {
|
|
|
8153
8161
|
var spaces = getSpaces(props);
|
|
8154
8162
|
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 margin-top: ", "px;\n "], ["\n flex-direction: column-reverse;\n margin-top: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8155
8163
|
});
|
|
8156
|
-
var templateObject_1$
|
|
8164
|
+
var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
|
|
8157
8165
|
|
|
8158
8166
|
/**
|
|
8159
8167
|
* WARNING: Don't import this directly.
|
|
@@ -14176,7 +14184,7 @@ function useTheme() {
|
|
|
14176
14184
|
var doNotForwardProps$b = ["hasInvertedStyle", "isNarrow"];
|
|
14177
14185
|
var NarrowNavItemLinkStyles = function (props) {
|
|
14178
14186
|
var semanticColors = getSemanticColors(props);
|
|
14179
|
-
return material.css(templateObject_1$
|
|
14187
|
+
return material.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n min-height: 48px;\n text-align: center;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "], ["\n min-height: 48px;\n text-align: center;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), props.hasInvertedStyle
|
|
14180
14188
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14181
14189
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, props.hasInvertedStyle
|
|
14182
14190
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
@@ -14184,7 +14192,7 @@ var NarrowNavItemLinkStyles = function (props) {
|
|
|
14184
14192
|
};
|
|
14185
14193
|
var StyledNavItemLink = styled__default.default(Link, {
|
|
14186
14194
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
14187
|
-
})(templateObject_3$
|
|
14195
|
+
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeader("m"), fontBody("s", "regular", /* isNarrow */ true), function (props) {
|
|
14188
14196
|
var isNarrow = props.isNarrow;
|
|
14189
14197
|
var semanticColors = getSemanticColors(props);
|
|
14190
14198
|
return material.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n font-weight: 600;\n }\n\n ", "\n "], ["\n color: ", ";\n white-space: nowrap;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n font-weight: 600;\n }\n\n ", "\n "])), props.hasInvertedStyle
|
|
@@ -14193,7 +14201,7 @@ var StyledNavItemLink = styled__default.default(Link, {
|
|
|
14193
14201
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14194
14202
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && NarrowNavItemLinkStyles(props));
|
|
14195
14203
|
});
|
|
14196
|
-
var templateObject_1$
|
|
14204
|
+
var templateObject_1$m, templateObject_2$e, templateObject_3$9;
|
|
14197
14205
|
|
|
14198
14206
|
var NavItem = React.memo(function (_a) {
|
|
14199
14207
|
var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
@@ -14201,39 +14209,102 @@ var NavItem = React.memo(function (_a) {
|
|
|
14201
14209
|
});
|
|
14202
14210
|
NavItem.displayName = "NavItem";
|
|
14203
14211
|
|
|
14204
|
-
var doNotForwardProps$a = ["hasInvertedStyle"];
|
|
14212
|
+
var doNotForwardProps$a = ["hasInvertedStyle", "showDivider"];
|
|
14205
14213
|
var StyledLinkItemLink = styled__default.default(Link, {
|
|
14206
14214
|
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14207
|
-
})(
|
|
14215
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBody("xxs", "regular"), function (props) {
|
|
14216
|
+
var showDivider = props.showDivider, hasInvertedStyle = props.hasInvertedStyle;
|
|
14217
|
+
var spaces = getSpaces(props);
|
|
14208
14218
|
var semanticColors = getSemanticColors(props);
|
|
14209
|
-
return
|
|
14219
|
+
return material.css(templateObject_2$d || (templateObject_2$d = __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
|
|
14220
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14221
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, hasInvertedStyle
|
|
14222
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14223
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, showDivider && material.css(templateObject_1$l || (templateObject_1$l = __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
|
|
14224
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14225
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider));
|
|
14210
14226
|
});
|
|
14211
14227
|
var StyledDivider = styled__default.default(material.Divider, {
|
|
14212
14228
|
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14213
|
-
})(
|
|
14229
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14214
14230
|
var semanticColors = getSemanticColors(props);
|
|
14215
14231
|
return "\n border-color: ".concat(props.hasInvertedStyle
|
|
14216
14232
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14217
14233
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, ";\n ");
|
|
14218
14234
|
});
|
|
14219
|
-
var templateObject_1$
|
|
14235
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$8, templateObject_4$6;
|
|
14220
14236
|
|
|
14221
|
-
var FooterLink = React.memo(function (_a) {
|
|
14237
|
+
var FooterLink = React.memo(React.forwardRef(function (_a, ref) {
|
|
14222
14238
|
var link = _a.link, showDivider = _a.showDivider, hasInvertedStyle = _a.hasInvertedStyle;
|
|
14223
|
-
return (jsxRuntime.
|
|
14224
|
-
});
|
|
14239
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledLinkItemLink, __assign({ ref: ref, href: link.url, hasInvertedStyle: hasInvertedStyle, component: link.component, showDivider: showDivider }, link.linkProps, { children: link.label }), link.label) }));
|
|
14240
|
+
}));
|
|
14225
14241
|
FooterLink.displayName = "FooterLink";
|
|
14226
14242
|
|
|
14227
|
-
|
|
14228
|
-
|
|
14229
|
-
|
|
14230
|
-
|
|
14231
|
-
|
|
14232
|
-
|
|
14233
|
-
|
|
14243
|
+
/**
|
|
14244
|
+
* A custom hook that detects the last item in each row of a wrapped layout.
|
|
14245
|
+
*
|
|
14246
|
+
* Neither CSS Flexbox nor CSS Grid provide a built-in way to identify the last item
|
|
14247
|
+
* in a visually wrapped row. Since items can wrap dynamically based on screen size,
|
|
14248
|
+
* we rely on measuring their vertical positions in the DOM.
|
|
14249
|
+
*
|
|
14250
|
+
* We iterate through the list of items and compare their offsetTop values. If an item
|
|
14251
|
+
* has a higher offsetTop than the previous one, it means it started a new row, so the
|
|
14252
|
+
* previous item was the last in its row.
|
|
14253
|
+
*
|
|
14254
|
+
* A ResizeObserver is used to re-run this logic whenever the container resizes, ensuring it
|
|
14255
|
+
* stays accurate in responsive layouts.
|
|
14256
|
+
*
|
|
14257
|
+
* @param containerRef - A ref to the container element
|
|
14258
|
+
* @param itemRefs - An array of refs to the items
|
|
14259
|
+
* @returns A Set of last items in each row
|
|
14260
|
+
*/
|
|
14261
|
+
var useLastInRow = function (containerRef, itemRefs) {
|
|
14262
|
+
var _a = React.useState(new Set()), lastItems = _a[0], setLastItems = _a[1];
|
|
14263
|
+
React.useEffect(function () {
|
|
14264
|
+
var updateLastInRow = function () {
|
|
14265
|
+
var items = itemRefs.current.filter(Boolean);
|
|
14266
|
+
var currentTop = null;
|
|
14267
|
+
var newSet = new Set();
|
|
14268
|
+
items.forEach(function (item, index) {
|
|
14269
|
+
if (currentTop === null) {
|
|
14270
|
+
currentTop = item.offsetTop;
|
|
14271
|
+
}
|
|
14272
|
+
else if (item.offsetTop > currentTop) {
|
|
14273
|
+
newSet.add(index - 1);
|
|
14274
|
+
currentTop = item.offsetTop;
|
|
14275
|
+
}
|
|
14276
|
+
});
|
|
14277
|
+
if (items.length > 0) {
|
|
14278
|
+
newSet.add(items.length - 1);
|
|
14279
|
+
}
|
|
14280
|
+
setLastItems(newSet);
|
|
14281
|
+
};
|
|
14282
|
+
updateLastInRow();
|
|
14283
|
+
var resizeObserver = new ResizeObserver(function () {
|
|
14284
|
+
updateLastInRow();
|
|
14285
|
+
});
|
|
14286
|
+
if (containerRef.current) {
|
|
14287
|
+
resizeObserver.observe(containerRef.current);
|
|
14288
|
+
}
|
|
14289
|
+
return function () { return resizeObserver.disconnect(); };
|
|
14290
|
+
}, [containerRef, itemRefs]);
|
|
14291
|
+
return lastItems;
|
|
14292
|
+
};
|
|
14293
|
+
|
|
14294
|
+
var MobileLinkRow = React.memo(function (_a) {
|
|
14295
|
+
var links = _a.links, hasInvertedStyle = _a.hasInvertedStyle;
|
|
14296
|
+
var containerRef = React.useRef(null);
|
|
14297
|
+
var itemRefs = React.useRef([]);
|
|
14298
|
+
var noDividerIndices = useLastInRow(containerRef, itemRefs);
|
|
14299
|
+
return (jsxRuntime.jsx(StyledMobileLinkRow, { ref: containerRef, children: links.map(function (link, index) { return (jsxRuntime.jsx(FooterLink, { link: link, showDivider: !noDividerIndices.has(index), hasInvertedStyle: hasInvertedStyle, ref: function (el) {
|
|
14300
|
+
itemRefs.current[index] = el;
|
|
14301
|
+
} }, link.label)); }) }));
|
|
14302
|
+
});
|
|
14303
|
+
MobileLinkRow.displayName = "MobileLinkRow";
|
|
14304
|
+
|
|
14234
14305
|
var MemoizedStyledDivider = React.memo(StyledDivider);
|
|
14235
14306
|
function NavigationFooter(_a) {
|
|
14236
|
-
var hasInvertedStyle = _a.hasInvertedStyle, images = _a.images, logo = _a.logo, logoUrl = _a.logoUrl, navItems = _a.navItems, navLinks = _a.navLinks, tag = _a.tag, tagColor = _a.tagColor, title = _a.title, rest = __rest(_a, ["hasInvertedStyle", "images", "logo", "logoUrl", "navItems", "navLinks", "tag", "tagColor", "title"]);
|
|
14307
|
+
var hasInvertedStyle = _a.hasInvertedStyle, images = _a.images, logo = _a.logo, logoUrl = _a.logoUrl, logoComponent = _a.logoComponent, logoLinkProps = _a.logoLinkProps, navItems = _a.navItems, navLinks = _a.navLinks, tag = _a.tag, tagColor = _a.tagColor, title = _a.title, rest = __rest(_a, ["hasInvertedStyle", "images", "logo", "logoUrl", "logoComponent", "logoLinkProps", "navItems", "navLinks", "tag", "tagColor", "title"]);
|
|
14237
14308
|
var footerRef = React.useRef(null);
|
|
14238
14309
|
var theme = useTheme();
|
|
14239
14310
|
var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
@@ -14251,12 +14322,19 @@ function NavigationFooter(_a) {
|
|
|
14251
14322
|
var scrollWidth = footerRef.current.scrollWidth;
|
|
14252
14323
|
var needsScroll = scrollWidth > clientWidth;
|
|
14253
14324
|
setDimensions(function (prev) {
|
|
14254
|
-
var newBreakpoint = needsScroll
|
|
14255
|
-
?
|
|
14325
|
+
var newBreakpoint = needsScroll
|
|
14326
|
+
? prev.breakpoint > scrollWidth
|
|
14327
|
+
? prev.breakpoint
|
|
14328
|
+
: scrollWidth
|
|
14256
14329
|
: prev.breakpoint;
|
|
14330
|
+
var newIsNarrow = prev.isNarrow
|
|
14331
|
+
? clientWidth < newBreakpoint
|
|
14332
|
+
? true
|
|
14333
|
+
: false
|
|
14334
|
+
: needsScroll;
|
|
14257
14335
|
return {
|
|
14258
14336
|
breakpoint: newBreakpoint,
|
|
14259
|
-
isNarrow:
|
|
14337
|
+
isNarrow: newIsNarrow,
|
|
14260
14338
|
};
|
|
14261
14339
|
});
|
|
14262
14340
|
}, []);
|
|
@@ -14271,16 +14349,11 @@ function NavigationFooter(_a) {
|
|
|
14271
14349
|
var renderImages = React.useCallback(function () {
|
|
14272
14350
|
if (!(images === null || images === void 0 ? void 0 : images.length))
|
|
14273
14351
|
return null;
|
|
14274
|
-
|
|
14275
|
-
|
|
14276
|
-
|
|
14277
|
-
|
|
14278
|
-
|
|
14279
|
-
}
|
|
14280
|
-
return groupArray(images, 2).map(function (imageGroup, index) { return (jsxRuntime.jsx(StyledMobileImageRow, { children: imageGroup.map(function (_a) {
|
|
14281
|
-
var image = _a.image, url = _a.url;
|
|
14282
|
-
return (jsxRuntime.jsx(Link, { href: url, children: image }, url));
|
|
14283
|
-
}) }, index)); });
|
|
14352
|
+
var imageElements = images.map(function (_a) {
|
|
14353
|
+
var image = _a.image, url = _a.url, component = _a.component, linkProps = _a.linkProps;
|
|
14354
|
+
return (jsxRuntime.jsx(Link, __assign({ href: url, component: component }, linkProps, { children: image }), url));
|
|
14355
|
+
});
|
|
14356
|
+
return dimensions.isNarrow ? (jsxRuntime.jsx(StyledMobileImageRow, { children: imageElements })) : (imageElements);
|
|
14284
14357
|
}, [images, dimensions.isNarrow]);
|
|
14285
14358
|
var renderLinks = React.useCallback(function () {
|
|
14286
14359
|
if (!(navLinks === null || navLinks === void 0 ? void 0 : navLinks.length))
|
|
@@ -14288,19 +14361,21 @@ function NavigationFooter(_a) {
|
|
|
14288
14361
|
if (!dimensions.isNarrow) {
|
|
14289
14362
|
return navLinks.map(function (link, index) { return (jsxRuntime.jsx(FooterLink, { link: link, showDivider: index < navLinks.length - 1, hasInvertedStyle: hasInvertedStyle }, link.label)); });
|
|
14290
14363
|
}
|
|
14291
|
-
return
|
|
14364
|
+
return (jsxRuntime.jsx(MobileLinkRow, { links: navLinks, hasInvertedStyle: hasInvertedStyle }));
|
|
14292
14365
|
}, [navLinks, dimensions.isNarrow, hasInvertedStyle]);
|
|
14293
14366
|
var logoNode = React.useMemo(function () {
|
|
14294
14367
|
var node = (jsxRuntime.jsxs(StyledLogoWrapper$1, { isNarrow: dimensions.isNarrow, hasInvertedStyle: hasInvertedStyle, children: [logo, jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(Tag, { tagColor: tagColor, label: tag, hover: false })] }));
|
|
14295
|
-
return logoUrl ? jsxRuntime.jsx(Link, { href: logoUrl, children: node }) : node;
|
|
14368
|
+
return logoUrl ? (jsxRuntime.jsx(Link, __assign({ href: logoUrl, component: logoComponent }, logoLinkProps, { children: node }))) : (node);
|
|
14296
14369
|
}, [
|
|
14370
|
+
dimensions.isNarrow,
|
|
14371
|
+
hasInvertedStyle,
|
|
14297
14372
|
logo,
|
|
14298
14373
|
title,
|
|
14299
14374
|
tag,
|
|
14300
14375
|
tagColor,
|
|
14301
14376
|
logoUrl,
|
|
14302
|
-
|
|
14303
|
-
|
|
14377
|
+
logoComponent,
|
|
14378
|
+
logoLinkProps,
|
|
14304
14379
|
]);
|
|
14305
14380
|
var navItemsSection = React.useMemo(function () {
|
|
14306
14381
|
if (!(navItems === null || navItems === void 0 ? void 0 : navItems.length))
|
|
@@ -14318,15 +14393,15 @@ var doNotForwardProps$9 = [
|
|
|
14318
14393
|
"logoLinkComponent",
|
|
14319
14394
|
"logoLinkProps",
|
|
14320
14395
|
];
|
|
14321
|
-
var
|
|
14396
|
+
var StyledAppBar = styled__default.default(material.AppBar, {
|
|
14322
14397
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14323
|
-
})(templateObject_1$
|
|
14398
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14324
14399
|
var colors = getSemanticColors(props);
|
|
14325
|
-
return "\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n max-width: 100%;\n max-height: 56px;\n overflow-x: auto;\n ");
|
|
14400
|
+
return "\n background-color: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n background-image: none;\n max-width: 100%;\n max-height: 56px;\n overflow-x: auto;\n ");
|
|
14326
14401
|
});
|
|
14327
14402
|
var NarrowToolbar = function (props) {
|
|
14328
14403
|
var semanticColors = getSemanticColors(props);
|
|
14329
|
-
return material.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border-bottom: 1px solid\n ", ";\n background: ", ";\n position: sticky !important;\n top: 0;\n z-index: 1000;\n justify-content: space-between;\n "], ["\n border-bottom: 1px solid\n ", ";\n background: ", ";\n position: sticky !important;\n top: 0;\n z-index: 1000;\n justify-content: space-between;\n "])), props.hasInvertedStyle
|
|
14404
|
+
return material.css(templateObject_2$c || (templateObject_2$c = __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 z-index: 1000;\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 z-index: 1000;\n justify-content: space-between;\n "])), props.hasInvertedStyle
|
|
14330
14405
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14331
14406
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, props.hasInvertedStyle
|
|
14332
14407
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryInverse
|
|
@@ -14339,13 +14414,13 @@ var StyledToolbar = styled__default.default(material.Toolbar, {
|
|
|
14339
14414
|
var spaces = getSpaces(props);
|
|
14340
14415
|
return material.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n &.MuiToolbar-root {\n min-height: 56px;\n max-height: 56px;\n padding: ", "px ", "px;\n\n ", "\n }\n "], ["\n &.MuiToolbar-root {\n min-height: 56px;\n max-height: 56px;\n padding: ", "px ", "px;\n\n ", "\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, isNarrow && NarrowToolbar(props));
|
|
14341
14416
|
});
|
|
14342
|
-
|
|
14417
|
+
styled__default.default("div", {
|
|
14343
14418
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14344
14419
|
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14345
14420
|
var shadows = getShadows(props);
|
|
14346
14421
|
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 z-index: 100;\n ");
|
|
14347
14422
|
});
|
|
14348
|
-
|
|
14423
|
+
styled__default.default("div", {
|
|
14349
14424
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14350
14425
|
})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14351
14426
|
var colors = getSemanticColors(props);
|
|
@@ -14381,7 +14456,7 @@ var StyledWideIconButton = styled__default.default(Button, {
|
|
|
14381
14456
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14382
14457
|
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14383
14458
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14384
|
-
return material.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
14459
|
+
return material.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n margin: 0;\n "], ["\n ", "\n margin: 0;\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
14385
14460
|
});
|
|
14386
14461
|
var StyledLogoLinkWrapper = styled__default.default(Link, {
|
|
14387
14462
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
@@ -14390,57 +14465,64 @@ var StyledLogoLinkWrapper = styled__default.default(Link, {
|
|
|
14390
14465
|
return material.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), isNarrow ? "100%" : "auto");
|
|
14391
14466
|
});
|
|
14392
14467
|
var StyledLogoWrapper = styled__default.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
14393
|
-
var NarrowTitleContainer = function (
|
|
14394
|
-
|
|
14395
|
-
return material.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n p {\n margin-left: ", "px;\n }\n "], ["\n p {\n margin-left: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
14468
|
+
var NarrowTitleContainer = function () {
|
|
14469
|
+
return material.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n p {\n margin: 0px;\n margin-block: 0px;\n }\n "], ["\n p {\n margin: 0px;\n margin-block: 0px;\n }\n "])));
|
|
14396
14470
|
};
|
|
14397
14471
|
var StyledTitleContainer = styled__default.default("div", {
|
|
14398
14472
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14399
|
-
})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n
|
|
14473
|
+
})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n\n ", "\n"])), function (props) {
|
|
14400
14474
|
var isNarrow = props.isNarrow;
|
|
14401
14475
|
var colors = getSemanticColors(props);
|
|
14402
14476
|
var spaces = getSpaces(props);
|
|
14403
|
-
return material.css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n
|
|
14477
|
+
return material.css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n gap: ", "px;\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n ", "\n "], ["\n gap: ", "px;\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, props.hasInvertedStyle
|
|
14404
14478
|
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
|
|
14405
|
-
: colors === null || colors === void 0 ? void 0 : colors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl,
|
|
14479
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && NarrowTitleContainer());
|
|
14480
|
+
});
|
|
14481
|
+
var StyledTitleTagWrapper = styled__default.default("div", {
|
|
14482
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14483
|
+
})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeader("l"), fontHeader("l", true), function (props) {
|
|
14484
|
+
var spaces = getSpaces(props);
|
|
14485
|
+
return "\n display: flex;\n align-items: center;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n p {\n white-space: nowrap;\n }\n ");
|
|
14406
14486
|
});
|
|
14407
|
-
var StyledTag = styled__default.default(Tag)(
|
|
14487
|
+
var StyledTag = styled__default.default(Tag)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n margin: 1px 0 0 0;\n\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 1px 0 0 0;\n\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"), fontBody("xxxs", "regular", /* isNarrow */ true));
|
|
14408
14488
|
var StyledPrimaryNavContainer = styled__default.default("div", {
|
|
14409
14489
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14410
|
-
})(
|
|
14490
|
+
})(templateObject_23 || (templateObject_23 = __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) {
|
|
14411
14491
|
var showSearch = props.showSearch, primaryNavPosition = props.primaryNavPosition, isNarrow = props.isNarrow;
|
|
14412
14492
|
var spaces = getSpaces(props);
|
|
14413
14493
|
var primaryNavPositionWithSearch = primaryNavPosition === "left" ? "flex-start" : "space-between";
|
|
14414
14494
|
var primaryNavPositionWithoutSearch = primaryNavPosition === "left" ? "flex-start" : "flex-end";
|
|
14415
|
-
return material.css(
|
|
14495
|
+
return material.css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n flex-direction: ", ";\n gap: ", "px;\n margin-right: ", "px;\n flex: 1;\n justify-content: ", ";\n "], ["\n flex-direction: ", ";\n gap: ", "px;\n margin-right: ", "px;\n flex: 1;\n justify-content: ", ";\n "])), isNarrow ? "column" : "row", spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, showSearch
|
|
14416
14496
|
? primaryNavPositionWithSearch
|
|
14417
14497
|
: primaryNavPositionWithoutSearch);
|
|
14418
14498
|
});
|
|
14419
14499
|
var StyledSearch = styled__default.default(InputSearch, {
|
|
14420
14500
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14421
|
-
})(
|
|
14422
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
14501
|
+
})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n margin: 0;\n width: 100%;\n\n .MuiInputBase-input {\n ", "\n ", "\n }\n\n ", "\n"], ["\n margin: 0;\n width: 100%;\n\n .MuiInputBase-input {\n ", "\n ", "\n }\n\n ", "\n"])), fontBody("xs", "regular"), fontBody("m", "regular", /* isNarrow */ true), function (props) {
|
|
14502
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
14423
14503
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14424
14504
|
var spaces = getSpaces(props);
|
|
14425
14505
|
var semanticColors = getSemanticColors(props);
|
|
14426
|
-
return material.css(
|
|
14506
|
+
return material.css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\n }\n\n .MuiInputBase-input {\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n\n &:hover {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-focused {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-disabled {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n }\n "], ["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\n }\n\n .MuiInputBase-input {\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n\n &:hover {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-focused {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-disabled {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n }\n "])), isNarrow ? "100%" : "320px", isNarrow ? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px") : "", hasInvertedStyle
|
|
14427
14507
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14428
14508
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14429
14509
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryInverse
|
|
14430
14510
|
: "", hasInvertedStyle
|
|
14431
|
-
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.
|
|
14511
|
+
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textTertiaryInverse
|
|
14512
|
+
: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, hasInvertedStyle
|
|
14513
|
+
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryInverse
|
|
14432
14514
|
: "", hasInvertedStyle
|
|
14433
|
-
? (
|
|
14515
|
+
? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryHoverInverse
|
|
14434
14516
|
: "", hasInvertedStyle
|
|
14435
|
-
? (
|
|
14517
|
+
? (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentPrimaryInverse
|
|
14436
14518
|
: "", hasInvertedStyle
|
|
14437
|
-
? (
|
|
14519
|
+
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimaryPressedInverse
|
|
14438
14520
|
: "", hasInvertedStyle
|
|
14439
|
-
? (
|
|
14521
|
+
? (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse
|
|
14440
14522
|
: "", hasInvertedStyle
|
|
14441
|
-
? (
|
|
14523
|
+
? (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryDisabledInverse
|
|
14442
14524
|
: "", hasInvertedStyle
|
|
14443
|
-
? (
|
|
14525
|
+
? (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentDisabledInverse
|
|
14444
14526
|
: "");
|
|
14445
14527
|
});
|
|
14446
14528
|
var NarrowButtonStyles = function (props) {
|
|
@@ -14450,23 +14532,28 @@ var NarrowButtonStyles = function (props) {
|
|
|
14450
14532
|
var backgroundColor = props.hasInvertedStyle
|
|
14451
14533
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse
|
|
14452
14534
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary;
|
|
14453
|
-
return material.css(
|
|
14535
|
+
return material.css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n background: ", ";\n gap: ", "px;\n flex-direction: column;\n margin-left: 0;\n margin-top: ", "px;\n padding: ", "px;\n position: sticky;\n bottom: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n height: ", "px;\n width: 100%;\n background: linear-gradient(\n to top,\n ", " 0%,\n ", "00 100%\n );\n top: -", "px;\n }\n\n .MuiButton-icon .MuiSvgIcon-root {\n width: ", "px;\n height: ", "px;\n }\n "], ["\n background: ", ";\n gap: ", "px;\n flex-direction: column;\n margin-left: 0;\n margin-top: ", "px;\n padding: ", "px;\n position: sticky;\n bottom: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n height: ", "px;\n width: 100%;\n background: linear-gradient(\n to top,\n ", " 0%,\n ", "00 100%\n );\n top: -", "px;\n }\n\n .MuiButton-icon .MuiSvgIcon-root {\n width: ", "px;\n height: ", "px;\n }\n "])), backgroundColor, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, backgroundColor, backgroundColor, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, sizes === null || sizes === void 0 ? void 0 : sizes.l.width, sizes === null || sizes === void 0 ? void 0 : sizes.l.height);
|
|
14454
14536
|
};
|
|
14455
14537
|
var StyledButtonSection = styled__default.default("section", {
|
|
14456
14538
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14457
|
-
})(
|
|
14539
|
+
})(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"])), fontBody("l", "semibold", /* isNarrow */ true), fontBody("m", "semibold", /* isNarrow */ true), function (props) {
|
|
14458
14540
|
var isNarrow = props.isNarrow;
|
|
14459
14541
|
var spaces = getSpaces(props);
|
|
14460
|
-
return material.css(
|
|
14542
|
+
return material.css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "], ["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && NarrowButtonStyles(props));
|
|
14461
14543
|
});
|
|
14462
14544
|
var StyledDrawer$1 = styled__default.default(material.Drawer, {
|
|
14463
14545
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14464
|
-
})(
|
|
14546
|
+
})(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14465
14547
|
var colors = getSemanticColors(props);
|
|
14466
14548
|
return "\n .MuiDrawer-paper {\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n width: 100%;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n justify-content: space-between;\n }\n ");
|
|
14467
14549
|
});
|
|
14468
|
-
var StyledNarrowButton = styled__default.default(Button
|
|
14469
|
-
|
|
14550
|
+
var StyledNarrowButton = styled__default.default(Button, {
|
|
14551
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14552
|
+
})(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14553
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14554
|
+
return material.css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n ", "\n margin: 0;\n "], ["\n ", "\n margin: 0;\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
14555
|
+
});
|
|
14556
|
+
var templateObject_1$k, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, 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;
|
|
14470
14557
|
|
|
14471
14558
|
var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
|
|
14472
14559
|
var NarrowPrimaryNavItem = function (props) {
|
|
@@ -14483,13 +14570,13 @@ var NarrowPrimaryNavItem = function (props) {
|
|
|
14483
14570
|
var inactiveBorderColor = hasInvertedStyle
|
|
14484
14571
|
? (_c = colors === null || colors === void 0 ? void 0 : colors.neutral) === null || _c === void 0 ? void 0 : _c.fillPrimary
|
|
14485
14572
|
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
14486
|
-
return react.css(templateObject_1$
|
|
14573
|
+
return react.css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n border-left: ", "px solid\n ", ";\n border-radius: 0;\n justify-content: start;\n padding: ", "px 0 ", "px\n ", "px;\n background: ", ";\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n }\n "], ["\n border-left: ", "px solid\n ", ";\n border-radius: 0;\n justify-content: start;\n padding: ", "px 0 ", "px\n ", "px;\n background: ", ";\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : "transparent", spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, ((_d = spaces === null || spaces === void 0 ? void 0 : spaces.l) !== null && _d !== void 0 ? _d : 0) + ((_e = spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) !== null && _e !== void 0 ? _e : 0), active ? activeBackgroundColor : "transparent", hasInvertedStyle
|
|
14487
14574
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondaryInverse
|
|
14488
14575
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : inactiveBorderColor);
|
|
14489
14576
|
};
|
|
14490
14577
|
var PrimaryNavItem = styled__default.default(Button, {
|
|
14491
14578
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
14492
|
-
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n align-items: start;\n background: none;\n\n ", "\n"], ["\n display: flex;\n align-items: start;\n background: none;\n\n ", "\n"])), function (props) {
|
|
14579
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n align-items: start;\n background: none;\n padding: 0;\n min-width: fit-content;\n\n ", "\n"], ["\n display: flex;\n align-items: start;\n background: none;\n padding: 0;\n min-width: fit-content;\n\n ", "\n"])), function (props) {
|
|
14493
14580
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14494
14581
|
var spaces = getSpaces(props);
|
|
14495
14582
|
var colors = getSemanticColors(props);
|
|
@@ -14501,14 +14588,13 @@ var WideStyledLabel = function (props) {
|
|
|
14501
14588
|
var _a, _b;
|
|
14502
14589
|
var hasInvertedStyle = props.hasInvertedStyle, active = props.active;
|
|
14503
14590
|
var colors = getSemanticColors(props);
|
|
14504
|
-
var spaces = getSpaces(props);
|
|
14505
14591
|
var activeBorderColor = hasInvertedStyle
|
|
14506
14592
|
? (_a = colors === null || colors === void 0 ? void 0 : colors.base) === null || _a === void 0 ? void 0 : _a.borderOnFill
|
|
14507
14593
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
14508
14594
|
var inactiveBorderColor = hasInvertedStyle
|
|
14509
14595
|
? colors === null || colors === void 0 ? void 0 : colors.base.borderOnFill
|
|
14510
14596
|
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
14511
|
-
return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n
|
|
14597
|
+
return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n &:hover {\n border-bottom-color: ", ";\n }\n "], ["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n &:hover {\n border-bottom-color: ", ";\n }\n "])), active ? activeBorderColor : "transparent", active ? activeBorderColor : inactiveBorderColor);
|
|
14512
14598
|
};
|
|
14513
14599
|
var StyledLabel = styled__default.default("span", {
|
|
14514
14600
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
@@ -14523,11 +14609,11 @@ var StyledLabel = styled__default.default("span", {
|
|
|
14523
14609
|
: colors === null || colors === void 0 ? void 0 : colors.base.textSecondary;
|
|
14524
14610
|
return react.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n color: ", ";\n\n ", "\n "], ["\n color: ", ";\n\n ", "\n "])), active ? activeColor : inactiveColor, !isNarrow && WideStyledLabel(props));
|
|
14525
14611
|
});
|
|
14526
|
-
var templateObject_1$
|
|
14612
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$6, templateObject_4$4, templateObject_5$3, templateObject_6$2;
|
|
14527
14613
|
|
|
14528
14614
|
var doNotForwardProps$7 = ["isNarrow"];
|
|
14529
14615
|
var NarrowStyledSection = function () {
|
|
14530
|
-
return react.css(templateObject_1$
|
|
14616
|
+
return react.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n align-items: start;\n flex-direction: column;\n "], ["\n align-items: start;\n flex-direction: column;\n "])));
|
|
14531
14617
|
};
|
|
14532
14618
|
var StyledSection = styled__default.default("section", {
|
|
14533
14619
|
shouldForwardProp: function (prop) { return !doNotForwardProps$7.includes(prop); },
|
|
@@ -14537,7 +14623,7 @@ var StyledSection = styled__default.default("section", {
|
|
|
14537
14623
|
var spaces = getSpaces(props);
|
|
14538
14624
|
return react.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n column-gap: ", "px;\n\n ", "\n "], ["\n column-gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces[(_a = props === null || props === void 0 ? void 0 : props.gap) !== null && _a !== void 0 ? _a : "xl"], isNarrow && NarrowStyledSection());
|
|
14539
14625
|
});
|
|
14540
|
-
var templateObject_1$
|
|
14626
|
+
var templateObject_1$i, templateObject_2$a, templateObject_3$5;
|
|
14541
14627
|
|
|
14542
14628
|
function NavigationHeaderPrimaryNav(_a) {
|
|
14543
14629
|
var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
@@ -14557,13 +14643,13 @@ var NarrowStyledTextItem = function (props) {
|
|
|
14557
14643
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14558
14644
|
var semanticColors = getSemanticColors(props);
|
|
14559
14645
|
var spaces = getSpaces(props);
|
|
14560
|
-
return react.css(templateObject_1$
|
|
14646
|
+
return react.css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding-left: ", "px;\n border-radius: 0;\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n }\n "], ["\n padding-left: ", "px;\n border-radius: 0;\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, hasInvertedStyle
|
|
14561
14647
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14562
14648
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary);
|
|
14563
14649
|
};
|
|
14564
14650
|
var StyledTextItem = styled__default.default(Button, {
|
|
14565
14651
|
shouldForwardProp: function (prop) { return !ButtonDoNotForwardProps.includes(prop); },
|
|
14566
|
-
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n\n background: none;\n justify-content: flex-start;\n min-height: 44px;\n width: fit-content;\n min-width: unset;\n\n ", "\n"], ["\n ", "\n\n background: none;\n justify-content: flex-start;\n min-height: 44px;\n width: fit-content;\n min-width: unset;\n\n ", "\n"])), fontHeaderS, function (props) {
|
|
14652
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n\n background: none;\n justify-content: flex-start;\n min-height: 44px;\n width: fit-content;\n min-width: unset;\n padding: 0;\n\n ", "\n"], ["\n ", "\n\n background: none;\n justify-content: flex-start;\n min-height: 44px;\n width: fit-content;\n min-width: unset;\n padding: 0;\n\n ", "\n"])), fontHeaderS, function (props) {
|
|
14567
14653
|
var _a, _b;
|
|
14568
14654
|
var hasInvertedStyle = props.hasInvertedStyle, open = props.open, isNarrow = props.isNarrow;
|
|
14569
14655
|
var semanticColors = getSemanticColors(props);
|
|
@@ -14589,7 +14675,7 @@ var StyledTextItem = styled__default.default(Button, {
|
|
|
14589
14675
|
var doNotForwardProps$6 = ["hasInvertedStyle", "isNarrow"];
|
|
14590
14676
|
var StyledAccordion = styled__default.default(Accordion, {
|
|
14591
14677
|
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
14592
|
-
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width:
|
|
14678
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 100%;\n min-width: unset;\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"], ["\n width: 100%;\n min-width: unset;\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
14593
14679
|
var _a, _b;
|
|
14594
14680
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14595
14681
|
var spaces = getSpaces(props);
|
|
@@ -14620,7 +14706,7 @@ var StyledAccordion = styled__default.default(Accordion, {
|
|
|
14620
14706
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
|
|
14621
14707
|
});
|
|
14622
14708
|
var StyledSubItem = styled__default.default(MenuItem)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"], ["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"])));
|
|
14623
|
-
var templateObject_1$
|
|
14709
|
+
var templateObject_1$h, templateObject_2$9, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$1, templateObject_7;
|
|
14624
14710
|
|
|
14625
14711
|
function SecondaryNavItem(_a) {
|
|
14626
14712
|
var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, rest = __rest(_a, ["item", "hasInvertedStyle", "isNarrow"]);
|
|
@@ -14638,7 +14724,11 @@ function SecondaryNavItem(_a) {
|
|
|
14638
14724
|
}
|
|
14639
14725
|
setMenuWidth(button.offsetWidth);
|
|
14640
14726
|
}, []);
|
|
14641
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [item.itemType === "text" && (jsxRuntime.jsx(StyledTextItem, __assign({ sdsStyle: "minimal", onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { children: item.label }))), item.itemType === "dropdown" && !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledTextItem, { sdsStyle: "minimal", ref: buttonRef,
|
|
14727
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [item.itemType === "text" && (jsxRuntime.jsx(StyledTextItem, __assign({ sdsStyle: "minimal", onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { children: item.label }))), item.itemType === "dropdown" && !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledTextItem, __assign({ sdsStyle: "minimal", ref: buttonRef, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { onClick: function (event) {
|
|
14728
|
+
var _a;
|
|
14729
|
+
setAnchorEl(event.currentTarget);
|
|
14730
|
+
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
|
|
14731
|
+
}, children: [jsxRuntime.jsx("span", { children: item.label }), jsxRuntime.jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsxRuntime.jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, children: item.items.map(function (subItem) {
|
|
14642
14732
|
var label = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14643
14733
|
return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function () {
|
|
14644
14734
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
@@ -14660,28 +14750,85 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
14660
14750
|
}) }));
|
|
14661
14751
|
}
|
|
14662
14752
|
|
|
14753
|
+
function ElevationScroll(elevationProps) {
|
|
14754
|
+
var _a, _b, _c;
|
|
14755
|
+
var children = elevationProps.children, window = elevationProps.window, _d = elevationProps.shouldElevate, shouldElevate = _d === void 0 ? true : _d;
|
|
14756
|
+
var theme = material.useTheme();
|
|
14757
|
+
var mode = theme.palette.mode;
|
|
14758
|
+
var trigger = material.useScrollTrigger({
|
|
14759
|
+
disableHysteresis: true,
|
|
14760
|
+
target: window ? window() : undefined,
|
|
14761
|
+
threshold: 0,
|
|
14762
|
+
});
|
|
14763
|
+
var darkModeStyles = material.css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n "], ["\n border-bottom: 1px solid ", ";\n "])), (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.borderSecondary);
|
|
14764
|
+
/**
|
|
14765
|
+
* (masoudmanson): Elevation is set to 10 when the user scrolls and 0 otherwise.
|
|
14766
|
+
* MUI's elevation range is 0-24, but in the SDS theme, we have mapped:
|
|
14767
|
+
* - shadow.none to 0
|
|
14768
|
+
* - shadow.S to values 1-8
|
|
14769
|
+
* - shadow.M to values 9-16
|
|
14770
|
+
* - shadow.L to values 17-24
|
|
14771
|
+
*
|
|
14772
|
+
* Since the navigation requires a shadow.M drop shadow based on the design system,
|
|
14773
|
+
* any elevation value between 9 and 16 will produce the same effect.
|
|
14774
|
+
*/
|
|
14775
|
+
return children
|
|
14776
|
+
? React__namespace.default.cloneElement(children, {
|
|
14777
|
+
elevation: trigger && shouldElevate ? 14 : 0,
|
|
14778
|
+
sx: trigger && shouldElevate
|
|
14779
|
+
? __assign(__assign({}, (elevationProps.sx || {})), (mode === "dark" && darkModeStyles)) : undefined,
|
|
14780
|
+
})
|
|
14781
|
+
: null;
|
|
14782
|
+
}
|
|
14783
|
+
var templateObject_1$g;
|
|
14784
|
+
|
|
14663
14785
|
var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
14664
|
-
var
|
|
14786
|
+
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, _b = props.logoLinkComponent, logoLinkComponent = _b === void 0 ? "a" : _b, logoLinkProps = props.logoLinkProps, _c = props.scrollElevation, scrollElevation = _c === void 0 ? true : _c, primaryNavItems = props.primaryNavItems, _d = props.primaryNavPosition, primaryNavPosition = _d === void 0 ? "left" : _d, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _e = props.showSearch, showSearch = _e === void 0 ? true : _e, tag = props.tag, tagColor = props.tagColor, title = props.title, controlledDrawerOpen = props.drawerOpen, onDrawerOpenChange = props.setDrawerOpen, rest = __rest(props, ["activePrimaryNavKey", "buttons", "hasInvertedStyle", "logo", "logoUrl", "logoLinkComponent", "logoLinkProps", "scrollElevation", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title", "drawerOpen", "setDrawerOpen"]);
|
|
14665
14787
|
var navRef = React.useRef(null);
|
|
14666
14788
|
var theme = useTheme();
|
|
14667
14789
|
var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
14790
|
+
// Use controlled or uncontrolled drawer state
|
|
14791
|
+
var _f = React.useState(false), internalDrawerOpen = _f[0], setInternalDrawerOpen = _f[1];
|
|
14792
|
+
var drawerOpen = controlledDrawerOpen !== null && controlledDrawerOpen !== void 0 ? controlledDrawerOpen : internalDrawerOpen;
|
|
14793
|
+
var setDrawerOpen = function (open) {
|
|
14794
|
+
var newOpen = typeof open === "function" ? open(drawerOpen) : open;
|
|
14795
|
+
if (onDrawerOpenChange) {
|
|
14796
|
+
onDrawerOpenChange(newOpen);
|
|
14797
|
+
}
|
|
14798
|
+
else {
|
|
14799
|
+
setInternalDrawerOpen(newOpen);
|
|
14800
|
+
}
|
|
14801
|
+
};
|
|
14802
|
+
var _g = React.useState({
|
|
14803
|
+
breakpoint: 0,
|
|
14804
|
+
isNarrow: isMdScreen,
|
|
14805
|
+
}), dimensions = _g[0], setDimensions = _g[1];
|
|
14668
14806
|
React.useEffect(function () {
|
|
14669
|
-
|
|
14807
|
+
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
14670
14808
|
}, [isMdScreen]);
|
|
14671
|
-
var _d = React.useState(true), drawerOpen = _d[0], setDrawerOpen = _d[1];
|
|
14672
|
-
var _e = React.useState(isMdScreen), isNarrow = _e[0], setIsNarrow = _e[1];
|
|
14673
|
-
var _f = React.useState(0), breakpoint = _f[0], setBreakpoint = _f[1];
|
|
14674
14809
|
var checkScrollable = React.useCallback(function () {
|
|
14675
14810
|
if (!navRef.current)
|
|
14676
14811
|
return;
|
|
14677
14812
|
var clientWidth = navRef.current.clientWidth;
|
|
14678
14813
|
var scrollWidth = navRef.current.scrollWidth;
|
|
14679
14814
|
var needsScroll = scrollWidth > clientWidth;
|
|
14680
|
-
|
|
14681
|
-
|
|
14682
|
-
|
|
14683
|
-
|
|
14684
|
-
|
|
14815
|
+
setDimensions(function (prev) {
|
|
14816
|
+
var newBreakpoint = needsScroll
|
|
14817
|
+
? prev.breakpoint > scrollWidth
|
|
14818
|
+
? prev.breakpoint
|
|
14819
|
+
: scrollWidth
|
|
14820
|
+
: prev.breakpoint;
|
|
14821
|
+
var newIsNarrow = prev.isNarrow
|
|
14822
|
+
? clientWidth < newBreakpoint
|
|
14823
|
+
? true
|
|
14824
|
+
: false
|
|
14825
|
+
: needsScroll;
|
|
14826
|
+
return {
|
|
14827
|
+
breakpoint: newBreakpoint,
|
|
14828
|
+
isNarrow: newIsNarrow,
|
|
14829
|
+
};
|
|
14830
|
+
});
|
|
14831
|
+
}, []);
|
|
14685
14832
|
React.useEffect(function () {
|
|
14686
14833
|
checkScrollable();
|
|
14687
14834
|
var resizeObserver = new ResizeObserver(checkScrollable);
|
|
@@ -14689,46 +14836,59 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14689
14836
|
resizeObserver.observe(navRef.current);
|
|
14690
14837
|
}
|
|
14691
14838
|
return function () { return resizeObserver.disconnect(); };
|
|
14692
|
-
}, [
|
|
14839
|
+
}, [checkScrollable]);
|
|
14693
14840
|
var renderSearch = function () {
|
|
14694
|
-
return (showSearch && (jsxRuntime.jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, searchProps))));
|
|
14841
|
+
return (showSearch && (jsxRuntime.jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, searchProps))));
|
|
14695
14842
|
};
|
|
14696
14843
|
var renderLogoNode = function () {
|
|
14697
|
-
var logoNode = (jsxRuntime.jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLogoWrapper, { children: logo }), jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(StyledTag, { color: tagColor, label: tag, hover: false })] }));
|
|
14844
|
+
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, { color: tagColor, label: tag, hover: false })] })] }));
|
|
14698
14845
|
if (logoLinkComponent || logoUrl) {
|
|
14699
|
-
logoNode = (jsxRuntime.jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: isNarrow, children: logoNode })));
|
|
14846
|
+
logoNode = (jsxRuntime.jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: dimensions.isNarrow, children: logoNode })));
|
|
14700
14847
|
}
|
|
14701
14848
|
return logoNode;
|
|
14702
14849
|
};
|
|
14703
14850
|
var renderPrimaryNav = function () {
|
|
14704
|
-
return (
|
|
14705
|
-
setActivePrimaryNavKey &&
|
|
14851
|
+
return (setActivePrimaryNavKey &&
|
|
14706
14852
|
primaryNavItems &&
|
|
14707
|
-
primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow })));
|
|
14853
|
+
primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
14708
14854
|
};
|
|
14709
14855
|
var renderSecondaryNav = function () {
|
|
14710
14856
|
return (secondaryNavItems &&
|
|
14711
|
-
secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow })));
|
|
14857
|
+
secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
14712
14858
|
};
|
|
14713
14859
|
var renderButtonsNode = function () {
|
|
14714
14860
|
if (!buttons || buttons.length === 0)
|
|
14715
14861
|
return null;
|
|
14716
|
-
return (jsxRuntime.jsx(StyledButtonSection, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: buttons.map(function (buttonProps, idx) { return renderButton(buttonProps, idx); }) }));
|
|
14862
|
+
return (jsxRuntime.jsx(StyledButtonSection, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: buttons.map(function (buttonProps, idx) { return renderButton(buttonProps, idx); }) }));
|
|
14717
14863
|
};
|
|
14718
14864
|
var renderButton = function (buttonProps, idx) {
|
|
14719
|
-
var
|
|
14865
|
+
var _a;
|
|
14720
14866
|
var key = "button-".concat(idx);
|
|
14721
|
-
var fullWidth = isNarrow ? { width: "100%" } : undefined;
|
|
14722
|
-
if (
|
|
14723
|
-
return
|
|
14867
|
+
var fullWidth = dimensions.isNarrow ? { width: "100%" } : undefined;
|
|
14868
|
+
if (React__namespace.default.isValidElement(buttonProps)) {
|
|
14869
|
+
return React__namespace.default.cloneElement(buttonProps, {
|
|
14870
|
+
hasInvertedStyle: hasInvertedStyle,
|
|
14871
|
+
key: key,
|
|
14872
|
+
sx: __assign(__assign({}, (((_a = buttonProps.props) === null || _a === void 0 ? void 0 : _a.sx) || {})), fullWidth),
|
|
14873
|
+
});
|
|
14724
14874
|
}
|
|
14725
|
-
if (
|
|
14726
|
-
|
|
14875
|
+
if (typeof buttonProps === "object" && buttonProps !== null) {
|
|
14876
|
+
var buttonPropsObj = buttonProps;
|
|
14877
|
+
var isIconButton = "icon" in buttonPropsObj;
|
|
14878
|
+
if (isIconButton && dimensions.isNarrow && buttonPropsObj.icon) {
|
|
14879
|
+
return renderNarrowIconButton(buttonPropsObj, key, fullWidth);
|
|
14880
|
+
}
|
|
14881
|
+
if (isIconButton && !dimensions.isNarrow) {
|
|
14882
|
+
return renderWideIconButton(buttonPropsObj, key);
|
|
14883
|
+
}
|
|
14884
|
+
return renderDefaultButton(buttonPropsObj, key, fullWidth);
|
|
14727
14885
|
}
|
|
14728
|
-
return
|
|
14886
|
+
return null;
|
|
14887
|
+
};
|
|
14888
|
+
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(StyledNarrowIconButton, __assign({ sx: fullWidth, isAllCaps: false, startIcon: jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "Person" }), hasInvertedStyle: hasInvertedStyle }, buttonProps, { sdsStyle: "minimal", sdsType: "secondary", children: buttonProps.children }), key)); };
|
|
14889
|
+
var renderWideIconButton = function (buttonProps, key) {
|
|
14890
|
+
return (jsxRuntime.jsx(StyledWideIconButton, __assign({ sdsIconProps: { sdsSize: "l" }, "aria-label": String(buttonProps.children), hasInvertedStyle: hasInvertedStyle }, buttonProps, { sdsStyle: "icon", sdsType: "secondary", icon: buttonProps.icon }), key));
|
|
14729
14891
|
};
|
|
14730
|
-
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(StyledNarrowIconButton, { sx: fullWidth, sdsStyle: "minimal", sdsType: "secondary", isAllCaps: false, startIcon: jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "Person" }), hasInvertedStyle: hasInvertedStyle, children: buttonProps.children }, key)); };
|
|
14731
|
-
var renderWideIconButton = function (buttonProps, key) { return (jsxRuntime.jsx(StyledWideIconButton, { sdsIconProps: { sdsSize: "l" }, sdsStyle: "icon", sdsType: "secondary", icon: buttonProps.icon, "aria-label": String(buttonProps.children), hasInvertedStyle: hasInvertedStyle }, key)); };
|
|
14732
14892
|
var renderDefaultButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(StyledHeaderButton, __assign({ sx: fullWidth }, buttonProps, { sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle }), key)); };
|
|
14733
14893
|
var renderHeaderContent = function () {
|
|
14734
14894
|
var logoNode = renderLogoNode();
|
|
@@ -14736,14 +14896,14 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14736
14896
|
var primaryNav = renderPrimaryNav();
|
|
14737
14897
|
var secondaryNav = renderSecondaryNav();
|
|
14738
14898
|
var buttonsNode = renderButtonsNode();
|
|
14739
|
-
return (jsxRuntime.jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [logoNode, !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: isNarrow, children: primaryNavPosition === "left" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [primaryNav, search] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), isNarrow && (jsxRuntime.jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); } }))] }));
|
|
14899
|
+
return (jsxRuntime.jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logoNode, !dimensions.isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: dimensions.isNarrow, children: primaryNavPosition === "left" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [primaryNav, search] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), dimensions.isNarrow && (jsxRuntime.jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); }, hasInvertedStyle: hasInvertedStyle }))] }));
|
|
14740
14900
|
};
|
|
14741
14901
|
var headerContent = renderHeaderContent();
|
|
14742
14902
|
var search = renderSearch();
|
|
14743
14903
|
var primaryNav = renderPrimaryNav();
|
|
14744
14904
|
var secondaryNav = renderSecondaryNav();
|
|
14745
14905
|
var buttonsNode = renderButtonsNode();
|
|
14746
|
-
return (jsxRuntime.jsxs(
|
|
14906
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ElevationScroll, __assign({}, props, { shouldElevate: scrollElevation, children: jsxRuntime.jsx(StyledAppBar, __assign({ elevation: 0, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0, position: "sticky" }, rest, { children: headerContent })) })), dimensions.isNarrow && drawerOpen && (jsxRuntime.jsxs(StyledDrawer$1, { anchor: "right", open: drawerOpen, onClose: function () { return setDrawerOpen(false); }, hasInvertedStyle: hasInvertedStyle, role: "dialog", "aria-label": "Navigation menu", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ElevationScroll, __assign({}, props, { shouldElevate: scrollElevation, children: jsxRuntime.jsx(StyledAppBar, __assign({ elevation: 10, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0 }, rest, { position: "sticky", children: headerContent })) })), search, primaryNav, secondaryNav] }), buttonsNode] }))] }));
|
|
14747
14907
|
});
|
|
14748
14908
|
|
|
14749
14909
|
/**
|