@czi-sds/components 22.2.1 → 22.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.d.ts +107 -13
- package/dist/index.cjs.js +921 -354
- package/dist/index.esm.d.ts +107 -13
- package/dist/index.esm.js +917 -357
- package/dist/tailwind.json +18 -18
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +18 -18
- package/dist/variables.scss +18 -18
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, createContext, Fragment as Fragment$1, useContext } from 'react';
|
|
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, 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,
|
|
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, CardActionArea, 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';
|
|
7
|
+
export { CardMedia as ContentCardMedia } from '@mui/material';
|
|
7
8
|
import styled$2 from '@emotion/styled';
|
|
8
9
|
import { Check, Remove, Clear } from '@mui/icons-material';
|
|
9
10
|
import { css as css$1 } from '@emotion/css';
|
|
@@ -967,16 +968,16 @@ var SDSPaletteLight = function (appTheme) {
|
|
|
967
968
|
backgroundSecondary: appTheme.colors.gray[100],
|
|
968
969
|
backgroundSecondaryInverse: appTheme.colors.gray[700],
|
|
969
970
|
backgroundTertiary: appTheme.colors.gray[200],
|
|
970
|
-
border: appTheme.colors.gray[600],
|
|
971
|
-
borderDisabled: appTheme.colors.gray[300],
|
|
972
|
-
borderDisabledInverse: appTheme.colors.gray[600],
|
|
973
|
-
borderHover: appTheme.colors.gray[900],
|
|
974
|
-
borderHoverInverse: appTheme.colors.gray[50],
|
|
975
|
-
borderInverse: appTheme.colors.gray[300],
|
|
976
971
|
borderOnFill: appTheme.colors.gray[50],
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
972
|
+
borderPrimary: appTheme.colors.gray[600],
|
|
973
|
+
borderPrimaryDisabled: appTheme.colors.gray[300],
|
|
974
|
+
borderPrimaryDisabledInverse: appTheme.colors.gray[600],
|
|
975
|
+
borderPrimaryHover: appTheme.colors.gray[900],
|
|
976
|
+
borderPrimaryHoverInverse: appTheme.colors.gray[50],
|
|
977
|
+
borderPrimaryInverse: appTheme.colors.gray[300],
|
|
978
|
+
borderPrimaryPressed: appTheme.colors.gray[900],
|
|
979
|
+
borderPrimaryPressedInverse: appTheme.colors.gray[50],
|
|
980
|
+
borderSecondary: appTheme.colors.gray[300],
|
|
980
981
|
divider: appTheme.colors.gray[200],
|
|
981
982
|
dividerInverse: appTheme.colors.gray[600],
|
|
982
983
|
fillDisabled: appTheme.colors.gray[200],
|
|
@@ -1103,16 +1104,16 @@ var SDSPaletteDark = function (appTheme) {
|
|
|
1103
1104
|
backgroundSecondary: appTheme.colors.gray[100],
|
|
1104
1105
|
backgroundSecondaryInverse: appTheme.colors.gray[700],
|
|
1105
1106
|
backgroundTertiary: appTheme.colors.gray[200],
|
|
1106
|
-
border: appTheme.colors.gray[600],
|
|
1107
|
-
borderDisabled: appTheme.colors.gray[300],
|
|
1108
|
-
borderDisabledInverse: appTheme.colors.gray[600],
|
|
1109
|
-
borderHover: appTheme.colors.gray[900],
|
|
1110
|
-
borderHoverInverse: appTheme.colors.gray[50],
|
|
1111
|
-
borderInverse: appTheme.colors.gray[300],
|
|
1112
1107
|
borderOnFill: appTheme.colors.gray[50],
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1108
|
+
borderPrimary: appTheme.colors.gray[600],
|
|
1109
|
+
borderPrimaryDisabled: appTheme.colors.gray[300],
|
|
1110
|
+
borderPrimaryDisabledInverse: appTheme.colors.gray[600],
|
|
1111
|
+
borderPrimaryHover: appTheme.colors.gray[900],
|
|
1112
|
+
borderPrimaryHoverInverse: appTheme.colors.gray[50],
|
|
1113
|
+
borderPrimaryInverse: appTheme.colors.gray[300],
|
|
1114
|
+
borderPrimaryPressed: appTheme.colors.gray[900],
|
|
1115
|
+
borderPrimaryPressedInverse: appTheme.colors.gray[50],
|
|
1116
|
+
borderSecondary: appTheme.colors.gray[300],
|
|
1116
1117
|
divider: appTheme.colors.gray[200],
|
|
1117
1118
|
dividerInverse: appTheme.colors.gray[600],
|
|
1118
1119
|
fillDisabled: appTheme.colors.gray[200],
|
|
@@ -1535,7 +1536,7 @@ var getBreakpoints = function (_a) {
|
|
|
1535
1536
|
function focusVisibleA11yStyle(props) {
|
|
1536
1537
|
var _a;
|
|
1537
1538
|
var semanticColors = getSemanticColors(props);
|
|
1538
|
-
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
1539
|
+
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, ";\n outline-offset: 1px;\n }\n ");
|
|
1539
1540
|
}
|
|
1540
1541
|
|
|
1541
1542
|
var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
@@ -1548,7 +1549,7 @@ var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
|
1548
1549
|
return null;
|
|
1549
1550
|
var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
|
|
1550
1551
|
if (isNarrow) {
|
|
1551
|
-
return css(templateObject_1$
|
|
1552
|
+
return css(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowBody[fontWeight][fontSize], bodyFontFamily));
|
|
1552
1553
|
}
|
|
1553
1554
|
return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
|
|
1554
1555
|
};
|
|
@@ -1573,8 +1574,8 @@ var fontCaps = function (fontSize, isNarrow) {
|
|
|
1573
1574
|
if (!typography)
|
|
1574
1575
|
return null;
|
|
1575
1576
|
var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
|
|
1576
|
-
return css(templateObject_3$
|
|
1577
|
-
? css(templateObject_2$
|
|
1577
|
+
return css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n "], ["\n text-transform: uppercase;\n\n ", "\n "])), isNarrow
|
|
1578
|
+
? 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));
|
|
1578
1579
|
};
|
|
1579
1580
|
};
|
|
1580
1581
|
var fontCapsXxs = fontCaps("xxs");
|
|
@@ -1589,7 +1590,7 @@ var fontHeader = function (fontSize, isNarrow) {
|
|
|
1589
1590
|
return null;
|
|
1590
1591
|
var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
|
|
1591
1592
|
if (isNarrow) {
|
|
1592
|
-
return css(templateObject_4$
|
|
1593
|
+
return css(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowHeader.semibold[fontSize], headerFontFamily));
|
|
1593
1594
|
}
|
|
1594
1595
|
return themeToCss(header.semibold[fontSize], headerFontFamily);
|
|
1595
1596
|
};
|
|
@@ -1612,7 +1613,7 @@ var fontCode = function (fontSize, fontWeight, isNarrow) {
|
|
|
1612
1613
|
return null;
|
|
1613
1614
|
var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
|
|
1614
1615
|
if (isNarrow) {
|
|
1615
|
-
return css(templateObject_5$
|
|
1616
|
+
return css(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowCode[fontWeight][fontSize], codeFontFamily));
|
|
1616
1617
|
}
|
|
1617
1618
|
return themeToCss(code[fontWeight][fontSize], codeFontFamily);
|
|
1618
1619
|
};
|
|
@@ -1630,8 +1631,8 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
|
|
|
1630
1631
|
if (!typography)
|
|
1631
1632
|
return null;
|
|
1632
1633
|
var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
|
|
1633
|
-
return css(templateObject_7$
|
|
1634
|
-
? css(templateObject_6$
|
|
1634
|
+
return css(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
|
|
1635
|
+
? 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));
|
|
1635
1636
|
};
|
|
1636
1637
|
};
|
|
1637
1638
|
var fontTabularXs = fontTabular("xs", "regular");
|
|
@@ -1640,33 +1641,33 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
|
|
|
1640
1641
|
var fontTabularSemiboldS = fontTabular("s", "semibold");
|
|
1641
1642
|
function themeToCss(fontTheme, fontFamily) {
|
|
1642
1643
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1643
|
-
return css(templateObject_8$
|
|
1644
|
+
return css(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "], ["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
|
|
1644
1645
|
}
|
|
1645
|
-
var templateObject_1$
|
|
1646
|
+
var templateObject_1$19, templateObject_2$N, templateObject_3$C, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$g, templateObject_8$d;
|
|
1646
1647
|
|
|
1647
|
-
var StyledAccordionDetails = styled$2(AccordionDetails$1)(templateObject_2$
|
|
1648
|
+
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) {
|
|
1648
1649
|
var spaces = getSpaces(props);
|
|
1649
|
-
return css(templateObject_1$
|
|
1650
|
+
return css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n padding: ", "px ", "px ", "px;\n "], ["\n padding: ", "px ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
1650
1651
|
});
|
|
1651
|
-
var templateObject_1$
|
|
1652
|
+
var templateObject_1$18, templateObject_2$M;
|
|
1652
1653
|
|
|
1653
1654
|
var AccordionDetails = function (props) {
|
|
1654
1655
|
var children = props.children;
|
|
1655
1656
|
return jsx(StyledAccordionDetails, { children: children });
|
|
1656
1657
|
};
|
|
1657
1658
|
|
|
1658
|
-
var StyledAccordionHeader = styled$2(AccordionSummary)(templateObject_2$
|
|
1659
|
+
var StyledAccordionHeader = styled$2(AccordionSummary)(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
|
|
1659
1660
|
var _a, _b;
|
|
1660
1661
|
var spaces = getSpaces(props);
|
|
1661
1662
|
var semanticColors = getSemanticColors(props);
|
|
1662
|
-
return css(templateObject_1$
|
|
1663
|
+
return css(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, 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);
|
|
1663
1664
|
});
|
|
1664
|
-
var StyledSubtitle = styled$2("p")(templateObject_4$
|
|
1665
|
+
var StyledSubtitle = styled$2("p")(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1665
1666
|
var _a;
|
|
1666
1667
|
var semanticColors = getSemanticColors(props);
|
|
1667
|
-
return css(templateObject_3$
|
|
1668
|
+
return css(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
|
|
1668
1669
|
});
|
|
1669
|
-
var templateObject_1$
|
|
1670
|
+
var templateObject_1$17, templateObject_2$L, templateObject_3$B, templateObject_4$u;
|
|
1670
1671
|
|
|
1671
1672
|
var _path$26, _path2$C, _path3$6;
|
|
1672
1673
|
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); }
|
|
@@ -4376,22 +4377,22 @@ var iconMap = {
|
|
|
4376
4377
|
},
|
|
4377
4378
|
};
|
|
4378
4379
|
|
|
4379
|
-
var doNotForwardProps$
|
|
4380
|
+
var doNotForwardProps$F = ["sdsIcon", "sdsSize", "iconColor"];
|
|
4380
4381
|
/**
|
|
4381
4382
|
* @see https://mui.com/material-ui/icons/#svgicon
|
|
4382
4383
|
*/
|
|
4383
4384
|
var StyledSvgIcon = styled$2(SvgIcon, {
|
|
4384
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4385
|
-
})(templateObject_2$
|
|
4385
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$F.includes(prop); },
|
|
4386
|
+
})(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4386
4387
|
var _a, _b, _c;
|
|
4387
4388
|
var mode = getMode(props);
|
|
4388
4389
|
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;
|
|
4389
4390
|
var iconSizes = getIconSizes(props);
|
|
4390
4391
|
var colors = getColors(props);
|
|
4391
|
-
return css(templateObject_1
|
|
4392
|
+
return css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "], ["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade], (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _c === void 0 ? void 0 : _c.width);
|
|
4392
4393
|
});
|
|
4393
|
-
var StyledIcon$1 = styled$2("div")(templateObject_3$
|
|
4394
|
-
var templateObject_1
|
|
4394
|
+
var StyledIcon$1 = styled$2("div")(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
|
|
4395
|
+
var templateObject_1$16, templateObject_2$K, templateObject_3$A;
|
|
4395
4396
|
|
|
4396
4397
|
/**
|
|
4397
4398
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4422,24 +4423,24 @@ var StyledAccordion$1 = styled$2(Accordion$1, {
|
|
|
4422
4423
|
shouldForwardProp: function (prop) {
|
|
4423
4424
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4424
4425
|
},
|
|
4425
|
-
})(templateObject_2$
|
|
4426
|
+
})(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4426
4427
|
var _a, _b;
|
|
4427
4428
|
var useDivider = props.useDivider, togglePosition = props.togglePosition;
|
|
4428
4429
|
var shadows = getShadows(props);
|
|
4429
4430
|
var typography = getTypography(props);
|
|
4430
4431
|
var borders = getBorders(props);
|
|
4431
4432
|
var spaces = getSpaces(props);
|
|
4432
|
-
return css(templateObject_1$
|
|
4433
|
+
return css(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), 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));
|
|
4433
4434
|
});
|
|
4434
4435
|
var leftPosition = function (props) {
|
|
4435
4436
|
var _a, _b, _c;
|
|
4436
4437
|
var spaces = getSpaces(props);
|
|
4437
4438
|
var iconSizes = getIconSizes(props);
|
|
4438
|
-
return css(templateObject_3$
|
|
4439
|
+
return css(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\n\n &.", " {\n transform: rotate(0deg);\n }\n }\n }\n\n /** This is to adjust the padding of the AccordionDetails when the togglePosition is left\n * The padding-left is the sum of the\n * left padding of the AccordionButton = spaces?.m\n * the width of the expandIcon = iconSizes?.xs.width\n * and the left padding of the AccordionSummary = spaces?.s \n */\n & .", " {\n padding-left: ", "px;\n }\n }\n "], ["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\n\n &.", " {\n transform: rotate(0deg);\n }\n }\n }\n\n /** This is to adjust the padding of the AccordionDetails when the togglePosition is left\n * The padding-left is the sum of the\n * left padding of the AccordionButton = spaces?.m\n * the width of the expandIcon = iconSizes?.xs.width\n * and the left padding of the AccordionSummary = spaces?.s \n */\n & .", " {\n padding-left: ", "px;\n }\n }\n "])), 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) +
|
|
4439
4440
|
((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
|
|
4440
4441
|
((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
|
|
4441
4442
|
};
|
|
4442
|
-
var templateObject_1$
|
|
4443
|
+
var templateObject_1$15, templateObject_2$J, templateObject_3$z;
|
|
4443
4444
|
|
|
4444
4445
|
/**
|
|
4445
4446
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4455,7 +4456,7 @@ var Accordion = React__default.forwardRef(function (props, ref) {
|
|
|
4455
4456
|
return (jsx(StyledAccordion$1, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
|
|
4456
4457
|
});
|
|
4457
4458
|
|
|
4458
|
-
var StyledAlert = styled$2(Alert$2)(templateObject_1$
|
|
4459
|
+
var StyledAlert = styled$2(Alert$2)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4459
4460
|
var _a;
|
|
4460
4461
|
var colors = getColors(props);
|
|
4461
4462
|
var spaces = getSpaces(props);
|
|
@@ -4482,7 +4483,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4482
4483
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4483
4484
|
}
|
|
4484
4485
|
}
|
|
4485
|
-
var templateObject_1$
|
|
4486
|
+
var templateObject_1$14;
|
|
4486
4487
|
|
|
4487
4488
|
/**
|
|
4488
4489
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4510,6 +4511,20 @@ function filterProps(props, excludeProps) {
|
|
|
4510
4511
|
}
|
|
4511
4512
|
return result;
|
|
4512
4513
|
}
|
|
4514
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4515
|
+
var mergeRefs = function (refs) {
|
|
4516
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4517
|
+
return function (element) {
|
|
4518
|
+
refs.forEach(function (ref) {
|
|
4519
|
+
if (typeof ref === "function") {
|
|
4520
|
+
ref(element);
|
|
4521
|
+
}
|
|
4522
|
+
else if (ref != null) {
|
|
4523
|
+
ref.current = element;
|
|
4524
|
+
}
|
|
4525
|
+
});
|
|
4526
|
+
};
|
|
4527
|
+
};
|
|
4513
4528
|
|
|
4514
4529
|
var _a;
|
|
4515
4530
|
var SDSWarningTypes;
|
|
@@ -4524,6 +4539,8 @@ var SDSWarningTypes;
|
|
|
4524
4539
|
SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
|
|
4525
4540
|
SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
|
|
4526
4541
|
SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
|
|
4542
|
+
SDSWarningTypes["ContentCardActionsOnlyButtons"] = "contentCardActionsOnlyButtons";
|
|
4543
|
+
SDSWarningTypes["ClickableContentCardNumberOfButtons"] = "clickableContentCardNumberOfButtons";
|
|
4527
4544
|
})(SDSWarningTypes || (SDSWarningTypes = {}));
|
|
4528
4545
|
var SDS_WARNINGS = (_a = {},
|
|
4529
4546
|
_a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
|
|
@@ -4566,6 +4583,14 @@ var SDS_WARNINGS = (_a = {},
|
|
|
4566
4583
|
hasWarned: false,
|
|
4567
4584
|
message: "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
|
|
4568
4585
|
},
|
|
4586
|
+
_a[SDSWarningTypes.ContentCardActionsOnlyButtons] = {
|
|
4587
|
+
hasWarned: false,
|
|
4588
|
+
message: "Warning: Only SDS buttons could be used within ContentCard Actions component slot!",
|
|
4589
|
+
},
|
|
4590
|
+
_a[SDSWarningTypes.ClickableContentCardNumberOfButtons] = {
|
|
4591
|
+
hasWarned: false,
|
|
4592
|
+
message: "Warning: Clickable Content Cards can only have one or no buttons!",
|
|
4593
|
+
},
|
|
4569
4594
|
_a);
|
|
4570
4595
|
var showWarningIfFirstOccurence = function (warningType) {
|
|
4571
4596
|
if (!(warningType in SDS_WARNINGS)) {
|
|
@@ -4583,7 +4608,7 @@ var showWarningIfFirstOccurence = function (warningType) {
|
|
|
4583
4608
|
SDS_WARNINGS[warningType].hasWarned = true;
|
|
4584
4609
|
};
|
|
4585
4610
|
|
|
4586
|
-
var doNotForwardProps$
|
|
4611
|
+
var doNotForwardProps$E = [
|
|
4587
4612
|
"isAllCaps",
|
|
4588
4613
|
"isRounded",
|
|
4589
4614
|
"sdsStyle",
|
|
@@ -4617,16 +4642,17 @@ var ButtonStyles = function (props) {
|
|
|
4617
4642
|
: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
|
|
4618
4643
|
var disabledBackgroundColor = variant === "outlined" ? "transparent" : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillDisabled;
|
|
4619
4644
|
var disabledBorder = variant === "outlined"
|
|
4620
|
-
? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.
|
|
4645
|
+
? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimaryDisabled)
|
|
4621
4646
|
: "none";
|
|
4622
4647
|
var boxshadow = variant === "outlined"
|
|
4623
4648
|
? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
|
|
4624
4649
|
: "none";
|
|
4625
|
-
|
|
4650
|
+
fontBody("xs", "semibold");
|
|
4651
|
+
return css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), backgroundColor, boxshadow, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.ornamentPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.ornamentDisabled, 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);
|
|
4626
4652
|
};
|
|
4627
4653
|
var Rounded = function (props) {
|
|
4628
4654
|
var corners = getCorners(props);
|
|
4629
|
-
return css(templateObject_2$
|
|
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);
|
|
4630
4656
|
};
|
|
4631
4657
|
var DestructiveButton = function (props) {
|
|
4632
4658
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4645,13 +4671,13 @@ var DestructiveButton = function (props) {
|
|
|
4645
4671
|
var boxshadow = variant === "outlined"
|
|
4646
4672
|
? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
|
|
4647
4673
|
: "none";
|
|
4648
|
-
return css(templateObject_3$
|
|
4674
|
+
return css(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), boxshadow, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.ornamentPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.ornamentDisabled);
|
|
4649
4675
|
};
|
|
4650
4676
|
var StyledButton$3 = styled$2(Button$1, {
|
|
4651
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4652
|
-
})(templateObject_5$
|
|
4677
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4678
|
+
})(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4653
4679
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4654
|
-
return css(templateObject_4$
|
|
4680
|
+
return css(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
|
|
4655
4681
|
});
|
|
4656
4682
|
// Minimal Button Styles
|
|
4657
4683
|
var Minimal = function (props) {
|
|
@@ -4660,60 +4686,60 @@ var Minimal = function (props) {
|
|
|
4660
4686
|
var spaces = getSpaces(props);
|
|
4661
4687
|
var iconSizes = getIconSizes(props);
|
|
4662
4688
|
var semanticColors = getSemanticColors(props);
|
|
4663
|
-
return css(templateObject_6$
|
|
4689
|
+
return css(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, 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);
|
|
4664
4690
|
};
|
|
4665
4691
|
var PrimaryMinimalButton = function (props) {
|
|
4666
4692
|
var _a, _b;
|
|
4667
4693
|
var semanticColors = getSemanticColors(props);
|
|
4668
|
-
return css(templateObject_7$
|
|
4694
|
+
return css(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
|
|
4669
4695
|
};
|
|
4670
4696
|
var SecondaryMinimalButton = function (props) {
|
|
4671
4697
|
var _a, _b;
|
|
4672
4698
|
var semanticColors = getSemanticColors(props);
|
|
4673
|
-
return css(templateObject_8$
|
|
4699
|
+
return css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
|
|
4674
4700
|
};
|
|
4675
4701
|
var StyledMinimalButton = styled$2(Button$1, {
|
|
4676
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4677
|
-
})(templateObject_10$
|
|
4702
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4703
|
+
})(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4678
4704
|
var sdsType = props.sdsType;
|
|
4679
|
-
return css(templateObject_9$
|
|
4705
|
+
return css(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4680
4706
|
});
|
|
4681
4707
|
var StyledButtonLegacy = styled$2(Button$1, {
|
|
4682
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4683
|
-
})(templateObject_11$
|
|
4708
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4709
|
+
})(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4684
4710
|
if (!props.isRounded)
|
|
4685
4711
|
return "";
|
|
4686
4712
|
var corners = getCorners(props);
|
|
4687
4713
|
var spaces = getSpaces(props);
|
|
4688
4714
|
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 ");
|
|
4689
4715
|
});
|
|
4690
|
-
var templateObject_1$
|
|
4716
|
+
var templateObject_1$13, templateObject_2$I, templateObject_3$y, templateObject_4$t, templateObject_5$o, templateObject_6$k, templateObject_7$f, templateObject_8$c, templateObject_9$7, templateObject_10$5, templateObject_11$4;
|
|
4691
4717
|
|
|
4692
4718
|
var isDisabled$1 = function (props) {
|
|
4693
4719
|
var _a, _b;
|
|
4694
4720
|
var semanticColors = getSemanticColors(props);
|
|
4695
|
-
return css(templateObject_1$
|
|
4721
|
+
return css(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled);
|
|
4696
4722
|
};
|
|
4697
4723
|
var primary$2 = function (props) {
|
|
4698
4724
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4699
4725
|
var semanticColors = getSemanticColors(props);
|
|
4700
|
-
return css(templateObject_2$
|
|
4726
|
+
return css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
|
|
4701
4727
|
};
|
|
4702
4728
|
var secondary$2 = function (props) {
|
|
4703
4729
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4704
4730
|
var semanticColors = getSemanticColors(props);
|
|
4705
|
-
return css(templateObject_3$
|
|
4731
|
+
return css(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
|
|
4706
4732
|
};
|
|
4707
4733
|
var tertiary = function (props) {
|
|
4708
4734
|
var _a, _b, _c, _d, _e, _f;
|
|
4709
4735
|
var semanticColors = getSemanticColors(props);
|
|
4710
|
-
return css(templateObject_4$
|
|
4736
|
+
return css(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryPressed);
|
|
4711
4737
|
};
|
|
4712
4738
|
var small$1 = function (props) {
|
|
4713
4739
|
var sdsType = props.sdsType;
|
|
4714
4740
|
var iconSizes = getIconSizes(props);
|
|
4715
4741
|
var spaces = getSpaces(props);
|
|
4716
|
-
return css(templateObject_5$
|
|
4742
|
+
return css(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4717
4743
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;")
|
|
4718
4744
|
: "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4719
4745
|
};
|
|
@@ -4721,7 +4747,7 @@ var medium$1 = function (props) {
|
|
|
4721
4747
|
var sdsType = props.sdsType;
|
|
4722
4748
|
var iconSizes = getIconSizes(props);
|
|
4723
4749
|
var spaces = getSpaces(props);
|
|
4724
|
-
return css(templateObject_6$
|
|
4750
|
+
return css(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4725
4751
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;")
|
|
4726
4752
|
: "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4727
4753
|
};
|
|
@@ -4729,11 +4755,11 @@ var large = function (props) {
|
|
|
4729
4755
|
var sdsType = props.sdsType;
|
|
4730
4756
|
var iconSizes = getIconSizes(props);
|
|
4731
4757
|
var spaces = getSpaces(props);
|
|
4732
|
-
return css(templateObject_7$
|
|
4758
|
+
return css(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4733
4759
|
? "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;")
|
|
4734
4760
|
: "", 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;") : "");
|
|
4735
4761
|
};
|
|
4736
|
-
var doNotForwardProps$
|
|
4762
|
+
var doNotForwardProps$D = [
|
|
4737
4763
|
"on",
|
|
4738
4764
|
"sdsSize",
|
|
4739
4765
|
"sdsType",
|
|
@@ -4743,12 +4769,12 @@ var doNotForwardProps$w = [
|
|
|
4743
4769
|
"customTheme",
|
|
4744
4770
|
];
|
|
4745
4771
|
var StyledButtonIcon = styled$2(IconButton, {
|
|
4746
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4747
|
-
})(templateObject_9$
|
|
4772
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
4773
|
+
})(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4748
4774
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4749
|
-
return css(templateObject_8$
|
|
4775
|
+
return css(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
4750
4776
|
});
|
|
4751
|
-
var templateObject_1$
|
|
4777
|
+
var templateObject_1$12, templateObject_2$H, templateObject_3$x, templateObject_4$s, templateObject_5$n, templateObject_6$j, templateObject_7$e, templateObject_8$b, templateObject_9$6;
|
|
4752
4778
|
|
|
4753
4779
|
var ButtonIconSizeToSdsIconSize = {
|
|
4754
4780
|
large: "xl",
|
|
@@ -4846,7 +4872,7 @@ var Button = React__default.forwardRef(function (props, ref) {
|
|
|
4846
4872
|
}
|
|
4847
4873
|
});
|
|
4848
4874
|
|
|
4849
|
-
var doNotForwardProps$
|
|
4875
|
+
var doNotForwardProps$C = [
|
|
4850
4876
|
"sdsStyle",
|
|
4851
4877
|
"intent",
|
|
4852
4878
|
"handleSubmit",
|
|
@@ -4857,39 +4883,39 @@ var rounded$3 = function (props) {
|
|
|
4857
4883
|
var _a;
|
|
4858
4884
|
var corners = getCorners(props);
|
|
4859
4885
|
var semanticColors = getSemanticColors(props);
|
|
4860
|
-
return css(templateObject_1$
|
|
4886
|
+
return css(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "], ["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "])), 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);
|
|
4861
4887
|
};
|
|
4862
4888
|
var applyIntentColor$2 = function (props, intent) {
|
|
4863
4889
|
var _a, _b, _c, _d;
|
|
4864
4890
|
var semanticColors = getSemanticColors(props);
|
|
4865
4891
|
var borders = getBorders(props);
|
|
4866
|
-
return css(templateObject_2$
|
|
4892
|
+
return css(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), 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);
|
|
4867
4893
|
};
|
|
4868
4894
|
var disabledStyled$2 = function (props) {
|
|
4869
4895
|
var _a, _b, _c, _d, _e;
|
|
4870
4896
|
var semanticColors = getSemanticColors(props);
|
|
4871
|
-
return css(templateObject_3$
|
|
4897
|
+
return css(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), 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);
|
|
4872
4898
|
};
|
|
4873
|
-
var StyledLabel$3 = styled$2("label")(templateObject_4$
|
|
4899
|
+
var StyledLabel$3 = styled$2("label")(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4874
4900
|
var spaces = getSpaces(props);
|
|
4875
4901
|
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 ");
|
|
4876
4902
|
});
|
|
4877
4903
|
var StyledSearchBase = styled$2(TextField, {
|
|
4878
4904
|
shouldForwardProp: function (prop) {
|
|
4879
|
-
return !doNotForwardProps$
|
|
4905
|
+
return !doNotForwardProps$C.includes(prop.toString());
|
|
4880
4906
|
},
|
|
4881
|
-
})(templateObject_6$
|
|
4907
|
+
})(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4882
4908
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
4883
4909
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4884
4910
|
var spaces = getSpaces(props);
|
|
4885
4911
|
var iconSizes = getIconSizes(props);
|
|
4886
4912
|
var semanticColors = getSemanticColors(props);
|
|
4887
|
-
return css(templateObject_5$
|
|
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, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimary, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillPressed, 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, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, outlinedInputClasses.notchedOutline, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.borderPrimaryHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.ornamentFocus, outlinedInputClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.borderPrimaryHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
|
|
4888
4914
|
});
|
|
4889
|
-
var StyledInputAdornment = styled$2(InputAdornment)(templateObject_7$
|
|
4890
|
-
var templateObject_1$
|
|
4915
|
+
var StyledInputAdornment = styled$2(InputAdornment)(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4916
|
+
var templateObject_1$11, templateObject_2$G, templateObject_3$w, templateObject_4$r, templateObject_5$m, templateObject_6$i, templateObject_7$d;
|
|
4891
4917
|
|
|
4892
|
-
var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$
|
|
4918
|
+
var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4893
4919
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4894
4920
|
var selected = props.selected;
|
|
4895
4921
|
var fontWeights = getFontWeights(props);
|
|
@@ -4897,7 +4923,7 @@ var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$V || (templateObjec
|
|
|
4897
4923
|
var semanticColors = getSemanticColors(props);
|
|
4898
4924
|
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(menuItemClasses.root, " .").concat(menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surface, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentPressed, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.ornamentPressed, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
|
|
4899
4925
|
});
|
|
4900
|
-
var ContentWrapper = styled$2("span")(templateObject_2$
|
|
4926
|
+
var ContentWrapper = styled$2("span")(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
|
|
4901
4927
|
var disabledStyles$2 = function (props) {
|
|
4902
4928
|
var _a;
|
|
4903
4929
|
var disabled = props.disabled;
|
|
@@ -4906,12 +4932,12 @@ var disabledStyles$2 = function (props) {
|
|
|
4906
4932
|
var semanticColors = getSemanticColors(props);
|
|
4907
4933
|
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 ");
|
|
4908
4934
|
};
|
|
4909
|
-
var TextWrapper = styled$2("span")(templateObject_3$
|
|
4935
|
+
var TextWrapper = styled$2("span")(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4910
4936
|
var _a;
|
|
4911
4937
|
var semanticColors = getSemanticColors(props);
|
|
4912
4938
|
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 ");
|
|
4913
4939
|
}, disabledStyles$2);
|
|
4914
|
-
var StyledMenuItemIcon = styled$2("span")(templateObject_4$
|
|
4940
|
+
var StyledMenuItemIcon = styled$2("span")(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4915
4941
|
var _a;
|
|
4916
4942
|
var disabled = props.disabled;
|
|
4917
4943
|
var spaces = getSpaces(props);
|
|
@@ -4919,20 +4945,20 @@ var StyledMenuItemIcon = styled$2("span")(templateObject_4$m || (templateObject_
|
|
|
4919
4945
|
var semanticColors = getSemanticColors(props);
|
|
4920
4946
|
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, ";") : null, ";\n }\n ");
|
|
4921
4947
|
});
|
|
4922
|
-
var ColumnWrapper = styled$2("span")(templateObject_5$
|
|
4948
|
+
var ColumnWrapper = styled$2("span")(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4923
4949
|
var _a;
|
|
4924
4950
|
var semanticColors = getSemanticColors(props);
|
|
4925
4951
|
var spaces = getSpaces(props);
|
|
4926
4952
|
return "\n text-align: right;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4927
4953
|
}, disabledStyles$2);
|
|
4928
|
-
var StyledIconWrapper = styled$2("span")(templateObject_6$
|
|
4954
|
+
var StyledIconWrapper = styled$2("span")(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4929
4955
|
var spaces = getSpaces(props);
|
|
4930
4956
|
var iconSizes = getIconSizes(props);
|
|
4931
4957
|
return "\n align-self: start;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n ");
|
|
4932
4958
|
});
|
|
4933
4959
|
var StyledCheck = styled$2(Check, {
|
|
4934
4960
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4935
|
-
})(templateObject_7$
|
|
4961
|
+
})(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4936
4962
|
var _a, _b;
|
|
4937
4963
|
var selected = props.selected, disabled = props.disabled;
|
|
4938
4964
|
var iconSizes = getIconSizes(props);
|
|
@@ -4944,7 +4970,7 @@ var StyledCheck = styled$2(Check, {
|
|
|
4944
4970
|
});
|
|
4945
4971
|
var StyledMinus = styled$2(Remove, {
|
|
4946
4972
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4947
|
-
})(templateObject_8$
|
|
4973
|
+
})(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4948
4974
|
var _a, _b;
|
|
4949
4975
|
var selected = props.selected, disabled = props.disabled;
|
|
4950
4976
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4954,7 +4980,7 @@ var StyledMinus = styled$2(Remove, {
|
|
|
4954
4980
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
|
|
4955
4981
|
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 ");
|
|
4956
4982
|
});
|
|
4957
|
-
var templateObject_1$
|
|
4983
|
+
var templateObject_1$10, templateObject_2$F, templateObject_3$v, templateObject_4$q, templateObject_5$l, templateObject_6$h, templateObject_7$c, templateObject_8$a;
|
|
4958
4984
|
|
|
4959
4985
|
/**
|
|
4960
4986
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5116,7 +5142,7 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
|
5116
5142
|
autoComplete: "one-time-code" }, rest))] }));
|
|
5117
5143
|
});
|
|
5118
5144
|
|
|
5119
|
-
var doNotForwardProps$
|
|
5145
|
+
var doNotForwardProps$B = [
|
|
5120
5146
|
"count",
|
|
5121
5147
|
"keepSearchOnSelect",
|
|
5122
5148
|
"search",
|
|
@@ -5125,18 +5151,18 @@ var doNotForwardProps$u = [
|
|
|
5125
5151
|
"onClickAway",
|
|
5126
5152
|
];
|
|
5127
5153
|
var StyledAutocompleteBase = styled$2(Autocomplete$1, {
|
|
5128
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5129
|
-
})(templateObject_1
|
|
5154
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5155
|
+
})(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
5130
5156
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5131
5157
|
var search = props.search;
|
|
5132
5158
|
var spaces = getSpaces(props);
|
|
5133
5159
|
var borders = getBorders(props);
|
|
5134
5160
|
var semanticColors = getSemanticColors(props);
|
|
5135
|
-
return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
5161
|
+
return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, ";\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(autocompleteClasses.popper, " > .").concat(autocompleteClasses.paper, " {\n .").concat(autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surface, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n & > li:last-child .").concat(autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surface, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
|
|
5136
5162
|
});
|
|
5137
5163
|
var InputBaseWrapper$1 = styled$2("div", {
|
|
5138
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5139
|
-
})(templateObject_2$
|
|
5164
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5165
|
+
})(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5140
5166
|
var search = props.search;
|
|
5141
5167
|
if (!search) {
|
|
5142
5168
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -5146,12 +5172,12 @@ var InputBaseWrapper$1 = styled$2("div", {
|
|
|
5146
5172
|
}
|
|
5147
5173
|
});
|
|
5148
5174
|
var StyledMenuInputSearch$1 = styled$2(InputSearch, {
|
|
5149
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5150
|
-
})(templateObject_3$
|
|
5175
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5176
|
+
})(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
5151
5177
|
var search = _a.search;
|
|
5152
5178
|
return (search ? "auto" : "transparent");
|
|
5153
5179
|
});
|
|
5154
|
-
var StyledPaper$3 = styled$2(Paper)(templateObject_4$
|
|
5180
|
+
var StyledPaper$3 = styled$2(Paper)(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5155
5181
|
var _a;
|
|
5156
5182
|
var spaces = getSpaces(props);
|
|
5157
5183
|
var corners = getCorners(props);
|
|
@@ -5160,13 +5186,13 @@ var StyledPaper$3 = styled$2(Paper)(templateObject_4$l || (templateObject_4$l =
|
|
|
5160
5186
|
var semanticColors = getSemanticColors(props);
|
|
5161
5187
|
return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
|
|
5162
5188
|
});
|
|
5163
|
-
var StyledMenuItemDetails = styled$2("div")(templateObject_5$
|
|
5189
|
+
var StyledMenuItemDetails = styled$2("div")(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5164
5190
|
var _a;
|
|
5165
5191
|
var semanticColors = getSemanticColors(props);
|
|
5166
5192
|
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 ");
|
|
5167
5193
|
});
|
|
5168
|
-
var StyledMenuItemText = styled$2("div")(templateObject_6$
|
|
5169
|
-
var templateObject_1
|
|
5194
|
+
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$$, templateObject_2$E, templateObject_3$u, templateObject_4$p, templateObject_5$k, templateObject_6$g;
|
|
5170
5196
|
|
|
5171
5197
|
var AutocompleteBase = function (props) {
|
|
5172
5198
|
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;
|
|
@@ -5327,27 +5353,27 @@ var AutocompleteBase = function (props) {
|
|
|
5327
5353
|
}
|
|
5328
5354
|
};
|
|
5329
5355
|
|
|
5330
|
-
var StyledColumn = styled$2("div")(templateObject_1$
|
|
5356
|
+
var StyledColumn = styled$2("div")(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5331
5357
|
var _a;
|
|
5332
5358
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
5333
5359
|
var spaces = getSpaces(props);
|
|
5334
5360
|
var borders = getBorders(props);
|
|
5335
5361
|
return "\n position: relative;\n width: ".concat(width, "px;\n\n &:not(:last-child) {\n border-right: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): This code hides the relation icon of the last column\n &:last-of-type {\n .SdsAutocompleteMultiColumn-column-relation-icon {\n display: none;\n }\n }\n ");
|
|
5336
5362
|
});
|
|
5337
|
-
var StyledColumnTitle = styled$2("p")(templateObject_2$
|
|
5363
|
+
var StyledColumnTitle = styled$2("p")(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
5338
5364
|
var _a;
|
|
5339
5365
|
var spaces = getSpaces(props);
|
|
5340
5366
|
var semanticColors = getSemanticColors(props);
|
|
5341
5367
|
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 ");
|
|
5342
5368
|
});
|
|
5343
|
-
var StyledColumnIcon = styled$2("span")(templateObject_3$
|
|
5369
|
+
var StyledColumnIcon = styled$2("span")(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5344
5370
|
var _a, _b;
|
|
5345
5371
|
var spaces = getSpaces(props);
|
|
5346
5372
|
var iconSizes = getIconSizes(props);
|
|
5347
5373
|
var semanticColors = getSemanticColors(props);
|
|
5348
5374
|
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 ");
|
|
5349
5375
|
});
|
|
5350
|
-
var templateObject_1$
|
|
5376
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$t;
|
|
5351
5377
|
|
|
5352
5378
|
var AutocompleteGroup = function (props) {
|
|
5353
5379
|
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"]);
|
|
@@ -5387,7 +5413,7 @@ var AutocompleteGroup = function (props) {
|
|
|
5387
5413
|
}
|
|
5388
5414
|
};
|
|
5389
5415
|
|
|
5390
|
-
var doNotForwardProps$
|
|
5416
|
+
var doNotForwardProps$A = [
|
|
5391
5417
|
"anchorEl",
|
|
5392
5418
|
"count",
|
|
5393
5419
|
"keepSearchOnSelect",
|
|
@@ -5400,9 +5426,9 @@ var doNotForwardProps$t = [
|
|
|
5400
5426
|
];
|
|
5401
5427
|
var StyledPopper$2 = styled$2(Popper, {
|
|
5402
5428
|
shouldForwardProp: function (prop) {
|
|
5403
|
-
return !doNotForwardProps$
|
|
5429
|
+
return !doNotForwardProps$A.includes(prop) || prop === "anchorEl";
|
|
5404
5430
|
},
|
|
5405
|
-
})(templateObject_1$
|
|
5431
|
+
})(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5406
5432
|
var _a;
|
|
5407
5433
|
var corners = getCorners(props);
|
|
5408
5434
|
var shadows = getShadows(props);
|
|
@@ -5412,24 +5438,24 @@ var StyledPopper$2 = styled$2(Popper, {
|
|
|
5412
5438
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(autocompleteClasses.popper, ".").concat(autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
|
|
5413
5439
|
});
|
|
5414
5440
|
var StyledPaper$2 = styled$2(Paper, {
|
|
5415
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5416
|
-
})(templateObject_2$
|
|
5441
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
5442
|
+
})(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5417
5443
|
var _a;
|
|
5418
5444
|
var shadows = getShadows(props);
|
|
5419
5445
|
var semanticColors = getSemanticColors(props);
|
|
5420
5446
|
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 ");
|
|
5421
5447
|
});
|
|
5422
|
-
var StyledAutocompleteGroupWrapper = styled$2("div")(templateObject_3$
|
|
5448
|
+
var StyledAutocompleteGroupWrapper = styled$2("div")(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5423
5449
|
var StyledAutocompleteInput = styled$2(InputSearch, {
|
|
5424
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5425
|
-
})(templateObject_4$
|
|
5450
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
5451
|
+
})(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
5426
5452
|
var search = _a.search;
|
|
5427
5453
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5428
5454
|
}, function (_a) {
|
|
5429
5455
|
var search = _a.search;
|
|
5430
5456
|
return (search ? "auto" : "transparent");
|
|
5431
5457
|
});
|
|
5432
|
-
var templateObject_1$
|
|
5458
|
+
var templateObject_1$Z, templateObject_2$C, templateObject_3$s, templateObject_4$o;
|
|
5433
5459
|
|
|
5434
5460
|
var AutocompleteMultiColumn = function (props) {
|
|
5435
5461
|
var _a;
|
|
@@ -5611,13 +5637,13 @@ var Autocomplete = function (props) {
|
|
|
5611
5637
|
}
|
|
5612
5638
|
};
|
|
5613
5639
|
|
|
5614
|
-
var Centered = styled$2("div")(templateObject_1$
|
|
5640
|
+
var Centered = styled$2("div")(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
5615
5641
|
var doNotForwardPropsIconWrapper = ["bannerType"];
|
|
5616
5642
|
var IconWrapper$1 = styled$2("div", {
|
|
5617
5643
|
shouldForwardProp: function (prop) {
|
|
5618
5644
|
return !doNotForwardPropsIconWrapper.includes(prop);
|
|
5619
5645
|
},
|
|
5620
|
-
})(templateObject_2$
|
|
5646
|
+
})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5621
5647
|
var _a, _b;
|
|
5622
5648
|
var bannerType = props.bannerType;
|
|
5623
5649
|
var iconSizes = getIconSizes(props);
|
|
@@ -5630,7 +5656,7 @@ var StyledButton$2 = styled$2(Button, {
|
|
|
5630
5656
|
shouldForwardProp: function (prop) {
|
|
5631
5657
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5632
5658
|
},
|
|
5633
|
-
})(templateObject_3$
|
|
5659
|
+
})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
|
|
5634
5660
|
var _a, _b;
|
|
5635
5661
|
var bannerType = props.bannerType;
|
|
5636
5662
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5638,7 +5664,7 @@ var StyledButton$2 = styled$2(Button, {
|
|
|
5638
5664
|
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 ");
|
|
5639
5665
|
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 ");
|
|
5640
5666
|
});
|
|
5641
|
-
styled$2("div")(templateObject_4$
|
|
5667
|
+
styled$2("div")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5642
5668
|
var primary$1 = function (props) {
|
|
5643
5669
|
var _a, _b;
|
|
5644
5670
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5649,15 +5675,15 @@ var secondary$1 = function (props) {
|
|
|
5649
5675
|
var semanticColors = getSemanticColors(props);
|
|
5650
5676
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
|
|
5651
5677
|
};
|
|
5652
|
-
var doNotForwardProps$
|
|
5678
|
+
var doNotForwardProps$z = ["sdsType", "textChild"];
|
|
5653
5679
|
var StyledBanner = styled$2("div", {
|
|
5654
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5655
|
-
})(templateObject_5$
|
|
5680
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
5681
|
+
})(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5656
5682
|
var sdsType = props.sdsType;
|
|
5657
5683
|
var spaces = getSpaces(props);
|
|
5658
5684
|
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 ");
|
|
5659
5685
|
});
|
|
5660
|
-
var templateObject_1$
|
|
5686
|
+
var templateObject_1$Y, templateObject_2$B, templateObject_3$r, templateObject_4$n, templateObject_5$j;
|
|
5661
5687
|
|
|
5662
5688
|
var Banner = forwardRef(function Banner(props, ref) {
|
|
5663
5689
|
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"]);
|
|
@@ -5720,16 +5746,16 @@ var ButtonDropdown = React__default.forwardRef(function (props, ref) {
|
|
|
5720
5746
|
* All other props should be passed down to ButtonIcon; otherwise,
|
|
5721
5747
|
* the component won’t function as expected.
|
|
5722
5748
|
*/
|
|
5723
|
-
var doNotForwardProps$
|
|
5749
|
+
var doNotForwardProps$y = ["sdsStage"];
|
|
5724
5750
|
var StyledButtonToggle = styled$2(ButtonIcon, {
|
|
5725
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5726
|
-
})(templateObject_1$
|
|
5751
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
5752
|
+
})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5727
5753
|
var _a;
|
|
5728
5754
|
var sdsStage = props.sdsStage;
|
|
5729
5755
|
var semanticColors = getSemanticColors(props);
|
|
5730
5756
|
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 ");
|
|
5731
5757
|
});
|
|
5732
|
-
var templateObject_1$
|
|
5758
|
+
var templateObject_1$X;
|
|
5733
5759
|
|
|
5734
5760
|
/**
|
|
5735
5761
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -5745,7 +5771,7 @@ var ButtonToggle = React__default.forwardRef(function (props, ref) {
|
|
|
5745
5771
|
}
|
|
5746
5772
|
});
|
|
5747
5773
|
|
|
5748
|
-
var doNotForwardProps$
|
|
5774
|
+
var doNotForwardProps$x = [
|
|
5749
5775
|
"calloutTitle",
|
|
5750
5776
|
"collapsed",
|
|
5751
5777
|
"severity",
|
|
@@ -5753,8 +5779,8 @@ var doNotForwardProps$q = [
|
|
|
5753
5779
|
"hideBody",
|
|
5754
5780
|
];
|
|
5755
5781
|
var StyledCallout = styled$2(Alert$2, {
|
|
5756
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5757
|
-
})(templateObject_1$
|
|
5782
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
5783
|
+
})(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5758
5784
|
var _a, _b, _c, _d, _e;
|
|
5759
5785
|
var _f = props.intent, intent = _f === void 0 ? "info" : _f, sdsStyle = props.sdsStyle, hideBody = props.hideBody, collapsed = props.collapsed;
|
|
5760
5786
|
var spaces = getSpaces(props);
|
|
@@ -5766,12 +5792,12 @@ var StyledCallout = styled$2(Alert$2, {
|
|
|
5766
5792
|
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";
|
|
5767
5793
|
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 ");
|
|
5768
5794
|
});
|
|
5769
|
-
var templateObject_1$
|
|
5795
|
+
var templateObject_1$W;
|
|
5770
5796
|
|
|
5771
5797
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5772
5798
|
|
|
5773
|
-
var StyledCalloutTitle = styled$2(AlertTitle)(templateObject_1$
|
|
5774
|
-
var templateObject_1$
|
|
5799
|
+
var StyledCalloutTitle = styled$2(AlertTitle)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n margin: 0;\n"], ["\n ", "\n margin: 0;\n"])), fontBodySemiboldXs);
|
|
5800
|
+
var templateObject_1$V;
|
|
5775
5801
|
|
|
5776
5802
|
var CalloutTitle = function (_a) {
|
|
5777
5803
|
var children = _a.children;
|
|
@@ -5780,24 +5806,24 @@ var CalloutTitle = function (_a) {
|
|
|
5780
5806
|
// Display name required to ensure Callout expand works correctly.
|
|
5781
5807
|
CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
|
|
5782
5808
|
|
|
5783
|
-
var StyledCalloutBody = styled$2("p")(templateObject_1$
|
|
5809
|
+
var StyledCalloutBody = styled$2("p")(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5784
5810
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a;
|
|
5785
5811
|
var spaces = getSpaces(props);
|
|
5786
5812
|
return "\n margin: ".concat(!hideTitle ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0 0;\n ");
|
|
5787
5813
|
});
|
|
5788
|
-
var templateObject_1$
|
|
5814
|
+
var templateObject_1$U;
|
|
5789
5815
|
|
|
5790
5816
|
var CalloutBody = function (_a) {
|
|
5791
5817
|
var children = _a.children, hideTitle = _a.hideTitle;
|
|
5792
5818
|
return (jsx(StyledCalloutBody, { hideTitle: hideTitle, children: children }));
|
|
5793
5819
|
};
|
|
5794
5820
|
|
|
5795
|
-
var StyledCalloutExtraContent = styled$2("div")(templateObject_1$
|
|
5821
|
+
var StyledCalloutExtraContent = styled$2("div")(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5796
5822
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a, _b = props.hideBody, hideBody = _b === void 0 ? false : _b;
|
|
5797
5823
|
var spaces = getSpaces(props);
|
|
5798
5824
|
return "\n margin: ".concat(hideTitle && hideBody ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0 0;\n ");
|
|
5799
5825
|
});
|
|
5800
|
-
var templateObject_1$
|
|
5826
|
+
var templateObject_1$T;
|
|
5801
5827
|
|
|
5802
5828
|
var CalloutExtraContent = function (_a) {
|
|
5803
5829
|
var children = _a.children, hideTitle = _a.hideTitle, hideBody = _a.hideBody;
|
|
@@ -5866,25 +5892,25 @@ var dark$1 = function (props) {
|
|
|
5866
5892
|
var _a, _b;
|
|
5867
5893
|
var spaces = getSpaces(props);
|
|
5868
5894
|
var semanticColors = getSemanticColors(props);
|
|
5869
|
-
return css$1(templateObject_1$
|
|
5895
|
+
return css$1(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5870
5896
|
};
|
|
5871
5897
|
var light$1 = function (props) {
|
|
5872
5898
|
var _a, _b;
|
|
5873
5899
|
var spaces = getSpaces(props);
|
|
5874
5900
|
var semanticColors = getSemanticColors(props);
|
|
5875
|
-
return css$1(templateObject_2$
|
|
5901
|
+
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);
|
|
5876
5902
|
};
|
|
5877
5903
|
var wide = function () {
|
|
5878
|
-
return css$1(templateObject_3$
|
|
5904
|
+
return css$1(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
|
|
5879
5905
|
};
|
|
5880
5906
|
var tableStyles = function (props) {
|
|
5881
5907
|
var spaces = getSpaces(props);
|
|
5882
|
-
return css$1(templateObject_4$
|
|
5908
|
+
return css$1(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5883
5909
|
};
|
|
5884
|
-
var doNotForwardProps$
|
|
5910
|
+
var doNotForwardProps$w = ["hasInvertedStyle"];
|
|
5885
5911
|
var Subtitle$1 = styled$2("div", {
|
|
5886
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5887
|
-
})(templateObject_5$
|
|
5912
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
5913
|
+
})(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5888
5914
|
var _a, _b;
|
|
5889
5915
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5890
5916
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5893,7 +5919,7 @@ var Subtitle$1 = styled$2("div", {
|
|
|
5893
5919
|
var tooltipCss = function (props) {
|
|
5894
5920
|
var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5895
5921
|
var shadows = getShadows(props);
|
|
5896
|
-
return css$1(templateObject_6$
|
|
5922
|
+
return css$1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted || hasInvertedStyle
|
|
5897
5923
|
? dark$1(props)
|
|
5898
5924
|
: light$1(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
|
|
5899
5925
|
};
|
|
@@ -5901,7 +5927,7 @@ var arrowCss = function (props) {
|
|
|
5901
5927
|
var _a, _b;
|
|
5902
5928
|
var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
5903
5929
|
var semanticColors = getSemanticColors(props);
|
|
5904
|
-
return css$1(templateObject_7$
|
|
5930
|
+
return css$1(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
|
|
5905
5931
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
|
|
5906
5932
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
|
|
5907
5933
|
};
|
|
@@ -5909,8 +5935,8 @@ var arrowCss = function (props) {
|
|
|
5909
5935
|
* (masoudmanson): !important is needed to override arrow's
|
|
5910
5936
|
* default placement which is calculated by javascript
|
|
5911
5937
|
*/
|
|
5912
|
-
var StyledPopper$1 = styled$2(Popper)(templateObject_8$
|
|
5913
|
-
var templateObject_1$
|
|
5938
|
+
var StyledPopper$1 = styled$2(Popper)(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
|
|
5939
|
+
var templateObject_1$S, templateObject_2$A, templateObject_3$q, templateObject_4$m, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$9;
|
|
5914
5940
|
|
|
5915
5941
|
/**
|
|
5916
5942
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -5987,7 +6013,7 @@ function mergeClass$1(_a) {
|
|
|
5987
6013
|
return propClassName ? "".concat(propClassName, " ").concat(className) : className;
|
|
5988
6014
|
}
|
|
5989
6015
|
|
|
5990
|
-
var doNotForwardProps$
|
|
6016
|
+
var doNotForwardProps$v = [
|
|
5991
6017
|
"icon",
|
|
5992
6018
|
"iconVerticalAlign",
|
|
5993
6019
|
"horizontalAlign",
|
|
@@ -6015,8 +6041,8 @@ var verticalAlignToFlexMap = {
|
|
|
6015
6041
|
top: "flex-start",
|
|
6016
6042
|
};
|
|
6017
6043
|
var StyledTableData = styled$2("td", {
|
|
6018
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6019
|
-
})(templateObject_1$
|
|
6044
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6045
|
+
})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6020
6046
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6021
6047
|
var spaces = getSpaces(props);
|
|
6022
6048
|
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 ");
|
|
@@ -6027,30 +6053,30 @@ var ShouldWrap = function (lineCount) {
|
|
|
6027
6053
|
var ShouldTruncate = function () {
|
|
6028
6054
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
|
|
6029
6055
|
};
|
|
6030
|
-
var StyledCellContent = styled$2("div")(templateObject_2$
|
|
6031
|
-
var StyledCellContentWrapper = styled$2("div")(templateObject_3$
|
|
6056
|
+
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$p || (templateObject_3$p = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
6032
6058
|
var StyledCellIconWrapper = styled$2("div", {
|
|
6033
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6034
|
-
})(templateObject_4$
|
|
6059
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6060
|
+
})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6035
6061
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
6036
6062
|
var spaces = getSpaces(props);
|
|
6037
6063
|
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 ");
|
|
6038
6064
|
});
|
|
6039
|
-
var PrimaryTextWrapper = styled$2("div")(templateObject_5$
|
|
6065
|
+
var PrimaryTextWrapper = styled$2("div")(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6040
6066
|
var horizontalAlign = props.horizontalAlign;
|
|
6041
6067
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
6042
6068
|
});
|
|
6043
6069
|
var PrimaryText = styled$2("div", {
|
|
6044
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6045
|
-
})(templateObject_6$
|
|
6070
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6071
|
+
})(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6046
6072
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a;
|
|
6047
6073
|
return "\n display: block;\n ".concat(props.shouldTextWrap
|
|
6048
6074
|
? ShouldWrap(primaryTextWrapLineCount)
|
|
6049
6075
|
: ShouldTruncate(), "\n ");
|
|
6050
6076
|
});
|
|
6051
6077
|
var SecondaryText = styled$2("span", {
|
|
6052
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6053
|
-
})(templateObject_7$
|
|
6078
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6079
|
+
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6054
6080
|
var _a;
|
|
6055
6081
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6056
6082
|
var spaces = getSpaces(props);
|
|
@@ -6060,8 +6086,8 @@ var SecondaryText = styled$2("span", {
|
|
|
6060
6086
|
: ShouldTruncate(), "\n ");
|
|
6061
6087
|
});
|
|
6062
6088
|
var TertiaryText = styled$2("span", {
|
|
6063
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6064
|
-
})(templateObject_8$
|
|
6089
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6090
|
+
})(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6065
6091
|
var _a;
|
|
6066
6092
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
6067
6093
|
var spaces = getSpaces(props);
|
|
@@ -6070,15 +6096,15 @@ var TertiaryText = styled$2("span", {
|
|
|
6070
6096
|
? ShouldWrap(tertiaryTextWrapLineCount)
|
|
6071
6097
|
: ShouldTruncate(), "\n ");
|
|
6072
6098
|
});
|
|
6073
|
-
var PrimaryTextComponentSlotBottomWrapper = styled$2("div")(templateObject_9$
|
|
6099
|
+
var PrimaryTextComponentSlotBottomWrapper = styled$2("div")(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6074
6100
|
var spaces = getSpaces(props);
|
|
6075
6101
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6076
6102
|
});
|
|
6077
|
-
var PrimaryTextComponentSlotRightWrapper = styled$2("div")(templateObject_10$
|
|
6103
|
+
var PrimaryTextComponentSlotRightWrapper = styled$2("div")(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6078
6104
|
var spaces = getSpaces(props);
|
|
6079
6105
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6080
6106
|
});
|
|
6081
|
-
var templateObject_1$
|
|
6107
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$p, templateObject_4$l, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$8, templateObject_9$5, templateObject_10$4;
|
|
6082
6108
|
|
|
6083
6109
|
var CellBasicContent = function (props) {
|
|
6084
6110
|
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;
|
|
@@ -6092,15 +6118,15 @@ var CellBasic = forwardRef(function (props, ref) {
|
|
|
6092
6118
|
return (jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsx(CellBasicContent, __assign({}, props)) })));
|
|
6093
6119
|
});
|
|
6094
6120
|
|
|
6095
|
-
var doNotForwardProps$
|
|
6121
|
+
var doNotForwardProps$u = ["horizontalAlign", "verticalAlign"];
|
|
6096
6122
|
var StyledCellComponentData = styled$2("td", {
|
|
6097
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6098
|
-
})(templateObject_1$
|
|
6123
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6124
|
+
})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6099
6125
|
var spaces = getSpaces(props);
|
|
6100
6126
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6101
6127
|
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 ");
|
|
6102
6128
|
});
|
|
6103
|
-
var templateObject_1$
|
|
6129
|
+
var templateObject_1$Q;
|
|
6104
6130
|
|
|
6105
6131
|
var CellComponent = forwardRef(function (props, _) {
|
|
6106
6132
|
var children = props.children;
|
|
@@ -6112,7 +6138,7 @@ var contentPositionMapping = {
|
|
|
6112
6138
|
left: "flex-start",
|
|
6113
6139
|
right: "flex-end",
|
|
6114
6140
|
};
|
|
6115
|
-
var doNotForwardProps$
|
|
6141
|
+
var doNotForwardProps$t = [
|
|
6116
6142
|
"active",
|
|
6117
6143
|
"horizontalAlign",
|
|
6118
6144
|
"shouldShowTooltipOnHover",
|
|
@@ -6122,8 +6148,8 @@ var doNotForwardProps$m = [
|
|
|
6122
6148
|
"hover",
|
|
6123
6149
|
];
|
|
6124
6150
|
var StyledSortingIcon = styled$2(Icon, {
|
|
6125
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6126
|
-
})(templateObject_1$
|
|
6151
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6152
|
+
})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6127
6153
|
var _a;
|
|
6128
6154
|
var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
|
|
6129
6155
|
var spaces = getSpaces(props);
|
|
@@ -6131,8 +6157,8 @@ var StyledSortingIcon = styled$2(Icon, {
|
|
|
6131
6157
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament : "transparent", ";\n display: ").concat(hideSortIcon ? (active ? "block" : "none") : "block", ";\n outline: none !important;\n ");
|
|
6132
6158
|
});
|
|
6133
6159
|
var StyledTableHeader$1 = styled$2("th", {
|
|
6134
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6135
|
-
})(templateObject_2$
|
|
6160
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6161
|
+
})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
6136
6162
|
var _a, _b, _c, _d, _e, _f;
|
|
6137
6163
|
var _g = props.active, active = _g === void 0 ? false : _g, _h = props.horizontalAlign, horizontalAlign = _h === void 0 ? "left" : _h, _j = props.hover, hover = _j === void 0 ? true : _j;
|
|
6138
6164
|
var spaces = getSpaces(props);
|
|
@@ -6146,12 +6172,12 @@ var StyledTableHeader$1 = styled$2("th", {
|
|
|
6146
6172
|
return "\n color: ".concat(defaultColor, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: ").concat(hover ? "pointer" : "default", ";\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(hover ? hoverColor : defaultColor, ";\n\n & .MuiButtonBase-root {\n color: ").concat(hoverColor, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n ");
|
|
6147
6173
|
});
|
|
6148
6174
|
var StyledCellHeaderContainer = styled$2("div", {
|
|
6149
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6150
|
-
})(templateObject_3$
|
|
6175
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6176
|
+
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6151
6177
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
6152
6178
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
6153
6179
|
});
|
|
6154
|
-
var templateObject_1$
|
|
6180
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$o;
|
|
6155
6181
|
|
|
6156
6182
|
var CellHeaderContent = function (props) {
|
|
6157
6183
|
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;
|
|
@@ -6171,20 +6197,20 @@ var CellHeader = forwardRef(function (props, ref) {
|
|
|
6171
6197
|
|
|
6172
6198
|
var small = function (props) {
|
|
6173
6199
|
var spaces = getSpaces(props);
|
|
6174
|
-
return css(templateObject_1$
|
|
6200
|
+
return css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px ", "px;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n "], ["\n height: ", "px;\n padding: ", "px ", "px;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontCapsXxxxs(props));
|
|
6175
6201
|
};
|
|
6176
6202
|
var medium = function (props) {
|
|
6177
6203
|
var spaces = getSpaces(props);
|
|
6178
6204
|
var colors = getColors(props);
|
|
6179
|
-
return css(templateObject_2$
|
|
6205
|
+
return css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "], ["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
6180
6206
|
};
|
|
6181
6207
|
var rounded$2 = function (props) {
|
|
6182
6208
|
var corners = getCorners(props);
|
|
6183
|
-
return css(templateObject_3$
|
|
6209
|
+
return css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6184
6210
|
};
|
|
6185
6211
|
var square$2 = function (props) {
|
|
6186
6212
|
var corners = getCorners(props);
|
|
6187
|
-
return css(templateObject_4$
|
|
6213
|
+
return css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6188
6214
|
};
|
|
6189
6215
|
var success = function (props) {
|
|
6190
6216
|
return createStatusCss(props, "success");
|
|
@@ -6237,7 +6263,7 @@ function createStatusCss(props, status) {
|
|
|
6237
6263
|
},
|
|
6238
6264
|
};
|
|
6239
6265
|
var statusColors = statusToColors[status];
|
|
6240
|
-
return css(templateObject_5$
|
|
6266
|
+
return css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "], ["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "])), statusColors.light, statusColors.dark);
|
|
6241
6267
|
}
|
|
6242
6268
|
var statusToCss = {
|
|
6243
6269
|
beta: beta,
|
|
@@ -6247,14 +6273,14 @@ var statusToCss = {
|
|
|
6247
6273
|
success: success,
|
|
6248
6274
|
warning: warning,
|
|
6249
6275
|
};
|
|
6250
|
-
var doNotForwardProps$
|
|
6276
|
+
var doNotForwardProps$s = ["isRounded"];
|
|
6251
6277
|
var StyledChip = styled$2(Chip$1, {
|
|
6252
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6253
|
-
})(templateObject_7$
|
|
6278
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6279
|
+
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6254
6280
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6255
|
-
return css(templateObject_6$
|
|
6281
|
+
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));
|
|
6256
6282
|
});
|
|
6257
|
-
var templateObject_1$
|
|
6283
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$n, templateObject_4$k, templateObject_5$g, templateObject_6$d, templateObject_7$9;
|
|
6258
6284
|
|
|
6259
6285
|
/**
|
|
6260
6286
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6272,7 +6298,7 @@ var Chip = function (props) {
|
|
|
6272
6298
|
return jsx(StyledChip, __assign({}, props));
|
|
6273
6299
|
};
|
|
6274
6300
|
|
|
6275
|
-
var doNotForwardProps$
|
|
6301
|
+
var doNotForwardProps$r = [
|
|
6276
6302
|
"anchorEl",
|
|
6277
6303
|
"count",
|
|
6278
6304
|
"keepSearchOnSelect",
|
|
@@ -6286,19 +6312,19 @@ var doNotForwardProps$k = [
|
|
|
6286
6312
|
"isMultiColumn",
|
|
6287
6313
|
];
|
|
6288
6314
|
var StyledHeaderTitle = styled$2("div", {
|
|
6289
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6290
|
-
})(templateObject_1$
|
|
6315
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6316
|
+
})(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
6291
6317
|
var _a;
|
|
6292
6318
|
var spaces = getSpaces(props);
|
|
6293
6319
|
var semanticColors = getSemanticColors(props);
|
|
6294
6320
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
6295
6321
|
});
|
|
6296
|
-
var StyledDropdownMenuAutocompleteWrapper = styled$2("div")(templateObject_2$
|
|
6322
|
+
var StyledDropdownMenuAutocompleteWrapper = styled$2("div")(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), autocompleteClasses.popper, autocompleteClasses.paper);
|
|
6297
6323
|
var StyledPopper = styled$2(Popper, {
|
|
6298
6324
|
shouldForwardProp: function (prop) {
|
|
6299
|
-
return !doNotForwardProps$
|
|
6325
|
+
return !doNotForwardProps$r.includes(prop) || prop === "anchorEl";
|
|
6300
6326
|
},
|
|
6301
|
-
})(templateObject_3$
|
|
6327
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6302
6328
|
var _a;
|
|
6303
6329
|
var borders = getBorders(props);
|
|
6304
6330
|
var corners = getCorners(props);
|
|
@@ -6307,8 +6333,8 @@ var StyledPopper = styled$2(Popper, {
|
|
|
6307
6333
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n z-index: 1400;\n ");
|
|
6308
6334
|
});
|
|
6309
6335
|
var StyledPaper$1 = styled$2(Paper, {
|
|
6310
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6311
|
-
})(templateObject_4$
|
|
6336
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6337
|
+
})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6312
6338
|
var _a;
|
|
6313
6339
|
var spaces = getSpaces(props);
|
|
6314
6340
|
var borders = getBorders(props);
|
|
@@ -6316,12 +6342,12 @@ var StyledPaper$1 = styled$2(Paper, {
|
|
|
6316
6342
|
var semanticColors = getSemanticColors(props);
|
|
6317
6343
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
|
|
6318
6344
|
});
|
|
6319
|
-
var StyledDropdownMenuHeader = styled$2("div")(templateObject_5$
|
|
6345
|
+
var StyledDropdownMenuHeader = styled$2("div")(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6320
6346
|
var search = props.search;
|
|
6321
6347
|
var spaces = getSpaces(props);
|
|
6322
6348
|
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 ");
|
|
6323
6349
|
});
|
|
6324
|
-
var templateObject_1$
|
|
6350
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$m, templateObject_4$j, templateObject_5$f;
|
|
6325
6351
|
|
|
6326
6352
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
6327
6353
|
// for the dropdownMenu's popper component
|
|
@@ -6359,7 +6385,7 @@ var DropdownMenu = function (props) {
|
|
|
6359
6385
|
sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
6360
6386
|
};
|
|
6361
6387
|
|
|
6362
|
-
var doNotForwardProps$
|
|
6388
|
+
var doNotForwardProps$q = [
|
|
6363
6389
|
"intent",
|
|
6364
6390
|
"state",
|
|
6365
6391
|
"sdsType",
|
|
@@ -6387,27 +6413,27 @@ var inputDropdownStyles = function (props) {
|
|
|
6387
6413
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
6388
6414
|
*/
|
|
6389
6415
|
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");
|
|
6390
|
-
return css(templateObject_1$
|
|
6416
|
+
return css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.hover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
|
|
6391
6417
|
};
|
|
6392
6418
|
var minimal$1 = function (props) {
|
|
6393
6419
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6394
6420
|
var spaces = getSpaces(props);
|
|
6395
6421
|
var semanticColors = getSemanticColors(props);
|
|
6396
|
-
return css(templateObject_2$
|
|
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\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
6397
6423
|
};
|
|
6398
6424
|
var square$1 = function (props) {
|
|
6399
6425
|
var corners = getCorners(props);
|
|
6400
|
-
return css(templateObject_3$
|
|
6426
|
+
return css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6401
6427
|
};
|
|
6402
6428
|
var rounded$1 = function (props) {
|
|
6403
6429
|
var corners = getCorners(props);
|
|
6404
|
-
return css(templateObject_4$
|
|
6430
|
+
return css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6405
6431
|
};
|
|
6406
6432
|
var userInput = function (props) {
|
|
6407
6433
|
var _a, _b, _c, _d;
|
|
6408
6434
|
var sdsStyle = props.sdsStyle;
|
|
6409
6435
|
var semanticColors = getSemanticColors(props);
|
|
6410
|
-
return css(templateObject_5$
|
|
6436
|
+
return css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, sdsStyle === "minimal"
|
|
6411
6437
|
? "\n border: none;\n color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n\n .styled-label {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n }\n ")
|
|
6412
6438
|
: "");
|
|
6413
6439
|
};
|
|
@@ -6417,7 +6443,7 @@ var isOpen = function (props) {
|
|
|
6417
6443
|
var borders = getBorders(props);
|
|
6418
6444
|
var semanticColors = getSemanticColors(props);
|
|
6419
6445
|
var inputColor = intentToColor$2[intent];
|
|
6420
|
-
return css(templateObject_6$
|
|
6446
|
+
return css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
|
|
6421
6447
|
? "\n & > span, \n &:hover > span { \n color: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, "; \n }\n\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, "; \n ")
|
|
6422
6448
|
: "", inputColor === "accent"
|
|
6423
6449
|
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentOpen
|
|
@@ -6425,17 +6451,17 @@ var isOpen = function (props) {
|
|
|
6425
6451
|
? borders === null || borders === void 0 ? void 0 : borders.none
|
|
6426
6452
|
: (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
|
|
6427
6453
|
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillOpen
|
|
6428
|
-
: "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.
|
|
6454
|
+
: "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryHover);
|
|
6429
6455
|
};
|
|
6430
6456
|
var applyIntentColor$1 = function (props, intent) {
|
|
6431
6457
|
var _a, _b, _c;
|
|
6432
6458
|
var borders = getBorders(props);
|
|
6433
|
-
return css(templateObject_7$
|
|
6459
|
+
return css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "], ["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "])), (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
|
|
6434
6460
|
};
|
|
6435
6461
|
var isDisabled = function (props) {
|
|
6436
6462
|
var _a, _b, _c, _d;
|
|
6437
6463
|
var semanticColors = getSemanticColors(props);
|
|
6438
|
-
return css(templateObject_8$
|
|
6464
|
+
return css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled);
|
|
6439
6465
|
};
|
|
6440
6466
|
/**
|
|
6441
6467
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6446,10 +6472,10 @@ var isDisabled = function (props) {
|
|
|
6446
6472
|
* to the InputDropdownProps interface.
|
|
6447
6473
|
*/
|
|
6448
6474
|
var StyledInputDropdown = styled$2(Button, {
|
|
6449
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6450
|
-
})(templateObject_10$
|
|
6475
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6476
|
+
})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, focusVisibleA11yStyle, function (props) {
|
|
6451
6477
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
|
|
6452
|
-
return css(templateObject_9$
|
|
6478
|
+
return css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), value && userInput(props), intent === "notice" &&
|
|
6453
6479
|
sdsStyle !== "minimal" &&
|
|
6454
6480
|
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6455
6481
|
sdsStyle !== "minimal" &&
|
|
@@ -6458,16 +6484,16 @@ var StyledInputDropdown = styled$2(Button, {
|
|
|
6458
6484
|
applyIntentColor$1(props, "positive"), state === "open" && isOpen(props), disabled && isDisabled(props));
|
|
6459
6485
|
});
|
|
6460
6486
|
var StyledDetail = styled$2("span", {
|
|
6461
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6462
|
-
})(templateObject_11$
|
|
6487
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6488
|
+
})(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6463
6489
|
var _a;
|
|
6464
6490
|
var spaces = getSpaces(props);
|
|
6465
6491
|
var semanticColors = getSemanticColors(props);
|
|
6466
6492
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
|
|
6467
6493
|
});
|
|
6468
6494
|
var StyledLabel$2 = styled$2("span", {
|
|
6469
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6470
|
-
})(templateObject_12$
|
|
6495
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6496
|
+
})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6471
6497
|
var _a, _b;
|
|
6472
6498
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
6473
6499
|
var fontWeights = getFontWeights(props);
|
|
@@ -6478,8 +6504,8 @@ var StyledLabel$2 = styled$2("span", {
|
|
|
6478
6504
|
return "\n color: ".concat(labelColor, ";\n\n font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n ");
|
|
6479
6505
|
});
|
|
6480
6506
|
var StyledCounter = styled$2("span", {
|
|
6481
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6482
|
-
})(templateObject_13$
|
|
6507
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6508
|
+
})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6483
6509
|
var _a, _b;
|
|
6484
6510
|
var corners = getCorners(props);
|
|
6485
6511
|
var spaces = getSpaces(props);
|
|
@@ -6487,8 +6513,8 @@ var StyledCounter = styled$2("span", {
|
|
|
6487
6513
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundTertiary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6488
6514
|
});
|
|
6489
6515
|
var MinimalDetails = styled$2("div", {
|
|
6490
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6491
|
-
})(templateObject_14$
|
|
6516
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6517
|
+
})(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (props) {
|
|
6492
6518
|
var _a;
|
|
6493
6519
|
var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
|
|
6494
6520
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6496,23 +6522,23 @@ var MinimalDetails = styled$2("div", {
|
|
|
6496
6522
|
"overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;", "\n ");
|
|
6497
6523
|
});
|
|
6498
6524
|
var LabelWrapper = styled$2("span", {
|
|
6499
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6500
|
-
})(templateObject_15$
|
|
6525
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6526
|
+
})(templateObject_15$3 || (templateObject_15$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6501
6527
|
var isMinimal = _a.isMinimal;
|
|
6502
6528
|
return "\n align-items: ".concat(isMinimal ? "center" : undefined, ";\n display: ").concat(isMinimal ? "inline-flex" : "contents", ";\n justify-content: ").concat(isMinimal ? "space-between" : undefined, ";\n width: 100%;\n ");
|
|
6503
6529
|
});
|
|
6504
6530
|
var IconWrapper = styled$2("span", {
|
|
6505
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6506
|
-
})(templateObject_16$
|
|
6531
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
6532
|
+
})(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n"])));
|
|
6507
6533
|
function labelStyle(props) {
|
|
6508
6534
|
var _a, _b;
|
|
6509
6535
|
var semanticColors = getSemanticColors(props);
|
|
6510
6536
|
var labelColor = props.sdsType === "value"
|
|
6511
6537
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
|
|
6512
6538
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6513
|
-
return css(templateObject_17$
|
|
6539
|
+
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);
|
|
6514
6540
|
}
|
|
6515
|
-
var templateObject_1$
|
|
6541
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$l, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$8, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2;
|
|
6516
6542
|
|
|
6517
6543
|
/**
|
|
6518
6544
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -6579,33 +6605,33 @@ var tagSizeS = function (props) {
|
|
|
6579
6605
|
var spaces = getSpaces(props);
|
|
6580
6606
|
var iconSizes = getIconSizes(props);
|
|
6581
6607
|
var semanticColors = getSemanticColors(props);
|
|
6582
|
-
return css(templateObject_1$
|
|
6608
|
+
return css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
6583
6609
|
};
|
|
6584
6610
|
var tagSizeL = function (props) {
|
|
6585
6611
|
var _a;
|
|
6586
6612
|
var spaces = getSpaces(props);
|
|
6587
6613
|
var iconSizes = getIconSizes(props);
|
|
6588
6614
|
var semanticColors = getSemanticColors(props);
|
|
6589
|
-
return css(templateObject_2$
|
|
6615
|
+
return css(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
6590
6616
|
};
|
|
6591
6617
|
var rounded = function (props) {
|
|
6592
6618
|
var corners = getCorners(props);
|
|
6593
6619
|
var spaces = getSpaces(props);
|
|
6594
6620
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6595
6621
|
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;
|
|
6596
|
-
return css(templateObject_3$
|
|
6622
|
+
return css(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.l, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6597
6623
|
};
|
|
6598
6624
|
var square = function (props) {
|
|
6599
6625
|
var corners = getCorners(props);
|
|
6600
6626
|
var spaces = getSpaces(props);
|
|
6601
6627
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6602
6628
|
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;
|
|
6603
|
-
return css(templateObject_4$
|
|
6629
|
+
return css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.m, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6604
6630
|
};
|
|
6605
6631
|
var withHover = function (props) {
|
|
6606
6632
|
var _a;
|
|
6607
6633
|
var semanticColors = getSemanticColors(props);
|
|
6608
|
-
return css(templateObject_5$
|
|
6634
|
+
return css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "], ["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse);
|
|
6609
6635
|
};
|
|
6610
6636
|
var primary = function (props) {
|
|
6611
6637
|
return createTypeCss(props, "primary");
|
|
@@ -6674,13 +6700,13 @@ function createTypeCss(props, type) {
|
|
|
6674
6700
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
6675
6701
|
};
|
|
6676
6702
|
var typeColors = typeToColors[type];
|
|
6677
|
-
return css(templateObject_6$
|
|
6703
|
+
return css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
|
|
6678
6704
|
}
|
|
6679
6705
|
var typeToCss = {
|
|
6680
6706
|
primary: primary,
|
|
6681
6707
|
secondary: secondary,
|
|
6682
6708
|
};
|
|
6683
|
-
var doNotForwardProps$
|
|
6709
|
+
var doNotForwardProps$p = [
|
|
6684
6710
|
"sdsType",
|
|
6685
6711
|
"sdsStyle",
|
|
6686
6712
|
"sdsSize",
|
|
@@ -6688,14 +6714,14 @@ var doNotForwardProps$i = [
|
|
|
6688
6714
|
"hover",
|
|
6689
6715
|
];
|
|
6690
6716
|
var StyledTag$2 = styled$2(Chip$1, {
|
|
6691
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6692
|
-
})(templateObject_8$
|
|
6717
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
6718
|
+
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6693
6719
|
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;
|
|
6694
6720
|
var isRounded = sdsStyle === "rounded";
|
|
6695
6721
|
var type = sdsType || "primary";
|
|
6696
|
-
return css(templateObject_7$
|
|
6722
|
+
return css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
|
|
6697
6723
|
});
|
|
6698
|
-
var templateObject_1$
|
|
6724
|
+
var templateObject_1$L, templateObject_2$u, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$7, templateObject_8$6;
|
|
6699
6725
|
|
|
6700
6726
|
/**
|
|
6701
6727
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6709,14 +6735,14 @@ var Tag = function (props) {
|
|
|
6709
6735
|
return jsx(StyledTag$2, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
6710
6736
|
};
|
|
6711
6737
|
|
|
6712
|
-
var StyledTag$1 = styled$2(Tag)(templateObject_2$
|
|
6738
|
+
var StyledTag$1 = styled$2(Tag)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6713
6739
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
6714
6740
|
var spaces = getSpaces(props);
|
|
6715
6741
|
var iconSizes = getIconSizes(props);
|
|
6716
6742
|
var semanticColors = getSemanticColors(props);
|
|
6717
|
-
return css(templateObject_1$
|
|
6743
|
+
return css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.height, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed);
|
|
6718
6744
|
});
|
|
6719
|
-
var templateObject_1$
|
|
6745
|
+
var templateObject_1$K, templateObject_2$t;
|
|
6720
6746
|
|
|
6721
6747
|
/**
|
|
6722
6748
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6739,12 +6765,12 @@ var Chips = function (_a) {
|
|
|
6739
6765
|
}) }));
|
|
6740
6766
|
};
|
|
6741
6767
|
|
|
6742
|
-
var Wrapper$1 = styled$2("div")(templateObject_1$
|
|
6743
|
-
var StyledChipsWrapper = styled$2("div")(templateObject_2$
|
|
6768
|
+
var Wrapper$1 = styled$2("div")(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
|
|
6769
|
+
var StyledChipsWrapper = styled$2("div")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6744
6770
|
var spaces = getSpaces(props);
|
|
6745
6771
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
6746
6772
|
});
|
|
6747
|
-
var templateObject_1$
|
|
6773
|
+
var templateObject_1$J, templateObject_2$s;
|
|
6748
6774
|
|
|
6749
6775
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6750
6776
|
var ComplexFilter = function (_a) {
|
|
@@ -6833,13 +6859,326 @@ var ComplexFilter = function (_a) {
|
|
|
6833
6859
|
}
|
|
6834
6860
|
};
|
|
6835
6861
|
|
|
6862
|
+
var doNotForwardProps$o = [
|
|
6863
|
+
"visualElement",
|
|
6864
|
+
"sdsType",
|
|
6865
|
+
"imagePosition",
|
|
6866
|
+
"imagePadding",
|
|
6867
|
+
"overlineText",
|
|
6868
|
+
"titleText",
|
|
6869
|
+
"subtitleText",
|
|
6870
|
+
"metadataText",
|
|
6871
|
+
"contentBlock",
|
|
6872
|
+
"decorativeBorder",
|
|
6873
|
+
"boundingBox",
|
|
6874
|
+
"buttons",
|
|
6875
|
+
"visualElementType",
|
|
6876
|
+
"image",
|
|
6877
|
+
"icon",
|
|
6878
|
+
"buttonsPosition",
|
|
6879
|
+
"clickableCard",
|
|
6880
|
+
"imageSize",
|
|
6881
|
+
];
|
|
6882
|
+
var StyledCard = styled$2(Card, {
|
|
6883
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6884
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6885
|
+
var _a, _b, _c, _d;
|
|
6886
|
+
var _e = props.imagePosition, imagePosition = _e === void 0 ? "left" : _e, _f = props.sdsType, sdsType = _f === void 0 ? "wide" : _f, _g = props.boundingBox, boundingBox = _g === void 0 ? true : _g, _h = props.decorativeBorder, decorativeBorder = _h === void 0 ? false : _h, _j = props.imagePadding, imagePadding = _j === void 0 ? false : _j, visualElementType = props.visualElementType;
|
|
6887
|
+
var semanticColors = getSemanticColors(props);
|
|
6888
|
+
var flexDirection = sdsType === "wide" && visualElementType === "image"
|
|
6889
|
+
? imagePosition === "left"
|
|
6890
|
+
? "row"
|
|
6891
|
+
: "row-reverse"
|
|
6892
|
+
: visualElementType === "icon"
|
|
6893
|
+
? "row"
|
|
6894
|
+
: "column";
|
|
6895
|
+
var showDecorativeBorder = visualElementType === "image"
|
|
6896
|
+
? boundingBox && decorativeBorder && imagePadding
|
|
6897
|
+
: boundingBox && decorativeBorder;
|
|
6898
|
+
return css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n background-color: ", ";\n flex-direction: ", ";\n box-shadow: none;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: ", ";\n flex-direction: ", ";\n box-shadow: none;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, flexDirection, boundingBox && css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n border: 1px solid ", ";\n "], ["\n border: 1px solid ", ";\n "])), (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderSecondary), sdsType === "wide" &&
|
|
6899
|
+
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" &&
|
|
6900
|
+
showDecorativeBorder && css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n border-top: 4px solid ", ";\n "], ["\n border-top: 4px solid ", ";\n "])), (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border));
|
|
6901
|
+
});
|
|
6902
|
+
var StyledCardActionArea = styled$2(CardActionArea, {
|
|
6903
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6904
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6905
|
+
var _a, _b;
|
|
6906
|
+
var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.sdsType, sdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
|
|
6907
|
+
var semanticColors = getSemanticColors(props);
|
|
6908
|
+
var flexDirection = sdsType === "wide"
|
|
6909
|
+
? imagePosition === "left"
|
|
6910
|
+
? "row"
|
|
6911
|
+
: "row-reverse"
|
|
6912
|
+
: visualElementType === "image"
|
|
6913
|
+
? "column"
|
|
6914
|
+
: "row";
|
|
6915
|
+
return "\n display: flex;\n flex-direction: ".concat(flexDirection, ";\n align-items: unset;\n\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n &:hover,\n &:active {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundSecondary, ";\n }\n ");
|
|
6916
|
+
});
|
|
6917
|
+
var StyledIconMediaWrapper = styled$2("div", {
|
|
6918
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6919
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6920
|
+
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
6921
|
+
var spaces = getSpaces(props);
|
|
6922
|
+
return css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), boundingBox
|
|
6923
|
+
? css(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n padding: ", "px 0 ", "px ", "px;\n "], ["\n padding: ", "px 0 ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n padding-right: ", "px;\n "], ["\n padding-right: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6924
|
+
});
|
|
6925
|
+
var StyledCardContent = styled$2("div", {
|
|
6926
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6927
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6928
|
+
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a, _b = props.clickableCard, clickableCard = _b === void 0 ? false : _b;
|
|
6929
|
+
var spaces = getSpaces(props);
|
|
6930
|
+
return css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: ", ";\n min-width: 100px;\n width: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n height: ", ";\n min-width: 100px;\n width: 100%;\n\n ", "\n "])), clickableCard ? "100%" : "auto", boundingBox && css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
6931
|
+
});
|
|
6932
|
+
var StyledContentCardBody = styled$2(CardContent, {
|
|
6933
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
6934
|
+
})(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6935
|
+
var _a;
|
|
6936
|
+
var semanticColors = getSemanticColors(props);
|
|
6937
|
+
var spaces = getSpaces(props);
|
|
6938
|
+
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 ");
|
|
6939
|
+
});
|
|
6940
|
+
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"])));
|
|
6941
|
+
var templateObject_1$I, templateObject_2$r, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2;
|
|
6942
|
+
|
|
6943
|
+
var doNotForwardProps$n = [
|
|
6944
|
+
"visualElement",
|
|
6945
|
+
"sdsType",
|
|
6946
|
+
"imagePosition",
|
|
6947
|
+
"imagePadding",
|
|
6948
|
+
"overlineText",
|
|
6949
|
+
"titleText",
|
|
6950
|
+
"subtitleText",
|
|
6951
|
+
"metadataText",
|
|
6952
|
+
"contentBlock",
|
|
6953
|
+
];
|
|
6954
|
+
var StyledTitleWrapper = styled$3("div", {
|
|
6955
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6956
|
+
})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6957
|
+
var spaces = getSpaces(props);
|
|
6958
|
+
return "\n display: flex;\n flex-direction: column;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6959
|
+
});
|
|
6960
|
+
var StyledOverlineText = styled$3("p", {
|
|
6961
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6962
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxs, function (props) {
|
|
6963
|
+
var _a;
|
|
6964
|
+
var semanticColors = getSemanticColors(props);
|
|
6965
|
+
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin: 0;\n ");
|
|
6966
|
+
});
|
|
6967
|
+
var StyledTitleText = styled$3("p", {
|
|
6968
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6969
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderXl, function (props) {
|
|
6970
|
+
var _a;
|
|
6971
|
+
var semanticColors = getSemanticColors(props);
|
|
6972
|
+
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 ");
|
|
6973
|
+
});
|
|
6974
|
+
var StyledSubtitleText = styled$3("p", {
|
|
6975
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6976
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
|
|
6977
|
+
var _a;
|
|
6978
|
+
var semanticColors = getSemanticColors(props);
|
|
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 ");
|
|
6980
|
+
});
|
|
6981
|
+
var StyledMetadataText = styled$3("p", {
|
|
6982
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
6983
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6984
|
+
var _a;
|
|
6985
|
+
var semanticColors = getSemanticColors(props);
|
|
6986
|
+
var spaces = getSpaces(props);
|
|
6987
|
+
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 ");
|
|
6988
|
+
});
|
|
6989
|
+
var templateObject_1$H, templateObject_2$q, templateObject_3$i, templateObject_4$f, templateObject_5$b;
|
|
6990
|
+
|
|
6991
|
+
/**
|
|
6992
|
+
* @see https://mui.com/material-ui/react-dialog/
|
|
6993
|
+
*/
|
|
6994
|
+
var ContentCardTitle = forwardRef(function ContentCardTitle(props, ref) {
|
|
6995
|
+
var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText;
|
|
6996
|
+
return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { children: [overlineText && (jsx(StyledOverlineText, { children: overlineText })), titleText && jsx(StyledTitleText, { children: titleText }), subtitleText && (jsx(StyledSubtitleText, { children: subtitleText }))] }), metadataText && (jsx(StyledMetadataText, { children: metadataText }))] }));
|
|
6997
|
+
});
|
|
6998
|
+
|
|
6999
|
+
var doNotForwardProps$m = ["buttonsPosition"];
|
|
7000
|
+
var StyledCardActions = styled$2(CardActions, {
|
|
7001
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7002
|
+
})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7003
|
+
var _a = props.buttonsPosition, buttonsPosition = _a === void 0 ? "left" : _a;
|
|
7004
|
+
var spaces = getSpaces(props);
|
|
7005
|
+
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 ");
|
|
7006
|
+
});
|
|
7007
|
+
var templateObject_1$G;
|
|
7008
|
+
|
|
7009
|
+
var isButtonElement = function (child) {
|
|
7010
|
+
if (React__default.isValidElement(child) && child.type === Button) {
|
|
7011
|
+
return true;
|
|
7012
|
+
}
|
|
7013
|
+
else {
|
|
7014
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ContentCardActionsOnlyButtons);
|
|
7015
|
+
return false;
|
|
7016
|
+
}
|
|
7017
|
+
};
|
|
7018
|
+
/**
|
|
7019
|
+
* @see https://mui.com/material-ui/api/card-actions/
|
|
7020
|
+
*/
|
|
7021
|
+
var ContentCardActions = forwardRef(function ContentCardActions(props, ref) {
|
|
7022
|
+
var buttonsPosition = props.buttonsPosition, clickableCard = props.clickableCard, children = props.children;
|
|
7023
|
+
/**
|
|
7024
|
+
* (masoudmanson):
|
|
7025
|
+
* We need to ensure that only SDS buttons are used within the
|
|
7026
|
+
* ContentCardActions component slot. This is to prevent any potential
|
|
7027
|
+
* issues with using other components within the ContentCardActions component slot.
|
|
7028
|
+
*/
|
|
7029
|
+
var validChildren = React__default.Children.toArray(Array.isArray(children) ? children : [children]).filter(isButtonElement);
|
|
7030
|
+
/**
|
|
7031
|
+
* If the card is clickable, it acts as a `<button>` itself and cannot
|
|
7032
|
+
* have `<button>` elements as children. If multiple buttons are provided,
|
|
7033
|
+
* only the first one will be kept, and a warning will be shown.
|
|
7034
|
+
*
|
|
7035
|
+
* Any additional buttons cannot remain as `<button>` elements due to
|
|
7036
|
+
* DOM hierarchy constraints; they will be converted to `<a>` tags instead.
|
|
7037
|
+
*/
|
|
7038
|
+
if (clickableCard) {
|
|
7039
|
+
if (validChildren.length > 1) {
|
|
7040
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ClickableContentCardNumberOfButtons);
|
|
7041
|
+
}
|
|
7042
|
+
/**
|
|
7043
|
+
* (masoudmanson): Since a clickable card can have at most one button,
|
|
7044
|
+
* we select the first button from the validChildren array and ignore the rest.
|
|
7045
|
+
*/
|
|
7046
|
+
var clickableCardButton = validChildren.shift();
|
|
7047
|
+
if (!clickableCardButton) {
|
|
7048
|
+
return null;
|
|
7049
|
+
}
|
|
7050
|
+
return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, children: [
|
|
7051
|
+
React__default.cloneElement(clickableCardButton, __assign({ component: "a" }, clickableCardButton === null || clickableCardButton === void 0 ? void 0 : clickableCardButton.props)),
|
|
7052
|
+
] }));
|
|
7053
|
+
}
|
|
7054
|
+
return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, children: validChildren }));
|
|
7055
|
+
});
|
|
7056
|
+
|
|
7057
|
+
var doNotForwardProps$l = [
|
|
7058
|
+
"imagePadding",
|
|
7059
|
+
"boundingBox",
|
|
7060
|
+
"sdsType",
|
|
7061
|
+
"imageSize",
|
|
7062
|
+
"image",
|
|
7063
|
+
"imagePosition",
|
|
7064
|
+
];
|
|
7065
|
+
var StyledImageMediaWrapper = styled$3("div", {
|
|
7066
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
7067
|
+
})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7068
|
+
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;
|
|
7069
|
+
var spaces = getSpaces(props);
|
|
7070
|
+
return css$2(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n display: flex;\n align-items: start;\n\n ", "\n\n ", "\n "], ["\n display: flex;\n align-items: start;\n\n ", "\n\n ", "\n "])), boundingBox
|
|
7071
|
+
? imagePadding
|
|
7072
|
+
? css$2(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n padding: ", "px;\n ", "\n "], ["\n padding: ", "px;\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, imagePosition === "left"
|
|
7073
|
+
? "padding-right: 0;"
|
|
7074
|
+
: "padding-left: 0;") : css$2(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7075
|
+
: css$2(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
|
|
7076
|
+
? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
|
|
7077
|
+
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && css$2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
|
|
7078
|
+
? imagePadding
|
|
7079
|
+
? css$2(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n padding: ", "px;\n padding-bottom: 0;\n "], ["\n padding: ", "px;\n padding-bottom: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl) : css$2(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7080
|
+
: 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)));
|
|
7081
|
+
});
|
|
7082
|
+
var templateObject_1$F, templateObject_2$p, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2;
|
|
7083
|
+
|
|
7084
|
+
/**
|
|
7085
|
+
* @see https://mui.com/material-ui/api/card-media/
|
|
7086
|
+
*/
|
|
7087
|
+
var ContentCardImageMedia = forwardRef(function ContentCardImageMedia(props, ref) {
|
|
7088
|
+
var image = props.image, imageSize = props.imageSize, sdsType = props.sdsType;
|
|
7089
|
+
/**
|
|
7090
|
+
* (masoudmanson): These styles makes the image responsive and
|
|
7091
|
+
* ensures the image is the right aspect ratio in different card sizes.
|
|
7092
|
+
*/
|
|
7093
|
+
var imageMediaStyles = {
|
|
7094
|
+
height: "100%",
|
|
7095
|
+
maxHeight: sdsType === "narrow" ? imageSize : "100%",
|
|
7096
|
+
maxWidth: sdsType === "narrow" ? "100%" : imageSize,
|
|
7097
|
+
minHeight: imageSize,
|
|
7098
|
+
minWidth: sdsType === "narrow" ? "unset" : imageSize,
|
|
7099
|
+
width: "100%",
|
|
7100
|
+
};
|
|
7101
|
+
/**
|
|
7102
|
+
* (masoudmanson): We need to make sure the image is wrapped in a CardMedia component.
|
|
7103
|
+
* - If it's a string, wrap it in CardMedia with proper styles.
|
|
7104
|
+
* - If it's already a CardMedia component, clone it and apply the styles.
|
|
7105
|
+
*/
|
|
7106
|
+
var imageElement = typeof image === "string" ? (jsx(CardMedia, { component: "img", src: image, alt: "Content Card Media", sx: __assign({}, imageMediaStyles) })) : React__default.isValidElement(image) && image.type === CardMedia ? (React__default.cloneElement(image, {
|
|
7107
|
+
component: "img",
|
|
7108
|
+
sx: __assign(__assign({}, image.props.sx), imageMediaStyles),
|
|
7109
|
+
})) : null;
|
|
7110
|
+
return (jsx(StyledImageMediaWrapper, __assign({ ref: ref }, props, { children: imageElement })));
|
|
7111
|
+
});
|
|
7112
|
+
|
|
7113
|
+
var CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE = 300;
|
|
7114
|
+
var CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_LOW_BOUNDARY = 595;
|
|
7115
|
+
var CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_HIGH_BOUNDARY = 605;
|
|
7116
|
+
|
|
7117
|
+
var useResponsiveWidth = function (initialSdsType) {
|
|
7118
|
+
var _a = useState(false), isNarrow = _a[0], setIsNarrow = _a[1];
|
|
7119
|
+
var handleResize = function (width) {
|
|
7120
|
+
if (width < CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_LOW_BOUNDARY && !isNarrow) {
|
|
7121
|
+
setIsNarrow(true);
|
|
7122
|
+
}
|
|
7123
|
+
else if (width > CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_HIGH_BOUNDARY &&
|
|
7124
|
+
isNarrow) {
|
|
7125
|
+
setIsNarrow(false);
|
|
7126
|
+
}
|
|
7127
|
+
};
|
|
7128
|
+
return {
|
|
7129
|
+
dynamicSdsType: isNarrow ? "narrow" : initialSdsType,
|
|
7130
|
+
handleResize: handleResize,
|
|
7131
|
+
isNarrow: isNarrow,
|
|
7132
|
+
};
|
|
7133
|
+
};
|
|
7134
|
+
/**
|
|
7135
|
+
* (masoudmanson): This function is used to add the clickableCard and
|
|
7136
|
+
* buttonsPosition props to the ContentCardActions sub-component.
|
|
7137
|
+
*/
|
|
7138
|
+
var enhanceChildrenWithCardActionsProps = function (children, clickableCard, buttonsPosition) {
|
|
7139
|
+
return React__default.Children.map(children, function (child) {
|
|
7140
|
+
if (React__default.isValidElement(child) && child.type === ContentCardActions) {
|
|
7141
|
+
return React__default.cloneElement(child, __assign(__assign({}, child.props), { buttonsPosition: buttonsPosition, clickableCard: clickableCard }));
|
|
7142
|
+
}
|
|
7143
|
+
return child;
|
|
7144
|
+
});
|
|
7145
|
+
};
|
|
7146
|
+
/**
|
|
7147
|
+
* @see https://mui.com/material-ui/react-card/
|
|
7148
|
+
*/
|
|
7149
|
+
var ContentCard = React__default.forwardRef(function (props, ref) {
|
|
7150
|
+
var _a = props.visualElementType, visualElementType = _a === void 0 ? "none" : _a, image = props.image, icon = props.icon, _b = props.imagePadding, imagePadding = _b === void 0 ? false : _b, _c = props.imageSize, imageSize = _c === void 0 ? CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE : _c, overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _d = props.boundingBox, propsBoundingBox = _d === void 0 ? true : _d, children = props.children, _e = props.sdsType, sdsType = _e === void 0 ? "wide" : _e, _f = props.clickableCard, clickableCard = _f === void 0 ? false : _f, _g = props.imagePosition, imagePosition = _g === void 0 ? "left" : _g, _h = props.buttonsPosition, buttonsPosition = _h === void 0 ? "left" : _h;
|
|
7151
|
+
// Force boundingBox to be true when clickableCard is true
|
|
7152
|
+
var boundingBox = clickableCard ? true : propsBoundingBox;
|
|
7153
|
+
var cardRef = useRef(null);
|
|
7154
|
+
var _j = useResponsiveWidth(sdsType), handleResize = _j.handleResize, dynamicSdsType = _j.dynamicSdsType;
|
|
7155
|
+
useEffect(function () {
|
|
7156
|
+
var element = cardRef.current;
|
|
7157
|
+
if (!element)
|
|
7158
|
+
return;
|
|
7159
|
+
var resizeObserver = new ResizeObserver(function (entries) {
|
|
7160
|
+
for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
|
|
7161
|
+
var entry = entries_1[_i];
|
|
7162
|
+
handleResize(entry.contentRect.width);
|
|
7163
|
+
}
|
|
7164
|
+
});
|
|
7165
|
+
resizeObserver.observe(element);
|
|
7166
|
+
return function () {
|
|
7167
|
+
resizeObserver.disconnect();
|
|
7168
|
+
};
|
|
7169
|
+
}, [handleResize]);
|
|
7170
|
+
var visualElement = visualElementType === "image" && image ? (jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition })) : visualElementType === "icon" && icon ? (jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, children: icon })) : null;
|
|
7171
|
+
var cardInnerContent = (jsxs(Fragment, { children: [visualElement, jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, children: [jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText }), jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition) })] })] }));
|
|
7172
|
+
return (jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, children: clickableCard ? (jsx(StyledCardActionArea, { sdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, children: cardInnerContent })) : (cardInnerContent) })));
|
|
7173
|
+
});
|
|
7174
|
+
|
|
6836
7175
|
var DialogContext = createContext({ sdsSize: "m" });
|
|
6837
7176
|
|
|
6838
7177
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
6839
|
-
var doNotForwardProps$
|
|
7178
|
+
var doNotForwardProps$k = ["sdsSize"];
|
|
6840
7179
|
var StyledPaper = styled$2(Paper, {
|
|
6841
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6842
|
-
})(templateObject_1$
|
|
7180
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7181
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
|
|
6843
7182
|
var _a;
|
|
6844
7183
|
var spaces = getSpaces(props);
|
|
6845
7184
|
var corners = getCorners(props);
|
|
@@ -6870,7 +7209,7 @@ function paperDimensions(props) {
|
|
|
6870
7209
|
var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
|
|
6871
7210
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
6872
7211
|
}
|
|
6873
|
-
var templateObject_1$
|
|
7212
|
+
var templateObject_1$E;
|
|
6874
7213
|
|
|
6875
7214
|
/**
|
|
6876
7215
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -6899,15 +7238,15 @@ var Dialog = forwardRef(function Dialog(props, ref) {
|
|
|
6899
7238
|
});
|
|
6900
7239
|
|
|
6901
7240
|
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
6902
|
-
var doNotForwardProps$
|
|
7241
|
+
var doNotForwardProps$j = ["buttonPosition"];
|
|
6903
7242
|
var StyledDialogActions = styled$2(DialogActions$1, {
|
|
6904
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6905
|
-
})(templateObject_1$
|
|
7243
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7244
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
6906
7245
|
var spaces = getSpaces(props);
|
|
6907
7246
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
6908
7247
|
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 ");
|
|
6909
7248
|
});
|
|
6910
|
-
var templateObject_1$
|
|
7249
|
+
var templateObject_1$D;
|
|
6911
7250
|
|
|
6912
7251
|
/**
|
|
6913
7252
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6916,8 +7255,8 @@ var DialogActions = forwardRef(function DialogActions(props, ref) {
|
|
|
6916
7255
|
return jsx(StyledDialogActions, __assign({ ref: ref }, props));
|
|
6917
7256
|
});
|
|
6918
7257
|
|
|
6919
|
-
var StyledDialogContent = styled$2(DialogContent)(templateObject_1$
|
|
6920
|
-
var templateObject_1$
|
|
7258
|
+
var StyledDialogContent = styled$2(DialogContent)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
7259
|
+
var templateObject_1$C;
|
|
6921
7260
|
|
|
6922
7261
|
var index = forwardRef(
|
|
6923
7262
|
/**
|
|
@@ -6927,11 +7266,11 @@ function DialogContent(props, ref) {
|
|
|
6927
7266
|
return jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
6928
7267
|
});
|
|
6929
7268
|
|
|
6930
|
-
var StyledButton$1 = styled$2(Button)(templateObject_1$
|
|
7269
|
+
var StyledButton$1 = styled$2(Button)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
6931
7270
|
var spaces = getSpaces(props);
|
|
6932
7271
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
6933
7272
|
});
|
|
6934
|
-
var templateObject_1$
|
|
7273
|
+
var templateObject_1$B;
|
|
6935
7274
|
|
|
6936
7275
|
var CloseButton = forwardRef(function CloseButton(props, ref) {
|
|
6937
7276
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
@@ -6947,27 +7286,27 @@ var CloseButton = forwardRef(function CloseButton(props, ref) {
|
|
|
6947
7286
|
} }));
|
|
6948
7287
|
});
|
|
6949
7288
|
|
|
6950
|
-
var StyledDialogTitle = styled$2(DialogTitle$1)(templateObject_1$
|
|
7289
|
+
var StyledDialogTitle = styled$2(DialogTitle$1)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n padding: 0;\n ", "\n"], ["\n padding: 0;\n ", "\n"])), function (props) {
|
|
6951
7290
|
var spaces = getSpaces(props);
|
|
6952
7291
|
return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
|
|
6953
7292
|
});
|
|
6954
|
-
var Title = styled$2(Typography)(templateObject_2$
|
|
7293
|
+
var Title = styled$2(Typography)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
|
|
6955
7294
|
var _a;
|
|
6956
7295
|
var semanticColors = getSemanticColors(props);
|
|
6957
7296
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
|
|
6958
7297
|
});
|
|
6959
|
-
var Subtitle = styled$2(Typography)(templateObject_3$
|
|
7298
|
+
var Subtitle = styled$2(Typography)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
6960
7299
|
var _a;
|
|
6961
7300
|
var semanticColors = getSemanticColors(props);
|
|
6962
7301
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
6963
7302
|
});
|
|
6964
|
-
var Overline = styled$2(Typography)(templateObject_4$
|
|
7303
|
+
var Overline = styled$2(Typography)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6965
7304
|
var _a;
|
|
6966
7305
|
var semanticColors = getSemanticColors(props);
|
|
6967
7306
|
var spaces = getSpaces(props);
|
|
6968
7307
|
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 ");
|
|
6969
7308
|
});
|
|
6970
|
-
var templateObject_1$
|
|
7309
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$g, templateObject_4$d;
|
|
6971
7310
|
|
|
6972
7311
|
/**
|
|
6973
7312
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6977,20 +7316,20 @@ var DialogTitle = forwardRef(function DialogTitle(props, ref) {
|
|
|
6977
7316
|
return (jsx(StyledDialogTitle, __assign({ ref: ref }, rest, { children: children || (jsxs(Fragment, { children: [onClose && (jsx(CloseButton, { sdsStyle: "icon", icon: "XMark", onClick: onClose })), jsx(Overline, { children: overline }), jsx(Title, { children: title }), jsx(Subtitle, { children: subtitle })] })) })));
|
|
6978
7317
|
});
|
|
6979
7318
|
|
|
6980
|
-
var doNotForwardProps$
|
|
7319
|
+
var doNotForwardProps$i = ["buttonPosition"];
|
|
6981
7320
|
var StyledButtonsWrapper = styled$2("div", {
|
|
6982
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6983
|
-
})(templateObject_1$
|
|
7321
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7322
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6984
7323
|
var buttonPosition = props.buttonPosition;
|
|
6985
7324
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
6986
7325
|
});
|
|
6987
7326
|
var StyledButton = styled$2(Button, {
|
|
6988
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6989
|
-
})(templateObject_2$
|
|
7327
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7328
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6990
7329
|
var spaces = getSpaces(props);
|
|
6991
7330
|
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 ");
|
|
6992
7331
|
});
|
|
6993
|
-
var templateObject_1$
|
|
7332
|
+
var templateObject_1$z, templateObject_2$n;
|
|
6994
7333
|
|
|
6995
7334
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6996
7335
|
var Dropdown = function (props) {
|
|
@@ -7126,11 +7465,11 @@ var intentToColor$1 = {
|
|
|
7126
7465
|
notice: "notice",
|
|
7127
7466
|
positive: "positive",
|
|
7128
7467
|
};
|
|
7129
|
-
var StyledIcon = styled$2(Icon)(templateObject_1$
|
|
7468
|
+
var StyledIcon = styled$2(Icon)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7130
7469
|
var iconSizes = getIconSizes(props);
|
|
7131
7470
|
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 ");
|
|
7132
7471
|
});
|
|
7133
|
-
var StyledCheckboxDefaultIcon = styled$2("span")(templateObject_2$
|
|
7472
|
+
var StyledCheckboxDefaultIcon = styled$2("span")(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7134
7473
|
var _a;
|
|
7135
7474
|
var _b = props.intent, intent = _b === void 0 ? "default" : _b;
|
|
7136
7475
|
var iconSizes = getIconSizes(props);
|
|
@@ -7138,22 +7477,22 @@ var StyledCheckboxDefaultIcon = styled$2("span")(templateObject_2$j || (template
|
|
|
7138
7477
|
var borderColor = intentToColor$1[intent];
|
|
7139
7478
|
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 ");
|
|
7140
7479
|
});
|
|
7141
|
-
var StyledCheckboxCheckedIcon = styled$2("div")(templateObject_3$
|
|
7480
|
+
var StyledCheckboxCheckedIcon = styled$2("div")(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7142
7481
|
var _a, _b;
|
|
7143
7482
|
var iconSizes = getIconSizes(props);
|
|
7144
7483
|
var semanticColors = getSemanticColors(props);
|
|
7145
7484
|
return "\n display: flex;\n align-items: center;\n justify-content: center;\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n border-radius: 2px;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, ";\n\n ").concat(StyledIcon, " {\n fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, ";\n }\n\n &:hover {\n background-color: red;\n }\n ");
|
|
7146
7485
|
});
|
|
7147
|
-
var StyledCheckbox = styled$2(Checkbox)(templateObject_4$
|
|
7486
|
+
var StyledCheckbox = styled$2(Checkbox)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7148
7487
|
var spaces = getSpaces(props);
|
|
7149
7488
|
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 ");
|
|
7150
7489
|
});
|
|
7151
|
-
var StyledLabelContainer$1 = styled$2("span")(templateObject_5$
|
|
7152
|
-
var StyledCheckboxLabel = styled$2("span")(templateObject_6$
|
|
7490
|
+
var StyledLabelContainer$1 = styled$2("span")(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
|
|
7491
|
+
var StyledCheckboxLabel = styled$2("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7153
7492
|
var spaces = getSpaces(props);
|
|
7154
7493
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7155
7494
|
});
|
|
7156
|
-
var StyledCheckboxCaption = styled$2("span")(templateObject_7$
|
|
7495
|
+
var StyledCheckboxCaption = styled$2("span")(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7157
7496
|
var _a;
|
|
7158
7497
|
var semanticColors = getSemanticColors(props);
|
|
7159
7498
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7164,7 +7503,7 @@ var disabledStyles$1 = function (props) {
|
|
|
7164
7503
|
var borders = getBorders(props);
|
|
7165
7504
|
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 ");
|
|
7166
7505
|
};
|
|
7167
|
-
var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$
|
|
7506
|
+
var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7168
7507
|
var _a, _b, _c, _d;
|
|
7169
7508
|
var disabled = props.disabled;
|
|
7170
7509
|
var spaces = getSpaces(props);
|
|
@@ -7172,7 +7511,7 @@ var StyledFormControlLabel$1 = styled$2(FormControlLabel)(templateObject_8$2 ||
|
|
|
7172
7511
|
var borders = getBorders(props);
|
|
7173
7512
|
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 ");
|
|
7174
7513
|
});
|
|
7175
|
-
var templateObject_1$
|
|
7514
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$f, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$4, templateObject_8$3;
|
|
7176
7515
|
|
|
7177
7516
|
/**
|
|
7178
7517
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -7207,12 +7546,12 @@ var intentToColor = {
|
|
|
7207
7546
|
notice: "notice",
|
|
7208
7547
|
positive: "positive",
|
|
7209
7548
|
};
|
|
7210
|
-
var StyledRadioDot = styled$2("span")(templateObject_1$
|
|
7549
|
+
var StyledRadioDot = styled$2("span")(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7211
7550
|
var _a;
|
|
7212
7551
|
var semanticColors = getSemanticColors(props);
|
|
7213
7552
|
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 ");
|
|
7214
7553
|
});
|
|
7215
|
-
var StyledRadioDefaultIcon = styled$2("span")(templateObject_2$
|
|
7554
|
+
var StyledRadioDefaultIcon = styled$2("span")(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7216
7555
|
var _a;
|
|
7217
7556
|
var _b = props.intent, intent = _b === void 0 ? "default" : _b;
|
|
7218
7557
|
var iconSizes = getIconSizes(props);
|
|
@@ -7220,22 +7559,22 @@ var StyledRadioDefaultIcon = styled$2("span")(templateObject_2$i || (templateObj
|
|
|
7220
7559
|
var borderColor = intentToColor[intent];
|
|
7221
7560
|
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 ");
|
|
7222
7561
|
});
|
|
7223
|
-
var StyledRadioCheckedIcon = styled$2("div")(templateObject_3$
|
|
7562
|
+
var StyledRadioCheckedIcon = styled$2("div")(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7224
7563
|
var _a;
|
|
7225
7564
|
var iconSizes = getIconSizes(props);
|
|
7226
7565
|
var semanticColors = getSemanticColors(props);
|
|
7227
7566
|
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 ");
|
|
7228
7567
|
});
|
|
7229
|
-
var StyledRadioButton = styled$2(Radio)(templateObject_4$
|
|
7568
|
+
var StyledRadioButton = styled$2(Radio)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7230
7569
|
var spaces = getSpaces(props);
|
|
7231
7570
|
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 ");
|
|
7232
7571
|
});
|
|
7233
|
-
var StyledLabelContainer = styled$2("span")(templateObject_5$
|
|
7234
|
-
var StyledRadioLabel = styled$2("span")(templateObject_6$
|
|
7572
|
+
var StyledLabelContainer = styled$2("span")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
|
|
7573
|
+
var StyledRadioLabel = styled$2("span")(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7235
7574
|
var spaces = getSpaces(props);
|
|
7236
7575
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
7237
7576
|
});
|
|
7238
|
-
var StyledRadioCaption = styled$2("span")(templateObject_7$
|
|
7577
|
+
var StyledRadioCaption = styled$2("span")(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7239
7578
|
var _a;
|
|
7240
7579
|
var semanticColors = getSemanticColors(props);
|
|
7241
7580
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
@@ -7243,16 +7582,16 @@ var StyledRadioCaption = styled$2("span")(templateObject_7$2 || (templateObject_
|
|
|
7243
7582
|
var disabledStyles = function (props) {
|
|
7244
7583
|
var _a, _b, _c, _d, _e;
|
|
7245
7584
|
var semanticColors = getSemanticColors(props);
|
|
7246
|
-
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.
|
|
7585
|
+
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 ");
|
|
7247
7586
|
};
|
|
7248
|
-
var StyledFormControlLabel = styled$2(FormControlLabel)(templateObject_8$
|
|
7587
|
+
var StyledFormControlLabel = styled$2(FormControlLabel)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7249
7588
|
var _a, _b, _c, _d;
|
|
7250
7589
|
var disabled = props.disabled;
|
|
7251
7590
|
var spaces = getSpaces(props);
|
|
7252
7591
|
var semanticColors = getSemanticColors(props);
|
|
7253
|
-
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.
|
|
7592
|
+
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 ");
|
|
7254
7593
|
});
|
|
7255
|
-
var templateObject_1$
|
|
7594
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$e, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$3, templateObject_8$2;
|
|
7256
7595
|
|
|
7257
7596
|
/**
|
|
7258
7597
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -7298,11 +7637,11 @@ var disabledSlider = function (props) {
|
|
|
7298
7637
|
var semanticColors = getSemanticColors(props);
|
|
7299
7638
|
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 ");
|
|
7300
7639
|
};
|
|
7301
|
-
var StyledSlider = styled$2(Slider)(templateObject_1$
|
|
7640
|
+
var StyledSlider = styled$2(Slider)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7302
7641
|
var disabled = props.disabled;
|
|
7303
7642
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
7304
7643
|
});
|
|
7305
|
-
var templateObject_1$
|
|
7644
|
+
var templateObject_1$w;
|
|
7306
7645
|
|
|
7307
7646
|
/**
|
|
7308
7647
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -7317,19 +7656,19 @@ var applyIntentColor = function (props, intent) {
|
|
|
7317
7656
|
var _a, _b, _c, _d;
|
|
7318
7657
|
var borders = getBorders(props);
|
|
7319
7658
|
var semanticColors = getSemanticColors(props);
|
|
7320
|
-
return css(templateObject_1$
|
|
7659
|
+
return css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), 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);
|
|
7321
7660
|
};
|
|
7322
7661
|
var disabledStyled$1 = function (props) {
|
|
7323
7662
|
var _a, _b, _c;
|
|
7324
7663
|
var borders = getBorders(props);
|
|
7325
7664
|
var semanticColors = getSemanticColors(props);
|
|
7326
|
-
return css(templateObject_2$
|
|
7665
|
+
return css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
|
|
7327
7666
|
};
|
|
7328
7667
|
var textArea = function (props) {
|
|
7329
7668
|
var spaces = getSpaces(props);
|
|
7330
|
-
return css(templateObject_3$
|
|
7669
|
+
return css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "], ["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "])), 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);
|
|
7331
7670
|
};
|
|
7332
|
-
var StyledLabel$1 = styled$2("label")(templateObject_4$
|
|
7671
|
+
var StyledLabel$1 = styled$2("label")(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7333
7672
|
var spaces = getSpaces(props);
|
|
7334
7673
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7335
7674
|
});
|
|
@@ -7337,15 +7676,15 @@ var StyledInputBase = styled$2(TextField, {
|
|
|
7337
7676
|
shouldForwardProp: function (prop) {
|
|
7338
7677
|
return !sdsPropNames$1.includes(prop.toString());
|
|
7339
7678
|
},
|
|
7340
|
-
})(templateObject_6$
|
|
7679
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7341
7680
|
var _a, _b, _c;
|
|
7342
7681
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
7343
7682
|
var spaces = getSpaces(props);
|
|
7344
7683
|
var borders = getBorders(props);
|
|
7345
7684
|
var corners = getCorners(props);
|
|
7346
|
-
return css(templateObject_5$
|
|
7685
|
+
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\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, 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, outlinedInputClasses.input, focusVisibleA11yStyle(props), 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.accent) === null || _c === void 0 ? void 0 : _c.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
|
|
7347
7686
|
});
|
|
7348
|
-
var templateObject_1$
|
|
7687
|
+
var templateObject_1$v, templateObject_2$k, templateObject_3$d, templateObject_4$a, templateObject_5$7, templateObject_6$6;
|
|
7349
7688
|
|
|
7350
7689
|
/**
|
|
7351
7690
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -7406,11 +7745,11 @@ var toggleOff = function (props) {
|
|
|
7406
7745
|
: (_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 &&
|
|
7407
7746
|
"&: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 ");
|
|
7408
7747
|
};
|
|
7409
|
-
var Toggle = styled$2(Switch)(templateObject_1$
|
|
7748
|
+
var Toggle = styled$2(Switch)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7410
7749
|
var checked = props.checked;
|
|
7411
7750
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
7412
7751
|
});
|
|
7413
|
-
var templateObject_1$
|
|
7752
|
+
var templateObject_1$u;
|
|
7414
7753
|
|
|
7415
7754
|
/**
|
|
7416
7755
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -7428,14 +7767,14 @@ var InputToggle = function (props) {
|
|
|
7428
7767
|
return (jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
|
|
7429
7768
|
};
|
|
7430
7769
|
|
|
7431
|
-
var doNotForwardProps$
|
|
7770
|
+
var doNotForwardProps$h = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
7432
7771
|
var defaultStyle = function (props) {
|
|
7433
7772
|
var _a, _b, _c, _d;
|
|
7434
7773
|
var semanticColors = getSemanticColors(props);
|
|
7435
|
-
return css(templateObject_1$
|
|
7774
|
+
return css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "], ["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
|
|
7436
7775
|
};
|
|
7437
7776
|
var dashedStyle = function () {
|
|
7438
|
-
return css(templateObject_2$
|
|
7777
|
+
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 "])));
|
|
7439
7778
|
};
|
|
7440
7779
|
var smallStyle = function (props) {
|
|
7441
7780
|
return fontBodyS$1(props);
|
|
@@ -7445,13 +7784,13 @@ var extraSmallStyle = function (props) {
|
|
|
7445
7784
|
};
|
|
7446
7785
|
var StyledLink = styled$2(Link$1, {
|
|
7447
7786
|
shouldForwardProp: function (prop) {
|
|
7448
|
-
return !doNotForwardProps$
|
|
7787
|
+
return !doNotForwardProps$h.includes(prop.toString());
|
|
7449
7788
|
},
|
|
7450
|
-
})(templateObject_4$
|
|
7789
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
7451
7790
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7452
|
-
return css(templateObject_3$
|
|
7791
|
+
return css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
|
|
7453
7792
|
});
|
|
7454
|
-
var templateObject_1$
|
|
7793
|
+
var templateObject_1$t, templateObject_2$j, templateObject_3$c, templateObject_4$9;
|
|
7455
7794
|
|
|
7456
7795
|
/**
|
|
7457
7796
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -7466,10 +7805,10 @@ var Link = forwardRef(function (props, ref) {
|
|
|
7466
7805
|
});
|
|
7467
7806
|
|
|
7468
7807
|
// (thuang): Please keep this in sync with the props used in `ListExtraProps`
|
|
7469
|
-
var doNotForwardProps$
|
|
7808
|
+
var doNotForwardProps$g = ["marginBottom", "ordered"];
|
|
7470
7809
|
var StyledList = styled$2(List$1, {
|
|
7471
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7472
|
-
})(templateObject_1$
|
|
7810
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
7811
|
+
})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"], ["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"])), propsToMarginBottom$1, function (props) {
|
|
7473
7812
|
if (!props.ordered)
|
|
7474
7813
|
return "";
|
|
7475
7814
|
return "\n counter-reset: section;\n ";
|
|
@@ -7487,7 +7826,7 @@ function propsToMarginBottom$1(props) {
|
|
|
7487
7826
|
var marginBottom = props.marginBottom;
|
|
7488
7827
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
7489
7828
|
}
|
|
7490
|
-
var templateObject_1$
|
|
7829
|
+
var templateObject_1$s;
|
|
7491
7830
|
|
|
7492
7831
|
/**
|
|
7493
7832
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7504,10 +7843,10 @@ var fontBodyXs$1 = fontBody("xs");
|
|
|
7504
7843
|
var fontBodyXxs = fontBody("xxs");
|
|
7505
7844
|
var fontBodyXxxs = fontBody("xxxs");
|
|
7506
7845
|
// (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
|
|
7507
|
-
var doNotForwardProps$
|
|
7846
|
+
var doNotForwardProps$f = ["marginBottom", "fontSize", "ordered"];
|
|
7508
7847
|
var StyledListItem = styled$2(ListItem$1, {
|
|
7509
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7510
|
-
})(templateObject_1$
|
|
7848
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
7849
|
+
})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", "\n ", "\n\n padding: 0;\n\n ", "\n\n &:before {\n display: inline-block;\n\n ", "\n }\n"], ["\n ", "\n ", "\n\n padding: 0;\n\n ", "\n\n &:before {\n display: inline-block;\n\n ", "\n }\n"])), propsToMarginBottom, propsToFontBody, function (props) {
|
|
7511
7850
|
var ordered = props.ordered;
|
|
7512
7851
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
7513
7852
|
}, function (props) {
|
|
@@ -7538,11 +7877,11 @@ function propsToMarginBottom(props) {
|
|
|
7538
7877
|
var marginBottom = props.marginBottom;
|
|
7539
7878
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
|
|
7540
7879
|
}
|
|
7541
|
-
var ListItemLabel = styled$2("span")(templateObject_2$
|
|
7880
|
+
var ListItemLabel = styled$2("span")(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
|
|
7542
7881
|
var fontWeights = getFontWeights(props);
|
|
7543
7882
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
7544
7883
|
});
|
|
7545
|
-
var templateObject_1$
|
|
7884
|
+
var templateObject_1$r, templateObject_2$i;
|
|
7546
7885
|
|
|
7547
7886
|
/**
|
|
7548
7887
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7552,11 +7891,11 @@ var ListItem = function (props) {
|
|
|
7552
7891
|
};
|
|
7553
7892
|
|
|
7554
7893
|
var fontHeaderM = fontHeader("m");
|
|
7555
|
-
var StyledListSubheader = styled$2(ListSubheader$1)(templateObject_1$
|
|
7894
|
+
var StyledListSubheader = styled$2(ListSubheader$1)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n\n line-height: unset;\n color: unset;\n\n ", "\n }\n"], ["\n &.MuiListSubheader-root {\n ", "\n\n line-height: unset;\n color: unset;\n\n ", "\n }\n"])), fontHeaderM, function (props) {
|
|
7556
7895
|
var spaces = getSpaces(props);
|
|
7557
7896
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7558
7897
|
});
|
|
7559
|
-
var templateObject_1$
|
|
7898
|
+
var templateObject_1$q;
|
|
7560
7899
|
|
|
7561
7900
|
/**
|
|
7562
7901
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7565,7 +7904,7 @@ var ListSubheader = function (props) {
|
|
|
7565
7904
|
return jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
7566
7905
|
};
|
|
7567
7906
|
|
|
7568
|
-
var StyledText = styled$2("span")(templateObject_1$
|
|
7907
|
+
var StyledText = styled$2("span")(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7569
7908
|
var spaces = getSpaces(props);
|
|
7570
7909
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7571
7910
|
});
|
|
@@ -7573,37 +7912,37 @@ var minimal = function (props) {
|
|
|
7573
7912
|
var _a, _b;
|
|
7574
7913
|
var iconSizes = getIconSizes(props);
|
|
7575
7914
|
var semanticColors = getSemanticColors(props);
|
|
7576
|
-
return css(templateObject_2$
|
|
7915
|
+
return css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary);
|
|
7577
7916
|
};
|
|
7578
7917
|
var tag = function (props) {
|
|
7579
7918
|
var _a, _b, _c;
|
|
7580
7919
|
var corners = getCorners(props);
|
|
7581
7920
|
var semanticColors = getSemanticColors(props);
|
|
7582
|
-
return css(templateObject_3$
|
|
7921
|
+
return css(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
|
|
7583
7922
|
};
|
|
7584
|
-
var doNotForwardProps$
|
|
7923
|
+
var doNotForwardProps$e = ["sdsStyle"];
|
|
7585
7924
|
var StyledLoadingIndicator = styled$2("div", {
|
|
7586
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7587
|
-
})(templateObject_6$
|
|
7925
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
7926
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7588
7927
|
var sdsStyle = props.sdsStyle;
|
|
7589
7928
|
var spaces = getSpaces(props);
|
|
7590
|
-
var style = css(templateObject_4$
|
|
7591
|
-
return css(templateObject_5$
|
|
7929
|
+
var style = css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "], ["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
7930
|
+
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));
|
|
7592
7931
|
});
|
|
7593
|
-
var templateObject_1$
|
|
7932
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$b, templateObject_4$8, templateObject_5$6, templateObject_6$5;
|
|
7594
7933
|
|
|
7595
7934
|
var LoadingIndicator = function (_a) {
|
|
7596
7935
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
7597
7936
|
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" })] }));
|
|
7598
7937
|
};
|
|
7599
7938
|
|
|
7600
|
-
var StyledMenu = styled$2(Menu$1)(templateObject_1$
|
|
7939
|
+
var StyledMenu = styled$2(Menu$1)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"], ["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"])), menuClasses.paper, function (props) {
|
|
7601
7940
|
var _a;
|
|
7602
7941
|
var spaces = getSpaces(props);
|
|
7603
7942
|
var semanticColors = getSemanticColors(props);
|
|
7604
7943
|
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 ");
|
|
7605
7944
|
});
|
|
7606
|
-
var templateObject_1$
|
|
7945
|
+
var templateObject_1$o;
|
|
7607
7946
|
|
|
7608
7947
|
var ANCHOR_ORIGIN = {
|
|
7609
7948
|
horizontal: "center",
|
|
@@ -7620,19 +7959,19 @@ var Menu = function (props) {
|
|
|
7620
7959
|
return (jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
7621
7960
|
};
|
|
7622
7961
|
|
|
7623
|
-
var StyledMenuItem = styled$2(MenuItem)(templateObject_1$
|
|
7624
|
-
var doNotForwardProps$
|
|
7962
|
+
var StyledMenuItem = styled$2(MenuItem)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
7963
|
+
var doNotForwardProps$d = ["search", "InputBaseProps", "keepSearchOnSelect"];
|
|
7625
7964
|
// (thuang): Casting the type to `Autocomplete`
|
|
7626
7965
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
7627
7966
|
var StyledAutocomplete = styled$2(Autocomplete$1, {
|
|
7628
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7629
|
-
})(templateObject_2$
|
|
7967
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
7968
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
|
|
7630
7969
|
var search = _a.search;
|
|
7631
7970
|
return !search && "height: 0; margin: 0 !important;";
|
|
7632
7971
|
});
|
|
7633
7972
|
var InputBaseWrapper = styled$2("div", {
|
|
7634
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7635
|
-
})(templateObject_3$
|
|
7973
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
7974
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7636
7975
|
var search = props.search;
|
|
7637
7976
|
if (!search) {
|
|
7638
7977
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -7644,12 +7983,12 @@ var InputBaseWrapper = styled$2("div", {
|
|
|
7644
7983
|
return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
7645
7984
|
});
|
|
7646
7985
|
var StyledMenuInputSearch = styled$2(InputSearch, {
|
|
7647
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7648
|
-
})(templateObject_4$
|
|
7986
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
7987
|
+
})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"], ["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"])), inputBaseClasses.root, function (_a) {
|
|
7649
7988
|
var search = _a.search;
|
|
7650
7989
|
return (search ? "auto" : "transparent");
|
|
7651
7990
|
});
|
|
7652
|
-
var templateObject_1$
|
|
7991
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$a, templateObject_4$7;
|
|
7653
7992
|
|
|
7654
7993
|
/**
|
|
7655
7994
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -7700,6 +8039,80 @@ var MenuSelect = function (props) {
|
|
|
7700
8039
|
}
|
|
7701
8040
|
};
|
|
7702
8041
|
|
|
8042
|
+
var doNotForwardProps$c = ["hasInvertedStyle", "isNarrow"];
|
|
8043
|
+
var StyledFooter = styled$2("footer", {
|
|
8044
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8045
|
+
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8046
|
+
var isNarrow = props.isNarrow;
|
|
8047
|
+
var spaces = getSpaces(props);
|
|
8048
|
+
var semanticColors = getSemanticColors(props);
|
|
8049
|
+
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
|
|
8050
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryInverse
|
|
8051
|
+
: 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$m || (templateObject_1$m = __makeTemplateObject(["\n border-top: 1px solid\n ", ";\n padding: ", "px ", "px ", "px ", "px;\n "], ["\n border-top: 1px solid\n ", ";\n padding: ", "px ", "px ", "px ", "px;\n "])), props.hasInvertedStyle
|
|
8052
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
8053
|
+
: 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));
|
|
8054
|
+
});
|
|
8055
|
+
var StyledLogoWrapper$1 = styled$2("div", {
|
|
8056
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8057
|
+
})(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) {
|
|
8058
|
+
var spaces = getSpaces(props);
|
|
8059
|
+
return css$2(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n\n a {\n text-decoration: none;\n }\n\n .MuiChip-root {\n margin: 0;\n }\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n\n a {\n text-decoration: none;\n }\n\n .MuiChip-root {\n margin: 0;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s);
|
|
8060
|
+
}, fontHeader("l"), fontHeader("l", /* isNarrow */ true), function (props) {
|
|
8061
|
+
var semanticColors = getSemanticColors(props);
|
|
8062
|
+
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
|
|
8063
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
8064
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
|
|
8065
|
+
});
|
|
8066
|
+
var StyledNavSection = styled$2("div", {
|
|
8067
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8068
|
+
})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8069
|
+
var isNarrow = props.isNarrow;
|
|
8070
|
+
var spaces = getSpaces(props);
|
|
8071
|
+
return css$2(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && css$2(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "], ["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8072
|
+
});
|
|
8073
|
+
var StyledTopSection = styled$2("div", {
|
|
8074
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8075
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8076
|
+
var isNarrow = props.isNarrow;
|
|
8077
|
+
var semanticColors = getSemanticColors(props);
|
|
8078
|
+
var spaces = getSpaces(props);
|
|
8079
|
+
return css$2(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: ", "px;\n\n a:hover {\n text-decoration: none;\n }\n\n color: ", ";\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: ", "px;\n\n a:hover {\n text-decoration: none;\n }\n\n color: ", ";\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, props.hasInvertedStyle
|
|
8080
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
8081
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, props.hasInvertedStyle
|
|
8082
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
8083
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && css$2(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n flex-direction: column;\n margin-bottom: ", "px;\n "], ["\n flex-direction: column;\n margin-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
8084
|
+
});
|
|
8085
|
+
var StyledLinkSection = styled$2("div", {
|
|
8086
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8087
|
+
})(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) {
|
|
8088
|
+
var isNarrow = props.isNarrow;
|
|
8089
|
+
var spaces = getSpaces(props);
|
|
8090
|
+
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.s, 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));
|
|
8091
|
+
});
|
|
8092
|
+
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) {
|
|
8093
|
+
var spaces = getSpaces(props);
|
|
8094
|
+
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
8095
|
+
});
|
|
8096
|
+
var StyledImageSection = styled$2("div", {
|
|
8097
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8098
|
+
})(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n\n ", "\n"])), function (props) {
|
|
8099
|
+
var isNarrow = props.isNarrow;
|
|
8100
|
+
var spaces = getSpaces(props);
|
|
8101
|
+
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));
|
|
8102
|
+
});
|
|
8103
|
+
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) {
|
|
8104
|
+
var spaces = getSpaces(props);
|
|
8105
|
+
return "\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n ");
|
|
8106
|
+
});
|
|
8107
|
+
var StyledBottomSection = styled$2("div", {
|
|
8108
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
8109
|
+
})(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n a:hover {\n text-decoration: none;\n }\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n a:hover {\n text-decoration: none;\n }\n\n ", "\n"])), function (props) {
|
|
8110
|
+
var isNarrow = props.isNarrow;
|
|
8111
|
+
var spaces = getSpaces(props);
|
|
8112
|
+
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));
|
|
8113
|
+
});
|
|
8114
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$9, templateObject_4$6, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
|
|
8115
|
+
|
|
7703
8116
|
/**
|
|
7704
8117
|
* WARNING: Don't import this directly.
|
|
7705
8118
|
* Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
|
|
@@ -13718,6 +14131,143 @@ function useTheme() {
|
|
|
13718
14131
|
return theme[THEME_ID] || theme;
|
|
13719
14132
|
}
|
|
13720
14133
|
|
|
14134
|
+
var doNotForwardProps$b = ["hasInvertedStyle", "isNarrow"];
|
|
14135
|
+
var NarrowNavItemLinkStyles = function (props) {
|
|
14136
|
+
var semanticColors = getSemanticColors(props);
|
|
14137
|
+
return css$2(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n min-height: 48px;\n text-align: center;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "], ["\n min-height: 48px;\n text-align: center;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), props.hasInvertedStyle
|
|
14138
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14139
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, props.hasInvertedStyle
|
|
14140
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
|
|
14141
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary);
|
|
14142
|
+
};
|
|
14143
|
+
var StyledNavItemLink = styled$2(Link, {
|
|
14144
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
14145
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeader("m"), fontBody("s", "regular", /* isNarrow */ true), function (props) {
|
|
14146
|
+
var isNarrow = props.isNarrow;
|
|
14147
|
+
var semanticColors = getSemanticColors(props);
|
|
14148
|
+
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
|
|
14149
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
|
|
14150
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, props.hasInvertedStyle
|
|
14151
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
14152
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && NarrowNavItemLinkStyles(props));
|
|
14153
|
+
});
|
|
14154
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$8;
|
|
14155
|
+
|
|
14156
|
+
var NavItem = memo(function (_a) {
|
|
14157
|
+
var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
14158
|
+
return (jsx(StyledNavItemLink, __assign({ href: item.url, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, component: item.component }, item.linkProps, { children: item.label }), item.label));
|
|
14159
|
+
});
|
|
14160
|
+
NavItem.displayName = "NavItem";
|
|
14161
|
+
|
|
14162
|
+
var doNotForwardProps$a = ["hasInvertedStyle"];
|
|
14163
|
+
var StyledLinkItemLink = styled$2(Link, {
|
|
14164
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14165
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBody("xxs", "regular"), function (props) {
|
|
14166
|
+
var semanticColors = getSemanticColors(props);
|
|
14167
|
+
return "\n color: ".concat(props.hasInvertedStyle ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, ";\n white-space: nowrap;\n\n &:hover {\n color: ").concat(props.hasInvertedStyle ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, ";\n text-decoration: none;\n }\n ");
|
|
14168
|
+
});
|
|
14169
|
+
var StyledDivider = styled$2(Divider, {
|
|
14170
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
14171
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14172
|
+
var semanticColors = getSemanticColors(props);
|
|
14173
|
+
return "\n border-color: ".concat(props.hasInvertedStyle
|
|
14174
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
|
|
14175
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, ";\n ");
|
|
14176
|
+
});
|
|
14177
|
+
var templateObject_1$k, templateObject_2$d;
|
|
14178
|
+
|
|
14179
|
+
var FooterLink = memo(function (_a) {
|
|
14180
|
+
var link = _a.link, showDivider = _a.showDivider, hasInvertedStyle = _a.hasInvertedStyle;
|
|
14181
|
+
return (jsxs(Fragment, { children: [jsx(StyledLinkItemLink, __assign({ href: link.url, hasInvertedStyle: hasInvertedStyle, component: link.component }, link.linkProps, { children: link.label }), link.label), showDivider && (jsx(StyledDivider, { orientation: "vertical", flexItem: true, hasInvertedStyle: hasInvertedStyle }))] }));
|
|
14182
|
+
});
|
|
14183
|
+
FooterLink.displayName = "FooterLink";
|
|
14184
|
+
|
|
14185
|
+
function groupArray(array, groupSize) {
|
|
14186
|
+
var groups = [];
|
|
14187
|
+
for (var i = 0; i < array.length; i += groupSize) {
|
|
14188
|
+
groups.push(array.slice(i, i + groupSize));
|
|
14189
|
+
}
|
|
14190
|
+
return groups;
|
|
14191
|
+
}
|
|
14192
|
+
var MemoizedStyledDivider = memo(StyledDivider);
|
|
14193
|
+
function NavigationFooter(_a) {
|
|
14194
|
+
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"]);
|
|
14195
|
+
var footerRef = useRef(null);
|
|
14196
|
+
var theme = useTheme();
|
|
14197
|
+
var isMdScreen = useMediaQuery(theme.breakpoints.down("md"));
|
|
14198
|
+
var _b = useState({
|
|
14199
|
+
breakpoint: 0,
|
|
14200
|
+
isNarrow: isMdScreen,
|
|
14201
|
+
}), dimensions = _b[0], setDimensions = _b[1];
|
|
14202
|
+
useEffect(function () {
|
|
14203
|
+
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
14204
|
+
}, [isMdScreen]);
|
|
14205
|
+
var checkScrollable = useCallback(function () {
|
|
14206
|
+
if (!footerRef.current)
|
|
14207
|
+
return;
|
|
14208
|
+
var clientWidth = footerRef.current.clientWidth;
|
|
14209
|
+
var scrollWidth = footerRef.current.scrollWidth;
|
|
14210
|
+
var needsScroll = scrollWidth > clientWidth;
|
|
14211
|
+
setDimensions(function (prev) {
|
|
14212
|
+
var newBreakpoint = needsScroll && !prev.isNarrow
|
|
14213
|
+
? Math.max(prev.breakpoint, clientWidth)
|
|
14214
|
+
: prev.breakpoint;
|
|
14215
|
+
return {
|
|
14216
|
+
breakpoint: newBreakpoint,
|
|
14217
|
+
isNarrow: clientWidth <= newBreakpoint,
|
|
14218
|
+
};
|
|
14219
|
+
});
|
|
14220
|
+
}, []);
|
|
14221
|
+
useEffect(function () {
|
|
14222
|
+
checkScrollable();
|
|
14223
|
+
var resizeObserver = new ResizeObserver(checkScrollable);
|
|
14224
|
+
if (footerRef.current) {
|
|
14225
|
+
resizeObserver.observe(footerRef.current);
|
|
14226
|
+
}
|
|
14227
|
+
return function () { return resizeObserver.disconnect(); };
|
|
14228
|
+
}, [checkScrollable]);
|
|
14229
|
+
var renderImages = useCallback(function () {
|
|
14230
|
+
if (!(images === null || images === void 0 ? void 0 : images.length))
|
|
14231
|
+
return null;
|
|
14232
|
+
if (!dimensions.isNarrow) {
|
|
14233
|
+
return images.map(function (_a) {
|
|
14234
|
+
var image = _a.image, url = _a.url;
|
|
14235
|
+
return (jsx(Link, { href: url, children: image }, url));
|
|
14236
|
+
});
|
|
14237
|
+
}
|
|
14238
|
+
return groupArray(images, 2).map(function (imageGroup, index) { return (jsx(StyledMobileImageRow, { children: imageGroup.map(function (_a) {
|
|
14239
|
+
var image = _a.image, url = _a.url;
|
|
14240
|
+
return (jsx(Link, { href: url, children: image }, url));
|
|
14241
|
+
}) }, index)); });
|
|
14242
|
+
}, [images, dimensions.isNarrow]);
|
|
14243
|
+
var renderLinks = useCallback(function () {
|
|
14244
|
+
if (!(navLinks === null || navLinks === void 0 ? void 0 : navLinks.length))
|
|
14245
|
+
return null;
|
|
14246
|
+
if (!dimensions.isNarrow) {
|
|
14247
|
+
return navLinks.map(function (link, index) { return (jsx(FooterLink, { link: link, showDivider: index < navLinks.length - 1, hasInvertedStyle: hasInvertedStyle }, link.label)); });
|
|
14248
|
+
}
|
|
14249
|
+
return groupArray(navLinks, 3).map(function (linkGroup, index) { return (jsx(StyledMobileLinkRow, { children: linkGroup.map(function (link, linkIndex) { return (jsx(FooterLink, { link: link, showDivider: linkIndex < linkGroup.length - 1, hasInvertedStyle: hasInvertedStyle }, link.label)); }) }, index)); });
|
|
14250
|
+
}, [navLinks, dimensions.isNarrow, hasInvertedStyle]);
|
|
14251
|
+
var logoNode = useMemo(function () {
|
|
14252
|
+
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 })] }));
|
|
14253
|
+
return logoUrl ? jsx(Link, { href: logoUrl, children: node }) : node;
|
|
14254
|
+
}, [
|
|
14255
|
+
logo,
|
|
14256
|
+
title,
|
|
14257
|
+
tag,
|
|
14258
|
+
tagColor,
|
|
14259
|
+
logoUrl,
|
|
14260
|
+
dimensions.isNarrow,
|
|
14261
|
+
hasInvertedStyle,
|
|
14262
|
+
]);
|
|
14263
|
+
var navItemsSection = useMemo(function () {
|
|
14264
|
+
if (!(navItems === null || navItems === void 0 ? void 0 : navItems.length))
|
|
14265
|
+
return null;
|
|
14266
|
+
return (jsx(StyledNavSection, { isNarrow: dimensions.isNarrow, children: navItems.map(function (item) { return (jsx(NavItem, { item: item, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, item.label)); }) }));
|
|
14267
|
+
}, [navItems, hasInvertedStyle, dimensions.isNarrow]);
|
|
14268
|
+
return (jsxs(StyledFooter, __assign({ ref: footerRef, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, rest, { children: [jsxs(StyledTopSection, { isNarrow: dimensions.isNarrow, hasInvertedStyle: hasInvertedStyle, children: [logoNode, navItemsSection] }), jsx(MemoizedStyledDivider, { hasInvertedStyle: hasInvertedStyle }), jsxs(StyledBottomSection, { isNarrow: dimensions.isNarrow, children: [jsx(StyledLinkSection, { isNarrow: dimensions.isNarrow, children: renderLinks() }), jsx(StyledImageSection, { isNarrow: dimensions.isNarrow, children: renderImages() })] })] })));
|
|
14269
|
+
}
|
|
14270
|
+
|
|
13721
14271
|
var doNotForwardProps$9 = [
|
|
13722
14272
|
"hasInvertedStyle",
|
|
13723
14273
|
"isNarrow",
|
|
@@ -13745,15 +14295,21 @@ var StyledToolbar = styled$2(Toolbar, {
|
|
|
13745
14295
|
var spaces = getSpaces(props);
|
|
13746
14296
|
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));
|
|
13747
14297
|
});
|
|
13748
|
-
var StyledShadowElement = styled$2
|
|
14298
|
+
var StyledShadowElement = styled$2("div", {
|
|
14299
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14300
|
+
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13749
14301
|
var shadows = getShadows(props);
|
|
13750
14302
|
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 ");
|
|
13751
14303
|
});
|
|
13752
|
-
var StyledShadowCoverElement = styled$2
|
|
14304
|
+
var StyledShadowCoverElement = styled$2("div", {
|
|
14305
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14306
|
+
})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13753
14307
|
var colors = getSemanticColors(props);
|
|
13754
14308
|
return "\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n height: 10px;\n display: block;\n position: absolute;\n width: 100%;\n top: 56px;\n left: 0;\n z-index: 100;\n ");
|
|
13755
14309
|
});
|
|
13756
|
-
var StyledHeaderButton = styled$2(Button
|
|
14310
|
+
var StyledHeaderButton = styled$2(Button, {
|
|
14311
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14312
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13757
14313
|
var _a, _b, _c, _d;
|
|
13758
14314
|
var sdsType = props.sdsType, hasInvertedStyle = props.hasInvertedStyle;
|
|
13759
14315
|
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";
|
|
@@ -13766,7 +14322,9 @@ var invertedNarrowButtonStyles = function (props) {
|
|
|
13766
14322
|
var semanticColors = getSemanticColors(props);
|
|
13767
14323
|
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);
|
|
13768
14324
|
};
|
|
13769
|
-
var StyledNarrowIconButton = styled$2(Button
|
|
14325
|
+
var StyledNarrowIconButton = styled$2(Button, {
|
|
14326
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14327
|
+
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13770
14328
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
13771
14329
|
return css$2(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
13772
14330
|
});
|
|
@@ -13775,7 +14333,9 @@ var invertedWideButtonStyles = function (props) {
|
|
|
13775
14333
|
var semanticColors = getSemanticColors(props);
|
|
13776
14334
|
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);
|
|
13777
14335
|
};
|
|
13778
|
-
var StyledWideIconButton = styled$2(Button
|
|
14336
|
+
var StyledWideIconButton = styled$2(Button, {
|
|
14337
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
14338
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13779
14339
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
13780
14340
|
return css$2(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
13781
14341
|
});
|
|
@@ -13822,19 +14382,19 @@ var StyledSearch = styled$2(InputSearch, {
|
|
|
13822
14382
|
return css$2(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n\n &:hover {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-focused {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-disabled {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n }\n "], ["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n\n &:hover {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-focused {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-disabled {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n }\n "])), isNarrow ? "100%" : "320px", isNarrow ? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px") : "", hasInvertedStyle
|
|
13823
14383
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
13824
14384
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
13825
|
-
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
14385
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryInverse
|
|
13826
14386
|
: "", hasInvertedStyle
|
|
13827
14387
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryInverse
|
|
13828
14388
|
: "", hasInvertedStyle
|
|
13829
|
-
? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.
|
|
14389
|
+
? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryHoverInverse
|
|
13830
14390
|
: "", hasInvertedStyle
|
|
13831
14391
|
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse
|
|
13832
14392
|
: "", hasInvertedStyle
|
|
13833
|
-
? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.
|
|
14393
|
+
? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryPressedInverse
|
|
13834
14394
|
: "", hasInvertedStyle
|
|
13835
14395
|
? (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentPrimaryInverse
|
|
13836
14396
|
: "", hasInvertedStyle
|
|
13837
|
-
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.
|
|
14397
|
+
? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimaryDisabledInverse
|
|
13838
14398
|
: "", hasInvertedStyle
|
|
13839
14399
|
? (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabledInverse
|
|
13840
14400
|
: "");
|
|
@@ -13878,7 +14438,7 @@ var NarrowPrimaryNavItem = function (props) {
|
|
|
13878
14438
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
13879
14439
|
var inactiveBorderColor = hasInvertedStyle
|
|
13880
14440
|
? (_c = colors === null || colors === void 0 ? void 0 : colors.neutral) === null || _c === void 0 ? void 0 : _c.fillPrimary
|
|
13881
|
-
: colors === null || colors === void 0 ? void 0 : colors.base.
|
|
14441
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
13882
14442
|
return css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n border-left: ", "px solid\n ", ";\n border-radius: 0;\n justify-content: start;\n padding: ", "px 0 ", "px\n ", "px;\n background: ", ";\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n }\n "], ["\n border-left: ", "px solid\n ", ";\n border-radius: 0;\n justify-content: start;\n padding: ", "px 0 ", "px\n ", "px;\n background: ", ";\n width: 100%;\n\n &:hover {\n box-shadow: none;\n background: ", ";\n border-left: ", "px solid\n ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : "transparent", spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, ((_d = spaces === null || spaces === void 0 ? void 0 : spaces.l) !== null && _d !== void 0 ? _d : 0) + ((_e = spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) !== null && _e !== void 0 ? _e : 0), active ? activeBackgroundColor : "transparent", hasInvertedStyle
|
|
13883
14443
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondaryInverse
|
|
13884
14444
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeBorderColor : inactiveBorderColor);
|
|
@@ -13903,7 +14463,7 @@ var WideStyledLabel = function (props) {
|
|
|
13903
14463
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
|
|
13904
14464
|
var inactiveBorderColor = hasInvertedStyle
|
|
13905
14465
|
? colors === null || colors === void 0 ? void 0 : colors.base.borderOnFill
|
|
13906
|
-
: colors === null || colors === void 0 ? void 0 : colors.base.
|
|
14466
|
+
: colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
|
|
13907
14467
|
return css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n padding-bottom: ", "px;\n\n &:hover {\n border-bottom-color: ", ";\n }\n "], ["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n padding-bottom: ", "px;\n\n &:hover {\n border-bottom-color: ", ";\n }\n "])), active ? activeBorderColor : "transparent", spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, active ? activeBorderColor : inactiveBorderColor);
|
|
13908
14468
|
};
|
|
13909
14469
|
var StyledLabel = styled$2("span", {
|
|
@@ -14201,7 +14761,7 @@ var StyledTab$1 = styled$2(Tab$1, {
|
|
|
14201
14761
|
var _a, _b, _c;
|
|
14202
14762
|
var spaces = getSpaces(props);
|
|
14203
14763
|
var semanticColors = getSemanticColors(props);
|
|
14204
|
-
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
14764
|
+
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
|
|
14205
14765
|
});
|
|
14206
14766
|
var templateObject_1$f, templateObject_2$8;
|
|
14207
14767
|
|
|
@@ -14705,7 +15265,7 @@ var StyledSegmentedControl = styled$2(ToggleButtonGroup, {
|
|
|
14705
15265
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
14706
15266
|
var spaces = getSpaces(props);
|
|
14707
15267
|
var semanticColors = getSemanticColors(props);
|
|
14708
|
-
return "\n .".concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
15268
|
+
return "\n .".concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n }\n\n .").concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.selected, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornamentSelected, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimary, ";\n\n &:hover {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n\n .").concat(toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n background-color: transparent;\n border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderPrimary, ";\n line-height: 0px;\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimary, ";\n padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderPrimary, ";\n background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n }\n }\n ");
|
|
14709
15269
|
});
|
|
14710
15270
|
var StyledToggleButton = styled$2(ToggleButton, {
|
|
14711
15271
|
shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
|
|
@@ -14794,7 +15354,7 @@ var TableRow = forwardRef(function (props, ref) {
|
|
|
14794
15354
|
var StyledTableHeader = styled$2("thead")(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
14795
15355
|
var _a;
|
|
14796
15356
|
var semanticColors = getSemanticColors(props);
|
|
14797
|
-
return "\n border-bottom: solid 2px ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.
|
|
15357
|
+
return "\n border-bottom: solid 2px ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, ";\n ");
|
|
14798
15358
|
});
|
|
14799
15359
|
var templateObject_1$5;
|
|
14800
15360
|
|
|
@@ -14869,7 +15429,7 @@ var StyledTab = styled$2(Tab$1, {
|
|
|
14869
15429
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
14870
15430
|
var spaces = getSpaces(props);
|
|
14871
15431
|
var semanticColors = getSemanticColors(props);
|
|
14872
|
-
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n &:hover, :focus {\n box-shadow: 0 2px 0 0 ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.
|
|
15432
|
+
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n &:hover, :focus {\n box-shadow: 0 2px 0 0 ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderPrimary, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n }\n\n &.Mui-selected {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n }\n }\n\n &:active {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n }\n\n &:disabled {\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n }\n ");
|
|
14873
15433
|
});
|
|
14874
15434
|
function tabFontMixin(props) {
|
|
14875
15435
|
var sdsSize = props.sdsSize;
|
|
@@ -15002,4 +15562,4 @@ var TooltipTableContent = function (props) {
|
|
|
15002
15562
|
return (jsxs(TableContainer, __assign({}, rest, { children: [contentAlert && jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxs(Section, { disabled: section.disabled, children: [jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label }), jsx(Table$1, { size: "small", children: jsx(TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxs(TableRow$1, { children: [jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
|
|
15003
15563
|
};
|
|
15004
15564
|
|
|
15005
|
-
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
|
|
15565
|
+
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
|