@czi-sds/components 22.2.1 → 22.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.d.ts +107 -13
- package/dist/index.cjs.js +921 -354
- package/dist/index.esm.d.ts +107 -13
- package/dist/index.esm.js +917 -357
- package/dist/tailwind.json +18 -18
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +18 -18
- package/dist/variables.scss +18 -18
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -991,16 +991,16 @@ var SDSPaletteLight = function (appTheme) {
|
|
|
991
991
|
backgroundSecondary: appTheme.colors.gray[100],
|
|
992
992
|
backgroundSecondaryInverse: appTheme.colors.gray[700],
|
|
993
993
|
backgroundTertiary: appTheme.colors.gray[200],
|
|
994
|
-
border: appTheme.colors.gray[600],
|
|
995
|
-
borderDisabled: appTheme.colors.gray[300],
|
|
996
|
-
borderDisabledInverse: appTheme.colors.gray[600],
|
|
997
|
-
borderHover: appTheme.colors.gray[900],
|
|
998
|
-
borderHoverInverse: appTheme.colors.gray[50],
|
|
999
|
-
borderInverse: appTheme.colors.gray[300],
|
|
1000
994
|
borderOnFill: appTheme.colors.gray[50],
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
995
|
+
borderPrimary: appTheme.colors.gray[600],
|
|
996
|
+
borderPrimaryDisabled: appTheme.colors.gray[300],
|
|
997
|
+
borderPrimaryDisabledInverse: appTheme.colors.gray[600],
|
|
998
|
+
borderPrimaryHover: appTheme.colors.gray[900],
|
|
999
|
+
borderPrimaryHoverInverse: appTheme.colors.gray[50],
|
|
1000
|
+
borderPrimaryInverse: appTheme.colors.gray[300],
|
|
1001
|
+
borderPrimaryPressed: appTheme.colors.gray[900],
|
|
1002
|
+
borderPrimaryPressedInverse: appTheme.colors.gray[50],
|
|
1003
|
+
borderSecondary: appTheme.colors.gray[300],
|
|
1004
1004
|
divider: appTheme.colors.gray[200],
|
|
1005
1005
|
dividerInverse: appTheme.colors.gray[600],
|
|
1006
1006
|
fillDisabled: appTheme.colors.gray[200],
|
|
@@ -1127,16 +1127,16 @@ var SDSPaletteDark = function (appTheme) {
|
|
|
1127
1127
|
backgroundSecondary: appTheme.colors.gray[100],
|
|
1128
1128
|
backgroundSecondaryInverse: appTheme.colors.gray[700],
|
|
1129
1129
|
backgroundTertiary: appTheme.colors.gray[200],
|
|
1130
|
-
border: appTheme.colors.gray[600],
|
|
1131
|
-
borderDisabled: appTheme.colors.gray[300],
|
|
1132
|
-
borderDisabledInverse: appTheme.colors.gray[600],
|
|
1133
|
-
borderHover: appTheme.colors.gray[900],
|
|
1134
|
-
borderHoverInverse: appTheme.colors.gray[50],
|
|
1135
|
-
borderInverse: appTheme.colors.gray[300],
|
|
1136
1130
|
borderOnFill: appTheme.colors.gray[50],
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1131
|
+
borderPrimary: appTheme.colors.gray[600],
|
|
1132
|
+
borderPrimaryDisabled: appTheme.colors.gray[300],
|
|
1133
|
+
borderPrimaryDisabledInverse: appTheme.colors.gray[600],
|
|
1134
|
+
borderPrimaryHover: appTheme.colors.gray[900],
|
|
1135
|
+
borderPrimaryHoverInverse: appTheme.colors.gray[50],
|
|
1136
|
+
borderPrimaryInverse: appTheme.colors.gray[300],
|
|
1137
|
+
borderPrimaryPressed: appTheme.colors.gray[900],
|
|
1138
|
+
borderPrimaryPressedInverse: appTheme.colors.gray[50],
|
|
1139
|
+
borderSecondary: appTheme.colors.gray[300],
|
|
1140
1140
|
divider: appTheme.colors.gray[200],
|
|
1141
1141
|
dividerInverse: appTheme.colors.gray[600],
|
|
1142
1142
|
fillDisabled: appTheme.colors.gray[200],
|
|
@@ -1559,7 +1559,7 @@ var getBreakpoints = function (_a) {
|
|
|
1559
1559
|
function focusVisibleA11yStyle(props) {
|
|
1560
1560
|
var _a;
|
|
1561
1561
|
var semanticColors = getSemanticColors(props);
|
|
1562
|
-
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
1562
|
+
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, ";\n outline-offset: 1px;\n }\n ");
|
|
1563
1563
|
}
|
|
1564
1564
|
|
|
1565
1565
|
var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
@@ -1572,7 +1572,7 @@ var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
|
1572
1572
|
return null;
|
|
1573
1573
|
var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
|
|
1574
1574
|
if (isNarrow) {
|
|
1575
|
-
return react.css(templateObject_1$
|
|
1575
|
+
return react.css(templateObject_1$19 || (templateObject_1$19 = __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
1576
|
}
|
|
1577
1577
|
return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
|
|
1578
1578
|
};
|
|
@@ -1597,8 +1597,8 @@ var fontCaps = function (fontSize, isNarrow) {
|
|
|
1597
1597
|
if (!typography)
|
|
1598
1598
|
return null;
|
|
1599
1599
|
var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
|
|
1600
|
-
return react.css(templateObject_3$
|
|
1601
|
-
? react.css(templateObject_2$
|
|
1600
|
+
return react.css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n "], ["\n text-transform: uppercase;\n\n ", "\n "])), isNarrow
|
|
1601
|
+
? 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
1602
|
};
|
|
1603
1603
|
};
|
|
1604
1604
|
var fontCapsXxs = fontCaps("xxs");
|
|
@@ -1613,7 +1613,7 @@ var fontHeader = function (fontSize, isNarrow) {
|
|
|
1613
1613
|
return null;
|
|
1614
1614
|
var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
|
|
1615
1615
|
if (isNarrow) {
|
|
1616
|
-
return react.css(templateObject_4$
|
|
1616
|
+
return react.css(templateObject_4$v || (templateObject_4$v = __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
1617
|
}
|
|
1618
1618
|
return themeToCss(header.semibold[fontSize], headerFontFamily);
|
|
1619
1619
|
};
|
|
@@ -1636,7 +1636,7 @@ var fontCode = function (fontSize, fontWeight, isNarrow) {
|
|
|
1636
1636
|
return null;
|
|
1637
1637
|
var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
|
|
1638
1638
|
if (isNarrow) {
|
|
1639
|
-
return react.css(templateObject_5$
|
|
1639
|
+
return react.css(templateObject_5$p || (templateObject_5$p = __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(narrowCode[fontWeight][fontSize], codeFontFamily));
|
|
1640
1640
|
}
|
|
1641
1641
|
return themeToCss(code[fontWeight][fontSize], codeFontFamily);
|
|
1642
1642
|
};
|
|
@@ -1654,8 +1654,8 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
|
|
|
1654
1654
|
if (!typography)
|
|
1655
1655
|
return null;
|
|
1656
1656
|
var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
|
|
1657
|
-
return react.css(templateObject_7$
|
|
1658
|
-
? react.css(templateObject_6$
|
|
1657
|
+
return react.css(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
|
|
1658
|
+
? react.css(templateObject_6$l || (templateObject_6$l = __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(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
|
|
1659
1659
|
};
|
|
1660
1660
|
};
|
|
1661
1661
|
var fontTabularXs = fontTabular("xs", "regular");
|
|
@@ -1664,33 +1664,33 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
|
|
|
1664
1664
|
var fontTabularSemiboldS = fontTabular("s", "semibold");
|
|
1665
1665
|
function themeToCss(fontTheme, fontFamily) {
|
|
1666
1666
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1667
|
-
return react.css(templateObject_8$
|
|
1667
|
+
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
1668
|
}
|
|
1669
|
-
var templateObject_1$
|
|
1669
|
+
var templateObject_1$19, templateObject_2$N, templateObject_3$C, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$g, templateObject_8$d;
|
|
1670
1670
|
|
|
1671
|
-
var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$
|
|
1671
|
+
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
1672
|
var spaces = getSpaces(props);
|
|
1673
|
-
return react.css(templateObject_1$
|
|
1673
|
+
return react.css(templateObject_1$18 || (templateObject_1$18 = __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
1674
|
});
|
|
1675
|
-
var templateObject_1$
|
|
1675
|
+
var templateObject_1$18, templateObject_2$M;
|
|
1676
1676
|
|
|
1677
1677
|
var AccordionDetails = function (props) {
|
|
1678
1678
|
var children = props.children;
|
|
1679
1679
|
return jsxRuntime.jsx(StyledAccordionDetails, { children: children });
|
|
1680
1680
|
};
|
|
1681
1681
|
|
|
1682
|
-
var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(templateObject_2$
|
|
1682
|
+
var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
|
|
1683
1683
|
var _a, _b;
|
|
1684
1684
|
var spaces = getSpaces(props);
|
|
1685
1685
|
var semanticColors = getSemanticColors(props);
|
|
1686
|
-
return react.css(templateObject_1$
|
|
1686
|
+
return react.css(templateObject_1$17 || (templateObject_1$17 = __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
1687
|
});
|
|
1688
|
-
var StyledSubtitle = styled__default.default("p")(templateObject_4$
|
|
1688
|
+
var StyledSubtitle = styled__default.default("p")(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1689
1689
|
var _a;
|
|
1690
1690
|
var semanticColors = getSemanticColors(props);
|
|
1691
|
-
return react.css(templateObject_3$
|
|
1691
|
+
return react.css(templateObject_3$B || (templateObject_3$B = __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
1692
|
});
|
|
1693
|
-
var templateObject_1$
|
|
1693
|
+
var templateObject_1$17, templateObject_2$L, templateObject_3$B, templateObject_4$u;
|
|
1694
1694
|
|
|
1695
1695
|
var _path$26, _path2$C, _path3$6;
|
|
1696
1696
|
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); }
|
|
@@ -4400,22 +4400,22 @@ var iconMap = {
|
|
|
4400
4400
|
},
|
|
4401
4401
|
};
|
|
4402
4402
|
|
|
4403
|
-
var doNotForwardProps$
|
|
4403
|
+
var doNotForwardProps$F = ["sdsIcon", "sdsSize", "iconColor"];
|
|
4404
4404
|
/**
|
|
4405
4405
|
* @see https://mui.com/material-ui/icons/#svgicon
|
|
4406
4406
|
*/
|
|
4407
4407
|
var StyledSvgIcon = styled__default.default(material.SvgIcon, {
|
|
4408
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4409
|
-
})(templateObject_2$
|
|
4408
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$F.includes(prop); },
|
|
4409
|
+
})(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4410
4410
|
var _a, _b, _c;
|
|
4411
4411
|
var mode = getMode(props);
|
|
4412
4412
|
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
4413
|
var iconSizes = getIconSizes(props);
|
|
4414
4414
|
var colors = getColors(props);
|
|
4415
|
-
return react.css(templateObject_1
|
|
4415
|
+
return react.css(templateObject_1$16 || (templateObject_1$16 = __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
4416
|
});
|
|
4417
|
-
var StyledIcon$1 = styled__default.default("div")(templateObject_3$
|
|
4418
|
-
var templateObject_1
|
|
4417
|
+
var StyledIcon$1 = styled__default.default("div")(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
|
|
4418
|
+
var templateObject_1$16, templateObject_2$K, templateObject_3$A;
|
|
4419
4419
|
|
|
4420
4420
|
/**
|
|
4421
4421
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4446,24 +4446,24 @@ var StyledAccordion$1 = styled__default.default(material.Accordion, {
|
|
|
4446
4446
|
shouldForwardProp: function (prop) {
|
|
4447
4447
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4448
4448
|
},
|
|
4449
|
-
})(templateObject_2$
|
|
4449
|
+
})(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4450
4450
|
var _a, _b;
|
|
4451
4451
|
var useDivider = props.useDivider, togglePosition = props.togglePosition;
|
|
4452
4452
|
var shadows = getShadows(props);
|
|
4453
4453
|
var typography = getTypography(props);
|
|
4454
4454
|
var borders = getBorders(props);
|
|
4455
4455
|
var spaces = getSpaces(props);
|
|
4456
|
-
return react.css(templateObject_1$
|
|
4456
|
+
return react.css(templateObject_1$15 || (templateObject_1$15 = __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
4457
|
});
|
|
4458
4458
|
var leftPosition = function (props) {
|
|
4459
4459
|
var _a, _b, _c;
|
|
4460
4460
|
var spaces = getSpaces(props);
|
|
4461
4461
|
var iconSizes = getIconSizes(props);
|
|
4462
|
-
return react.css(templateObject_3$
|
|
4462
|
+
return react.css(templateObject_3$z || (templateObject_3$z = __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
4463
|
((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
|
|
4464
4464
|
((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
|
|
4465
4465
|
};
|
|
4466
|
-
var templateObject_1$
|
|
4466
|
+
var templateObject_1$15, templateObject_2$J, templateObject_3$z;
|
|
4467
4467
|
|
|
4468
4468
|
/**
|
|
4469
4469
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4479,7 +4479,7 @@ var Accordion = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4479
4479
|
return (jsxRuntime.jsx(StyledAccordion$1, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
|
|
4480
4480
|
});
|
|
4481
4481
|
|
|
4482
|
-
var StyledAlert = styled__default.default(material.Alert)(templateObject_1$
|
|
4482
|
+
var StyledAlert = styled__default.default(material.Alert)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4483
4483
|
var _a;
|
|
4484
4484
|
var colors = getColors(props);
|
|
4485
4485
|
var spaces = getSpaces(props);
|
|
@@ -4506,7 +4506,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4506
4506
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4507
4507
|
}
|
|
4508
4508
|
}
|
|
4509
|
-
var templateObject_1$
|
|
4509
|
+
var templateObject_1$14;
|
|
4510
4510
|
|
|
4511
4511
|
/**
|
|
4512
4512
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4534,6 +4534,20 @@ function filterProps(props, excludeProps) {
|
|
|
4534
4534
|
}
|
|
4535
4535
|
return result;
|
|
4536
4536
|
}
|
|
4537
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4538
|
+
var mergeRefs = function (refs) {
|
|
4539
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4540
|
+
return function (element) {
|
|
4541
|
+
refs.forEach(function (ref) {
|
|
4542
|
+
if (typeof ref === "function") {
|
|
4543
|
+
ref(element);
|
|
4544
|
+
}
|
|
4545
|
+
else if (ref != null) {
|
|
4546
|
+
ref.current = element;
|
|
4547
|
+
}
|
|
4548
|
+
});
|
|
4549
|
+
};
|
|
4550
|
+
};
|
|
4537
4551
|
|
|
4538
4552
|
var _a;
|
|
4539
4553
|
var SDSWarningTypes;
|
|
@@ -4548,6 +4562,8 @@ var SDSWarningTypes;
|
|
|
4548
4562
|
SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
|
|
4549
4563
|
SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
|
|
4550
4564
|
SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
|
|
4565
|
+
SDSWarningTypes["ContentCardActionsOnlyButtons"] = "contentCardActionsOnlyButtons";
|
|
4566
|
+
SDSWarningTypes["ClickableContentCardNumberOfButtons"] = "clickableContentCardNumberOfButtons";
|
|
4551
4567
|
})(SDSWarningTypes || (SDSWarningTypes = {}));
|
|
4552
4568
|
var SDS_WARNINGS = (_a = {},
|
|
4553
4569
|
_a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
|
|
@@ -4590,6 +4606,14 @@ var SDS_WARNINGS = (_a = {},
|
|
|
4590
4606
|
hasWarned: false,
|
|
4591
4607
|
message: "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
|
|
4592
4608
|
},
|
|
4609
|
+
_a[SDSWarningTypes.ContentCardActionsOnlyButtons] = {
|
|
4610
|
+
hasWarned: false,
|
|
4611
|
+
message: "Warning: Only SDS buttons could be used within ContentCard Actions component slot!",
|
|
4612
|
+
},
|
|
4613
|
+
_a[SDSWarningTypes.ClickableContentCardNumberOfButtons] = {
|
|
4614
|
+
hasWarned: false,
|
|
4615
|
+
message: "Warning: Clickable Content Cards can only have one or no buttons!",
|
|
4616
|
+
},
|
|
4593
4617
|
_a);
|
|
4594
4618
|
var showWarningIfFirstOccurence = function (warningType) {
|
|
4595
4619
|
if (!(warningType in SDS_WARNINGS)) {
|
|
@@ -4607,7 +4631,7 @@ var showWarningIfFirstOccurence = function (warningType) {
|
|
|
4607
4631
|
SDS_WARNINGS[warningType].hasWarned = true;
|
|
4608
4632
|
};
|
|
4609
4633
|
|
|
4610
|
-
var doNotForwardProps$
|
|
4634
|
+
var doNotForwardProps$E = [
|
|
4611
4635
|
"isAllCaps",
|
|
4612
4636
|
"isRounded",
|
|
4613
4637
|
"sdsStyle",
|
|
@@ -4641,16 +4665,17 @@ var ButtonStyles = function (props) {
|
|
|
4641
4665
|
: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
|
|
4642
4666
|
var disabledBackgroundColor = variant === "outlined" ? "transparent" : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillDisabled;
|
|
4643
4667
|
var disabledBorder = variant === "outlined"
|
|
4644
|
-
? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.
|
|
4668
|
+
? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimaryDisabled)
|
|
4645
4669
|
: "none";
|
|
4646
4670
|
var boxshadow = variant === "outlined"
|
|
4647
4671
|
? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
|
|
4648
4672
|
: "none";
|
|
4649
|
-
|
|
4673
|
+
fontBody("xs", "semibold");
|
|
4674
|
+
return react.css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\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\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);
|
|
4650
4675
|
};
|
|
4651
4676
|
var Rounded = function (props) {
|
|
4652
4677
|
var corners = getCorners(props);
|
|
4653
|
-
return react.css(templateObject_2$
|
|
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);
|
|
4654
4679
|
};
|
|
4655
4680
|
var DestructiveButton = function (props) {
|
|
4656
4681
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4669,13 +4694,13 @@ var DestructiveButton = function (props) {
|
|
|
4669
4694
|
var boxshadow = variant === "outlined"
|
|
4670
4695
|
? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
|
|
4671
4696
|
: "none";
|
|
4672
|
-
return react.css(templateObject_3$
|
|
4697
|
+
return react.css(templateObject_3$y || (templateObject_3$y = __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);
|
|
4673
4698
|
};
|
|
4674
4699
|
var StyledButton$3 = styled__default.default(material.Button, {
|
|
4675
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4676
|
-
})(templateObject_5$
|
|
4700
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4701
|
+
})(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4677
4702
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4678
|
-
return react.css(templateObject_4$
|
|
4703
|
+
return react.css(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
|
|
4679
4704
|
});
|
|
4680
4705
|
// Minimal Button Styles
|
|
4681
4706
|
var Minimal = function (props) {
|
|
@@ -4684,60 +4709,60 @@ var Minimal = function (props) {
|
|
|
4684
4709
|
var spaces = getSpaces(props);
|
|
4685
4710
|
var iconSizes = getIconSizes(props);
|
|
4686
4711
|
var semanticColors = getSemanticColors(props);
|
|
4687
|
-
return react.css(templateObject_6$
|
|
4712
|
+
return react.css(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\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: unset;\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);
|
|
4688
4713
|
};
|
|
4689
4714
|
var PrimaryMinimalButton = function (props) {
|
|
4690
4715
|
var _a, _b;
|
|
4691
4716
|
var semanticColors = getSemanticColors(props);
|
|
4692
|
-
return react.css(templateObject_7$
|
|
4717
|
+
return react.css(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
|
|
4693
4718
|
};
|
|
4694
4719
|
var SecondaryMinimalButton = function (props) {
|
|
4695
4720
|
var _a, _b;
|
|
4696
4721
|
var semanticColors = getSemanticColors(props);
|
|
4697
|
-
return react.css(templateObject_8$
|
|
4722
|
+
return react.css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
|
|
4698
4723
|
};
|
|
4699
4724
|
var StyledMinimalButton = styled__default.default(material.Button, {
|
|
4700
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4701
|
-
})(templateObject_10$
|
|
4725
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4726
|
+
})(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4702
4727
|
var sdsType = props.sdsType;
|
|
4703
|
-
return react.css(templateObject_9$
|
|
4728
|
+
return react.css(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4704
4729
|
});
|
|
4705
4730
|
var StyledButtonLegacy = styled__default.default(material.Button, {
|
|
4706
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4707
|
-
})(templateObject_11$
|
|
4731
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4732
|
+
})(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4708
4733
|
if (!props.isRounded)
|
|
4709
4734
|
return "";
|
|
4710
4735
|
var corners = getCorners(props);
|
|
4711
4736
|
var spaces = getSpaces(props);
|
|
4712
4737
|
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 ");
|
|
4713
4738
|
});
|
|
4714
|
-
var templateObject_1$
|
|
4739
|
+
var templateObject_1$13, templateObject_2$I, templateObject_3$y, templateObject_4$t, templateObject_5$o, templateObject_6$k, templateObject_7$f, templateObject_8$c, templateObject_9$7, templateObject_10$5, templateObject_11$4;
|
|
4715
4740
|
|
|
4716
4741
|
var isDisabled$1 = function (props) {
|
|
4717
4742
|
var _a, _b;
|
|
4718
4743
|
var semanticColors = getSemanticColors(props);
|
|
4719
|
-
return react.css(templateObject_1$
|
|
4744
|
+
return react.css(templateObject_1$12 || (templateObject_1$12 = __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);
|
|
4720
4745
|
};
|
|
4721
4746
|
var primary$2 = function (props) {
|
|
4722
4747
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4723
4748
|
var semanticColors = getSemanticColors(props);
|
|
4724
|
-
return react.css(templateObject_2$
|
|
4749
|
+
return react.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
|
|
4725
4750
|
};
|
|
4726
4751
|
var secondary$2 = function (props) {
|
|
4727
4752
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4728
4753
|
var semanticColors = getSemanticColors(props);
|
|
4729
|
-
return react.css(templateObject_3$
|
|
4754
|
+
return react.css(templateObject_3$x || (templateObject_3$x = __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);
|
|
4730
4755
|
};
|
|
4731
4756
|
var tertiary = function (props) {
|
|
4732
4757
|
var _a, _b, _c, _d, _e, _f;
|
|
4733
4758
|
var semanticColors = getSemanticColors(props);
|
|
4734
|
-
return react.css(templateObject_4$
|
|
4759
|
+
return react.css(templateObject_4$s || (templateObject_4$s = __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);
|
|
4735
4760
|
};
|
|
4736
4761
|
var small$1 = function (props) {
|
|
4737
4762
|
var sdsType = props.sdsType;
|
|
4738
4763
|
var iconSizes = getIconSizes(props);
|
|
4739
4764
|
var spaces = getSpaces(props);
|
|
4740
|
-
return react.css(templateObject_5$
|
|
4765
|
+
return react.css(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4741
4766
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;")
|
|
4742
4767
|
: "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4743
4768
|
};
|
|
@@ -4745,7 +4770,7 @@ var medium$1 = function (props) {
|
|
|
4745
4770
|
var sdsType = props.sdsType;
|
|
4746
4771
|
var iconSizes = getIconSizes(props);
|
|
4747
4772
|
var spaces = getSpaces(props);
|
|
4748
|
-
return react.css(templateObject_6$
|
|
4773
|
+
return react.css(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4749
4774
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;")
|
|
4750
4775
|
: "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4751
4776
|
};
|
|
@@ -4753,11 +4778,11 @@ var large = function (props) {
|
|
|
4753
4778
|
var sdsType = props.sdsType;
|
|
4754
4779
|
var iconSizes = getIconSizes(props);
|
|
4755
4780
|
var spaces = getSpaces(props);
|
|
4756
|
-
return react.css(templateObject_7$
|
|
4781
|
+
return react.css(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4757
4782
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0;")
|
|
4758
4783
|
: "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;") : "");
|
|
4759
4784
|
};
|
|
4760
|
-
var doNotForwardProps$
|
|
4785
|
+
var doNotForwardProps$D = [
|
|
4761
4786
|
"on",
|
|
4762
4787
|
"sdsSize",
|
|
4763
4788
|
"sdsType",
|
|
@@ -4767,12 +4792,12 @@ var doNotForwardProps$w = [
|
|
|
4767
4792
|
"customTheme",
|
|
4768
4793
|
];
|
|
4769
4794
|
var StyledButtonIcon = styled__default.default(material.IconButton, {
|
|
4770
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4771
|
-
})(templateObject_9$
|
|
4795
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
4796
|
+
})(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4772
4797
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4773
|
-
return react.css(templateObject_8$
|
|
4798
|
+
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));
|
|
4774
4799
|
});
|
|
4775
|
-
var templateObject_1$
|
|
4800
|
+
var templateObject_1$12, templateObject_2$H, templateObject_3$x, templateObject_4$s, templateObject_5$n, templateObject_6$j, templateObject_7$e, templateObject_8$b, templateObject_9$6;
|
|
4776
4801
|
|
|
4777
4802
|
var ButtonIconSizeToSdsIconSize = {
|
|
4778
4803
|
large: "xl",
|
|
@@ -4870,7 +4895,7 @@ var Button = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4870
4895
|
}
|
|
4871
4896
|
});
|
|
4872
4897
|
|
|
4873
|
-
var doNotForwardProps$
|
|
4898
|
+
var doNotForwardProps$C = [
|
|
4874
4899
|
"sdsStyle",
|
|
4875
4900
|
"intent",
|
|
4876
4901
|
"handleSubmit",
|
|
@@ -4881,39 +4906,39 @@ var rounded$3 = function (props) {
|
|
|
4881
4906
|
var _a;
|
|
4882
4907
|
var corners = getCorners(props);
|
|
4883
4908
|
var semanticColors = getSemanticColors(props);
|
|
4884
|
-
return react.css(templateObject_1$
|
|
4909
|
+
return react.css(templateObject_1$11 || (templateObject_1$11 = __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);
|
|
4885
4910
|
};
|
|
4886
4911
|
var applyIntentColor$2 = function (props, intent) {
|
|
4887
4912
|
var _a, _b, _c, _d;
|
|
4888
4913
|
var semanticColors = getSemanticColors(props);
|
|
4889
4914
|
var borders = getBorders(props);
|
|
4890
|
-
return react.css(templateObject_2$
|
|
4915
|
+
return react.css(templateObject_2$G || (templateObject_2$G = __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);
|
|
4891
4916
|
};
|
|
4892
4917
|
var disabledStyled$2 = function (props) {
|
|
4893
4918
|
var _a, _b, _c, _d, _e;
|
|
4894
4919
|
var semanticColors = getSemanticColors(props);
|
|
4895
|
-
return react.css(templateObject_3$
|
|
4920
|
+
return react.css(templateObject_3$w || (templateObject_3$w = __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);
|
|
4896
4921
|
};
|
|
4897
|
-
var StyledLabel$3 = styled__default.default("label")(templateObject_4$
|
|
4922
|
+
var StyledLabel$3 = styled__default.default("label")(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4898
4923
|
var spaces = getSpaces(props);
|
|
4899
4924
|
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 ");
|
|
4900
4925
|
});
|
|
4901
4926
|
var StyledSearchBase = styled__default.default(material.TextField, {
|
|
4902
4927
|
shouldForwardProp: function (prop) {
|
|
4903
|
-
return !doNotForwardProps$
|
|
4928
|
+
return !doNotForwardProps$C.includes(prop.toString());
|
|
4904
4929
|
},
|
|
4905
|
-
})(templateObject_6$
|
|
4930
|
+
})(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4906
4931
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
4907
4932
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4908
4933
|
var spaces = getSpaces(props);
|
|
4909
4934
|
var iconSizes = getIconSizes(props);
|
|
4910
4935
|
var semanticColors = getSemanticColors(props);
|
|
4911
|
-
return react.css(templateObject_5$
|
|
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, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimary, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_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.accent) === null || _f === void 0 ? void 0 : _f.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, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, material.outlinedInputClasses.notchedOutline, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.borderPrimaryHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.ornamentFocus, material.outlinedInputClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.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));
|
|
4912
4937
|
});
|
|
4913
|
-
var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$
|
|
4914
|
-
var templateObject_1$
|
|
4938
|
+
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$11, templateObject_2$G, templateObject_3$w, templateObject_4$r, templateObject_5$m, templateObject_6$i, templateObject_7$d;
|
|
4915
4940
|
|
|
4916
|
-
var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$
|
|
4941
|
+
var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4917
4942
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4918
4943
|
var selected = props.selected;
|
|
4919
4944
|
var fontWeights = getFontWeights(props);
|
|
@@ -4921,7 +4946,7 @@ var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject
|
|
|
4921
4946
|
var semanticColors = getSemanticColors(props);
|
|
4922
4947
|
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surface, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentPressed, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.ornamentPressed, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
|
|
4923
4948
|
});
|
|
4924
|
-
var ContentWrapper = styled__default.default("span")(templateObject_2$
|
|
4949
|
+
var ContentWrapper = styled__default.default("span")(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
|
|
4925
4950
|
var disabledStyles$2 = function (props) {
|
|
4926
4951
|
var _a;
|
|
4927
4952
|
var disabled = props.disabled;
|
|
@@ -4930,12 +4955,12 @@ var disabledStyles$2 = function (props) {
|
|
|
4930
4955
|
var semanticColors = getSemanticColors(props);
|
|
4931
4956
|
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 ");
|
|
4932
4957
|
};
|
|
4933
|
-
var TextWrapper = styled__default.default("span")(templateObject_3$
|
|
4958
|
+
var TextWrapper = styled__default.default("span")(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4934
4959
|
var _a;
|
|
4935
4960
|
var semanticColors = getSemanticColors(props);
|
|
4936
4961
|
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 ");
|
|
4937
4962
|
}, disabledStyles$2);
|
|
4938
|
-
var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$
|
|
4963
|
+
var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4939
4964
|
var _a;
|
|
4940
4965
|
var disabled = props.disabled;
|
|
4941
4966
|
var spaces = getSpaces(props);
|
|
@@ -4943,20 +4968,20 @@ var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$m || (
|
|
|
4943
4968
|
var semanticColors = getSemanticColors(props);
|
|
4944
4969
|
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, ";") : null, ";\n }\n ");
|
|
4945
4970
|
});
|
|
4946
|
-
var ColumnWrapper = styled__default.default("span")(templateObject_5$
|
|
4971
|
+
var ColumnWrapper = styled__default.default("span")(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4947
4972
|
var _a;
|
|
4948
4973
|
var semanticColors = getSemanticColors(props);
|
|
4949
4974
|
var spaces = getSpaces(props);
|
|
4950
4975
|
return "\n text-align: right;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4951
4976
|
}, disabledStyles$2);
|
|
4952
|
-
var StyledIconWrapper = styled__default.default("span")(templateObject_6$
|
|
4977
|
+
var StyledIconWrapper = styled__default.default("span")(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4953
4978
|
var spaces = getSpaces(props);
|
|
4954
4979
|
var iconSizes = getIconSizes(props);
|
|
4955
4980
|
return "\n align-self: start;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n ");
|
|
4956
4981
|
});
|
|
4957
4982
|
var StyledCheck = styled__default.default(iconsMaterial.Check, {
|
|
4958
4983
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4959
|
-
})(templateObject_7$
|
|
4984
|
+
})(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4960
4985
|
var _a, _b;
|
|
4961
4986
|
var selected = props.selected, disabled = props.disabled;
|
|
4962
4987
|
var iconSizes = getIconSizes(props);
|
|
@@ -4968,7 +4993,7 @@ var StyledCheck = styled__default.default(iconsMaterial.Check, {
|
|
|
4968
4993
|
});
|
|
4969
4994
|
var StyledMinus = styled__default.default(iconsMaterial.Remove, {
|
|
4970
4995
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4971
|
-
})(templateObject_8$
|
|
4996
|
+
})(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4972
4997
|
var _a, _b;
|
|
4973
4998
|
var selected = props.selected, disabled = props.disabled;
|
|
4974
4999
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4978,7 +5003,7 @@ var StyledMinus = styled__default.default(iconsMaterial.Remove, {
|
|
|
4978
5003
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
|
|
4979
5004
|
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 ");
|
|
4980
5005
|
});
|
|
4981
|
-
var templateObject_1$
|
|
5006
|
+
var templateObject_1$10, templateObject_2$F, templateObject_3$v, templateObject_4$q, templateObject_5$l, templateObject_6$h, templateObject_7$c, templateObject_8$a;
|
|
4982
5007
|
|
|
4983
5008
|
/**
|
|
4984
5009
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5140,7 +5165,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5140
5165
|
autoComplete: "one-time-code" }, rest))] }));
|
|
5141
5166
|
});
|
|
5142
5167
|
|
|
5143
|
-
var doNotForwardProps$
|
|
5168
|
+
var doNotForwardProps$B = [
|
|
5144
5169
|
"count",
|
|
5145
5170
|
"keepSearchOnSelect",
|
|
5146
5171
|
"search",
|
|
@@ -5149,18 +5174,18 @@ var doNotForwardProps$u = [
|
|
|
5149
5174
|
"onClickAway",
|
|
5150
5175
|
];
|
|
5151
5176
|
var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
|
|
5152
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5153
|
-
})(templateObject_1
|
|
5177
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5178
|
+
})(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
5154
5179
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5155
5180
|
var search = props.search;
|
|
5156
5181
|
var spaces = getSpaces(props);
|
|
5157
5182
|
var borders = getBorders(props);
|
|
5158
5183
|
var semanticColors = getSemanticColors(props);
|
|
5159
|
-
return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
5184
|
+
return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, ";\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surface, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surface, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
|
|
5160
5185
|
});
|
|
5161
5186
|
var InputBaseWrapper$1 = styled__default.default("div", {
|
|
5162
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5163
|
-
})(templateObject_2$
|
|
5187
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5188
|
+
})(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5164
5189
|
var search = props.search;
|
|
5165
5190
|
if (!search) {
|
|
5166
5191
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -5170,12 +5195,12 @@ var InputBaseWrapper$1 = styled__default.default("div", {
|
|
|
5170
5195
|
}
|
|
5171
5196
|
});
|
|
5172
5197
|
var StyledMenuInputSearch$1 = styled__default.default(InputSearch, {
|
|
5173
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5174
|
-
})(templateObject_3$
|
|
5198
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5199
|
+
})(templateObject_3$u || (templateObject_3$u = __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) {
|
|
5175
5200
|
var search = _a.search;
|
|
5176
5201
|
return (search ? "auto" : "transparent");
|
|
5177
5202
|
});
|
|
5178
|
-
var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$
|
|
5203
|
+
var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5179
5204
|
var _a;
|
|
5180
5205
|
var spaces = getSpaces(props);
|
|
5181
5206
|
var corners = getCorners(props);
|
|
@@ -5184,13 +5209,13 @@ var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$l |
|
|
|
5184
5209
|
var semanticColors = getSemanticColors(props);
|
|
5185
5210
|
return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
|
|
5186
5211
|
});
|
|
5187
|
-
var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$
|
|
5212
|
+
var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5188
5213
|
var _a;
|
|
5189
5214
|
var semanticColors = getSemanticColors(props);
|
|
5190
5215
|
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 ");
|
|
5191
5216
|
});
|
|
5192
|
-
var StyledMenuItemText = styled__default.default("div")(templateObject_6$
|
|
5193
|
-
var templateObject_1
|
|
5217
|
+
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$$, templateObject_2$E, templateObject_3$u, templateObject_4$p, templateObject_5$k, templateObject_6$g;
|
|
5194
5219
|
|
|
5195
5220
|
var AutocompleteBase = function (props) {
|
|
5196
5221
|
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;
|
|
@@ -5351,27 +5376,27 @@ var AutocompleteBase = function (props) {
|
|
|
5351
5376
|
}
|
|
5352
5377
|
};
|
|
5353
5378
|
|
|
5354
|
-
var StyledColumn = styled__default.default("div")(templateObject_1$
|
|
5379
|
+
var StyledColumn = styled__default.default("div")(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5355
5380
|
var _a;
|
|
5356
5381
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
5357
5382
|
var spaces = getSpaces(props);
|
|
5358
5383
|
var borders = getBorders(props);
|
|
5359
5384
|
return "\n position: relative;\n width: ".concat(width, "px;\n\n &:not(:last-child) {\n border-right: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): This code hides the relation icon of the last column\n &:last-of-type {\n .SdsAutocompleteMultiColumn-column-relation-icon {\n display: none;\n }\n }\n ");
|
|
5360
5385
|
});
|
|
5361
|
-
var StyledColumnTitle = styled__default.default("p")(templateObject_2$
|
|
5386
|
+
var StyledColumnTitle = styled__default.default("p")(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
5362
5387
|
var _a;
|
|
5363
5388
|
var spaces = getSpaces(props);
|
|
5364
5389
|
var semanticColors = getSemanticColors(props);
|
|
5365
5390
|
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 ");
|
|
5366
5391
|
});
|
|
5367
|
-
var StyledColumnIcon = styled__default.default("span")(templateObject_3$
|
|
5392
|
+
var StyledColumnIcon = styled__default.default("span")(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5368
5393
|
var _a, _b;
|
|
5369
5394
|
var spaces = getSpaces(props);
|
|
5370
5395
|
var iconSizes = getIconSizes(props);
|
|
5371
5396
|
var semanticColors = getSemanticColors(props);
|
|
5372
5397
|
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 ");
|
|
5373
5398
|
});
|
|
5374
|
-
var templateObject_1$
|
|
5399
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$t;
|
|
5375
5400
|
|
|
5376
5401
|
var AutocompleteGroup = function (props) {
|
|
5377
5402
|
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"]);
|
|
@@ -5411,7 +5436,7 @@ var AutocompleteGroup = function (props) {
|
|
|
5411
5436
|
}
|
|
5412
5437
|
};
|
|
5413
5438
|
|
|
5414
|
-
var doNotForwardProps$
|
|
5439
|
+
var doNotForwardProps$A = [
|
|
5415
5440
|
"anchorEl",
|
|
5416
5441
|
"count",
|
|
5417
5442
|
"keepSearchOnSelect",
|
|
@@ -5424,9 +5449,9 @@ var doNotForwardProps$t = [
|
|
|
5424
5449
|
];
|
|
5425
5450
|
var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
5426
5451
|
shouldForwardProp: function (prop) {
|
|
5427
|
-
return !doNotForwardProps$
|
|
5452
|
+
return !doNotForwardProps$A.includes(prop) || prop === "anchorEl";
|
|
5428
5453
|
},
|
|
5429
|
-
})(templateObject_1$
|
|
5454
|
+
})(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5430
5455
|
var _a;
|
|
5431
5456
|
var corners = getCorners(props);
|
|
5432
5457
|
var shadows = getShadows(props);
|
|
@@ -5436,24 +5461,24 @@ var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
|
5436
5461
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
|
|
5437
5462
|
});
|
|
5438
5463
|
var StyledPaper$2 = styled__default.default(material.Paper, {
|
|
5439
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5440
|
-
})(templateObject_2$
|
|
5464
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
5465
|
+
})(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5441
5466
|
var _a;
|
|
5442
5467
|
var shadows = getShadows(props);
|
|
5443
5468
|
var semanticColors = getSemanticColors(props);
|
|
5444
5469
|
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 ");
|
|
5445
5470
|
});
|
|
5446
|
-
var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$
|
|
5471
|
+
var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5447
5472
|
var StyledAutocompleteInput = styled__default.default(InputSearch, {
|
|
5448
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5449
|
-
})(templateObject_4$
|
|
5473
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
5474
|
+
})(templateObject_4$o || (templateObject_4$o = __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) {
|
|
5450
5475
|
var search = _a.search;
|
|
5451
5476
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5452
5477
|
}, function (_a) {
|
|
5453
5478
|
var search = _a.search;
|
|
5454
5479
|
return (search ? "auto" : "transparent");
|
|
5455
5480
|
});
|
|
5456
|
-
var templateObject_1$
|
|
5481
|
+
var templateObject_1$Z, templateObject_2$C, templateObject_3$s, templateObject_4$o;
|
|
5457
5482
|
|
|
5458
5483
|
var AutocompleteMultiColumn = function (props) {
|
|
5459
5484
|
var _a;
|
|
@@ -5635,13 +5660,13 @@ var Autocomplete = function (props) {
|
|
|
5635
5660
|
}
|
|
5636
5661
|
};
|
|
5637
5662
|
|
|
5638
|
-
var Centered = styled__default.default("div")(templateObject_1$
|
|
5663
|
+
var Centered = styled__default.default("div")(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
5639
5664
|
var doNotForwardPropsIconWrapper = ["bannerType"];
|
|
5640
5665
|
var IconWrapper$1 = styled__default.default("div", {
|
|
5641
5666
|
shouldForwardProp: function (prop) {
|
|
5642
5667
|
return !doNotForwardPropsIconWrapper.includes(prop);
|
|
5643
5668
|
},
|
|
5644
|
-
})(templateObject_2$
|
|
5669
|
+
})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5645
5670
|
var _a, _b;
|
|
5646
5671
|
var bannerType = props.bannerType;
|
|
5647
5672
|
var iconSizes = getIconSizes(props);
|
|
@@ -5654,7 +5679,7 @@ var StyledButton$2 = styled__default.default(Button, {
|
|
|
5654
5679
|
shouldForwardProp: function (prop) {
|
|
5655
5680
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5656
5681
|
},
|
|
5657
|
-
})(templateObject_3$
|
|
5682
|
+
})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
|
|
5658
5683
|
var _a, _b;
|
|
5659
5684
|
var bannerType = props.bannerType;
|
|
5660
5685
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5662,7 +5687,7 @@ var StyledButton$2 = styled__default.default(Button, {
|
|
|
5662
5687
|
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 ");
|
|
5663
5688
|
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 ");
|
|
5664
5689
|
});
|
|
5665
|
-
styled__default.default("div")(templateObject_4$
|
|
5690
|
+
styled__default.default("div")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5666
5691
|
var primary$1 = function (props) {
|
|
5667
5692
|
var _a, _b;
|
|
5668
5693
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5673,15 +5698,15 @@ var secondary$1 = function (props) {
|
|
|
5673
5698
|
var semanticColors = getSemanticColors(props);
|
|
5674
5699
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
|
|
5675
5700
|
};
|
|
5676
|
-
var doNotForwardProps$
|
|
5701
|
+
var doNotForwardProps$z = ["sdsType", "textChild"];
|
|
5677
5702
|
var StyledBanner = styled__default.default("div", {
|
|
5678
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5679
|
-
})(templateObject_5$
|
|
5703
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
5704
|
+
})(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5680
5705
|
var sdsType = props.sdsType;
|
|
5681
5706
|
var spaces = getSpaces(props);
|
|
5682
5707
|
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 ");
|
|
5683
5708
|
});
|
|
5684
|
-
var templateObject_1$
|
|
5709
|
+
var templateObject_1$Y, templateObject_2$B, templateObject_3$r, templateObject_4$n, templateObject_5$j;
|
|
5685
5710
|
|
|
5686
5711
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
5687
5712
|
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"]);
|
|
@@ -5744,16 +5769,16 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5744
5769
|
* All other props should be passed down to ButtonIcon; otherwise,
|
|
5745
5770
|
* the component won’t function as expected.
|
|
5746
5771
|
*/
|
|
5747
|
-
var doNotForwardProps$
|
|
5772
|
+
var doNotForwardProps$y = ["sdsStage"];
|
|
5748
5773
|
var StyledButtonToggle = styled__default.default(ButtonIcon, {
|
|
5749
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5750
|
-
})(templateObject_1$
|
|
5774
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
5775
|
+
})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5751
5776
|
var _a;
|
|
5752
5777
|
var sdsStage = props.sdsStage;
|
|
5753
5778
|
var semanticColors = getSemanticColors(props);
|
|
5754
5779
|
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 ");
|
|
5755
5780
|
});
|
|
5756
|
-
var templateObject_1$
|
|
5781
|
+
var templateObject_1$X;
|
|
5757
5782
|
|
|
5758
5783
|
/**
|
|
5759
5784
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -5769,7 +5794,7 @@ var ButtonToggle = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5769
5794
|
}
|
|
5770
5795
|
});
|
|
5771
5796
|
|
|
5772
|
-
var doNotForwardProps$
|
|
5797
|
+
var doNotForwardProps$x = [
|
|
5773
5798
|
"calloutTitle",
|
|
5774
5799
|
"collapsed",
|
|
5775
5800
|
"severity",
|
|
@@ -5777,8 +5802,8 @@ var doNotForwardProps$q = [
|
|
|
5777
5802
|
"hideBody",
|
|
5778
5803
|
];
|
|
5779
5804
|
var StyledCallout = styled__default.default(material.Alert, {
|
|
5780
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5781
|
-
})(templateObject_1$
|
|
5805
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
5806
|
+
})(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5782
5807
|
var _a, _b, _c, _d, _e;
|
|
5783
5808
|
var _f = props.intent, intent = _f === void 0 ? "info" : _f, sdsStyle = props.sdsStyle, hideBody = props.hideBody, collapsed = props.collapsed;
|
|
5784
5809
|
var spaces = getSpaces(props);
|
|
@@ -5790,12 +5815,12 @@ var StyledCallout = styled__default.default(material.Alert, {
|
|
|
5790
5815
|
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";
|
|
5791
5816
|
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 ");
|
|
5792
5817
|
});
|
|
5793
|
-
var templateObject_1$
|
|
5818
|
+
var templateObject_1$W;
|
|
5794
5819
|
|
|
5795
5820
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5796
5821
|
|
|
5797
|
-
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$
|
|
5798
|
-
var templateObject_1$
|
|
5822
|
+
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n margin: 0;\n"], ["\n ", "\n margin: 0;\n"])), fontBodySemiboldXs);
|
|
5823
|
+
var templateObject_1$V;
|
|
5799
5824
|
|
|
5800
5825
|
var CalloutTitle = function (_a) {
|
|
5801
5826
|
var children = _a.children;
|
|
@@ -5804,24 +5829,24 @@ var CalloutTitle = function (_a) {
|
|
|
5804
5829
|
// Display name required to ensure Callout expand works correctly.
|
|
5805
5830
|
CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
|
|
5806
5831
|
|
|
5807
|
-
var StyledCalloutBody = styled__default.default("p")(templateObject_1$
|
|
5832
|
+
var StyledCalloutBody = styled__default.default("p")(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5808
5833
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a;
|
|
5809
5834
|
var spaces = getSpaces(props);
|
|
5810
5835
|
return "\n margin: ".concat(!hideTitle ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0 0;\n ");
|
|
5811
5836
|
});
|
|
5812
|
-
var templateObject_1$
|
|
5837
|
+
var templateObject_1$U;
|
|
5813
5838
|
|
|
5814
5839
|
var CalloutBody = function (_a) {
|
|
5815
5840
|
var children = _a.children, hideTitle = _a.hideTitle;
|
|
5816
5841
|
return (jsxRuntime.jsx(StyledCalloutBody, { hideTitle: hideTitle, children: children }));
|
|
5817
5842
|
};
|
|
5818
5843
|
|
|
5819
|
-
var StyledCalloutExtraContent = styled__default.default("div")(templateObject_1$
|
|
5844
|
+
var StyledCalloutExtraContent = styled__default.default("div")(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5820
5845
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a, _b = props.hideBody, hideBody = _b === void 0 ? false : _b;
|
|
5821
5846
|
var spaces = getSpaces(props);
|
|
5822
5847
|
return "\n margin: ".concat(hideTitle && hideBody ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0 0;\n ");
|
|
5823
5848
|
});
|
|
5824
|
-
var templateObject_1$
|
|
5849
|
+
var templateObject_1$T;
|
|
5825
5850
|
|
|
5826
5851
|
var CalloutExtraContent = function (_a) {
|
|
5827
5852
|
var children = _a.children, hideTitle = _a.hideTitle, hideBody = _a.hideBody;
|
|
@@ -5890,25 +5915,25 @@ var dark$1 = function (props) {
|
|
|
5890
5915
|
var _a, _b;
|
|
5891
5916
|
var spaces = getSpaces(props);
|
|
5892
5917
|
var semanticColors = getSemanticColors(props);
|
|
5893
|
-
return css.css(templateObject_1$
|
|
5918
|
+
return css.css(templateObject_1$S || (templateObject_1$S = __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);
|
|
5894
5919
|
};
|
|
5895
5920
|
var light$1 = function (props) {
|
|
5896
5921
|
var _a, _b;
|
|
5897
5922
|
var spaces = getSpaces(props);
|
|
5898
5923
|
var semanticColors = getSemanticColors(props);
|
|
5899
|
-
return css.css(templateObject_2$
|
|
5924
|
+
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);
|
|
5900
5925
|
};
|
|
5901
5926
|
var wide = function () {
|
|
5902
|
-
return css.css(templateObject_3$
|
|
5927
|
+
return css.css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
|
|
5903
5928
|
};
|
|
5904
5929
|
var tableStyles = function (props) {
|
|
5905
5930
|
var spaces = getSpaces(props);
|
|
5906
|
-
return css.css(templateObject_4$
|
|
5931
|
+
return css.css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5907
5932
|
};
|
|
5908
|
-
var doNotForwardProps$
|
|
5933
|
+
var doNotForwardProps$w = ["hasInvertedStyle"];
|
|
5909
5934
|
var Subtitle$1 = styled__default.default("div", {
|
|
5910
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5911
|
-
})(templateObject_5$
|
|
5935
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
5936
|
+
})(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5912
5937
|
var _a, _b;
|
|
5913
5938
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5914
5939
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5917,7 +5942,7 @@ var Subtitle$1 = styled__default.default("div", {
|
|
|
5917
5942
|
var tooltipCss = function (props) {
|
|
5918
5943
|
var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5919
5944
|
var shadows = getShadows(props);
|
|
5920
|
-
return css.css(templateObject_6$
|
|
5945
|
+
return css.css(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted || hasInvertedStyle
|
|
5921
5946
|
? dark$1(props)
|
|
5922
5947
|
: light$1(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
|
|
5923
5948
|
};
|
|
@@ -5925,7 +5950,7 @@ var arrowCss = function (props) {
|
|
|
5925
5950
|
var _a, _b;
|
|
5926
5951
|
var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
5927
5952
|
var semanticColors = getSemanticColors(props);
|
|
5928
|
-
return css.css(templateObject_7$
|
|
5953
|
+
return css.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
|
|
5929
5954
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
|
|
5930
5955
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
|
|
5931
5956
|
};
|
|
@@ -5933,8 +5958,8 @@ var arrowCss = function (props) {
|
|
|
5933
5958
|
* (masoudmanson): !important is needed to override arrow's
|
|
5934
5959
|
* default placement which is calculated by javascript
|
|
5935
5960
|
*/
|
|
5936
|
-
var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$
|
|
5937
|
-
var templateObject_1$
|
|
5961
|
+
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$S, templateObject_2$A, templateObject_3$q, templateObject_4$m, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$9;
|
|
5938
5963
|
|
|
5939
5964
|
/**
|
|
5940
5965
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -6011,7 +6036,7 @@ function mergeClass$1(_a) {
|
|
|
6011
6036
|
return propClassName ? "".concat(propClassName, " ").concat(className) : className;
|
|
6012
6037
|
}
|
|
6013
6038
|
|
|
6014
|
-
var doNotForwardProps$
|
|
6039
|
+
var doNotForwardProps$v = [
|
|
6015
6040
|
"icon",
|
|
6016
6041
|
"iconVerticalAlign",
|
|
6017
6042
|
"horizontalAlign",
|
|
@@ -6039,8 +6064,8 @@ var verticalAlignToFlexMap = {
|
|
|
6039
6064
|
top: "flex-start",
|
|
6040
6065
|
};
|
|
6041
6066
|
var StyledTableData = styled__default.default("td", {
|
|
6042
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6043
|
-
})(templateObject_1$
|
|
6067
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6068
|
+
})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6044
6069
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6045
6070
|
var spaces = getSpaces(props);
|
|
6046
6071
|
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 ");
|
|
@@ -6051,30 +6076,30 @@ var ShouldWrap = function (lineCount) {
|
|
|
6051
6076
|
var ShouldTruncate = function () {
|
|
6052
6077
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
|
|
6053
6078
|
};
|
|
6054
|
-
var StyledCellContent = styled__default.default("div")(templateObject_2$
|
|
6055
|
-
var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$
|
|
6079
|
+
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$p || (templateObject_3$p = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
6056
6081
|
var StyledCellIconWrapper = styled__default.default("div", {
|
|
6057
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6058
|
-
})(templateObject_4$
|
|
6082
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6083
|
+
})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6059
6084
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
6060
6085
|
var spaces = getSpaces(props);
|
|
6061
6086
|
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 ");
|
|
6062
6087
|
});
|
|
6063
|
-
var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$
|
|
6088
|
+
var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6064
6089
|
var horizontalAlign = props.horizontalAlign;
|
|
6065
6090
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
6066
6091
|
});
|
|
6067
6092
|
var PrimaryText = styled__default.default("div", {
|
|
6068
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6069
|
-
})(templateObject_6$
|
|
6093
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6094
|
+
})(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6070
6095
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a;
|
|
6071
6096
|
return "\n display: block;\n ".concat(props.shouldTextWrap
|
|
6072
6097
|
? ShouldWrap(primaryTextWrapLineCount)
|
|
6073
6098
|
: ShouldTruncate(), "\n ");
|
|
6074
6099
|
});
|
|
6075
6100
|
var SecondaryText = styled__default.default("span", {
|
|
6076
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6077
|
-
})(templateObject_7$
|
|
6101
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6102
|
+
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6078
6103
|
var _a;
|
|
6079
6104
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6080
6105
|
var spaces = getSpaces(props);
|
|
@@ -6084,8 +6109,8 @@ var SecondaryText = styled__default.default("span", {
|
|
|
6084
6109
|
: ShouldTruncate(), "\n ");
|
|
6085
6110
|
});
|
|
6086
6111
|
var TertiaryText = styled__default.default("span", {
|
|
6087
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6088
|
-
})(templateObject_8$
|
|
6112
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6113
|
+
})(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6089
6114
|
var _a;
|
|
6090
6115
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6091
6116
|
var spaces = getSpaces(props);
|
|
@@ -6094,15 +6119,15 @@ var TertiaryText = styled__default.default("span", {
|
|
|
6094
6119
|
? ShouldWrap(tertiaryTextWrapLineCount)
|
|
6095
6120
|
: ShouldTruncate(), "\n ");
|
|
6096
6121
|
});
|
|
6097
|
-
var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$
|
|
6122
|
+
var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6098
6123
|
var spaces = getSpaces(props);
|
|
6099
6124
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6100
6125
|
});
|
|
6101
|
-
var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$
|
|
6126
|
+
var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6102
6127
|
var spaces = getSpaces(props);
|
|
6103
6128
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6104
6129
|
});
|
|
6105
|
-
var templateObject_1$
|
|
6130
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$p, templateObject_4$l, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$8, templateObject_9$5, templateObject_10$4;
|
|
6106
6131
|
|
|
6107
6132
|
var CellBasicContent = function (props) {
|
|
6108
6133
|
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;
|
|
@@ -6116,15 +6141,15 @@ var CellBasic = React.forwardRef(function (props, ref) {
|
|
|
6116
6141
|
return (jsxRuntime.jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) })));
|
|
6117
6142
|
});
|
|
6118
6143
|
|
|
6119
|
-
var doNotForwardProps$
|
|
6144
|
+
var doNotForwardProps$u = ["horizontalAlign", "verticalAlign"];
|
|
6120
6145
|
var StyledCellComponentData = styled__default.default("td", {
|
|
6121
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6122
|
-
})(templateObject_1$
|
|
6146
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6147
|
+
})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6123
6148
|
var spaces = getSpaces(props);
|
|
6124
6149
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6125
6150
|
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 ");
|
|
6126
6151
|
});
|
|
6127
|
-
var templateObject_1$
|
|
6152
|
+
var templateObject_1$Q;
|
|
6128
6153
|
|
|
6129
6154
|
var CellComponent = React.forwardRef(function (props, _) {
|
|
6130
6155
|
var children = props.children;
|
|
@@ -6136,7 +6161,7 @@ var contentPositionMapping = {
|
|
|
6136
6161
|
left: "flex-start",
|
|
6137
6162
|
right: "flex-end",
|
|
6138
6163
|
};
|
|
6139
|
-
var doNotForwardProps$
|
|
6164
|
+
var doNotForwardProps$t = [
|
|
6140
6165
|
"active",
|
|
6141
6166
|
"horizontalAlign",
|
|
6142
6167
|
"shouldShowTooltipOnHover",
|
|
@@ -6146,8 +6171,8 @@ var doNotForwardProps$m = [
|
|
|
6146
6171
|
"hover",
|
|
6147
6172
|
];
|
|
6148
6173
|
var StyledSortingIcon = styled__default.default(Icon, {
|
|
6149
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6150
|
-
})(templateObject_1$
|
|
6174
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6175
|
+
})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6151
6176
|
var _a;
|
|
6152
6177
|
var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
|
|
6153
6178
|
var spaces = getSpaces(props);
|
|
@@ -6155,8 +6180,8 @@ var StyledSortingIcon = styled__default.default(Icon, {
|
|
|
6155
6180
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament : "transparent", ";\n display: ").concat(hideSortIcon ? (active ? "block" : "none") : "block", ";\n outline: none !important;\n ");
|
|
6156
6181
|
});
|
|
6157
6182
|
var StyledTableHeader$1 = styled__default.default("th", {
|
|
6158
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6159
|
-
})(templateObject_2$
|
|
6183
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6184
|
+
})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
6160
6185
|
var _a, _b, _c, _d, _e, _f;
|
|
6161
6186
|
var _g = props.active, active = _g === void 0 ? false : _g, _h = props.horizontalAlign, horizontalAlign = _h === void 0 ? "left" : _h, _j = props.hover, hover = _j === void 0 ? true : _j;
|
|
6162
6187
|
var spaces = getSpaces(props);
|
|
@@ -6170,12 +6195,12 @@ var StyledTableHeader$1 = styled__default.default("th", {
|
|
|
6170
6195
|
return "\n color: ".concat(defaultColor, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: ").concat(hover ? "pointer" : "default", ";\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(hover ? hoverColor : defaultColor, ";\n\n & .MuiButtonBase-root {\n color: ").concat(hoverColor, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n ");
|
|
6171
6196
|
});
|
|
6172
6197
|
var StyledCellHeaderContainer = styled__default.default("div", {
|
|
6173
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6174
|
-
})(templateObject_3$
|
|
6198
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6199
|
+
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6175
6200
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
6176
6201
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
6177
6202
|
});
|
|
6178
|
-
var templateObject_1$
|
|
6203
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$o;
|
|
6179
6204
|
|
|
6180
6205
|
var CellHeaderContent = function (props) {
|
|
6181
6206
|
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;
|
|
@@ -6195,20 +6220,20 @@ var CellHeader = React.forwardRef(function (props, ref) {
|
|
|
6195
6220
|
|
|
6196
6221
|
var small = function (props) {
|
|
6197
6222
|
var spaces = getSpaces(props);
|
|
6198
|
-
return react.css(templateObject_1$
|
|
6223
|
+
return react.css(templateObject_1$O || (templateObject_1$O = __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));
|
|
6199
6224
|
};
|
|
6200
6225
|
var medium = function (props) {
|
|
6201
6226
|
var spaces = getSpaces(props);
|
|
6202
6227
|
var colors = getColors(props);
|
|
6203
|
-
return react.css(templateObject_2$
|
|
6228
|
+
return react.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "], ["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
6204
6229
|
};
|
|
6205
6230
|
var rounded$2 = function (props) {
|
|
6206
6231
|
var corners = getCorners(props);
|
|
6207
|
-
return react.css(templateObject_3$
|
|
6232
|
+
return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6208
6233
|
};
|
|
6209
6234
|
var square$2 = function (props) {
|
|
6210
6235
|
var corners = getCorners(props);
|
|
6211
|
-
return react.css(templateObject_4$
|
|
6236
|
+
return react.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6212
6237
|
};
|
|
6213
6238
|
var success = function (props) {
|
|
6214
6239
|
return createStatusCss(props, "success");
|
|
@@ -6261,7 +6286,7 @@ function createStatusCss(props, status) {
|
|
|
6261
6286
|
},
|
|
6262
6287
|
};
|
|
6263
6288
|
var statusColors = statusToColors[status];
|
|
6264
|
-
return react.css(templateObject_5$
|
|
6289
|
+
return react.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "], ["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "])), statusColors.light, statusColors.dark);
|
|
6265
6290
|
}
|
|
6266
6291
|
var statusToCss = {
|
|
6267
6292
|
beta: beta,
|
|
@@ -6271,14 +6296,14 @@ var statusToCss = {
|
|
|
6271
6296
|
success: success,
|
|
6272
6297
|
warning: warning,
|
|
6273
6298
|
};
|
|
6274
|
-
var doNotForwardProps$
|
|
6299
|
+
var doNotForwardProps$s = ["isRounded"];
|
|
6275
6300
|
var StyledChip = styled__default.default(material.Chip, {
|
|
6276
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6277
|
-
})(templateObject_7$
|
|
6301
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6302
|
+
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6278
6303
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6279
|
-
return react.css(templateObject_6$
|
|
6304
|
+
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));
|
|
6280
6305
|
});
|
|
6281
|
-
var templateObject_1$
|
|
6306
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$n, templateObject_4$k, templateObject_5$g, templateObject_6$d, templateObject_7$9;
|
|
6282
6307
|
|
|
6283
6308
|
/**
|
|
6284
6309
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6296,7 +6321,7 @@ var Chip = function (props) {
|
|
|
6296
6321
|
return jsxRuntime.jsx(StyledChip, __assign({}, props));
|
|
6297
6322
|
};
|
|
6298
6323
|
|
|
6299
|
-
var doNotForwardProps$
|
|
6324
|
+
var doNotForwardProps$r = [
|
|
6300
6325
|
"anchorEl",
|
|
6301
6326
|
"count",
|
|
6302
6327
|
"keepSearchOnSelect",
|
|
@@ -6310,19 +6335,19 @@ var doNotForwardProps$k = [
|
|
|
6310
6335
|
"isMultiColumn",
|
|
6311
6336
|
];
|
|
6312
6337
|
var StyledHeaderTitle = styled__default.default("div", {
|
|
6313
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6314
|
-
})(templateObject_1$
|
|
6338
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6339
|
+
})(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
6315
6340
|
var _a;
|
|
6316
6341
|
var spaces = getSpaces(props);
|
|
6317
6342
|
var semanticColors = getSemanticColors(props);
|
|
6318
6343
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
6319
6344
|
});
|
|
6320
|
-
var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div")(templateObject_2$
|
|
6345
|
+
var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div")(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
|
|
6321
6346
|
var StyledPopper = styled__default.default(material.Popper, {
|
|
6322
6347
|
shouldForwardProp: function (prop) {
|
|
6323
|
-
return !doNotForwardProps$
|
|
6348
|
+
return !doNotForwardProps$r.includes(prop) || prop === "anchorEl";
|
|
6324
6349
|
},
|
|
6325
|
-
})(templateObject_3$
|
|
6350
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6326
6351
|
var _a;
|
|
6327
6352
|
var borders = getBorders(props);
|
|
6328
6353
|
var corners = getCorners(props);
|
|
@@ -6331,8 +6356,8 @@ var StyledPopper = styled__default.default(material.Popper, {
|
|
|
6331
6356
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n z-index: 1400;\n ");
|
|
6332
6357
|
});
|
|
6333
6358
|
var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
6334
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6335
|
-
})(templateObject_4$
|
|
6359
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6360
|
+
})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6336
6361
|
var _a;
|
|
6337
6362
|
var spaces = getSpaces(props);
|
|
6338
6363
|
var borders = getBorders(props);
|
|
@@ -6340,12 +6365,12 @@ var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
|
6340
6365
|
var semanticColors = getSemanticColors(props);
|
|
6341
6366
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
|
|
6342
6367
|
});
|
|
6343
|
-
var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$
|
|
6368
|
+
var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6344
6369
|
var search = props.search;
|
|
6345
6370
|
var spaces = getSpaces(props);
|
|
6346
6371
|
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 ");
|
|
6347
6372
|
});
|
|
6348
|
-
var templateObject_1$
|
|
6373
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$m, templateObject_4$j, templateObject_5$f;
|
|
6349
6374
|
|
|
6350
6375
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
6351
6376
|
// for the dropdownMenu's popper component
|
|
@@ -6383,7 +6408,7 @@ var DropdownMenu = function (props) {
|
|
|
6383
6408
|
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
6384
6409
|
};
|
|
6385
6410
|
|
|
6386
|
-
var doNotForwardProps$
|
|
6411
|
+
var doNotForwardProps$q = [
|
|
6387
6412
|
"intent",
|
|
6388
6413
|
"state",
|
|
6389
6414
|
"sdsType",
|
|
@@ -6411,27 +6436,27 @@ var inputDropdownStyles = function (props) {
|
|
|
6411
6436
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
6412
6437
|
*/
|
|
6413
6438
|
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");
|
|
6414
|
-
return react.css(templateObject_1$
|
|
6439
|
+
return react.css(templateObject_1$M || (templateObject_1$M = __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);
|
|
6415
6440
|
};
|
|
6416
6441
|
var minimal$1 = function (props) {
|
|
6417
6442
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6418
6443
|
var spaces = getSpaces(props);
|
|
6419
6444
|
var semanticColors = getSemanticColors(props);
|
|
6420
|
-
return react.css(templateObject_2$
|
|
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\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\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);
|
|
6421
6446
|
};
|
|
6422
6447
|
var square$1 = function (props) {
|
|
6423
6448
|
var corners = getCorners(props);
|
|
6424
|
-
return react.css(templateObject_3$
|
|
6449
|
+
return react.css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6425
6450
|
};
|
|
6426
6451
|
var rounded$1 = function (props) {
|
|
6427
6452
|
var corners = getCorners(props);
|
|
6428
|
-
return react.css(templateObject_4$
|
|
6453
|
+
return react.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6429
6454
|
};
|
|
6430
6455
|
var userInput = function (props) {
|
|
6431
6456
|
var _a, _b, _c, _d;
|
|
6432
6457
|
var sdsStyle = props.sdsStyle;
|
|
6433
6458
|
var semanticColors = getSemanticColors(props);
|
|
6434
|
-
return react.css(templateObject_5$
|
|
6459
|
+
return react.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, sdsStyle === "minimal"
|
|
6435
6460
|
? "\n border: none;\n color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n\n .styled-label {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n }\n ")
|
|
6436
6461
|
: "");
|
|
6437
6462
|
};
|
|
@@ -6441,7 +6466,7 @@ var isOpen = function (props) {
|
|
|
6441
6466
|
var borders = getBorders(props);
|
|
6442
6467
|
var semanticColors = getSemanticColors(props);
|
|
6443
6468
|
var inputColor = intentToColor$2[intent];
|
|
6444
|
-
return react.css(templateObject_6$
|
|
6469
|
+
return react.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
|
|
6445
6470
|
? "\n & > span, \n &:hover > span { \n color: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, "; \n }\n\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, "; \n ")
|
|
6446
6471
|
: "", inputColor === "accent"
|
|
6447
6472
|
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentOpen
|
|
@@ -6449,17 +6474,17 @@ var isOpen = function (props) {
|
|
|
6449
6474
|
? borders === null || borders === void 0 ? void 0 : borders.none
|
|
6450
6475
|
: (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
|
|
6451
6476
|
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillOpen
|
|
6452
|
-
: "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.
|
|
6477
|
+
: "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryHover);
|
|
6453
6478
|
};
|
|
6454
6479
|
var applyIntentColor$1 = function (props, intent) {
|
|
6455
6480
|
var _a, _b, _c;
|
|
6456
6481
|
var borders = getBorders(props);
|
|
6457
|
-
return react.css(templateObject_7$
|
|
6482
|
+
return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "], ["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "])), (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
|
|
6458
6483
|
};
|
|
6459
6484
|
var isDisabled = function (props) {
|
|
6460
6485
|
var _a, _b, _c, _d;
|
|
6461
6486
|
var semanticColors = getSemanticColors(props);
|
|
6462
|
-
return react.css(templateObject_8$
|
|
6487
|
+
return react.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled);
|
|
6463
6488
|
};
|
|
6464
6489
|
/**
|
|
6465
6490
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6470,10 +6495,10 @@ var isDisabled = function (props) {
|
|
|
6470
6495
|
* to the InputDropdownProps interface.
|
|
6471
6496
|
*/
|
|
6472
6497
|
var StyledInputDropdown = styled__default.default(Button, {
|
|
6473
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6474
|
-
})(templateObject_10$
|
|
6498
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6499
|
+
})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, focusVisibleA11yStyle, function (props) {
|
|
6475
6500
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
|
|
6476
|
-
return react.css(templateObject_9$
|
|
6501
|
+
return react.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), value && userInput(props), intent === "notice" &&
|
|
6477
6502
|
sdsStyle !== "minimal" &&
|
|
6478
6503
|
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6479
6504
|
sdsStyle !== "minimal" &&
|
|
@@ -6482,16 +6507,16 @@ var StyledInputDropdown = styled__default.default(Button, {
|
|
|
6482
6507
|
applyIntentColor$1(props, "positive"), state === "open" && isOpen(props), disabled && isDisabled(props));
|
|
6483
6508
|
});
|
|
6484
6509
|
var StyledDetail = styled__default.default("span", {
|
|
6485
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6486
|
-
})(templateObject_11$
|
|
6510
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6511
|
+
})(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6487
6512
|
var _a;
|
|
6488
6513
|
var spaces = getSpaces(props);
|
|
6489
6514
|
var semanticColors = getSemanticColors(props);
|
|
6490
6515
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
|
|
6491
6516
|
});
|
|
6492
6517
|
var StyledLabel$2 = styled__default.default("span", {
|
|
6493
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6494
|
-
})(templateObject_12$
|
|
6518
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6519
|
+
})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6495
6520
|
var _a, _b;
|
|
6496
6521
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
6497
6522
|
var fontWeights = getFontWeights(props);
|
|
@@ -6502,8 +6527,8 @@ var StyledLabel$2 = styled__default.default("span", {
|
|
|
6502
6527
|
return "\n color: ".concat(labelColor, ";\n\n font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n ");
|
|
6503
6528
|
});
|
|
6504
6529
|
var StyledCounter = styled__default.default("span", {
|
|
6505
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6506
|
-
})(templateObject_13$
|
|
6530
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6531
|
+
})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6507
6532
|
var _a, _b;
|
|
6508
6533
|
var corners = getCorners(props);
|
|
6509
6534
|
var spaces = getSpaces(props);
|
|
@@ -6511,8 +6536,8 @@ var StyledCounter = styled__default.default("span", {
|
|
|
6511
6536
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundTertiary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6512
6537
|
});
|
|
6513
6538
|
var MinimalDetails = styled__default.default("div", {
|
|
6514
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6515
|
-
})(templateObject_14$
|
|
6539
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6540
|
+
})(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (props) {
|
|
6516
6541
|
var _a;
|
|
6517
6542
|
var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
|
|
6518
6543
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6520,23 +6545,23 @@ var MinimalDetails = styled__default.default("div", {
|
|
|
6520
6545
|
"overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;", "\n ");
|
|
6521
6546
|
});
|
|
6522
6547
|
var LabelWrapper = styled__default.default("span", {
|
|
6523
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6524
|
-
})(templateObject_15$
|
|
6548
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6549
|
+
})(templateObject_15$3 || (templateObject_15$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6525
6550
|
var isMinimal = _a.isMinimal;
|
|
6526
6551
|
return "\n align-items: ".concat(isMinimal ? "center" : undefined, ";\n display: ").concat(isMinimal ? "inline-flex" : "contents", ";\n justify-content: ").concat(isMinimal ? "space-between" : undefined, ";\n width: 100%;\n ");
|
|
6527
6552
|
});
|
|
6528
6553
|
var IconWrapper = styled__default.default("span", {
|
|
6529
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6530
|
-
})(templateObject_16$
|
|
6554
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6555
|
+
})(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n"])));
|
|
6531
6556
|
function labelStyle(props) {
|
|
6532
6557
|
var _a, _b;
|
|
6533
6558
|
var semanticColors = getSemanticColors(props);
|
|
6534
6559
|
var labelColor = props.sdsType === "value"
|
|
6535
6560
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
|
|
6536
6561
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6537
|
-
return react.css(templateObject_17$
|
|
6562
|
+
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);
|
|
6538
6563
|
}
|
|
6539
|
-
var templateObject_1$
|
|
6564
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$l, templateObject_4$i, 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;
|
|
6540
6565
|
|
|
6541
6566
|
/**
|
|
6542
6567
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -6603,33 +6628,33 @@ var tagSizeS = function (props) {
|
|
|
6603
6628
|
var spaces = getSpaces(props);
|
|
6604
6629
|
var iconSizes = getIconSizes(props);
|
|
6605
6630
|
var semanticColors = getSemanticColors(props);
|
|
6606
|
-
return react.css(templateObject_1$
|
|
6631
|
+
return react.css(templateObject_1$L || (templateObject_1$L = __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);
|
|
6607
6632
|
};
|
|
6608
6633
|
var tagSizeL = function (props) {
|
|
6609
6634
|
var _a;
|
|
6610
6635
|
var spaces = getSpaces(props);
|
|
6611
6636
|
var iconSizes = getIconSizes(props);
|
|
6612
6637
|
var semanticColors = getSemanticColors(props);
|
|
6613
|
-
return react.css(templateObject_2$
|
|
6638
|
+
return react.css(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
6614
6639
|
};
|
|
6615
6640
|
var rounded = function (props) {
|
|
6616
6641
|
var corners = getCorners(props);
|
|
6617
6642
|
var spaces = getSpaces(props);
|
|
6618
6643
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6619
6644
|
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;
|
|
6620
|
-
return react.css(templateObject_3$
|
|
6645
|
+
return react.css(templateObject_3$k || (templateObject_3$k = __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);
|
|
6621
6646
|
};
|
|
6622
6647
|
var square = function (props) {
|
|
6623
6648
|
var corners = getCorners(props);
|
|
6624
6649
|
var spaces = getSpaces(props);
|
|
6625
6650
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6626
6651
|
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;
|
|
6627
|
-
return react.css(templateObject_4$
|
|
6652
|
+
return react.css(templateObject_4$h || (templateObject_4$h = __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);
|
|
6628
6653
|
};
|
|
6629
6654
|
var withHover = function (props) {
|
|
6630
6655
|
var _a;
|
|
6631
6656
|
var semanticColors = getSemanticColors(props);
|
|
6632
|
-
return react.css(templateObject_5$
|
|
6657
|
+
return react.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "], ["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse);
|
|
6633
6658
|
};
|
|
6634
6659
|
var primary = function (props) {
|
|
6635
6660
|
return createTypeCss(props, "primary");
|
|
@@ -6698,13 +6723,13 @@ function createTypeCss(props, type) {
|
|
|
6698
6723
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
6699
6724
|
};
|
|
6700
6725
|
var typeColors = typeToColors[type];
|
|
6701
|
-
return react.css(templateObject_6$
|
|
6726
|
+
return react.css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
|
|
6702
6727
|
}
|
|
6703
6728
|
var typeToCss = {
|
|
6704
6729
|
primary: primary,
|
|
6705
6730
|
secondary: secondary,
|
|
6706
6731
|
};
|
|
6707
|
-
var doNotForwardProps$
|
|
6732
|
+
var doNotForwardProps$p = [
|
|
6708
6733
|
"sdsType",
|
|
6709
6734
|
"sdsStyle",
|
|
6710
6735
|
"sdsSize",
|
|
@@ -6712,14 +6737,14 @@ var doNotForwardProps$i = [
|
|
|
6712
6737
|
"hover",
|
|
6713
6738
|
];
|
|
6714
6739
|
var StyledTag$2 = styled__default.default(material.Chip, {
|
|
6715
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6716
|
-
})(templateObject_8$
|
|
6740
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
6741
|
+
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6717
6742
|
var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
6718
6743
|
var isRounded = sdsStyle === "rounded";
|
|
6719
6744
|
var type = sdsType || "primary";
|
|
6720
|
-
return react.css(templateObject_7$
|
|
6745
|
+
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;");
|
|
6721
6746
|
});
|
|
6722
|
-
var templateObject_1$
|
|
6747
|
+
var templateObject_1$L, templateObject_2$u, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$7, templateObject_8$6;
|
|
6723
6748
|
|
|
6724
6749
|
/**
|
|
6725
6750
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6733,14 +6758,14 @@ var Tag = function (props) {
|
|
|
6733
6758
|
return jsxRuntime.jsx(StyledTag$2, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
6734
6759
|
};
|
|
6735
6760
|
|
|
6736
|
-
var StyledTag$1 = styled__default.default(Tag)(templateObject_2$
|
|
6761
|
+
var StyledTag$1 = styled__default.default(Tag)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6737
6762
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
6738
6763
|
var spaces = getSpaces(props);
|
|
6739
6764
|
var iconSizes = getIconSizes(props);
|
|
6740
6765
|
var semanticColors = getSemanticColors(props);
|
|
6741
|
-
return react.css(templateObject_1$
|
|
6766
|
+
return react.css(templateObject_1$K || (templateObject_1$K = __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);
|
|
6742
6767
|
});
|
|
6743
|
-
var templateObject_1$
|
|
6768
|
+
var templateObject_1$K, templateObject_2$t;
|
|
6744
6769
|
|
|
6745
6770
|
/**
|
|
6746
6771
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6763,12 +6788,12 @@ var Chips = function (_a) {
|
|
|
6763
6788
|
}) }));
|
|
6764
6789
|
};
|
|
6765
6790
|
|
|
6766
|
-
var Wrapper$1 = styled__default.default("div")(templateObject_1$
|
|
6767
|
-
var StyledChipsWrapper = styled__default.default("div")(templateObject_2$
|
|
6791
|
+
var Wrapper$1 = styled__default.default("div")(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
|
|
6792
|
+
var StyledChipsWrapper = styled__default.default("div")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6768
6793
|
var spaces = getSpaces(props);
|
|
6769
6794
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
6770
6795
|
});
|
|
6771
|
-
var templateObject_1$
|
|
6796
|
+
var templateObject_1$J, templateObject_2$s;
|
|
6772
6797
|
|
|
6773
6798
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6774
6799
|
var ComplexFilter = function (_a) {
|
|
@@ -6857,13 +6882,326 @@ var ComplexFilter = function (_a) {
|
|
|
6857
6882
|
}
|
|
6858
6883
|
};
|
|
6859
6884
|
|
|
6885
|
+
var doNotForwardProps$o = [
|
|
6886
|
+
"visualElement",
|
|
6887
|
+
"sdsType",
|
|
6888
|
+
"imagePosition",
|
|
6889
|
+
"imagePadding",
|
|
6890
|
+
"overlineText",
|
|
6891
|
+
"titleText",
|
|
6892
|
+
"subtitleText",
|
|
6893
|
+
"metadataText",
|
|
6894
|
+
"contentBlock",
|
|
6895
|
+
"decorativeBorder",
|
|
6896
|
+
"boundingBox",
|
|
6897
|
+
"buttons",
|
|
6898
|
+
"visualElementType",
|
|
6899
|
+
"image",
|
|
6900
|
+
"icon",
|
|
6901
|
+
"buttonsPosition",
|
|
6902
|
+
"clickableCard",
|
|
6903
|
+
"imageSize",
|
|
6904
|
+
];
|
|
6905
|
+
var StyledCard = styled__default.default(material.Card, {
|
|
6906
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6907
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6908
|
+
var _a, _b, _c, _d;
|
|
6909
|
+
var _e = props.imagePosition, imagePosition = _e === void 0 ? "left" : _e, _f = props.sdsType, sdsType = _f === void 0 ? "wide" : _f, _g = props.boundingBox, boundingBox = _g === void 0 ? true : _g, _h = props.decorativeBorder, decorativeBorder = _h === void 0 ? false : _h, _j = props.imagePadding, imagePadding = _j === void 0 ? false : _j, visualElementType = props.visualElementType;
|
|
6910
|
+
var semanticColors = getSemanticColors(props);
|
|
6911
|
+
var flexDirection = sdsType === "wide" && visualElementType === "image"
|
|
6912
|
+
? imagePosition === "left"
|
|
6913
|
+
? "row"
|
|
6914
|
+
: "row-reverse"
|
|
6915
|
+
: visualElementType === "icon"
|
|
6916
|
+
? "row"
|
|
6917
|
+
: "column";
|
|
6918
|
+
var showDecorativeBorder = visualElementType === "image"
|
|
6919
|
+
? boundingBox && decorativeBorder && imagePadding
|
|
6920
|
+
: boundingBox && decorativeBorder;
|
|
6921
|
+
return react.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n background-color: ", ";\n flex-direction: ", ";\n box-shadow: none;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: ", ";\n flex-direction: ", ";\n box-shadow: none;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, flexDirection, boundingBox && react.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n border: 1px solid ", ";\n "], ["\n border: 1px solid ", ";\n "])), (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderSecondary), sdsType === "wide" &&
|
|
6922
|
+
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" &&
|
|
6923
|
+
showDecorativeBorder && react.css(templateObject_3$j || (templateObject_3$j = __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));
|
|
6924
|
+
});
|
|
6925
|
+
var StyledCardActionArea = styled__default.default(material.CardActionArea, {
|
|
6926
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6927
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6928
|
+
var _a, _b;
|
|
6929
|
+
var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.sdsType, sdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
|
|
6930
|
+
var semanticColors = getSemanticColors(props);
|
|
6931
|
+
var flexDirection = sdsType === "wide"
|
|
6932
|
+
? imagePosition === "left"
|
|
6933
|
+
? "row"
|
|
6934
|
+
: "row-reverse"
|
|
6935
|
+
: visualElementType === "image"
|
|
6936
|
+
? "column"
|
|
6937
|
+
: "row";
|
|
6938
|
+
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n &:hover,\n &:active {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundSecondary, ";\n }\n ");
|
|
6939
|
+
});
|
|
6940
|
+
var StyledIconMediaWrapper = styled__default.default("div", {
|
|
6941
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6942
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6943
|
+
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
6944
|
+
var spaces = getSpaces(props);
|
|
6945
|
+
return react.css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), boundingBox
|
|
6946
|
+
? react.css(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n padding: ", "px 0 ", "px ", "px;\n "], ["\n padding: ", "px 0 ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : react.css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n padding-right: ", "px;\n "], ["\n padding-right: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6947
|
+
});
|
|
6948
|
+
var StyledCardContent = styled__default.default("div", {
|
|
6949
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6950
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6951
|
+
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a, _b = props.clickableCard, clickableCard = _b === void 0 ? false : _b;
|
|
6952
|
+
var spaces = getSpaces(props);
|
|
6953
|
+
return react.css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: ", ";\n min-width: 100px;\n width: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n height: ", ";\n min-width: 100px;\n width: 100%;\n\n ", "\n "])), clickableCard ? "100%" : "auto", boundingBox && react.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6954
|
+
});
|
|
6955
|
+
var StyledContentCardBody = styled__default.default(material.CardContent, {
|
|
6956
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6957
|
+
})(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6958
|
+
var _a;
|
|
6959
|
+
var semanticColors = getSemanticColors(props);
|
|
6960
|
+
var spaces = getSpaces(props);
|
|
6961
|
+
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 ");
|
|
6962
|
+
});
|
|
6963
|
+
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"])));
|
|
6964
|
+
var templateObject_1$I, templateObject_2$r, templateObject_3$j, templateObject_4$g, 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;
|
|
6965
|
+
|
|
6966
|
+
var doNotForwardProps$n = [
|
|
6967
|
+
"visualElement",
|
|
6968
|
+
"sdsType",
|
|
6969
|
+
"imagePosition",
|
|
6970
|
+
"imagePadding",
|
|
6971
|
+
"overlineText",
|
|
6972
|
+
"titleText",
|
|
6973
|
+
"subtitleText",
|
|
6974
|
+
"metadataText",
|
|
6975
|
+
"contentBlock",
|
|
6976
|
+
];
|
|
6977
|
+
var StyledTitleWrapper = material.styled("div", {
|
|
6978
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6979
|
+
})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6980
|
+
var spaces = getSpaces(props);
|
|
6981
|
+
return "\n display: flex;\n flex-direction: column;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6982
|
+
});
|
|
6983
|
+
var StyledOverlineText = material.styled("p", {
|
|
6984
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6985
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxs, function (props) {
|
|
6986
|
+
var _a;
|
|
6987
|
+
var semanticColors = getSemanticColors(props);
|
|
6988
|
+
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin: 0;\n ");
|
|
6989
|
+
});
|
|
6990
|
+
var StyledTitleText = material.styled("p", {
|
|
6991
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6992
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderXl, function (props) {
|
|
6993
|
+
var _a;
|
|
6994
|
+
var semanticColors = getSemanticColors(props);
|
|
6995
|
+
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 ");
|
|
6996
|
+
});
|
|
6997
|
+
var StyledSubtitleText = material.styled("p", {
|
|
6998
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6999
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
|
|
7000
|
+
var _a;
|
|
7001
|
+
var semanticColors = getSemanticColors(props);
|
|
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 ");
|
|
7003
|
+
});
|
|
7004
|
+
var StyledMetadataText = material.styled("p", {
|
|
7005
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
7006
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7007
|
+
var _a;
|
|
7008
|
+
var semanticColors = getSemanticColors(props);
|
|
7009
|
+
var spaces = getSpaces(props);
|
|
7010
|
+
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 ");
|
|
7011
|
+
});
|
|
7012
|
+
var templateObject_1$H, templateObject_2$q, templateObject_3$i, templateObject_4$f, templateObject_5$b;
|
|
7013
|
+
|
|
7014
|
+
/**
|
|
7015
|
+
* @see https://mui.com/material-ui/react-dialog/
|
|
7016
|
+
*/
|
|
7017
|
+
var ContentCardTitle = React.forwardRef(function ContentCardTitle(props, ref) {
|
|
7018
|
+
var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText;
|
|
7019
|
+
return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { children: [overlineText && (jsxRuntime.jsx(StyledOverlineText, { children: overlineText })), titleText && jsxRuntime.jsx(StyledTitleText, { children: titleText }), subtitleText && (jsxRuntime.jsx(StyledSubtitleText, { children: subtitleText }))] }), metadataText && (jsxRuntime.jsx(StyledMetadataText, { children: metadataText }))] }));
|
|
7020
|
+
});
|
|
7021
|
+
|
|
7022
|
+
var doNotForwardProps$m = ["buttonsPosition"];
|
|
7023
|
+
var StyledCardActions = styled__default.default(material.CardActions, {
|
|
7024
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7025
|
+
})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7026
|
+
var _a = props.buttonsPosition, buttonsPosition = _a === void 0 ? "left" : _a;
|
|
7027
|
+
var spaces = getSpaces(props);
|
|
7028
|
+
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 ");
|
|
7029
|
+
});
|
|
7030
|
+
var templateObject_1$G;
|
|
7031
|
+
|
|
7032
|
+
var isButtonElement = function (child) {
|
|
7033
|
+
if (React__namespace.default.isValidElement(child) && child.type === Button) {
|
|
7034
|
+
return true;
|
|
7035
|
+
}
|
|
7036
|
+
else {
|
|
7037
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ContentCardActionsOnlyButtons);
|
|
7038
|
+
return false;
|
|
7039
|
+
}
|
|
7040
|
+
};
|
|
7041
|
+
/**
|
|
7042
|
+
* @see https://mui.com/material-ui/api/card-actions/
|
|
7043
|
+
*/
|
|
7044
|
+
var ContentCardActions = React.forwardRef(function ContentCardActions(props, ref) {
|
|
7045
|
+
var buttonsPosition = props.buttonsPosition, clickableCard = props.clickableCard, children = props.children;
|
|
7046
|
+
/**
|
|
7047
|
+
* (masoudmanson):
|
|
7048
|
+
* We need to ensure that only SDS buttons are used within the
|
|
7049
|
+
* ContentCardActions component slot. This is to prevent any potential
|
|
7050
|
+
* issues with using other components within the ContentCardActions component slot.
|
|
7051
|
+
*/
|
|
7052
|
+
var validChildren = React__namespace.default.Children.toArray(Array.isArray(children) ? children : [children]).filter(isButtonElement);
|
|
7053
|
+
/**
|
|
7054
|
+
* If the card is clickable, it acts as a `<button>` itself and cannot
|
|
7055
|
+
* have `<button>` elements as children. If multiple buttons are provided,
|
|
7056
|
+
* only the first one will be kept, and a warning will be shown.
|
|
7057
|
+
*
|
|
7058
|
+
* Any additional buttons cannot remain as `<button>` elements due to
|
|
7059
|
+
* DOM hierarchy constraints; they will be converted to `<a>` tags instead.
|
|
7060
|
+
*/
|
|
7061
|
+
if (clickableCard) {
|
|
7062
|
+
if (validChildren.length > 1) {
|
|
7063
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ClickableContentCardNumberOfButtons);
|
|
7064
|
+
}
|
|
7065
|
+
/**
|
|
7066
|
+
* (masoudmanson): Since a clickable card can have at most one button,
|
|
7067
|
+
* we select the first button from the validChildren array and ignore the rest.
|
|
7068
|
+
*/
|
|
7069
|
+
var clickableCardButton = validChildren.shift();
|
|
7070
|
+
if (!clickableCardButton) {
|
|
7071
|
+
return null;
|
|
7072
|
+
}
|
|
7073
|
+
return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, children: [
|
|
7074
|
+
React__namespace.default.cloneElement(clickableCardButton, __assign({ component: "a" }, clickableCardButton === null || clickableCardButton === void 0 ? void 0 : clickableCardButton.props)),
|
|
7075
|
+
] }));
|
|
7076
|
+
}
|
|
7077
|
+
return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, children: validChildren }));
|
|
7078
|
+
});
|
|
7079
|
+
|
|
7080
|
+
var doNotForwardProps$l = [
|
|
7081
|
+
"imagePadding",
|
|
7082
|
+
"boundingBox",
|
|
7083
|
+
"sdsType",
|
|
7084
|
+
"imageSize",
|
|
7085
|
+
"image",
|
|
7086
|
+
"imagePosition",
|
|
7087
|
+
];
|
|
7088
|
+
var StyledImageMediaWrapper = material.styled("div", {
|
|
7089
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
7090
|
+
})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7091
|
+
var _a = props.imagePadding, imagePadding = _a === void 0 ? false : _a, _b = props.boundingBox, boundingBox = _b === void 0 ? true : _b, _c = props.sdsType, sdsType = _c === void 0 ? "wide" : _c, _d = props.imagePosition, imagePosition = _d === void 0 ? "left" : _d;
|
|
7092
|
+
var spaces = getSpaces(props);
|
|
7093
|
+
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
|
|
7094
|
+
? imagePadding
|
|
7095
|
+
? material.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n padding: ", "px;\n ", "\n "], ["\n padding: ", "px;\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, imagePosition === "left"
|
|
7096
|
+
? "padding-right: 0;"
|
|
7097
|
+
: "padding-left: 0;") : material.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7098
|
+
: material.css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
|
|
7099
|
+
? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
|
|
7100
|
+
: "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
|
|
7101
|
+
? imagePadding
|
|
7102
|
+
? material.css(templateObject_4$e || (templateObject_4$e = __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 "])))
|
|
7103
|
+
: 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)));
|
|
7104
|
+
});
|
|
7105
|
+
var templateObject_1$F, templateObject_2$p, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2;
|
|
7106
|
+
|
|
7107
|
+
/**
|
|
7108
|
+
* @see https://mui.com/material-ui/api/card-media/
|
|
7109
|
+
*/
|
|
7110
|
+
var ContentCardImageMedia = React.forwardRef(function ContentCardImageMedia(props, ref) {
|
|
7111
|
+
var image = props.image, imageSize = props.imageSize, sdsType = props.sdsType;
|
|
7112
|
+
/**
|
|
7113
|
+
* (masoudmanson): These styles makes the image responsive and
|
|
7114
|
+
* ensures the image is the right aspect ratio in different card sizes.
|
|
7115
|
+
*/
|
|
7116
|
+
var imageMediaStyles = {
|
|
7117
|
+
height: "100%",
|
|
7118
|
+
maxHeight: sdsType === "narrow" ? imageSize : "100%",
|
|
7119
|
+
maxWidth: sdsType === "narrow" ? "100%" : imageSize,
|
|
7120
|
+
minHeight: imageSize,
|
|
7121
|
+
minWidth: sdsType === "narrow" ? "unset" : imageSize,
|
|
7122
|
+
width: "100%",
|
|
7123
|
+
};
|
|
7124
|
+
/**
|
|
7125
|
+
* (masoudmanson): We need to make sure the image is wrapped in a CardMedia component.
|
|
7126
|
+
* - If it's a string, wrap it in CardMedia with proper styles.
|
|
7127
|
+
* - If it's already a CardMedia component, clone it and apply the styles.
|
|
7128
|
+
*/
|
|
7129
|
+
var imageElement = typeof image === "string" ? (jsxRuntime.jsx(material.CardMedia, { component: "img", src: image, alt: "Content Card Media", sx: __assign({}, imageMediaStyles) })) : React__namespace.default.isValidElement(image) && image.type === material.CardMedia ? (React__namespace.default.cloneElement(image, {
|
|
7130
|
+
component: "img",
|
|
7131
|
+
sx: __assign(__assign({}, image.props.sx), imageMediaStyles),
|
|
7132
|
+
})) : null;
|
|
7133
|
+
return (jsxRuntime.jsx(StyledImageMediaWrapper, __assign({ ref: ref }, props, { children: imageElement })));
|
|
7134
|
+
});
|
|
7135
|
+
|
|
7136
|
+
var CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE = 300;
|
|
7137
|
+
var CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_LOW_BOUNDARY = 595;
|
|
7138
|
+
var CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_HIGH_BOUNDARY = 605;
|
|
7139
|
+
|
|
7140
|
+
var useResponsiveWidth = function (initialSdsType) {
|
|
7141
|
+
var _a = React.useState(false), isNarrow = _a[0], setIsNarrow = _a[1];
|
|
7142
|
+
var handleResize = function (width) {
|
|
7143
|
+
if (width < CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_LOW_BOUNDARY && !isNarrow) {
|
|
7144
|
+
setIsNarrow(true);
|
|
7145
|
+
}
|
|
7146
|
+
else if (width > CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_HIGH_BOUNDARY &&
|
|
7147
|
+
isNarrow) {
|
|
7148
|
+
setIsNarrow(false);
|
|
7149
|
+
}
|
|
7150
|
+
};
|
|
7151
|
+
return {
|
|
7152
|
+
dynamicSdsType: isNarrow ? "narrow" : initialSdsType,
|
|
7153
|
+
handleResize: handleResize,
|
|
7154
|
+
isNarrow: isNarrow,
|
|
7155
|
+
};
|
|
7156
|
+
};
|
|
7157
|
+
/**
|
|
7158
|
+
* (masoudmanson): This function is used to add the clickableCard and
|
|
7159
|
+
* buttonsPosition props to the ContentCardActions sub-component.
|
|
7160
|
+
*/
|
|
7161
|
+
var enhanceChildrenWithCardActionsProps = function (children, clickableCard, buttonsPosition) {
|
|
7162
|
+
return React__namespace.default.Children.map(children, function (child) {
|
|
7163
|
+
if (React__namespace.default.isValidElement(child) && child.type === ContentCardActions) {
|
|
7164
|
+
return React__namespace.default.cloneElement(child, __assign(__assign({}, child.props), { buttonsPosition: buttonsPosition, clickableCard: clickableCard }));
|
|
7165
|
+
}
|
|
7166
|
+
return child;
|
|
7167
|
+
});
|
|
7168
|
+
};
|
|
7169
|
+
/**
|
|
7170
|
+
* @see https://mui.com/material-ui/react-card/
|
|
7171
|
+
*/
|
|
7172
|
+
var ContentCard = React__namespace.default.forwardRef(function (props, ref) {
|
|
7173
|
+
var _a = props.visualElementType, visualElementType = _a === void 0 ? "none" : _a, image = props.image, icon = props.icon, _b = props.imagePadding, imagePadding = _b === void 0 ? false : _b, _c = props.imageSize, imageSize = _c === void 0 ? CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE : _c, overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _d = props.boundingBox, propsBoundingBox = _d === void 0 ? true : _d, children = props.children, _e = props.sdsType, sdsType = _e === void 0 ? "wide" : _e, _f = props.clickableCard, clickableCard = _f === void 0 ? false : _f, _g = props.imagePosition, imagePosition = _g === void 0 ? "left" : _g, _h = props.buttonsPosition, buttonsPosition = _h === void 0 ? "left" : _h;
|
|
7174
|
+
// Force boundingBox to be true when clickableCard is true
|
|
7175
|
+
var boundingBox = clickableCard ? true : propsBoundingBox;
|
|
7176
|
+
var cardRef = React.useRef(null);
|
|
7177
|
+
var _j = useResponsiveWidth(sdsType), handleResize = _j.handleResize, dynamicSdsType = _j.dynamicSdsType;
|
|
7178
|
+
React.useEffect(function () {
|
|
7179
|
+
var element = cardRef.current;
|
|
7180
|
+
if (!element)
|
|
7181
|
+
return;
|
|
7182
|
+
var resizeObserver = new ResizeObserver(function (entries) {
|
|
7183
|
+
for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
|
|
7184
|
+
var entry = entries_1[_i];
|
|
7185
|
+
handleResize(entry.contentRect.width);
|
|
7186
|
+
}
|
|
7187
|
+
});
|
|
7188
|
+
resizeObserver.observe(element);
|
|
7189
|
+
return function () {
|
|
7190
|
+
resizeObserver.disconnect();
|
|
7191
|
+
};
|
|
7192
|
+
}, [handleResize]);
|
|
7193
|
+
var visualElement = visualElementType === "image" && image ? (jsxRuntime.jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition })) : visualElementType === "icon" && icon ? (jsxRuntime.jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, children: icon })) : null;
|
|
7194
|
+
var cardInnerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [visualElement, jsxRuntime.jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, children: [jsxRuntime.jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText }), jsxRuntime.jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition) })] })] }));
|
|
7195
|
+
return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, { sdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, children: cardInnerContent })) : (cardInnerContent) })));
|
|
7196
|
+
});
|
|
7197
|
+
|
|
6860
7198
|
var DialogContext = React.createContext({ sdsSize: "m" });
|
|
6861
7199
|
|
|
6862
7200
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
6863
|
-
var doNotForwardProps$
|
|
7201
|
+
var doNotForwardProps$k = ["sdsSize"];
|
|
6864
7202
|
var StyledPaper = styled__default.default(material.Paper, {
|
|
6865
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6866
|
-
})(templateObject_1$
|
|
7203
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7204
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
|
|
6867
7205
|
var _a;
|
|
6868
7206
|
var spaces = getSpaces(props);
|
|
6869
7207
|
var corners = getCorners(props);
|
|
@@ -6894,7 +7232,7 @@ function paperDimensions(props) {
|
|
|
6894
7232
|
var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
|
|
6895
7233
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
6896
7234
|
}
|
|
6897
|
-
var templateObject_1$
|
|
7235
|
+
var templateObject_1$E;
|
|
6898
7236
|
|
|
6899
7237
|
/**
|
|
6900
7238
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -6923,15 +7261,15 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
|
6923
7261
|
});
|
|
6924
7262
|
|
|
6925
7263
|
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
6926
|
-
var doNotForwardProps$
|
|
7264
|
+
var doNotForwardProps$j = ["buttonPosition"];
|
|
6927
7265
|
var StyledDialogActions = styled__default.default(material.DialogActions, {
|
|
6928
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6929
|
-
})(templateObject_1$
|
|
7266
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7267
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
6930
7268
|
var spaces = getSpaces(props);
|
|
6931
7269
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
6932
7270
|
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 ");
|
|
6933
7271
|
});
|
|
6934
|
-
var templateObject_1$
|
|
7272
|
+
var templateObject_1$D;
|
|
6935
7273
|
|
|
6936
7274
|
/**
|
|
6937
7275
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6940,8 +7278,8 @@ var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
|
|
6940
7278
|
return jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref }, props));
|
|
6941
7279
|
});
|
|
6942
7280
|
|
|
6943
|
-
var StyledDialogContent = styled__default.default(material.DialogContent)(templateObject_1$
|
|
6944
|
-
var templateObject_1$
|
|
7281
|
+
var StyledDialogContent = styled__default.default(material.DialogContent)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
7282
|
+
var templateObject_1$C;
|
|
6945
7283
|
|
|
6946
7284
|
var index = React.forwardRef(
|
|
6947
7285
|
/**
|
|
@@ -6951,11 +7289,11 @@ function DialogContent(props, ref) {
|
|
|
6951
7289
|
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
6952
7290
|
});
|
|
6953
7291
|
|
|
6954
|
-
var StyledButton$1 = styled__default.default(Button)(templateObject_1$
|
|
7292
|
+
var StyledButton$1 = styled__default.default(Button)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
6955
7293
|
var spaces = getSpaces(props);
|
|
6956
7294
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
6957
7295
|
});
|
|
6958
|
-
var templateObject_1$
|
|
7296
|
+
var templateObject_1$B;
|
|
6959
7297
|
|
|
6960
7298
|
var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
6961
7299
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
@@ -6971,27 +7309,27 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
6971
7309
|
} }));
|
|
6972
7310
|
});
|
|
6973
7311
|
|
|
6974
|
-
var StyledDialogTitle = styled__default.default(material.DialogTitle)(templateObject_1$
|
|
7312
|
+
var StyledDialogTitle = styled__default.default(material.DialogTitle)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n padding: 0;\n ", "\n"], ["\n padding: 0;\n ", "\n"])), function (props) {
|
|
6975
7313
|
var spaces = getSpaces(props);
|
|
6976
7314
|
return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
|
|
6977
7315
|
});
|
|
6978
|
-
var Title = styled__default.default(material.Typography)(templateObject_2$
|
|
7316
|
+
var Title = styled__default.default(material.Typography)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
|
|
6979
7317
|
var _a;
|
|
6980
7318
|
var semanticColors = getSemanticColors(props);
|
|
6981
7319
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
|
|
6982
7320
|
});
|
|
6983
|
-
var Subtitle = styled__default.default(material.Typography)(templateObject_3$
|
|
7321
|
+
var Subtitle = styled__default.default(material.Typography)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
6984
7322
|
var _a;
|
|
6985
7323
|
var semanticColors = getSemanticColors(props);
|
|
6986
7324
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
6987
7325
|
});
|
|
6988
|
-
var Overline = styled__default.default(material.Typography)(templateObject_4$
|
|
7326
|
+
var Overline = styled__default.default(material.Typography)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6989
7327
|
var _a;
|
|
6990
7328
|
var semanticColors = getSemanticColors(props);
|
|
6991
7329
|
var spaces = getSpaces(props);
|
|
6992
7330
|
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 ");
|
|
6993
7331
|
});
|
|
6994
|
-
var templateObject_1$
|
|
7332
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$g, templateObject_4$d;
|
|
6995
7333
|
|
|
6996
7334
|
/**
|
|
6997
7335
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7001,20 +7339,20 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
|
7001
7339
|
return (jsxRuntime.jsx(StyledDialogTitle, __assign({ ref: ref }, rest, { children: children || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [onClose && (jsxRuntime.jsx(CloseButton, { sdsStyle: "icon", icon: "XMark", onClick: onClose })), jsxRuntime.jsx(Overline, { children: overline }), jsxRuntime.jsx(Title, { children: title }), jsxRuntime.jsx(Subtitle, { children: subtitle })] })) })));
|
|
7002
7340
|
});
|
|
7003
7341
|
|
|
7004
|
-
var doNotForwardProps$
|
|
7342
|
+
var doNotForwardProps$i = ["buttonPosition"];
|
|
7005
7343
|
var StyledButtonsWrapper = styled__default.default("div", {
|
|
7006
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7007
|
-
})(templateObject_1$
|
|
7344
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7345
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7008
7346
|
var buttonPosition = props.buttonPosition;
|
|
7009
7347
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
7010
7348
|
});
|
|
7011
7349
|
var StyledButton = styled__default.default(Button, {
|
|
7012
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7013
|
-
})(templateObject_2$
|
|
7350
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7351
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7014
7352
|
var spaces = getSpaces(props);
|
|
7015
7353
|
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 ");
|
|
7016
7354
|
});
|
|
7017
|
-
var templateObject_1$
|
|
7355
|
+
var templateObject_1$z, templateObject_2$n;
|
|
7018
7356
|
|
|
7019
7357
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
7020
7358
|
var Dropdown = function (props) {
|
|
@@ -7150,11 +7488,11 @@ var intentToColor$1 = {
|
|
|
7150
7488
|
notice: "notice",
|
|
7151
7489
|
positive: "positive",
|
|
7152
7490
|
};
|
|
7153
|
-
var StyledIcon = styled__default.default(Icon)(templateObject_1$
|
|
7491
|
+
var StyledIcon = styled__default.default(Icon)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7154
7492
|
var iconSizes = getIconSizes(props);
|
|
7155
7493
|
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 ");
|
|
7156
7494
|
});
|
|
7157
|
-
var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2$
|
|
7495
|
+
var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7158
7496
|
var _a;
|
|
7159
7497
|
var _b = props.intent, intent = _b === void 0 ? "default" : _b;
|
|
7160
7498
|
var iconSizes = getIconSizes(props);
|
|
@@ -7162,22 +7500,22 @@ var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2
|
|
|
7162
7500
|
var borderColor = intentToColor$1[intent];
|
|
7163
7501
|
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 ");
|
|
7164
7502
|
});
|
|
7165
|
-
var StyledCheckboxCheckedIcon = styled__default.default("div")(templateObject_3$
|
|
7503
|
+
var StyledCheckboxCheckedIcon = styled__default.default("div")(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7166
7504
|
var _a, _b;
|
|
7167
7505
|
var iconSizes = getIconSizes(props);
|
|
7168
7506
|
var semanticColors = getSemanticColors(props);
|
|
7169
7507
|
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.fillPrimary, ";\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 ");
|
|
7170
7508
|
});
|
|
7171
|
-
var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_4$
|
|
7509
|
+
var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7172
7510
|
var spaces = getSpaces(props);
|
|
7173
7511
|
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 ");
|
|
7174
7512
|
});
|
|
7175
|
-
var StyledLabelContainer$1 = styled__default.default("span")(templateObject_5$
|
|
7176
|
-
var StyledCheckboxLabel = styled__default.default("span")(templateObject_6$
|
|
7513
|
+
var StyledLabelContainer$1 = styled__default.default("span")(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
|
|
7514
|
+
var StyledCheckboxLabel = styled__default.default("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7177
7515
|
var spaces = getSpaces(props);
|
|
7178
7516
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7179
7517
|
});
|
|
7180
|
-
var StyledCheckboxCaption = styled__default.default("span")(templateObject_7$
|
|
7518
|
+
var StyledCheckboxCaption = styled__default.default("span")(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7181
7519
|
var _a;
|
|
7182
7520
|
var semanticColors = getSemanticColors(props);
|
|
7183
7521
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7188,7 +7526,7 @@ var disabledStyles$1 = function (props) {
|
|
|
7188
7526
|
var borders = getBorders(props);
|
|
7189
7527
|
return "\n user-select: none;\n\n ".concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, ";\n }\n\n ").concat(StyledCheckboxCaption, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n }\n\n &:hover, &:active {\n ").concat(StyledCheckboxDefaultIcon, " {\n border: ").concat((_d = borders === null || borders === void 0 ? void 0 : borders.base) === null || _d === void 0 ? void 0 : _d.disabled, ";\n }\n\n ").concat(StyledCheckboxCheckedIcon, " {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentDisabled, ";\n }\n }\n ");
|
|
7190
7528
|
};
|
|
7191
|
-
var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_8$
|
|
7529
|
+
var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7192
7530
|
var _a, _b, _c, _d;
|
|
7193
7531
|
var disabled = props.disabled;
|
|
7194
7532
|
var spaces = getSpaces(props);
|
|
@@ -7196,7 +7534,7 @@ var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel
|
|
|
7196
7534
|
var borders = getBorders(props);
|
|
7197
7535
|
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 ");
|
|
7198
7536
|
});
|
|
7199
|
-
var templateObject_1$
|
|
7537
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$f, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$4, templateObject_8$3;
|
|
7200
7538
|
|
|
7201
7539
|
/**
|
|
7202
7540
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -7231,12 +7569,12 @@ var intentToColor = {
|
|
|
7231
7569
|
notice: "notice",
|
|
7232
7570
|
positive: "positive",
|
|
7233
7571
|
};
|
|
7234
|
-
var StyledRadioDot = styled__default.default("span")(templateObject_1$
|
|
7572
|
+
var StyledRadioDot = styled__default.default("span")(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7235
7573
|
var _a;
|
|
7236
7574
|
var semanticColors = getSemanticColors(props);
|
|
7237
7575
|
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 ");
|
|
7238
7576
|
});
|
|
7239
|
-
var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$
|
|
7577
|
+
var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7240
7578
|
var _a;
|
|
7241
7579
|
var _b = props.intent, intent = _b === void 0 ? "default" : _b;
|
|
7242
7580
|
var iconSizes = getIconSizes(props);
|
|
@@ -7244,22 +7582,22 @@ var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$i
|
|
|
7244
7582
|
var borderColor = intentToColor[intent];
|
|
7245
7583
|
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 ");
|
|
7246
7584
|
});
|
|
7247
|
-
var StyledRadioCheckedIcon = styled__default.default("div")(templateObject_3$
|
|
7585
|
+
var StyledRadioCheckedIcon = styled__default.default("div")(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7248
7586
|
var _a;
|
|
7249
7587
|
var iconSizes = getIconSizes(props);
|
|
7250
7588
|
var semanticColors = getSemanticColors(props);
|
|
7251
7589
|
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 ");
|
|
7252
7590
|
});
|
|
7253
|
-
var StyledRadioButton = styled__default.default(material.Radio)(templateObject_4$
|
|
7591
|
+
var StyledRadioButton = styled__default.default(material.Radio)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7254
7592
|
var spaces = getSpaces(props);
|
|
7255
7593
|
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 ");
|
|
7256
7594
|
});
|
|
7257
|
-
var StyledLabelContainer = styled__default.default("span")(templateObject_5$
|
|
7258
|
-
var StyledRadioLabel = styled__default.default("span")(templateObject_6$
|
|
7595
|
+
var StyledLabelContainer = styled__default.default("span")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
|
|
7596
|
+
var StyledRadioLabel = styled__default.default("span")(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7259
7597
|
var spaces = getSpaces(props);
|
|
7260
7598
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7261
7599
|
});
|
|
7262
|
-
var StyledRadioCaption = styled__default.default("span")(templateObject_7$
|
|
7600
|
+
var StyledRadioCaption = styled__default.default("span")(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7263
7601
|
var _a;
|
|
7264
7602
|
var semanticColors = getSemanticColors(props);
|
|
7265
7603
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7267,16 +7605,16 @@ var StyledRadioCaption = styled__default.default("span")(templateObject_7$2 || (
|
|
|
7267
7605
|
var disabledStyles = function (props) {
|
|
7268
7606
|
var _a, _b, _c, _d, _e;
|
|
7269
7607
|
var semanticColors = getSemanticColors(props);
|
|
7270
|
-
return "\n user-select: none;\n\n ".concat(StyledRadioCaption, " {\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n }\n\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.
|
|
7608
|
+
return "\n user-select: none;\n\n ".concat(StyledRadioCaption, " {\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n }\n\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderPrimaryDisabled, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled, ";\n }\n\n &:hover, &:active {\n ").concat(StyledRadioDefaultIcon, " {\n border: 1px solid ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimaryDisabled, ";\n }\n\n ").concat(StyledRadioCheckedIcon, " {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentDisabled, ";\n }\n }\n ");
|
|
7271
7609
|
};
|
|
7272
|
-
var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_8$
|
|
7610
|
+
var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7273
7611
|
var _a, _b, _c, _d;
|
|
7274
7612
|
var disabled = props.disabled;
|
|
7275
7613
|
var spaces = getSpaces(props);
|
|
7276
7614
|
var semanticColors = getSemanticColors(props);
|
|
7277
|
-
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.
|
|
7615
|
+
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 ");
|
|
7278
7616
|
});
|
|
7279
|
-
var templateObject_1$
|
|
7617
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$e, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$3, templateObject_8$2;
|
|
7280
7618
|
|
|
7281
7619
|
/**
|
|
7282
7620
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -7322,11 +7660,11 @@ var disabledSlider = function (props) {
|
|
|
7322
7660
|
var semanticColors = getSemanticColors(props);
|
|
7323
7661
|
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 ");
|
|
7324
7662
|
};
|
|
7325
|
-
var StyledSlider = styled__default.default(material.Slider)(templateObject_1$
|
|
7663
|
+
var StyledSlider = styled__default.default(material.Slider)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7326
7664
|
var disabled = props.disabled;
|
|
7327
7665
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
7328
7666
|
});
|
|
7329
|
-
var templateObject_1$
|
|
7667
|
+
var templateObject_1$w;
|
|
7330
7668
|
|
|
7331
7669
|
/**
|
|
7332
7670
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -7341,19 +7679,19 @@ var applyIntentColor = function (props, intent) {
|
|
|
7341
7679
|
var _a, _b, _c, _d;
|
|
7342
7680
|
var borders = getBorders(props);
|
|
7343
7681
|
var semanticColors = getSemanticColors(props);
|
|
7344
|
-
return react.css(templateObject_1$
|
|
7682
|
+
return react.css(templateObject_1$v || (templateObject_1$v = __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);
|
|
7345
7683
|
};
|
|
7346
7684
|
var disabledStyled$1 = function (props) {
|
|
7347
7685
|
var _a, _b, _c;
|
|
7348
7686
|
var borders = getBorders(props);
|
|
7349
7687
|
var semanticColors = getSemanticColors(props);
|
|
7350
|
-
return react.css(templateObject_2$
|
|
7688
|
+
return react.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
|
|
7351
7689
|
};
|
|
7352
7690
|
var textArea = function (props) {
|
|
7353
7691
|
var spaces = getSpaces(props);
|
|
7354
|
-
return react.css(templateObject_3$
|
|
7692
|
+
return react.css(templateObject_3$d || (templateObject_3$d = __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);
|
|
7355
7693
|
};
|
|
7356
|
-
var StyledLabel$1 = styled__default.default("label")(templateObject_4$
|
|
7694
|
+
var StyledLabel$1 = styled__default.default("label")(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7357
7695
|
var spaces = getSpaces(props);
|
|
7358
7696
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7359
7697
|
});
|
|
@@ -7361,15 +7699,15 @@ var StyledInputBase = styled__default.default(material.TextField, {
|
|
|
7361
7699
|
shouldForwardProp: function (prop) {
|
|
7362
7700
|
return !sdsPropNames$1.includes(prop.toString());
|
|
7363
7701
|
},
|
|
7364
|
-
})(templateObject_6$
|
|
7702
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7365
7703
|
var _a, _b, _c;
|
|
7366
7704
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
7367
7705
|
var spaces = getSpaces(props);
|
|
7368
7706
|
var borders = getBorders(props);
|
|
7369
7707
|
var corners = getCorners(props);
|
|
7370
|
-
return react.css(templateObject_5$
|
|
7708
|
+
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\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\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, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), 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.accent) === null || _c === void 0 ? void 0 : _c.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
|
|
7371
7709
|
});
|
|
7372
|
-
var templateObject_1$
|
|
7710
|
+
var templateObject_1$v, templateObject_2$k, templateObject_3$d, templateObject_4$a, templateObject_5$7, templateObject_6$6;
|
|
7373
7711
|
|
|
7374
7712
|
/**
|
|
7375
7713
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -7430,11 +7768,11 @@ var toggleOff = function (props) {
|
|
|
7430
7768
|
: (_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 &&
|
|
7431
7769
|
"&: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 ");
|
|
7432
7770
|
};
|
|
7433
|
-
var Toggle = styled__default.default(material.Switch)(templateObject_1$
|
|
7771
|
+
var Toggle = styled__default.default(material.Switch)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7434
7772
|
var checked = props.checked;
|
|
7435
7773
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
7436
7774
|
});
|
|
7437
|
-
var templateObject_1$
|
|
7775
|
+
var templateObject_1$u;
|
|
7438
7776
|
|
|
7439
7777
|
/**
|
|
7440
7778
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -7452,14 +7790,14 @@ var InputToggle = function (props) {
|
|
|
7452
7790
|
return (jsxRuntime.jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
|
|
7453
7791
|
};
|
|
7454
7792
|
|
|
7455
|
-
var doNotForwardProps$
|
|
7793
|
+
var doNotForwardProps$h = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
7456
7794
|
var defaultStyle = function (props) {
|
|
7457
7795
|
var _a, _b, _c, _d;
|
|
7458
7796
|
var semanticColors = getSemanticColors(props);
|
|
7459
|
-
return react.css(templateObject_1$
|
|
7797
|
+
return react.css(templateObject_1$t || (templateObject_1$t = __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);
|
|
7460
7798
|
};
|
|
7461
7799
|
var dashedStyle = function () {
|
|
7462
|
-
return react.css(templateObject_2$
|
|
7800
|
+
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 "])));
|
|
7463
7801
|
};
|
|
7464
7802
|
var smallStyle = function (props) {
|
|
7465
7803
|
return fontBodyS$1(props);
|
|
@@ -7469,13 +7807,13 @@ var extraSmallStyle = function (props) {
|
|
|
7469
7807
|
};
|
|
7470
7808
|
var StyledLink = styled__default.default(material.Link, {
|
|
7471
7809
|
shouldForwardProp: function (prop) {
|
|
7472
|
-
return !doNotForwardProps$
|
|
7810
|
+
return !doNotForwardProps$h.includes(prop.toString());
|
|
7473
7811
|
},
|
|
7474
|
-
})(templateObject_4$
|
|
7812
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
7475
7813
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7476
|
-
return react.css(templateObject_3$
|
|
7814
|
+
return react.css(templateObject_3$c || (templateObject_3$c = __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");
|
|
7477
7815
|
});
|
|
7478
|
-
var templateObject_1$
|
|
7816
|
+
var templateObject_1$t, templateObject_2$j, templateObject_3$c, templateObject_4$9;
|
|
7479
7817
|
|
|
7480
7818
|
/**
|
|
7481
7819
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -7490,10 +7828,10 @@ var Link = React.forwardRef(function (props, ref) {
|
|
|
7490
7828
|
});
|
|
7491
7829
|
|
|
7492
7830
|
// (thuang): Please keep this in sync with the props used in `ListExtraProps`
|
|
7493
|
-
var doNotForwardProps$
|
|
7831
|
+
var doNotForwardProps$g = ["marginBottom", "ordered"];
|
|
7494
7832
|
var StyledList = styled__default.default(material.List, {
|
|
7495
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7496
|
-
})(templateObject_1$
|
|
7833
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
7834
|
+
})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"], ["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"])), propsToMarginBottom$1, function (props) {
|
|
7497
7835
|
if (!props.ordered)
|
|
7498
7836
|
return "";
|
|
7499
7837
|
return "\n counter-reset: section;\n ";
|
|
@@ -7511,7 +7849,7 @@ function propsToMarginBottom$1(props) {
|
|
|
7511
7849
|
var marginBottom = props.marginBottom;
|
|
7512
7850
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
7513
7851
|
}
|
|
7514
|
-
var templateObject_1$
|
|
7852
|
+
var templateObject_1$s;
|
|
7515
7853
|
|
|
7516
7854
|
/**
|
|
7517
7855
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7528,10 +7866,10 @@ var fontBodyXs$1 = fontBody("xs");
|
|
|
7528
7866
|
var fontBodyXxs = fontBody("xxs");
|
|
7529
7867
|
var fontBodyXxxs = fontBody("xxxs");
|
|
7530
7868
|
// (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
|
|
7531
|
-
var doNotForwardProps$
|
|
7869
|
+
var doNotForwardProps$f = ["marginBottom", "fontSize", "ordered"];
|
|
7532
7870
|
var StyledListItem = styled__default.default(material.ListItem, {
|
|
7533
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7534
|
-
})(templateObject_1$
|
|
7871
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
7872
|
+
})(templateObject_1$r || (templateObject_1$r = __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) {
|
|
7535
7873
|
var ordered = props.ordered;
|
|
7536
7874
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
7537
7875
|
}, function (props) {
|
|
@@ -7562,11 +7900,11 @@ function propsToMarginBottom(props) {
|
|
|
7562
7900
|
var marginBottom = props.marginBottom;
|
|
7563
7901
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
|
|
7564
7902
|
}
|
|
7565
|
-
var ListItemLabel = styled__default.default("span")(templateObject_2$
|
|
7903
|
+
var ListItemLabel = styled__default.default("span")(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
|
|
7566
7904
|
var fontWeights = getFontWeights(props);
|
|
7567
7905
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
7568
7906
|
});
|
|
7569
|
-
var templateObject_1$
|
|
7907
|
+
var templateObject_1$r, templateObject_2$i;
|
|
7570
7908
|
|
|
7571
7909
|
/**
|
|
7572
7910
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7576,11 +7914,11 @@ var ListItem = function (props) {
|
|
|
7576
7914
|
};
|
|
7577
7915
|
|
|
7578
7916
|
var fontHeaderM = fontHeader("m");
|
|
7579
|
-
var StyledListSubheader = styled__default.default(material.ListSubheader)(templateObject_1$
|
|
7917
|
+
var StyledListSubheader = styled__default.default(material.ListSubheader)(templateObject_1$q || (templateObject_1$q = __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) {
|
|
7580
7918
|
var spaces = getSpaces(props);
|
|
7581
7919
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7582
7920
|
});
|
|
7583
|
-
var templateObject_1$
|
|
7921
|
+
var templateObject_1$q;
|
|
7584
7922
|
|
|
7585
7923
|
/**
|
|
7586
7924
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7589,7 +7927,7 @@ var ListSubheader = function (props) {
|
|
|
7589
7927
|
return jsxRuntime.jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
7590
7928
|
};
|
|
7591
7929
|
|
|
7592
|
-
var StyledText = styled__default.default("span")(templateObject_1$
|
|
7930
|
+
var StyledText = styled__default.default("span")(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7593
7931
|
var spaces = getSpaces(props);
|
|
7594
7932
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7595
7933
|
});
|
|
@@ -7597,37 +7935,37 @@ var minimal = function (props) {
|
|
|
7597
7935
|
var _a, _b;
|
|
7598
7936
|
var iconSizes = getIconSizes(props);
|
|
7599
7937
|
var semanticColors = getSemanticColors(props);
|
|
7600
|
-
return react.css(templateObject_2$
|
|
7938
|
+
return react.css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary);
|
|
7601
7939
|
};
|
|
7602
7940
|
var tag = function (props) {
|
|
7603
7941
|
var _a, _b, _c;
|
|
7604
7942
|
var corners = getCorners(props);
|
|
7605
7943
|
var semanticColors = getSemanticColors(props);
|
|
7606
|
-
return react.css(templateObject_3$
|
|
7944
|
+
return react.css(templateObject_3$b || (templateObject_3$b = __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);
|
|
7607
7945
|
};
|
|
7608
|
-
var doNotForwardProps$
|
|
7946
|
+
var doNotForwardProps$e = ["sdsStyle"];
|
|
7609
7947
|
var StyledLoadingIndicator = styled__default.default("div", {
|
|
7610
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7611
|
-
})(templateObject_6$
|
|
7948
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
7949
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7612
7950
|
var sdsStyle = props.sdsStyle;
|
|
7613
7951
|
var spaces = getSpaces(props);
|
|
7614
|
-
var style = react.css(templateObject_4$
|
|
7615
|
-
return react.css(templateObject_5$
|
|
7952
|
+
var style = react.css(templateObject_4$8 || (templateObject_4$8 = __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);
|
|
7953
|
+
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));
|
|
7616
7954
|
});
|
|
7617
|
-
var templateObject_1$
|
|
7955
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$b, templateObject_4$8, templateObject_5$6, templateObject_6$5;
|
|
7618
7956
|
|
|
7619
7957
|
var LoadingIndicator = function (_a) {
|
|
7620
7958
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
7621
7959
|
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" })] }));
|
|
7622
7960
|
};
|
|
7623
7961
|
|
|
7624
|
-
var StyledMenu = styled__default.default(material.Menu)(templateObject_1$
|
|
7962
|
+
var StyledMenu = styled__default.default(material.Menu)(templateObject_1$o || (templateObject_1$o = __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) {
|
|
7625
7963
|
var _a;
|
|
7626
7964
|
var spaces = getSpaces(props);
|
|
7627
7965
|
var semanticColors = getSemanticColors(props);
|
|
7628
7966
|
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 ");
|
|
7629
7967
|
});
|
|
7630
|
-
var templateObject_1$
|
|
7968
|
+
var templateObject_1$o;
|
|
7631
7969
|
|
|
7632
7970
|
var ANCHOR_ORIGIN = {
|
|
7633
7971
|
horizontal: "center",
|
|
@@ -7644,19 +7982,19 @@ var Menu = function (props) {
|
|
|
7644
7982
|
return (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
7645
7983
|
};
|
|
7646
7984
|
|
|
7647
|
-
var StyledMenuItem = styled__default.default(MenuItem)(templateObject_1$
|
|
7648
|
-
var doNotForwardProps$
|
|
7985
|
+
var StyledMenuItem = styled__default.default(MenuItem)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
7986
|
+
var doNotForwardProps$d = ["search", "InputBaseProps", "keepSearchOnSelect"];
|
|
7649
7987
|
// (thuang): Casting the type to `Autocomplete`
|
|
7650
7988
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
7651
7989
|
var StyledAutocomplete = styled__default.default(material.Autocomplete, {
|
|
7652
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7653
|
-
})(templateObject_2$
|
|
7990
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
7991
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
|
|
7654
7992
|
var search = _a.search;
|
|
7655
7993
|
return !search && "height: 0; margin: 0 !important;";
|
|
7656
7994
|
});
|
|
7657
7995
|
var InputBaseWrapper = styled__default.default("div", {
|
|
7658
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7659
|
-
})(templateObject_3$
|
|
7996
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
7997
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7660
7998
|
var search = props.search;
|
|
7661
7999
|
if (!search) {
|
|
7662
8000
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -7668,12 +8006,12 @@ var InputBaseWrapper = styled__default.default("div", {
|
|
|
7668
8006
|
return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
7669
8007
|
});
|
|
7670
8008
|
var StyledMenuInputSearch = styled__default.default(InputSearch, {
|
|
7671
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7672
|
-
})(templateObject_4$
|
|
8009
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8010
|
+
})(templateObject_4$7 || (templateObject_4$7 = __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) {
|
|
7673
8011
|
var search = _a.search;
|
|
7674
8012
|
return (search ? "auto" : "transparent");
|
|
7675
8013
|
});
|
|
7676
|
-
var templateObject_1$
|
|
8014
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$a, templateObject_4$7;
|
|
7677
8015
|
|
|
7678
8016
|
/**
|
|
7679
8017
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -7724,6 +8062,80 @@ var MenuSelect = function (props) {
|
|
|
7724
8062
|
}
|
|
7725
8063
|
};
|
|
7726
8064
|
|
|
8065
|
+
var doNotForwardProps$c = ["hasInvertedStyle", "isNarrow"];
|
|
8066
|
+
var StyledFooter = styled__default.default("footer", {
|
|
8067
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8068
|
+
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8069
|
+
var isNarrow = props.isNarrow;
|
|
8070
|
+
var spaces = getSpaces(props);
|
|
8071
|
+
var semanticColors = getSemanticColors(props);
|
|
8072
|
+
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
|
|
8073
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryInverse
|
|
8074
|
+
: 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$m || (templateObject_1$m = __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
|
|
8075
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
8076
|
+
: 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));
|
|
8077
|
+
});
|
|
8078
|
+
var StyledLogoWrapper$1 = styled__default.default("div", {
|
|
8079
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8080
|
+
})(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) {
|
|
8081
|
+
var spaces = getSpaces(props);
|
|
8082
|
+
return material.css(templateObject_4$6 || (templateObject_4$6 = __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);
|
|
8083
|
+
}, fontHeader("l"), fontHeader("l", /* isNarrow */ true), function (props) {
|
|
8084
|
+
var semanticColors = getSemanticColors(props);
|
|
8085
|
+
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
|
|
8086
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
8087
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
|
|
8088
|
+
});
|
|
8089
|
+
var StyledNavSection = styled__default.default("div", {
|
|
8090
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8091
|
+
})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8092
|
+
var isNarrow = props.isNarrow;
|
|
8093
|
+
var spaces = getSpaces(props);
|
|
8094
|
+
return material.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && material.css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "], ["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8095
|
+
});
|
|
8096
|
+
var StyledTopSection = styled__default.default("div", {
|
|
8097
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8098
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8099
|
+
var isNarrow = props.isNarrow;
|
|
8100
|
+
var semanticColors = getSemanticColors(props);
|
|
8101
|
+
var spaces = getSpaces(props);
|
|
8102
|
+
return material.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: ", "px;\n\n a:hover {\n text-decoration: none;\n }\n\n color: ", ";\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: ", "px;\n\n a:hover {\n text-decoration: none;\n }\n\n color: ", ";\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, props.hasInvertedStyle
|
|
8103
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
8104
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, props.hasInvertedStyle
|
|
8105
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
8106
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && material.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n flex-direction: column;\n margin-bottom: ", "px;\n "], ["\n flex-direction: column;\n margin-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8107
|
+
});
|
|
8108
|
+
var StyledLinkSection = styled__default.default("div", {
|
|
8109
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8110
|
+
})(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) {
|
|
8111
|
+
var isNarrow = props.isNarrow;
|
|
8112
|
+
var spaces = getSpaces(props);
|
|
8113
|
+
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.s, 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));
|
|
8114
|
+
});
|
|
8115
|
+
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) {
|
|
8116
|
+
var spaces = getSpaces(props);
|
|
8117
|
+
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
8118
|
+
});
|
|
8119
|
+
var StyledImageSection = styled__default.default("div", {
|
|
8120
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8121
|
+
})(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n\n ", "\n"])), function (props) {
|
|
8122
|
+
var isNarrow = props.isNarrow;
|
|
8123
|
+
var spaces = getSpaces(props);
|
|
8124
|
+
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));
|
|
8125
|
+
});
|
|
8126
|
+
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) {
|
|
8127
|
+
var spaces = getSpaces(props);
|
|
8128
|
+
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n ");
|
|
8129
|
+
});
|
|
8130
|
+
var StyledBottomSection = styled__default.default("div", {
|
|
8131
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8132
|
+
})(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n a:hover {\n text-decoration: none;\n }\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n a:hover {\n text-decoration: none;\n }\n\n ", "\n"])), function (props) {
|
|
8133
|
+
var isNarrow = props.isNarrow;
|
|
8134
|
+
var spaces = getSpaces(props);
|
|
8135
|
+
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));
|
|
8136
|
+
});
|
|
8137
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$9, templateObject_4$6, 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;
|
|
8138
|
+
|
|
7727
8139
|
/**
|
|
7728
8140
|
* WARNING: Don't import this directly.
|
|
7729
8141
|
* Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
|
|
@@ -13742,6 +14154,143 @@ function useTheme() {
|
|
|
13742
14154
|
return theme[THEME_ID] || theme;
|
|
13743
14155
|
}
|
|
13744
14156
|
|
|
14157
|
+
var doNotForwardProps$b = ["hasInvertedStyle", "isNarrow"];
|
|
14158
|
+
var NarrowNavItemLinkStyles = function (props) {
|
|
14159
|
+
var semanticColors = getSemanticColors(props);
|
|
14160
|
+
return material.css(templateObject_1$l || (templateObject_1$l = __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
|
|
14161
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14162
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, props.hasInvertedStyle
|
|
14163
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14164
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary);
|
|
14165
|
+
};
|
|
14166
|
+
var StyledNavItemLink = styled__default.default(Link, {
|
|
14167
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
14168
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeader("m"), fontBody("s", "regular", /* isNarrow */ true), function (props) {
|
|
14169
|
+
var isNarrow = props.isNarrow;
|
|
14170
|
+
var semanticColors = getSemanticColors(props);
|
|
14171
|
+
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
|
|
14172
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14173
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, props.hasInvertedStyle
|
|
14174
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14175
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && NarrowNavItemLinkStyles(props));
|
|
14176
|
+
});
|
|
14177
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$8;
|
|
14178
|
+
|
|
14179
|
+
var NavItem = React.memo(function (_a) {
|
|
14180
|
+
var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
14181
|
+
return (jsxRuntime.jsx(StyledNavItemLink, __assign({ href: item.url, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, component: item.component }, item.linkProps, { children: item.label }), item.label));
|
|
14182
|
+
});
|
|
14183
|
+
NavItem.displayName = "NavItem";
|
|
14184
|
+
|
|
14185
|
+
var doNotForwardProps$a = ["hasInvertedStyle"];
|
|
14186
|
+
var StyledLinkItemLink = styled__default.default(Link, {
|
|
14187
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14188
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBody("xxs", "regular"), function (props) {
|
|
14189
|
+
var semanticColors = getSemanticColors(props);
|
|
14190
|
+
return "\n color: ".concat(props.hasInvertedStyle ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, ";\n white-space: nowrap;\n\n &:hover {\n color: ").concat(props.hasInvertedStyle ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, ";\n text-decoration: none;\n }\n ");
|
|
14191
|
+
});
|
|
14192
|
+
var StyledDivider = styled__default.default(material.Divider, {
|
|
14193
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14194
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14195
|
+
var semanticColors = getSemanticColors(props);
|
|
14196
|
+
return "\n border-color: ".concat(props.hasInvertedStyle
|
|
14197
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14198
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, ";\n ");
|
|
14199
|
+
});
|
|
14200
|
+
var templateObject_1$k, templateObject_2$d;
|
|
14201
|
+
|
|
14202
|
+
var FooterLink = React.memo(function (_a) {
|
|
14203
|
+
var link = _a.link, showDivider = _a.showDivider, hasInvertedStyle = _a.hasInvertedStyle;
|
|
14204
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLinkItemLink, __assign({ href: link.url, hasInvertedStyle: hasInvertedStyle, component: link.component }, link.linkProps, { children: link.label }), link.label), showDivider && (jsxRuntime.jsx(StyledDivider, { orientation: "vertical", flexItem: true, hasInvertedStyle: hasInvertedStyle }))] }));
|
|
14205
|
+
});
|
|
14206
|
+
FooterLink.displayName = "FooterLink";
|
|
14207
|
+
|
|
14208
|
+
function groupArray(array, groupSize) {
|
|
14209
|
+
var groups = [];
|
|
14210
|
+
for (var i = 0; i < array.length; i += groupSize) {
|
|
14211
|
+
groups.push(array.slice(i, i + groupSize));
|
|
14212
|
+
}
|
|
14213
|
+
return groups;
|
|
14214
|
+
}
|
|
14215
|
+
var MemoizedStyledDivider = React.memo(StyledDivider);
|
|
14216
|
+
function NavigationFooter(_a) {
|
|
14217
|
+
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"]);
|
|
14218
|
+
var footerRef = React.useRef(null);
|
|
14219
|
+
var theme = useTheme();
|
|
14220
|
+
var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
14221
|
+
var _b = React.useState({
|
|
14222
|
+
breakpoint: 0,
|
|
14223
|
+
isNarrow: isMdScreen,
|
|
14224
|
+
}), dimensions = _b[0], setDimensions = _b[1];
|
|
14225
|
+
React.useEffect(function () {
|
|
14226
|
+
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
14227
|
+
}, [isMdScreen]);
|
|
14228
|
+
var checkScrollable = React.useCallback(function () {
|
|
14229
|
+
if (!footerRef.current)
|
|
14230
|
+
return;
|
|
14231
|
+
var clientWidth = footerRef.current.clientWidth;
|
|
14232
|
+
var scrollWidth = footerRef.current.scrollWidth;
|
|
14233
|
+
var needsScroll = scrollWidth > clientWidth;
|
|
14234
|
+
setDimensions(function (prev) {
|
|
14235
|
+
var newBreakpoint = needsScroll && !prev.isNarrow
|
|
14236
|
+
? Math.max(prev.breakpoint, clientWidth)
|
|
14237
|
+
: prev.breakpoint;
|
|
14238
|
+
return {
|
|
14239
|
+
breakpoint: newBreakpoint,
|
|
14240
|
+
isNarrow: clientWidth <= newBreakpoint,
|
|
14241
|
+
};
|
|
14242
|
+
});
|
|
14243
|
+
}, []);
|
|
14244
|
+
React.useEffect(function () {
|
|
14245
|
+
checkScrollable();
|
|
14246
|
+
var resizeObserver = new ResizeObserver(checkScrollable);
|
|
14247
|
+
if (footerRef.current) {
|
|
14248
|
+
resizeObserver.observe(footerRef.current);
|
|
14249
|
+
}
|
|
14250
|
+
return function () { return resizeObserver.disconnect(); };
|
|
14251
|
+
}, [checkScrollable]);
|
|
14252
|
+
var renderImages = React.useCallback(function () {
|
|
14253
|
+
if (!(images === null || images === void 0 ? void 0 : images.length))
|
|
14254
|
+
return null;
|
|
14255
|
+
if (!dimensions.isNarrow) {
|
|
14256
|
+
return images.map(function (_a) {
|
|
14257
|
+
var image = _a.image, url = _a.url;
|
|
14258
|
+
return (jsxRuntime.jsx(Link, { href: url, children: image }, url));
|
|
14259
|
+
});
|
|
14260
|
+
}
|
|
14261
|
+
return groupArray(images, 2).map(function (imageGroup, index) { return (jsxRuntime.jsx(StyledMobileImageRow, { children: imageGroup.map(function (_a) {
|
|
14262
|
+
var image = _a.image, url = _a.url;
|
|
14263
|
+
return (jsxRuntime.jsx(Link, { href: url, children: image }, url));
|
|
14264
|
+
}) }, index)); });
|
|
14265
|
+
}, [images, dimensions.isNarrow]);
|
|
14266
|
+
var renderLinks = React.useCallback(function () {
|
|
14267
|
+
if (!(navLinks === null || navLinks === void 0 ? void 0 : navLinks.length))
|
|
14268
|
+
return null;
|
|
14269
|
+
if (!dimensions.isNarrow) {
|
|
14270
|
+
return navLinks.map(function (link, index) { return (jsxRuntime.jsx(FooterLink, { link: link, showDivider: index < navLinks.length - 1, hasInvertedStyle: hasInvertedStyle }, link.label)); });
|
|
14271
|
+
}
|
|
14272
|
+
return groupArray(navLinks, 3).map(function (linkGroup, index) { return (jsxRuntime.jsx(StyledMobileLinkRow, { children: linkGroup.map(function (link, linkIndex) { return (jsxRuntime.jsx(FooterLink, { link: link, showDivider: linkIndex < linkGroup.length - 1, hasInvertedStyle: hasInvertedStyle }, link.label)); }) }, index)); });
|
|
14273
|
+
}, [navLinks, dimensions.isNarrow, hasInvertedStyle]);
|
|
14274
|
+
var logoNode = React.useMemo(function () {
|
|
14275
|
+
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 })] }));
|
|
14276
|
+
return logoUrl ? jsxRuntime.jsx(Link, { href: logoUrl, children: node }) : node;
|
|
14277
|
+
}, [
|
|
14278
|
+
logo,
|
|
14279
|
+
title,
|
|
14280
|
+
tag,
|
|
14281
|
+
tagColor,
|
|
14282
|
+
logoUrl,
|
|
14283
|
+
dimensions.isNarrow,
|
|
14284
|
+
hasInvertedStyle,
|
|
14285
|
+
]);
|
|
14286
|
+
var navItemsSection = React.useMemo(function () {
|
|
14287
|
+
if (!(navItems === null || navItems === void 0 ? void 0 : navItems.length))
|
|
14288
|
+
return null;
|
|
14289
|
+
return (jsxRuntime.jsx(StyledNavSection, { isNarrow: dimensions.isNarrow, children: navItems.map(function (item) { return (jsxRuntime.jsx(NavItem, { item: item, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, item.label)); }) }));
|
|
14290
|
+
}, [navItems, hasInvertedStyle, dimensions.isNarrow]);
|
|
14291
|
+
return (jsxRuntime.jsxs(StyledFooter, __assign({ ref: footerRef, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, rest, { children: [jsxRuntime.jsxs(StyledTopSection, { isNarrow: dimensions.isNarrow, hasInvertedStyle: hasInvertedStyle, children: [logoNode, navItemsSection] }), jsxRuntime.jsx(MemoizedStyledDivider, { hasInvertedStyle: hasInvertedStyle }), jsxRuntime.jsxs(StyledBottomSection, { isNarrow: dimensions.isNarrow, children: [jsxRuntime.jsx(StyledLinkSection, { isNarrow: dimensions.isNarrow, children: renderLinks() }), jsxRuntime.jsx(StyledImageSection, { isNarrow: dimensions.isNarrow, children: renderImages() })] })] })));
|
|
14292
|
+
}
|
|
14293
|
+
|
|
13745
14294
|
var doNotForwardProps$9 = [
|
|
13746
14295
|
"hasInvertedStyle",
|
|
13747
14296
|
"isNarrow",
|
|
@@ -13769,15 +14318,21 @@ var StyledToolbar = styled__default.default(material.Toolbar, {
|
|
|
13769
14318
|
var spaces = getSpaces(props);
|
|
13770
14319
|
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));
|
|
13771
14320
|
});
|
|
13772
|
-
var StyledShadowElement = styled__default.default
|
|
14321
|
+
var StyledShadowElement = styled__default.default("div", {
|
|
14322
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14323
|
+
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13773
14324
|
var shadows = getShadows(props);
|
|
13774
14325
|
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 ");
|
|
13775
14326
|
});
|
|
13776
|
-
var StyledShadowCoverElement = styled__default.default
|
|
14327
|
+
var StyledShadowCoverElement = styled__default.default("div", {
|
|
14328
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14329
|
+
})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13777
14330
|
var colors = getSemanticColors(props);
|
|
13778
14331
|
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 height: 10px;\n display: block;\n position: absolute;\n width: 100%;\n top: 56px;\n left: 0;\n z-index: 100;\n ");
|
|
13779
14332
|
});
|
|
13780
|
-
var StyledHeaderButton = styled__default.default(Button
|
|
14333
|
+
var StyledHeaderButton = styled__default.default(Button, {
|
|
14334
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14335
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13781
14336
|
var _a, _b, _c, _d;
|
|
13782
14337
|
var sdsType = props.sdsType, hasInvertedStyle = props.hasInvertedStyle;
|
|
13783
14338
|
var mode = ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.mode) || "light";
|
|
@@ -13790,7 +14345,9 @@ var invertedNarrowButtonStyles = function (props) {
|
|
|
13790
14345
|
var semanticColors = getSemanticColors(props);
|
|
13791
14346
|
return material.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "], ["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimaryInverse, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse);
|
|
13792
14347
|
};
|
|
13793
|
-
var StyledNarrowIconButton = styled__default.default(Button
|
|
14348
|
+
var StyledNarrowIconButton = styled__default.default(Button, {
|
|
14349
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14350
|
+
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13794
14351
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
13795
14352
|
return material.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
13796
14353
|
});
|
|
@@ -13799,7 +14356,9 @@ var invertedWideButtonStyles = function (props) {
|
|
|
13799
14356
|
var semanticColors = getSemanticColors(props);
|
|
13800
14357
|
return material.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "], ["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse);
|
|
13801
14358
|
};
|
|
13802
|
-
var StyledWideIconButton = styled__default.default(Button
|
|
14359
|
+
var StyledWideIconButton = styled__default.default(Button, {
|
|
14360
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14361
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13803
14362
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
13804
14363
|
return material.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
13805
14364
|
});
|
|
@@ -13846,19 +14405,19 @@ var StyledSearch = styled__default.default(InputSearch, {
|
|
|
13846
14405
|
return material.css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\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 .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
|
|
13847
14406
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
13848
14407
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
13849
|
-
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
14408
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryInverse
|
|
13850
14409
|
: "", hasInvertedStyle
|
|
13851
14410
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryInverse
|
|
13852
14411
|
: "", hasInvertedStyle
|
|
13853
|
-
? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.
|
|
14412
|
+
? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryHoverInverse
|
|
13854
14413
|
: "", hasInvertedStyle
|
|
13855
14414
|
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse
|
|
13856
14415
|
: "", hasInvertedStyle
|
|
13857
|
-
? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.
|
|
14416
|
+
? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryPressedInverse
|
|
13858
14417
|
: "", hasInvertedStyle
|
|
13859
14418
|
? (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentPrimaryInverse
|
|
13860
14419
|
: "", hasInvertedStyle
|
|
13861
|
-
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.
|
|
14420
|
+
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimaryDisabledInverse
|
|
13862
14421
|
: "", hasInvertedStyle
|
|
13863
14422
|
? (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabledInverse
|
|
13864
14423
|
: "");
|
|
@@ -13902,7 +14461,7 @@ var NarrowPrimaryNavItem = function (props) {
|
|
|
13902
14461
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
13903
14462
|
var inactiveBorderColor = hasInvertedStyle
|
|
13904
14463
|
? (_c = colors === null || colors === void 0 ? void 0 : colors.neutral) === null || _c === void 0 ? void 0 : _c.fillPrimary
|
|
13905
|
-
: colors === null || colors === void 0 ? void 0 : colors.base.
|
|
14464
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
13906
14465
|
return react.css(templateObject_1$i || (templateObject_1$i = __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
|
|
13907
14466
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondaryInverse
|
|
13908
14467
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : inactiveBorderColor);
|
|
@@ -13927,7 +14486,7 @@ var WideStyledLabel = function (props) {
|
|
|
13927
14486
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
13928
14487
|
var inactiveBorderColor = hasInvertedStyle
|
|
13929
14488
|
? colors === null || colors === void 0 ? void 0 : colors.base.borderOnFill
|
|
13930
|
-
: colors === null || colors === void 0 ? void 0 : colors.base.
|
|
14489
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
13931
14490
|
return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n padding-bottom: ", "px;\n\n &:hover {\n border-bottom-color: ", ";\n }\n "], ["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n padding-bottom: ", "px;\n\n &:hover {\n border-bottom-color: ", ";\n }\n "])), active ? activeBorderColor : "transparent", spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, active ? activeBorderColor : inactiveBorderColor);
|
|
13932
14491
|
};
|
|
13933
14492
|
var StyledLabel = styled__default.default("span", {
|
|
@@ -14225,7 +14784,7 @@ var StyledTab$1 = styled__default.default(material.Tab, {
|
|
|
14225
14784
|
var _a, _b, _c;
|
|
14226
14785
|
var spaces = getSpaces(props);
|
|
14227
14786
|
var semanticColors = getSemanticColors(props);
|
|
14228
|
-
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
14787
|
+
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
|
|
14229
14788
|
});
|
|
14230
14789
|
var templateObject_1$f, templateObject_2$8;
|
|
14231
14790
|
|
|
@@ -14729,7 +15288,7 @@ var StyledSegmentedControl = styled__default.default(material.ToggleButtonGroup,
|
|
|
14729
15288
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
14730
15289
|
var spaces = getSpaces(props);
|
|
14731
15290
|
var semanticColors = getSemanticColors(props);
|
|
14732
|
-
return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
15291
|
+
return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n }\n\n .").concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornamentSelected, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimary, ";\n\n &:hover {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n\n .").concat(material.toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n background-color: transparent;\n border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimary, ";\n line-height: 0px;\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimary, ";\n padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderPrimary, ";\n background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n }\n }\n ");
|
|
14733
15292
|
});
|
|
14734
15293
|
var StyledToggleButton = styled__default.default(material.ToggleButton, {
|
|
14735
15294
|
shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
|
|
@@ -14818,7 +15377,7 @@ var TableRow = React.forwardRef(function (props, ref) {
|
|
|
14818
15377
|
var StyledTableHeader = styled__default.default("thead")(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14819
15378
|
var _a;
|
|
14820
15379
|
var semanticColors = getSemanticColors(props);
|
|
14821
|
-
return "\n border-bottom: solid 2px ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
15380
|
+
return "\n border-bottom: solid 2px ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, ";\n ");
|
|
14822
15381
|
});
|
|
14823
15382
|
var templateObject_1$5;
|
|
14824
15383
|
|
|
@@ -14893,7 +15452,7 @@ var StyledTab = styled__default.default(material.Tab, {
|
|
|
14893
15452
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
14894
15453
|
var spaces = getSpaces(props);
|
|
14895
15454
|
var semanticColors = getSemanticColors(props);
|
|
14896
|
-
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n &:hover, :focus {\n box-shadow: 0 2px 0 0 ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.
|
|
15455
|
+
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n &:hover, :focus {\n box-shadow: 0 2px 0 0 ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderPrimary, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n }\n\n &.Mui-selected {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n }\n }\n\n &:active {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n }\n\n &:disabled {\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n }\n ");
|
|
14897
15456
|
});
|
|
14898
15457
|
function tabFontMixin(props) {
|
|
14899
15458
|
var sdsSize = props.sdsSize;
|
|
@@ -15026,6 +15585,10 @@ var TooltipTableContent = function (props) {
|
|
|
15026
15585
|
return (jsxRuntime.jsxs(material.TableContainer, __assign({}, rest, { children: [contentAlert && jsxRuntime.jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxRuntime.jsxs(Section, { disabled: section.disabled, children: [jsxRuntime.jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label }), jsxRuntime.jsx(material.Table, { size: "small", children: jsxRuntime.jsx(material.TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsxRuntime.jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
|
|
15027
15586
|
};
|
|
15028
15587
|
|
|
15588
|
+
Object.defineProperty(exports, "ContentCardMedia", {
|
|
15589
|
+
enumerable: true,
|
|
15590
|
+
get: function () { return material.CardMedia; }
|
|
15591
|
+
});
|
|
15029
15592
|
exports.Accordion = Accordion;
|
|
15030
15593
|
exports.AccordionDetails = AccordionDetails;
|
|
15031
15594
|
exports.AccordionHeader = AccordionHeader;
|
|
@@ -15047,6 +15610,9 @@ exports.Chip = Chip;
|
|
|
15047
15610
|
exports.ComplexFilter = ComplexFilter;
|
|
15048
15611
|
exports.ComplexFilterInputDropdown = InputDropdown;
|
|
15049
15612
|
exports.ComplexFilterPopper = StyledPopper;
|
|
15613
|
+
exports.ContentCard = ContentCard;
|
|
15614
|
+
exports.ContentCardActions = ContentCardActions;
|
|
15615
|
+
exports.ContentCardBody = StyledContentCardBody;
|
|
15050
15616
|
exports.Dialog = Dialog;
|
|
15051
15617
|
exports.DialogActions = DialogActions;
|
|
15052
15618
|
exports.DialogContent = index;
|
|
@@ -15079,6 +15645,7 @@ exports.MINIMUM_DROPDOWN_MENU_POPPER_WIDTH = MINIMUM_DROPDOWN_MENU_POPPER_WIDTH;
|
|
|
15079
15645
|
exports.Menu = Menu;
|
|
15080
15646
|
exports.MenuItem = MenuItem;
|
|
15081
15647
|
exports.MenuSelect = MenuSelect;
|
|
15648
|
+
exports.NavigationFooter = NavigationFooter;
|
|
15082
15649
|
exports.NavigationHeader = NavigationHeader;
|
|
15083
15650
|
exports.NavigationJumpTo = NavigationJumpTo;
|
|
15084
15651
|
exports.Notification = Notification;
|