@czi-sds/components 22.3.2 → 22.4.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 +59 -16
- package/dist/index.cjs.js +649 -373
- package/dist/index.esm.d.ts +59 -16
- package/dist/index.esm.js +650 -374
- package/dist/tailwind.json +51 -45
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +51 -45
- package/dist/variables.scss +51 -45
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, createContext, memo, Fragment as Fragment$1, useContext } from 'react';
|
|
5
5
|
import { css, ThemeContext as ThemeContext$1 } from '@emotion/react';
|
|
6
|
-
import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme as useTheme$4, Popper, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$1, Card, CardContent, styled as styled$3, CardActions, css as css$2, CardMedia, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Divider, useMediaQuery, AppBar, Toolbar, Drawer, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, ToggleButtonGroup, toggleButtonClasses, ToggleButton, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
|
|
6
|
+
import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme as useTheme$4, Popper, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$1, Card, CardContent, styled as styled$3, CardActions, css as css$2, CardMedia, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, ToggleButtonGroup, toggleButtonClasses, ToggleButton, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
|
|
7
7
|
export { CardMedia as ContentCardMedia } from '@mui/material';
|
|
8
8
|
import styled$2 from '@emotion/styled';
|
|
9
9
|
import { Check, Remove, Clear } from '@mui/icons-material';
|
|
@@ -1005,6 +1005,8 @@ var SDSPaletteLight = function (appTheme) {
|
|
|
1005
1005
|
textPrimaryInverse: appTheme.colors.gray[50],
|
|
1006
1006
|
textSecondary: appTheme.colors.gray[600],
|
|
1007
1007
|
textSecondaryInverse: appTheme.colors.gray[300],
|
|
1008
|
+
textTertiary: appTheme.colors.gray[400],
|
|
1009
|
+
textTertiaryInverse: appTheme.colors.gray[500],
|
|
1008
1010
|
},
|
|
1009
1011
|
beta: {
|
|
1010
1012
|
border: appTheme.colors.purple[600],
|
|
@@ -1141,6 +1143,8 @@ var SDSPaletteDark = function (appTheme) {
|
|
|
1141
1143
|
textPrimaryInverse: appTheme.colors.gray[50],
|
|
1142
1144
|
textSecondary: appTheme.colors.gray[600],
|
|
1143
1145
|
textSecondaryInverse: appTheme.colors.gray[300],
|
|
1146
|
+
textTertiary: appTheme.colors.gray[400],
|
|
1147
|
+
textTertiaryInverse: appTheme.colors.gray[500],
|
|
1144
1148
|
},
|
|
1145
1149
|
beta: {
|
|
1146
1150
|
border: appTheme.colors.purple[600],
|
|
@@ -1549,7 +1553,7 @@ var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
|
1549
1553
|
return null;
|
|
1550
1554
|
var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
|
|
1551
1555
|
if (isNarrow) {
|
|
1552
|
-
return css(templateObject_1$
|
|
1556
|
+
return css(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowBody[fontWeight][fontSize], bodyFontFamily));
|
|
1553
1557
|
}
|
|
1554
1558
|
return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
|
|
1555
1559
|
};
|
|
@@ -1574,7 +1578,7 @@ var fontCaps = function (fontSize, isNarrow) {
|
|
|
1574
1578
|
if (!typography)
|
|
1575
1579
|
return null;
|
|
1576
1580
|
var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
|
|
1577
|
-
return css(templateObject_3$
|
|
1581
|
+
return css(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n "], ["\n text-transform: uppercase;\n\n ", "\n "])), isNarrow
|
|
1578
1582
|
? 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
1583
|
};
|
|
1580
1584
|
};
|
|
@@ -1590,7 +1594,7 @@ var fontHeader = function (fontSize, isNarrow) {
|
|
|
1590
1594
|
return null;
|
|
1591
1595
|
var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
|
|
1592
1596
|
if (isNarrow) {
|
|
1593
|
-
return css(templateObject_4$
|
|
1597
|
+
return css(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowHeader.semibold[fontSize], headerFontFamily));
|
|
1594
1598
|
}
|
|
1595
1599
|
return themeToCss(header.semibold[fontSize], headerFontFamily);
|
|
1596
1600
|
};
|
|
@@ -1631,7 +1635,7 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
|
|
|
1631
1635
|
if (!typography)
|
|
1632
1636
|
return null;
|
|
1633
1637
|
var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
|
|
1634
|
-
return css(templateObject_7$
|
|
1638
|
+
return css(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
|
|
1635
1639
|
? 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
1640
|
};
|
|
1637
1641
|
};
|
|
@@ -1641,15 +1645,15 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
|
|
|
1641
1645
|
var fontTabularSemiboldS = fontTabular("s", "semibold");
|
|
1642
1646
|
function themeToCss(fontTheme, fontFamily) {
|
|
1643
1647
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1644
|
-
return css(templateObject_8$
|
|
1648
|
+
return css(templateObject_8$e || (templateObject_8$e = __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
1649
|
}
|
|
1646
|
-
var templateObject_1$
|
|
1650
|
+
var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$w, templateObject_5$p, templateObject_6$l, templateObject_7$h, templateObject_8$e;
|
|
1647
1651
|
|
|
1648
1652
|
var StyledAccordionDetails = styled$2(AccordionDetails$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
1649
1653
|
var spaces = getSpaces(props);
|
|
1650
|
-
return css(templateObject_1$
|
|
1654
|
+
return css(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n padding: ", "px ", "px ", "px;\n "], ["\n padding: ", "px ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
1651
1655
|
});
|
|
1652
|
-
var templateObject_1$
|
|
1656
|
+
var templateObject_1$19, templateObject_2$M;
|
|
1653
1657
|
|
|
1654
1658
|
var AccordionDetails = function (props) {
|
|
1655
1659
|
var children = props.children;
|
|
@@ -1660,14 +1664,14 @@ var StyledAccordionHeader = styled$2(AccordionSummary)(templateObject_2$L || (te
|
|
|
1660
1664
|
var _a, _b;
|
|
1661
1665
|
var spaces = getSpaces(props);
|
|
1662
1666
|
var semanticColors = getSemanticColors(props);
|
|
1663
|
-
return css(templateObject_1$
|
|
1667
|
+
return css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, accordionSummaryClasses.content, accordionSummaryClasses.expanded, 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, accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
|
|
1664
1668
|
});
|
|
1665
|
-
var StyledSubtitle = styled$2("p")(templateObject_4$
|
|
1669
|
+
var StyledSubtitle = styled$2("p")(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1666
1670
|
var _a;
|
|
1667
1671
|
var semanticColors = getSemanticColors(props);
|
|
1668
|
-
return css(templateObject_3$
|
|
1672
|
+
return css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
|
|
1669
1673
|
});
|
|
1670
|
-
var templateObject_1$
|
|
1674
|
+
var templateObject_1$18, templateObject_2$L, templateObject_3$C, templateObject_4$v;
|
|
1671
1675
|
|
|
1672
1676
|
var _path$26, _path2$C, _path3$6;
|
|
1673
1677
|
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); }
|
|
@@ -4389,10 +4393,10 @@ var StyledSvgIcon = styled$2(SvgIcon, {
|
|
|
4389
4393
|
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
4394
|
var iconSizes = getIconSizes(props);
|
|
4391
4395
|
var colors = getColors(props);
|
|
4392
|
-
return css(templateObject_1$
|
|
4396
|
+
return css(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "], ["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade], (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _c === void 0 ? void 0 : _c.width);
|
|
4393
4397
|
});
|
|
4394
|
-
var StyledIcon$1 = styled$2("div")(templateObject_3$
|
|
4395
|
-
var templateObject_1$
|
|
4398
|
+
var StyledIcon$1 = styled$2("div")(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
|
|
4399
|
+
var templateObject_1$17, templateObject_2$K, templateObject_3$B;
|
|
4396
4400
|
|
|
4397
4401
|
/**
|
|
4398
4402
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4419,7 +4423,7 @@ var AccordionHeader = function (props) {
|
|
|
4419
4423
|
};
|
|
4420
4424
|
|
|
4421
4425
|
var sdsPropNames$2 = ["useDivider", "togglePosition"];
|
|
4422
|
-
var StyledAccordion$
|
|
4426
|
+
var StyledAccordion$2 = styled$2(Accordion$1, {
|
|
4423
4427
|
shouldForwardProp: function (prop) {
|
|
4424
4428
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4425
4429
|
},
|
|
@@ -4430,17 +4434,17 @@ var StyledAccordion$1 = styled$2(Accordion$1, {
|
|
|
4430
4434
|
var typography = getTypography(props);
|
|
4431
4435
|
var borders = getBorders(props);
|
|
4432
4436
|
var spaces = getSpaces(props);
|
|
4433
|
-
return css(templateObject_1$
|
|
4437
|
+
return css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), 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", accordionSummaryClasses.root, focusVisibleA11yStyle(props), accordionSummaryClasses.focusVisible, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
|
|
4434
4438
|
});
|
|
4435
4439
|
var leftPosition = function (props) {
|
|
4436
4440
|
var _a, _b, _c;
|
|
4437
4441
|
var spaces = getSpaces(props);
|
|
4438
4442
|
var iconSizes = getIconSizes(props);
|
|
4439
|
-
return css(templateObject_3$
|
|
4443
|
+
return css(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\n\n &.", " {\n transform: rotate(0deg);\n }\n }\n }\n\n /** This is to adjust the padding of the AccordionDetails when the togglePosition is left\n * The padding-left is the sum of the\n * left padding of the AccordionButton = spaces?.m\n * the width of the expandIcon = iconSizes?.xs.width\n * and the left padding of the AccordionSummary = spaces?.s \n */\n & .", " {\n padding-left: ", "px;\n }\n }\n "], ["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\n\n &.", " {\n transform: rotate(0deg);\n }\n }\n }\n\n /** This is to adjust the padding of the AccordionDetails when the togglePosition is left\n * The padding-left is the sum of the\n * left padding of the AccordionButton = spaces?.m\n * the width of the expandIcon = iconSizes?.xs.width\n * and the left padding of the AccordionSummary = spaces?.s \n */\n & .", " {\n padding-left: ", "px;\n }\n }\n "])), accordionClasses.root, accordionSummaryClasses.root, accordionSummaryClasses.content, spaces === null || spaces === void 0 ? void 0 : spaces.s, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, accordionSummaryClasses.expanded, accordionDetailsClasses.root, ((_a = spaces === null || spaces === void 0 ? void 0 : spaces.m) !== null && _a !== void 0 ? _a : 12) +
|
|
4440
4444
|
((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
|
|
4441
4445
|
((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
|
|
4442
4446
|
};
|
|
4443
|
-
var templateObject_1$
|
|
4447
|
+
var templateObject_1$16, templateObject_2$J, templateObject_3$A;
|
|
4444
4448
|
|
|
4445
4449
|
/**
|
|
4446
4450
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4453,10 +4457,10 @@ var Accordion = React__default.forwardRef(function (props, ref) {
|
|
|
4453
4457
|
setExpanded(isExpanded ? panel : false);
|
|
4454
4458
|
};
|
|
4455
4459
|
};
|
|
4456
|
-
return (jsx(StyledAccordion$
|
|
4460
|
+
return (jsx(StyledAccordion$2, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
|
|
4457
4461
|
});
|
|
4458
4462
|
|
|
4459
|
-
var StyledAlert = styled$2(Alert$2)(templateObject_1$
|
|
4463
|
+
var StyledAlert = styled$2(Alert$2)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4460
4464
|
var _a;
|
|
4461
4465
|
var colors = getColors(props);
|
|
4462
4466
|
var spaces = getSpaces(props);
|
|
@@ -4483,7 +4487,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4483
4487
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4484
4488
|
}
|
|
4485
4489
|
}
|
|
4486
|
-
var templateObject_1$
|
|
4490
|
+
var templateObject_1$15;
|
|
4487
4491
|
|
|
4488
4492
|
/**
|
|
4489
4493
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4648,11 +4652,10 @@ var ButtonStyles = function (props) {
|
|
|
4648
4652
|
? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
|
|
4649
4653
|
: "none";
|
|
4650
4654
|
fontBody("xs", "semibold");
|
|
4651
|
-
return css(templateObject_1$
|
|
4655
|
+
return css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n white-space: nowrap;\n min-width: fit-content;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n white-space: nowrap;\n min-width: fit-content;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), backgroundColor, boxshadow, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.ornamentPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.ornamentDisabled, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
|
|
4652
4656
|
};
|
|
4653
|
-
var Rounded = function (
|
|
4654
|
-
|
|
4655
|
-
return 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);
|
|
4657
|
+
var Rounded = function () {
|
|
4658
|
+
return css(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n border-radius: 100px;\n "], ["\n border-radius: 100px;\n "])));
|
|
4656
4659
|
};
|
|
4657
4660
|
var DestructiveButton = function (props) {
|
|
4658
4661
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4671,13 +4674,13 @@ var DestructiveButton = function (props) {
|
|
|
4671
4674
|
var boxshadow = variant === "outlined"
|
|
4672
4675
|
? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
|
|
4673
4676
|
: "none";
|
|
4674
|
-
return css(templateObject_3$
|
|
4677
|
+
return css(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), boxshadow, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.ornamentPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.ornamentDisabled);
|
|
4675
4678
|
};
|
|
4676
4679
|
var StyledButton$3 = styled$2(Button$1, {
|
|
4677
4680
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4678
4681
|
})(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4679
4682
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4680
|
-
return css(templateObject_4$
|
|
4683
|
+
return css(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(), sdsType === "destructive" && DestructiveButton(props));
|
|
4681
4684
|
});
|
|
4682
4685
|
// Minimal Button Styles
|
|
4683
4686
|
var Minimal = function (props) {
|
|
@@ -4686,39 +4689,39 @@ var Minimal = function (props) {
|
|
|
4686
4689
|
var spaces = getSpaces(props);
|
|
4687
4690
|
var iconSizes = getIconSizes(props);
|
|
4688
4691
|
var semanticColors = getSemanticColors(props);
|
|
4689
|
-
return css(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n ", "\n\n min-width:
|
|
4692
|
+
return css(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
4690
4693
|
};
|
|
4691
4694
|
var PrimaryMinimalButton = function (props) {
|
|
4692
4695
|
var _a, _b;
|
|
4693
4696
|
var semanticColors = getSemanticColors(props);
|
|
4694
|
-
return css(templateObject_7$
|
|
4697
|
+
return css(templateObject_7$g || (templateObject_7$g = __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);
|
|
4695
4698
|
};
|
|
4696
4699
|
var SecondaryMinimalButton = function (props) {
|
|
4697
4700
|
var _a, _b;
|
|
4698
4701
|
var semanticColors = getSemanticColors(props);
|
|
4699
|
-
return css(templateObject_8$
|
|
4702
|
+
return css(templateObject_8$d || (templateObject_8$d = __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);
|
|
4700
4703
|
};
|
|
4701
4704
|
var StyledMinimalButton = styled$2(Button$1, {
|
|
4702
4705
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4703
|
-
})(templateObject_10$
|
|
4706
|
+
})(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4704
4707
|
var sdsType = props.sdsType;
|
|
4705
|
-
return css(templateObject_9$
|
|
4708
|
+
return css(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4706
4709
|
});
|
|
4707
4710
|
var StyledButtonLegacy = styled$2(Button$1, {
|
|
4708
4711
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4709
|
-
})(templateObject_11$
|
|
4712
|
+
})(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4710
4713
|
if (!props.isRounded)
|
|
4711
4714
|
return "";
|
|
4712
4715
|
var corners = getCorners(props);
|
|
4713
4716
|
var spaces = getSpaces(props);
|
|
4714
4717
|
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 ");
|
|
4715
4718
|
});
|
|
4716
|
-
var templateObject_1$
|
|
4719
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$u, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$8, templateObject_10$6, templateObject_11$5;
|
|
4717
4720
|
|
|
4718
4721
|
var isDisabled$1 = function (props) {
|
|
4719
4722
|
var _a, _b;
|
|
4720
4723
|
var semanticColors = getSemanticColors(props);
|
|
4721
|
-
return css(templateObject_1$
|
|
4724
|
+
return css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled);
|
|
4722
4725
|
};
|
|
4723
4726
|
var primary$2 = function (props) {
|
|
4724
4727
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -4728,12 +4731,12 @@ var primary$2 = function (props) {
|
|
|
4728
4731
|
var secondary$2 = function (props) {
|
|
4729
4732
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4730
4733
|
var semanticColors = getSemanticColors(props);
|
|
4731
|
-
return css(templateObject_3$
|
|
4734
|
+
return css(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
|
|
4732
4735
|
};
|
|
4733
4736
|
var tertiary = function (props) {
|
|
4734
4737
|
var _a, _b, _c, _d, _e, _f;
|
|
4735
4738
|
var semanticColors = getSemanticColors(props);
|
|
4736
|
-
return css(templateObject_4$
|
|
4739
|
+
return css(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryPressed);
|
|
4737
4740
|
};
|
|
4738
4741
|
var small$1 = function (props) {
|
|
4739
4742
|
var sdsType = props.sdsType;
|
|
@@ -4755,7 +4758,7 @@ var large = function (props) {
|
|
|
4755
4758
|
var sdsType = props.sdsType;
|
|
4756
4759
|
var iconSizes = getIconSizes(props);
|
|
4757
4760
|
var spaces = getSpaces(props);
|
|
4758
|
-
return css(templateObject_7$
|
|
4761
|
+
return css(templateObject_7$f || (templateObject_7$f = __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"
|
|
4759
4762
|
? "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;")
|
|
4760
4763
|
: "", 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;") : "");
|
|
4761
4764
|
};
|
|
@@ -4770,11 +4773,11 @@ var doNotForwardProps$D = [
|
|
|
4770
4773
|
];
|
|
4771
4774
|
var StyledButtonIcon = styled$2(IconButton, {
|
|
4772
4775
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
4773
|
-
})(templateObject_9$
|
|
4776
|
+
})(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4774
4777
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4775
|
-
return css(templateObject_8$
|
|
4778
|
+
return css(templateObject_8$c || (templateObject_8$c = __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));
|
|
4776
4779
|
});
|
|
4777
|
-
var templateObject_1$
|
|
4780
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$t, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$7;
|
|
4778
4781
|
|
|
4779
4782
|
var ButtonIconSizeToSdsIconSize = {
|
|
4780
4783
|
large: "xl",
|
|
@@ -4883,7 +4886,7 @@ var rounded$3 = function (props) {
|
|
|
4883
4886
|
var _a;
|
|
4884
4887
|
var corners = getCorners(props);
|
|
4885
4888
|
var semanticColors = getSemanticColors(props);
|
|
4886
|
-
return css(templateObject_1$
|
|
4889
|
+
return css(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "], ["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "])), outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, 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);
|
|
4887
4890
|
};
|
|
4888
4891
|
var applyIntentColor$2 = function (props, intent) {
|
|
4889
4892
|
var _a, _b, _c, _d;
|
|
@@ -4894,9 +4897,9 @@ var applyIntentColor$2 = function (props, intent) {
|
|
|
4894
4897
|
var disabledStyled$2 = function (props) {
|
|
4895
4898
|
var _a, _b, _c, _d, _e;
|
|
4896
4899
|
var semanticColors = getSemanticColors(props);
|
|
4897
|
-
return css(templateObject_3$
|
|
4900
|
+
return css(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryDisabled, 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);
|
|
4898
4901
|
};
|
|
4899
|
-
var StyledLabel$3 = styled$2("label")(templateObject_4$
|
|
4902
|
+
var StyledLabel$3 = styled$2("label")(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4900
4903
|
var spaces = getSpaces(props);
|
|
4901
4904
|
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 ");
|
|
4902
4905
|
});
|
|
@@ -4905,17 +4908,17 @@ var StyledSearchBase = styled$2(TextField, {
|
|
|
4905
4908
|
return !doNotForwardProps$C.includes(prop.toString());
|
|
4906
4909
|
},
|
|
4907
4910
|
})(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4908
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
4911
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4909
4912
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4910
4913
|
var spaces = getSpaces(props);
|
|
4911
4914
|
var iconSizes = getIconSizes(props);
|
|
4912
4915
|
var semanticColors = getSemanticColors(props);
|
|
4913
|
-
return 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, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.notchedOutline, (
|
|
4916
|
+
return css(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, outlinedInputClasses.root, buttonBaseClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentFocus, outlinedInputClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.borderPrimaryHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
|
|
4914
4917
|
});
|
|
4915
|
-
var StyledInputAdornment = styled$2(InputAdornment)(templateObject_7$
|
|
4916
|
-
var templateObject_1$
|
|
4918
|
+
var StyledInputAdornment = styled$2(InputAdornment)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4919
|
+
var templateObject_1$12, templateObject_2$G, templateObject_3$x, templateObject_4$s, templateObject_5$m, templateObject_6$i, templateObject_7$e;
|
|
4917
4920
|
|
|
4918
|
-
var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$
|
|
4921
|
+
var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4919
4922
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4920
4923
|
var selected = props.selected;
|
|
4921
4924
|
var fontWeights = getFontWeights(props);
|
|
@@ -4932,12 +4935,12 @@ var disabledStyles$2 = function (props) {
|
|
|
4932
4935
|
var semanticColors = getSemanticColors(props);
|
|
4933
4936
|
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 ");
|
|
4934
4937
|
};
|
|
4935
|
-
var TextWrapper = styled$2("span")(templateObject_3$
|
|
4938
|
+
var TextWrapper = styled$2("span")(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4936
4939
|
var _a;
|
|
4937
4940
|
var semanticColors = getSemanticColors(props);
|
|
4938
4941
|
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 ");
|
|
4939
4942
|
}, disabledStyles$2);
|
|
4940
|
-
var StyledMenuItemIcon = styled$2("span")(templateObject_4$
|
|
4943
|
+
var StyledMenuItemIcon = styled$2("span")(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4941
4944
|
var _a;
|
|
4942
4945
|
var disabled = props.disabled;
|
|
4943
4946
|
var spaces = getSpaces(props);
|
|
@@ -4958,7 +4961,7 @@ var StyledIconWrapper = styled$2("span")(templateObject_6$h || (templateObject_6
|
|
|
4958
4961
|
});
|
|
4959
4962
|
var StyledCheck = styled$2(Check, {
|
|
4960
4963
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4961
|
-
})(templateObject_7$
|
|
4964
|
+
})(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4962
4965
|
var _a, _b;
|
|
4963
4966
|
var selected = props.selected, disabled = props.disabled;
|
|
4964
4967
|
var iconSizes = getIconSizes(props);
|
|
@@ -4970,7 +4973,7 @@ var StyledCheck = styled$2(Check, {
|
|
|
4970
4973
|
});
|
|
4971
4974
|
var StyledMinus = styled$2(Remove, {
|
|
4972
4975
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4973
|
-
})(templateObject_8$
|
|
4976
|
+
})(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4974
4977
|
var _a, _b;
|
|
4975
4978
|
var selected = props.selected, disabled = props.disabled;
|
|
4976
4979
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4980,7 +4983,7 @@ var StyledMinus = styled$2(Remove, {
|
|
|
4980
4983
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
|
|
4981
4984
|
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 ");
|
|
4982
4985
|
});
|
|
4983
|
-
var templateObject_1$
|
|
4986
|
+
var templateObject_1$11, templateObject_2$F, templateObject_3$w, templateObject_4$r, templateObject_5$l, templateObject_6$h, templateObject_7$d, templateObject_8$b;
|
|
4984
4987
|
|
|
4985
4988
|
/**
|
|
4986
4989
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5152,7 +5155,7 @@ var doNotForwardProps$B = [
|
|
|
5152
5155
|
];
|
|
5153
5156
|
var StyledAutocompleteBase = styled$2(Autocomplete$1, {
|
|
5154
5157
|
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5155
|
-
})(templateObject_1
|
|
5158
|
+
})(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), autocompleteClasses.popper, autocompleteClasses.paper, autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
|
|
5156
5159
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5157
5160
|
var search = props.search;
|
|
5158
5161
|
var spaces = getSpaces(props);
|
|
@@ -5173,11 +5176,11 @@ var InputBaseWrapper$1 = styled$2("div", {
|
|
|
5173
5176
|
});
|
|
5174
5177
|
var StyledMenuInputSearch$1 = styled$2(InputSearch, {
|
|
5175
5178
|
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5176
|
-
})(templateObject_3$
|
|
5179
|
+
})(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
5177
5180
|
var search = _a.search;
|
|
5178
5181
|
return (search ? "auto" : "transparent");
|
|
5179
5182
|
});
|
|
5180
|
-
var StyledPaper$3 = styled$2(Paper)(templateObject_4$
|
|
5183
|
+
var StyledPaper$3 = styled$2(Paper)(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5181
5184
|
var _a;
|
|
5182
5185
|
var spaces = getSpaces(props);
|
|
5183
5186
|
var corners = getCorners(props);
|
|
@@ -5192,7 +5195,7 @@ var StyledMenuItemDetails = styled$2("div")(templateObject_5$k || (templateObjec
|
|
|
5192
5195
|
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 ");
|
|
5193
5196
|
});
|
|
5194
5197
|
var StyledMenuItemText = styled$2("div")(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5195
|
-
var templateObject_1
|
|
5198
|
+
var templateObject_1$10, templateObject_2$E, templateObject_3$v, templateObject_4$q, templateObject_5$k, templateObject_6$g;
|
|
5196
5199
|
|
|
5197
5200
|
var AutocompleteBase = function (props) {
|
|
5198
5201
|
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;
|
|
@@ -5353,7 +5356,7 @@ var AutocompleteBase = function (props) {
|
|
|
5353
5356
|
}
|
|
5354
5357
|
};
|
|
5355
5358
|
|
|
5356
|
-
var StyledColumn = styled$2("div")(templateObject_1
|
|
5359
|
+
var StyledColumn = styled$2("div")(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5357
5360
|
var _a;
|
|
5358
5361
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
5359
5362
|
var spaces = getSpaces(props);
|
|
@@ -5366,14 +5369,14 @@ var StyledColumnTitle = styled$2("p")(templateObject_2$D || (templateObject_2$D
|
|
|
5366
5369
|
var semanticColors = getSemanticColors(props);
|
|
5367
5370
|
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 ");
|
|
5368
5371
|
});
|
|
5369
|
-
var StyledColumnIcon = styled$2("span")(templateObject_3$
|
|
5372
|
+
var StyledColumnIcon = styled$2("span")(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5370
5373
|
var _a, _b;
|
|
5371
5374
|
var spaces = getSpaces(props);
|
|
5372
5375
|
var iconSizes = getIconSizes(props);
|
|
5373
5376
|
var semanticColors = getSemanticColors(props);
|
|
5374
5377
|
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 ");
|
|
5375
5378
|
});
|
|
5376
|
-
var templateObject_1
|
|
5379
|
+
var templateObject_1$$, templateObject_2$D, templateObject_3$u;
|
|
5377
5380
|
|
|
5378
5381
|
var AutocompleteGroup = function (props) {
|
|
5379
5382
|
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"]);
|
|
@@ -5428,7 +5431,7 @@ var StyledPopper$2 = styled$2(Popper, {
|
|
|
5428
5431
|
shouldForwardProp: function (prop) {
|
|
5429
5432
|
return !doNotForwardProps$A.includes(prop) || prop === "anchorEl";
|
|
5430
5433
|
},
|
|
5431
|
-
})(templateObject_1$
|
|
5434
|
+
})(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5432
5435
|
var _a;
|
|
5433
5436
|
var corners = getCorners(props);
|
|
5434
5437
|
var shadows = getShadows(props);
|
|
@@ -5445,17 +5448,17 @@ var StyledPaper$2 = styled$2(Paper, {
|
|
|
5445
5448
|
var semanticColors = getSemanticColors(props);
|
|
5446
5449
|
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 ");
|
|
5447
5450
|
});
|
|
5448
|
-
var StyledAutocompleteGroupWrapper = styled$2("div")(templateObject_3$
|
|
5451
|
+
var StyledAutocompleteGroupWrapper = styled$2("div")(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5449
5452
|
var StyledAutocompleteInput = styled$2(InputSearch, {
|
|
5450
5453
|
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
5451
|
-
})(templateObject_4$
|
|
5454
|
+
})(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
5452
5455
|
var search = _a.search;
|
|
5453
5456
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5454
5457
|
}, function (_a) {
|
|
5455
5458
|
var search = _a.search;
|
|
5456
5459
|
return (search ? "auto" : "transparent");
|
|
5457
5460
|
});
|
|
5458
|
-
var templateObject_1$
|
|
5461
|
+
var templateObject_1$_, templateObject_2$C, templateObject_3$t, templateObject_4$p;
|
|
5459
5462
|
|
|
5460
5463
|
var AutocompleteMultiColumn = function (props) {
|
|
5461
5464
|
var _a;
|
|
@@ -5637,7 +5640,7 @@ var Autocomplete = function (props) {
|
|
|
5637
5640
|
}
|
|
5638
5641
|
};
|
|
5639
5642
|
|
|
5640
|
-
var Centered = styled$2("div")(templateObject_1$
|
|
5643
|
+
var Centered = styled$2("div")(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
5641
5644
|
var doNotForwardPropsIconWrapper = ["bannerType"];
|
|
5642
5645
|
var IconWrapper$1 = styled$2("div", {
|
|
5643
5646
|
shouldForwardProp: function (prop) {
|
|
@@ -5656,7 +5659,7 @@ var StyledButton$2 = styled$2(Button, {
|
|
|
5656
5659
|
shouldForwardProp: function (prop) {
|
|
5657
5660
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5658
5661
|
},
|
|
5659
|
-
})(templateObject_3$
|
|
5662
|
+
})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
|
|
5660
5663
|
var _a, _b;
|
|
5661
5664
|
var bannerType = props.bannerType;
|
|
5662
5665
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5664,7 +5667,7 @@ var StyledButton$2 = styled$2(Button, {
|
|
|
5664
5667
|
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 ");
|
|
5665
5668
|
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 ");
|
|
5666
5669
|
});
|
|
5667
|
-
styled$2("div")(templateObject_4$
|
|
5670
|
+
styled$2("div")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5668
5671
|
var primary$1 = function (props) {
|
|
5669
5672
|
var _a, _b;
|
|
5670
5673
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5683,7 +5686,7 @@ var StyledBanner = styled$2("div", {
|
|
|
5683
5686
|
var spaces = getSpaces(props);
|
|
5684
5687
|
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 ");
|
|
5685
5688
|
});
|
|
5686
|
-
var templateObject_1$
|
|
5689
|
+
var templateObject_1$Z, templateObject_2$B, templateObject_3$s, templateObject_4$o, templateObject_5$j;
|
|
5687
5690
|
|
|
5688
5691
|
var Banner = forwardRef(function Banner(props, ref) {
|
|
5689
5692
|
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"]);
|
|
@@ -5749,13 +5752,13 @@ var ButtonDropdown = React__default.forwardRef(function (props, ref) {
|
|
|
5749
5752
|
var doNotForwardProps$y = ["sdsStage"];
|
|
5750
5753
|
var StyledButtonToggle = styled$2(ButtonIcon, {
|
|
5751
5754
|
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
5752
|
-
})(templateObject_1$
|
|
5755
|
+
})(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5753
5756
|
var _a;
|
|
5754
5757
|
var sdsStage = props.sdsStage;
|
|
5755
5758
|
var semanticColors = getSemanticColors(props);
|
|
5756
5759
|
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 ");
|
|
5757
5760
|
});
|
|
5758
|
-
var templateObject_1$
|
|
5761
|
+
var templateObject_1$Y;
|
|
5759
5762
|
|
|
5760
5763
|
/**
|
|
5761
5764
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -5780,7 +5783,7 @@ var doNotForwardProps$x = [
|
|
|
5780
5783
|
];
|
|
5781
5784
|
var StyledCallout = styled$2(Alert$2, {
|
|
5782
5785
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
5783
|
-
})(templateObject_1$
|
|
5786
|
+
})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5784
5787
|
var _a, _b, _c, _d, _e;
|
|
5785
5788
|
var _f = props.intent, intent = _f === void 0 ? "info" : _f, sdsStyle = props.sdsStyle, hideBody = props.hideBody, collapsed = props.collapsed;
|
|
5786
5789
|
var spaces = getSpaces(props);
|
|
@@ -5792,12 +5795,12 @@ var StyledCallout = styled$2(Alert$2, {
|
|
|
5792
5795
|
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";
|
|
5793
5796
|
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(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(alertClasses.message, " {\n width: 100%;\n padding: 0;\n margin: 0;\n\n .").concat(alertTitleClasses.root, " {\n margin: 0;\n }\n }\n\n .").concat(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 ");
|
|
5794
5797
|
});
|
|
5795
|
-
var templateObject_1$
|
|
5798
|
+
var templateObject_1$X;
|
|
5796
5799
|
|
|
5797
5800
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5798
5801
|
|
|
5799
|
-
var StyledCalloutTitle = styled$2(AlertTitle)(templateObject_1$
|
|
5800
|
-
var templateObject_1$
|
|
5802
|
+
var StyledCalloutTitle = styled$2(AlertTitle)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n margin: 0;\n"], ["\n ", "\n margin: 0;\n"])), fontBodySemiboldXs);
|
|
5803
|
+
var templateObject_1$W;
|
|
5801
5804
|
|
|
5802
5805
|
var CalloutTitle = function (_a) {
|
|
5803
5806
|
var children = _a.children;
|
|
@@ -5806,24 +5809,24 @@ var CalloutTitle = function (_a) {
|
|
|
5806
5809
|
// Display name required to ensure Callout expand works correctly.
|
|
5807
5810
|
CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
|
|
5808
5811
|
|
|
5809
|
-
var StyledCalloutBody = styled$2("p")(templateObject_1$
|
|
5812
|
+
var StyledCalloutBody = styled$2("p")(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5810
5813
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a;
|
|
5811
5814
|
var spaces = getSpaces(props);
|
|
5812
5815
|
return "\n margin: ".concat(!hideTitle ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0 0;\n ");
|
|
5813
5816
|
});
|
|
5814
|
-
var templateObject_1$
|
|
5817
|
+
var templateObject_1$V;
|
|
5815
5818
|
|
|
5816
5819
|
var CalloutBody = function (_a) {
|
|
5817
5820
|
var children = _a.children, hideTitle = _a.hideTitle;
|
|
5818
5821
|
return (jsx(StyledCalloutBody, { hideTitle: hideTitle, children: children }));
|
|
5819
5822
|
};
|
|
5820
5823
|
|
|
5821
|
-
var StyledCalloutExtraContent = styled$2("div")(templateObject_1$
|
|
5824
|
+
var StyledCalloutExtraContent = styled$2("div")(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5822
5825
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a, _b = props.hideBody, hideBody = _b === void 0 ? false : _b;
|
|
5823
5826
|
var spaces = getSpaces(props);
|
|
5824
5827
|
return "\n margin: ".concat(hideTitle && hideBody ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0 0;\n ");
|
|
5825
5828
|
});
|
|
5826
|
-
var templateObject_1$
|
|
5829
|
+
var templateObject_1$U;
|
|
5827
5830
|
|
|
5828
5831
|
var CalloutExtraContent = function (_a) {
|
|
5829
5832
|
var children = _a.children, hideTitle = _a.hideTitle, hideBody = _a.hideBody;
|
|
@@ -5892,7 +5895,7 @@ var dark$1 = function (props) {
|
|
|
5892
5895
|
var _a, _b;
|
|
5893
5896
|
var spaces = getSpaces(props);
|
|
5894
5897
|
var semanticColors = getSemanticColors(props);
|
|
5895
|
-
return css$1(templateObject_1$
|
|
5898
|
+
return css$1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5896
5899
|
};
|
|
5897
5900
|
var light$1 = function (props) {
|
|
5898
5901
|
var _a, _b;
|
|
@@ -5901,11 +5904,11 @@ var light$1 = function (props) {
|
|
|
5901
5904
|
return css$1(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);
|
|
5902
5905
|
};
|
|
5903
5906
|
var wide = function () {
|
|
5904
|
-
return css$1(templateObject_3$
|
|
5907
|
+
return css$1(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
|
|
5905
5908
|
};
|
|
5906
5909
|
var tableStyles = function (props) {
|
|
5907
5910
|
var spaces = getSpaces(props);
|
|
5908
|
-
return css$1(templateObject_4$
|
|
5911
|
+
return css$1(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5909
5912
|
};
|
|
5910
5913
|
var doNotForwardProps$w = ["hasInvertedStyle"];
|
|
5911
5914
|
var Subtitle$1 = styled$2("div", {
|
|
@@ -5927,7 +5930,7 @@ var arrowCss = function (props) {
|
|
|
5927
5930
|
var _a, _b;
|
|
5928
5931
|
var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
5929
5932
|
var semanticColors = getSemanticColors(props);
|
|
5930
|
-
return css$1(templateObject_7$
|
|
5933
|
+
return css$1(templateObject_7$c || (templateObject_7$c = __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"
|
|
5931
5934
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
|
|
5932
5935
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
|
|
5933
5936
|
};
|
|
@@ -5935,8 +5938,8 @@ var arrowCss = function (props) {
|
|
|
5935
5938
|
* (masoudmanson): !important is needed to override arrow's
|
|
5936
5939
|
* default placement which is calculated by javascript
|
|
5937
5940
|
*/
|
|
5938
|
-
var StyledPopper$1 = styled$2(Popper)(templateObject_8$
|
|
5939
|
-
var templateObject_1$
|
|
5941
|
+
var StyledPopper$1 = styled$2(Popper)(templateObject_8$a || (templateObject_8$a = __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"])));
|
|
5942
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a;
|
|
5940
5943
|
|
|
5941
5944
|
/**
|
|
5942
5945
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -6042,7 +6045,7 @@ var verticalAlignToFlexMap = {
|
|
|
6042
6045
|
};
|
|
6043
6046
|
var StyledTableData = styled$2("td", {
|
|
6044
6047
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6045
|
-
})(templateObject_1$
|
|
6048
|
+
})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6046
6049
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6047
6050
|
var spaces = getSpaces(props);
|
|
6048
6051
|
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 ");
|
|
@@ -6054,10 +6057,10 @@ var ShouldTruncate = function () {
|
|
|
6054
6057
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
|
|
6055
6058
|
};
|
|
6056
6059
|
var StyledCellContent = styled$2("div")(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6057
|
-
var StyledCellContentWrapper = styled$2("div")(templateObject_3$
|
|
6060
|
+
var StyledCellContentWrapper = styled$2("div")(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
6058
6061
|
var StyledCellIconWrapper = styled$2("div", {
|
|
6059
6062
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6060
|
-
})(templateObject_4$
|
|
6063
|
+
})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6061
6064
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
6062
6065
|
var spaces = getSpaces(props);
|
|
6063
6066
|
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 ");
|
|
@@ -6076,7 +6079,7 @@ var PrimaryText = styled$2("div", {
|
|
|
6076
6079
|
});
|
|
6077
6080
|
var SecondaryText = styled$2("span", {
|
|
6078
6081
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6079
|
-
})(templateObject_7$
|
|
6082
|
+
})(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6080
6083
|
var _a;
|
|
6081
6084
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6082
6085
|
var spaces = getSpaces(props);
|
|
@@ -6087,7 +6090,7 @@ var SecondaryText = styled$2("span", {
|
|
|
6087
6090
|
});
|
|
6088
6091
|
var TertiaryText = styled$2("span", {
|
|
6089
6092
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6090
|
-
})(templateObject_8$
|
|
6093
|
+
})(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6091
6094
|
var _a;
|
|
6092
6095
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6093
6096
|
var spaces = getSpaces(props);
|
|
@@ -6096,15 +6099,15 @@ var TertiaryText = styled$2("span", {
|
|
|
6096
6099
|
? ShouldWrap(tertiaryTextWrapLineCount)
|
|
6097
6100
|
: ShouldTruncate(), "\n ");
|
|
6098
6101
|
});
|
|
6099
|
-
var PrimaryTextComponentSlotBottomWrapper = styled$2("div")(templateObject_9$
|
|
6102
|
+
var PrimaryTextComponentSlotBottomWrapper = styled$2("div")(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6100
6103
|
var spaces = getSpaces(props);
|
|
6101
6104
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6102
6105
|
});
|
|
6103
|
-
var PrimaryTextComponentSlotRightWrapper = styled$2("div")(templateObject_10$
|
|
6106
|
+
var PrimaryTextComponentSlotRightWrapper = styled$2("div")(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6104
6107
|
var spaces = getSpaces(props);
|
|
6105
6108
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6106
6109
|
});
|
|
6107
|
-
var templateObject_1$
|
|
6110
|
+
var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$e, templateObject_7$b, templateObject_8$9, templateObject_9$6, templateObject_10$5;
|
|
6108
6111
|
|
|
6109
6112
|
var CellBasicContent = function (props) {
|
|
6110
6113
|
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;
|
|
@@ -6121,12 +6124,12 @@ var CellBasic = forwardRef(function (props, ref) {
|
|
|
6121
6124
|
var doNotForwardProps$u = ["horizontalAlign", "verticalAlign"];
|
|
6122
6125
|
var StyledCellComponentData = styled$2("td", {
|
|
6123
6126
|
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6124
|
-
})(templateObject_1$
|
|
6127
|
+
})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6125
6128
|
var spaces = getSpaces(props);
|
|
6126
6129
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6127
6130
|
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 ");
|
|
6128
6131
|
});
|
|
6129
|
-
var templateObject_1$
|
|
6132
|
+
var templateObject_1$R;
|
|
6130
6133
|
|
|
6131
6134
|
var CellComponent = forwardRef(function (props, _) {
|
|
6132
6135
|
var children = props.children;
|
|
@@ -6149,7 +6152,7 @@ var doNotForwardProps$t = [
|
|
|
6149
6152
|
];
|
|
6150
6153
|
var StyledSortingIcon = styled$2(Icon, {
|
|
6151
6154
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6152
|
-
})(templateObject_1$
|
|
6155
|
+
})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6153
6156
|
var _a;
|
|
6154
6157
|
var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
|
|
6155
6158
|
var spaces = getSpaces(props);
|
|
@@ -6173,11 +6176,11 @@ var StyledTableHeader$1 = styled$2("th", {
|
|
|
6173
6176
|
});
|
|
6174
6177
|
var StyledCellHeaderContainer = styled$2("div", {
|
|
6175
6178
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6176
|
-
})(templateObject_3$
|
|
6179
|
+
})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6177
6180
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
6178
6181
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
6179
6182
|
});
|
|
6180
|
-
var templateObject_1$
|
|
6183
|
+
var templateObject_1$Q, templateObject_2$y, templateObject_3$p;
|
|
6181
6184
|
|
|
6182
6185
|
var CellHeaderContent = function (props) {
|
|
6183
6186
|
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;
|
|
@@ -6197,7 +6200,7 @@ var CellHeader = forwardRef(function (props, ref) {
|
|
|
6197
6200
|
|
|
6198
6201
|
var small = function (props) {
|
|
6199
6202
|
var spaces = getSpaces(props);
|
|
6200
|
-
return css(templateObject_1$
|
|
6203
|
+
return css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px ", "px;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n "], ["\n height: ", "px;\n padding: ", "px ", "px;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontCapsXxxxs(props));
|
|
6201
6204
|
};
|
|
6202
6205
|
var medium = function (props) {
|
|
6203
6206
|
var spaces = getSpaces(props);
|
|
@@ -6206,11 +6209,11 @@ var medium = function (props) {
|
|
|
6206
6209
|
};
|
|
6207
6210
|
var rounded$2 = function (props) {
|
|
6208
6211
|
var corners = getCorners(props);
|
|
6209
|
-
return css(templateObject_3$
|
|
6212
|
+
return css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6210
6213
|
};
|
|
6211
6214
|
var square$2 = function (props) {
|
|
6212
6215
|
var corners = getCorners(props);
|
|
6213
|
-
return css(templateObject_4$
|
|
6216
|
+
return css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6214
6217
|
};
|
|
6215
6218
|
var success = function (props) {
|
|
6216
6219
|
return createStatusCss(props, "success");
|
|
@@ -6276,11 +6279,11 @@ var statusToCss = {
|
|
|
6276
6279
|
var doNotForwardProps$s = ["isRounded"];
|
|
6277
6280
|
var StyledChip = styled$2(Chip$1, {
|
|
6278
6281
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6279
|
-
})(templateObject_7$
|
|
6282
|
+
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6280
6283
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6281
6284
|
return 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));
|
|
6282
6285
|
});
|
|
6283
|
-
var templateObject_1$
|
|
6286
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$a;
|
|
6284
6287
|
|
|
6285
6288
|
/**
|
|
6286
6289
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6313,7 +6316,7 @@ var doNotForwardProps$r = [
|
|
|
6313
6316
|
];
|
|
6314
6317
|
var StyledHeaderTitle = styled$2("div", {
|
|
6315
6318
|
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6316
|
-
})(templateObject_1$
|
|
6319
|
+
})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
6317
6320
|
var _a;
|
|
6318
6321
|
var spaces = getSpaces(props);
|
|
6319
6322
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6324,7 +6327,7 @@ var StyledPopper = styled$2(Popper, {
|
|
|
6324
6327
|
shouldForwardProp: function (prop) {
|
|
6325
6328
|
return !doNotForwardProps$r.includes(prop) || prop === "anchorEl";
|
|
6326
6329
|
},
|
|
6327
|
-
})(templateObject_3$
|
|
6330
|
+
})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6328
6331
|
var _a;
|
|
6329
6332
|
var borders = getBorders(props);
|
|
6330
6333
|
var corners = getCorners(props);
|
|
@@ -6334,7 +6337,7 @@ var StyledPopper = styled$2(Popper, {
|
|
|
6334
6337
|
});
|
|
6335
6338
|
var StyledPaper$1 = styled$2(Paper, {
|
|
6336
6339
|
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6337
|
-
})(templateObject_4$
|
|
6340
|
+
})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6338
6341
|
var _a;
|
|
6339
6342
|
var spaces = getSpaces(props);
|
|
6340
6343
|
var borders = getBorders(props);
|
|
@@ -6347,7 +6350,7 @@ var StyledDropdownMenuHeader = styled$2("div")(templateObject_5$f || (templateOb
|
|
|
6347
6350
|
var spaces = getSpaces(props);
|
|
6348
6351
|
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 ");
|
|
6349
6352
|
});
|
|
6350
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$O, templateObject_2$w, templateObject_3$n, templateObject_4$k, templateObject_5$f;
|
|
6351
6354
|
|
|
6352
6355
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
6353
6356
|
// for the dropdownMenu's popper component
|
|
@@ -6413,21 +6416,21 @@ var inputDropdownStyles = function (props) {
|
|
|
6413
6416
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
6414
6417
|
*/
|
|
6415
6418
|
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");
|
|
6416
|
-
return css(templateObject_1$
|
|
6419
|
+
return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.hover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
|
|
6417
6420
|
};
|
|
6418
6421
|
var minimal$1 = function (props) {
|
|
6419
6422
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6420
6423
|
var spaces = getSpaces(props);
|
|
6421
6424
|
var semanticColors = getSemanticColors(props);
|
|
6422
|
-
return 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
|
|
6425
|
+
return css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n min-width: fit-content;\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n min-width: fit-content;\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
6423
6426
|
};
|
|
6424
6427
|
var square$1 = function (props) {
|
|
6425
6428
|
var corners = getCorners(props);
|
|
6426
|
-
return css(templateObject_3$
|
|
6429
|
+
return css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: fit-content;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: fit-content;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6427
6430
|
};
|
|
6428
6431
|
var rounded$1 = function (props) {
|
|
6429
6432
|
var corners = getCorners(props);
|
|
6430
|
-
return css(templateObject_4$
|
|
6433
|
+
return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: fit-content;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: fit-content;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6431
6434
|
};
|
|
6432
6435
|
var userInput = function (props) {
|
|
6433
6436
|
var _a, _b, _c, _d;
|
|
@@ -6456,12 +6459,12 @@ var isOpen = function (props) {
|
|
|
6456
6459
|
var applyIntentColor$1 = function (props, intent) {
|
|
6457
6460
|
var _a, _b, _c;
|
|
6458
6461
|
var borders = getBorders(props);
|
|
6459
|
-
return css(templateObject_7$
|
|
6462
|
+
return css(templateObject_7$9 || (templateObject_7$9 = __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);
|
|
6460
6463
|
};
|
|
6461
6464
|
var isDisabled = function (props) {
|
|
6462
6465
|
var _a, _b, _c, _d;
|
|
6463
6466
|
var semanticColors = getSemanticColors(props);
|
|
6464
|
-
return css(templateObject_8$
|
|
6467
|
+
return css(templateObject_8$8 || (templateObject_8$8 = __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);
|
|
6465
6468
|
};
|
|
6466
6469
|
/**
|
|
6467
6470
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6473,9 +6476,9 @@ var isDisabled = function (props) {
|
|
|
6473
6476
|
*/
|
|
6474
6477
|
var StyledInputDropdown = styled$2(Button, {
|
|
6475
6478
|
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6476
|
-
})(templateObject_10$
|
|
6479
|
+
})(templateObject_10$4 || (templateObject_10$4 = __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) {
|
|
6477
6480
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
|
|
6478
|
-
return css(templateObject_9$
|
|
6481
|
+
return css(templateObject_9$5 || (templateObject_9$5 = __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" &&
|
|
6479
6482
|
sdsStyle !== "minimal" &&
|
|
6480
6483
|
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6481
6484
|
sdsStyle !== "minimal" &&
|
|
@@ -6485,7 +6488,7 @@ var StyledInputDropdown = styled$2(Button, {
|
|
|
6485
6488
|
});
|
|
6486
6489
|
var StyledDetail = styled$2("span", {
|
|
6487
6490
|
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6488
|
-
})(templateObject_11$
|
|
6491
|
+
})(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6489
6492
|
var _a;
|
|
6490
6493
|
var spaces = getSpaces(props);
|
|
6491
6494
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6538,7 +6541,7 @@ function labelStyle(props) {
|
|
|
6538
6541
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6539
6542
|
return 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);
|
|
6540
6543
|
}
|
|
6541
|
-
var templateObject_1$
|
|
6544
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$5, templateObject_10$4, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2;
|
|
6542
6545
|
|
|
6543
6546
|
/**
|
|
6544
6547
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -6605,7 +6608,7 @@ var tagSizeS = function (props) {
|
|
|
6605
6608
|
var spaces = getSpaces(props);
|
|
6606
6609
|
var iconSizes = getIconSizes(props);
|
|
6607
6610
|
var semanticColors = getSemanticColors(props);
|
|
6608
|
-
return css(templateObject_1$
|
|
6611
|
+
return css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
6609
6612
|
};
|
|
6610
6613
|
var tagSizeL = function (props) {
|
|
6611
6614
|
var _a;
|
|
@@ -6619,14 +6622,14 @@ var rounded = function (props) {
|
|
|
6619
6622
|
var spaces = getSpaces(props);
|
|
6620
6623
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6621
6624
|
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;
|
|
6622
|
-
return css(templateObject_3$
|
|
6625
|
+
return css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.l, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6623
6626
|
};
|
|
6624
6627
|
var square = function (props) {
|
|
6625
6628
|
var corners = getCorners(props);
|
|
6626
6629
|
var spaces = getSpaces(props);
|
|
6627
6630
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6628
6631
|
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;
|
|
6629
|
-
return css(templateObject_4$
|
|
6632
|
+
return css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.m, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6630
6633
|
};
|
|
6631
6634
|
var withHover = function (props) {
|
|
6632
6635
|
var _a;
|
|
@@ -6713,15 +6716,15 @@ var doNotForwardProps$p = [
|
|
|
6713
6716
|
"tagColor",
|
|
6714
6717
|
"hover",
|
|
6715
6718
|
];
|
|
6716
|
-
var StyledTag$
|
|
6719
|
+
var StyledTag$3 = styled$2(Chip$1, {
|
|
6717
6720
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
6718
|
-
})(templateObject_8$
|
|
6721
|
+
})(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6719
6722
|
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;
|
|
6720
6723
|
var isRounded = sdsStyle === "rounded";
|
|
6721
6724
|
var type = sdsType || "primary";
|
|
6722
|
-
return css(templateObject_7$
|
|
6725
|
+
return css(templateObject_7$8 || (templateObject_7$8 = __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;");
|
|
6723
6726
|
});
|
|
6724
|
-
var templateObject_1$
|
|
6727
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
6725
6728
|
|
|
6726
6729
|
/**
|
|
6727
6730
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6732,23 +6735,23 @@ var templateObject_1$L, templateObject_2$u, templateObject_3$k, templateObject_4
|
|
|
6732
6735
|
*/
|
|
6733
6736
|
var Tag = function (props) {
|
|
6734
6737
|
var color = props.color;
|
|
6735
|
-
return jsx(StyledTag$
|
|
6738
|
+
return jsx(StyledTag$3, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
6736
6739
|
};
|
|
6737
6740
|
|
|
6738
|
-
var StyledTag$
|
|
6741
|
+
var StyledTag$2 = styled$2(Tag)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6739
6742
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
6740
6743
|
var spaces = getSpaces(props);
|
|
6741
6744
|
var iconSizes = getIconSizes(props);
|
|
6742
6745
|
var semanticColors = getSemanticColors(props);
|
|
6743
|
-
return css(templateObject_1$
|
|
6746
|
+
return css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.height, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed);
|
|
6744
6747
|
});
|
|
6745
|
-
var templateObject_1$
|
|
6748
|
+
var templateObject_1$L, templateObject_2$t;
|
|
6746
6749
|
|
|
6747
6750
|
/**
|
|
6748
6751
|
* @see https://mui.com/material-ui/react-chip/
|
|
6749
6752
|
*/
|
|
6750
6753
|
var TagFilter = function (props) {
|
|
6751
|
-
return (jsx(StyledTag$
|
|
6754
|
+
return (jsx(StyledTag$2, __assign({ role: "none presentation" }, props, { deleteIcon: jsx(Button, { "aria-label": "Delete Tag", icon: "XMark", sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon" }), color: "info" })));
|
|
6752
6755
|
};
|
|
6753
6756
|
|
|
6754
6757
|
var Chips = function (_a) {
|
|
@@ -6765,12 +6768,12 @@ var Chips = function (_a) {
|
|
|
6765
6768
|
}) }));
|
|
6766
6769
|
};
|
|
6767
6770
|
|
|
6768
|
-
var Wrapper$1 = styled$2("div")(templateObject_1$
|
|
6771
|
+
var Wrapper$1 = styled$2("div")(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
|
|
6769
6772
|
var StyledChipsWrapper = styled$2("div")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6770
6773
|
var spaces = getSpaces(props);
|
|
6771
6774
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
6772
6775
|
});
|
|
6773
|
-
var templateObject_1$
|
|
6776
|
+
var templateObject_1$K, templateObject_2$s;
|
|
6774
6777
|
|
|
6775
6778
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6776
6779
|
var ComplexFilter = function (_a) {
|
|
@@ -6898,9 +6901,9 @@ var StyledCard = styled$2(Card, {
|
|
|
6898
6901
|
var showDecorativeBorder = visualElementType === "image"
|
|
6899
6902
|
? boundingBox && decorativeBorder && imagePadding
|
|
6900
6903
|
: boundingBox && decorativeBorder;
|
|
6901
|
-
return css(templateObject_4$
|
|
6904
|
+
return css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: visible;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: visible;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, boundingBox && css(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n border: 1px solid ", ";\n background-color: ", ";\n "], ["\n border: 1px solid ", ";\n background-color: ", ";\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundPrimary), sdsType === "wide" &&
|
|
6902
6905
|
showDecorativeBorder && 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" &&
|
|
6903
|
-
showDecorativeBorder && css(templateObject_3$
|
|
6906
|
+
showDecorativeBorder && css(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n border-top: 4px solid ", ";\n "], ["\n border-top: 4px solid ", ";\n "])), (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border));
|
|
6904
6907
|
});
|
|
6905
6908
|
var StyledCardActionArea = styled$2(Button, {
|
|
6906
6909
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
@@ -6920,18 +6923,18 @@ var StyledCardActionArea = styled$2(Button, {
|
|
|
6920
6923
|
});
|
|
6921
6924
|
var StyledIconMediaWrapper = styled$2("div", {
|
|
6922
6925
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6923
|
-
})(templateObject_10$
|
|
6926
|
+
})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6924
6927
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
6925
6928
|
var spaces = getSpaces(props);
|
|
6926
|
-
return css(templateObject_9$
|
|
6927
|
-
? css(templateObject_7$
|
|
6929
|
+
return css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), boundingBox
|
|
6930
|
+
? css(templateObject_7$7 || (templateObject_7$7 = __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) : css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n padding-right: ", "px;\n "], ["\n padding-right: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6928
6931
|
});
|
|
6929
6932
|
var StyledCardContent = styled$2("div", {
|
|
6930
6933
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6931
6934
|
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6932
6935
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
6933
6936
|
var spaces = getSpaces(props);
|
|
6934
|
-
return css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "])), boundingBox && css(templateObject_11$
|
|
6937
|
+
return css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "])), boundingBox && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6935
6938
|
});
|
|
6936
6939
|
var StyledContentCardBody = styled$2(CardContent, {
|
|
6937
6940
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
@@ -6942,7 +6945,7 @@ var StyledContentCardBody = styled$2(CardContent, {
|
|
|
6942
6945
|
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 ");
|
|
6943
6946
|
});
|
|
6944
6947
|
var StyledCardContentAligner = styled$2("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"])));
|
|
6945
|
-
var templateObject_1$
|
|
6948
|
+
var templateObject_1$J, templateObject_2$r, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2;
|
|
6946
6949
|
|
|
6947
6950
|
var doNotForwardProps$n = [
|
|
6948
6951
|
"visualElement",
|
|
@@ -6957,7 +6960,7 @@ var doNotForwardProps$n = [
|
|
|
6957
6960
|
];
|
|
6958
6961
|
var StyledTitleWrapper = styled$3("div", {
|
|
6959
6962
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6960
|
-
})(templateObject_1$
|
|
6963
|
+
})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6961
6964
|
var spaces = getSpaces(props);
|
|
6962
6965
|
return "\n display: flex;\n flex-direction: column;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6963
6966
|
});
|
|
@@ -6970,14 +6973,14 @@ var StyledOverlineText = styled$3("p", {
|
|
|
6970
6973
|
});
|
|
6971
6974
|
var StyledTitleText = styled$3("p", {
|
|
6972
6975
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6973
|
-
})(templateObject_3$
|
|
6976
|
+
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderXl, function (props) {
|
|
6974
6977
|
var _a;
|
|
6975
6978
|
var semanticColors = getSemanticColors(props);
|
|
6976
6979
|
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 ");
|
|
6977
6980
|
});
|
|
6978
6981
|
var StyledSubtitleText = styled$3("p", {
|
|
6979
6982
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6980
|
-
})(templateObject_4$
|
|
6983
|
+
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
|
|
6981
6984
|
var _a;
|
|
6982
6985
|
var semanticColors = getSemanticColors(props);
|
|
6983
6986
|
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 ");
|
|
@@ -6990,7 +6993,7 @@ var StyledMetadataText = styled$3("p", {
|
|
|
6990
6993
|
var spaces = getSpaces(props);
|
|
6991
6994
|
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 ");
|
|
6992
6995
|
});
|
|
6993
|
-
var templateObject_1$
|
|
6996
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$j, templateObject_4$g, templateObject_5$b;
|
|
6994
6997
|
|
|
6995
6998
|
/**
|
|
6996
6999
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7004,12 +7007,12 @@ var ContentCardTitle = forwardRef(function ContentCardTitle(props, ref) {
|
|
|
7004
7007
|
var doNotForwardProps$m = ["buttonsPosition"];
|
|
7005
7008
|
var StyledCardActions = styled$2(CardActions, {
|
|
7006
7009
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7007
|
-
})(templateObject_1$
|
|
7010
|
+
})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7008
7011
|
var _a = props.buttonsPosition, buttonsPosition = _a === void 0 ? "left" : _a;
|
|
7009
7012
|
var spaces = getSpaces(props);
|
|
7010
7013
|
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 ");
|
|
7011
7014
|
});
|
|
7012
|
-
var templateObject_1$
|
|
7015
|
+
var templateObject_1$H;
|
|
7013
7016
|
|
|
7014
7017
|
var isButtonElement = function (child) {
|
|
7015
7018
|
if (React__default.isValidElement(child) && child.type === Button) {
|
|
@@ -7070,22 +7073,22 @@ var doNotForwardProps$l = [
|
|
|
7070
7073
|
];
|
|
7071
7074
|
var StyledImageMediaWrapper = styled$3("div", {
|
|
7072
7075
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
7073
|
-
})(templateObject_9$
|
|
7076
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7074
7077
|
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;
|
|
7075
7078
|
var spaces = getSpaces(props);
|
|
7076
|
-
return css$2(templateObject_8$
|
|
7079
|
+
return css$2(templateObject_8$5 || (templateObject_8$5 = __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
|
|
7077
7080
|
? imagePadding
|
|
7078
|
-
? css$2(templateObject_1$
|
|
7081
|
+
? css$2(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n padding: ", "px;\n ", "\n "], ["\n padding: ", "px;\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, imagePosition === "left"
|
|
7079
7082
|
? "padding-right: 0;"
|
|
7080
7083
|
: "padding-left: 0;") : css$2(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7081
|
-
: css$2(templateObject_3$
|
|
7084
|
+
: css$2(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
|
|
7082
7085
|
? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
|
|
7083
|
-
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && css$2(templateObject_7$
|
|
7086
|
+
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && css$2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
|
|
7084
7087
|
? imagePadding
|
|
7085
|
-
? css$2(templateObject_4$
|
|
7088
|
+
? css$2(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", "px;\n padding-bottom: 0;\n "], ["\n padding: ", "px;\n padding-bottom: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl) : css$2(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7086
7089
|
: css$2(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)));
|
|
7087
7090
|
});
|
|
7088
|
-
var templateObject_1$
|
|
7091
|
+
var templateObject_1$G, templateObject_2$p, templateObject_3$i, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$6, templateObject_8$5, templateObject_9$3;
|
|
7089
7092
|
|
|
7090
7093
|
/**
|
|
7091
7094
|
* @see https://mui.com/material-ui/api/card-media/
|
|
@@ -7201,7 +7204,7 @@ var DialogContext = createContext({ sdsSize: "m" });
|
|
|
7201
7204
|
var doNotForwardProps$k = ["sdsSize"];
|
|
7202
7205
|
var StyledPaper = styled$2(Paper, {
|
|
7203
7206
|
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7204
|
-
})(templateObject_1$
|
|
7207
|
+
})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
|
|
7205
7208
|
var _a;
|
|
7206
7209
|
var spaces = getSpaces(props);
|
|
7207
7210
|
var corners = getCorners(props);
|
|
@@ -7232,7 +7235,7 @@ function paperDimensions(props) {
|
|
|
7232
7235
|
var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
|
|
7233
7236
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
7234
7237
|
}
|
|
7235
|
-
var templateObject_1$
|
|
7238
|
+
var templateObject_1$F;
|
|
7236
7239
|
|
|
7237
7240
|
/**
|
|
7238
7241
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -7264,12 +7267,12 @@ var Dialog = forwardRef(function Dialog(props, ref) {
|
|
|
7264
7267
|
var doNotForwardProps$j = ["buttonPosition"];
|
|
7265
7268
|
var StyledDialogActions = styled$2(DialogActions$1, {
|
|
7266
7269
|
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7267
|
-
})(templateObject_1$
|
|
7270
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
7268
7271
|
var spaces = getSpaces(props);
|
|
7269
7272
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
7270
7273
|
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(dialogActionsClasses.spacing, " > :not(:first-of-type) {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n ");
|
|
7271
7274
|
});
|
|
7272
|
-
var templateObject_1$
|
|
7275
|
+
var templateObject_1$E;
|
|
7273
7276
|
|
|
7274
7277
|
/**
|
|
7275
7278
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7278,8 +7281,8 @@ var DialogActions = forwardRef(function DialogActions(props, ref) {
|
|
|
7278
7281
|
return jsx(StyledDialogActions, __assign({ ref: ref }, props));
|
|
7279
7282
|
});
|
|
7280
7283
|
|
|
7281
|
-
var StyledDialogContent = styled$2(DialogContent)(templateObject_1$
|
|
7282
|
-
var templateObject_1$
|
|
7284
|
+
var StyledDialogContent = styled$2(DialogContent)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
7285
|
+
var templateObject_1$D;
|
|
7283
7286
|
|
|
7284
7287
|
var index = forwardRef(
|
|
7285
7288
|
/**
|
|
@@ -7289,11 +7292,11 @@ function DialogContent(props, ref) {
|
|
|
7289
7292
|
return jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
7290
7293
|
});
|
|
7291
7294
|
|
|
7292
|
-
var StyledButton$1 = styled$2(Button)(templateObject_1$
|
|
7295
|
+
var StyledButton$1 = styled$2(Button)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
7293
7296
|
var spaces = getSpaces(props);
|
|
7294
7297
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
7295
7298
|
});
|
|
7296
|
-
var templateObject_1$
|
|
7299
|
+
var templateObject_1$C;
|
|
7297
7300
|
|
|
7298
7301
|
var CloseButton = forwardRef(function CloseButton(props, ref) {
|
|
7299
7302
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
@@ -7309,7 +7312,7 @@ var CloseButton = forwardRef(function CloseButton(props, ref) {
|
|
|
7309
7312
|
} }));
|
|
7310
7313
|
});
|
|
7311
7314
|
|
|
7312
|
-
var StyledDialogTitle = styled$2(DialogTitle$1)(templateObject_1$
|
|
7315
|
+
var StyledDialogTitle = styled$2(DialogTitle$1)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n padding: 0;\n ", "\n"], ["\n padding: 0;\n ", "\n"])), function (props) {
|
|
7313
7316
|
var spaces = getSpaces(props);
|
|
7314
7317
|
return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
|
|
7315
7318
|
});
|
|
@@ -7318,18 +7321,18 @@ var Title = styled$2(Typography)(templateObject_2$o || (templateObject_2$o = __m
|
|
|
7318
7321
|
var semanticColors = getSemanticColors(props);
|
|
7319
7322
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
|
|
7320
7323
|
});
|
|
7321
|
-
var Subtitle = styled$2(Typography)(templateObject_3$
|
|
7324
|
+
var Subtitle = styled$2(Typography)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7322
7325
|
var _a;
|
|
7323
7326
|
var semanticColors = getSemanticColors(props);
|
|
7324
7327
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
7325
7328
|
});
|
|
7326
|
-
var Overline = styled$2(Typography)(templateObject_4$
|
|
7329
|
+
var Overline = styled$2(Typography)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7327
7330
|
var _a;
|
|
7328
7331
|
var semanticColors = getSemanticColors(props);
|
|
7329
7332
|
var spaces = getSpaces(props);
|
|
7330
7333
|
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 ");
|
|
7331
7334
|
});
|
|
7332
|
-
var templateObject_1$
|
|
7335
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$h, templateObject_4$e;
|
|
7333
7336
|
|
|
7334
7337
|
/**
|
|
7335
7338
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -7342,7 +7345,7 @@ var DialogTitle = forwardRef(function DialogTitle(props, ref) {
|
|
|
7342
7345
|
var doNotForwardProps$i = ["buttonPosition"];
|
|
7343
7346
|
var StyledButtonsWrapper = styled$2("div", {
|
|
7344
7347
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7345
|
-
})(templateObject_1$
|
|
7348
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7346
7349
|
var buttonPosition = props.buttonPosition;
|
|
7347
7350
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
7348
7351
|
});
|
|
@@ -7352,7 +7355,7 @@ var StyledButton = styled$2(Button, {
|
|
|
7352
7355
|
var spaces = getSpaces(props);
|
|
7353
7356
|
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 ");
|
|
7354
7357
|
});
|
|
7355
|
-
var templateObject_1$
|
|
7358
|
+
var templateObject_1$A, templateObject_2$n;
|
|
7356
7359
|
|
|
7357
7360
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
7358
7361
|
var Dropdown = function (props) {
|
|
@@ -7488,7 +7491,7 @@ var intentToColor$1 = {
|
|
|
7488
7491
|
notice: "notice",
|
|
7489
7492
|
positive: "positive",
|
|
7490
7493
|
};
|
|
7491
|
-
var StyledIcon = styled$2(Icon)(templateObject_1$
|
|
7494
|
+
var StyledIcon = styled$2(Icon)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7492
7495
|
var iconSizes = getIconSizes(props);
|
|
7493
7496
|
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 ");
|
|
7494
7497
|
});
|
|
@@ -7500,13 +7503,13 @@ var StyledCheckboxDefaultIcon = styled$2("span")(templateObject_2$m || (template
|
|
|
7500
7503
|
var borderColor = intentToColor$1[intent];
|
|
7501
7504
|
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 ");
|
|
7502
7505
|
});
|
|
7503
|
-
var StyledCheckboxCheckedIcon = styled$2("div")(templateObject_3$
|
|
7506
|
+
var StyledCheckboxCheckedIcon = styled$2("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7504
7507
|
var _a, _b;
|
|
7505
7508
|
var iconSizes = getIconSizes(props);
|
|
7506
7509
|
var semanticColors = getSemanticColors(props);
|
|
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.
|
|
7510
|
+
return "\n display: flex;\n align-items: center;\n justify-content: center;\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n border-radius: 2px;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, ";\n\n ").concat(StyledIcon, " {\n fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, ";\n }\n\n &:hover {\n background-color: red;\n }\n ");
|
|
7508
7511
|
});
|
|
7509
|
-
var StyledCheckbox = styled$2(Checkbox)(templateObject_4$
|
|
7512
|
+
var StyledCheckbox = styled$2(Checkbox)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7510
7513
|
var spaces = getSpaces(props);
|
|
7511
7514
|
return "\n &.".concat(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 ");
|
|
7512
7515
|
});
|
|
@@ -7515,7 +7518,7 @@ var StyledCheckboxLabel = styled$2("span")(templateObject_6$8 || (templateObject
|
|
|
7515
7518
|
var spaces = getSpaces(props);
|
|
7516
7519
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7517
7520
|
});
|
|
7518
|
-
var StyledCheckboxCaption = styled$2("span")(templateObject_7$
|
|
7521
|
+
var StyledCheckboxCaption = styled$2("span")(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7519
7522
|
var _a;
|
|
7520
7523
|
var semanticColors = getSemanticColors(props);
|
|
7521
7524
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7526,7 +7529,7 @@ var disabledStyles$1 = function (props) {
|
|
|
7526
7529
|
var borders = getBorders(props);
|
|
7527
7530
|
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 ");
|
|
7528
7531
|
};
|
|
7529
|
-
var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$
|
|
7532
|
+
var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7530
7533
|
var _a, _b, _c, _d;
|
|
7531
7534
|
var disabled = props.disabled;
|
|
7532
7535
|
var spaces = getSpaces(props);
|
|
@@ -7534,7 +7537,7 @@ var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$3 ||
|
|
|
7534
7537
|
var borders = getBorders(props);
|
|
7535
7538
|
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 ");
|
|
7536
7539
|
});
|
|
7537
|
-
var templateObject_1$
|
|
7540
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$4;
|
|
7538
7541
|
|
|
7539
7542
|
/**
|
|
7540
7543
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -7569,7 +7572,7 @@ var intentToColor = {
|
|
|
7569
7572
|
notice: "notice",
|
|
7570
7573
|
positive: "positive",
|
|
7571
7574
|
};
|
|
7572
|
-
var StyledRadioDot = styled$2("span")(templateObject_1$
|
|
7575
|
+
var StyledRadioDot = styled$2("span")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7573
7576
|
var _a;
|
|
7574
7577
|
var semanticColors = getSemanticColors(props);
|
|
7575
7578
|
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 ");
|
|
@@ -7582,13 +7585,13 @@ var StyledRadioDefaultIcon = styled$2("span")(templateObject_2$l || (templateObj
|
|
|
7582
7585
|
var borderColor = intentToColor[intent];
|
|
7583
7586
|
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 ");
|
|
7584
7587
|
});
|
|
7585
|
-
var StyledRadioCheckedIcon = styled$2("div")(templateObject_3$
|
|
7588
|
+
var StyledRadioCheckedIcon = styled$2("div")(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7586
7589
|
var _a;
|
|
7587
7590
|
var iconSizes = getIconSizes(props);
|
|
7588
7591
|
var semanticColors = getSemanticColors(props);
|
|
7589
7592
|
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 ");
|
|
7590
7593
|
});
|
|
7591
|
-
var StyledRadioButton = styled$2(Radio)(templateObject_4$
|
|
7594
|
+
var StyledRadioButton = styled$2(Radio)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7592
7595
|
var spaces = getSpaces(props);
|
|
7593
7596
|
return "\n &.".concat(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 ");
|
|
7594
7597
|
});
|
|
@@ -7597,7 +7600,7 @@ var StyledRadioLabel = styled$2("span")(templateObject_6$7 || (templateObject_6$
|
|
|
7597
7600
|
var spaces = getSpaces(props);
|
|
7598
7601
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7599
7602
|
});
|
|
7600
|
-
var StyledRadioCaption = styled$2("span")(templateObject_7$
|
|
7603
|
+
var StyledRadioCaption = styled$2("span")(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7601
7604
|
var _a;
|
|
7602
7605
|
var semanticColors = getSemanticColors(props);
|
|
7603
7606
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7607,14 +7610,14 @@ var disabledStyles = function (props) {
|
|
|
7607
7610
|
var semanticColors = getSemanticColors(props);
|
|
7608
7611
|
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 ");
|
|
7609
7612
|
};
|
|
7610
|
-
var StyledFormControlLabel = styled$2(FormControlLabel)(templateObject_8$
|
|
7613
|
+
var StyledFormControlLabel = styled$2(FormControlLabel)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7611
7614
|
var _a, _b, _c, _d;
|
|
7612
7615
|
var disabled = props.disabled;
|
|
7613
7616
|
var spaces = getSpaces(props);
|
|
7614
7617
|
var semanticColors = getSemanticColors(props);
|
|
7615
7618
|
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 ");
|
|
7616
7619
|
});
|
|
7617
|
-
var templateObject_1$
|
|
7620
|
+
var templateObject_1$y, templateObject_2$l, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$4, templateObject_8$3;
|
|
7618
7621
|
|
|
7619
7622
|
/**
|
|
7620
7623
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -7660,11 +7663,11 @@ var disabledSlider = function (props) {
|
|
|
7660
7663
|
var semanticColors = getSemanticColors(props);
|
|
7661
7664
|
return "\n .".concat(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(sliderClasses.thumb, ".").concat(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(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(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(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 ");
|
|
7662
7665
|
};
|
|
7663
|
-
var StyledSlider = styled$2(Slider)(templateObject_1$
|
|
7666
|
+
var StyledSlider = styled$2(Slider)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7664
7667
|
var disabled = props.disabled;
|
|
7665
7668
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
7666
7669
|
});
|
|
7667
|
-
var templateObject_1$
|
|
7670
|
+
var templateObject_1$x;
|
|
7668
7671
|
|
|
7669
7672
|
/**
|
|
7670
7673
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -7679,7 +7682,7 @@ var applyIntentColor = function (props, intent) {
|
|
|
7679
7682
|
var _a, _b, _c, _d;
|
|
7680
7683
|
var borders = getBorders(props);
|
|
7681
7684
|
var semanticColors = getSemanticColors(props);
|
|
7682
|
-
return css(templateObject_1$
|
|
7685
|
+
return css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
|
|
7683
7686
|
};
|
|
7684
7687
|
var disabledStyled$1 = function (props) {
|
|
7685
7688
|
var _a, _b, _c;
|
|
@@ -7689,9 +7692,9 @@ var disabledStyled$1 = function (props) {
|
|
|
7689
7692
|
};
|
|
7690
7693
|
var textArea = function (props) {
|
|
7691
7694
|
var spaces = getSpaces(props);
|
|
7692
|
-
return css(templateObject_3$
|
|
7695
|
+
return css(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "], ["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "])), outlinedInputClasses.multiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, 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);
|
|
7693
7696
|
};
|
|
7694
|
-
var StyledLabel$1 = styled$2("label")(templateObject_4$
|
|
7697
|
+
var StyledLabel$1 = styled$2("label")(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7695
7698
|
var spaces = getSpaces(props);
|
|
7696
7699
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7697
7700
|
});
|
|
@@ -7700,14 +7703,15 @@ var StyledInputBase = styled$2(TextField, {
|
|
|
7700
7703
|
return !sdsPropNames$1.includes(prop.toString());
|
|
7701
7704
|
},
|
|
7702
7705
|
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7703
|
-
var _a, _b, _c;
|
|
7706
|
+
var _a, _b, _c, _d;
|
|
7704
7707
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
7705
7708
|
var spaces = getSpaces(props);
|
|
7706
7709
|
var borders = getBorders(props);
|
|
7707
7710
|
var corners = getCorners(props);
|
|
7708
|
-
|
|
7711
|
+
var semanticColors = getSemanticColors(props);
|
|
7712
|
+
return css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.root, outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, 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, outlinedInputClasses.input, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textTertiary, outlinedInputClasses.input, focusVisibleA11yStyle(props), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
|
|
7709
7713
|
});
|
|
7710
|
-
var templateObject_1$
|
|
7714
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$e, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
7711
7715
|
|
|
7712
7716
|
/**
|
|
7713
7717
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -7768,11 +7772,11 @@ var toggleOff = function (props) {
|
|
|
7768
7772
|
: (_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(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(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(switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
|
|
7769
7773
|
"&: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(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 ");
|
|
7770
7774
|
};
|
|
7771
|
-
var Toggle = styled$2(Switch)(templateObject_1$
|
|
7775
|
+
var Toggle = styled$2(Switch)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7772
7776
|
var checked = props.checked;
|
|
7773
7777
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
7774
7778
|
});
|
|
7775
|
-
var templateObject_1$
|
|
7779
|
+
var templateObject_1$v;
|
|
7776
7780
|
|
|
7777
7781
|
/**
|
|
7778
7782
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -7794,7 +7798,7 @@ var doNotForwardProps$h = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
|
7794
7798
|
var defaultStyle = function (props) {
|
|
7795
7799
|
var _a, _b, _c, _d;
|
|
7796
7800
|
var semanticColors = getSemanticColors(props);
|
|
7797
|
-
return css(templateObject_1$
|
|
7801
|
+
return css(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "], ["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
|
|
7798
7802
|
};
|
|
7799
7803
|
var dashedStyle = function () {
|
|
7800
7804
|
return 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 "])));
|
|
@@ -7809,11 +7813,11 @@ var StyledLink = styled$2(Link$1, {
|
|
|
7809
7813
|
shouldForwardProp: function (prop) {
|
|
7810
7814
|
return !doNotForwardProps$h.includes(prop.toString());
|
|
7811
7815
|
},
|
|
7812
|
-
})(templateObject_4$
|
|
7816
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
7813
7817
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7814
|
-
return css(templateObject_3$
|
|
7818
|
+
return css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
|
|
7815
7819
|
});
|
|
7816
|
-
var templateObject_1$
|
|
7820
|
+
var templateObject_1$u, templateObject_2$j, templateObject_3$d, templateObject_4$a;
|
|
7817
7821
|
|
|
7818
7822
|
/**
|
|
7819
7823
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -7831,7 +7835,7 @@ var Link = forwardRef(function (props, ref) {
|
|
|
7831
7835
|
var doNotForwardProps$g = ["marginBottom", "ordered"];
|
|
7832
7836
|
var StyledList = styled$2(List$1, {
|
|
7833
7837
|
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
7834
|
-
})(templateObject_1$
|
|
7838
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"], ["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"])), propsToMarginBottom$1, function (props) {
|
|
7835
7839
|
if (!props.ordered)
|
|
7836
7840
|
return "";
|
|
7837
7841
|
return "\n counter-reset: section;\n ";
|
|
@@ -7849,7 +7853,7 @@ function propsToMarginBottom$1(props) {
|
|
|
7849
7853
|
var marginBottom = props.marginBottom;
|
|
7850
7854
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
7851
7855
|
}
|
|
7852
|
-
var templateObject_1$
|
|
7856
|
+
var templateObject_1$t;
|
|
7853
7857
|
|
|
7854
7858
|
/**
|
|
7855
7859
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7869,7 +7873,7 @@ var fontBodyXxxs = fontBody("xxxs");
|
|
|
7869
7873
|
var doNotForwardProps$f = ["marginBottom", "fontSize", "ordered"];
|
|
7870
7874
|
var StyledListItem = styled$2(ListItem$1, {
|
|
7871
7875
|
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
7872
|
-
})(templateObject_1$
|
|
7876
|
+
})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", "\n ", "\n\n padding: 0;\n\n ", "\n\n &:before {\n display: inline-block;\n\n ", "\n }\n"], ["\n ", "\n ", "\n\n padding: 0;\n\n ", "\n\n &:before {\n display: inline-block;\n\n ", "\n }\n"])), propsToMarginBottom, propsToFontBody, function (props) {
|
|
7873
7877
|
var ordered = props.ordered;
|
|
7874
7878
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
7875
7879
|
}, function (props) {
|
|
@@ -7904,7 +7908,7 @@ var ListItemLabel = styled$2("span")(templateObject_2$i || (templateObject_2$i =
|
|
|
7904
7908
|
var fontWeights = getFontWeights(props);
|
|
7905
7909
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
7906
7910
|
});
|
|
7907
|
-
var templateObject_1$
|
|
7911
|
+
var templateObject_1$s, templateObject_2$i;
|
|
7908
7912
|
|
|
7909
7913
|
/**
|
|
7910
7914
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7914,11 +7918,11 @@ var ListItem = function (props) {
|
|
|
7914
7918
|
};
|
|
7915
7919
|
|
|
7916
7920
|
var fontHeaderM = fontHeader("m");
|
|
7917
|
-
var StyledListSubheader = styled$2(ListSubheader$1)(templateObject_1$
|
|
7921
|
+
var StyledListSubheader = styled$2(ListSubheader$1)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n\n line-height: unset;\n color: unset;\n\n ", "\n }\n"], ["\n &.MuiListSubheader-root {\n ", "\n\n line-height: unset;\n color: unset;\n\n ", "\n }\n"])), fontHeaderM, function (props) {
|
|
7918
7922
|
var spaces = getSpaces(props);
|
|
7919
7923
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7920
7924
|
});
|
|
7921
|
-
var templateObject_1$
|
|
7925
|
+
var templateObject_1$r;
|
|
7922
7926
|
|
|
7923
7927
|
/**
|
|
7924
7928
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7927,7 +7931,7 @@ var ListSubheader = function (props) {
|
|
|
7927
7931
|
return jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
7928
7932
|
};
|
|
7929
7933
|
|
|
7930
|
-
var StyledText = styled$2("span")(templateObject_1$
|
|
7934
|
+
var StyledText = styled$2("span")(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7931
7935
|
var spaces = getSpaces(props);
|
|
7932
7936
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7933
7937
|
});
|
|
@@ -7941,7 +7945,7 @@ var tag = function (props) {
|
|
|
7941
7945
|
var _a, _b, _c;
|
|
7942
7946
|
var corners = getCorners(props);
|
|
7943
7947
|
var semanticColors = getSemanticColors(props);
|
|
7944
|
-
return css(templateObject_3$
|
|
7948
|
+
return css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
|
|
7945
7949
|
};
|
|
7946
7950
|
var doNotForwardProps$e = ["sdsStyle"];
|
|
7947
7951
|
var StyledLoadingIndicator = styled$2("div", {
|
|
@@ -7949,23 +7953,23 @@ var StyledLoadingIndicator = styled$2("div", {
|
|
|
7949
7953
|
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7950
7954
|
var sdsStyle = props.sdsStyle;
|
|
7951
7955
|
var spaces = getSpaces(props);
|
|
7952
|
-
var style = css(templateObject_4$
|
|
7956
|
+
var style = css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "], ["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
7953
7957
|
return 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));
|
|
7954
7958
|
});
|
|
7955
|
-
var templateObject_1$
|
|
7959
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$9, templateObject_5$6, templateObject_6$5;
|
|
7956
7960
|
|
|
7957
7961
|
var LoadingIndicator = function (_a) {
|
|
7958
7962
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
7959
7963
|
return (jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsx(Icon, { sdsIcon: "Loading", sdsSize: "l" }), jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
|
|
7960
7964
|
};
|
|
7961
7965
|
|
|
7962
|
-
var StyledMenu = styled$2(Menu$1)(templateObject_1$
|
|
7966
|
+
var StyledMenu = styled$2(Menu$1)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"], ["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"])), menuClasses.paper, function (props) {
|
|
7963
7967
|
var _a;
|
|
7964
7968
|
var spaces = getSpaces(props);
|
|
7965
7969
|
var semanticColors = getSemanticColors(props);
|
|
7966
7970
|
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 ");
|
|
7967
7971
|
});
|
|
7968
|
-
var templateObject_1$
|
|
7972
|
+
var templateObject_1$p;
|
|
7969
7973
|
|
|
7970
7974
|
var ANCHOR_ORIGIN = {
|
|
7971
7975
|
horizontal: "center",
|
|
@@ -7982,7 +7986,7 @@ var Menu = function (props) {
|
|
|
7982
7986
|
return (jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
7983
7987
|
};
|
|
7984
7988
|
|
|
7985
|
-
var StyledMenuItem = styled$2(MenuItem)(templateObject_1$
|
|
7989
|
+
var StyledMenuItem = styled$2(MenuItem)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
7986
7990
|
var doNotForwardProps$d = ["search", "InputBaseProps", "keepSearchOnSelect"];
|
|
7987
7991
|
// (thuang): Casting the type to `Autocomplete`
|
|
7988
7992
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
@@ -7994,7 +7998,7 @@ var StyledAutocomplete = styled$2(Autocomplete$1, {
|
|
|
7994
7998
|
});
|
|
7995
7999
|
var InputBaseWrapper = styled$2("div", {
|
|
7996
8000
|
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
7997
|
-
})(templateObject_3$
|
|
8001
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7998
8002
|
var search = props.search;
|
|
7999
8003
|
if (!search) {
|
|
8000
8004
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -8007,11 +8011,11 @@ var InputBaseWrapper = styled$2("div", {
|
|
|
8007
8011
|
});
|
|
8008
8012
|
var StyledMenuInputSearch = styled$2(InputSearch, {
|
|
8009
8013
|
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
8010
|
-
})(templateObject_4$
|
|
8014
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"], ["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"])), inputBaseClasses.root, function (_a) {
|
|
8011
8015
|
var search = _a.search;
|
|
8012
8016
|
return (search ? "auto" : "transparent");
|
|
8013
8017
|
});
|
|
8014
|
-
var templateObject_1$
|
|
8018
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$8;
|
|
8015
8019
|
|
|
8016
8020
|
/**
|
|
8017
8021
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -8065,13 +8069,13 @@ var MenuSelect = function (props) {
|
|
|
8065
8069
|
var doNotForwardProps$c = ["hasInvertedStyle", "isNarrow"];
|
|
8066
8070
|
var StyledFooter = styled$2("footer", {
|
|
8067
8071
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8068
|
-
})(templateObject_3$
|
|
8072
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8069
8073
|
var isNarrow = props.isNarrow;
|
|
8070
8074
|
var spaces = getSpaces(props);
|
|
8071
8075
|
var semanticColors = getSemanticColors(props);
|
|
8072
8076
|
return css$2(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
8077
|
? 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 && css$2(templateObject_1$
|
|
8078
|
+
: 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 && css$2(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n border-top: 1px solid\n ", ";\n padding: ", "px ", "px ", "px ", "px;\n "], ["\n border-top: 1px solid\n ", ";\n padding: ", "px ", "px ", "px ", "px;\n "])), props.hasInvertedStyle
|
|
8075
8079
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
8076
8080
|
: 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
8081
|
});
|
|
@@ -8079,7 +8083,7 @@ var StyledLogoWrapper$1 = styled$2("div", {
|
|
|
8079
8083
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8080
8084
|
})(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
8085
|
var spaces = getSpaces(props);
|
|
8082
|
-
return css$2(templateObject_4$
|
|
8086
|
+
return css$2(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n\n a {\n text-decoration: none;\n }\n\n .MuiChip-root {\n margin: 0;\n }\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n\n a {\n text-decoration: none;\n }\n\n .MuiChip-root {\n margin: 0;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s);
|
|
8083
8087
|
}, fontHeader("l"), fontHeader("l", /* isNarrow */ true), function (props) {
|
|
8084
8088
|
var semanticColors = getSemanticColors(props);
|
|
8085
8089
|
return css$2(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n "], ["\n color: ", ";\n white-space: nowrap;\n "])), props.hasInvertedStyle
|
|
@@ -8088,10 +8092,10 @@ var StyledLogoWrapper$1 = styled$2("div", {
|
|
|
8088
8092
|
});
|
|
8089
8093
|
var StyledNavSection = styled$2("div", {
|
|
8090
8094
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8091
|
-
})(templateObject_9$
|
|
8095
|
+
})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8092
8096
|
var isNarrow = props.isNarrow;
|
|
8093
8097
|
var spaces = getSpaces(props);
|
|
8094
|
-
return css$2(templateObject_8$
|
|
8098
|
+
return css$2(templateObject_8$2 || (templateObject_8$2 = __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 && css$2(templateObject_7$3 || (templateObject_7$3 = __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
8099
|
});
|
|
8096
8100
|
var StyledTopSection = styled$2("div", {
|
|
8097
8101
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
@@ -8099,22 +8103,22 @@ var StyledTopSection = styled$2("div", {
|
|
|
8099
8103
|
var isNarrow = props.isNarrow;
|
|
8100
8104
|
var semanticColors = getSemanticColors(props);
|
|
8101
8105
|
var spaces = getSpaces(props);
|
|
8102
|
-
return css$2(templateObject_11$
|
|
8106
|
+
return css$2(templateObject_11$2 || (templateObject_11$2 = __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
8107
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
8104
8108
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, props.hasInvertedStyle
|
|
8105
8109
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
8106
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && css$2(templateObject_10$
|
|
8110
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && css$2(templateObject_10$2 || (templateObject_10$2 = __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
8111
|
});
|
|
8108
8112
|
var StyledLinkSection = styled$2("div", {
|
|
8109
8113
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8110
8114
|
})(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
8115
|
var isNarrow = props.isNarrow;
|
|
8112
8116
|
var spaces = getSpaces(props);
|
|
8113
|
-
return css$2(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.
|
|
8117
|
+
return css$2(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n gap: ", "px;\n\n ", "\n "], ["\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && css$2(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
8118
|
});
|
|
8115
|
-
var StyledMobileLinkRow = styled$2.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) {
|
|
8119
|
+
var StyledMobileLinkRow = styled$2.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n\n ", "\n"])), function (props) {
|
|
8116
8120
|
var spaces = getSpaces(props);
|
|
8117
|
-
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
8121
|
+
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
8118
8122
|
});
|
|
8119
8123
|
var StyledImageSection = styled$2("div", {
|
|
8120
8124
|
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
@@ -8123,7 +8127,7 @@ var StyledImageSection = styled$2("div", {
|
|
|
8123
8127
|
var spaces = getSpaces(props);
|
|
8124
8128
|
return css$2(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 && css$2(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
8129
|
});
|
|
8126
|
-
var StyledMobileImageRow = styled$2.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) {
|
|
8130
|
+
var StyledMobileImageRow = styled$2.div(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n\n ", "\n"])), function (props) {
|
|
8127
8131
|
var spaces = getSpaces(props);
|
|
8128
8132
|
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n ");
|
|
8129
8133
|
});
|
|
@@ -8134,7 +8138,7 @@ var StyledBottomSection = styled$2("div", {
|
|
|
8134
8138
|
var spaces = getSpaces(props);
|
|
8135
8139
|
return css$2(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 && css$2(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
8140
|
});
|
|
8137
|
-
var templateObject_1$
|
|
8141
|
+
var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$2, 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
8142
|
|
|
8139
8143
|
/**
|
|
8140
8144
|
* WARNING: Don't import this directly.
|
|
@@ -14157,7 +14161,7 @@ function useTheme() {
|
|
|
14157
14161
|
var doNotForwardProps$b = ["hasInvertedStyle", "isNarrow"];
|
|
14158
14162
|
var NarrowNavItemLinkStyles = function (props) {
|
|
14159
14163
|
var semanticColors = getSemanticColors(props);
|
|
14160
|
-
return css$2(templateObject_1$
|
|
14164
|
+
return css$2(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n min-height: 48px;\n text-align: center;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "], ["\n min-height: 48px;\n text-align: center;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), props.hasInvertedStyle
|
|
14161
14165
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14162
14166
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, props.hasInvertedStyle
|
|
14163
14167
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
@@ -14165,7 +14169,7 @@ var NarrowNavItemLinkStyles = function (props) {
|
|
|
14165
14169
|
};
|
|
14166
14170
|
var StyledNavItemLink = styled$2(Link, {
|
|
14167
14171
|
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
14168
|
-
})(templateObject_3$
|
|
14172
|
+
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeader("m"), fontBody("s", "regular", /* isNarrow */ true), function (props) {
|
|
14169
14173
|
var isNarrow = props.isNarrow;
|
|
14170
14174
|
var semanticColors = getSemanticColors(props);
|
|
14171
14175
|
return css$2(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
|
|
@@ -14174,7 +14178,7 @@ var StyledNavItemLink = styled$2(Link, {
|
|
|
14174
14178
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14175
14179
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && NarrowNavItemLinkStyles(props));
|
|
14176
14180
|
});
|
|
14177
|
-
var templateObject_1$
|
|
14181
|
+
var templateObject_1$m, templateObject_2$e, templateObject_3$9;
|
|
14178
14182
|
|
|
14179
14183
|
var NavItem = memo(function (_a) {
|
|
14180
14184
|
var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
@@ -14182,39 +14186,102 @@ var NavItem = memo(function (_a) {
|
|
|
14182
14186
|
});
|
|
14183
14187
|
NavItem.displayName = "NavItem";
|
|
14184
14188
|
|
|
14185
|
-
var doNotForwardProps$a = ["hasInvertedStyle"];
|
|
14189
|
+
var doNotForwardProps$a = ["hasInvertedStyle", "showDivider"];
|
|
14186
14190
|
var StyledLinkItemLink = styled$2(Link, {
|
|
14187
14191
|
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14188
|
-
})(
|
|
14192
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBody("xxs", "regular"), function (props) {
|
|
14193
|
+
var showDivider = props.showDivider, hasInvertedStyle = props.hasInvertedStyle;
|
|
14194
|
+
var spaces = getSpaces(props);
|
|
14189
14195
|
var semanticColors = getSemanticColors(props);
|
|
14190
|
-
return "\n color: "
|
|
14196
|
+
return css$2(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), hasInvertedStyle
|
|
14197
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14198
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, hasInvertedStyle
|
|
14199
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14200
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, showDivider && css$2(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: -", "px;\n display: block;\n height: 100%;\n width: 1px;\n margin-left: ", "px;\n background-color: ", ";\n }\n "], ["\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: -", "px;\n display: block;\n height: 100%;\n width: 1px;\n margin-left: ", "px;\n background-color: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, hasInvertedStyle
|
|
14201
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14202
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider));
|
|
14191
14203
|
});
|
|
14192
14204
|
var StyledDivider = styled$2(Divider, {
|
|
14193
14205
|
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14194
|
-
})(
|
|
14206
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14195
14207
|
var semanticColors = getSemanticColors(props);
|
|
14196
14208
|
return "\n border-color: ".concat(props.hasInvertedStyle
|
|
14197
14209
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14198
14210
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, ";\n ");
|
|
14199
14211
|
});
|
|
14200
|
-
var templateObject_1$
|
|
14212
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$8, templateObject_4$6;
|
|
14201
14213
|
|
|
14202
|
-
var FooterLink = memo(function (_a) {
|
|
14214
|
+
var FooterLink = memo(forwardRef(function (_a, ref) {
|
|
14203
14215
|
var link = _a.link, showDivider = _a.showDivider, hasInvertedStyle = _a.hasInvertedStyle;
|
|
14204
|
-
return (
|
|
14205
|
-
});
|
|
14216
|
+
return (jsx(Fragment, { children: jsx(StyledLinkItemLink, __assign({ ref: ref, href: link.url, hasInvertedStyle: hasInvertedStyle, component: link.component, showDivider: showDivider }, link.linkProps, { children: link.label }), link.label) }));
|
|
14217
|
+
}));
|
|
14206
14218
|
FooterLink.displayName = "FooterLink";
|
|
14207
14219
|
|
|
14208
|
-
|
|
14209
|
-
|
|
14210
|
-
|
|
14211
|
-
|
|
14212
|
-
|
|
14213
|
-
|
|
14214
|
-
|
|
14220
|
+
/**
|
|
14221
|
+
* A custom hook that detects the last item in each row of a wrapped layout.
|
|
14222
|
+
*
|
|
14223
|
+
* Neither CSS Flexbox nor CSS Grid provide a built-in way to identify the last item
|
|
14224
|
+
* in a visually wrapped row. Since items can wrap dynamically based on screen size,
|
|
14225
|
+
* we rely on measuring their vertical positions in the DOM.
|
|
14226
|
+
*
|
|
14227
|
+
* We iterate through the list of items and compare their offsetTop values. If an item
|
|
14228
|
+
* has a higher offsetTop than the previous one, it means it started a new row, so the
|
|
14229
|
+
* previous item was the last in its row.
|
|
14230
|
+
*
|
|
14231
|
+
* A ResizeObserver is used to re-run this logic whenever the container resizes, ensuring it
|
|
14232
|
+
* stays accurate in responsive layouts.
|
|
14233
|
+
*
|
|
14234
|
+
* @param containerRef - A ref to the container element
|
|
14235
|
+
* @param itemRefs - An array of refs to the items
|
|
14236
|
+
* @returns A Set of last items in each row
|
|
14237
|
+
*/
|
|
14238
|
+
var useLastInRow = function (containerRef, itemRefs) {
|
|
14239
|
+
var _a = useState(new Set()), lastItems = _a[0], setLastItems = _a[1];
|
|
14240
|
+
useEffect(function () {
|
|
14241
|
+
var updateLastInRow = function () {
|
|
14242
|
+
var items = itemRefs.current.filter(Boolean);
|
|
14243
|
+
var currentTop = null;
|
|
14244
|
+
var newSet = new Set();
|
|
14245
|
+
items.forEach(function (item, index) {
|
|
14246
|
+
if (currentTop === null) {
|
|
14247
|
+
currentTop = item.offsetTop;
|
|
14248
|
+
}
|
|
14249
|
+
else if (item.offsetTop > currentTop) {
|
|
14250
|
+
newSet.add(index - 1);
|
|
14251
|
+
currentTop = item.offsetTop;
|
|
14252
|
+
}
|
|
14253
|
+
});
|
|
14254
|
+
if (items.length > 0) {
|
|
14255
|
+
newSet.add(items.length - 1);
|
|
14256
|
+
}
|
|
14257
|
+
setLastItems(newSet);
|
|
14258
|
+
};
|
|
14259
|
+
updateLastInRow();
|
|
14260
|
+
var resizeObserver = new ResizeObserver(function () {
|
|
14261
|
+
updateLastInRow();
|
|
14262
|
+
});
|
|
14263
|
+
if (containerRef.current) {
|
|
14264
|
+
resizeObserver.observe(containerRef.current);
|
|
14265
|
+
}
|
|
14266
|
+
return function () { return resizeObserver.disconnect(); };
|
|
14267
|
+
}, [containerRef, itemRefs]);
|
|
14268
|
+
return lastItems;
|
|
14269
|
+
};
|
|
14270
|
+
|
|
14271
|
+
var MobileLinkRow = memo(function (_a) {
|
|
14272
|
+
var links = _a.links, hasInvertedStyle = _a.hasInvertedStyle;
|
|
14273
|
+
var containerRef = useRef(null);
|
|
14274
|
+
var itemRefs = useRef([]);
|
|
14275
|
+
var noDividerIndices = useLastInRow(containerRef, itemRefs);
|
|
14276
|
+
return (jsx(StyledMobileLinkRow, { ref: containerRef, children: links.map(function (link, index) { return (jsx(FooterLink, { link: link, showDivider: !noDividerIndices.has(index), hasInvertedStyle: hasInvertedStyle, ref: function (el) {
|
|
14277
|
+
itemRefs.current[index] = el;
|
|
14278
|
+
} }, link.label)); }) }));
|
|
14279
|
+
});
|
|
14280
|
+
MobileLinkRow.displayName = "MobileLinkRow";
|
|
14281
|
+
|
|
14215
14282
|
var MemoizedStyledDivider = memo(StyledDivider);
|
|
14216
14283
|
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"]);
|
|
14284
|
+
var hasInvertedStyle = _a.hasInvertedStyle, images = _a.images, logo = _a.logo, logoUrl = _a.logoUrl, logoComponent = _a.logoComponent, logoLinkProps = _a.logoLinkProps, navItems = _a.navItems, navLinks = _a.navLinks, tag = _a.tag, tagColor = _a.tagColor, title = _a.title, rest = __rest(_a, ["hasInvertedStyle", "images", "logo", "logoUrl", "logoComponent", "logoLinkProps", "navItems", "navLinks", "tag", "tagColor", "title"]);
|
|
14218
14285
|
var footerRef = useRef(null);
|
|
14219
14286
|
var theme = useTheme();
|
|
14220
14287
|
var isMdScreen = useMediaQuery(theme.breakpoints.down("md"));
|
|
@@ -14232,12 +14299,19 @@ function NavigationFooter(_a) {
|
|
|
14232
14299
|
var scrollWidth = footerRef.current.scrollWidth;
|
|
14233
14300
|
var needsScroll = scrollWidth > clientWidth;
|
|
14234
14301
|
setDimensions(function (prev) {
|
|
14235
|
-
var newBreakpoint = needsScroll
|
|
14236
|
-
?
|
|
14302
|
+
var newBreakpoint = needsScroll
|
|
14303
|
+
? prev.breakpoint > scrollWidth
|
|
14304
|
+
? prev.breakpoint
|
|
14305
|
+
: scrollWidth
|
|
14237
14306
|
: prev.breakpoint;
|
|
14307
|
+
var newIsNarrow = prev.isNarrow
|
|
14308
|
+
? clientWidth < newBreakpoint
|
|
14309
|
+
? true
|
|
14310
|
+
: false
|
|
14311
|
+
: needsScroll;
|
|
14238
14312
|
return {
|
|
14239
14313
|
breakpoint: newBreakpoint,
|
|
14240
|
-
isNarrow:
|
|
14314
|
+
isNarrow: newIsNarrow,
|
|
14241
14315
|
};
|
|
14242
14316
|
});
|
|
14243
14317
|
}, []);
|
|
@@ -14252,16 +14326,11 @@ function NavigationFooter(_a) {
|
|
|
14252
14326
|
var renderImages = useCallback(function () {
|
|
14253
14327
|
if (!(images === null || images === void 0 ? void 0 : images.length))
|
|
14254
14328
|
return null;
|
|
14255
|
-
|
|
14256
|
-
|
|
14257
|
-
|
|
14258
|
-
|
|
14259
|
-
|
|
14260
|
-
}
|
|
14261
|
-
return groupArray(images, 2).map(function (imageGroup, index) { return (jsx(StyledMobileImageRow, { children: imageGroup.map(function (_a) {
|
|
14262
|
-
var image = _a.image, url = _a.url;
|
|
14263
|
-
return (jsx(Link, { href: url, children: image }, url));
|
|
14264
|
-
}) }, index)); });
|
|
14329
|
+
var imageElements = images.map(function (_a) {
|
|
14330
|
+
var image = _a.image, url = _a.url, component = _a.component, linkProps = _a.linkProps;
|
|
14331
|
+
return (jsx(Link, __assign({ href: url, component: component }, linkProps, { children: image }), url));
|
|
14332
|
+
});
|
|
14333
|
+
return dimensions.isNarrow ? (jsx(StyledMobileImageRow, { children: imageElements })) : (imageElements);
|
|
14265
14334
|
}, [images, dimensions.isNarrow]);
|
|
14266
14335
|
var renderLinks = useCallback(function () {
|
|
14267
14336
|
if (!(navLinks === null || navLinks === void 0 ? void 0 : navLinks.length))
|
|
@@ -14269,19 +14338,21 @@ function NavigationFooter(_a) {
|
|
|
14269
14338
|
if (!dimensions.isNarrow) {
|
|
14270
14339
|
return navLinks.map(function (link, index) { return (jsx(FooterLink, { link: link, showDivider: index < navLinks.length - 1, hasInvertedStyle: hasInvertedStyle }, link.label)); });
|
|
14271
14340
|
}
|
|
14272
|
-
return
|
|
14341
|
+
return (jsx(MobileLinkRow, { links: navLinks, hasInvertedStyle: hasInvertedStyle }));
|
|
14273
14342
|
}, [navLinks, dimensions.isNarrow, hasInvertedStyle]);
|
|
14274
14343
|
var logoNode = useMemo(function () {
|
|
14275
14344
|
var node = (jsxs(StyledLogoWrapper$1, { isNarrow: dimensions.isNarrow, hasInvertedStyle: hasInvertedStyle, children: [logo, jsx("p", { children: title }), tag && jsx(Tag, { tagColor: tagColor, label: tag, hover: false })] }));
|
|
14276
|
-
return logoUrl ? jsx(Link, { href: logoUrl, children: node }) : node;
|
|
14345
|
+
return logoUrl ? (jsx(Link, __assign({ href: logoUrl, component: logoComponent }, logoLinkProps, { children: node }))) : (node);
|
|
14277
14346
|
}, [
|
|
14347
|
+
dimensions.isNarrow,
|
|
14348
|
+
hasInvertedStyle,
|
|
14278
14349
|
logo,
|
|
14279
14350
|
title,
|
|
14280
14351
|
tag,
|
|
14281
14352
|
tagColor,
|
|
14282
14353
|
logoUrl,
|
|
14283
|
-
|
|
14284
|
-
|
|
14354
|
+
logoComponent,
|
|
14355
|
+
logoLinkProps,
|
|
14285
14356
|
]);
|
|
14286
14357
|
var navItemsSection = useMemo(function () {
|
|
14287
14358
|
if (!(navItems === null || navItems === void 0 ? void 0 : navItems.length))
|
|
@@ -14299,15 +14370,15 @@ var doNotForwardProps$9 = [
|
|
|
14299
14370
|
"logoLinkComponent",
|
|
14300
14371
|
"logoLinkProps",
|
|
14301
14372
|
];
|
|
14302
|
-
var
|
|
14373
|
+
var StyledAppBar = styled$2(AppBar, {
|
|
14303
14374
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14304
|
-
})(templateObject_1$
|
|
14375
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14305
14376
|
var colors = getSemanticColors(props);
|
|
14306
|
-
return "\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n max-width: 100%;\n max-height: 56px;\n overflow-x: auto;\n ");
|
|
14377
|
+
return "\n background-color: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n background-image: none;\n max-width: 100%;\n max-height: 56px;\n overflow-x: auto;\n ");
|
|
14307
14378
|
});
|
|
14308
14379
|
var NarrowToolbar = function (props) {
|
|
14309
14380
|
var semanticColors = getSemanticColors(props);
|
|
14310
|
-
return css$2(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border-bottom: 1px solid\n ", ";\n background: ", ";\n position: sticky !important;\n top: 0;\n z-index: 1000;\n justify-content: space-between;\n "], ["\n border-bottom: 1px solid\n ", ";\n background: ", ";\n position: sticky !important;\n top: 0;\n z-index: 1000;\n justify-content: space-between;\n "])), props.hasInvertedStyle
|
|
14381
|
+
return css$2(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border-bottom: 1px solid\n ", ";\n background-color: ", ";\n background-image: none;\n box-shadow: none;\n position: sticky !important;\n top: 0;\n z-index: 1000;\n justify-content: space-between;\n "], ["\n border-bottom: 1px solid\n ", ";\n background-color: ", ";\n background-image: none;\n box-shadow: none;\n position: sticky !important;\n top: 0;\n z-index: 1000;\n justify-content: space-between;\n "])), props.hasInvertedStyle
|
|
14311
14382
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14312
14383
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, props.hasInvertedStyle
|
|
14313
14384
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryInverse
|
|
@@ -14320,13 +14391,13 @@ var StyledToolbar = styled$2(Toolbar, {
|
|
|
14320
14391
|
var spaces = getSpaces(props);
|
|
14321
14392
|
return css$2(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));
|
|
14322
14393
|
});
|
|
14323
|
-
|
|
14394
|
+
styled$2("div", {
|
|
14324
14395
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14325
14396
|
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14326
14397
|
var shadows = getShadows(props);
|
|
14327
14398
|
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 ");
|
|
14328
14399
|
});
|
|
14329
|
-
|
|
14400
|
+
styled$2("div", {
|
|
14330
14401
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14331
14402
|
})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14332
14403
|
var colors = getSemanticColors(props);
|
|
@@ -14334,7 +14405,7 @@ var StyledShadowCoverElement = styled$2("div", {
|
|
|
14334
14405
|
});
|
|
14335
14406
|
var StyledHeaderButton = styled$2(Button, {
|
|
14336
14407
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14337
|
-
})(templateObject_7$
|
|
14408
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14338
14409
|
var _a, _b, _c, _d;
|
|
14339
14410
|
var sdsType = props.sdsType, hasInvertedStyle = props.hasInvertedStyle;
|
|
14340
14411
|
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";
|
|
@@ -14345,24 +14416,24 @@ var StyledHeaderButton = styled$2(Button, {
|
|
|
14345
14416
|
var invertedNarrowButtonStyles = function (props) {
|
|
14346
14417
|
var _a, _b, _c, _d;
|
|
14347
14418
|
var semanticColors = getSemanticColors(props);
|
|
14348
|
-
return css$2(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);
|
|
14419
|
+
return css$2(templateObject_8$1 || (templateObject_8$1 = __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);
|
|
14349
14420
|
};
|
|
14350
14421
|
var StyledNarrowIconButton = styled$2(Button, {
|
|
14351
14422
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14352
|
-
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14423
|
+
})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14353
14424
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14354
|
-
return css$2(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
14425
|
+
return css$2(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
14355
14426
|
});
|
|
14356
14427
|
var invertedWideButtonStyles = function (props) {
|
|
14357
14428
|
var _a, _b;
|
|
14358
14429
|
var semanticColors = getSemanticColors(props);
|
|
14359
|
-
return css$2(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);
|
|
14430
|
+
return css$2(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "], ["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse);
|
|
14360
14431
|
};
|
|
14361
14432
|
var StyledWideIconButton = styled$2(Button, {
|
|
14362
14433
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14363
14434
|
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14364
14435
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14365
|
-
return css$2(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
14436
|
+
return css$2(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n margin: 0;\n "], ["\n ", "\n margin: 0;\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
14366
14437
|
});
|
|
14367
14438
|
var StyledLogoLinkWrapper = styled$2(Link, {
|
|
14368
14439
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
@@ -14371,57 +14442,64 @@ var StyledLogoLinkWrapper = styled$2(Link, {
|
|
|
14371
14442
|
return css$2(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), isNarrow ? "100%" : "auto");
|
|
14372
14443
|
});
|
|
14373
14444
|
var StyledLogoWrapper = styled$2.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
14374
|
-
var NarrowTitleContainer = function (
|
|
14375
|
-
|
|
14376
|
-
return css$2(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);
|
|
14445
|
+
var NarrowTitleContainer = function () {
|
|
14446
|
+
return css$2(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n p {\n margin: 0px;\n margin-block: 0px;\n }\n "], ["\n p {\n margin: 0px;\n margin-block: 0px;\n }\n "])));
|
|
14377
14447
|
};
|
|
14378
14448
|
var StyledTitleContainer = styled$2("div", {
|
|
14379
14449
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14380
|
-
})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n
|
|
14450
|
+
})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n\n ", "\n"])), function (props) {
|
|
14381
14451
|
var isNarrow = props.isNarrow;
|
|
14382
14452
|
var colors = getSemanticColors(props);
|
|
14383
14453
|
var spaces = getSpaces(props);
|
|
14384
|
-
return css$2(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n
|
|
14454
|
+
return css$2(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n gap: ", "px;\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n ", "\n "], ["\n gap: ", "px;\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, props.hasInvertedStyle
|
|
14385
14455
|
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
|
|
14386
|
-
: colors === null || colors === void 0 ? void 0 : colors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl,
|
|
14456
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && NarrowTitleContainer());
|
|
14457
|
+
});
|
|
14458
|
+
var StyledTitleTagWrapper = styled$2("div", {
|
|
14459
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14460
|
+
})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeader("l"), fontHeader("l", true), function (props) {
|
|
14461
|
+
var spaces = getSpaces(props);
|
|
14462
|
+
return "\n display: flex;\n align-items: center;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n p {\n white-space: nowrap;\n }\n ");
|
|
14387
14463
|
});
|
|
14388
|
-
var StyledTag = styled$2(Tag)(
|
|
14464
|
+
var StyledTag$1 = styled$2(Tag)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n margin: 0;\n\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 0;\n\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"), fontBody("xxxs", "regular", /* isNarrow */ true));
|
|
14389
14465
|
var StyledPrimaryNavContainer = styled$2("div", {
|
|
14390
14466
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14391
|
-
})(
|
|
14467
|
+
})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"])), function (props) {
|
|
14392
14468
|
var showSearch = props.showSearch, primaryNavPosition = props.primaryNavPosition, isNarrow = props.isNarrow;
|
|
14393
14469
|
var spaces = getSpaces(props);
|
|
14394
14470
|
var primaryNavPositionWithSearch = primaryNavPosition === "left" ? "flex-start" : "space-between";
|
|
14395
14471
|
var primaryNavPositionWithoutSearch = primaryNavPosition === "left" ? "flex-start" : "flex-end";
|
|
14396
|
-
return css$2(
|
|
14472
|
+
return css$2(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n flex-direction: ", ";\n gap: ", "px;\n margin-right: ", "px;\n flex: 1;\n justify-content: ", ";\n "], ["\n flex-direction: ", ";\n gap: ", "px;\n margin-right: ", "px;\n flex: 1;\n justify-content: ", ";\n "])), isNarrow ? "column" : "row", spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, showSearch
|
|
14397
14473
|
? primaryNavPositionWithSearch
|
|
14398
14474
|
: primaryNavPositionWithoutSearch);
|
|
14399
14475
|
});
|
|
14400
14476
|
var StyledSearch = styled$2(InputSearch, {
|
|
14401
14477
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14402
|
-
})(
|
|
14403
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
14478
|
+
})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n margin: 0;\n width: 100%;\n\n .MuiInputBase-input {\n ", "\n ", "\n }\n\n ", "\n"], ["\n margin: 0;\n width: 100%;\n\n .MuiInputBase-input {\n ", "\n ", "\n }\n\n ", "\n"])), fontBody("xs", "regular"), fontBody("m", "regular", /* isNarrow */ true), function (props) {
|
|
14479
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
14404
14480
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14405
14481
|
var spaces = getSpaces(props);
|
|
14406
14482
|
var semanticColors = getSemanticColors(props);
|
|
14407
|
-
return css$2(
|
|
14483
|
+
return css$2(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\n }\n\n .MuiInputBase-input {\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n\n &:hover {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-focused {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-disabled {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n }\n "], ["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\n }\n\n .MuiInputBase-input {\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n\n &:hover {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-focused {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-disabled {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n }\n "])), isNarrow ? "100%" : "320px", isNarrow ? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px") : "", hasInvertedStyle
|
|
14408
14484
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14409
14485
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14410
14486
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryInverse
|
|
14411
14487
|
: "", hasInvertedStyle
|
|
14412
|
-
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.
|
|
14488
|
+
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textTertiaryInverse
|
|
14489
|
+
: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, hasInvertedStyle
|
|
14490
|
+
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryInverse
|
|
14413
14491
|
: "", hasInvertedStyle
|
|
14414
|
-
? (
|
|
14492
|
+
? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryHoverInverse
|
|
14415
14493
|
: "", hasInvertedStyle
|
|
14416
|
-
? (
|
|
14494
|
+
? (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentPrimaryInverse
|
|
14417
14495
|
: "", hasInvertedStyle
|
|
14418
|
-
? (
|
|
14496
|
+
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimaryPressedInverse
|
|
14419
14497
|
: "", hasInvertedStyle
|
|
14420
|
-
? (
|
|
14498
|
+
? (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse
|
|
14421
14499
|
: "", hasInvertedStyle
|
|
14422
|
-
? (
|
|
14500
|
+
? (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryDisabledInverse
|
|
14423
14501
|
: "", hasInvertedStyle
|
|
14424
|
-
? (
|
|
14502
|
+
? (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentDisabledInverse
|
|
14425
14503
|
: "");
|
|
14426
14504
|
});
|
|
14427
14505
|
var NarrowButtonStyles = function (props) {
|
|
@@ -14431,23 +14509,28 @@ var NarrowButtonStyles = function (props) {
|
|
|
14431
14509
|
var backgroundColor = props.hasInvertedStyle
|
|
14432
14510
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse
|
|
14433
14511
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary;
|
|
14434
|
-
return css$2(
|
|
14512
|
+
return css$2(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n background: ", ";\n gap: ", "px;\n flex-direction: column;\n margin-left: 0;\n margin-top: ", "px;\n padding: ", "px;\n position: sticky;\n bottom: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n height: ", "px;\n width: 100%;\n background: linear-gradient(\n to top,\n ", " 0%,\n ", "00 100%\n );\n top: -", "px;\n }\n\n .MuiButton-icon .MuiSvgIcon-root {\n width: ", "px;\n height: ", "px;\n }\n "], ["\n background: ", ";\n gap: ", "px;\n flex-direction: column;\n margin-left: 0;\n margin-top: ", "px;\n padding: ", "px;\n position: sticky;\n bottom: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n height: ", "px;\n width: 100%;\n background: linear-gradient(\n to top,\n ", " 0%,\n ", "00 100%\n );\n top: -", "px;\n }\n\n .MuiButton-icon .MuiSvgIcon-root {\n width: ", "px;\n height: ", "px;\n }\n "])), backgroundColor, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, backgroundColor, backgroundColor, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, sizes === null || sizes === void 0 ? void 0 : sizes.l.width, sizes === null || sizes === void 0 ? void 0 : sizes.l.height);
|
|
14435
14513
|
};
|
|
14436
14514
|
var StyledButtonSection = styled$2("section", {
|
|
14437
14515
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14438
|
-
})(
|
|
14516
|
+
})(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"])), fontBody("l", "semibold", /* isNarrow */ true), fontBody("m", "semibold", /* isNarrow */ true), function (props) {
|
|
14439
14517
|
var isNarrow = props.isNarrow;
|
|
14440
14518
|
var spaces = getSpaces(props);
|
|
14441
|
-
return css$2(
|
|
14519
|
+
return css$2(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "], ["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && NarrowButtonStyles(props));
|
|
14442
14520
|
});
|
|
14443
14521
|
var StyledDrawer$1 = styled$2(Drawer, {
|
|
14444
14522
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14445
|
-
})(
|
|
14523
|
+
})(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14446
14524
|
var colors = getSemanticColors(props);
|
|
14447
14525
|
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 ");
|
|
14448
14526
|
});
|
|
14449
|
-
var StyledNarrowButton = styled$2(Button
|
|
14450
|
-
|
|
14527
|
+
var StyledNarrowButton = styled$2(Button, {
|
|
14528
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14529
|
+
})(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14530
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14531
|
+
return css$2(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n ", "\n margin: 0;\n "], ["\n ", "\n margin: 0;\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
14532
|
+
});
|
|
14533
|
+
var templateObject_1$k, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
|
|
14451
14534
|
|
|
14452
14535
|
var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
|
|
14453
14536
|
var NarrowPrimaryNavItem = function (props) {
|
|
@@ -14464,37 +14547,52 @@ var NarrowPrimaryNavItem = function (props) {
|
|
|
14464
14547
|
var inactiveBorderColor = hasInvertedStyle
|
|
14465
14548
|
? (_c = colors === null || colors === void 0 ? void 0 : colors.neutral) === null || _c === void 0 ? void 0 : _c.fillPrimary
|
|
14466
14549
|
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
14467
|
-
return css(templateObject_1$
|
|
14550
|
+
return css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n border-left: ", "px solid\n ", ";\n border-radius: 0;\n justify-content: start;\n padding: ", "px 0 ", "px\n ", "px;\n background: ", ";\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n }\n "], ["\n border-left: ", "px solid\n ", ";\n border-radius: 0;\n justify-content: start;\n padding: ", "px 0 ", "px\n ", "px;\n background: ", ";\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : "transparent", spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, ((_d = spaces === null || spaces === void 0 ? void 0 : spaces.l) !== null && _d !== void 0 ? _d : 0) + ((_e = spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) !== null && _e !== void 0 ? _e : 0), active ? activeBackgroundColor : "transparent", hasInvertedStyle
|
|
14468
14551
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondaryInverse
|
|
14469
14552
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : inactiveBorderColor);
|
|
14470
14553
|
};
|
|
14471
14554
|
var PrimaryNavItem = styled$2(Button, {
|
|
14472
14555
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
14473
|
-
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n align-items:
|
|
14556
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n background: none;\n padding: 0;\n min-width: fit-content;\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n background: none;\n padding: 0;\n min-width: fit-content;\n\n ", "\n"])), function (props) {
|
|
14557
|
+
var _a;
|
|
14474
14558
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14475
14559
|
var spaces = getSpaces(props);
|
|
14476
|
-
var
|
|
14477
|
-
|
|
14478
|
-
?
|
|
14479
|
-
:
|
|
14560
|
+
var semanticColors = getSemanticColors(props);
|
|
14561
|
+
var ChevronDefaultColor = hasInvertedStyle
|
|
14562
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14563
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
|
|
14564
|
+
return css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n gap: ", "px;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n box-shadow: none;\n\n & > span {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n\n ", "\n "], ["\n gap: ", "px;\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n box-shadow: none;\n\n & > span {\n color: ", ";\n }\n\n svg {\n color: ", " !important;\n }\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, ChevronDefaultColor, hasInvertedStyle
|
|
14565
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14566
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14567
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse
|
|
14568
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && NarrowPrimaryNavItem(props));
|
|
14480
14569
|
});
|
|
14481
14570
|
var WideStyledLabel = function (props) {
|
|
14482
|
-
var _a, _b;
|
|
14483
|
-
var hasInvertedStyle = props.hasInvertedStyle, active = props.active;
|
|
14484
|
-
var
|
|
14485
|
-
var spaces = getSpaces(props);
|
|
14571
|
+
var _a, _b, _c;
|
|
14572
|
+
var hasInvertedStyle = props.hasInvertedStyle, active = props.active, _d = props.itemType, itemType = _d === void 0 ? "text" : _d;
|
|
14573
|
+
var semanticColors = getSemanticColors(props);
|
|
14486
14574
|
var activeBorderColor = hasInvertedStyle
|
|
14487
|
-
? (_a =
|
|
14488
|
-
: (_b =
|
|
14575
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderOnFill
|
|
14576
|
+
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
14489
14577
|
var inactiveBorderColor = hasInvertedStyle
|
|
14490
|
-
?
|
|
14491
|
-
:
|
|
14492
|
-
|
|
14578
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderOnFill
|
|
14579
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderPrimary;
|
|
14580
|
+
var ChevronDefaultColor = hasInvertedStyle
|
|
14581
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14582
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
|
|
14583
|
+
var ChevronOpenColor = hasInvertedStyle
|
|
14584
|
+
? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentPrimaryInverse
|
|
14585
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.ornamentOpen;
|
|
14586
|
+
return css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n border-bottom-color: ", ";\n }\n "], ["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n border-bottom-color: ", ";\n }\n "])), active && itemType === "text"
|
|
14587
|
+
? activeBorderColor
|
|
14588
|
+
: "transparent", active ? ChevronOpenColor : ChevronDefaultColor, active ? activeBorderColor : inactiveBorderColor);
|
|
14493
14589
|
};
|
|
14590
|
+
var StyledTag = styled$2(Tag)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin: 0;\n\n .MuiChip-label {\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 0;\n\n .MuiChip-label {\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"));
|
|
14494
14591
|
var StyledLabel = styled$2("span", {
|
|
14495
14592
|
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
14496
|
-
})(
|
|
14593
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeader("m"), function (props) {
|
|
14497
14594
|
var hasInvertedStyle = props.hasInvertedStyle, active = props.active, isNarrow = props.isNarrow;
|
|
14595
|
+
var spaces = getSpaces(props);
|
|
14498
14596
|
var colors = getSemanticColors(props);
|
|
14499
14597
|
var activeColor = hasInvertedStyle
|
|
14500
14598
|
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
|
|
@@ -14502,13 +14600,48 @@ var StyledLabel = styled$2("span", {
|
|
|
14502
14600
|
var inactiveColor = hasInvertedStyle
|
|
14503
14601
|
? colors === null || colors === void 0 ? void 0 : colors.base.textSecondaryInverse
|
|
14504
14602
|
: colors === null || colors === void 0 ? void 0 : colors.base.textSecondary;
|
|
14505
|
-
return css(
|
|
14603
|
+
return css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", " {\n margin-top: -", "px;\n }\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", " {\n margin-top: -", "px;\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeColor : inactiveColor, StyledTag, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, !isNarrow && WideStyledLabel(props));
|
|
14506
14604
|
});
|
|
14507
|
-
var
|
|
14605
|
+
var StyledAccordion$1 = styled$2(Accordion, {
|
|
14606
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
14607
|
+
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100%;\n min-width: unset;\n\n .MuiAccordionSummary-content {\n ", "\n }\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"], ["\n width: 100%;\n min-width: unset;\n\n .MuiAccordionSummary-content {\n ", "\n }\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"])), fontBodySemiboldM, fontBodyS$1, function (props) {
|
|
14608
|
+
var _a, _b, _c, _d;
|
|
14609
|
+
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14610
|
+
var spaces = getSpaces(props);
|
|
14611
|
+
var semanticColors = getSemanticColors(props);
|
|
14612
|
+
var textDefaultColor = hasInvertedStyle
|
|
14613
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14614
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary;
|
|
14615
|
+
var textOpenColor = hasInvertedStyle
|
|
14616
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14617
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary;
|
|
14618
|
+
var ChevronDefaultColor = hasInvertedStyle
|
|
14619
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14620
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
|
|
14621
|
+
var ChevronOpenColor = hasInvertedStyle
|
|
14622
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse
|
|
14623
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.ornamentOpen;
|
|
14624
|
+
var isNarrowStyles = function () { return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), hasInvertedStyle
|
|
14625
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14626
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary); };
|
|
14627
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n .MuiAccordionSummary-expandIconWrapper {\n margin-top: ", "px !important;\n }\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n padding: ", "px ", "px ", "px\n ", "px;\n width: 100%;\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .MuiButtonBase-root {\n padding: ", "px 0 ", "px 34px !important;\n\n .primary-text {\n color: ", " !important;\n }\n\n &:hover {\n padding: ", "px 0 ", "px\n calc(34px - ", "px) !important;\n\n .primary-text {\n color: ", " !important;\n }\n }\n }\n }\n "], ["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n .MuiAccordionSummary-expandIconWrapper {\n margin-top: ", "px !important;\n }\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n padding: ", "px ", "px ", "px\n ", "px;\n width: 100%;\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .MuiButtonBase-root {\n padding: ", "px 0 ", "px 34px !important;\n\n .primary-text {\n color: ", " !important;\n }\n\n &:hover {\n padding: ", "px 0 ", "px\n calc(34px - ", "px) !important;\n\n .primary-text {\n color: ", " !important;\n }\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, textDefaultColor, spaces === null || spaces === void 0 ? void 0 : spaces.s, ChevronDefaultColor, textOpenColor, ChevronOpenColor, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.m, ((_b = spaces === null || spaces === void 0 ? void 0 : spaces.l) !== null && _b !== void 0 ? _b : 0) + ((_c = spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) !== null && _c !== void 0 ? _c : 0), hasInvertedStyle
|
|
14628
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14629
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderPrimary, hasInvertedStyle
|
|
14630
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14631
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14632
|
+
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse
|
|
14633
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, hasInvertedStyle
|
|
14634
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14635
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, 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.xs, hasInvertedStyle
|
|
14636
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14637
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
|
|
14638
|
+
});
|
|
14639
|
+
var StyledSubItem$1 = styled$2(MenuItem)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"], ["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"])));
|
|
14640
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$6, templateObject_4$4, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
14508
14641
|
|
|
14509
14642
|
var doNotForwardProps$7 = ["isNarrow"];
|
|
14510
14643
|
var NarrowStyledSection = function () {
|
|
14511
|
-
return css(templateObject_1$
|
|
14644
|
+
return css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n align-items: start;\n flex-direction: column;\n "], ["\n align-items: start;\n flex-direction: column;\n "])));
|
|
14512
14645
|
};
|
|
14513
14646
|
var StyledSection = styled$2("section", {
|
|
14514
14647
|
shouldForwardProp: function (prop) { return !doNotForwardProps$7.includes(prop); },
|
|
@@ -14518,18 +14651,69 @@ var StyledSection = styled$2("section", {
|
|
|
14518
14651
|
var spaces = getSpaces(props);
|
|
14519
14652
|
return css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n column-gap: ", "px;\n\n ", "\n "], ["\n column-gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces[(_a = props === null || props === void 0 ? void 0 : props.gap) !== null && _a !== void 0 ? _a : "xl"], isNarrow && NarrowStyledSection());
|
|
14520
14653
|
});
|
|
14521
|
-
var templateObject_1$
|
|
14654
|
+
var templateObject_1$i, templateObject_2$a, templateObject_3$5;
|
|
14522
14655
|
|
|
14523
14656
|
function NavigationHeaderPrimaryNav(_a) {
|
|
14524
14657
|
var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
14658
|
+
var theme = useTheme$4();
|
|
14659
|
+
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
14660
|
+
var buttonRef = useRef(null);
|
|
14661
|
+
var _c = useState("100%"), menuWidth = _c[0], setMenuWidth = _c[1];
|
|
14662
|
+
var open = Boolean(anchorEl);
|
|
14663
|
+
function onClose() {
|
|
14664
|
+
setAnchorEl(null);
|
|
14665
|
+
}
|
|
14666
|
+
useEffect(function () {
|
|
14667
|
+
var button = buttonRef.current;
|
|
14668
|
+
if (!button) {
|
|
14669
|
+
return;
|
|
14670
|
+
}
|
|
14671
|
+
setMenuWidth(button.offsetWidth);
|
|
14672
|
+
}, []);
|
|
14525
14673
|
return (jsx(StyledSection, { isNarrow: isNarrow, children: items.map(function (item) {
|
|
14674
|
+
var _a, _b;
|
|
14526
14675
|
var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, rest = __rest(item, ["key", "label", "tag", "tagColor"]);
|
|
14527
14676
|
var isActive = key === value;
|
|
14528
|
-
|
|
14529
|
-
|
|
14677
|
+
if (item.itemType === "dropdown" && !isNarrow) {
|
|
14678
|
+
var dropdownItem = item;
|
|
14679
|
+
return (jsxs(Fragment$1, { children: [jsx(PrimaryNavItem, __assign({}, rest, { itemType: item.itemType, ref: buttonRef, sdsStyle: "minimal", active: open, onClick: function (e) {
|
|
14680
|
+
setAnchorEl(e.currentTarget);
|
|
14681
|
+
onChange(key);
|
|
14682
|
+
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxs(StyledLabel, { itemType: item.itemType, active: open, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [label, jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, slotProps: {
|
|
14683
|
+
paper: {
|
|
14684
|
+
style: {
|
|
14685
|
+
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
14686
|
+
},
|
|
14687
|
+
},
|
|
14688
|
+
}, anchorOrigin: {
|
|
14689
|
+
horizontal: "left",
|
|
14690
|
+
vertical: "bottom",
|
|
14691
|
+
}, transformOrigin: {
|
|
14692
|
+
horizontal: "left",
|
|
14693
|
+
vertical: "top",
|
|
14694
|
+
}, children: dropdownItem.items.map(function (subItem) {
|
|
14695
|
+
var subLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14696
|
+
return (jsx(MenuItem, __assign({ onClick: function () {
|
|
14697
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14698
|
+
onClose();
|
|
14699
|
+
}, sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
14700
|
+
}) })] }, key));
|
|
14701
|
+
}
|
|
14702
|
+
if (item.itemType === "dropdown" && isNarrow) {
|
|
14703
|
+
var dropdownItem = item;
|
|
14704
|
+
return (jsxs(StyledAccordion$1, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(AccordionHeader, { children: item.label }), jsx(AccordionDetails, { children: dropdownItem.items.map(function (subItem) {
|
|
14705
|
+
var dropdownItemLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14706
|
+
return (jsx(StyledSubItem$1, __assign({ onClick: function () {
|
|
14707
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14708
|
+
onClose();
|
|
14709
|
+
} }, accordionSubItemRest, { children: dropdownItemLabel }), "primary-nav-item-".concat(dropdownItemLabel)));
|
|
14710
|
+
}) })] }, "".concat(item.label, "-dropdown")));
|
|
14711
|
+
}
|
|
14712
|
+
return (jsx(PrimaryNavItem, __assign({}, rest, { sdsStyle: "minimal", active: isActive, onClick: function (e) {
|
|
14713
|
+
var _a, _b;
|
|
14530
14714
|
onChange(key);
|
|
14531
|
-
(_a = item.onClick) === null ||
|
|
14532
|
-
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children:
|
|
14715
|
+
(_b = (_a = item).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
14716
|
+
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxs(StyledLabel, { active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [label, "tag" in item && (jsx(StyledTag, { label: tag, color: tagColor, hover: false }))] }) }), key));
|
|
14533
14717
|
}) }));
|
|
14534
14718
|
}
|
|
14535
14719
|
|
|
@@ -14538,13 +14722,13 @@ var NarrowStyledTextItem = function (props) {
|
|
|
14538
14722
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
14539
14723
|
var semanticColors = getSemanticColors(props);
|
|
14540
14724
|
var spaces = getSpaces(props);
|
|
14541
|
-
return css(templateObject_1$
|
|
14725
|
+
return css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding-left: ", "px;\n border-radius: 0;\n width: 100%;\n min-height: 44px;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n }\n "], ["\n padding-left: ", "px;\n border-radius: 0;\n width: 100%;\n min-height: 44px;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, hasInvertedStyle
|
|
14542
14726
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14543
14727
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary);
|
|
14544
14728
|
};
|
|
14545
14729
|
var StyledTextItem = styled$2(Button, {
|
|
14546
14730
|
shouldForwardProp: function (prop) { return !ButtonDoNotForwardProps.includes(prop); },
|
|
14547
|
-
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n\n background: none;\n justify-content: flex-start;\n
|
|
14731
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n\n background: none;\n justify-content: flex-start;\n width: fit-content;\n min-width: unset;\n padding: 0;\n\n ", "\n"], ["\n ", "\n\n background: none;\n justify-content: flex-start;\n width: fit-content;\n min-width: unset;\n padding: 0;\n\n ", "\n"])), fontHeaderS, function (props) {
|
|
14548
14732
|
var _a, _b;
|
|
14549
14733
|
var hasInvertedStyle = props.hasInvertedStyle, open = props.open, isNarrow = props.isNarrow;
|
|
14550
14734
|
var semanticColors = getSemanticColors(props);
|
|
@@ -14570,7 +14754,7 @@ var StyledTextItem = styled$2(Button, {
|
|
|
14570
14754
|
var doNotForwardProps$6 = ["hasInvertedStyle", "isNarrow"];
|
|
14571
14755
|
var StyledAccordion = styled$2(Accordion, {
|
|
14572
14756
|
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
14573
|
-
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width:
|
|
14757
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 100%;\n min-width: unset;\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"], ["\n width: 100%;\n min-width: unset;\n\n .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n ", "\n }\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
14574
14758
|
var _a, _b;
|
|
14575
14759
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
14576
14760
|
var spaces = getSpaces(props);
|
|
@@ -14590,22 +14774,25 @@ var StyledAccordion = styled$2(Accordion, {
|
|
|
14590
14774
|
var isNarrowStyles = function () { return css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), hasInvertedStyle
|
|
14591
14775
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14592
14776
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary); };
|
|
14593
|
-
return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .
|
|
14777
|
+
return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .primary-text {\n color: ", " !important;\n\n &:hover {\n color: ", " !important;\n }\n }\n\n .MuiButtonBase-root {\n padding: ", "px 0 ", "px 34px !important;\n\n &:hover {\n .primary-text {\n color: ", " !important;\n }\n }\n }\n }\n "], ["\n .MuiButtonBase-root {\n padding: ", "px ", "px;\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &[aria-expanded=\"true\"] {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n }\n\n &:hover {\n color: ", ";\n\n svg {\n color: ", " !important;\n }\n\n ", "\n }\n }\n\n .MuiCollapse-root .MuiAccordionDetails-root {\n padding: 0;\n\n .primary-text {\n color: ", " !important;\n\n &:hover {\n color: ", " !important;\n }\n }\n\n .MuiButtonBase-root {\n padding: ", "px 0 ", "px 34px !important;\n\n &:hover {\n .primary-text {\n color: ", " !important;\n }\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, textDefaultColor, ChevronDefaultColor, textOpenColor, ChevronOpenColor, hasInvertedStyle
|
|
14594
14778
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14595
14779
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14596
14780
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse
|
|
14597
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(),
|
|
14781
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(), hasInvertedStyle
|
|
14598
14782
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14599
14783
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, hasInvertedStyle
|
|
14600
14784
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14785
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, hasInvertedStyle
|
|
14786
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14601
14787
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
|
|
14602
14788
|
});
|
|
14603
14789
|
var StyledSubItem = styled$2(MenuItem)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"], ["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"])));
|
|
14604
|
-
var templateObject_1$
|
|
14790
|
+
var templateObject_1$h, templateObject_2$9, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$1, templateObject_7;
|
|
14605
14791
|
|
|
14606
|
-
function
|
|
14607
|
-
var
|
|
14792
|
+
function NavigationHeaderSecondaryNav(_a) {
|
|
14793
|
+
var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
14608
14794
|
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
14795
|
+
var theme = useTheme$4();
|
|
14609
14796
|
var open = Boolean(anchorEl);
|
|
14610
14797
|
function onClose() {
|
|
14611
14798
|
setAnchorEl(null);
|
|
@@ -14619,50 +14806,126 @@ function SecondaryNavItem(_a) {
|
|
|
14619
14806
|
}
|
|
14620
14807
|
setMenuWidth(button.offsetWidth);
|
|
14621
14808
|
}, []);
|
|
14622
|
-
return (jsxs(Fragment$1, { children: [item.itemType === "text" && (jsx(StyledTextItem, __assign({ sdsStyle: "minimal", onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { children: item.label }))), item.itemType === "dropdown" && !isNarrow && (jsxs(Fragment, { children: [jsxs(StyledTextItem, { sdsStyle: "minimal", ref: buttonRef, onClick: function (event) { return setAnchorEl(event.currentTarget); }, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, children: [jsx("span", { children: item.label }), jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }), jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, children: item.items.map(function (subItem) {
|
|
14623
|
-
var label = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14624
|
-
return (jsx(MenuItem, __assign({ onClick: function () {
|
|
14625
|
-
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14626
|
-
onClose();
|
|
14627
|
-
} }, subItemRest, { children: label }), label));
|
|
14628
|
-
}) })] })), item.itemType === "dropdown" && isNarrow && (jsxs(StyledAccordion, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(AccordionHeader, { children: item.label }), jsx(AccordionDetails, { children: item.items.map(function (subItem) {
|
|
14629
|
-
var label = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14630
|
-
return (jsx(StyledSubItem, __assign({ onClick: function () {
|
|
14631
|
-
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14632
|
-
onClose();
|
|
14633
|
-
}, sx: { width: menuWidth } }, accordionSubItemRest, { children: label }), label));
|
|
14634
|
-
}) })] }))] }, item.label));
|
|
14635
|
-
}
|
|
14636
|
-
function NavigationHeaderSecondaryNav(_a) {
|
|
14637
|
-
var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
14638
14809
|
return (jsx(StyledSection, { gap: "l", isNarrow: isNarrow, children: items.map(function (item) {
|
|
14810
|
+
var _a, _b;
|
|
14639
14811
|
var itemType = item.itemType, label = item.label, rest = __rest(item, ["itemType", "label"]);
|
|
14640
|
-
|
|
14812
|
+
if (itemType === "dropdown" && !isNarrow) {
|
|
14813
|
+
return (jsxs(Fragment$1, { children: [jsxs(StyledTextItem, __assign({}, rest, { ref: buttonRef, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, sdsStyle: "minimal", onClick: function (event) {
|
|
14814
|
+
var _a;
|
|
14815
|
+
setAnchorEl(event.currentTarget);
|
|
14816
|
+
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
|
|
14817
|
+
}, children: [jsx("span", { children: label }), jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, slotProps: {
|
|
14818
|
+
paper: {
|
|
14819
|
+
style: {
|
|
14820
|
+
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
14821
|
+
},
|
|
14822
|
+
},
|
|
14823
|
+
}, anchorOrigin: {
|
|
14824
|
+
horizontal: "left",
|
|
14825
|
+
vertical: "bottom",
|
|
14826
|
+
}, transformOrigin: {
|
|
14827
|
+
horizontal: "left",
|
|
14828
|
+
vertical: "top",
|
|
14829
|
+
}, children: item.items.map(function (subItem) {
|
|
14830
|
+
var menuLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14831
|
+
return (jsx(MenuItem, __assign({ onClick: function (event) {
|
|
14832
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
14833
|
+
onClose();
|
|
14834
|
+
}, sx: { minWidth: menuWidth } }, subItemRest, { children: menuLabel }), "menu-item-".concat(menuLabel)));
|
|
14835
|
+
}) })] }, "".concat(label, "-dropdown")));
|
|
14836
|
+
}
|
|
14837
|
+
if (itemType === "dropdown" && isNarrow) {
|
|
14838
|
+
return (jsxs(StyledAccordion, { id: "".concat(label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(AccordionHeader, { children: label }), jsx(AccordionDetails, { children: item.items.map(function (subItem) {
|
|
14839
|
+
var accordionLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
|
|
14840
|
+
return (jsx(StyledSubItem, __assign({ onClick: function (event) {
|
|
14841
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
14842
|
+
onClose();
|
|
14843
|
+
} }, accordionSubItemRest, { children: accordionLabel }), "accordion-item-".concat(accordionLabel)));
|
|
14844
|
+
}) })] }, "".concat(label, "-dropdown")));
|
|
14845
|
+
}
|
|
14846
|
+
return (jsx(StyledTextItem, __assign({}, rest, { onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, sdsStyle: "minimal", children: item.label }), "".concat(label, "-").concat(itemType)));
|
|
14641
14847
|
}) }));
|
|
14642
14848
|
}
|
|
14643
14849
|
|
|
14850
|
+
function ElevationScroll(elevationProps) {
|
|
14851
|
+
var _a, _b, _c;
|
|
14852
|
+
var children = elevationProps.children, window = elevationProps.window, _d = elevationProps.shouldElevate, shouldElevate = _d === void 0 ? true : _d;
|
|
14853
|
+
var theme = useTheme$4();
|
|
14854
|
+
var mode = theme.palette.mode;
|
|
14855
|
+
var trigger = useScrollTrigger({
|
|
14856
|
+
disableHysteresis: true,
|
|
14857
|
+
target: window ? window() : undefined,
|
|
14858
|
+
threshold: 0,
|
|
14859
|
+
});
|
|
14860
|
+
var darkModeStyles = css$2(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n "], ["\n border-bottom: 1px solid ", ";\n "])), (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.borderSecondary);
|
|
14861
|
+
/**
|
|
14862
|
+
* (masoudmanson): Elevation is set to 10 when the user scrolls and 0 otherwise.
|
|
14863
|
+
* MUI's elevation range is 0-24, but in the SDS theme, we have mapped:
|
|
14864
|
+
* - shadow.none to 0
|
|
14865
|
+
* - shadow.S to values 1-8
|
|
14866
|
+
* - shadow.M to values 9-16
|
|
14867
|
+
* - shadow.L to values 17-24
|
|
14868
|
+
*
|
|
14869
|
+
* Since the navigation requires a shadow.M drop shadow based on the design system,
|
|
14870
|
+
* any elevation value between 9 and 16 will produce the same effect.
|
|
14871
|
+
*/
|
|
14872
|
+
return children
|
|
14873
|
+
? React__default.cloneElement(children, {
|
|
14874
|
+
elevation: trigger && shouldElevate ? 14 : 0,
|
|
14875
|
+
sx: trigger && shouldElevate
|
|
14876
|
+
? __assign(__assign({}, (elevationProps.sx || {})), (mode === "dark" && darkModeStyles)) : undefined,
|
|
14877
|
+
})
|
|
14878
|
+
: null;
|
|
14879
|
+
}
|
|
14880
|
+
var templateObject_1$g;
|
|
14881
|
+
|
|
14644
14882
|
var NavigationHeader = forwardRef(function (props, ref) {
|
|
14645
|
-
var
|
|
14883
|
+
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, _b = props.logoLinkComponent, logoLinkComponent = _b === void 0 ? "a" : _b, logoLinkProps = props.logoLinkProps, _c = props.scrollElevation, scrollElevation = _c === void 0 ? true : _c, primaryNavItems = props.primaryNavItems, _d = props.primaryNavPosition, primaryNavPosition = _d === void 0 ? "left" : _d, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _e = props.showSearch, showSearch = _e === void 0 ? true : _e, tag = props.tag, tagColor = props.tagColor, title = props.title, controlledDrawerOpen = props.drawerOpen, onDrawerOpenChange = props.setDrawerOpen, rest = __rest(props, ["activePrimaryNavKey", "buttons", "hasInvertedStyle", "logo", "logoUrl", "logoLinkComponent", "logoLinkProps", "scrollElevation", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title", "drawerOpen", "setDrawerOpen"]);
|
|
14646
14884
|
var navRef = useRef(null);
|
|
14647
14885
|
var theme = useTheme();
|
|
14648
14886
|
var isMdScreen = useMediaQuery(theme.breakpoints.down("md"));
|
|
14887
|
+
// Use controlled or uncontrolled drawer state
|
|
14888
|
+
var _f = useState(false), internalDrawerOpen = _f[0], setInternalDrawerOpen = _f[1];
|
|
14889
|
+
var drawerOpen = controlledDrawerOpen !== null && controlledDrawerOpen !== void 0 ? controlledDrawerOpen : internalDrawerOpen;
|
|
14890
|
+
var setDrawerOpen = function (open) {
|
|
14891
|
+
var newOpen = typeof open === "function" ? open(drawerOpen) : open;
|
|
14892
|
+
if (onDrawerOpenChange) {
|
|
14893
|
+
onDrawerOpenChange(newOpen);
|
|
14894
|
+
}
|
|
14895
|
+
else {
|
|
14896
|
+
setInternalDrawerOpen(newOpen);
|
|
14897
|
+
}
|
|
14898
|
+
};
|
|
14899
|
+
var _g = useState({
|
|
14900
|
+
breakpoint: 0,
|
|
14901
|
+
isNarrow: isMdScreen,
|
|
14902
|
+
}), dimensions = _g[0], setDimensions = _g[1];
|
|
14649
14903
|
useEffect(function () {
|
|
14650
|
-
|
|
14904
|
+
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
14651
14905
|
}, [isMdScreen]);
|
|
14652
|
-
var _d = useState(true), drawerOpen = _d[0], setDrawerOpen = _d[1];
|
|
14653
|
-
var _e = useState(isMdScreen), isNarrow = _e[0], setIsNarrow = _e[1];
|
|
14654
|
-
var _f = useState(0), breakpoint = _f[0], setBreakpoint = _f[1];
|
|
14655
14906
|
var checkScrollable = useCallback(function () {
|
|
14656
14907
|
if (!navRef.current)
|
|
14657
14908
|
return;
|
|
14658
14909
|
var clientWidth = navRef.current.clientWidth;
|
|
14659
14910
|
var scrollWidth = navRef.current.scrollWidth;
|
|
14660
14911
|
var needsScroll = scrollWidth > clientWidth;
|
|
14661
|
-
|
|
14662
|
-
|
|
14663
|
-
|
|
14664
|
-
|
|
14665
|
-
|
|
14912
|
+
setDimensions(function (prev) {
|
|
14913
|
+
var newBreakpoint = needsScroll
|
|
14914
|
+
? prev.breakpoint > scrollWidth
|
|
14915
|
+
? prev.breakpoint
|
|
14916
|
+
: scrollWidth
|
|
14917
|
+
: prev.breakpoint;
|
|
14918
|
+
var newIsNarrow = prev.isNarrow
|
|
14919
|
+
? clientWidth < newBreakpoint
|
|
14920
|
+
? true
|
|
14921
|
+
: false
|
|
14922
|
+
: needsScroll;
|
|
14923
|
+
return {
|
|
14924
|
+
breakpoint: newBreakpoint,
|
|
14925
|
+
isNarrow: newIsNarrow,
|
|
14926
|
+
};
|
|
14927
|
+
});
|
|
14928
|
+
}, []);
|
|
14666
14929
|
useEffect(function () {
|
|
14667
14930
|
checkScrollable();
|
|
14668
14931
|
var resizeObserver = new ResizeObserver(checkScrollable);
|
|
@@ -14670,46 +14933,59 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
14670
14933
|
resizeObserver.observe(navRef.current);
|
|
14671
14934
|
}
|
|
14672
14935
|
return function () { return resizeObserver.disconnect(); };
|
|
14673
|
-
}, [
|
|
14936
|
+
}, [checkScrollable]);
|
|
14674
14937
|
var renderSearch = function () {
|
|
14675
|
-
return (showSearch && (jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, searchProps))));
|
|
14938
|
+
return (showSearch && (jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, searchProps))));
|
|
14676
14939
|
};
|
|
14677
14940
|
var renderLogoNode = function () {
|
|
14678
|
-
var logoNode = (jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(StyledLogoWrapper, { children: logo }), jsx("p", { children: title }), tag && jsx(StyledTag, { color: tagColor, label: tag, hover: false })] }));
|
|
14941
|
+
var logoNode = (jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logo && jsx(StyledLogoWrapper, { children: logo }), jsxs(StyledTitleTagWrapper, { children: [title && jsx("p", { children: title }), tag && jsx(StyledTag$1, { color: tagColor, label: tag, hover: false })] })] }));
|
|
14679
14942
|
if (logoLinkComponent || logoUrl) {
|
|
14680
|
-
logoNode = (jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: isNarrow, children: logoNode })));
|
|
14943
|
+
logoNode = (jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: dimensions.isNarrow, children: logoNode })));
|
|
14681
14944
|
}
|
|
14682
14945
|
return logoNode;
|
|
14683
14946
|
};
|
|
14684
14947
|
var renderPrimaryNav = function () {
|
|
14685
|
-
return (
|
|
14686
|
-
setActivePrimaryNavKey &&
|
|
14948
|
+
return (setActivePrimaryNavKey &&
|
|
14687
14949
|
primaryNavItems &&
|
|
14688
|
-
primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow })));
|
|
14950
|
+
primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
14689
14951
|
};
|
|
14690
14952
|
var renderSecondaryNav = function () {
|
|
14691
14953
|
return (secondaryNavItems &&
|
|
14692
|
-
secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow })));
|
|
14954
|
+
secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
14693
14955
|
};
|
|
14694
14956
|
var renderButtonsNode = function () {
|
|
14695
14957
|
if (!buttons || buttons.length === 0)
|
|
14696
14958
|
return null;
|
|
14697
|
-
return (jsx(StyledButtonSection, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: buttons.map(function (buttonProps, idx) { return renderButton(buttonProps, idx); }) }));
|
|
14959
|
+
return (jsx(StyledButtonSection, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: buttons.map(function (buttonProps, idx) { return renderButton(buttonProps, idx); }) }));
|
|
14698
14960
|
};
|
|
14699
14961
|
var renderButton = function (buttonProps, idx) {
|
|
14700
|
-
var
|
|
14962
|
+
var _a;
|
|
14701
14963
|
var key = "button-".concat(idx);
|
|
14702
|
-
var fullWidth = isNarrow ? { width: "100%" } : undefined;
|
|
14703
|
-
if (
|
|
14704
|
-
return
|
|
14964
|
+
var fullWidth = dimensions.isNarrow ? { width: "100%" } : undefined;
|
|
14965
|
+
if (React__default.isValidElement(buttonProps)) {
|
|
14966
|
+
return React__default.cloneElement(buttonProps, {
|
|
14967
|
+
hasInvertedStyle: hasInvertedStyle,
|
|
14968
|
+
key: key,
|
|
14969
|
+
sx: __assign(__assign({}, (((_a = buttonProps.props) === null || _a === void 0 ? void 0 : _a.sx) || {})), fullWidth),
|
|
14970
|
+
});
|
|
14705
14971
|
}
|
|
14706
|
-
if (
|
|
14707
|
-
|
|
14972
|
+
if (typeof buttonProps === "object" && buttonProps !== null) {
|
|
14973
|
+
var buttonPropsObj = buttonProps;
|
|
14974
|
+
var isIconButton = "icon" in buttonPropsObj;
|
|
14975
|
+
if (isIconButton && dimensions.isNarrow && buttonPropsObj.icon) {
|
|
14976
|
+
return renderNarrowIconButton(buttonPropsObj, key, fullWidth);
|
|
14977
|
+
}
|
|
14978
|
+
if (isIconButton && !dimensions.isNarrow) {
|
|
14979
|
+
return renderWideIconButton(buttonPropsObj, key);
|
|
14980
|
+
}
|
|
14981
|
+
return renderDefaultButton(buttonPropsObj, key, fullWidth);
|
|
14708
14982
|
}
|
|
14709
|
-
return
|
|
14983
|
+
return null;
|
|
14984
|
+
};
|
|
14985
|
+
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsx(StyledNarrowIconButton, __assign({ sx: fullWidth, isAllCaps: false, startIcon: jsx(Icon, { sdsSize: "s", sdsIcon: "Person" }), hasInvertedStyle: hasInvertedStyle }, buttonProps, { sdsStyle: "minimal", sdsType: "secondary", children: buttonProps.children }), key)); };
|
|
14986
|
+
var renderWideIconButton = function (buttonProps, key) {
|
|
14987
|
+
return (jsx(StyledWideIconButton, __assign({ sdsIconProps: { sdsSize: "l" }, "aria-label": String(buttonProps.children), hasInvertedStyle: hasInvertedStyle }, buttonProps, { sdsStyle: "icon", sdsType: "secondary", icon: buttonProps.icon }), key));
|
|
14710
14988
|
};
|
|
14711
|
-
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsx(StyledNarrowIconButton, { sx: fullWidth, sdsStyle: "minimal", sdsType: "secondary", isAllCaps: false, startIcon: jsx(Icon, { sdsSize: "s", sdsIcon: "Person" }), hasInvertedStyle: hasInvertedStyle, children: buttonProps.children }, key)); };
|
|
14712
|
-
var renderWideIconButton = function (buttonProps, key) { return (jsx(StyledWideIconButton, { sdsIconProps: { sdsSize: "l" }, sdsStyle: "icon", sdsType: "secondary", icon: buttonProps.icon, "aria-label": String(buttonProps.children), hasInvertedStyle: hasInvertedStyle }, key)); };
|
|
14713
14989
|
var renderDefaultButton = function (buttonProps, key, fullWidth) { return (jsx(StyledHeaderButton, __assign({ sx: fullWidth }, buttonProps, { sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle }), key)); };
|
|
14714
14990
|
var renderHeaderContent = function () {
|
|
14715
14991
|
var logoNode = renderLogoNode();
|
|
@@ -14717,14 +14993,14 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
14717
14993
|
var primaryNav = renderPrimaryNav();
|
|
14718
14994
|
var secondaryNav = renderSecondaryNav();
|
|
14719
14995
|
var buttonsNode = renderButtonsNode();
|
|
14720
|
-
return (jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [logoNode, !isNarrow && (jsxs(Fragment, { children: [jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: isNarrow, children: primaryNavPosition === "left" ? (jsxs(Fragment, { children: [primaryNav, search] })) : (jsxs(Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), isNarrow && (jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); } }))] }));
|
|
14996
|
+
return (jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logoNode, !dimensions.isNarrow && (jsxs(Fragment, { children: [jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: dimensions.isNarrow, children: primaryNavPosition === "left" ? (jsxs(Fragment, { children: [primaryNav, search] })) : (jsxs(Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), dimensions.isNarrow && (jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); }, hasInvertedStyle: hasInvertedStyle }))] }));
|
|
14721
14997
|
};
|
|
14722
14998
|
var headerContent = renderHeaderContent();
|
|
14723
14999
|
var search = renderSearch();
|
|
14724
15000
|
var primaryNav = renderPrimaryNav();
|
|
14725
15001
|
var secondaryNav = renderSecondaryNav();
|
|
14726
15002
|
var buttonsNode = renderButtonsNode();
|
|
14727
|
-
return (jsxs(
|
|
15003
|
+
return (jsxs(Fragment, { children: [jsx(ElevationScroll, __assign({}, props, { shouldElevate: scrollElevation, children: jsx(StyledAppBar, __assign({ elevation: 0, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0, position: "sticky" }, rest, { children: headerContent })) })), dimensions.isNarrow && drawerOpen && (jsxs(StyledDrawer$1, { anchor: "right", open: drawerOpen, onClose: function () { return setDrawerOpen(false); }, hasInvertedStyle: hasInvertedStyle, role: "dialog", "aria-label": "Navigation menu", children: [jsxs("div", { children: [jsx(ElevationScroll, __assign({}, props, { shouldElevate: scrollElevation, children: jsx(StyledAppBar, __assign({ elevation: 10, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0 }, rest, { position: "sticky", children: headerContent })) })), search, primaryNav, secondaryNav] }), buttonsNode] }))] }));
|
|
14728
15004
|
});
|
|
14729
15005
|
|
|
14730
15006
|
/**
|