@czi-sds/components 22.3.2 → 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 +31 -10
- package/dist/index.cjs.js +439 -283
- package/dist/index.esm.d.ts +31 -10
- package/dist/index.esm.js +440 -284
- 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); },
|
|
@@ -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/
|
|
@@ -7224,7 +7227,7 @@ var DialogContext = React.createContext({ sdsSize: "m" });
|
|
|
7224
7227
|
var doNotForwardProps$k = ["sdsSize"];
|
|
7225
7228
|
var StyledPaper = styled__default.default(material.Paper, {
|
|
7226
7229
|
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7227
|
-
})(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) {
|
|
7228
7231
|
var _a;
|
|
7229
7232
|
var spaces = getSpaces(props);
|
|
7230
7233
|
var corners = getCorners(props);
|
|
@@ -7255,7 +7258,7 @@ function paperDimensions(props) {
|
|
|
7255
7258
|
var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
|
|
7256
7259
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
7257
7260
|
}
|
|
7258
|
-
var templateObject_1$
|
|
7261
|
+
var templateObject_1$F;
|
|
7259
7262
|
|
|
7260
7263
|
/**
|
|
7261
7264
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -7287,12 +7290,12 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
|
7287
7290
|
var doNotForwardProps$j = ["buttonPosition"];
|
|
7288
7291
|
var StyledDialogActions = styled__default.default(material.DialogActions, {
|
|
7289
7292
|
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7290
|
-
})(templateObject_1$
|
|
7293
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
7291
7294
|
var spaces = getSpaces(props);
|
|
7292
7295
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
7293
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 ");
|
|
7294
7297
|
});
|
|
7295
|
-
var templateObject_1$
|
|
7298
|
+
var templateObject_1$E;
|
|
7296
7299
|
|
|
7297
7300
|
/**
|
|
7298
7301
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7301,8 +7304,8 @@ var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
|
|
7301
7304
|
return jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref }, props));
|
|
7302
7305
|
});
|
|
7303
7306
|
|
|
7304
|
-
var StyledDialogContent = styled__default.default(material.DialogContent)(templateObject_1$
|
|
7305
|
-
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;
|
|
7306
7309
|
|
|
7307
7310
|
var index = React.forwardRef(
|
|
7308
7311
|
/**
|
|
@@ -7312,11 +7315,11 @@ function DialogContent(props, ref) {
|
|
|
7312
7315
|
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
7313
7316
|
});
|
|
7314
7317
|
|
|
7315
|
-
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) {
|
|
7316
7319
|
var spaces = getSpaces(props);
|
|
7317
7320
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
7318
7321
|
});
|
|
7319
|
-
var templateObject_1$
|
|
7322
|
+
var templateObject_1$C;
|
|
7320
7323
|
|
|
7321
7324
|
var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
7322
7325
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
@@ -7332,7 +7335,7 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
7332
7335
|
} }));
|
|
7333
7336
|
});
|
|
7334
7337
|
|
|
7335
|
-
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) {
|
|
7336
7339
|
var spaces = getSpaces(props);
|
|
7337
7340
|
return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
|
|
7338
7341
|
});
|
|
@@ -7341,18 +7344,18 @@ var Title = styled__default.default(material.Typography)(templateObject_2$o || (
|
|
|
7341
7344
|
var semanticColors = getSemanticColors(props);
|
|
7342
7345
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
|
|
7343
7346
|
});
|
|
7344
|
-
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) {
|
|
7345
7348
|
var _a;
|
|
7346
7349
|
var semanticColors = getSemanticColors(props);
|
|
7347
7350
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
7348
7351
|
});
|
|
7349
|
-
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) {
|
|
7350
7353
|
var _a;
|
|
7351
7354
|
var semanticColors = getSemanticColors(props);
|
|
7352
7355
|
var spaces = getSpaces(props);
|
|
7353
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 ");
|
|
7354
7357
|
});
|
|
7355
|
-
var templateObject_1$
|
|
7358
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$h, templateObject_4$e;
|
|
7356
7359
|
|
|
7357
7360
|
/**
|
|
7358
7361
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7365,7 +7368,7 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
|
7365
7368
|
var doNotForwardProps$i = ["buttonPosition"];
|
|
7366
7369
|
var StyledButtonsWrapper = styled__default.default("div", {
|
|
7367
7370
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7368
|
-
})(templateObject_1$
|
|
7371
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7369
7372
|
var buttonPosition = props.buttonPosition;
|
|
7370
7373
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
7371
7374
|
});
|
|
@@ -7375,7 +7378,7 @@ var StyledButton = styled__default.default(Button, {
|
|
|
7375
7378
|
var spaces = getSpaces(props);
|
|
7376
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 ");
|
|
7377
7380
|
});
|
|
7378
|
-
var templateObject_1$
|
|
7381
|
+
var templateObject_1$A, templateObject_2$n;
|
|
7379
7382
|
|
|
7380
7383
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
7381
7384
|
var Dropdown = function (props) {
|
|
@@ -7511,7 +7514,7 @@ var intentToColor$1 = {
|
|
|
7511
7514
|
notice: "notice",
|
|
7512
7515
|
positive: "positive",
|
|
7513
7516
|
};
|
|
7514
|
-
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) {
|
|
7515
7518
|
var iconSizes = getIconSizes(props);
|
|
7516
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 ");
|
|
7517
7520
|
});
|
|
@@ -7523,13 +7526,13 @@ var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2
|
|
|
7523
7526
|
var borderColor = intentToColor$1[intent];
|
|
7524
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 ");
|
|
7525
7528
|
});
|
|
7526
|
-
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) {
|
|
7527
7530
|
var _a, _b;
|
|
7528
7531
|
var iconSizes = getIconSizes(props);
|
|
7529
7532
|
var semanticColors = getSemanticColors(props);
|
|
7530
|
-
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 ");
|
|
7531
7534
|
});
|
|
7532
|
-
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) {
|
|
7533
7536
|
var spaces = getSpaces(props);
|
|
7534
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 ");
|
|
7535
7538
|
});
|
|
@@ -7557,7 +7560,7 @@ var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel
|
|
|
7557
7560
|
var borders = getBorders(props);
|
|
7558
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 ");
|
|
7559
7562
|
});
|
|
7560
|
-
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;
|
|
7561
7564
|
|
|
7562
7565
|
/**
|
|
7563
7566
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -7592,7 +7595,7 @@ var intentToColor = {
|
|
|
7592
7595
|
notice: "notice",
|
|
7593
7596
|
positive: "positive",
|
|
7594
7597
|
};
|
|
7595
|
-
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) {
|
|
7596
7599
|
var _a;
|
|
7597
7600
|
var semanticColors = getSemanticColors(props);
|
|
7598
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 ");
|
|
@@ -7605,13 +7608,13 @@ var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$l
|
|
|
7605
7608
|
var borderColor = intentToColor[intent];
|
|
7606
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 ");
|
|
7607
7610
|
});
|
|
7608
|
-
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) {
|
|
7609
7612
|
var _a;
|
|
7610
7613
|
var iconSizes = getIconSizes(props);
|
|
7611
7614
|
var semanticColors = getSemanticColors(props);
|
|
7612
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 ");
|
|
7613
7616
|
});
|
|
7614
|
-
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) {
|
|
7615
7618
|
var spaces = getSpaces(props);
|
|
7616
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 ");
|
|
7617
7620
|
});
|
|
@@ -7637,7 +7640,7 @@ var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(
|
|
|
7637
7640
|
var semanticColors = getSemanticColors(props);
|
|
7638
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 ");
|
|
7639
7642
|
});
|
|
7640
|
-
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;
|
|
7641
7644
|
|
|
7642
7645
|
/**
|
|
7643
7646
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -7683,11 +7686,11 @@ var disabledSlider = function (props) {
|
|
|
7683
7686
|
var semanticColors = getSemanticColors(props);
|
|
7684
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 ");
|
|
7685
7688
|
};
|
|
7686
|
-
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) {
|
|
7687
7690
|
var disabled = props.disabled;
|
|
7688
7691
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
7689
7692
|
});
|
|
7690
|
-
var templateObject_1$
|
|
7693
|
+
var templateObject_1$x;
|
|
7691
7694
|
|
|
7692
7695
|
/**
|
|
7693
7696
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -7702,7 +7705,7 @@ var applyIntentColor = function (props, intent) {
|
|
|
7702
7705
|
var _a, _b, _c, _d;
|
|
7703
7706
|
var borders = getBorders(props);
|
|
7704
7707
|
var semanticColors = getSemanticColors(props);
|
|
7705
|
-
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);
|
|
7706
7709
|
};
|
|
7707
7710
|
var disabledStyled$1 = function (props) {
|
|
7708
7711
|
var _a, _b, _c;
|
|
@@ -7712,9 +7715,9 @@ var disabledStyled$1 = function (props) {
|
|
|
7712
7715
|
};
|
|
7713
7716
|
var textArea = function (props) {
|
|
7714
7717
|
var spaces = getSpaces(props);
|
|
7715
|
-
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);
|
|
7716
7719
|
};
|
|
7717
|
-
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) {
|
|
7718
7721
|
var spaces = getSpaces(props);
|
|
7719
7722
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7720
7723
|
});
|
|
@@ -7723,14 +7726,15 @@ var StyledInputBase = styled__default.default(material.TextField, {
|
|
|
7723
7726
|
return !sdsPropNames$1.includes(prop.toString());
|
|
7724
7727
|
},
|
|
7725
7728
|
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7726
|
-
var _a, _b, _c;
|
|
7729
|
+
var _a, _b, _c, _d;
|
|
7727
7730
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
7728
7731
|
var spaces = getSpaces(props);
|
|
7729
7732
|
var borders = getBorders(props);
|
|
7730
7733
|
var corners = getCorners(props);
|
|
7731
|
-
|
|
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));
|
|
7732
7736
|
});
|
|
7733
|
-
var templateObject_1$
|
|
7737
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$e, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
7734
7738
|
|
|
7735
7739
|
/**
|
|
7736
7740
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -7791,11 +7795,11 @@ var toggleOff = function (props) {
|
|
|
7791
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 &&
|
|
7792
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 ");
|
|
7793
7797
|
};
|
|
7794
|
-
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) {
|
|
7795
7799
|
var checked = props.checked;
|
|
7796
7800
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
7797
7801
|
});
|
|
7798
|
-
var templateObject_1$
|
|
7802
|
+
var templateObject_1$v;
|
|
7799
7803
|
|
|
7800
7804
|
/**
|
|
7801
7805
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -7817,7 +7821,7 @@ var doNotForwardProps$h = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
|
7817
7821
|
var defaultStyle = function (props) {
|
|
7818
7822
|
var _a, _b, _c, _d;
|
|
7819
7823
|
var semanticColors = getSemanticColors(props);
|
|
7820
|
-
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);
|
|
7821
7825
|
};
|
|
7822
7826
|
var dashedStyle = function () {
|
|
7823
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 "])));
|
|
@@ -7832,11 +7836,11 @@ var StyledLink = styled__default.default(material.Link, {
|
|
|
7832
7836
|
shouldForwardProp: function (prop) {
|
|
7833
7837
|
return !doNotForwardProps$h.includes(prop.toString());
|
|
7834
7838
|
},
|
|
7835
|
-
})(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) {
|
|
7836
7840
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7837
|
-
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");
|
|
7838
7842
|
});
|
|
7839
|
-
var templateObject_1$
|
|
7843
|
+
var templateObject_1$u, templateObject_2$j, templateObject_3$d, templateObject_4$a;
|
|
7840
7844
|
|
|
7841
7845
|
/**
|
|
7842
7846
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -7854,7 +7858,7 @@ var Link = React.forwardRef(function (props, ref) {
|
|
|
7854
7858
|
var doNotForwardProps$g = ["marginBottom", "ordered"];
|
|
7855
7859
|
var StyledList = styled__default.default(material.List, {
|
|
7856
7860
|
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
7857
|
-
})(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) {
|
|
7858
7862
|
if (!props.ordered)
|
|
7859
7863
|
return "";
|
|
7860
7864
|
return "\n counter-reset: section;\n ";
|
|
@@ -7872,7 +7876,7 @@ function propsToMarginBottom$1(props) {
|
|
|
7872
7876
|
var marginBottom = props.marginBottom;
|
|
7873
7877
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
7874
7878
|
}
|
|
7875
|
-
var templateObject_1$
|
|
7879
|
+
var templateObject_1$t;
|
|
7876
7880
|
|
|
7877
7881
|
/**
|
|
7878
7882
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7892,7 +7896,7 @@ var fontBodyXxxs = fontBody("xxxs");
|
|
|
7892
7896
|
var doNotForwardProps$f = ["marginBottom", "fontSize", "ordered"];
|
|
7893
7897
|
var StyledListItem = styled__default.default(material.ListItem, {
|
|
7894
7898
|
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
7895
|
-
})(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) {
|
|
7896
7900
|
var ordered = props.ordered;
|
|
7897
7901
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
7898
7902
|
}, function (props) {
|
|
@@ -7927,7 +7931,7 @@ var ListItemLabel = styled__default.default("span")(templateObject_2$i || (templ
|
|
|
7927
7931
|
var fontWeights = getFontWeights(props);
|
|
7928
7932
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
7929
7933
|
});
|
|
7930
|
-
var templateObject_1$
|
|
7934
|
+
var templateObject_1$s, templateObject_2$i;
|
|
7931
7935
|
|
|
7932
7936
|
/**
|
|
7933
7937
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7937,11 +7941,11 @@ var ListItem = function (props) {
|
|
|
7937
7941
|
};
|
|
7938
7942
|
|
|
7939
7943
|
var fontHeaderM = fontHeader("m");
|
|
7940
|
-
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) {
|
|
7941
7945
|
var spaces = getSpaces(props);
|
|
7942
7946
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7943
7947
|
});
|
|
7944
|
-
var templateObject_1$
|
|
7948
|
+
var templateObject_1$r;
|
|
7945
7949
|
|
|
7946
7950
|
/**
|
|
7947
7951
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7950,7 +7954,7 @@ var ListSubheader = function (props) {
|
|
|
7950
7954
|
return jsxRuntime.jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
7951
7955
|
};
|
|
7952
7956
|
|
|
7953
|
-
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) {
|
|
7954
7958
|
var spaces = getSpaces(props);
|
|
7955
7959
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7956
7960
|
});
|
|
@@ -7964,7 +7968,7 @@ var tag = function (props) {
|
|
|
7964
7968
|
var _a, _b, _c;
|
|
7965
7969
|
var corners = getCorners(props);
|
|
7966
7970
|
var semanticColors = getSemanticColors(props);
|
|
7967
|
-
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);
|
|
7968
7972
|
};
|
|
7969
7973
|
var doNotForwardProps$e = ["sdsStyle"];
|
|
7970
7974
|
var StyledLoadingIndicator = styled__default.default("div", {
|
|
@@ -7972,23 +7976,23 @@ var StyledLoadingIndicator = styled__default.default("div", {
|
|
|
7972
7976
|
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7973
7977
|
var sdsStyle = props.sdsStyle;
|
|
7974
7978
|
var spaces = getSpaces(props);
|
|
7975
|
-
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);
|
|
7976
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));
|
|
7977
7981
|
});
|
|
7978
|
-
var templateObject_1$
|
|
7982
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$9, templateObject_5$6, templateObject_6$5;
|
|
7979
7983
|
|
|
7980
7984
|
var LoadingIndicator = function (_a) {
|
|
7981
7985
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
7982
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" })] }));
|
|
7983
7987
|
};
|
|
7984
7988
|
|
|
7985
|
-
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) {
|
|
7986
7990
|
var _a;
|
|
7987
7991
|
var spaces = getSpaces(props);
|
|
7988
7992
|
var semanticColors = getSemanticColors(props);
|
|
7989
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 ");
|
|
7990
7994
|
});
|
|
7991
|
-
var templateObject_1$
|
|
7995
|
+
var templateObject_1$p;
|
|
7992
7996
|
|
|
7993
7997
|
var ANCHOR_ORIGIN = {
|
|
7994
7998
|
horizontal: "center",
|
|
@@ -8005,7 +8009,7 @@ var Menu = function (props) {
|
|
|
8005
8009
|
return (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
8006
8010
|
};
|
|
8007
8011
|
|
|
8008
|
-
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"])));
|
|
8009
8013
|
var doNotForwardProps$d = ["search", "InputBaseProps", "keepSearchOnSelect"];
|
|
8010
8014
|
// (thuang): Casting the type to `Autocomplete`
|
|
8011
8015
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
@@ -8017,7 +8021,7 @@ var StyledAutocomplete = styled__default.default(material.Autocomplete, {
|
|
|
8017
8021
|
});
|
|
8018
8022
|
var InputBaseWrapper = styled__default.default("div", {
|
|
8019
8023
|
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8020
|
-
})(templateObject_3$
|
|
8024
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8021
8025
|
var search = props.search;
|
|
8022
8026
|
if (!search) {
|
|
8023
8027
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -8030,11 +8034,11 @@ var InputBaseWrapper = styled__default.default("div", {
|
|
|
8030
8034
|
});
|
|
8031
8035
|
var StyledMenuInputSearch = styled__default.default(InputSearch, {
|
|
8032
8036
|
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8033
|
-
})(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) {
|
|
8034
8038
|
var search = _a.search;
|
|
8035
8039
|
return (search ? "auto" : "transparent");
|
|
8036
8040
|
});
|
|
8037
|
-
var templateObject_1$
|
|
8041
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$8;
|
|
8038
8042
|
|
|
8039
8043
|
/**
|
|
8040
8044
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -8088,13 +8092,13 @@ var MenuSelect = function (props) {
|
|
|
8088
8092
|
var doNotForwardProps$c = ["hasInvertedStyle", "isNarrow"];
|
|
8089
8093
|
var StyledFooter = styled__default.default("footer", {
|
|
8090
8094
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8091
|
-
})(templateObject_3$
|
|
8095
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8092
8096
|
var isNarrow = props.isNarrow;
|
|
8093
8097
|
var spaces = getSpaces(props);
|
|
8094
8098
|
var semanticColors = getSemanticColors(props);
|
|
8095
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
|
|
8096
8100
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryInverse
|
|
8097
|
-
: 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
|
|
8098
8102
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
8099
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));
|
|
8100
8104
|
});
|
|
@@ -8102,7 +8106,7 @@ var StyledLogoWrapper$1 = styled__default.default("div", {
|
|
|
8102
8106
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8103
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) {
|
|
8104
8108
|
var spaces = getSpaces(props);
|
|
8105
|
-
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);
|
|
8106
8110
|
}, fontHeader("l"), fontHeader("l", /* isNarrow */ true), function (props) {
|
|
8107
8111
|
var semanticColors = getSemanticColors(props);
|
|
8108
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
|
|
@@ -8133,11 +8137,11 @@ var StyledLinkSection = styled__default.default("div", {
|
|
|
8133
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) {
|
|
8134
8138
|
var isNarrow = props.isNarrow;
|
|
8135
8139
|
var spaces = getSpaces(props);
|
|
8136
|
-
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));
|
|
8137
8141
|
});
|
|
8138
|
-
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) {
|
|
8139
8143
|
var spaces = getSpaces(props);
|
|
8140
|
-
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 ");
|
|
8141
8145
|
});
|
|
8142
8146
|
var StyledImageSection = styled__default.default("div", {
|
|
8143
8147
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
@@ -8146,7 +8150,7 @@ var StyledImageSection = styled__default.default("div", {
|
|
|
8146
8150
|
var spaces = getSpaces(props);
|
|
8147
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));
|
|
8148
8152
|
});
|
|
8149
|
-
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) {
|
|
8150
8154
|
var spaces = getSpaces(props);
|
|
8151
8155
|
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n ");
|
|
8152
8156
|
});
|
|
@@ -8157,7 +8161,7 @@ var StyledBottomSection = styled__default.default("div", {
|
|
|
8157
8161
|
var spaces = getSpaces(props);
|
|
8158
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));
|
|
8159
8163
|
});
|
|
8160
|
-
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;
|
|
8161
8165
|
|
|
8162
8166
|
/**
|
|
8163
8167
|
* WARNING: Don't import this directly.
|
|
@@ -14180,7 +14184,7 @@ function useTheme() {
|
|
|
14180
14184
|
var doNotForwardProps$b = ["hasInvertedStyle", "isNarrow"];
|
|
14181
14185
|
var NarrowNavItemLinkStyles = function (props) {
|
|
14182
14186
|
var semanticColors = getSemanticColors(props);
|
|
14183
|
-
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
|
|
14184
14188
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14185
14189
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, props.hasInvertedStyle
|
|
14186
14190
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
@@ -14188,7 +14192,7 @@ var NarrowNavItemLinkStyles = function (props) {
|
|
|
14188
14192
|
};
|
|
14189
14193
|
var StyledNavItemLink = styled__default.default(Link, {
|
|
14190
14194
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
14191
|
-
})(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) {
|
|
14192
14196
|
var isNarrow = props.isNarrow;
|
|
14193
14197
|
var semanticColors = getSemanticColors(props);
|
|
14194
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
|
|
@@ -14197,7 +14201,7 @@ var StyledNavItemLink = styled__default.default(Link, {
|
|
|
14197
14201
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14198
14202
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && NarrowNavItemLinkStyles(props));
|
|
14199
14203
|
});
|
|
14200
|
-
var templateObject_1$
|
|
14204
|
+
var templateObject_1$m, templateObject_2$e, templateObject_3$9;
|
|
14201
14205
|
|
|
14202
14206
|
var NavItem = React.memo(function (_a) {
|
|
14203
14207
|
var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
@@ -14205,39 +14209,102 @@ var NavItem = React.memo(function (_a) {
|
|
|
14205
14209
|
});
|
|
14206
14210
|
NavItem.displayName = "NavItem";
|
|
14207
14211
|
|
|
14208
|
-
var doNotForwardProps$a = ["hasInvertedStyle"];
|
|
14212
|
+
var doNotForwardProps$a = ["hasInvertedStyle", "showDivider"];
|
|
14209
14213
|
var StyledLinkItemLink = styled__default.default(Link, {
|
|
14210
14214
|
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14211
|
-
})(
|
|
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);
|
|
14212
14218
|
var semanticColors = getSemanticColors(props);
|
|
14213
|
-
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));
|
|
14214
14226
|
});
|
|
14215
14227
|
var StyledDivider = styled__default.default(material.Divider, {
|
|
14216
14228
|
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14217
|
-
})(
|
|
14229
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14218
14230
|
var semanticColors = getSemanticColors(props);
|
|
14219
14231
|
return "\n border-color: ".concat(props.hasInvertedStyle
|
|
14220
14232
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14221
14233
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, ";\n ");
|
|
14222
14234
|
});
|
|
14223
|
-
var templateObject_1$
|
|
14235
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$8, templateObject_4$6;
|
|
14224
14236
|
|
|
14225
|
-
var FooterLink = React.memo(function (_a) {
|
|
14237
|
+
var FooterLink = React.memo(React.forwardRef(function (_a, ref) {
|
|
14226
14238
|
var link = _a.link, showDivider = _a.showDivider, hasInvertedStyle = _a.hasInvertedStyle;
|
|
14227
|
-
return (jsxRuntime.
|
|
14228
|
-
});
|
|
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
|
+
}));
|
|
14229
14241
|
FooterLink.displayName = "FooterLink";
|
|
14230
14242
|
|
|
14231
|
-
|
|
14232
|
-
|
|
14233
|
-
|
|
14234
|
-
|
|
14235
|
-
|
|
14236
|
-
|
|
14237
|
-
|
|
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
|
+
|
|
14238
14305
|
var MemoizedStyledDivider = React.memo(StyledDivider);
|
|
14239
14306
|
function NavigationFooter(_a) {
|
|
14240
|
-
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"]);
|
|
14241
14308
|
var footerRef = React.useRef(null);
|
|
14242
14309
|
var theme = useTheme();
|
|
14243
14310
|
var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
@@ -14255,12 +14322,19 @@ function NavigationFooter(_a) {
|
|
|
14255
14322
|
var scrollWidth = footerRef.current.scrollWidth;
|
|
14256
14323
|
var needsScroll = scrollWidth > clientWidth;
|
|
14257
14324
|
setDimensions(function (prev) {
|
|
14258
|
-
var newBreakpoint = needsScroll
|
|
14259
|
-
?
|
|
14325
|
+
var newBreakpoint = needsScroll
|
|
14326
|
+
? prev.breakpoint > scrollWidth
|
|
14327
|
+
? prev.breakpoint
|
|
14328
|
+
: scrollWidth
|
|
14260
14329
|
: prev.breakpoint;
|
|
14330
|
+
var newIsNarrow = prev.isNarrow
|
|
14331
|
+
? clientWidth < newBreakpoint
|
|
14332
|
+
? true
|
|
14333
|
+
: false
|
|
14334
|
+
: needsScroll;
|
|
14261
14335
|
return {
|
|
14262
14336
|
breakpoint: newBreakpoint,
|
|
14263
|
-
isNarrow:
|
|
14337
|
+
isNarrow: newIsNarrow,
|
|
14264
14338
|
};
|
|
14265
14339
|
});
|
|
14266
14340
|
}, []);
|
|
@@ -14275,16 +14349,11 @@ function NavigationFooter(_a) {
|
|
|
14275
14349
|
var renderImages = React.useCallback(function () {
|
|
14276
14350
|
if (!(images === null || images === void 0 ? void 0 : images.length))
|
|
14277
14351
|
return null;
|
|
14278
|
-
|
|
14279
|
-
|
|
14280
|
-
|
|
14281
|
-
|
|
14282
|
-
|
|
14283
|
-
}
|
|
14284
|
-
return groupArray(images, 2).map(function (imageGroup, index) { return (jsxRuntime.jsx(StyledMobileImageRow, { children: imageGroup.map(function (_a) {
|
|
14285
|
-
var image = _a.image, url = _a.url;
|
|
14286
|
-
return (jsxRuntime.jsx(Link, { href: url, children: image }, url));
|
|
14287
|
-
}) }, 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);
|
|
14288
14357
|
}, [images, dimensions.isNarrow]);
|
|
14289
14358
|
var renderLinks = React.useCallback(function () {
|
|
14290
14359
|
if (!(navLinks === null || navLinks === void 0 ? void 0 : navLinks.length))
|
|
@@ -14292,19 +14361,21 @@ function NavigationFooter(_a) {
|
|
|
14292
14361
|
if (!dimensions.isNarrow) {
|
|
14293
14362
|
return navLinks.map(function (link, index) { return (jsxRuntime.jsx(FooterLink, { link: link, showDivider: index < navLinks.length - 1, hasInvertedStyle: hasInvertedStyle }, link.label)); });
|
|
14294
14363
|
}
|
|
14295
|
-
return
|
|
14364
|
+
return (jsxRuntime.jsx(MobileLinkRow, { links: navLinks, hasInvertedStyle: hasInvertedStyle }));
|
|
14296
14365
|
}, [navLinks, dimensions.isNarrow, hasInvertedStyle]);
|
|
14297
14366
|
var logoNode = React.useMemo(function () {
|
|
14298
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 })] }));
|
|
14299
|
-
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);
|
|
14300
14369
|
}, [
|
|
14370
|
+
dimensions.isNarrow,
|
|
14371
|
+
hasInvertedStyle,
|
|
14301
14372
|
logo,
|
|
14302
14373
|
title,
|
|
14303
14374
|
tag,
|
|
14304
14375
|
tagColor,
|
|
14305
14376
|
logoUrl,
|
|
14306
|
-
|
|
14307
|
-
|
|
14377
|
+
logoComponent,
|
|
14378
|
+
logoLinkProps,
|
|
14308
14379
|
]);
|
|
14309
14380
|
var navItemsSection = React.useMemo(function () {
|
|
14310
14381
|
if (!(navItems === null || navItems === void 0 ? void 0 : navItems.length))
|
|
@@ -14322,15 +14393,15 @@ var doNotForwardProps$9 = [
|
|
|
14322
14393
|
"logoLinkComponent",
|
|
14323
14394
|
"logoLinkProps",
|
|
14324
14395
|
];
|
|
14325
|
-
var
|
|
14396
|
+
var StyledAppBar = styled__default.default(material.AppBar, {
|
|
14326
14397
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14327
|
-
})(templateObject_1$
|
|
14398
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14328
14399
|
var colors = getSemanticColors(props);
|
|
14329
|
-
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 ");
|
|
14330
14401
|
});
|
|
14331
14402
|
var NarrowToolbar = function (props) {
|
|
14332
14403
|
var semanticColors = getSemanticColors(props);
|
|
14333
|
-
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
|
|
14334
14405
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14335
14406
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, props.hasInvertedStyle
|
|
14336
14407
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryInverse
|
|
@@ -14343,13 +14414,13 @@ var StyledToolbar = styled__default.default(material.Toolbar, {
|
|
|
14343
14414
|
var spaces = getSpaces(props);
|
|
14344
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));
|
|
14345
14416
|
});
|
|
14346
|
-
|
|
14417
|
+
styled__default.default("div", {
|
|
14347
14418
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14348
14419
|
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14349
14420
|
var shadows = getShadows(props);
|
|
14350
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 ");
|
|
14351
14422
|
});
|
|
14352
|
-
|
|
14423
|
+
styled__default.default("div", {
|
|
14353
14424
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14354
14425
|
})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14355
14426
|
var colors = getSemanticColors(props);
|
|
@@ -14385,7 +14456,7 @@ var StyledWideIconButton = styled__default.default(Button, {
|
|
|
14385
14456
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14386
14457
|
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14387
14458
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14388
|
-
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));
|
|
14389
14460
|
});
|
|
14390
14461
|
var StyledLogoLinkWrapper = styled__default.default(Link, {
|
|
14391
14462
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
@@ -14394,57 +14465,64 @@ var StyledLogoLinkWrapper = styled__default.default(Link, {
|
|
|
14394
14465
|
return material.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), isNarrow ? "100%" : "auto");
|
|
14395
14466
|
});
|
|
14396
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"])));
|
|
14397
|
-
var NarrowTitleContainer = function (
|
|
14398
|
-
|
|
14399
|
-
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 "])));
|
|
14400
14470
|
};
|
|
14401
14471
|
var StyledTitleContainer = styled__default.default("div", {
|
|
14402
14472
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14403
|
-
})(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) {
|
|
14404
14474
|
var isNarrow = props.isNarrow;
|
|
14405
14475
|
var colors = getSemanticColors(props);
|
|
14406
14476
|
var spaces = getSpaces(props);
|
|
14407
|
-
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
|
|
14408
14478
|
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
|
|
14409
|
-
: 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 ");
|
|
14410
14486
|
});
|
|
14411
|
-
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));
|
|
14412
14488
|
var StyledPrimaryNavContainer = styled__default.default("div", {
|
|
14413
14489
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14414
|
-
})(
|
|
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) {
|
|
14415
14491
|
var showSearch = props.showSearch, primaryNavPosition = props.primaryNavPosition, isNarrow = props.isNarrow;
|
|
14416
14492
|
var spaces = getSpaces(props);
|
|
14417
14493
|
var primaryNavPositionWithSearch = primaryNavPosition === "left" ? "flex-start" : "space-between";
|
|
14418
14494
|
var primaryNavPositionWithoutSearch = primaryNavPosition === "left" ? "flex-start" : "flex-end";
|
|
14419
|
-
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
|
|
14420
14496
|
? primaryNavPositionWithSearch
|
|
14421
14497
|
: primaryNavPositionWithoutSearch);
|
|
14422
14498
|
});
|
|
14423
14499
|
var StyledSearch = styled__default.default(InputSearch, {
|
|
14424
14500
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14425
|
-
})(
|
|
14426
|
-
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;
|
|
14427
14503
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14428
14504
|
var spaces = getSpaces(props);
|
|
14429
14505
|
var semanticColors = getSemanticColors(props);
|
|
14430
|
-
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
|
|
14431
14507
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14432
14508
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14433
14509
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryInverse
|
|
14434
14510
|
: "", hasInvertedStyle
|
|
14435
|
-
? (_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
|
|
14436
14514
|
: "", hasInvertedStyle
|
|
14437
|
-
? (
|
|
14515
|
+
? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryHoverInverse
|
|
14438
14516
|
: "", hasInvertedStyle
|
|
14439
|
-
? (
|
|
14517
|
+
? (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentPrimaryInverse
|
|
14440
14518
|
: "", hasInvertedStyle
|
|
14441
|
-
? (
|
|
14519
|
+
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimaryPressedInverse
|
|
14442
14520
|
: "", hasInvertedStyle
|
|
14443
|
-
? (
|
|
14521
|
+
? (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse
|
|
14444
14522
|
: "", hasInvertedStyle
|
|
14445
|
-
? (
|
|
14523
|
+
? (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryDisabledInverse
|
|
14446
14524
|
: "", hasInvertedStyle
|
|
14447
|
-
? (
|
|
14525
|
+
? (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentDisabledInverse
|
|
14448
14526
|
: "");
|
|
14449
14527
|
});
|
|
14450
14528
|
var NarrowButtonStyles = function (props) {
|
|
@@ -14454,23 +14532,28 @@ var NarrowButtonStyles = function (props) {
|
|
|
14454
14532
|
var backgroundColor = props.hasInvertedStyle
|
|
14455
14533
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse
|
|
14456
14534
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary;
|
|
14457
|
-
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);
|
|
14458
14536
|
};
|
|
14459
14537
|
var StyledButtonSection = styled__default.default("section", {
|
|
14460
14538
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14461
|
-
})(
|
|
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) {
|
|
14462
14540
|
var isNarrow = props.isNarrow;
|
|
14463
14541
|
var spaces = getSpaces(props);
|
|
14464
|
-
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));
|
|
14465
14543
|
});
|
|
14466
14544
|
var StyledDrawer$1 = styled__default.default(material.Drawer, {
|
|
14467
14545
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14468
|
-
})(
|
|
14546
|
+
})(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14469
14547
|
var colors = getSemanticColors(props);
|
|
14470
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 ");
|
|
14471
14549
|
});
|
|
14472
|
-
var StyledNarrowButton = styled__default.default(Button
|
|
14473
|
-
|
|
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;
|
|
14474
14557
|
|
|
14475
14558
|
var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
|
|
14476
14559
|
var NarrowPrimaryNavItem = function (props) {
|
|
@@ -14487,13 +14570,13 @@ var NarrowPrimaryNavItem = function (props) {
|
|
|
14487
14570
|
var inactiveBorderColor = hasInvertedStyle
|
|
14488
14571
|
? (_c = colors === null || colors === void 0 ? void 0 : colors.neutral) === null || _c === void 0 ? void 0 : _c.fillPrimary
|
|
14489
14572
|
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
14490
|
-
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
|
|
14491
14574
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondaryInverse
|
|
14492
14575
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : inactiveBorderColor);
|
|
14493
14576
|
};
|
|
14494
14577
|
var PrimaryNavItem = styled__default.default(Button, {
|
|
14495
14578
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
14496
|
-
})(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) {
|
|
14497
14580
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14498
14581
|
var spaces = getSpaces(props);
|
|
14499
14582
|
var colors = getSemanticColors(props);
|
|
@@ -14505,14 +14588,13 @@ var WideStyledLabel = function (props) {
|
|
|
14505
14588
|
var _a, _b;
|
|
14506
14589
|
var hasInvertedStyle = props.hasInvertedStyle, active = props.active;
|
|
14507
14590
|
var colors = getSemanticColors(props);
|
|
14508
|
-
var spaces = getSpaces(props);
|
|
14509
14591
|
var activeBorderColor = hasInvertedStyle
|
|
14510
14592
|
? (_a = colors === null || colors === void 0 ? void 0 : colors.base) === null || _a === void 0 ? void 0 : _a.borderOnFill
|
|
14511
14593
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
14512
14594
|
var inactiveBorderColor = hasInvertedStyle
|
|
14513
14595
|
? colors === null || colors === void 0 ? void 0 : colors.base.borderOnFill
|
|
14514
14596
|
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
14515
|
-
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);
|
|
14516
14598
|
};
|
|
14517
14599
|
var StyledLabel = styled__default.default("span", {
|
|
14518
14600
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
@@ -14527,11 +14609,11 @@ var StyledLabel = styled__default.default("span", {
|
|
|
14527
14609
|
: colors === null || colors === void 0 ? void 0 : colors.base.textSecondary;
|
|
14528
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));
|
|
14529
14611
|
});
|
|
14530
|
-
var templateObject_1$
|
|
14612
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$6, templateObject_4$4, templateObject_5$3, templateObject_6$2;
|
|
14531
14613
|
|
|
14532
14614
|
var doNotForwardProps$7 = ["isNarrow"];
|
|
14533
14615
|
var NarrowStyledSection = function () {
|
|
14534
|
-
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 "])));
|
|
14535
14617
|
};
|
|
14536
14618
|
var StyledSection = styled__default.default("section", {
|
|
14537
14619
|
shouldForwardProp: function (prop) { return !doNotForwardProps$7.includes(prop); },
|
|
@@ -14541,7 +14623,7 @@ var StyledSection = styled__default.default("section", {
|
|
|
14541
14623
|
var spaces = getSpaces(props);
|
|
14542
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());
|
|
14543
14625
|
});
|
|
14544
|
-
var templateObject_1$
|
|
14626
|
+
var templateObject_1$i, templateObject_2$a, templateObject_3$5;
|
|
14545
14627
|
|
|
14546
14628
|
function NavigationHeaderPrimaryNav(_a) {
|
|
14547
14629
|
var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
@@ -14561,13 +14643,13 @@ var NarrowStyledTextItem = function (props) {
|
|
|
14561
14643
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14562
14644
|
var semanticColors = getSemanticColors(props);
|
|
14563
14645
|
var spaces = getSpaces(props);
|
|
14564
|
-
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
|
|
14565
14647
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14566
14648
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary);
|
|
14567
14649
|
};
|
|
14568
14650
|
var StyledTextItem = styled__default.default(Button, {
|
|
14569
14651
|
shouldForwardProp: function (prop) { return !ButtonDoNotForwardProps.includes(prop); },
|
|
14570
|
-
})(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) {
|
|
14571
14653
|
var _a, _b;
|
|
14572
14654
|
var hasInvertedStyle = props.hasInvertedStyle, open = props.open, isNarrow = props.isNarrow;
|
|
14573
14655
|
var semanticColors = getSemanticColors(props);
|
|
@@ -14593,7 +14675,7 @@ var StyledTextItem = styled__default.default(Button, {
|
|
|
14593
14675
|
var doNotForwardProps$6 = ["hasInvertedStyle", "isNarrow"];
|
|
14594
14676
|
var StyledAccordion = styled__default.default(Accordion, {
|
|
14595
14677
|
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
14596
|
-
})(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) {
|
|
14597
14679
|
var _a, _b;
|
|
14598
14680
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14599
14681
|
var spaces = getSpaces(props);
|
|
@@ -14624,7 +14706,7 @@ var StyledAccordion = styled__default.default(Accordion, {
|
|
|
14624
14706
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
|
|
14625
14707
|
});
|
|
14626
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"])));
|
|
14627
|
-
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;
|
|
14628
14710
|
|
|
14629
14711
|
function SecondaryNavItem(_a) {
|
|
14630
14712
|
var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, rest = __rest(_a, ["item", "hasInvertedStyle", "isNarrow"]);
|
|
@@ -14642,7 +14724,11 @@ function SecondaryNavItem(_a) {
|
|
|
14642
14724
|
}
|
|
14643
14725
|
setMenuWidth(button.offsetWidth);
|
|
14644
14726
|
}, []);
|
|
14645
|
-
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) {
|
|
14646
14732
|
var label = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14647
14733
|
return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function () {
|
|
14648
14734
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
@@ -14664,28 +14750,85 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
14664
14750
|
}) }));
|
|
14665
14751
|
}
|
|
14666
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
|
+
|
|
14667
14785
|
var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
14668
|
-
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"]);
|
|
14669
14787
|
var navRef = React.useRef(null);
|
|
14670
14788
|
var theme = useTheme();
|
|
14671
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];
|
|
14672
14806
|
React.useEffect(function () {
|
|
14673
|
-
|
|
14807
|
+
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
14674
14808
|
}, [isMdScreen]);
|
|
14675
|
-
var _d = React.useState(true), drawerOpen = _d[0], setDrawerOpen = _d[1];
|
|
14676
|
-
var _e = React.useState(isMdScreen), isNarrow = _e[0], setIsNarrow = _e[1];
|
|
14677
|
-
var _f = React.useState(0), breakpoint = _f[0], setBreakpoint = _f[1];
|
|
14678
14809
|
var checkScrollable = React.useCallback(function () {
|
|
14679
14810
|
if (!navRef.current)
|
|
14680
14811
|
return;
|
|
14681
14812
|
var clientWidth = navRef.current.clientWidth;
|
|
14682
14813
|
var scrollWidth = navRef.current.scrollWidth;
|
|
14683
14814
|
var needsScroll = scrollWidth > clientWidth;
|
|
14684
|
-
|
|
14685
|
-
|
|
14686
|
-
|
|
14687
|
-
|
|
14688
|
-
|
|
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
|
+
}, []);
|
|
14689
14832
|
React.useEffect(function () {
|
|
14690
14833
|
checkScrollable();
|
|
14691
14834
|
var resizeObserver = new ResizeObserver(checkScrollable);
|
|
@@ -14693,46 +14836,59 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14693
14836
|
resizeObserver.observe(navRef.current);
|
|
14694
14837
|
}
|
|
14695
14838
|
return function () { return resizeObserver.disconnect(); };
|
|
14696
|
-
}, [
|
|
14839
|
+
}, [checkScrollable]);
|
|
14697
14840
|
var renderSearch = function () {
|
|
14698
|
-
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))));
|
|
14699
14842
|
};
|
|
14700
14843
|
var renderLogoNode = function () {
|
|
14701
|
-
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 })] })] }));
|
|
14702
14845
|
if (logoLinkComponent || logoUrl) {
|
|
14703
|
-
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 })));
|
|
14704
14847
|
}
|
|
14705
14848
|
return logoNode;
|
|
14706
14849
|
};
|
|
14707
14850
|
var renderPrimaryNav = function () {
|
|
14708
|
-
return (
|
|
14709
|
-
setActivePrimaryNavKey &&
|
|
14851
|
+
return (setActivePrimaryNavKey &&
|
|
14710
14852
|
primaryNavItems &&
|
|
14711
|
-
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 })));
|
|
14712
14854
|
};
|
|
14713
14855
|
var renderSecondaryNav = function () {
|
|
14714
14856
|
return (secondaryNavItems &&
|
|
14715
|
-
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 })));
|
|
14716
14858
|
};
|
|
14717
14859
|
var renderButtonsNode = function () {
|
|
14718
14860
|
if (!buttons || buttons.length === 0)
|
|
14719
14861
|
return null;
|
|
14720
|
-
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); }) }));
|
|
14721
14863
|
};
|
|
14722
14864
|
var renderButton = function (buttonProps, idx) {
|
|
14723
|
-
var
|
|
14865
|
+
var _a;
|
|
14724
14866
|
var key = "button-".concat(idx);
|
|
14725
|
-
var fullWidth = isNarrow ? { width: "100%" } : undefined;
|
|
14726
|
-
if (
|
|
14727
|
-
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
|
+
});
|
|
14728
14874
|
}
|
|
14729
|
-
if (
|
|
14730
|
-
|
|
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);
|
|
14731
14885
|
}
|
|
14732
|
-
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));
|
|
14733
14891
|
};
|
|
14734
|
-
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)); };
|
|
14735
|
-
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)); };
|
|
14736
14892
|
var renderDefaultButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(StyledHeaderButton, __assign({ sx: fullWidth }, buttonProps, { sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle }), key)); };
|
|
14737
14893
|
var renderHeaderContent = function () {
|
|
14738
14894
|
var logoNode = renderLogoNode();
|
|
@@ -14740,14 +14896,14 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14740
14896
|
var primaryNav = renderPrimaryNav();
|
|
14741
14897
|
var secondaryNav = renderSecondaryNav();
|
|
14742
14898
|
var buttonsNode = renderButtonsNode();
|
|
14743
|
-
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 }))] }));
|
|
14744
14900
|
};
|
|
14745
14901
|
var headerContent = renderHeaderContent();
|
|
14746
14902
|
var search = renderSearch();
|
|
14747
14903
|
var primaryNav = renderPrimaryNav();
|
|
14748
14904
|
var secondaryNav = renderSecondaryNav();
|
|
14749
14905
|
var buttonsNode = renderButtonsNode();
|
|
14750
|
-
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] }))] }));
|
|
14751
14907
|
});
|
|
14752
14908
|
|
|
14753
14909
|
/**
|