@czi-sds/components 22.9.1 → 22.10.1

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.js CHANGED
@@ -1574,7 +1574,7 @@ var fontHeader = function (fontSize, isNarrow) {
1574
1574
  return null;
1575
1575
  var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
1576
1576
  if (isNarrow) {
1577
- return react.css(templateObject_4$x || (templateObject_4$x = __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));
1577
+ return react.css(templateObject_4$y || (templateObject_4$y = __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));
1578
1578
  }
1579
1579
  return themeToCss(header.semibold[fontSize], headerFontFamily);
1580
1580
  };
@@ -1597,7 +1597,7 @@ var fontCode = function (fontSize, fontWeight, isNarrow) {
1597
1597
  return null;
1598
1598
  var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
1599
1599
  if (isNarrow) {
1600
- return react.css(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowCode[fontWeight][fontSize], codeFontFamily));
1600
+ return react.css(templateObject_5$q || (templateObject_5$q = __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));
1601
1601
  }
1602
1602
  return themeToCss(code[fontWeight][fontSize], codeFontFamily);
1603
1603
  };
@@ -1615,8 +1615,8 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
1615
1615
  if (!typography)
1616
1616
  return null;
1617
1617
  var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
1618
- return react.css(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
1619
- ? react.css(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
1618
+ return react.css(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
1619
+ ? react.css(templateObject_6$m || (templateObject_6$m = __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));
1620
1620
  };
1621
1621
  };
1622
1622
  var fontTabularXs = fontTabular("xs", "regular");
@@ -1627,7 +1627,7 @@ function themeToCss(fontTheme, fontFamily) {
1627
1627
  if (fontFamily === void 0) { fontFamily = "inherit"; }
1628
1628
  return react.css(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "], ["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
1629
1629
  }
1630
- var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$x, templateObject_5$p, templateObject_6$l, templateObject_7$h, templateObject_8$e;
1630
+ var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$y, templateObject_5$q, templateObject_6$m, templateObject_7$i, templateObject_8$e;
1631
1631
 
1632
1632
  var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
1633
1633
  var spaces = getSpaces(props);
@@ -1646,12 +1646,12 @@ var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(t
1646
1646
  var semanticColors = getSemanticColors(props);
1647
1647
  return react.css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
1648
1648
  });
1649
- var StyledSubtitle$1 = styled__default.default("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1649
+ var StyledSubtitle$1 = styled__default.default("p")(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1650
1650
  var _a;
1651
1651
  var semanticColors = getSemanticColors(props);
1652
1652
  return react.css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
1653
1653
  });
1654
- var templateObject_1$18, templateObject_2$L, templateObject_3$C, templateObject_4$w;
1654
+ var templateObject_1$18, templateObject_2$L, templateObject_3$C, templateObject_4$x;
1655
1655
 
1656
1656
  var _path$29, _path2$E, _path3$6;
1657
1657
  function _extends$2f() { return _extends$2f = 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$2f.apply(null, arguments); }
@@ -4714,9 +4714,9 @@ var DestructiveButton = function (props) {
4714
4714
  };
4715
4715
  var StyledButton$3 = styled__default.default(material.Button, {
4716
4716
  shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
4717
- })(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
4717
+ })(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
4718
4718
  var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
4719
- return react.css(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(), sdsType === "destructive" && DestructiveButton(props));
4719
+ return react.css(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(), sdsType === "destructive" && DestructiveButton(props));
4720
4720
  });
4721
4721
  // Minimal Button Styles
4722
4722
  var Minimal = function (props) {
@@ -4725,12 +4725,12 @@ var Minimal = function (props) {
4725
4725
  var spaces = getSpaces(props);
4726
4726
  var iconSizes = getIconSizes(props);
4727
4727
  var semanticColors = getSemanticColors(props);
4728
- return react.css(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, (_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _l === void 0 ? void 0 : _l.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4728
+ return react.css(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, (_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _l === void 0 ? void 0 : _l.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4729
4729
  };
4730
4730
  var PrimaryMinimalButton = function (props) {
4731
4731
  var _a, _b;
4732
4732
  var semanticColors = getSemanticColors(props);
4733
- return react.css(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
4733
+ return react.css(templateObject_7$h || (templateObject_7$h = __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);
4734
4734
  };
4735
4735
  var SecondaryMinimalButton = function (props) {
4736
4736
  var _a, _b;
@@ -4752,7 +4752,7 @@ var StyledButtonLegacy = styled__default.default(material.Button, {
4752
4752
  var spaces = getSpaces(props);
4753
4753
  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 ");
4754
4754
  });
4755
- var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$9, templateObject_10$6, templateObject_11$5;
4755
+ var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$w, templateObject_5$p, templateObject_6$l, templateObject_7$h, templateObject_8$d, templateObject_9$9, templateObject_10$6, templateObject_11$5;
4756
4756
 
4757
4757
  var isDisabled$1 = function (props) {
4758
4758
  var _a, _b;
@@ -4772,13 +4772,13 @@ var secondary$2 = function (props) {
4772
4772
  var tertiary = function (props) {
4773
4773
  var _a, _b, _c, _d, _e, _f;
4774
4774
  var semanticColors = getSemanticColors(props);
4775
- return react.css(templateObject_4$u || (templateObject_4$u = __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);
4775
+ return react.css(templateObject_4$v || (templateObject_4$v = __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);
4776
4776
  };
4777
4777
  var small$1 = function (props) {
4778
4778
  var sdsType = props.sdsType;
4779
4779
  var iconSizes = getIconSizes(props);
4780
4780
  var spaces = getSpaces(props);
4781
- return react.css(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
4781
+ return react.css(templateObject_5$o || (templateObject_5$o = __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"
4782
4782
  ? "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;")
4783
4783
  : "", 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;") : "");
4784
4784
  };
@@ -4786,7 +4786,7 @@ var medium$1 = function (props) {
4786
4786
  var sdsType = props.sdsType;
4787
4787
  var iconSizes = getIconSizes(props);
4788
4788
  var spaces = getSpaces(props);
4789
- return react.css(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
4789
+ return react.css(templateObject_6$k || (templateObject_6$k = __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"
4790
4790
  ? "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;")
4791
4791
  : "", 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;") : "");
4792
4792
  };
@@ -4794,7 +4794,7 @@ var large = function (props) {
4794
4794
  var sdsType = props.sdsType;
4795
4795
  var iconSizes = getIconSizes(props);
4796
4796
  var spaces = getSpaces(props);
4797
- return react.css(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
4797
+ return react.css(templateObject_7$g || (templateObject_7$g = __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"
4798
4798
  ? "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;")
4799
4799
  : "", 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;") : "");
4800
4800
  };
@@ -4813,7 +4813,7 @@ var StyledButtonIcon = styled__default.default(material.IconButton, {
4813
4813
  var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
4814
4814
  return react.css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
4815
4815
  });
4816
- var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$8;
4816
+ var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$c, templateObject_9$8;
4817
4817
 
4818
4818
  var ButtonIconSizeToSdsIconSize = {
4819
4819
  large: "xl",
@@ -4935,7 +4935,7 @@ var disabledStyled$2 = function (props) {
4935
4935
  var semanticColors = getSemanticColors(props);
4936
4936
  return react.css(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryDisabled, material.inputAdornmentClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled);
4937
4937
  };
4938
- var StyledLabel$3 = styled__default.default("label")(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4938
+ var StyledLabel$3 = styled__default.default("label")(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4939
4939
  var spaces = getSpaces(props);
4940
4940
  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 ");
4941
4941
  });
@@ -4943,16 +4943,16 @@ var StyledSearchBase = styled__default.default(material.TextField, {
4943
4943
  shouldForwardProp: function (prop) {
4944
4944
  return !doNotForwardProps$C.includes(prop.toString());
4945
4945
  },
4946
- })(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4946
+ })(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4947
4947
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
4948
4948
  var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
4949
4949
  var spaces = getSpaces(props);
4950
4950
  var iconSizes = getIconSizes(props);
4951
4951
  var semanticColors = getSemanticColors(props);
4952
- return react.css(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, material.outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentFocus, material.outlinedInputClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.borderPrimaryHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
4952
+ return react.css(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, material.outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentFocus, material.outlinedInputClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.borderPrimaryHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
4953
4953
  });
4954
- var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
4955
- var templateObject_1$12, templateObject_2$G, templateObject_3$x, templateObject_4$t, templateObject_5$m, templateObject_6$i, templateObject_7$e;
4954
+ var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
4955
+ var templateObject_1$12, templateObject_2$G, templateObject_3$x, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f;
4956
4956
 
4957
4957
  var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4958
4958
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -4976,7 +4976,7 @@ var TextWrapper = styled__default.default("span")(templateObject_3$w || (templat
4976
4976
  var semanticColors = getSemanticColors(props);
4977
4977
  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 ");
4978
4978
  }, disabledStyles$2);
4979
- var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4979
+ var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4980
4980
  var _a;
4981
4981
  var disabled = props.disabled;
4982
4982
  var spaces = getSpaces(props);
@@ -4984,20 +4984,20 @@ var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$s || (
4984
4984
  var semanticColors = getSemanticColors(props);
4985
4985
  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 ");
4986
4986
  });
4987
- var ColumnWrapper = styled__default.default("span")(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
4987
+ var ColumnWrapper = styled__default.default("span")(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
4988
4988
  var _a;
4989
4989
  var semanticColors = getSemanticColors(props);
4990
4990
  var spaces = getSpaces(props);
4991
4991
  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 ");
4992
4992
  }, disabledStyles$2);
4993
- var StyledIconWrapper = styled__default.default("span")(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4993
+ var StyledIconWrapper = styled__default.default("span")(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4994
4994
  var spaces = getSpaces(props);
4995
4995
  var iconSizes = getIconSizes(props);
4996
4996
  return "\n display: flex;\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 ");
4997
4997
  });
4998
4998
  var StyledCheck = styled__default.default(iconsMaterial.Check, {
4999
4999
  shouldForwardProp: function (prop) { return prop !== "selected"; },
5000
- })(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5000
+ })(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5001
5001
  var _a, _b;
5002
5002
  var selected = props.selected, disabled = props.disabled;
5003
5003
  var iconSizes = getIconSizes(props);
@@ -5019,7 +5019,7 @@ var StyledMinus = styled__default.default(iconsMaterial.Remove, {
5019
5019
  : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
5020
5020
  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 ");
5021
5021
  });
5022
- var templateObject_1$11, templateObject_2$F, templateObject_3$w, templateObject_4$s, templateObject_5$l, templateObject_6$h, templateObject_7$d, templateObject_8$b;
5022
+ var templateObject_1$11, templateObject_2$F, templateObject_3$w, templateObject_4$t, templateObject_5$m, templateObject_6$i, templateObject_7$e, templateObject_8$b;
5023
5023
 
5024
5024
  /**
5025
5025
  * @see https://mui.com/material-ui/react-menu/
@@ -5216,7 +5216,7 @@ var StyledMenuInputSearch$1 = styled__default.default(InputSearch, {
5216
5216
  var search = _a.search;
5217
5217
  return (search ? "auto" : "transparent");
5218
5218
  });
5219
- var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5219
+ var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5220
5220
  var _a;
5221
5221
  var spaces = getSpaces(props);
5222
5222
  var corners = getCorners(props);
@@ -5225,13 +5225,13 @@ var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$r |
5225
5225
  var semanticColors = getSemanticColors(props);
5226
5226
  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 ");
5227
5227
  });
5228
- var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
5228
+ var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
5229
5229
  var _a;
5230
5230
  var semanticColors = getSemanticColors(props);
5231
5231
  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 ");
5232
5232
  });
5233
- var StyledMenuItemText = styled__default.default("div")(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
5234
- var templateObject_1$10, templateObject_2$E, templateObject_3$v, templateObject_4$r, templateObject_5$k, templateObject_6$g;
5233
+ var StyledMenuItemText = styled__default.default("div")(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
5234
+ var templateObject_1$10, templateObject_2$E, templateObject_3$v, templateObject_4$s, templateObject_5$l, templateObject_6$h;
5235
5235
 
5236
5236
  var AutocompleteBase = function (props) {
5237
5237
  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;
@@ -5487,14 +5487,14 @@ var StyledPaper$2 = styled__default.default(material.Paper, {
5487
5487
  var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5488
5488
  var StyledAutocompleteInput = styled__default.default(InputSearch, {
5489
5489
  shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
5490
- })(templateObject_4$q || (templateObject_4$q = __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) {
5490
+ })(templateObject_4$r || (templateObject_4$r = __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) {
5491
5491
  var search = _a.search;
5492
5492
  return !search && "height: 0; display: none; margin: 0 !important;";
5493
5493
  }, function (_a) {
5494
5494
  var search = _a.search;
5495
5495
  return (search ? "auto" : "transparent");
5496
5496
  });
5497
- var templateObject_1$_, templateObject_2$C, templateObject_3$t, templateObject_4$q;
5497
+ var templateObject_1$_, templateObject_2$C, templateObject_3$t, templateObject_4$r;
5498
5498
 
5499
5499
  var AutocompleteMultiColumn = function (props) {
5500
5500
  var _a;
@@ -5703,7 +5703,7 @@ var StyledButton$2 = styled__default.default(Button, {
5703
5703
  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 ");
5704
5704
  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 ");
5705
5705
  });
5706
- styled__default.default("div")(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
5706
+ styled__default.default("div")(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
5707
5707
  var primary$1 = function (props) {
5708
5708
  var _a, _b;
5709
5709
  var semanticColors = getSemanticColors(props);
@@ -5717,12 +5717,12 @@ var secondary$1 = function (props) {
5717
5717
  var doNotForwardProps$z = ["sdsType", "textChild"];
5718
5718
  var StyledBanner = styled__default.default("div", {
5719
5719
  shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
5720
- })(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
5720
+ })(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
5721
5721
  var sdsType = props.sdsType;
5722
5722
  var spaces = getSpaces(props);
5723
5723
  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 ");
5724
5724
  });
5725
- var templateObject_1$Z, templateObject_2$B, templateObject_3$s, templateObject_4$p, templateObject_5$j;
5725
+ var templateObject_1$Z, templateObject_2$B, templateObject_3$s, templateObject_4$q, templateObject_5$k;
5726
5726
 
5727
5727
  var Banner = React.forwardRef(function Banner(props, ref) {
5728
5728
  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"]);
@@ -5946,7 +5946,7 @@ var tableStyles = function (props) {
5946
5946
  var doNotForwardProps$w = ["hasInvertedStyle", "textAlign"];
5947
5947
  var StyledTitle = styled__default.default("p", {
5948
5948
  shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
5949
- })(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
5949
+ })(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
5950
5950
  var _a, _b;
5951
5951
  var hasInvertedStyle = props.hasInvertedStyle;
5952
5952
  var semanticColors = getSemanticColors(props);
@@ -5954,7 +5954,7 @@ var StyledTitle = styled__default.default("p", {
5954
5954
  });
5955
5955
  var StyledSubtitle = styled__default.default("p", {
5956
5956
  shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
5957
- })(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5957
+ })(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5958
5958
  var _a, _b;
5959
5959
  var hasInvertedStyle = props.hasInvertedStyle;
5960
5960
  var semanticColors = getSemanticColors(props);
@@ -5963,7 +5963,7 @@ var StyledSubtitle = styled__default.default("p", {
5963
5963
  var tooltipCss = function (props) {
5964
5964
  var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor, textAlign = props.textAlign;
5965
5965
  var shadows = getShadows(props);
5966
- return css.css(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, width === "wide" ? "550px" : "250px", textAlign
5966
+ return css.css(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, width === "wide" ? "550px" : "250px", textAlign
5967
5967
  ? textAlign
5968
5968
  : width === "wide"
5969
5969
  ? "left"
@@ -5975,7 +5975,7 @@ var arrowCss = function (props) {
5975
5975
  var _a, _b;
5976
5976
  var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5977
5977
  var semanticColors = getSemanticColors(props);
5978
- return css.css(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
5978
+ return css.css(templateObject_7$d || (templateObject_7$d = __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"
5979
5979
  ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
5980
5980
  : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
5981
5981
  };
@@ -5988,7 +5988,7 @@ var StyledComponentSlotWrapper = styled__default.default("div")(templateObject_9
5988
5988
  var spaces = getSpaces(props);
5989
5989
  return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n ");
5990
5990
  });
5991
- var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a, templateObject_9$7;
5991
+ var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$p, templateObject_5$j, templateObject_6$g, templateObject_7$d, templateObject_8$a, templateObject_9$7;
5992
5992
 
5993
5993
  /**
5994
5994
  * @see https://mui.com/material-ui/react-tooltip/
@@ -6112,18 +6112,18 @@ var StyledCellContent = styled__default.default("div")(templateObject_2$z || (te
6112
6112
  var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
6113
6113
  var StyledCellIconWrapper = styled__default.default("div", {
6114
6114
  shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
6115
- })(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6115
+ })(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6116
6116
  var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
6117
6117
  var spaces = getSpaces(props);
6118
6118
  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 ");
6119
6119
  });
6120
- var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6120
+ var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6121
6121
  var horizontalAlign = props.horizontalAlign;
6122
6122
  return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
6123
6123
  });
6124
6124
  var PrimaryText = styled__default.default("div", {
6125
6125
  shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
6126
- })(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
6126
+ })(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
6127
6127
  var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a, _b = props.tabularNums, tabularNums = _b === void 0 ? false : _b;
6128
6128
  return "\n display: block;\n font-variant-numeric: ".concat(tabularNums ? TABULAR_NUMS : "normal", ";\n \n ").concat(props.shouldTextWrap
6129
6129
  ? ShouldWrap(primaryTextWrapLineCount)
@@ -6131,7 +6131,7 @@ var PrimaryText = styled__default.default("div", {
6131
6131
  });
6132
6132
  var SecondaryText = styled__default.default("span", {
6133
6133
  shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
6134
- })(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6134
+ })(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6135
6135
  var _a;
6136
6136
  var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
6137
6137
  var spaces = getSpaces(props);
@@ -6159,7 +6159,7 @@ var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templa
6159
6159
  var spaces = getSpaces(props);
6160
6160
  return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
6161
6161
  });
6162
- var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$n, templateObject_5$h, templateObject_6$e, templateObject_7$b, templateObject_8$9, templateObject_9$6, templateObject_10$5;
6162
+ var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$9, templateObject_9$6, templateObject_10$5;
6163
6163
 
6164
6164
  var CellBasicContent = function (props) {
6165
6165
  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, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
@@ -6238,11 +6238,11 @@ var StyledCellHeaderText = styled__default.default("div", {
6238
6238
  });
6239
6239
  var StyledCellHeaderContainer = styled__default.default("div", {
6240
6240
  shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
6241
- })(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6241
+ })(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6242
6242
  var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
6243
6243
  return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
6244
6244
  });
6245
- var templateObject_1$Q, templateObject_2$y, templateObject_3$p, templateObject_4$m;
6245
+ var templateObject_1$Q, templateObject_2$y, templateObject_3$p, templateObject_4$n;
6246
6246
 
6247
6247
  var CellHeaderContent = function (props) {
6248
6248
  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, _c = props.shouldTruncate, shouldTruncate = _c === void 0 ? false : _c;
@@ -6275,7 +6275,7 @@ var rounded$2 = function (props) {
6275
6275
  };
6276
6276
  var square$2 = function (props) {
6277
6277
  var corners = getCorners(props);
6278
- return react.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
6278
+ return react.css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
6279
6279
  };
6280
6280
  var success = function (props) {
6281
6281
  return createStatusCss(props, "success");
@@ -6328,7 +6328,7 @@ function createStatusCss(props, status) {
6328
6328
  },
6329
6329
  };
6330
6330
  var statusColors = statusToColors[status];
6331
- return react.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "], ["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "])), statusColors.light, statusColors.dark);
6331
+ return react.css(templateObject_5$h || (templateObject_5$h = __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);
6332
6332
  }
6333
6333
  var statusToCss = {
6334
6334
  beta: beta,
@@ -6341,11 +6341,11 @@ var statusToCss = {
6341
6341
  var doNotForwardProps$s = ["isRounded"];
6342
6342
  var StyledChip = styled__default.default(material.Chip, {
6343
6343
  shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
6344
- })(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
6344
+ })(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
6345
6345
  var size = props.size, status = props.status, isRounded = props.isRounded;
6346
- return react.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
6346
+ return react.css(templateObject_6$e || (templateObject_6$e = __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));
6347
6347
  });
6348
- var templateObject_1$P, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$a;
6348
+ var templateObject_1$P, templateObject_2$x, templateObject_3$o, templateObject_4$m, templateObject_5$h, templateObject_6$e, templateObject_7$b;
6349
6349
 
6350
6350
  /**
6351
6351
  * @see https://mui.com/material-ui/react-chip/
@@ -6399,7 +6399,7 @@ var StyledPopper = styled__default.default(material.Popper, {
6399
6399
  });
6400
6400
  var StyledPaper$1 = styled__default.default(material.Paper, {
6401
6401
  shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
6402
- })(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6402
+ })(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6403
6403
  var _a;
6404
6404
  var spaces = getSpaces(props);
6405
6405
  var borders = getBorders(props);
@@ -6407,12 +6407,12 @@ var StyledPaper$1 = styled__default.default(material.Paper, {
6407
6407
  var semanticColors = getSemanticColors(props);
6408
6408
  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 ");
6409
6409
  });
6410
- var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6410
+ var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6411
6411
  var search = props.search;
6412
6412
  var spaces = getSpaces(props);
6413
6413
  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 ");
6414
6414
  });
6415
- var templateObject_1$O, templateObject_2$w, templateObject_3$n, templateObject_4$k, templateObject_5$f;
6415
+ var templateObject_1$O, templateObject_2$w, templateObject_3$n, templateObject_4$l, templateObject_5$g;
6416
6416
 
6417
6417
  // (masoudmanson): Represents the minimum width defined by design specifications
6418
6418
  // for the dropdownMenu's popper component
@@ -6491,13 +6491,13 @@ var square$1 = function (props) {
6491
6491
  };
6492
6492
  var rounded$1 = function (props) {
6493
6493
  var corners = getCorners(props);
6494
- return react.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
6494
+ return react.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
6495
6495
  };
6496
6496
  var userInput = function (props) {
6497
6497
  var _a, _b, _c, _d;
6498
6498
  var sdsStyle = props.sdsStyle;
6499
6499
  var semanticColors = getSemanticColors(props);
6500
- return react.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, sdsStyle === "minimal"
6500
+ return react.css(templateObject_5$f || (templateObject_5$f = __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"
6501
6501
  ? "\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 ")
6502
6502
  : "");
6503
6503
  };
@@ -6507,7 +6507,7 @@ var isOpen = function (props) {
6507
6507
  var borders = getBorders(props);
6508
6508
  var semanticColors = getSemanticColors(props);
6509
6509
  var inputColor = intentToColor$2[intent];
6510
- return react.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
6510
+ return react.css(templateObject_6$d || (templateObject_6$d = __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"
6511
6511
  ? "\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 ")
6512
6512
  : "", inputColor === "accent"
6513
6513
  ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentOpen
@@ -6520,7 +6520,7 @@ var isOpen = function (props) {
6520
6520
  var applyIntentColor$1 = function (props, intent) {
6521
6521
  var _a, _b, _c;
6522
6522
  var borders = getBorders(props);
6523
- return react.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "], ["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "])), (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
6523
+ return react.css(templateObject_7$a || (templateObject_7$a = __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);
6524
6524
  };
6525
6525
  var isDisabled = function (props) {
6526
6526
  var _a, _b, _c, _d;
@@ -6602,7 +6602,7 @@ function labelStyle(props) {
6602
6602
  : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
6603
6603
  return react.css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
6604
6604
  }
6605
- var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$5, templateObject_10$4, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2;
6605
+ var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$a, templateObject_8$8, templateObject_9$5, templateObject_10$4, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2;
6606
6606
 
6607
6607
  /**
6608
6608
  * @see https://mui.com/material-ui/react-button/
@@ -6690,12 +6690,12 @@ var square = function (props) {
6690
6690
  var spaces = getSpaces(props);
6691
6691
  var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
6692
6692
  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;
6693
- return react.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.m, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.m);
6693
+ return react.css(templateObject_4$j || (templateObject_4$j = __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);
6694
6694
  };
6695
6695
  var withHover = function (props) {
6696
6696
  var _a;
6697
6697
  var semanticColors = getSemanticColors(props);
6698
- return react.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "], ["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse);
6698
+ return react.css(templateObject_5$e || (templateObject_5$e = __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);
6699
6699
  };
6700
6700
  var primary = function (props) {
6701
6701
  return createTypeCss(props, "primary");
@@ -6764,7 +6764,7 @@ function createTypeCss(props, type) {
6764
6764
  secondary: generateSecondaryTagColors(intent, colors, semanticColors),
6765
6765
  };
6766
6766
  var typeColors = typeToColors[type];
6767
- return react.css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
6767
+ return react.css(templateObject_6$c || (templateObject_6$c = __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);
6768
6768
  }
6769
6769
  var typeToCss = {
6770
6770
  primary: primary,
@@ -6783,9 +6783,9 @@ var StyledTag$3 = styled__default.default(material.Chip, {
6783
6783
  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;
6784
6784
  var isRounded = sdsStyle === "rounded";
6785
6785
  var type = sdsType || "primary";
6786
- return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
6786
+ return react.css(templateObject_7$9 || (templateObject_7$9 = __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;");
6787
6787
  });
6788
- var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$8, templateObject_8$7;
6788
+ var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$7;
6789
6789
 
6790
6790
  /**
6791
6791
  * @see https://mui.com/material-ui/react-chip/
@@ -6948,7 +6948,7 @@ var doNotForwardProps$o = [
6948
6948
  ];
6949
6949
  var StyledCard = styled__default.default(material.Card, {
6950
6950
  shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
6951
- })(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6951
+ })(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6952
6952
  var _a, _b, _c, _d;
6953
6953
  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;
6954
6954
  var semanticColors = getSemanticColors(props);
@@ -6962,13 +6962,13 @@ var StyledCard = styled__default.default(material.Card, {
6962
6962
  var showDecorativeBorder = visualElementType === "image"
6963
6963
  ? boundingBox && decorativeBorder && imagePadding
6964
6964
  : boundingBox && decorativeBorder;
6965
- return react.css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: visible;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: visible;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, boundingBox && react.css(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n border: 1px solid ", ";\n background-color: ", ";\n "], ["\n border: 1px solid ", ";\n background-color: ", ";\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundPrimary), sdsType === "wide" &&
6965
+ return react.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: visible;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n box-shadow: none;\n overflow: visible;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, boundingBox && react.css(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n border: 1px solid ", ";\n background-color: ", ";\n "], ["\n border: 1px solid ", ";\n background-color: ", ";\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundPrimary), sdsType === "wide" &&
6966
6966
  showDecorativeBorder && react.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n border-left: 4px solid ", ";\n "], ["\n border-left: 4px solid ", ";\n "])), (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.border), sdsType === "narrow" &&
6967
6967
  showDecorativeBorder && react.css(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n border-top: 4px solid ", ";\n "], ["\n border-top: 4px solid ", ";\n "])), (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border));
6968
6968
  });
6969
6969
  var StyledCardActionArea = styled__default.default(Button, {
6970
6970
  shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
6971
- })(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6971
+ })(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6972
6972
  var _a, _b;
6973
6973
  var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
6974
6974
  var semanticColors = getSemanticColors(props);
@@ -6988,7 +6988,7 @@ var StyledIconMediaWrapper = styled__default.default("div", {
6988
6988
  var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
6989
6989
  var spaces = getSpaces(props);
6990
6990
  return react.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), boundingBox
6991
- ? react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding: ", "px 0 ", "px ", "px;\n "], ["\n padding: ", "px 0 ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n padding-right: ", "px;\n "], ["\n padding-right: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
6991
+ ? react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding: ", "px 0 ", "px ", "px;\n "], ["\n padding: ", "px 0 ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n padding-right: ", "px;\n "], ["\n padding-right: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
6992
6992
  });
6993
6993
  var StyledCardContent = styled__default.default("div", {
6994
6994
  shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -7006,7 +7006,7 @@ var StyledContentCardBody = styled__default.default(material.CardContent, {
7006
7006
  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 ");
7007
7007
  });
7008
7008
  var StyledCardContentAligner = styled__default.default("div")(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n"])));
7009
- var templateObject_1$J, templateObject_2$r, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2;
7009
+ var templateObject_1$J, templateObject_2$r, templateObject_3$k, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$8, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2;
7010
7010
 
7011
7011
  var doNotForwardProps$n = [
7012
7012
  "visualElement",
@@ -7041,20 +7041,20 @@ var StyledTitleText = material.styled("p", {
7041
7041
  });
7042
7042
  var StyledSubtitleText = material.styled("p", {
7043
7043
  shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
7044
- })(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
7044
+ })(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
7045
7045
  var _a;
7046
7046
  var semanticColors = getSemanticColors(props);
7047
7047
  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 ");
7048
7048
  });
7049
7049
  var StyledMetadataText = material.styled("p", {
7050
7050
  shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
7051
- })(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
7051
+ })(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
7052
7052
  var _a;
7053
7053
  var semanticColors = getSemanticColors(props);
7054
7054
  var spaces = getSpaces(props);
7055
7055
  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 ");
7056
7056
  });
7057
- var templateObject_1$I, templateObject_2$q, templateObject_3$j, templateObject_4$g, templateObject_5$b;
7057
+ var templateObject_1$I, templateObject_2$q, templateObject_3$j, templateObject_4$h, templateObject_5$c;
7058
7058
 
7059
7059
  var createTextComponent = function (StyledComponent) {
7060
7060
  return function (_a) {
@@ -7153,12 +7153,12 @@ var StyledImageMediaWrapper = material.styled("div", {
7153
7153
  : "padding-left: 0;") : material.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
7154
7154
  : material.css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
7155
7155
  ? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
7156
- : "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
7156
+ : "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
7157
7157
  ? imagePadding
7158
- ? material.css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", "px;\n padding-bottom: 0;\n "], ["\n padding: ", "px;\n padding-bottom: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl) : material.css(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
7159
- : material.css(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n padding-bottom: ", "px;\n "], ["\n padding-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl)));
7158
+ ? material.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n padding: ", "px;\n padding-bottom: 0;\n "], ["\n padding: ", "px;\n padding-bottom: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl) : material.css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
7159
+ : material.css(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n padding-bottom: ", "px;\n "], ["\n padding-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl)));
7160
7160
  });
7161
- var templateObject_1$G, templateObject_2$p, templateObject_3$i, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$6, templateObject_8$5, templateObject_9$3;
7161
+ var templateObject_1$G, templateObject_2$p, templateObject_3$i, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$7, templateObject_8$5, templateObject_9$3;
7162
7162
 
7163
7163
  /**
7164
7164
  * @see https://mui.com/material-ui/api/card-media/
@@ -7396,13 +7396,13 @@ var Subtitle = styled__default.default(material.Typography)(templateObject_3$h |
7396
7396
  var semanticColors = getSemanticColors(props);
7397
7397
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
7398
7398
  });
7399
- var Overline = styled__default.default(material.Typography)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
7399
+ var Overline = styled__default.default(material.Typography)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
7400
7400
  var _a;
7401
7401
  var semanticColors = getSemanticColors(props);
7402
7402
  var spaces = getSpaces(props);
7403
7403
  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 ");
7404
7404
  });
7405
- var templateObject_1$B, templateObject_2$o, templateObject_3$h, templateObject_4$e;
7405
+ var templateObject_1$B, templateObject_2$o, templateObject_3$h, templateObject_4$f;
7406
7406
 
7407
7407
  /**
7408
7408
  * @see https://mui.com/material-ui/react-dialog/
@@ -7582,16 +7582,16 @@ var StyledCheckboxCheckedIcon = styled__default.default("div")(templateObject_3$
7582
7582
  var semanticColors = getSemanticColors(props);
7583
7583
  return "\n display: flex;\n align-items: center;\n justify-content: center;\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n border-radius: 2px;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, ";\n\n ").concat(StyledIcon, " {\n fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, ";\n }\n\n &:hover {\n background-color: red;\n }\n ");
7584
7584
  });
7585
- var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7585
+ var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7586
7586
  var spaces = getSpaces(props);
7587
7587
  return "\n &.".concat(material.checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n \n padding: 0;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n border-radius: 0;\n\n &:hover {\n background-color: transparent;\n }\n }\n ");
7588
7588
  });
7589
- var StyledLabelContainer$1 = styled__default.default("span")(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
7590
- var StyledCheckboxLabel = styled__default.default("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7589
+ var StyledLabelContainer$1 = styled__default.default("span")(templateObject_5$a || (templateObject_5$a = __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"])));
7590
+ var StyledCheckboxLabel = styled__default.default("span")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7591
7591
  var spaces = getSpaces(props);
7592
7592
  return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
7593
7593
  });
7594
- var StyledCheckboxCaption = styled__default.default("span")(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
7594
+ var StyledCheckboxCaption = styled__default.default("span")(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
7595
7595
  var _a;
7596
7596
  var semanticColors = getSemanticColors(props);
7597
7597
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
@@ -7610,7 +7610,7 @@ var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel
7610
7610
  var borders = getBorders(props);
7611
7611
  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 ");
7612
7612
  });
7613
- var templateObject_1$z, templateObject_2$m, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$4;
7613
+ var templateObject_1$z, templateObject_2$m, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$9, templateObject_7$6, templateObject_8$4;
7614
7614
 
7615
7615
  /**
7616
7616
  * @see https://mui.com/material-ui/react-checkbox/
@@ -7664,16 +7664,16 @@ var StyledRadioCheckedIcon = styled__default.default("div")(templateObject_3$f |
7664
7664
  var semanticColors = getSemanticColors(props);
7665
7665
  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 ");
7666
7666
  });
7667
- var StyledRadioButton = styled__default.default(material.Radio)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7667
+ var StyledRadioButton = styled__default.default(material.Radio)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7668
7668
  var spaces = getSpaces(props);
7669
7669
  return "\n &.".concat(material.radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n padding: 0;\n }\n ");
7670
7670
  });
7671
- var StyledLabelContainer = styled__default.default("span")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
7672
- var StyledRadioLabel = styled__default.default("span")(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7671
+ var StyledLabelContainer = styled__default.default("span")(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
7672
+ var StyledRadioLabel = styled__default.default("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7673
7673
  var spaces = getSpaces(props);
7674
7674
  return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
7675
7675
  });
7676
- var StyledRadioCaption = styled__default.default("span")(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
7676
+ var StyledRadioCaption = styled__default.default("span")(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
7677
7677
  var _a;
7678
7678
  var semanticColors = getSemanticColors(props);
7679
7679
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
@@ -7690,7 +7690,7 @@ var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(
7690
7690
  var semanticColors = getSemanticColors(props);
7691
7691
  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 ");
7692
7692
  });
7693
- var templateObject_1$y, templateObject_2$l, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$4, templateObject_8$3;
7693
+ var templateObject_1$y, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$3;
7694
7694
 
7695
7695
  /**
7696
7696
  * @see https://mui.com/material-ui/react-radio-button/
@@ -7767,7 +7767,7 @@ var textArea = function (props) {
7767
7767
  var spaces = getSpaces(props);
7768
7768
  return react.css(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "], ["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "])), material.outlinedInputClasses.multiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.outlinedInputClasses.inputMultiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
7769
7769
  };
7770
- var StyledLabel$1 = styled__default.default("label")(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
7770
+ var StyledLabel$1 = styled__default.default("label")(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
7771
7771
  var spaces = getSpaces(props);
7772
7772
  return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
7773
7773
  });
@@ -7775,16 +7775,16 @@ var StyledInputBase = styled__default.default(material.TextField, {
7775
7775
  shouldForwardProp: function (prop) {
7776
7776
  return !sdsPropNames$1.includes(prop.toString());
7777
7777
  },
7778
- })(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7778
+ })(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7779
7779
  var _a, _b, _c, _d;
7780
7780
  var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
7781
7781
  var spaces = getSpaces(props);
7782
7782
  var borders = getBorders(props);
7783
7783
  var corners = getCorners(props);
7784
7784
  var semanticColors = getSemanticColors(props);
7785
- return react.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.root, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.input, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textTertiary, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
7785
+ return react.css(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.root, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.input, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textTertiary, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
7786
7786
  });
7787
- var templateObject_1$w, templateObject_2$k, templateObject_3$e, templateObject_4$b, templateObject_5$7, templateObject_6$6;
7787
+ var templateObject_1$w, templateObject_2$k, templateObject_3$e, templateObject_4$c, templateObject_5$8, templateObject_6$7;
7788
7788
 
7789
7789
  /**
7790
7790
  * @see https://mui.com/material-ui/react-text-field/
@@ -7886,11 +7886,11 @@ var StyledLink = styled__default.default(material.Link, {
7886
7886
  shouldForwardProp: function (prop) {
7887
7887
  return !doNotForwardProps$h.includes(prop.toString());
7888
7888
  },
7889
- })(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
7889
+ })(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
7890
7890
  var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
7891
7891
  return react.css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
7892
7892
  });
7893
- var templateObject_1$u, templateObject_2$j, templateObject_3$d, templateObject_4$a;
7893
+ var templateObject_1$u, templateObject_2$j, templateObject_3$d, templateObject_4$b;
7894
7894
 
7895
7895
  /**
7896
7896
  * @see https://mui.com/material-ui/react-link/
@@ -8023,13 +8023,13 @@ var tag = function (props) {
8023
8023
  var doNotForwardProps$e = ["sdsStyle"];
8024
8024
  var StyledLoadingIndicator = styled__default.default("div", {
8025
8025
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
8026
- })(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
8026
+ })(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
8027
8027
  var sdsStyle = props.sdsStyle;
8028
8028
  var spaces = getSpaces(props);
8029
- var style = react.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "], ["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
8030
- return react.css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), style, sdsStyle === "minimal" && minimal(props), sdsStyle === "tag" && tag(props));
8029
+ var style = react.css(templateObject_4$a || (templateObject_4$a = __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);
8030
+ return react.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), style, sdsStyle === "minimal" && minimal(props), sdsStyle === "tag" && tag(props));
8031
8031
  });
8032
- var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$9, templateObject_5$6, templateObject_6$5;
8032
+ var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$a, templateObject_5$7, templateObject_6$6;
8033
8033
 
8034
8034
  var LoadingIndicator = function (_a) {
8035
8035
  var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
@@ -8084,11 +8084,11 @@ var InputBaseWrapper = styled__default.default("div", {
8084
8084
  });
8085
8085
  var StyledMenuInputSearch = styled__default.default(InputSearch, {
8086
8086
  shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
8087
- })(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"], ["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"])), material.inputBaseClasses.root, function (_a) {
8087
+ })(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"], ["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"])), material.inputBaseClasses.root, function (_a) {
8088
8088
  var search = _a.search;
8089
8089
  return (search ? "auto" : "transparent");
8090
8090
  });
8091
- var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$8;
8091
+ var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$9;
8092
8092
 
8093
8093
  /**
8094
8094
  * @see https://mui.com/material-ui/react-autocomplete/
@@ -8154,12 +8154,12 @@ var StyledFooter = styled__default.default("footer", {
8154
8154
  });
8155
8155
  var StyledLogoWrapper$1 = styled__default.default("div", {
8156
8156
  shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
8157
- })(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) {
8157
+ })(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n\n p {\n ", "\n ", "\n\n ", "\n }\n"], ["\n ", "\n\n p {\n ", "\n ", "\n\n ", "\n }\n"])), function (props) {
8158
8158
  var spaces = getSpaces(props);
8159
- return material.css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n\n a {\n text-decoration: none;\n }\n\n .MuiChip-root {\n margin: 0;\n }\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n\n a {\n text-decoration: none;\n }\n\n .MuiChip-root {\n margin: 0;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s);
8159
+ return material.css(templateObject_4$8 || (templateObject_4$8 = __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);
8160
8160
  }, fontHeader("l"), fontHeader("l", /* isNarrow */ true), function (props) {
8161
8161
  var semanticColors = getSemanticColors(props);
8162
- return material.css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n "], ["\n color: ", ";\n white-space: nowrap;\n "])), props.hasInvertedStyle
8162
+ return material.css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n "], ["\n color: ", ";\n white-space: nowrap;\n "])), props.hasInvertedStyle
8163
8163
  ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
8164
8164
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
8165
8165
  });
@@ -8168,7 +8168,7 @@ var StyledNavSection = styled__default.default("div", {
8168
8168
  })(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
8169
8169
  var isNarrow = props.isNarrow;
8170
8170
  var spaces = getSpaces(props);
8171
- return material.css(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && material.css(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "], ["\n flex-direction: column;\n gap: 0;\n margin-top: ", "px;\n width: 100%;\n padding-left: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
8171
+ return material.css(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n padding-left: ", "px;\n gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && material.css(templateObject_7$4 || (templateObject_7$4 = __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));
8172
8172
  });
8173
8173
  var StyledTopSection = styled__default.default("div", {
8174
8174
  shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
@@ -8211,7 +8211,7 @@ var StyledBottomSection = styled__default.default("div", {
8211
8211
  var spaces = getSpaces(props);
8212
8212
  return material.css(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n margin-top: ", "px;\n\n ", "\n "], ["\n margin-top: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && material.css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n flex-direction: column-reverse;\n margin-top: ", "px;\n "], ["\n flex-direction: column-reverse;\n margin-top: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
8213
8213
  });
8214
- var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
8214
+ var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$4, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
8215
8215
 
8216
8216
  /**
8217
8217
  * WARNING: Don't import this directly.
@@ -14216,15 +14216,15 @@ var StyledLinkItemLink = styled__default.default(Link, {
14216
14216
  ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
14217
14217
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider));
14218
14218
  });
14219
- var StyledDivider = styled__default.default(material.Divider, {
14219
+ var StyledDivider$1 = styled__default.default(material.Divider, {
14220
14220
  shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
14221
- })(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14221
+ })(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14222
14222
  var semanticColors = getSemanticColors(props);
14223
14223
  return "\n border-color: ".concat(props.hasInvertedStyle
14224
14224
  ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerInverse
14225
14225
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider, ";\n ");
14226
14226
  });
14227
- var templateObject_1$l, templateObject_2$d, templateObject_3$8, templateObject_4$6;
14227
+ var templateObject_1$l, templateObject_2$d, templateObject_3$8, templateObject_4$7;
14228
14228
 
14229
14229
  var FooterLink = React.memo(React.forwardRef(function (_a, ref) {
14230
14230
  var link = _a.link, showDivider = _a.showDivider, hasInvertedStyle = _a.hasInvertedStyle;
@@ -14294,7 +14294,7 @@ var MobileLinkRow = React.memo(function (_a) {
14294
14294
  });
14295
14295
  MobileLinkRow.displayName = "MobileLinkRow";
14296
14296
 
14297
- var MemoizedStyledDivider = React.memo(StyledDivider);
14297
+ var MemoizedStyledDivider = React.memo(StyledDivider$1);
14298
14298
  function NavigationFooter(_a) {
14299
14299
  var hasInvertedStyle = _a.hasInvertedStyle, images = _a.images, logo = _a.logo, logoUrl = _a.logoUrl, logoComponent = _a.logoComponent, logoLinkProps = _a.logoLinkProps, navItems = _a.navItems, navLinks = _a.navLinks, tag = _a.tag, tagColor = _a.tagColor, title = _a.title, rest = __rest(_a, ["hasInvertedStyle", "images", "logo", "logoUrl", "logoComponent", "logoLinkProps", "navItems", "navLinks", "tag", "tagColor", "title"]);
14300
14300
  var footerRef = React.useRef(null);
@@ -14401,26 +14401,26 @@ var NarrowToolbar = function (props) {
14401
14401
  };
14402
14402
  var StyledToolbar = styled__default.default(material.Toolbar, {
14403
14403
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
14404
- })(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14404
+ })(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14405
14405
  var isNarrow = props.isNarrow;
14406
14406
  var spaces = getSpaces(props);
14407
14407
  return material.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n &.MuiToolbar-root {\n min-height: 56px;\n max-height: 56px;\n padding: ", "px ", "px;\n\n ", "\n }\n "], ["\n &.MuiToolbar-root {\n min-height: 56px;\n max-height: 56px;\n padding: ", "px ", "px;\n\n ", "\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, isNarrow && NarrowToolbar(props));
14408
14408
  });
14409
14409
  styled__default.default("div", {
14410
14410
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
14411
- })(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14411
+ })(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14412
14412
  var shadows = getShadows(props);
14413
14413
  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 ");
14414
14414
  });
14415
14415
  styled__default.default("div", {
14416
14416
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
14417
- })(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14417
+ })(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14418
14418
  var colors = getSemanticColors(props);
14419
14419
  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 ");
14420
14420
  });
14421
14421
  var StyledHeaderButton = styled__default.default(Button, {
14422
14422
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
14423
- })(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14423
+ })(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14424
14424
  var _a, _b, _c, _d;
14425
14425
  var sdsType = props.sdsType, hasInvertedStyle = props.hasInvertedStyle;
14426
14426
  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";
@@ -14528,7 +14528,7 @@ var NarrowButtonStyles = function (props) {
14528
14528
  };
14529
14529
  var StyledButtonSection = styled__default.default("section", {
14530
14530
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
14531
- })(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"])), fontBody("l", "semibold", /* isNarrow */ true), fontBody("m", "semibold", /* isNarrow */ true), function (props) {
14531
+ })(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n z-index: 10;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n z-index: 10;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"])), fontBody("l", "semibold", /* isNarrow */ true), fontBody("m", "semibold", /* isNarrow */ true), function (props) {
14532
14532
  var isNarrow = props.isNarrow;
14533
14533
  var spaces = getSpaces(props);
14534
14534
  return material.css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "], ["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && NarrowButtonStyles(props));
@@ -14545,9 +14545,14 @@ var StyledNarrowButton = styled__default.default(Button, {
14545
14545
  var hasInvertedStyle = props.hasInvertedStyle;
14546
14546
  return material.css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n ", "\n margin: 0;\n "], ["\n ", "\n margin: 0;\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
14547
14547
  });
14548
- var templateObject_1$k, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
14548
+ var templateObject_1$k, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
14549
14549
 
14550
- var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
14550
+ var doNotForwardProps$8 = [
14551
+ "active",
14552
+ "hasInvertedStyle",
14553
+ "isNarrow",
14554
+ "hasSection",
14555
+ ];
14551
14556
  var NarrowPrimaryNavItem = function (props) {
14552
14557
  var _a, _b, _c, _d, _e;
14553
14558
  var active = props.active, hasInvertedStyle = props.hasInvertedStyle;
@@ -14598,14 +14603,14 @@ var WideStyledLabel = function (props) {
14598
14603
  var ChevronOpenColor = hasInvertedStyle
14599
14604
  ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentPrimaryInverse
14600
14605
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.ornamentOpen;
14601
- return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n border-bottom-color: ", ";\n }\n "], ["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n border-bottom-color: ", ";\n }\n "])), active && itemType === "text"
14606
+ return react.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n border-bottom-color: ", ";\n }\n "], ["\n border-bottom: solid 2px transparent;\n border-bottom-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n border-bottom-color: ", ";\n }\n "])), active && itemType === "text"
14602
14607
  ? activeBorderColor
14603
14608
  : "transparent", active ? ChevronOpenColor : ChevronDefaultColor, active ? activeBorderColor : inactiveBorderColor);
14604
14609
  };
14605
- var StyledTag = styled__default.default(Tag)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin: 0;\n\n .MuiChip-label {\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 0;\n\n .MuiChip-label {\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"));
14610
+ var StyledTag = styled__default.default(Tag)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin: 0;\n\n .MuiChip-label {\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 0;\n\n .MuiChip-label {\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"));
14606
14611
  var StyledLabel = styled__default.default("span", {
14607
14612
  shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
14608
- })(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeader("m"), function (props) {
14613
+ })(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeader("m"), function (props) {
14609
14614
  var hasInvertedStyle = props.hasInvertedStyle, active = props.active, isNarrow = props.isNarrow;
14610
14615
  var spaces = getSpaces(props);
14611
14616
  var colors = getSemanticColors(props);
@@ -14615,7 +14620,7 @@ var StyledLabel = styled__default.default("span", {
14615
14620
  var inactiveColor = hasInvertedStyle
14616
14621
  ? colors === null || colors === void 0 ? void 0 : colors.base.textSecondaryInverse
14617
14622
  : colors === null || colors === void 0 ? void 0 : colors.base.textSecondary;
14618
- return react.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", " {\n margin-top: -", "px;\n }\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", " {\n margin-top: -", "px;\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeColor : inactiveColor, StyledTag, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, !isNarrow && WideStyledLabel(props));
14623
+ return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", " {\n margin-top: -", "px;\n }\n\n ", "\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n color: ", ";\n\n ", " {\n margin-top: -", "px;\n }\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeColor : inactiveColor, StyledTag, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, !isNarrow && WideStyledLabel(props));
14619
14624
  });
14620
14625
  var StyledAccordion$1 = styled__default.default(Accordion, {
14621
14626
  shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
@@ -14652,9 +14657,9 @@ var StyledAccordion$1 = styled__default.default(Accordion, {
14652
14657
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
14653
14658
  });
14654
14659
  var StyledSubItem$1 = styled__default.default(MenuItem)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"], ["\n &.MuiButtonBase-root.MuiMenuItem-root:hover {\n span.primary-text {\n font-weight: 600;\n }\n }\n"])));
14655
- var templateObject_1$j, templateObject_2$b, templateObject_3$6, templateObject_4$4, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
14660
+ var templateObject_1$j, templateObject_2$b, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
14656
14661
 
14657
- var doNotForwardProps$7 = ["isNarrow"];
14662
+ var doNotForwardProps$7 = ["isNarrow", "hasSection"];
14658
14663
  var NarrowStyledSection = function () {
14659
14664
  return react.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n align-items: start;\n flex-direction: column;\n "], ["\n align-items: start;\n flex-direction: column;\n "])));
14660
14665
  };
@@ -14666,7 +14671,63 @@ var StyledSection = styled__default.default("section", {
14666
14671
  var spaces = getSpaces(props);
14667
14672
  return react.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n column-gap: ", "px;\n\n ", "\n "], ["\n column-gap: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces[(_a = props === null || props === void 0 ? void 0 : props.gap) !== null && _a !== void 0 ? _a : "xl"], isNarrow && NarrowStyledSection());
14668
14673
  });
14669
- var templateObject_1$i, templateObject_2$a, templateObject_3$5;
14674
+ var StyledSectionHeader = styled__default.default(ListSubheader, {
14675
+ shouldForwardProp: function (prop) { return !doNotForwardProps$7.includes(prop); },
14676
+ })(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14677
+ var isNarrow = props.isNarrow, hasInvertedStyle = props.hasInvertedStyle;
14678
+ var semanticColors = getSemanticColors(props);
14679
+ var spaces = getSpaces(props);
14680
+ function getBackgroundColor() {
14681
+ var _a;
14682
+ if (isNarrow) {
14683
+ return hasInvertedStyle
14684
+ ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimaryInverse
14685
+ : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundPrimary;
14686
+ }
14687
+ return (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface;
14688
+ }
14689
+ function getTextColor() {
14690
+ var _a;
14691
+ if (isNarrow) {
14692
+ return hasInvertedStyle
14693
+ ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
14694
+ : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary;
14695
+ }
14696
+ return (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary;
14697
+ }
14698
+ return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "], ["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "])), fontCapsXxxxs(props), getTextColor(), getBackgroundColor(), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, isNarrow ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.s);
14699
+ });
14700
+ var StyledDivider = styled__default.default(material.Divider, {
14701
+ shouldForwardProp: function (prop) { return !doNotForwardProps$7.includes(prop); },
14702
+ })(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14703
+ var hasSection = props.hasSection, isNarrow = props.isNarrow, hasInvertedStyle = props.hasInvertedStyle;
14704
+ var spaces = getSpaces(props);
14705
+ var semanticColors = getSemanticColors(props);
14706
+ // Calculate margin based on section and narrow state
14707
+ var getMarginBottom = function () {
14708
+ return hasSection ? spaces === null || spaces === void 0 ? void 0 : spaces.s : isNarrow ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.xxs;
14709
+ };
14710
+ var getBorderColor = function () {
14711
+ var _a, _b, _c;
14712
+ if (isNarrow) {
14713
+ return hasInvertedStyle
14714
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.dividerInverse
14715
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.divider;
14716
+ }
14717
+ return (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.divider;
14718
+ };
14719
+ return react.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n &.MuiDivider-root {\n position: relative;\n margin: 0 0 ", "px;\n border-bottom: solid 1px ", ";\n padding-bottom: ", "px;\n }\n "], ["\n &.MuiDivider-root {\n position: relative;\n margin: 0 0 ", "px;\n border-bottom: solid 1px ", ";\n padding-bottom: ", "px;\n }\n "])), getMarginBottom(), getBorderColor(), isNarrow ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
14720
+ });
14721
+ var templateObject_1$i, templateObject_2$a, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$2, templateObject_7$1;
14722
+
14723
+ // Helper function to group dropdown items by section
14724
+ function groupItemsBySection(items) {
14725
+ return items.reduce(function (groups, item) {
14726
+ var _a;
14727
+ var section = item.section || "";
14728
+ return __assign(__assign({}, groups), (_a = {}, _a[section] = __spreadArray(__spreadArray([], (groups[section] || []), true), [item], false), _a));
14729
+ }, {});
14730
+ }
14670
14731
 
14671
14732
  function NavigationHeaderPrimaryNav(_a) {
14672
14733
  var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
@@ -14690,7 +14751,7 @@ function NavigationHeaderPrimaryNav(_a) {
14690
14751
  var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, parentOnClick = item.onClick, rest = __rest(item, ["key", "label", "tag", "tagColor", "onClick"]);
14691
14752
  var isActive = key === value;
14692
14753
  if (item.itemType === "dropdown" && !isNarrow) {
14693
- var dropdownItem = item;
14754
+ var dropdownItem_1 = item;
14694
14755
  return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(PrimaryNavItem, __assign({}, rest, { itemType: item.itemType, ref: buttonRef, sdsStyle: "minimal", active: open, onClick: function (e) {
14695
14756
  setAnchorEl(e.currentTarget);
14696
14757
  onChange(key);
@@ -14707,23 +14768,43 @@ function NavigationHeaderPrimaryNav(_a) {
14707
14768
  }, transformOrigin: {
14708
14769
  horizontal: "left",
14709
14770
  vertical: "top",
14710
- }, children: dropdownItem.items.map(function (subItem) {
14711
- var subLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
14712
- return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function () {
14713
- onClick === null || onClick === void 0 ? void 0 : onClick();
14714
- onClose();
14715
- }, sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
14716
- }) })] }, key));
14771
+ }, children: (function () {
14772
+ var groupedItems = groupItemsBySection(dropdownItem_1.items);
14773
+ var sections = Object.keys(groupedItems);
14774
+ var hasMultipleSections = sections.length > 1 ||
14775
+ sections.some(function (section) { return section !== ""; });
14776
+ return sections.map(function (section, sectionIndex) {
14777
+ var sectionItems = groupedItems[section];
14778
+ var showDivider = hasMultipleSections && sectionIndex > 0;
14779
+ return (jsxRuntime.jsxs("div", { children: [showDivider && (jsxRuntime.jsx(StyledDivider, { hasSection: !!section, isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle })), section && hasMultipleSections && (jsxRuntime.jsx(StyledSectionHeader, { isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle, children: section })), sectionItems.map(function (subItem) {
14780
+ var subLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
14781
+ return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
14782
+ onClick === null || onClick === void 0 ? void 0 : onClick(e);
14783
+ onClose();
14784
+ }, sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
14785
+ })] }, "section-".concat(section || "default")));
14786
+ });
14787
+ })() })] }, key));
14717
14788
  }
14718
14789
  if (item.itemType === "dropdown" && isNarrow) {
14719
- var dropdownItem = item;
14720
- return (jsxRuntime.jsxs(StyledAccordion$1, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(AccordionHeader, { children: item.label }), jsxRuntime.jsx(AccordionDetails, { children: dropdownItem.items.map(function (subItem) {
14721
- var dropdownItemLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
14722
- return (jsxRuntime.jsx(StyledSubItem$1, __assign({ onClick: function () {
14723
- onClick === null || onClick === void 0 ? void 0 : onClick();
14724
- onClose();
14725
- } }, accordionSubItemRest, { children: dropdownItemLabel }), "primary-nav-item-".concat(dropdownItemLabel)));
14726
- }) })] }, "".concat(item.label, "-dropdown")));
14790
+ var dropdownItem_2 = item;
14791
+ return (jsxRuntime.jsxs(StyledAccordion$1, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(AccordionHeader, { children: item.label }), jsxRuntime.jsx(AccordionDetails, { children: (function () {
14792
+ var groupedItems = groupItemsBySection(dropdownItem_2.items);
14793
+ var sections = Object.keys(groupedItems);
14794
+ var hasMultipleSections = sections.length > 1 ||
14795
+ sections.some(function (section) { return section !== ""; });
14796
+ return sections.map(function (section, sectionIndex) {
14797
+ var sectionItems = groupedItems[section];
14798
+ var showDivider = hasMultipleSections && sectionIndex > 0;
14799
+ return (jsxRuntime.jsxs(React.Fragment, { children: [showDivider && (jsxRuntime.jsx(StyledDivider, { hasSection: !!section, isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle })), section && hasMultipleSections && (jsxRuntime.jsx(StyledSectionHeader, { isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle, children: section })), sectionItems.map(function (subItem) {
14800
+ var dropdownItemLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
14801
+ return (jsxRuntime.jsx(StyledSubItem$1, __assign({ onClick: function (e) {
14802
+ onClick === null || onClick === void 0 ? void 0 : onClick(e);
14803
+ onClose();
14804
+ } }, accordionSubItemRest, { children: dropdownItemLabel }), "primary-nav-item-".concat(dropdownItemLabel)));
14805
+ })] }, "section-".concat(section || "default")));
14806
+ });
14807
+ })() })] }, "".concat(item.label, "-dropdown")));
14727
14808
  }
14728
14809
  return (jsxRuntime.jsx(PrimaryNavItem, __assign({}, rest, { sdsStyle: "minimal", active: isActive, onClick: function (e) {
14729
14810
  var _a, _b;
@@ -14824,7 +14905,7 @@ function NavigationHeaderSecondaryNav(_a) {
14824
14905
  }, []);
14825
14906
  return (jsxRuntime.jsx(StyledSection, { gap: "l", isNarrow: isNarrow, children: items.map(function (item) {
14826
14907
  var _a, _b;
14827
- var itemType = item.itemType, label = item.label, rest = __rest(item, ["itemType", "label"]);
14908
+ var itemType = item.itemType, label = item.label, key = item.key, rest = __rest(item, ["itemType", "label", "key"]);
14828
14909
  if (itemType === "dropdown" && !isNarrow) {
14829
14910
  return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs(StyledTextItem, __assign({}, rest, { ref: buttonRef, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, sdsStyle: "minimal", onClick: function (event) {
14830
14911
  var _a;
@@ -14842,22 +14923,42 @@ function NavigationHeaderSecondaryNav(_a) {
14842
14923
  }, transformOrigin: {
14843
14924
  horizontal: "left",
14844
14925
  vertical: "top",
14845
- }, children: item.items.map(function (subItem) {
14846
- var menuLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
14847
- return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function (event) {
14848
- onClick === null || onClick === void 0 ? void 0 : onClick(event);
14849
- onClose();
14850
- }, sx: { minWidth: menuWidth } }, subItemRest, { children: menuLabel }), "menu-item-".concat(menuLabel)));
14851
- }) })] }, "".concat(label, "-dropdown")));
14926
+ }, children: (function () {
14927
+ var groupedItems = groupItemsBySection(item.items);
14928
+ var sections = Object.keys(groupedItems);
14929
+ var hasMultipleSections = sections.length > 1 ||
14930
+ sections.some(function (section) { return section !== ""; });
14931
+ return sections.map(function (section, sectionIndex) {
14932
+ var sectionItems = groupedItems[section];
14933
+ var showDivider = hasMultipleSections && sectionIndex > 0;
14934
+ return (jsxRuntime.jsxs("div", { children: [showDivider && (jsxRuntime.jsx(StyledDivider, { hasSection: !!section, isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle })), section && hasMultipleSections && (jsxRuntime.jsx(StyledSectionHeader, { isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle, children: section })), sectionItems.map(function (subItem) {
14935
+ var subLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
14936
+ return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
14937
+ onClick === null || onClick === void 0 ? void 0 : onClick(e);
14938
+ onClose();
14939
+ }, sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
14940
+ })] }, "section-".concat(section || "default")));
14941
+ });
14942
+ })() })] }, "".concat(key, "-").concat(label, "-dropdown")));
14852
14943
  }
14853
14944
  if (itemType === "dropdown" && isNarrow) {
14854
- return (jsxRuntime.jsxs(StyledAccordion, { id: "".concat(label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(AccordionHeader, { children: label }), jsxRuntime.jsx(AccordionDetails, { children: item.items.map(function (subItem) {
14855
- var accordionLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
14856
- return (jsxRuntime.jsx(StyledSubItem, __assign({ onClick: function (event) {
14857
- onClick === null || onClick === void 0 ? void 0 : onClick(event);
14858
- onClose();
14859
- } }, accordionSubItemRest, { children: accordionLabel }), "accordion-item-".concat(accordionLabel)));
14860
- }) })] }, "".concat(label, "-dropdown")));
14945
+ return (jsxRuntime.jsxs(StyledAccordion, { id: "".concat(label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(AccordionHeader, { children: label }), jsxRuntime.jsx(AccordionDetails, { children: (function () {
14946
+ var groupedItems = groupItemsBySection(item.items);
14947
+ var sections = Object.keys(groupedItems);
14948
+ var hasMultipleSections = sections.length > 1 ||
14949
+ sections.some(function (section) { return section !== ""; });
14950
+ return sections.map(function (section, sectionIndex) {
14951
+ var sectionItems = groupedItems[section];
14952
+ var showDivider = hasMultipleSections && sectionIndex > 0;
14953
+ return (jsxRuntime.jsxs(React.Fragment, { children: [showDivider && (jsxRuntime.jsx(StyledDivider, { hasSection: !!section, isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle })), section && hasMultipleSections && (jsxRuntime.jsx(StyledSectionHeader, { isNarrow: isNarrow, hasInvertedStyle: hasInvertedStyle, children: section })), sectionItems.map(function (subItem) {
14954
+ var dropdownItemLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
14955
+ return (jsxRuntime.jsx(StyledSubItem, __assign({ onClick: function (e) {
14956
+ onClick === null || onClick === void 0 ? void 0 : onClick(e);
14957
+ onClose();
14958
+ } }, accordionSubItemRest, { children: dropdownItemLabel }), "primary-nav-item-".concat(dropdownItemLabel)));
14959
+ })] }, "section-".concat(section || "default")));
14960
+ });
14961
+ })() })] }, "".concat(label, "-dropdown")));
14861
14962
  }
14862
14963
  return (jsxRuntime.jsx(StyledTextItem, __assign({}, rest, { onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, sdsStyle: "minimal", children: item.label }), "".concat(label, "-").concat(itemType)));
14863
14964
  }) }));