@czi-sds/components 22.2.0 → 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 +120 -24
- package/dist/index.cjs.js +1003 -407
- package/dist/index.esm.d.ts +120 -24
- package/dist/index.esm.js +999 -410
- 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
|
@@ -250,7 +250,7 @@ var sharedAppTheme = {
|
|
|
250
250
|
fontWeights: {
|
|
251
251
|
bold: 700,
|
|
252
252
|
light: 300,
|
|
253
|
-
medium:
|
|
253
|
+
medium: 500,
|
|
254
254
|
regular: 400,
|
|
255
255
|
semibold: 600,
|
|
256
256
|
},
|
|
@@ -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],
|
|
@@ -1247,23 +1247,37 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
1247
1247
|
},
|
|
1248
1248
|
},
|
|
1249
1249
|
components: {
|
|
1250
|
+
MuiButton: {
|
|
1251
|
+
defaultProps: {
|
|
1252
|
+
disableFocusRipple: true,
|
|
1253
|
+
disableRipple: true,
|
|
1254
|
+
disableTouchRipple: true,
|
|
1255
|
+
},
|
|
1256
|
+
},
|
|
1250
1257
|
MuiButtonBase: {
|
|
1251
1258
|
defaultProps: {
|
|
1252
1259
|
disableRipple: true,
|
|
1260
|
+
disableTouchRipple: true,
|
|
1261
|
+
},
|
|
1262
|
+
},
|
|
1263
|
+
MuiButtonGroup: {
|
|
1264
|
+
defaultProps: {
|
|
1265
|
+
disableFocusRipple: true,
|
|
1266
|
+
disableRipple: true,
|
|
1253
1267
|
},
|
|
1254
|
-
// styleOverrides: {
|
|
1255
|
-
// root: {
|
|
1256
|
-
// "&:hover": {
|
|
1257
|
-
// boxShadow: "none",
|
|
1258
|
-
// },
|
|
1259
|
-
// },
|
|
1260
|
-
// },
|
|
1261
1268
|
},
|
|
1262
1269
|
MuiDrawer: {
|
|
1263
1270
|
defaultProps: {
|
|
1264
1271
|
hideBackdrop: true,
|
|
1265
1272
|
},
|
|
1266
1273
|
},
|
|
1274
|
+
MuiIconButton: {
|
|
1275
|
+
defaultProps: {
|
|
1276
|
+
disableFocusRipple: true,
|
|
1277
|
+
disableRipple: true,
|
|
1278
|
+
disableTouchRipple: true,
|
|
1279
|
+
},
|
|
1280
|
+
},
|
|
1267
1281
|
MuiLink: {
|
|
1268
1282
|
defaultProps: {
|
|
1269
1283
|
underline: "hover",
|
|
@@ -1271,7 +1285,16 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
1271
1285
|
},
|
|
1272
1286
|
MuiTab: {
|
|
1273
1287
|
defaultProps: {
|
|
1288
|
+
disableFocusRipple: true,
|
|
1289
|
+
disableRipple: true,
|
|
1290
|
+
disableTouchRipple: true,
|
|
1291
|
+
},
|
|
1292
|
+
},
|
|
1293
|
+
MuiToggleButton: {
|
|
1294
|
+
defaultProps: {
|
|
1295
|
+
disableFocusRipple: true,
|
|
1274
1296
|
disableRipple: true,
|
|
1297
|
+
disableTouchRipple: true,
|
|
1275
1298
|
},
|
|
1276
1299
|
},
|
|
1277
1300
|
},
|
|
@@ -1536,7 +1559,7 @@ var getBreakpoints = function (_a) {
|
|
|
1536
1559
|
function focusVisibleA11yStyle(props) {
|
|
1537
1560
|
var _a;
|
|
1538
1561
|
var semanticColors = getSemanticColors(props);
|
|
1539
|
-
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 ");
|
|
1540
1563
|
}
|
|
1541
1564
|
|
|
1542
1565
|
var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
@@ -1549,7 +1572,7 @@ var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
|
1549
1572
|
return null;
|
|
1550
1573
|
var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
|
|
1551
1574
|
if (isNarrow) {
|
|
1552
|
-
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));
|
|
1553
1576
|
}
|
|
1554
1577
|
return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
|
|
1555
1578
|
};
|
|
@@ -1574,8 +1597,8 @@ var fontCaps = function (fontSize, isNarrow) {
|
|
|
1574
1597
|
if (!typography)
|
|
1575
1598
|
return null;
|
|
1576
1599
|
var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
|
|
1577
|
-
return react.css(templateObject_3$
|
|
1578
|
-
? 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));
|
|
1579
1602
|
};
|
|
1580
1603
|
};
|
|
1581
1604
|
var fontCapsXxs = fontCaps("xxs");
|
|
@@ -1590,7 +1613,7 @@ var fontHeader = function (fontSize, isNarrow) {
|
|
|
1590
1613
|
return null;
|
|
1591
1614
|
var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
|
|
1592
1615
|
if (isNarrow) {
|
|
1593
|
-
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));
|
|
1594
1617
|
}
|
|
1595
1618
|
return themeToCss(header.semibold[fontSize], headerFontFamily);
|
|
1596
1619
|
};
|
|
@@ -1613,7 +1636,7 @@ var fontCode = function (fontSize, fontWeight, isNarrow) {
|
|
|
1613
1636
|
return null;
|
|
1614
1637
|
var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
|
|
1615
1638
|
if (isNarrow) {
|
|
1616
|
-
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));
|
|
1617
1640
|
}
|
|
1618
1641
|
return themeToCss(code[fontWeight][fontSize], codeFontFamily);
|
|
1619
1642
|
};
|
|
@@ -1631,8 +1654,8 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
|
|
|
1631
1654
|
if (!typography)
|
|
1632
1655
|
return null;
|
|
1633
1656
|
var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
|
|
1634
|
-
return react.css(templateObject_7$
|
|
1635
|
-
? 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));
|
|
1636
1659
|
};
|
|
1637
1660
|
};
|
|
1638
1661
|
var fontTabularXs = fontTabular("xs", "regular");
|
|
@@ -1641,33 +1664,33 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
|
|
|
1641
1664
|
var fontTabularSemiboldS = fontTabular("s", "semibold");
|
|
1642
1665
|
function themeToCss(fontTheme, fontFamily) {
|
|
1643
1666
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1644
|
-
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);
|
|
1645
1668
|
}
|
|
1646
|
-
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;
|
|
1647
1670
|
|
|
1648
|
-
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) {
|
|
1649
1672
|
var spaces = getSpaces(props);
|
|
1650
|
-
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);
|
|
1651
1674
|
});
|
|
1652
|
-
var templateObject_1$
|
|
1675
|
+
var templateObject_1$18, templateObject_2$M;
|
|
1653
1676
|
|
|
1654
1677
|
var AccordionDetails = function (props) {
|
|
1655
1678
|
var children = props.children;
|
|
1656
1679
|
return jsxRuntime.jsx(StyledAccordionDetails, { children: children });
|
|
1657
1680
|
};
|
|
1658
1681
|
|
|
1659
|
-
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) {
|
|
1660
1683
|
var _a, _b;
|
|
1661
1684
|
var spaces = getSpaces(props);
|
|
1662
1685
|
var semanticColors = getSemanticColors(props);
|
|
1663
|
-
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);
|
|
1664
1687
|
});
|
|
1665
|
-
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) {
|
|
1666
1689
|
var _a;
|
|
1667
1690
|
var semanticColors = getSemanticColors(props);
|
|
1668
|
-
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);
|
|
1669
1692
|
});
|
|
1670
|
-
var templateObject_1$
|
|
1693
|
+
var templateObject_1$17, templateObject_2$L, templateObject_3$B, templateObject_4$u;
|
|
1671
1694
|
|
|
1672
1695
|
var _path$26, _path2$C, _path3$6;
|
|
1673
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); }
|
|
@@ -4377,22 +4400,22 @@ var iconMap = {
|
|
|
4377
4400
|
},
|
|
4378
4401
|
};
|
|
4379
4402
|
|
|
4380
|
-
var doNotForwardProps$
|
|
4403
|
+
var doNotForwardProps$F = ["sdsIcon", "sdsSize", "iconColor"];
|
|
4381
4404
|
/**
|
|
4382
4405
|
* @see https://mui.com/material-ui/icons/#svgicon
|
|
4383
4406
|
*/
|
|
4384
4407
|
var StyledSvgIcon = styled__default.default(material.SvgIcon, {
|
|
4385
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4386
|
-
})(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) {
|
|
4387
4410
|
var _a, _b, _c;
|
|
4388
4411
|
var mode = getMode(props);
|
|
4389
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;
|
|
4390
4413
|
var iconSizes = getIconSizes(props);
|
|
4391
4414
|
var colors = getColors(props);
|
|
4392
|
-
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);
|
|
4393
4416
|
});
|
|
4394
|
-
var StyledIcon$1 = styled__default.default("div")(templateObject_3$
|
|
4395
|
-
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;
|
|
4396
4419
|
|
|
4397
4420
|
/**
|
|
4398
4421
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4423,24 +4446,24 @@ var StyledAccordion$1 = styled__default.default(material.Accordion, {
|
|
|
4423
4446
|
shouldForwardProp: function (prop) {
|
|
4424
4447
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4425
4448
|
},
|
|
4426
|
-
})(templateObject_2$
|
|
4449
|
+
})(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4427
4450
|
var _a, _b;
|
|
4428
4451
|
var useDivider = props.useDivider, togglePosition = props.togglePosition;
|
|
4429
4452
|
var shadows = getShadows(props);
|
|
4430
4453
|
var typography = getTypography(props);
|
|
4431
4454
|
var borders = getBorders(props);
|
|
4432
4455
|
var spaces = getSpaces(props);
|
|
4433
|
-
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));
|
|
4434
4457
|
});
|
|
4435
4458
|
var leftPosition = function (props) {
|
|
4436
4459
|
var _a, _b, _c;
|
|
4437
4460
|
var spaces = getSpaces(props);
|
|
4438
4461
|
var iconSizes = getIconSizes(props);
|
|
4439
|
-
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) +
|
|
4440
4463
|
((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
|
|
4441
4464
|
((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
|
|
4442
4465
|
};
|
|
4443
|
-
var templateObject_1$
|
|
4466
|
+
var templateObject_1$15, templateObject_2$J, templateObject_3$z;
|
|
4444
4467
|
|
|
4445
4468
|
/**
|
|
4446
4469
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4456,7 +4479,7 @@ var Accordion = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4456
4479
|
return (jsxRuntime.jsx(StyledAccordion$1, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
|
|
4457
4480
|
});
|
|
4458
4481
|
|
|
4459
|
-
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) {
|
|
4460
4483
|
var _a;
|
|
4461
4484
|
var colors = getColors(props);
|
|
4462
4485
|
var spaces = getSpaces(props);
|
|
@@ -4483,7 +4506,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4483
4506
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4484
4507
|
}
|
|
4485
4508
|
}
|
|
4486
|
-
var templateObject_1$
|
|
4509
|
+
var templateObject_1$14;
|
|
4487
4510
|
|
|
4488
4511
|
/**
|
|
4489
4512
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4511,6 +4534,20 @@ function filterProps(props, excludeProps) {
|
|
|
4511
4534
|
}
|
|
4512
4535
|
return result;
|
|
4513
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
|
+
};
|
|
4514
4551
|
|
|
4515
4552
|
var _a;
|
|
4516
4553
|
var SDSWarningTypes;
|
|
@@ -4525,6 +4562,8 @@ var SDSWarningTypes;
|
|
|
4525
4562
|
SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
|
|
4526
4563
|
SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
|
|
4527
4564
|
SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
|
|
4565
|
+
SDSWarningTypes["ContentCardActionsOnlyButtons"] = "contentCardActionsOnlyButtons";
|
|
4566
|
+
SDSWarningTypes["ClickableContentCardNumberOfButtons"] = "clickableContentCardNumberOfButtons";
|
|
4528
4567
|
})(SDSWarningTypes || (SDSWarningTypes = {}));
|
|
4529
4568
|
var SDS_WARNINGS = (_a = {},
|
|
4530
4569
|
_a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
|
|
@@ -4567,6 +4606,14 @@ var SDS_WARNINGS = (_a = {},
|
|
|
4567
4606
|
hasWarned: false,
|
|
4568
4607
|
message: "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
|
|
4569
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
|
+
},
|
|
4570
4617
|
_a);
|
|
4571
4618
|
var showWarningIfFirstOccurence = function (warningType) {
|
|
4572
4619
|
if (!(warningType in SDS_WARNINGS)) {
|
|
@@ -4584,7 +4631,7 @@ var showWarningIfFirstOccurence = function (warningType) {
|
|
|
4584
4631
|
SDS_WARNINGS[warningType].hasWarned = true;
|
|
4585
4632
|
};
|
|
4586
4633
|
|
|
4587
|
-
var doNotForwardProps$
|
|
4634
|
+
var doNotForwardProps$E = [
|
|
4588
4635
|
"isAllCaps",
|
|
4589
4636
|
"isRounded",
|
|
4590
4637
|
"sdsStyle",
|
|
@@ -4618,16 +4665,17 @@ var ButtonStyles = function (props) {
|
|
|
4618
4665
|
: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
|
|
4619
4666
|
var disabledBackgroundColor = variant === "outlined" ? "transparent" : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillDisabled;
|
|
4620
4667
|
var disabledBorder = variant === "outlined"
|
|
4621
|
-
? "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)
|
|
4622
4669
|
: "none";
|
|
4623
4670
|
var boxshadow = variant === "outlined"
|
|
4624
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)
|
|
4625
4672
|
: "none";
|
|
4626
|
-
|
|
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);
|
|
4627
4675
|
};
|
|
4628
4676
|
var Rounded = function (props) {
|
|
4629
4677
|
var corners = getCorners(props);
|
|
4630
|
-
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);
|
|
4631
4679
|
};
|
|
4632
4680
|
var DestructiveButton = function (props) {
|
|
4633
4681
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4646,13 +4694,13 @@ var DestructiveButton = function (props) {
|
|
|
4646
4694
|
var boxshadow = variant === "outlined"
|
|
4647
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)
|
|
4648
4696
|
: "none";
|
|
4649
|
-
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);
|
|
4650
4698
|
};
|
|
4651
4699
|
var StyledButton$3 = styled__default.default(material.Button, {
|
|
4652
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4653
|
-
})(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) {
|
|
4654
4702
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4655
|
-
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));
|
|
4656
4704
|
});
|
|
4657
4705
|
// Minimal Button Styles
|
|
4658
4706
|
var Minimal = function (props) {
|
|
@@ -4661,60 +4709,60 @@ var Minimal = function (props) {
|
|
|
4661
4709
|
var spaces = getSpaces(props);
|
|
4662
4710
|
var iconSizes = getIconSizes(props);
|
|
4663
4711
|
var semanticColors = getSemanticColors(props);
|
|
4664
|
-
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);
|
|
4665
4713
|
};
|
|
4666
4714
|
var PrimaryMinimalButton = function (props) {
|
|
4667
4715
|
var _a, _b;
|
|
4668
4716
|
var semanticColors = getSemanticColors(props);
|
|
4669
|
-
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);
|
|
4670
4718
|
};
|
|
4671
4719
|
var SecondaryMinimalButton = function (props) {
|
|
4672
4720
|
var _a, _b;
|
|
4673
4721
|
var semanticColors = getSemanticColors(props);
|
|
4674
|
-
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);
|
|
4675
4723
|
};
|
|
4676
4724
|
var StyledMinimalButton = styled__default.default(material.Button, {
|
|
4677
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4678
|
-
})(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) {
|
|
4679
4727
|
var sdsType = props.sdsType;
|
|
4680
|
-
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));
|
|
4681
4729
|
});
|
|
4682
4730
|
var StyledButtonLegacy = styled__default.default(material.Button, {
|
|
4683
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4684
|
-
})(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) {
|
|
4685
4733
|
if (!props.isRounded)
|
|
4686
4734
|
return "";
|
|
4687
4735
|
var corners = getCorners(props);
|
|
4688
4736
|
var spaces = getSpaces(props);
|
|
4689
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 ");
|
|
4690
4738
|
});
|
|
4691
|
-
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;
|
|
4692
4740
|
|
|
4693
4741
|
var isDisabled$1 = function (props) {
|
|
4694
4742
|
var _a, _b;
|
|
4695
4743
|
var semanticColors = getSemanticColors(props);
|
|
4696
|
-
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);
|
|
4697
4745
|
};
|
|
4698
4746
|
var primary$2 = function (props) {
|
|
4699
4747
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4700
4748
|
var semanticColors = getSemanticColors(props);
|
|
4701
|
-
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);
|
|
4702
4750
|
};
|
|
4703
4751
|
var secondary$2 = function (props) {
|
|
4704
4752
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4705
4753
|
var semanticColors = getSemanticColors(props);
|
|
4706
|
-
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);
|
|
4707
4755
|
};
|
|
4708
4756
|
var tertiary = function (props) {
|
|
4709
4757
|
var _a, _b, _c, _d, _e, _f;
|
|
4710
4758
|
var semanticColors = getSemanticColors(props);
|
|
4711
|
-
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);
|
|
4712
4760
|
};
|
|
4713
4761
|
var small$1 = function (props) {
|
|
4714
4762
|
var sdsType = props.sdsType;
|
|
4715
4763
|
var iconSizes = getIconSizes(props);
|
|
4716
4764
|
var spaces = getSpaces(props);
|
|
4717
|
-
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"
|
|
4718
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;")
|
|
4719
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;") : "");
|
|
4720
4768
|
};
|
|
@@ -4722,7 +4770,7 @@ var medium$1 = function (props) {
|
|
|
4722
4770
|
var sdsType = props.sdsType;
|
|
4723
4771
|
var iconSizes = getIconSizes(props);
|
|
4724
4772
|
var spaces = getSpaces(props);
|
|
4725
|
-
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"
|
|
4726
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;")
|
|
4727
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;") : "");
|
|
4728
4776
|
};
|
|
@@ -4730,11 +4778,11 @@ var large = function (props) {
|
|
|
4730
4778
|
var sdsType = props.sdsType;
|
|
4731
4779
|
var iconSizes = getIconSizes(props);
|
|
4732
4780
|
var spaces = getSpaces(props);
|
|
4733
|
-
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"
|
|
4734
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;")
|
|
4735
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;") : "");
|
|
4736
4784
|
};
|
|
4737
|
-
var doNotForwardProps$
|
|
4785
|
+
var doNotForwardProps$D = [
|
|
4738
4786
|
"on",
|
|
4739
4787
|
"sdsSize",
|
|
4740
4788
|
"sdsType",
|
|
@@ -4744,12 +4792,12 @@ var doNotForwardProps$w = [
|
|
|
4744
4792
|
"customTheme",
|
|
4745
4793
|
];
|
|
4746
4794
|
var StyledButtonIcon = styled__default.default(material.IconButton, {
|
|
4747
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4748
|
-
})(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) {
|
|
4749
4797
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4750
|
-
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));
|
|
4751
4799
|
});
|
|
4752
|
-
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;
|
|
4753
4801
|
|
|
4754
4802
|
var ButtonIconSizeToSdsIconSize = {
|
|
4755
4803
|
large: "xl",
|
|
@@ -4802,11 +4850,7 @@ var MUI_VARIANT_MAP = {
|
|
|
4802
4850
|
* @see https://mui.com/material-ui/react-button/
|
|
4803
4851
|
*/
|
|
4804
4852
|
var Button = React__namespace.default.forwardRef(function (props, ref) {
|
|
4805
|
-
var _a;
|
|
4806
|
-
var _b = props.sdsStyle, sdsStyle = _b === void 0 ? "square" : _b, sdsType = props.sdsType, _c = props.customTheme, customTheme = _c === void 0 ? "auto" : _c;
|
|
4807
|
-
var muiTheme = material.useTheme();
|
|
4808
|
-
var mode = ((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
4809
|
-
var componentTheme = customTheme !== "auto" ? customTheme : mode;
|
|
4853
|
+
var _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, sdsType = props.sdsType;
|
|
4810
4854
|
if (!sdsStyle || !sdsType) {
|
|
4811
4855
|
showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
|
|
4812
4856
|
}
|
|
@@ -4834,7 +4878,7 @@ var Button = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4834
4878
|
"sdsType",
|
|
4835
4879
|
];
|
|
4836
4880
|
var finalProps = filterProps(propsWithDefault, excludedProps);
|
|
4837
|
-
return (jsxRuntime.jsx(
|
|
4881
|
+
return (jsxRuntime.jsx(ButtonIcon, __assign({ icon: iconProps === null || iconProps === void 0 ? void 0 : iconProps.icon }, finalProps, { sdsType: sdsType, ref: ref })));
|
|
4838
4882
|
}
|
|
4839
4883
|
else {
|
|
4840
4884
|
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
|
|
@@ -4842,16 +4886,16 @@ var Button = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4842
4886
|
}
|
|
4843
4887
|
}
|
|
4844
4888
|
case sdsStyle === "minimal":
|
|
4845
|
-
return (jsxRuntime.jsx(
|
|
4889
|
+
return (jsxRuntime.jsx(StyledMinimalButton, __assign({ color: "primary", variant: "text" }, propsWithDefault, { ref: ref, "data-style": sdsStyle })));
|
|
4846
4890
|
case sdsStyle === "rounded":
|
|
4847
4891
|
case sdsStyle === "square":
|
|
4848
|
-
return (jsxRuntime.jsx(
|
|
4892
|
+
return (jsxRuntime.jsx(StyledButton$3, __assign({ color: "primary", variant: sdsType ? MUI_VARIANT_MAP[sdsType] : "text" }, propsWithDefault, { ref: ref })));
|
|
4849
4893
|
default:
|
|
4850
|
-
return
|
|
4894
|
+
return jsxRuntime.jsx(StyledButtonLegacy, __assign({}, propsWithDefault, { ref: ref }));
|
|
4851
4895
|
}
|
|
4852
4896
|
});
|
|
4853
4897
|
|
|
4854
|
-
var doNotForwardProps$
|
|
4898
|
+
var doNotForwardProps$C = [
|
|
4855
4899
|
"sdsStyle",
|
|
4856
4900
|
"intent",
|
|
4857
4901
|
"handleSubmit",
|
|
@@ -4862,39 +4906,39 @@ var rounded$3 = function (props) {
|
|
|
4862
4906
|
var _a;
|
|
4863
4907
|
var corners = getCorners(props);
|
|
4864
4908
|
var semanticColors = getSemanticColors(props);
|
|
4865
|
-
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);
|
|
4866
4910
|
};
|
|
4867
4911
|
var applyIntentColor$2 = function (props, intent) {
|
|
4868
4912
|
var _a, _b, _c, _d;
|
|
4869
4913
|
var semanticColors = getSemanticColors(props);
|
|
4870
4914
|
var borders = getBorders(props);
|
|
4871
|
-
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);
|
|
4872
4916
|
};
|
|
4873
4917
|
var disabledStyled$2 = function (props) {
|
|
4874
4918
|
var _a, _b, _c, _d, _e;
|
|
4875
4919
|
var semanticColors = getSemanticColors(props);
|
|
4876
|
-
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);
|
|
4877
4921
|
};
|
|
4878
|
-
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) {
|
|
4879
4923
|
var spaces = getSpaces(props);
|
|
4880
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 ");
|
|
4881
4925
|
});
|
|
4882
4926
|
var StyledSearchBase = styled__default.default(material.TextField, {
|
|
4883
4927
|
shouldForwardProp: function (prop) {
|
|
4884
|
-
return !doNotForwardProps$
|
|
4928
|
+
return !doNotForwardProps$C.includes(prop.toString());
|
|
4885
4929
|
},
|
|
4886
|
-
})(templateObject_6$
|
|
4930
|
+
})(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4887
4931
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
4888
4932
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4889
4933
|
var spaces = getSpaces(props);
|
|
4890
4934
|
var iconSizes = getIconSizes(props);
|
|
4891
4935
|
var semanticColors = getSemanticColors(props);
|
|
4892
|
-
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));
|
|
4893
4937
|
});
|
|
4894
|
-
var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$
|
|
4895
|
-
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;
|
|
4896
4940
|
|
|
4897
|
-
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) {
|
|
4898
4942
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4899
4943
|
var selected = props.selected;
|
|
4900
4944
|
var fontWeights = getFontWeights(props);
|
|
@@ -4902,7 +4946,7 @@ var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject
|
|
|
4902
4946
|
var semanticColors = getSemanticColors(props);
|
|
4903
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 ");
|
|
4904
4948
|
});
|
|
4905
|
-
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"])));
|
|
4906
4950
|
var disabledStyles$2 = function (props) {
|
|
4907
4951
|
var _a;
|
|
4908
4952
|
var disabled = props.disabled;
|
|
@@ -4911,12 +4955,12 @@ var disabledStyles$2 = function (props) {
|
|
|
4911
4955
|
var semanticColors = getSemanticColors(props);
|
|
4912
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 ");
|
|
4913
4957
|
};
|
|
4914
|
-
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) {
|
|
4915
4959
|
var _a;
|
|
4916
4960
|
var semanticColors = getSemanticColors(props);
|
|
4917
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 ");
|
|
4918
4962
|
}, disabledStyles$2);
|
|
4919
|
-
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) {
|
|
4920
4964
|
var _a;
|
|
4921
4965
|
var disabled = props.disabled;
|
|
4922
4966
|
var spaces = getSpaces(props);
|
|
@@ -4924,20 +4968,20 @@ var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$m || (
|
|
|
4924
4968
|
var semanticColors = getSemanticColors(props);
|
|
4925
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 ");
|
|
4926
4970
|
});
|
|
4927
|
-
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) {
|
|
4928
4972
|
var _a;
|
|
4929
4973
|
var semanticColors = getSemanticColors(props);
|
|
4930
4974
|
var spaces = getSpaces(props);
|
|
4931
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 ");
|
|
4932
4976
|
}, disabledStyles$2);
|
|
4933
|
-
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) {
|
|
4934
4978
|
var spaces = getSpaces(props);
|
|
4935
4979
|
var iconSizes = getIconSizes(props);
|
|
4936
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 ");
|
|
4937
4981
|
});
|
|
4938
4982
|
var StyledCheck = styled__default.default(iconsMaterial.Check, {
|
|
4939
4983
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4940
|
-
})(templateObject_7$
|
|
4984
|
+
})(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4941
4985
|
var _a, _b;
|
|
4942
4986
|
var selected = props.selected, disabled = props.disabled;
|
|
4943
4987
|
var iconSizes = getIconSizes(props);
|
|
@@ -4949,7 +4993,7 @@ var StyledCheck = styled__default.default(iconsMaterial.Check, {
|
|
|
4949
4993
|
});
|
|
4950
4994
|
var StyledMinus = styled__default.default(iconsMaterial.Remove, {
|
|
4951
4995
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4952
|
-
})(templateObject_8$
|
|
4996
|
+
})(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4953
4997
|
var _a, _b;
|
|
4954
4998
|
var selected = props.selected, disabled = props.disabled;
|
|
4955
4999
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4959,7 +5003,7 @@ var StyledMinus = styled__default.default(iconsMaterial.Remove, {
|
|
|
4959
5003
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
|
|
4960
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 ");
|
|
4961
5005
|
});
|
|
4962
|
-
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;
|
|
4963
5007
|
|
|
4964
5008
|
/**
|
|
4965
5009
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5058,11 +5102,7 @@ var useDetectUserTabbing = function (ref) {
|
|
|
5058
5102
|
* @see https://mui.com/material-ui/react-text-field/
|
|
5059
5103
|
*/
|
|
5060
5104
|
var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
5061
|
-
var _a;
|
|
5062
|
-
var label = props.label, id = props.id, placeholder = props.placeholder, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "square" : _b, _c = props.intent, intent = _c === void 0 ? "default" : _c, handleSubmit = props.handleSubmit, onChange = props.onChange, disabled = props.disabled, _d = props.customTheme, customTheme = _d === void 0 ? "auto" : _d, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange", "disabled", "customTheme"]);
|
|
5063
|
-
var muiTheme = material.useTheme();
|
|
5064
|
-
var mode = ((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
5065
|
-
var componentTheme = customTheme !== "auto" ? customTheme : mode;
|
|
5105
|
+
var label = props.label, id = props.id, placeholder = props.placeholder, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, _b = props.intent, intent = _b === void 0 ? "default" : _b, handleSubmit = props.handleSubmit, onChange = props.onChange, disabled = props.disabled, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange", "disabled"]);
|
|
5066
5106
|
/**
|
|
5067
5107
|
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
5068
5108
|
*/
|
|
@@ -5076,7 +5116,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5076
5116
|
* user is tabbing, we can apply different styles for :focus and :focus-visible states.
|
|
5077
5117
|
*/
|
|
5078
5118
|
useDetectUserTabbing((ref ? ref : inputRef));
|
|
5079
|
-
var
|
|
5119
|
+
var _c = React.useState(""), value = _c[0], setValue = _c[1];
|
|
5080
5120
|
var handleChange = function (event) {
|
|
5081
5121
|
setValue(event.target.value);
|
|
5082
5122
|
if (onChange)
|
|
@@ -5112,7 +5152,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5112
5152
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
5113
5153
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
5114
5154
|
}
|
|
5115
|
-
return (jsxRuntime.jsxs(
|
|
5155
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$3, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
|
|
5116
5156
|
// passed to mui Input
|
|
5117
5157
|
InputProps: {
|
|
5118
5158
|
endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
|
|
@@ -5125,7 +5165,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5125
5165
|
autoComplete: "one-time-code" }, rest))] }));
|
|
5126
5166
|
});
|
|
5127
5167
|
|
|
5128
|
-
var doNotForwardProps$
|
|
5168
|
+
var doNotForwardProps$B = [
|
|
5129
5169
|
"count",
|
|
5130
5170
|
"keepSearchOnSelect",
|
|
5131
5171
|
"search",
|
|
@@ -5134,18 +5174,18 @@ var doNotForwardProps$u = [
|
|
|
5134
5174
|
"onClickAway",
|
|
5135
5175
|
];
|
|
5136
5176
|
var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
|
|
5137
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5138
|
-
})(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) {
|
|
5139
5179
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5140
5180
|
var search = props.search;
|
|
5141
5181
|
var spaces = getSpaces(props);
|
|
5142
5182
|
var borders = getBorders(props);
|
|
5143
5183
|
var semanticColors = getSemanticColors(props);
|
|
5144
|
-
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 ");
|
|
5145
5185
|
});
|
|
5146
5186
|
var InputBaseWrapper$1 = styled__default.default("div", {
|
|
5147
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5148
|
-
})(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) {
|
|
5149
5189
|
var search = props.search;
|
|
5150
5190
|
if (!search) {
|
|
5151
5191
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -5155,12 +5195,12 @@ var InputBaseWrapper$1 = styled__default.default("div", {
|
|
|
5155
5195
|
}
|
|
5156
5196
|
});
|
|
5157
5197
|
var StyledMenuInputSearch$1 = styled__default.default(InputSearch, {
|
|
5158
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5159
|
-
})(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) {
|
|
5160
5200
|
var search = _a.search;
|
|
5161
5201
|
return (search ? "auto" : "transparent");
|
|
5162
5202
|
});
|
|
5163
|
-
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) {
|
|
5164
5204
|
var _a;
|
|
5165
5205
|
var spaces = getSpaces(props);
|
|
5166
5206
|
var corners = getCorners(props);
|
|
@@ -5169,13 +5209,13 @@ var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$l |
|
|
|
5169
5209
|
var semanticColors = getSemanticColors(props);
|
|
5170
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 ");
|
|
5171
5211
|
});
|
|
5172
|
-
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) {
|
|
5173
5213
|
var _a;
|
|
5174
5214
|
var semanticColors = getSemanticColors(props);
|
|
5175
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 ");
|
|
5176
5216
|
});
|
|
5177
|
-
var StyledMenuItemText = styled__default.default("div")(templateObject_6$
|
|
5178
|
-
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;
|
|
5179
5219
|
|
|
5180
5220
|
var AutocompleteBase = function (props) {
|
|
5181
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;
|
|
@@ -5336,27 +5376,27 @@ var AutocompleteBase = function (props) {
|
|
|
5336
5376
|
}
|
|
5337
5377
|
};
|
|
5338
5378
|
|
|
5339
|
-
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) {
|
|
5340
5380
|
var _a;
|
|
5341
5381
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
5342
5382
|
var spaces = getSpaces(props);
|
|
5343
5383
|
var borders = getBorders(props);
|
|
5344
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 ");
|
|
5345
5385
|
});
|
|
5346
|
-
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) {
|
|
5347
5387
|
var _a;
|
|
5348
5388
|
var spaces = getSpaces(props);
|
|
5349
5389
|
var semanticColors = getSemanticColors(props);
|
|
5350
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 ");
|
|
5351
5391
|
});
|
|
5352
|
-
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) {
|
|
5353
5393
|
var _a, _b;
|
|
5354
5394
|
var spaces = getSpaces(props);
|
|
5355
5395
|
var iconSizes = getIconSizes(props);
|
|
5356
5396
|
var semanticColors = getSemanticColors(props);
|
|
5357
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 ");
|
|
5358
5398
|
});
|
|
5359
|
-
var templateObject_1$
|
|
5399
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$t;
|
|
5360
5400
|
|
|
5361
5401
|
var AutocompleteGroup = function (props) {
|
|
5362
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"]);
|
|
@@ -5396,7 +5436,7 @@ var AutocompleteGroup = function (props) {
|
|
|
5396
5436
|
}
|
|
5397
5437
|
};
|
|
5398
5438
|
|
|
5399
|
-
var doNotForwardProps$
|
|
5439
|
+
var doNotForwardProps$A = [
|
|
5400
5440
|
"anchorEl",
|
|
5401
5441
|
"count",
|
|
5402
5442
|
"keepSearchOnSelect",
|
|
@@ -5409,9 +5449,9 @@ var doNotForwardProps$t = [
|
|
|
5409
5449
|
];
|
|
5410
5450
|
var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
5411
5451
|
shouldForwardProp: function (prop) {
|
|
5412
|
-
return !doNotForwardProps$
|
|
5452
|
+
return !doNotForwardProps$A.includes(prop) || prop === "anchorEl";
|
|
5413
5453
|
},
|
|
5414
|
-
})(templateObject_1$
|
|
5454
|
+
})(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5415
5455
|
var _a;
|
|
5416
5456
|
var corners = getCorners(props);
|
|
5417
5457
|
var shadows = getShadows(props);
|
|
@@ -5421,24 +5461,24 @@ var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
|
5421
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 ");
|
|
5422
5462
|
});
|
|
5423
5463
|
var StyledPaper$2 = styled__default.default(material.Paper, {
|
|
5424
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5425
|
-
})(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) {
|
|
5426
5466
|
var _a;
|
|
5427
5467
|
var shadows = getShadows(props);
|
|
5428
5468
|
var semanticColors = getSemanticColors(props);
|
|
5429
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 ");
|
|
5430
5470
|
});
|
|
5431
|
-
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"])));
|
|
5432
5472
|
var StyledAutocompleteInput = styled__default.default(InputSearch, {
|
|
5433
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5434
|
-
})(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) {
|
|
5435
5475
|
var search = _a.search;
|
|
5436
5476
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5437
5477
|
}, function (_a) {
|
|
5438
5478
|
var search = _a.search;
|
|
5439
5479
|
return (search ? "auto" : "transparent");
|
|
5440
5480
|
});
|
|
5441
|
-
var templateObject_1$
|
|
5481
|
+
var templateObject_1$Z, templateObject_2$C, templateObject_3$s, templateObject_4$o;
|
|
5442
5482
|
|
|
5443
5483
|
var AutocompleteMultiColumn = function (props) {
|
|
5444
5484
|
var _a;
|
|
@@ -5620,13 +5660,13 @@ var Autocomplete = function (props) {
|
|
|
5620
5660
|
}
|
|
5621
5661
|
};
|
|
5622
5662
|
|
|
5623
|
-
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"])));
|
|
5624
5664
|
var doNotForwardPropsIconWrapper = ["bannerType"];
|
|
5625
5665
|
var IconWrapper$1 = styled__default.default("div", {
|
|
5626
5666
|
shouldForwardProp: function (prop) {
|
|
5627
5667
|
return !doNotForwardPropsIconWrapper.includes(prop);
|
|
5628
5668
|
},
|
|
5629
|
-
})(templateObject_2$
|
|
5669
|
+
})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5630
5670
|
var _a, _b;
|
|
5631
5671
|
var bannerType = props.bannerType;
|
|
5632
5672
|
var iconSizes = getIconSizes(props);
|
|
@@ -5639,7 +5679,7 @@ var StyledButton$2 = styled__default.default(Button, {
|
|
|
5639
5679
|
shouldForwardProp: function (prop) {
|
|
5640
5680
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5641
5681
|
},
|
|
5642
|
-
})(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) {
|
|
5643
5683
|
var _a, _b;
|
|
5644
5684
|
var bannerType = props.bannerType;
|
|
5645
5685
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5647,7 +5687,7 @@ var StyledButton$2 = styled__default.default(Button, {
|
|
|
5647
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 ");
|
|
5648
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 ");
|
|
5649
5689
|
});
|
|
5650
|
-
styled__default.default("div")(templateObject_4$
|
|
5690
|
+
styled__default.default("div")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5651
5691
|
var primary$1 = function (props) {
|
|
5652
5692
|
var _a, _b;
|
|
5653
5693
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5658,15 +5698,15 @@ var secondary$1 = function (props) {
|
|
|
5658
5698
|
var semanticColors = getSemanticColors(props);
|
|
5659
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 ");
|
|
5660
5700
|
};
|
|
5661
|
-
var doNotForwardProps$
|
|
5701
|
+
var doNotForwardProps$z = ["sdsType", "textChild"];
|
|
5662
5702
|
var StyledBanner = styled__default.default("div", {
|
|
5663
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5664
|
-
})(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) {
|
|
5665
5705
|
var sdsType = props.sdsType;
|
|
5666
5706
|
var spaces = getSpaces(props);
|
|
5667
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 ");
|
|
5668
5708
|
});
|
|
5669
|
-
var templateObject_1$
|
|
5709
|
+
var templateObject_1$Y, templateObject_2$B, templateObject_3$r, templateObject_4$n, templateObject_5$j;
|
|
5670
5710
|
|
|
5671
5711
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
5672
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"]);
|
|
@@ -5729,16 +5769,16 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5729
5769
|
* All other props should be passed down to ButtonIcon; otherwise,
|
|
5730
5770
|
* the component won’t function as expected.
|
|
5731
5771
|
*/
|
|
5732
|
-
var doNotForwardProps$
|
|
5772
|
+
var doNotForwardProps$y = ["sdsStage"];
|
|
5733
5773
|
var StyledButtonToggle = styled__default.default(ButtonIcon, {
|
|
5734
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5735
|
-
})(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) {
|
|
5736
5776
|
var _a;
|
|
5737
5777
|
var sdsStage = props.sdsStage;
|
|
5738
5778
|
var semanticColors = getSemanticColors(props);
|
|
5739
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 ");
|
|
5740
5780
|
});
|
|
5741
|
-
var templateObject_1$
|
|
5781
|
+
var templateObject_1$X;
|
|
5742
5782
|
|
|
5743
5783
|
/**
|
|
5744
5784
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -5754,7 +5794,7 @@ var ButtonToggle = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5754
5794
|
}
|
|
5755
5795
|
});
|
|
5756
5796
|
|
|
5757
|
-
var doNotForwardProps$
|
|
5797
|
+
var doNotForwardProps$x = [
|
|
5758
5798
|
"calloutTitle",
|
|
5759
5799
|
"collapsed",
|
|
5760
5800
|
"severity",
|
|
@@ -5762,8 +5802,8 @@ var doNotForwardProps$q = [
|
|
|
5762
5802
|
"hideBody",
|
|
5763
5803
|
];
|
|
5764
5804
|
var StyledCallout = styled__default.default(material.Alert, {
|
|
5765
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5766
|
-
})(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) {
|
|
5767
5807
|
var _a, _b, _c, _d, _e;
|
|
5768
5808
|
var _f = props.intent, intent = _f === void 0 ? "info" : _f, sdsStyle = props.sdsStyle, hideBody = props.hideBody, collapsed = props.collapsed;
|
|
5769
5809
|
var spaces = getSpaces(props);
|
|
@@ -5775,12 +5815,12 @@ var StyledCallout = styled__default.default(material.Alert, {
|
|
|
5775
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";
|
|
5776
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 ");
|
|
5777
5817
|
});
|
|
5778
|
-
var templateObject_1$
|
|
5818
|
+
var templateObject_1$W;
|
|
5779
5819
|
|
|
5780
5820
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5781
5821
|
|
|
5782
|
-
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$
|
|
5783
|
-
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;
|
|
5784
5824
|
|
|
5785
5825
|
var CalloutTitle = function (_a) {
|
|
5786
5826
|
var children = _a.children;
|
|
@@ -5789,24 +5829,24 @@ var CalloutTitle = function (_a) {
|
|
|
5789
5829
|
// Display name required to ensure Callout expand works correctly.
|
|
5790
5830
|
CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
|
|
5791
5831
|
|
|
5792
|
-
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) {
|
|
5793
5833
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a;
|
|
5794
5834
|
var spaces = getSpaces(props);
|
|
5795
5835
|
return "\n margin: ".concat(!hideTitle ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0 0;\n ");
|
|
5796
5836
|
});
|
|
5797
|
-
var templateObject_1$
|
|
5837
|
+
var templateObject_1$U;
|
|
5798
5838
|
|
|
5799
5839
|
var CalloutBody = function (_a) {
|
|
5800
5840
|
var children = _a.children, hideTitle = _a.hideTitle;
|
|
5801
5841
|
return (jsxRuntime.jsx(StyledCalloutBody, { hideTitle: hideTitle, children: children }));
|
|
5802
5842
|
};
|
|
5803
5843
|
|
|
5804
|
-
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) {
|
|
5805
5845
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a, _b = props.hideBody, hideBody = _b === void 0 ? false : _b;
|
|
5806
5846
|
var spaces = getSpaces(props);
|
|
5807
5847
|
return "\n margin: ".concat(hideTitle && hideBody ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0 0;\n ");
|
|
5808
5848
|
});
|
|
5809
|
-
var templateObject_1$
|
|
5849
|
+
var templateObject_1$T;
|
|
5810
5850
|
|
|
5811
5851
|
var CalloutExtraContent = function (_a) {
|
|
5812
5852
|
var children = _a.children, hideTitle = _a.hideTitle, hideBody = _a.hideBody;
|
|
@@ -5875,25 +5915,25 @@ var dark$1 = function (props) {
|
|
|
5875
5915
|
var _a, _b;
|
|
5876
5916
|
var spaces = getSpaces(props);
|
|
5877
5917
|
var semanticColors = getSemanticColors(props);
|
|
5878
|
-
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);
|
|
5879
5919
|
};
|
|
5880
5920
|
var light$1 = function (props) {
|
|
5881
5921
|
var _a, _b;
|
|
5882
5922
|
var spaces = getSpaces(props);
|
|
5883
5923
|
var semanticColors = getSemanticColors(props);
|
|
5884
|
-
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);
|
|
5885
5925
|
};
|
|
5886
5926
|
var wide = function () {
|
|
5887
|
-
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 "])));
|
|
5888
5928
|
};
|
|
5889
5929
|
var tableStyles = function (props) {
|
|
5890
5930
|
var spaces = getSpaces(props);
|
|
5891
|
-
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);
|
|
5892
5932
|
};
|
|
5893
|
-
var doNotForwardProps$
|
|
5933
|
+
var doNotForwardProps$w = ["hasInvertedStyle"];
|
|
5894
5934
|
var Subtitle$1 = styled__default.default("div", {
|
|
5895
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5896
|
-
})(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) {
|
|
5897
5937
|
var _a, _b;
|
|
5898
5938
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5899
5939
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5902,7 +5942,7 @@ var Subtitle$1 = styled__default.default("div", {
|
|
|
5902
5942
|
var tooltipCss = function (props) {
|
|
5903
5943
|
var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5904
5944
|
var shadows = getShadows(props);
|
|
5905
|
-
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
|
|
5906
5946
|
? dark$1(props)
|
|
5907
5947
|
: light$1(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
|
|
5908
5948
|
};
|
|
@@ -5910,7 +5950,7 @@ var arrowCss = function (props) {
|
|
|
5910
5950
|
var _a, _b;
|
|
5911
5951
|
var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
5912
5952
|
var semanticColors = getSemanticColors(props);
|
|
5913
|
-
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"
|
|
5914
5954
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
|
|
5915
5955
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
|
|
5916
5956
|
};
|
|
@@ -5918,8 +5958,8 @@ var arrowCss = function (props) {
|
|
|
5918
5958
|
* (masoudmanson): !important is needed to override arrow's
|
|
5919
5959
|
* default placement which is calculated by javascript
|
|
5920
5960
|
*/
|
|
5921
|
-
var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$
|
|
5922
|
-
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;
|
|
5923
5963
|
|
|
5924
5964
|
/**
|
|
5925
5965
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -5996,7 +6036,7 @@ function mergeClass$1(_a) {
|
|
|
5996
6036
|
return propClassName ? "".concat(propClassName, " ").concat(className) : className;
|
|
5997
6037
|
}
|
|
5998
6038
|
|
|
5999
|
-
var doNotForwardProps$
|
|
6039
|
+
var doNotForwardProps$v = [
|
|
6000
6040
|
"icon",
|
|
6001
6041
|
"iconVerticalAlign",
|
|
6002
6042
|
"horizontalAlign",
|
|
@@ -6024,8 +6064,8 @@ var verticalAlignToFlexMap = {
|
|
|
6024
6064
|
top: "flex-start",
|
|
6025
6065
|
};
|
|
6026
6066
|
var StyledTableData = styled__default.default("td", {
|
|
6027
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6028
|
-
})(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) {
|
|
6029
6069
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6030
6070
|
var spaces = getSpaces(props);
|
|
6031
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 ");
|
|
@@ -6036,30 +6076,30 @@ var ShouldWrap = function (lineCount) {
|
|
|
6036
6076
|
var ShouldTruncate = function () {
|
|
6037
6077
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
|
|
6038
6078
|
};
|
|
6039
|
-
var StyledCellContent = styled__default.default("div")(templateObject_2$
|
|
6040
|
-
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"])));
|
|
6041
6081
|
var StyledCellIconWrapper = styled__default.default("div", {
|
|
6042
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6043
|
-
})(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) {
|
|
6044
6084
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
6045
6085
|
var spaces = getSpaces(props);
|
|
6046
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 ");
|
|
6047
6087
|
});
|
|
6048
|
-
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) {
|
|
6049
6089
|
var horizontalAlign = props.horizontalAlign;
|
|
6050
6090
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
6051
6091
|
});
|
|
6052
6092
|
var PrimaryText = styled__default.default("div", {
|
|
6053
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6054
|
-
})(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) {
|
|
6055
6095
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a;
|
|
6056
6096
|
return "\n display: block;\n ".concat(props.shouldTextWrap
|
|
6057
6097
|
? ShouldWrap(primaryTextWrapLineCount)
|
|
6058
6098
|
: ShouldTruncate(), "\n ");
|
|
6059
6099
|
});
|
|
6060
6100
|
var SecondaryText = styled__default.default("span", {
|
|
6061
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6062
|
-
})(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) {
|
|
6063
6103
|
var _a;
|
|
6064
6104
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6065
6105
|
var spaces = getSpaces(props);
|
|
@@ -6069,8 +6109,8 @@ var SecondaryText = styled__default.default("span", {
|
|
|
6069
6109
|
: ShouldTruncate(), "\n ");
|
|
6070
6110
|
});
|
|
6071
6111
|
var TertiaryText = styled__default.default("span", {
|
|
6072
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6073
|
-
})(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) {
|
|
6074
6114
|
var _a;
|
|
6075
6115
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6076
6116
|
var spaces = getSpaces(props);
|
|
@@ -6079,15 +6119,15 @@ var TertiaryText = styled__default.default("span", {
|
|
|
6079
6119
|
? ShouldWrap(tertiaryTextWrapLineCount)
|
|
6080
6120
|
: ShouldTruncate(), "\n ");
|
|
6081
6121
|
});
|
|
6082
|
-
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) {
|
|
6083
6123
|
var spaces = getSpaces(props);
|
|
6084
6124
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6085
6125
|
});
|
|
6086
|
-
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) {
|
|
6087
6127
|
var spaces = getSpaces(props);
|
|
6088
6128
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6089
6129
|
});
|
|
6090
|
-
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;
|
|
6091
6131
|
|
|
6092
6132
|
var CellBasicContent = function (props) {
|
|
6093
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;
|
|
@@ -6101,15 +6141,15 @@ var CellBasic = React.forwardRef(function (props, ref) {
|
|
|
6101
6141
|
return (jsxRuntime.jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) })));
|
|
6102
6142
|
});
|
|
6103
6143
|
|
|
6104
|
-
var doNotForwardProps$
|
|
6144
|
+
var doNotForwardProps$u = ["horizontalAlign", "verticalAlign"];
|
|
6105
6145
|
var StyledCellComponentData = styled__default.default("td", {
|
|
6106
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6107
|
-
})(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) {
|
|
6108
6148
|
var spaces = getSpaces(props);
|
|
6109
6149
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6110
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 ");
|
|
6111
6151
|
});
|
|
6112
|
-
var templateObject_1$
|
|
6152
|
+
var templateObject_1$Q;
|
|
6113
6153
|
|
|
6114
6154
|
var CellComponent = React.forwardRef(function (props, _) {
|
|
6115
6155
|
var children = props.children;
|
|
@@ -6121,7 +6161,7 @@ var contentPositionMapping = {
|
|
|
6121
6161
|
left: "flex-start",
|
|
6122
6162
|
right: "flex-end",
|
|
6123
6163
|
};
|
|
6124
|
-
var doNotForwardProps$
|
|
6164
|
+
var doNotForwardProps$t = [
|
|
6125
6165
|
"active",
|
|
6126
6166
|
"horizontalAlign",
|
|
6127
6167
|
"shouldShowTooltipOnHover",
|
|
@@ -6131,8 +6171,8 @@ var doNotForwardProps$m = [
|
|
|
6131
6171
|
"hover",
|
|
6132
6172
|
];
|
|
6133
6173
|
var StyledSortingIcon = styled__default.default(Icon, {
|
|
6134
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6135
|
-
})(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) {
|
|
6136
6176
|
var _a;
|
|
6137
6177
|
var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
|
|
6138
6178
|
var spaces = getSpaces(props);
|
|
@@ -6140,8 +6180,8 @@ var StyledSortingIcon = styled__default.default(Icon, {
|
|
|
6140
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 ");
|
|
6141
6181
|
});
|
|
6142
6182
|
var StyledTableHeader$1 = styled__default.default("th", {
|
|
6143
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6144
|
-
})(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) {
|
|
6145
6185
|
var _a, _b, _c, _d, _e, _f;
|
|
6146
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;
|
|
6147
6187
|
var spaces = getSpaces(props);
|
|
@@ -6155,12 +6195,12 @@ var StyledTableHeader$1 = styled__default.default("th", {
|
|
|
6155
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 ");
|
|
6156
6196
|
});
|
|
6157
6197
|
var StyledCellHeaderContainer = styled__default.default("div", {
|
|
6158
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6159
|
-
})(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) {
|
|
6160
6200
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
6161
6201
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
6162
6202
|
});
|
|
6163
|
-
var templateObject_1$
|
|
6203
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$o;
|
|
6164
6204
|
|
|
6165
6205
|
var CellHeaderContent = function (props) {
|
|
6166
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;
|
|
@@ -6180,20 +6220,20 @@ var CellHeader = React.forwardRef(function (props, ref) {
|
|
|
6180
6220
|
|
|
6181
6221
|
var small = function (props) {
|
|
6182
6222
|
var spaces = getSpaces(props);
|
|
6183
|
-
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));
|
|
6184
6224
|
};
|
|
6185
6225
|
var medium = function (props) {
|
|
6186
6226
|
var spaces = getSpaces(props);
|
|
6187
6227
|
var colors = getColors(props);
|
|
6188
|
-
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);
|
|
6189
6229
|
};
|
|
6190
6230
|
var rounded$2 = function (props) {
|
|
6191
6231
|
var corners = getCorners(props);
|
|
6192
|
-
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);
|
|
6193
6233
|
};
|
|
6194
6234
|
var square$2 = function (props) {
|
|
6195
6235
|
var corners = getCorners(props);
|
|
6196
|
-
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);
|
|
6197
6237
|
};
|
|
6198
6238
|
var success = function (props) {
|
|
6199
6239
|
return createStatusCss(props, "success");
|
|
@@ -6246,7 +6286,7 @@ function createStatusCss(props, status) {
|
|
|
6246
6286
|
},
|
|
6247
6287
|
};
|
|
6248
6288
|
var statusColors = statusToColors[status];
|
|
6249
|
-
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);
|
|
6250
6290
|
}
|
|
6251
6291
|
var statusToCss = {
|
|
6252
6292
|
beta: beta,
|
|
@@ -6256,14 +6296,14 @@ var statusToCss = {
|
|
|
6256
6296
|
success: success,
|
|
6257
6297
|
warning: warning,
|
|
6258
6298
|
};
|
|
6259
|
-
var doNotForwardProps$
|
|
6299
|
+
var doNotForwardProps$s = ["isRounded"];
|
|
6260
6300
|
var StyledChip = styled__default.default(material.Chip, {
|
|
6261
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6262
|
-
})(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) {
|
|
6263
6303
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6264
|
-
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));
|
|
6265
6305
|
});
|
|
6266
|
-
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;
|
|
6267
6307
|
|
|
6268
6308
|
/**
|
|
6269
6309
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6281,7 +6321,7 @@ var Chip = function (props) {
|
|
|
6281
6321
|
return jsxRuntime.jsx(StyledChip, __assign({}, props));
|
|
6282
6322
|
};
|
|
6283
6323
|
|
|
6284
|
-
var doNotForwardProps$
|
|
6324
|
+
var doNotForwardProps$r = [
|
|
6285
6325
|
"anchorEl",
|
|
6286
6326
|
"count",
|
|
6287
6327
|
"keepSearchOnSelect",
|
|
@@ -6295,19 +6335,19 @@ var doNotForwardProps$k = [
|
|
|
6295
6335
|
"isMultiColumn",
|
|
6296
6336
|
];
|
|
6297
6337
|
var StyledHeaderTitle = styled__default.default("div", {
|
|
6298
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6299
|
-
})(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) {
|
|
6300
6340
|
var _a;
|
|
6301
6341
|
var spaces = getSpaces(props);
|
|
6302
6342
|
var semanticColors = getSemanticColors(props);
|
|
6303
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 ");
|
|
6304
6344
|
});
|
|
6305
|
-
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);
|
|
6306
6346
|
var StyledPopper = styled__default.default(material.Popper, {
|
|
6307
6347
|
shouldForwardProp: function (prop) {
|
|
6308
|
-
return !doNotForwardProps$
|
|
6348
|
+
return !doNotForwardProps$r.includes(prop) || prop === "anchorEl";
|
|
6309
6349
|
},
|
|
6310
|
-
})(templateObject_3$
|
|
6350
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6311
6351
|
var _a;
|
|
6312
6352
|
var borders = getBorders(props);
|
|
6313
6353
|
var corners = getCorners(props);
|
|
@@ -6316,8 +6356,8 @@ var StyledPopper = styled__default.default(material.Popper, {
|
|
|
6316
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 ");
|
|
6317
6357
|
});
|
|
6318
6358
|
var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
6319
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6320
|
-
})(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) {
|
|
6321
6361
|
var _a;
|
|
6322
6362
|
var spaces = getSpaces(props);
|
|
6323
6363
|
var borders = getBorders(props);
|
|
@@ -6325,12 +6365,12 @@ var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
|
6325
6365
|
var semanticColors = getSemanticColors(props);
|
|
6326
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 ");
|
|
6327
6367
|
});
|
|
6328
|
-
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) {
|
|
6329
6369
|
var search = props.search;
|
|
6330
6370
|
var spaces = getSpaces(props);
|
|
6331
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 ");
|
|
6332
6372
|
});
|
|
6333
|
-
var templateObject_1$
|
|
6373
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$m, templateObject_4$j, templateObject_5$f;
|
|
6334
6374
|
|
|
6335
6375
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
6336
6376
|
// for the dropdownMenu's popper component
|
|
@@ -6368,7 +6408,7 @@ var DropdownMenu = function (props) {
|
|
|
6368
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] }) })) }) })));
|
|
6369
6409
|
};
|
|
6370
6410
|
|
|
6371
|
-
var doNotForwardProps$
|
|
6411
|
+
var doNotForwardProps$q = [
|
|
6372
6412
|
"intent",
|
|
6373
6413
|
"state",
|
|
6374
6414
|
"sdsType",
|
|
@@ -6396,27 +6436,27 @@ var inputDropdownStyles = function (props) {
|
|
|
6396
6436
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
6397
6437
|
*/
|
|
6398
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");
|
|
6399
|
-
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);
|
|
6400
6440
|
};
|
|
6401
6441
|
var minimal$1 = function (props) {
|
|
6402
6442
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6403
6443
|
var spaces = getSpaces(props);
|
|
6404
6444
|
var semanticColors = getSemanticColors(props);
|
|
6405
|
-
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);
|
|
6406
6446
|
};
|
|
6407
6447
|
var square$1 = function (props) {
|
|
6408
6448
|
var corners = getCorners(props);
|
|
6409
|
-
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);
|
|
6410
6450
|
};
|
|
6411
6451
|
var rounded$1 = function (props) {
|
|
6412
6452
|
var corners = getCorners(props);
|
|
6413
|
-
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);
|
|
6414
6454
|
};
|
|
6415
6455
|
var userInput = function (props) {
|
|
6416
6456
|
var _a, _b, _c, _d;
|
|
6417
6457
|
var sdsStyle = props.sdsStyle;
|
|
6418
6458
|
var semanticColors = getSemanticColors(props);
|
|
6419
|
-
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"
|
|
6420
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 ")
|
|
6421
6461
|
: "");
|
|
6422
6462
|
};
|
|
@@ -6426,7 +6466,7 @@ var isOpen = function (props) {
|
|
|
6426
6466
|
var borders = getBorders(props);
|
|
6427
6467
|
var semanticColors = getSemanticColors(props);
|
|
6428
6468
|
var inputColor = intentToColor$2[intent];
|
|
6429
|
-
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"
|
|
6430
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 ")
|
|
6431
6471
|
: "", inputColor === "accent"
|
|
6432
6472
|
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentOpen
|
|
@@ -6434,17 +6474,17 @@ var isOpen = function (props) {
|
|
|
6434
6474
|
? borders === null || borders === void 0 ? void 0 : borders.none
|
|
6435
6475
|
: (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
|
|
6436
6476
|
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillOpen
|
|
6437
|
-
: "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);
|
|
6438
6478
|
};
|
|
6439
6479
|
var applyIntentColor$1 = function (props, intent) {
|
|
6440
6480
|
var _a, _b, _c;
|
|
6441
6481
|
var borders = getBorders(props);
|
|
6442
|
-
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);
|
|
6443
6483
|
};
|
|
6444
6484
|
var isDisabled = function (props) {
|
|
6445
6485
|
var _a, _b, _c, _d;
|
|
6446
6486
|
var semanticColors = getSemanticColors(props);
|
|
6447
|
-
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);
|
|
6448
6488
|
};
|
|
6449
6489
|
/**
|
|
6450
6490
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6455,10 +6495,10 @@ var isDisabled = function (props) {
|
|
|
6455
6495
|
* to the InputDropdownProps interface.
|
|
6456
6496
|
*/
|
|
6457
6497
|
var StyledInputDropdown = styled__default.default(Button, {
|
|
6458
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6459
|
-
})(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) {
|
|
6460
6500
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
|
|
6461
|
-
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" &&
|
|
6462
6502
|
sdsStyle !== "minimal" &&
|
|
6463
6503
|
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6464
6504
|
sdsStyle !== "minimal" &&
|
|
@@ -6467,16 +6507,16 @@ var StyledInputDropdown = styled__default.default(Button, {
|
|
|
6467
6507
|
applyIntentColor$1(props, "positive"), state === "open" && isOpen(props), disabled && isDisabled(props));
|
|
6468
6508
|
});
|
|
6469
6509
|
var StyledDetail = styled__default.default("span", {
|
|
6470
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6471
|
-
})(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) {
|
|
6472
6512
|
var _a;
|
|
6473
6513
|
var spaces = getSpaces(props);
|
|
6474
6514
|
var semanticColors = getSemanticColors(props);
|
|
6475
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 ");
|
|
6476
6516
|
});
|
|
6477
6517
|
var StyledLabel$2 = styled__default.default("span", {
|
|
6478
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6479
|
-
})(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) {
|
|
6480
6520
|
var _a, _b;
|
|
6481
6521
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
6482
6522
|
var fontWeights = getFontWeights(props);
|
|
@@ -6487,8 +6527,8 @@ var StyledLabel$2 = styled__default.default("span", {
|
|
|
6487
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 ");
|
|
6488
6528
|
});
|
|
6489
6529
|
var StyledCounter = styled__default.default("span", {
|
|
6490
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6491
|
-
})(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) {
|
|
6492
6532
|
var _a, _b;
|
|
6493
6533
|
var corners = getCorners(props);
|
|
6494
6534
|
var spaces = getSpaces(props);
|
|
@@ -6496,8 +6536,8 @@ var StyledCounter = styled__default.default("span", {
|
|
|
6496
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 ");
|
|
6497
6537
|
});
|
|
6498
6538
|
var MinimalDetails = styled__default.default("div", {
|
|
6499
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6500
|
-
})(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) {
|
|
6501
6541
|
var _a;
|
|
6502
6542
|
var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
|
|
6503
6543
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6505,23 +6545,23 @@ var MinimalDetails = styled__default.default("div", {
|
|
|
6505
6545
|
"overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;", "\n ");
|
|
6506
6546
|
});
|
|
6507
6547
|
var LabelWrapper = styled__default.default("span", {
|
|
6508
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6509
|
-
})(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) {
|
|
6510
6550
|
var isMinimal = _a.isMinimal;
|
|
6511
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 ");
|
|
6512
6552
|
});
|
|
6513
6553
|
var IconWrapper = styled__default.default("span", {
|
|
6514
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6515
|
-
})(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"])));
|
|
6516
6556
|
function labelStyle(props) {
|
|
6517
6557
|
var _a, _b;
|
|
6518
6558
|
var semanticColors = getSemanticColors(props);
|
|
6519
6559
|
var labelColor = props.sdsType === "value"
|
|
6520
6560
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
|
|
6521
6561
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6522
|
-
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);
|
|
6523
6563
|
}
|
|
6524
|
-
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;
|
|
6525
6565
|
|
|
6526
6566
|
/**
|
|
6527
6567
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -6588,33 +6628,33 @@ var tagSizeS = function (props) {
|
|
|
6588
6628
|
var spaces = getSpaces(props);
|
|
6589
6629
|
var iconSizes = getIconSizes(props);
|
|
6590
6630
|
var semanticColors = getSemanticColors(props);
|
|
6591
|
-
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);
|
|
6592
6632
|
};
|
|
6593
6633
|
var tagSizeL = function (props) {
|
|
6594
6634
|
var _a;
|
|
6595
6635
|
var spaces = getSpaces(props);
|
|
6596
6636
|
var iconSizes = getIconSizes(props);
|
|
6597
6637
|
var semanticColors = getSemanticColors(props);
|
|
6598
|
-
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);
|
|
6599
6639
|
};
|
|
6600
6640
|
var rounded = function (props) {
|
|
6601
6641
|
var corners = getCorners(props);
|
|
6602
6642
|
var spaces = getSpaces(props);
|
|
6603
6643
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6604
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;
|
|
6605
|
-
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);
|
|
6606
6646
|
};
|
|
6607
6647
|
var square = function (props) {
|
|
6608
6648
|
var corners = getCorners(props);
|
|
6609
6649
|
var spaces = getSpaces(props);
|
|
6610
6650
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6611
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;
|
|
6612
|
-
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);
|
|
6613
6653
|
};
|
|
6614
6654
|
var withHover = function (props) {
|
|
6615
6655
|
var _a;
|
|
6616
6656
|
var semanticColors = getSemanticColors(props);
|
|
6617
|
-
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);
|
|
6618
6658
|
};
|
|
6619
6659
|
var primary = function (props) {
|
|
6620
6660
|
return createTypeCss(props, "primary");
|
|
@@ -6683,13 +6723,13 @@ function createTypeCss(props, type) {
|
|
|
6683
6723
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
6684
6724
|
};
|
|
6685
6725
|
var typeColors = typeToColors[type];
|
|
6686
|
-
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);
|
|
6687
6727
|
}
|
|
6688
6728
|
var typeToCss = {
|
|
6689
6729
|
primary: primary,
|
|
6690
6730
|
secondary: secondary,
|
|
6691
6731
|
};
|
|
6692
|
-
var doNotForwardProps$
|
|
6732
|
+
var doNotForwardProps$p = [
|
|
6693
6733
|
"sdsType",
|
|
6694
6734
|
"sdsStyle",
|
|
6695
6735
|
"sdsSize",
|
|
@@ -6697,14 +6737,14 @@ var doNotForwardProps$i = [
|
|
|
6697
6737
|
"hover",
|
|
6698
6738
|
];
|
|
6699
6739
|
var StyledTag$2 = styled__default.default(material.Chip, {
|
|
6700
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6701
|
-
})(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) {
|
|
6702
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;
|
|
6703
6743
|
var isRounded = sdsStyle === "rounded";
|
|
6704
6744
|
var type = sdsType || "primary";
|
|
6705
|
-
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;");
|
|
6706
6746
|
});
|
|
6707
|
-
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;
|
|
6708
6748
|
|
|
6709
6749
|
/**
|
|
6710
6750
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6718,14 +6758,14 @@ var Tag = function (props) {
|
|
|
6718
6758
|
return jsxRuntime.jsx(StyledTag$2, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
6719
6759
|
};
|
|
6720
6760
|
|
|
6721
|
-
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) {
|
|
6722
6762
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
6723
6763
|
var spaces = getSpaces(props);
|
|
6724
6764
|
var iconSizes = getIconSizes(props);
|
|
6725
6765
|
var semanticColors = getSemanticColors(props);
|
|
6726
|
-
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);
|
|
6727
6767
|
});
|
|
6728
|
-
var templateObject_1$
|
|
6768
|
+
var templateObject_1$K, templateObject_2$t;
|
|
6729
6769
|
|
|
6730
6770
|
/**
|
|
6731
6771
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6748,12 +6788,12 @@ var Chips = function (_a) {
|
|
|
6748
6788
|
}) }));
|
|
6749
6789
|
};
|
|
6750
6790
|
|
|
6751
|
-
var Wrapper$1 = styled__default.default("div")(templateObject_1$
|
|
6752
|
-
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) {
|
|
6753
6793
|
var spaces = getSpaces(props);
|
|
6754
6794
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
6755
6795
|
});
|
|
6756
|
-
var templateObject_1$
|
|
6796
|
+
var templateObject_1$J, templateObject_2$s;
|
|
6757
6797
|
|
|
6758
6798
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6759
6799
|
var ComplexFilter = function (_a) {
|
|
@@ -6842,13 +6882,326 @@ var ComplexFilter = function (_a) {
|
|
|
6842
6882
|
}
|
|
6843
6883
|
};
|
|
6844
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
|
+
|
|
6845
7198
|
var DialogContext = React.createContext({ sdsSize: "m" });
|
|
6846
7199
|
|
|
6847
7200
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
6848
|
-
var doNotForwardProps$
|
|
7201
|
+
var doNotForwardProps$k = ["sdsSize"];
|
|
6849
7202
|
var StyledPaper = styled__default.default(material.Paper, {
|
|
6850
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6851
|
-
})(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) {
|
|
6852
7205
|
var _a;
|
|
6853
7206
|
var spaces = getSpaces(props);
|
|
6854
7207
|
var corners = getCorners(props);
|
|
@@ -6879,7 +7232,7 @@ function paperDimensions(props) {
|
|
|
6879
7232
|
var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
|
|
6880
7233
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
6881
7234
|
}
|
|
6882
|
-
var templateObject_1$
|
|
7235
|
+
var templateObject_1$E;
|
|
6883
7236
|
|
|
6884
7237
|
/**
|
|
6885
7238
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -6908,15 +7261,15 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
|
6908
7261
|
});
|
|
6909
7262
|
|
|
6910
7263
|
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
6911
|
-
var doNotForwardProps$
|
|
7264
|
+
var doNotForwardProps$j = ["buttonPosition"];
|
|
6912
7265
|
var StyledDialogActions = styled__default.default(material.DialogActions, {
|
|
6913
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6914
|
-
})(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) {
|
|
6915
7268
|
var spaces = getSpaces(props);
|
|
6916
7269
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
6917
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 ");
|
|
6918
7271
|
});
|
|
6919
|
-
var templateObject_1$
|
|
7272
|
+
var templateObject_1$D;
|
|
6920
7273
|
|
|
6921
7274
|
/**
|
|
6922
7275
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6925,8 +7278,8 @@ var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
|
|
6925
7278
|
return jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref }, props));
|
|
6926
7279
|
});
|
|
6927
7280
|
|
|
6928
|
-
var StyledDialogContent = styled__default.default(material.DialogContent)(templateObject_1$
|
|
6929
|
-
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;
|
|
6930
7283
|
|
|
6931
7284
|
var index = React.forwardRef(
|
|
6932
7285
|
/**
|
|
@@ -6936,11 +7289,11 @@ function DialogContent(props, ref) {
|
|
|
6936
7289
|
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
6937
7290
|
});
|
|
6938
7291
|
|
|
6939
|
-
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) {
|
|
6940
7293
|
var spaces = getSpaces(props);
|
|
6941
7294
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
6942
7295
|
});
|
|
6943
|
-
var templateObject_1$
|
|
7296
|
+
var templateObject_1$B;
|
|
6944
7297
|
|
|
6945
7298
|
var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
6946
7299
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
@@ -6956,27 +7309,27 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
6956
7309
|
} }));
|
|
6957
7310
|
});
|
|
6958
7311
|
|
|
6959
|
-
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) {
|
|
6960
7313
|
var spaces = getSpaces(props);
|
|
6961
7314
|
return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
|
|
6962
7315
|
});
|
|
6963
|
-
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) {
|
|
6964
7317
|
var _a;
|
|
6965
7318
|
var semanticColors = getSemanticColors(props);
|
|
6966
7319
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
|
|
6967
7320
|
});
|
|
6968
|
-
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) {
|
|
6969
7322
|
var _a;
|
|
6970
7323
|
var semanticColors = getSemanticColors(props);
|
|
6971
7324
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
6972
7325
|
});
|
|
6973
|
-
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) {
|
|
6974
7327
|
var _a;
|
|
6975
7328
|
var semanticColors = getSemanticColors(props);
|
|
6976
7329
|
var spaces = getSpaces(props);
|
|
6977
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 ");
|
|
6978
7331
|
});
|
|
6979
|
-
var templateObject_1$
|
|
7332
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$g, templateObject_4$d;
|
|
6980
7333
|
|
|
6981
7334
|
/**
|
|
6982
7335
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6986,20 +7339,20 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
|
6986
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 })] })) })));
|
|
6987
7340
|
});
|
|
6988
7341
|
|
|
6989
|
-
var doNotForwardProps$
|
|
7342
|
+
var doNotForwardProps$i = ["buttonPosition"];
|
|
6990
7343
|
var StyledButtonsWrapper = styled__default.default("div", {
|
|
6991
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6992
|
-
})(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) {
|
|
6993
7346
|
var buttonPosition = props.buttonPosition;
|
|
6994
7347
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
6995
7348
|
});
|
|
6996
7349
|
var StyledButton = styled__default.default(Button, {
|
|
6997
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6998
|
-
})(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) {
|
|
6999
7352
|
var spaces = getSpaces(props);
|
|
7000
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 ");
|
|
7001
7354
|
});
|
|
7002
|
-
var templateObject_1$
|
|
7355
|
+
var templateObject_1$z, templateObject_2$n;
|
|
7003
7356
|
|
|
7004
7357
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
7005
7358
|
var Dropdown = function (props) {
|
|
@@ -7135,11 +7488,11 @@ var intentToColor$1 = {
|
|
|
7135
7488
|
notice: "notice",
|
|
7136
7489
|
positive: "positive",
|
|
7137
7490
|
};
|
|
7138
|
-
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) {
|
|
7139
7492
|
var iconSizes = getIconSizes(props);
|
|
7140
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 ");
|
|
7141
7494
|
});
|
|
7142
|
-
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) {
|
|
7143
7496
|
var _a;
|
|
7144
7497
|
var _b = props.intent, intent = _b === void 0 ? "default" : _b;
|
|
7145
7498
|
var iconSizes = getIconSizes(props);
|
|
@@ -7147,22 +7500,22 @@ var StyledCheckboxDefaultIcon = styled__default.default("span")(templateObject_2
|
|
|
7147
7500
|
var borderColor = intentToColor$1[intent];
|
|
7148
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 ");
|
|
7149
7502
|
});
|
|
7150
|
-
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) {
|
|
7151
7504
|
var _a, _b;
|
|
7152
7505
|
var iconSizes = getIconSizes(props);
|
|
7153
7506
|
var semanticColors = getSemanticColors(props);
|
|
7154
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 ");
|
|
7155
7508
|
});
|
|
7156
|
-
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) {
|
|
7157
7510
|
var spaces = getSpaces(props);
|
|
7158
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 ");
|
|
7159
7512
|
});
|
|
7160
|
-
var StyledLabelContainer$1 = styled__default.default("span")(templateObject_5$
|
|
7161
|
-
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) {
|
|
7162
7515
|
var spaces = getSpaces(props);
|
|
7163
7516
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7164
7517
|
});
|
|
7165
|
-
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) {
|
|
7166
7519
|
var _a;
|
|
7167
7520
|
var semanticColors = getSemanticColors(props);
|
|
7168
7521
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7173,7 +7526,7 @@ var disabledStyles$1 = function (props) {
|
|
|
7173
7526
|
var borders = getBorders(props);
|
|
7174
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 ");
|
|
7175
7528
|
};
|
|
7176
|
-
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) {
|
|
7177
7530
|
var _a, _b, _c, _d;
|
|
7178
7531
|
var disabled = props.disabled;
|
|
7179
7532
|
var spaces = getSpaces(props);
|
|
@@ -7181,7 +7534,7 @@ var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel
|
|
|
7181
7534
|
var borders = getBorders(props);
|
|
7182
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 ");
|
|
7183
7536
|
});
|
|
7184
|
-
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;
|
|
7185
7538
|
|
|
7186
7539
|
/**
|
|
7187
7540
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -7216,12 +7569,12 @@ var intentToColor = {
|
|
|
7216
7569
|
notice: "notice",
|
|
7217
7570
|
positive: "positive",
|
|
7218
7571
|
};
|
|
7219
|
-
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) {
|
|
7220
7573
|
var _a;
|
|
7221
7574
|
var semanticColors = getSemanticColors(props);
|
|
7222
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 ");
|
|
7223
7576
|
});
|
|
7224
|
-
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) {
|
|
7225
7578
|
var _a;
|
|
7226
7579
|
var _b = props.intent, intent = _b === void 0 ? "default" : _b;
|
|
7227
7580
|
var iconSizes = getIconSizes(props);
|
|
@@ -7229,22 +7582,22 @@ var StyledRadioDefaultIcon = styled__default.default("span")(templateObject_2$i
|
|
|
7229
7582
|
var borderColor = intentToColor[intent];
|
|
7230
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 ");
|
|
7231
7584
|
});
|
|
7232
|
-
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) {
|
|
7233
7586
|
var _a;
|
|
7234
7587
|
var iconSizes = getIconSizes(props);
|
|
7235
7588
|
var semanticColors = getSemanticColors(props);
|
|
7236
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 ");
|
|
7237
7590
|
});
|
|
7238
|
-
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) {
|
|
7239
7592
|
var spaces = getSpaces(props);
|
|
7240
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 ");
|
|
7241
7594
|
});
|
|
7242
|
-
var StyledLabelContainer = styled__default.default("span")(templateObject_5$
|
|
7243
|
-
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) {
|
|
7244
7597
|
var spaces = getSpaces(props);
|
|
7245
7598
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7246
7599
|
});
|
|
7247
|
-
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) {
|
|
7248
7601
|
var _a;
|
|
7249
7602
|
var semanticColors = getSemanticColors(props);
|
|
7250
7603
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7252,16 +7605,16 @@ var StyledRadioCaption = styled__default.default("span")(templateObject_7$2 || (
|
|
|
7252
7605
|
var disabledStyles = function (props) {
|
|
7253
7606
|
var _a, _b, _c, _d, _e;
|
|
7254
7607
|
var semanticColors = getSemanticColors(props);
|
|
7255
|
-
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 ");
|
|
7256
7609
|
};
|
|
7257
|
-
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) {
|
|
7258
7611
|
var _a, _b, _c, _d;
|
|
7259
7612
|
var disabled = props.disabled;
|
|
7260
7613
|
var spaces = getSpaces(props);
|
|
7261
7614
|
var semanticColors = getSemanticColors(props);
|
|
7262
|
-
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 ");
|
|
7263
7616
|
});
|
|
7264
|
-
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;
|
|
7265
7618
|
|
|
7266
7619
|
/**
|
|
7267
7620
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -7307,11 +7660,11 @@ var disabledSlider = function (props) {
|
|
|
7307
7660
|
var semanticColors = getSemanticColors(props);
|
|
7308
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 ");
|
|
7309
7662
|
};
|
|
7310
|
-
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) {
|
|
7311
7664
|
var disabled = props.disabled;
|
|
7312
7665
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
7313
7666
|
});
|
|
7314
|
-
var templateObject_1$
|
|
7667
|
+
var templateObject_1$w;
|
|
7315
7668
|
|
|
7316
7669
|
/**
|
|
7317
7670
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -7326,19 +7679,19 @@ var applyIntentColor = function (props, intent) {
|
|
|
7326
7679
|
var _a, _b, _c, _d;
|
|
7327
7680
|
var borders = getBorders(props);
|
|
7328
7681
|
var semanticColors = getSemanticColors(props);
|
|
7329
|
-
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);
|
|
7330
7683
|
};
|
|
7331
7684
|
var disabledStyled$1 = function (props) {
|
|
7332
7685
|
var _a, _b, _c;
|
|
7333
7686
|
var borders = getBorders(props);
|
|
7334
7687
|
var semanticColors = getSemanticColors(props);
|
|
7335
|
-
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);
|
|
7336
7689
|
};
|
|
7337
7690
|
var textArea = function (props) {
|
|
7338
7691
|
var spaces = getSpaces(props);
|
|
7339
|
-
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);
|
|
7340
7693
|
};
|
|
7341
|
-
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) {
|
|
7342
7695
|
var spaces = getSpaces(props);
|
|
7343
7696
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7344
7697
|
});
|
|
@@ -7346,15 +7699,15 @@ var StyledInputBase = styled__default.default(material.TextField, {
|
|
|
7346
7699
|
shouldForwardProp: function (prop) {
|
|
7347
7700
|
return !sdsPropNames$1.includes(prop.toString());
|
|
7348
7701
|
},
|
|
7349
|
-
})(templateObject_6$
|
|
7702
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7350
7703
|
var _a, _b, _c;
|
|
7351
7704
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
7352
7705
|
var spaces = getSpaces(props);
|
|
7353
7706
|
var borders = getBorders(props);
|
|
7354
7707
|
var corners = getCorners(props);
|
|
7355
|
-
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));
|
|
7356
7709
|
});
|
|
7357
|
-
var templateObject_1$
|
|
7710
|
+
var templateObject_1$v, templateObject_2$k, templateObject_3$d, templateObject_4$a, templateObject_5$7, templateObject_6$6;
|
|
7358
7711
|
|
|
7359
7712
|
/**
|
|
7360
7713
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -7415,11 +7768,11 @@ var toggleOff = function (props) {
|
|
|
7415
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 &&
|
|
7416
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 ");
|
|
7417
7770
|
};
|
|
7418
|
-
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) {
|
|
7419
7772
|
var checked = props.checked;
|
|
7420
7773
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
7421
7774
|
});
|
|
7422
|
-
var templateObject_1$
|
|
7775
|
+
var templateObject_1$u;
|
|
7423
7776
|
|
|
7424
7777
|
/**
|
|
7425
7778
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -7437,14 +7790,14 @@ var InputToggle = function (props) {
|
|
|
7437
7790
|
return (jsxRuntime.jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
|
|
7438
7791
|
};
|
|
7439
7792
|
|
|
7440
|
-
var doNotForwardProps$
|
|
7793
|
+
var doNotForwardProps$h = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
7441
7794
|
var defaultStyle = function (props) {
|
|
7442
7795
|
var _a, _b, _c, _d;
|
|
7443
7796
|
var semanticColors = getSemanticColors(props);
|
|
7444
|
-
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);
|
|
7445
7798
|
};
|
|
7446
7799
|
var dashedStyle = function () {
|
|
7447
|
-
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 "])));
|
|
7448
7801
|
};
|
|
7449
7802
|
var smallStyle = function (props) {
|
|
7450
7803
|
return fontBodyS$1(props);
|
|
@@ -7454,13 +7807,13 @@ var extraSmallStyle = function (props) {
|
|
|
7454
7807
|
};
|
|
7455
7808
|
var StyledLink = styled__default.default(material.Link, {
|
|
7456
7809
|
shouldForwardProp: function (prop) {
|
|
7457
|
-
return !doNotForwardProps$
|
|
7810
|
+
return !doNotForwardProps$h.includes(prop.toString());
|
|
7458
7811
|
},
|
|
7459
|
-
})(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) {
|
|
7460
7813
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7461
|
-
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");
|
|
7462
7815
|
});
|
|
7463
|
-
var templateObject_1$
|
|
7816
|
+
var templateObject_1$t, templateObject_2$j, templateObject_3$c, templateObject_4$9;
|
|
7464
7817
|
|
|
7465
7818
|
/**
|
|
7466
7819
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -7475,10 +7828,10 @@ var Link = React.forwardRef(function (props, ref) {
|
|
|
7475
7828
|
});
|
|
7476
7829
|
|
|
7477
7830
|
// (thuang): Please keep this in sync with the props used in `ListExtraProps`
|
|
7478
|
-
var doNotForwardProps$
|
|
7831
|
+
var doNotForwardProps$g = ["marginBottom", "ordered"];
|
|
7479
7832
|
var StyledList = styled__default.default(material.List, {
|
|
7480
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7481
|
-
})(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) {
|
|
7482
7835
|
if (!props.ordered)
|
|
7483
7836
|
return "";
|
|
7484
7837
|
return "\n counter-reset: section;\n ";
|
|
@@ -7496,7 +7849,7 @@ function propsToMarginBottom$1(props) {
|
|
|
7496
7849
|
var marginBottom = props.marginBottom;
|
|
7497
7850
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
7498
7851
|
}
|
|
7499
|
-
var templateObject_1$
|
|
7852
|
+
var templateObject_1$s;
|
|
7500
7853
|
|
|
7501
7854
|
/**
|
|
7502
7855
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7513,10 +7866,10 @@ var fontBodyXs$1 = fontBody("xs");
|
|
|
7513
7866
|
var fontBodyXxs = fontBody("xxs");
|
|
7514
7867
|
var fontBodyXxxs = fontBody("xxxs");
|
|
7515
7868
|
// (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
|
|
7516
|
-
var doNotForwardProps$
|
|
7869
|
+
var doNotForwardProps$f = ["marginBottom", "fontSize", "ordered"];
|
|
7517
7870
|
var StyledListItem = styled__default.default(material.ListItem, {
|
|
7518
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7519
|
-
})(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) {
|
|
7520
7873
|
var ordered = props.ordered;
|
|
7521
7874
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
7522
7875
|
}, function (props) {
|
|
@@ -7547,11 +7900,11 @@ function propsToMarginBottom(props) {
|
|
|
7547
7900
|
var marginBottom = props.marginBottom;
|
|
7548
7901
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
|
|
7549
7902
|
}
|
|
7550
|
-
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) {
|
|
7551
7904
|
var fontWeights = getFontWeights(props);
|
|
7552
7905
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
7553
7906
|
});
|
|
7554
|
-
var templateObject_1$
|
|
7907
|
+
var templateObject_1$r, templateObject_2$i;
|
|
7555
7908
|
|
|
7556
7909
|
/**
|
|
7557
7910
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7561,11 +7914,11 @@ var ListItem = function (props) {
|
|
|
7561
7914
|
};
|
|
7562
7915
|
|
|
7563
7916
|
var fontHeaderM = fontHeader("m");
|
|
7564
|
-
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) {
|
|
7565
7918
|
var spaces = getSpaces(props);
|
|
7566
7919
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7567
7920
|
});
|
|
7568
|
-
var templateObject_1$
|
|
7921
|
+
var templateObject_1$q;
|
|
7569
7922
|
|
|
7570
7923
|
/**
|
|
7571
7924
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7574,7 +7927,7 @@ var ListSubheader = function (props) {
|
|
|
7574
7927
|
return jsxRuntime.jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
7575
7928
|
};
|
|
7576
7929
|
|
|
7577
|
-
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) {
|
|
7578
7931
|
var spaces = getSpaces(props);
|
|
7579
7932
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7580
7933
|
});
|
|
@@ -7582,37 +7935,37 @@ var minimal = function (props) {
|
|
|
7582
7935
|
var _a, _b;
|
|
7583
7936
|
var iconSizes = getIconSizes(props);
|
|
7584
7937
|
var semanticColors = getSemanticColors(props);
|
|
7585
|
-
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);
|
|
7586
7939
|
};
|
|
7587
7940
|
var tag = function (props) {
|
|
7588
7941
|
var _a, _b, _c;
|
|
7589
7942
|
var corners = getCorners(props);
|
|
7590
7943
|
var semanticColors = getSemanticColors(props);
|
|
7591
|
-
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);
|
|
7592
7945
|
};
|
|
7593
|
-
var doNotForwardProps$
|
|
7946
|
+
var doNotForwardProps$e = ["sdsStyle"];
|
|
7594
7947
|
var StyledLoadingIndicator = styled__default.default("div", {
|
|
7595
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7596
|
-
})(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) {
|
|
7597
7950
|
var sdsStyle = props.sdsStyle;
|
|
7598
7951
|
var spaces = getSpaces(props);
|
|
7599
|
-
var style = react.css(templateObject_4$
|
|
7600
|
-
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));
|
|
7601
7954
|
});
|
|
7602
|
-
var templateObject_1$
|
|
7955
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$b, templateObject_4$8, templateObject_5$6, templateObject_6$5;
|
|
7603
7956
|
|
|
7604
7957
|
var LoadingIndicator = function (_a) {
|
|
7605
7958
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
7606
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" })] }));
|
|
7607
7960
|
};
|
|
7608
7961
|
|
|
7609
|
-
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) {
|
|
7610
7963
|
var _a;
|
|
7611
7964
|
var spaces = getSpaces(props);
|
|
7612
7965
|
var semanticColors = getSemanticColors(props);
|
|
7613
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 ");
|
|
7614
7967
|
});
|
|
7615
|
-
var templateObject_1$
|
|
7968
|
+
var templateObject_1$o;
|
|
7616
7969
|
|
|
7617
7970
|
var ANCHOR_ORIGIN = {
|
|
7618
7971
|
horizontal: "center",
|
|
@@ -7629,19 +7982,19 @@ var Menu = function (props) {
|
|
|
7629
7982
|
return (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
7630
7983
|
};
|
|
7631
7984
|
|
|
7632
|
-
var StyledMenuItem = styled__default.default(MenuItem)(templateObject_1$
|
|
7633
|
-
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"];
|
|
7634
7987
|
// (thuang): Casting the type to `Autocomplete`
|
|
7635
7988
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
7636
7989
|
var StyledAutocomplete = styled__default.default(material.Autocomplete, {
|
|
7637
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7638
|
-
})(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) {
|
|
7639
7992
|
var search = _a.search;
|
|
7640
7993
|
return !search && "height: 0; margin: 0 !important;";
|
|
7641
7994
|
});
|
|
7642
7995
|
var InputBaseWrapper = styled__default.default("div", {
|
|
7643
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7644
|
-
})(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) {
|
|
7645
7998
|
var search = props.search;
|
|
7646
7999
|
if (!search) {
|
|
7647
8000
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -7653,12 +8006,12 @@ var InputBaseWrapper = styled__default.default("div", {
|
|
|
7653
8006
|
return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
7654
8007
|
});
|
|
7655
8008
|
var StyledMenuInputSearch = styled__default.default(InputSearch, {
|
|
7656
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7657
|
-
})(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) {
|
|
7658
8011
|
var search = _a.search;
|
|
7659
8012
|
return (search ? "auto" : "transparent");
|
|
7660
8013
|
});
|
|
7661
|
-
var templateObject_1$
|
|
8014
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$a, templateObject_4$7;
|
|
7662
8015
|
|
|
7663
8016
|
/**
|
|
7664
8017
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -7709,6 +8062,80 @@ var MenuSelect = function (props) {
|
|
|
7709
8062
|
}
|
|
7710
8063
|
};
|
|
7711
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
|
+
|
|
7712
8139
|
/**
|
|
7713
8140
|
* WARNING: Don't import this directly.
|
|
7714
8141
|
* Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
|
|
@@ -13727,6 +14154,143 @@ function useTheme() {
|
|
|
13727
14154
|
return theme[THEME_ID] || theme;
|
|
13728
14155
|
}
|
|
13729
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
|
+
|
|
13730
14294
|
var doNotForwardProps$9 = [
|
|
13731
14295
|
"hasInvertedStyle",
|
|
13732
14296
|
"isNarrow",
|
|
@@ -13754,15 +14318,21 @@ var StyledToolbar = styled__default.default(material.Toolbar, {
|
|
|
13754
14318
|
var spaces = getSpaces(props);
|
|
13755
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));
|
|
13756
14320
|
});
|
|
13757
|
-
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) {
|
|
13758
14324
|
var shadows = getShadows(props);
|
|
13759
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 ");
|
|
13760
14326
|
});
|
|
13761
|
-
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) {
|
|
13762
14330
|
var colors = getSemanticColors(props);
|
|
13763
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 ");
|
|
13764
14332
|
});
|
|
13765
|
-
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) {
|
|
13766
14336
|
var _a, _b, _c, _d;
|
|
13767
14337
|
var sdsType = props.sdsType, hasInvertedStyle = props.hasInvertedStyle;
|
|
13768
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";
|
|
@@ -13770,60 +14340,84 @@ var StyledHeaderButton = styled__default.default(Button)(templateObject_7$1 || (
|
|
|
13770
14340
|
var secondaryButtonStyles = "\n box-shadow: inset 0 0 0 1px ".concat(mode === "light" ? "white" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n color: ").concat(mode === "light" ? "white" : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPrimary, ";\n ");
|
|
13771
14341
|
return "\n ".concat(sdsType === "secondary" && hasInvertedStyle ? secondaryButtonStyles : "", "\n ");
|
|
13772
14342
|
});
|
|
14343
|
+
var invertedNarrowButtonStyles = function (props) {
|
|
14344
|
+
var _a, _b, _c, _d;
|
|
14345
|
+
var semanticColors = getSemanticColors(props);
|
|
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);
|
|
14347
|
+
};
|
|
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) {
|
|
14351
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14352
|
+
return material.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
14353
|
+
});
|
|
14354
|
+
var invertedWideButtonStyles = function (props) {
|
|
14355
|
+
var _a, _b;
|
|
14356
|
+
var semanticColors = getSemanticColors(props);
|
|
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);
|
|
14358
|
+
};
|
|
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) {
|
|
14362
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14363
|
+
return material.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
14364
|
+
});
|
|
13773
14365
|
var StyledLogoLinkWrapper = styled__default.default(Link, {
|
|
13774
14366
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13775
|
-
})(
|
|
14367
|
+
})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n text-decoration: none !important;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n text-decoration: none !important;\n\n ", "\n"])), function (props) {
|
|
13776
14368
|
var isNarrow = props.isNarrow;
|
|
13777
|
-
return material.css(
|
|
14369
|
+
return material.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), isNarrow ? "100%" : "auto");
|
|
13778
14370
|
});
|
|
13779
|
-
var StyledLogoWrapper = styled__default.default.div(
|
|
14371
|
+
var StyledLogoWrapper = styled__default.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
13780
14372
|
var NarrowTitleContainer = function (props) {
|
|
13781
14373
|
var spaces = getSpaces(props);
|
|
13782
|
-
return material.css(
|
|
14374
|
+
return material.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n p {\n margin-left: ", "px;\n }\n "], ["\n p {\n margin-left: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
13783
14375
|
};
|
|
13784
14376
|
var StyledTitleContainer = styled__default.default("div", {
|
|
13785
14377
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13786
|
-
})(
|
|
14378
|
+
})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n ", "\n ", "\n\n display: flex;\n align-items: center;\n\n ", "\n"], ["\n ", "\n ", "\n\n display: flex;\n align-items: center;\n\n ", "\n"])), fontHeader("l"), fontHeader("l", true), function (props) {
|
|
13787
14379
|
var isNarrow = props.isNarrow;
|
|
13788
14380
|
var colors = getSemanticColors(props);
|
|
13789
14381
|
var spaces = getSpaces(props);
|
|
13790
|
-
return material.css(
|
|
14382
|
+
return material.css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n p {\n margin: 0 ", "px 0 ", "px;\n }\n\n ", "\n "], ["\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n p {\n margin: 0 ", "px 0 ", "px;\n }\n\n ", "\n "])), props.hasInvertedStyle
|
|
13791
14383
|
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
|
|
13792
14384
|
: colors === null || colors === void 0 ? void 0 : colors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && NarrowTitleContainer(props));
|
|
13793
14385
|
});
|
|
13794
|
-
var StyledTag = styled__default.default(Tag)(
|
|
14386
|
+
var StyledTag = styled__default.default(Tag)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n margin: 1px 0 0 0;\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 1px 0 0 0;\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"), fontBody("xxxs", "regular", /* isNarrow */ true));
|
|
13795
14387
|
var StyledPrimaryNavContainer = styled__default.default("div", {
|
|
13796
14388
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13797
|
-
})(
|
|
14389
|
+
})(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"])), function (props) {
|
|
13798
14390
|
var showSearch = props.showSearch, primaryNavPosition = props.primaryNavPosition, isNarrow = props.isNarrow;
|
|
13799
14391
|
var spaces = getSpaces(props);
|
|
13800
14392
|
var primaryNavPositionWithSearch = primaryNavPosition === "left" ? "flex-start" : "space-between";
|
|
13801
14393
|
var primaryNavPositionWithoutSearch = primaryNavPosition === "left" ? "flex-start" : "flex-end";
|
|
13802
|
-
return material.css(
|
|
14394
|
+
return material.css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n flex-direction: ", ";\n gap: ", "px;\n margin-right: ", "px;\n flex: 1;\n justify-content: ", ";\n "], ["\n flex-direction: ", ";\n gap: ", "px;\n margin-right: ", "px;\n flex: 1;\n justify-content: ", ";\n "])), isNarrow ? "column" : "row", spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, showSearch
|
|
13803
14395
|
? primaryNavPositionWithSearch
|
|
13804
14396
|
: primaryNavPositionWithoutSearch);
|
|
13805
14397
|
});
|
|
13806
14398
|
var StyledSearch = styled__default.default(InputSearch, {
|
|
13807
14399
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13808
|
-
})(
|
|
14400
|
+
})(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n margin: 0;\n width: 100%;\n\n .MuiInputBase-input {\n ", "\n ", "\n }\n\n ", "\n"], ["\n margin: 0;\n width: 100%;\n\n .MuiInputBase-input {\n ", "\n ", "\n }\n\n ", "\n"])), fontBody("xs", "regular"), fontBody("m", "regular", /* isNarrow */ true), function (props) {
|
|
13809
14401
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
13810
14402
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
13811
14403
|
var spaces = getSpaces(props);
|
|
13812
14404
|
var semanticColors = getSemanticColors(props);
|
|
13813
|
-
return material.css(
|
|
13814
|
-
?
|
|
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
|
|
14406
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14407
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14408
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryInverse
|
|
13815
14409
|
: "", hasInvertedStyle
|
|
13816
14410
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryInverse
|
|
13817
14411
|
: "", hasInvertedStyle
|
|
13818
|
-
? (_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
|
|
13819
14413
|
: "", hasInvertedStyle
|
|
13820
14414
|
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse
|
|
13821
14415
|
: "", hasInvertedStyle
|
|
13822
|
-
? (_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
|
|
13823
14417
|
: "", hasInvertedStyle
|
|
13824
14418
|
? (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentPrimaryInverse
|
|
13825
14419
|
: "", hasInvertedStyle
|
|
13826
|
-
? (_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
|
|
13827
14421
|
: "", hasInvertedStyle
|
|
13828
14422
|
? (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabledInverse
|
|
13829
14423
|
: "");
|
|
@@ -13835,23 +14429,23 @@ var NarrowButtonStyles = function (props) {
|
|
|
13835
14429
|
var backgroundColor = props.hasInvertedStyle
|
|
13836
14430
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse
|
|
13837
14431
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary;
|
|
13838
|
-
return material.css(
|
|
14432
|
+
return material.css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background: ", ";\n gap: ", "px;\n flex-direction: column;\n margin-left: 0;\n margin-top: ", "px;\n padding: ", "px;\n position: sticky;\n bottom: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n height: ", "px;\n width: 100%;\n background: linear-gradient(\n to top,\n ", " 0%,\n ", "00 100%\n );\n top: -", "px;\n }\n\n .MuiButton-icon .MuiSvgIcon-root {\n width: ", "px;\n height: ", "px;\n }\n "], ["\n background: ", ";\n gap: ", "px;\n flex-direction: column;\n margin-left: 0;\n margin-top: ", "px;\n padding: ", "px;\n position: sticky;\n bottom: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n height: ", "px;\n width: 100%;\n background: linear-gradient(\n to top,\n ", " 0%,\n ", "00 100%\n );\n top: -", "px;\n }\n\n .MuiButton-icon .MuiSvgIcon-root {\n width: ", "px;\n height: ", "px;\n }\n "])), backgroundColor, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, backgroundColor, backgroundColor, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, sizes === null || sizes === void 0 ? void 0 : sizes.l.width, sizes === null || sizes === void 0 ? void 0 : sizes.l.height);
|
|
13839
14433
|
};
|
|
13840
14434
|
var StyledButtonSection = styled__default.default("section", {
|
|
13841
14435
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13842
|
-
})(
|
|
14436
|
+
})(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"])), fontBody("l", "semibold", /* isNarrow */ true), fontBody("m", "semibold", /* isNarrow */ true), function (props) {
|
|
13843
14437
|
var isNarrow = props.isNarrow;
|
|
13844
14438
|
var spaces = getSpaces(props);
|
|
13845
|
-
return material.css(
|
|
14439
|
+
return material.css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "], ["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, isNarrow && NarrowButtonStyles(props));
|
|
13846
14440
|
});
|
|
13847
14441
|
var StyledDrawer$1 = styled__default.default(material.Drawer, {
|
|
13848
14442
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13849
|
-
})(
|
|
14443
|
+
})(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13850
14444
|
var colors = getSemanticColors(props);
|
|
13851
14445
|
return "\n .MuiDrawer-paper {\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n width: 100%;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n justify-content: space-between;\n }\n ");
|
|
13852
14446
|
});
|
|
13853
|
-
var StyledNarrowButton = styled__default.default(Button)(
|
|
13854
|
-
var templateObject_1$j, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
14447
|
+
var StyledNarrowButton = styled__default.default(Button)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n & {\n margin: 0;\n }\n"], ["\n & {\n margin: 0;\n }\n"])));
|
|
14448
|
+
var templateObject_1$j, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
|
|
13855
14449
|
|
|
13856
14450
|
var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
|
|
13857
14451
|
var NarrowPrimaryNavItem = function (props) {
|
|
@@ -13867,7 +14461,7 @@ var NarrowPrimaryNavItem = function (props) {
|
|
|
13867
14461
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
13868
14462
|
var inactiveBorderColor = hasInvertedStyle
|
|
13869
14463
|
? (_c = colors === null || colors === void 0 ? void 0 : colors.neutral) === null || _c === void 0 ? void 0 : _c.fillPrimary
|
|
13870
|
-
: colors === null || colors === void 0 ? void 0 : colors.base.
|
|
14464
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
13871
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
|
|
13872
14466
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondaryInverse
|
|
13873
14467
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : inactiveBorderColor);
|
|
@@ -13892,7 +14486,7 @@ var WideStyledLabel = function (props) {
|
|
|
13892
14486
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
13893
14487
|
var inactiveBorderColor = hasInvertedStyle
|
|
13894
14488
|
? colors === null || colors === void 0 ? void 0 : colors.base.borderOnFill
|
|
13895
|
-
: colors === null || colors === void 0 ? void 0 : colors.base.
|
|
14489
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
13896
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);
|
|
13897
14491
|
};
|
|
13898
14492
|
var StyledLabel = styled__default.default("span", {
|
|
@@ -14039,18 +14633,16 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
14039
14633
|
}
|
|
14040
14634
|
|
|
14041
14635
|
var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
14042
|
-
var _a;
|
|
14043
|
-
var activePrimaryNavKey = props.activePrimaryNavKey, buttons = props.buttons, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, primaryNavItems = props.primaryNavItems, _b = props.primaryNavPosition, primaryNavPosition = _b === void 0 ? "left" : _b, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _c = props.showSearch, showSearch = _c === void 0 ? true : _c, tag = props.tag, tagColor = props.tagColor, title = props.title, rest = __rest(props, ["activePrimaryNavKey", "buttons", "hasInvertedStyle", "logo", "logoUrl", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title"]);
|
|
14636
|
+
var activePrimaryNavKey = props.activePrimaryNavKey, buttons = props.buttons, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, primaryNavItems = props.primaryNavItems, _a = props.primaryNavPosition, primaryNavPosition = _a === void 0 ? "left" : _a, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _b = props.showSearch, showSearch = _b === void 0 ? true : _b, tag = props.tag, tagColor = props.tagColor, title = props.title, rest = __rest(props, ["activePrimaryNavKey", "buttons", "hasInvertedStyle", "logo", "logoUrl", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title"]);
|
|
14044
14637
|
var navRef = React.useRef(null);
|
|
14045
14638
|
var theme = useTheme();
|
|
14046
|
-
var mode = ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
14047
14639
|
var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
14048
14640
|
React.useEffect(function () {
|
|
14049
14641
|
setIsNarrow(isMdScreen);
|
|
14050
14642
|
}, [isMdScreen]);
|
|
14051
|
-
var
|
|
14052
|
-
var
|
|
14053
|
-
var
|
|
14643
|
+
var _c = React.useState(true), drawerOpen = _c[0], setDrawerOpen = _c[1];
|
|
14644
|
+
var _d = React.useState(isMdScreen), isNarrow = _d[0], setIsNarrow = _d[1];
|
|
14645
|
+
var _e = React.useState(0), breakpoint = _e[0], setBreakpoint = _e[1];
|
|
14054
14646
|
var checkScrollable = React.useCallback(function () {
|
|
14055
14647
|
if (!navRef.current)
|
|
14056
14648
|
return;
|
|
@@ -14071,7 +14663,7 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14071
14663
|
return function () { return resizeObserver.disconnect(); };
|
|
14072
14664
|
}, [breakpoint, checkScrollable, isMdScreen, isNarrow]);
|
|
14073
14665
|
var renderSearch = function () {
|
|
14074
|
-
return (showSearch && (jsxRuntime.jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded",
|
|
14666
|
+
return (showSearch && (jsxRuntime.jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, searchProps))));
|
|
14075
14667
|
};
|
|
14076
14668
|
var renderLogoNode = function () {
|
|
14077
14669
|
var logoNode = (jsxRuntime.jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLogoWrapper, { children: logo }), jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(StyledTag, { color: tagColor, label: tag, hover: false })] }));
|
|
@@ -14107,8 +14699,8 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14107
14699
|
}
|
|
14108
14700
|
return renderDefaultButton(buttonProps, key, fullWidth);
|
|
14109
14701
|
};
|
|
14110
|
-
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(
|
|
14111
|
-
var renderWideIconButton = function (buttonProps, key) { return (jsxRuntime.jsx(
|
|
14702
|
+
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(StyledNarrowIconButton, { sx: fullWidth, sdsStyle: "minimal", sdsType: "secondary", isAllCaps: false, startIcon: jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "Person" }), hasInvertedStyle: hasInvertedStyle, children: buttonProps.children }, key)); };
|
|
14703
|
+
var renderWideIconButton = function (buttonProps, key) { return (jsxRuntime.jsx(StyledWideIconButton, { sdsIconProps: { sdsSize: "l" }, sdsStyle: "icon", sdsType: "secondary", icon: buttonProps.icon, "aria-label": String(buttonProps.children), hasInvertedStyle: hasInvertedStyle }, key)); };
|
|
14112
14704
|
var renderDefaultButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(StyledHeaderButton, __assign({ sx: fullWidth }, buttonProps, { sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle }), key)); };
|
|
14113
14705
|
var renderHeaderContent = function () {
|
|
14114
14706
|
var logoNode = renderLogoNode();
|
|
@@ -14116,11 +14708,7 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14116
14708
|
var primaryNav = renderPrimaryNav();
|
|
14117
14709
|
var secondaryNav = renderSecondaryNav();
|
|
14118
14710
|
var buttonsNode = renderButtonsNode();
|
|
14119
|
-
return (jsxRuntime.jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [logoNode, !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: isNarrow, children: primaryNavPosition === "left" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [primaryNav, search] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), isNarrow && (jsxRuntime.jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); }
|
|
14120
|
-
? mode === "light"
|
|
14121
|
-
? "dark"
|
|
14122
|
-
: "light"
|
|
14123
|
-
: "auto" }))] }));
|
|
14711
|
+
return (jsxRuntime.jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [logoNode, !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: isNarrow, children: primaryNavPosition === "left" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [primaryNav, search] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), isNarrow && (jsxRuntime.jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); } }))] }));
|
|
14124
14712
|
};
|
|
14125
14713
|
var headerContent = renderHeaderContent();
|
|
14126
14714
|
var search = renderSearch();
|
|
@@ -14196,7 +14784,7 @@ var StyledTab$1 = styled__default.default(material.Tab, {
|
|
|
14196
14784
|
var _a, _b, _c;
|
|
14197
14785
|
var spaces = getSpaces(props);
|
|
14198
14786
|
var semanticColors = getSemanticColors(props);
|
|
14199
|
-
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 ");
|
|
14200
14788
|
});
|
|
14201
14789
|
var templateObject_1$f, templateObject_2$8;
|
|
14202
14790
|
|
|
@@ -14700,7 +15288,7 @@ var StyledSegmentedControl = styled__default.default(material.ToggleButtonGroup,
|
|
|
14700
15288
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
14701
15289
|
var spaces = getSpaces(props);
|
|
14702
15290
|
var semanticColors = getSemanticColors(props);
|
|
14703
|
-
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 ");
|
|
14704
15292
|
});
|
|
14705
15293
|
var StyledToggleButton = styled__default.default(material.ToggleButton, {
|
|
14706
15294
|
shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
|
|
@@ -14789,7 +15377,7 @@ var TableRow = React.forwardRef(function (props, ref) {
|
|
|
14789
15377
|
var StyledTableHeader = styled__default.default("thead")(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14790
15378
|
var _a;
|
|
14791
15379
|
var semanticColors = getSemanticColors(props);
|
|
14792
|
-
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 ");
|
|
14793
15381
|
});
|
|
14794
15382
|
var templateObject_1$5;
|
|
14795
15383
|
|
|
@@ -14864,7 +15452,7 @@ var StyledTab = styled__default.default(material.Tab, {
|
|
|
14864
15452
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
14865
15453
|
var spaces = getSpaces(props);
|
|
14866
15454
|
var semanticColors = getSemanticColors(props);
|
|
14867
|
-
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 ");
|
|
14868
15456
|
});
|
|
14869
15457
|
function tabFontMixin(props) {
|
|
14870
15458
|
var sdsSize = props.sdsSize;
|
|
@@ -14997,6 +15585,10 @@ var TooltipTableContent = function (props) {
|
|
|
14997
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)))); })] })));
|
|
14998
15586
|
};
|
|
14999
15587
|
|
|
15588
|
+
Object.defineProperty(exports, "ContentCardMedia", {
|
|
15589
|
+
enumerable: true,
|
|
15590
|
+
get: function () { return material.CardMedia; }
|
|
15591
|
+
});
|
|
15000
15592
|
exports.Accordion = Accordion;
|
|
15001
15593
|
exports.AccordionDetails = AccordionDetails;
|
|
15002
15594
|
exports.AccordionHeader = AccordionHeader;
|
|
@@ -15018,6 +15610,9 @@ exports.Chip = Chip;
|
|
|
15018
15610
|
exports.ComplexFilter = ComplexFilter;
|
|
15019
15611
|
exports.ComplexFilterInputDropdown = InputDropdown;
|
|
15020
15612
|
exports.ComplexFilterPopper = StyledPopper;
|
|
15613
|
+
exports.ContentCard = ContentCard;
|
|
15614
|
+
exports.ContentCardActions = ContentCardActions;
|
|
15615
|
+
exports.ContentCardBody = StyledContentCardBody;
|
|
15021
15616
|
exports.Dialog = Dialog;
|
|
15022
15617
|
exports.DialogActions = DialogActions;
|
|
15023
15618
|
exports.DialogContent = index;
|
|
@@ -15050,6 +15645,7 @@ exports.MINIMUM_DROPDOWN_MENU_POPPER_WIDTH = MINIMUM_DROPDOWN_MENU_POPPER_WIDTH;
|
|
|
15050
15645
|
exports.Menu = Menu;
|
|
15051
15646
|
exports.MenuItem = MenuItem;
|
|
15052
15647
|
exports.MenuSelect = MenuSelect;
|
|
15648
|
+
exports.NavigationFooter = NavigationFooter;
|
|
15053
15649
|
exports.NavigationHeader = NavigationHeader;
|
|
15054
15650
|
exports.NavigationJumpTo = NavigationJumpTo;
|
|
15055
15651
|
exports.Notification = Notification;
|