@czi-sds/components 20.5.0 → 20.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs.d.ts +12 -1
  2. package/dist/index.cjs.js +239 -98
  3. package/dist/index.esm.d.ts +12 -1
  4. package/dist/index.esm.js +241 -100
  5. package/dist/tailwind.json +3 -0
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +3 -0
  8. package/dist/variables.scss +3 -0
  9. package/package.json +2 -2
package/dist/index.cjs.js CHANGED
@@ -602,6 +602,7 @@ function makeThemeOptions(appTheme) {
602
602
  borderFocus: appTheme.colors.blue[400],
603
603
  borderHover: appTheme.colors.blue[500],
604
604
  borderOpen: appTheme.colors.blue[400],
605
+ borderPressed: appTheme.colors.blue[600],
605
606
  borderSelected: appTheme.colors.blue[400],
606
607
  fill: appTheme.colors.blue[400],
607
608
  fillDisabled: appTheme.colors.blue[300],
@@ -615,6 +616,8 @@ function makeThemeOptions(appTheme) {
615
616
  border: appTheme.colors.gray[400],
616
617
  borderDisabled: appTheme.colors.gray[300],
617
618
  borderHover: appTheme.colors.common.black,
619
+ borderPressed: appTheme.colors.common.black,
620
+ borderTable: appTheme.colors.gray[300],
618
621
  divider: appTheme.colors.gray[200],
619
622
  fill: appTheme.colors.common.white,
620
623
  fillDisabled: appTheme.colors.gray[300],
@@ -832,7 +835,7 @@ var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
832
835
  var defaultTheme = styles.createTheme(defaultThemeOptions);
833
836
 
834
837
  function focusVisibleA11yStyle() {
835
- return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n ";
838
+ return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid black;\n outline-offset: 1px;\n }\n ";
836
839
  }
837
840
 
838
841
  var getSpaces = function (_a) {
@@ -840,6 +843,9 @@ var getSpaces = function (_a) {
840
843
  var theme = _a.theme;
841
844
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.spacing) || null;
842
845
  };
846
+ /**
847
+ * @deprecated getSpacings() is deprecated and may be removed in a future release. Please use getSpaces()
848
+ */
843
849
  var getSpacings = function (_a) {
844
850
  var _b;
845
851
  var theme = _a.theme;
@@ -3645,7 +3651,7 @@ var StyledAccordion = styles.styled(material.Accordion, {
3645
3651
  var typography = getTypography(props);
3646
3652
  var borders = getBorders(props);
3647
3653
  var spaces = getSpaces(props);
3648
- return react.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &.", " {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n min-height: 44px;\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n min-height: 44px;\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", material.accordionSummaryClasses.root, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
3654
+ return react.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &.", " {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
3649
3655
  });
3650
3656
  var leftPosition = function (props) {
3651
3657
  var _a, _b, _c;
@@ -3898,17 +3904,20 @@ var tertiary = function (props) {
3898
3904
  var small$1 = function (props) {
3899
3905
  var sdsType = props.sdsType;
3900
3906
  var iconSizes = getIconSizes(props);
3901
- return react.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: 7px;" : "");
3907
+ var spaces = getSpaces(props);
3908
+ return react.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), 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;") : "");
3902
3909
  };
3903
3910
  var medium$1 = function (props) {
3904
3911
  var sdsType = props.sdsType;
3905
3912
  var iconSizes = getIconSizes(props);
3906
- return react.css(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, sdsType !== "tertiary" ? "margin: 7px;" : "");
3913
+ var spaces = getSpaces(props);
3914
+ return react.css(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), 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;") : "");
3907
3915
  };
3908
3916
  var large = function (props) {
3909
3917
  var sdsType = props.sdsType;
3910
3918
  var iconSizes = getIconSizes(props);
3911
- return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType !== "tertiary" ? "margin: 5px;" : "");
3919
+ var spaces = getSpaces(props);
3920
+ return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), 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;") : "");
3912
3921
  };
3913
3922
  var doNotForwardProps$o = [
3914
3923
  "on",
@@ -4050,7 +4059,7 @@ var disabledStyled$2 = function (props) {
4050
4059
  var _a, _b, _c;
4051
4060
  var colors = getColors(props);
4052
4061
  var semanticComponentColors = getSemanticComponentColors(props);
4053
- return react.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
4062
+ return react.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\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 border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
4054
4063
  };
4055
4064
  var StyledLabel$2 = styles.styled("label")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4056
4065
  var spaces = getSpaces(props);
@@ -4062,11 +4071,11 @@ var StyledSearchBase = styles.styled(material.TextField, {
4062
4071
  },
4063
4072
  })(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4064
4073
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4065
- var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage, value = props.value;
4074
+ var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage;
4066
4075
  var spaces = getSpaces(props);
4067
4076
  var iconSizes = getIconSizes(props);
4068
4077
  var semanticComponentColors = getSemanticComponentColors(props);
4069
- return react.css(templateObject_7$7 || (templateObject_7$7 = __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 opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: ", ";\n\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 background-color: ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\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 opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: ", ";\n\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 background-color: ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\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, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surface, material.outlinedInputClasses.notchedOutline, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, value ? 1 : 0, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.surface, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon, sdsStyle === "rounded" && rounded$3(props), intent === "error" && error$3(props), intent === "warning" && warning$3(props), disabled && disabledStyled$2(props), sdsStage === "userInput" && userInput$2(props));
4078
+ return react.css(templateObject_7$7 || (templateObject_7$7 = __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 opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: 1;\n\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 background-color: ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\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 black;\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 opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: 1;\n\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 background-color: ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\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 black;\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, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surface, material.outlinedInputClasses.notchedOutline, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.surface, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon, material.outlinedInputClasses.root, sdsStyle === "rounded" && rounded$3(props), intent === "error" && error$3(props), intent === "warning" && warning$3(props), disabled && disabledStyled$2(props), sdsStage === "userInput" && userInput$2(props));
4070
4079
  });
4071
4080
  var StyledInputAdornment = styles.styled(material.InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
4072
4081
  var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$2;
@@ -4179,11 +4188,78 @@ var MenuItem = React.forwardRef(function MenuItem(props, ref) {
4179
4188
  return (jsxRuntime.jsxs(StyledMenuItem$1, __assign({}, originalMenuItemProps, { disabled: disabled, ref: ref, children: [isMultiSelect && selectionIcon(), jsxRuntime.jsxs(ContentWrapper, { children: [jsxRuntime.jsxs(TextWrapper, { selected: selected, className: "primary-text", disabled: disabled, children: [iconItem(), children] }), column && jsxRuntime.jsx(ColumnWrapper, { disabled: disabled, children: column })] })] })));
4180
4189
  });
4181
4190
 
4191
+ /**
4192
+ * Adds a 'user-is-tabbing' class and a 'data-user-is-tabbing' attribute to the provided element when the user starts navigating
4193
+ * with the keyboard. This is useful for styling focus outlines differently when the user is using the keyboard to tab through elements.
4194
+ * It is particularly beneficial for input elements where the styles for :focus and :focus-visible are identical,
4195
+ * unlike button elements which have both :focus and :focus-visible states available to style separately.
4196
+ * By detecting when the user is tabbing, we can apply different styles for :focus and :focus-visible states.
4197
+ *
4198
+ * @param {HTMLElement} element - The element to which the 'user-is-tabbing' class will be added.
4199
+ * @returns {Function} A function to remove the 'user-is-tabbing' class and 'data-user-is-tabbing' attribute and clean up the event listeners.
4200
+ */
4201
+ var detectUserTabbing = function (element) {
4202
+ if (!element)
4203
+ return;
4204
+ var removed = false;
4205
+ function handleFirstTab(e) {
4206
+ if (e.code === "Tab") {
4207
+ element.classList.add("user-is-tabbing");
4208
+ element.setAttribute("data-user-is-tabbing", "true");
4209
+ window.removeEventListener("keydown", handleFirstTab);
4210
+ window.addEventListener("mousedown", handleMouseDownOnce);
4211
+ }
4212
+ }
4213
+ function handleMouseDownOnce() {
4214
+ element.classList.remove("user-is-tabbing");
4215
+ element.removeAttribute("data-user-is-tabbing");
4216
+ window.removeEventListener("mousedown", handleMouseDownOnce);
4217
+ window.addEventListener("keydown", handleFirstTab);
4218
+ }
4219
+ window.addEventListener("keydown", handleFirstTab);
4220
+ return function () {
4221
+ if (removed) {
4222
+ return;
4223
+ }
4224
+ removed = true;
4225
+ window.removeEventListener("keydown", handleFirstTab);
4226
+ window.removeEventListener("mousedown", handleMouseDownOnce);
4227
+ };
4228
+ };
4229
+ /**
4230
+ * Custom hook that listens for keyboard and mouse events to detect when
4231
+ * the user is tabbing through elements.
4232
+ *
4233
+ * @param {React.RefObject} ref - The ref to the element to which the 'user-is-tabbing' class
4234
+ * and 'data-user-is-tabbing' attribute will be added.
4235
+ */
4236
+ var useDetectUserTabbing = function (ref) {
4237
+ React.useEffect(function () {
4238
+ if (ref.current) {
4239
+ var destroyListener_1 = detectUserTabbing(ref.current);
4240
+ return function () { return destroyListener_1 === null || destroyListener_1 === void 0 ? void 0 : destroyListener_1(); };
4241
+ }
4242
+ }, [ref]);
4243
+ };
4244
+
4182
4245
  /**
4183
4246
  * @see https://mui.com/material-ui/react-text-field/
4184
4247
  */
4185
4248
  var InputSearch = React.forwardRef(function InputSearch(props, ref) {
4186
- var label = props.label, id = props.id, placeholder = props.placeholder, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, _b = props.intent, intent = _b === void 0 ? "default" : _b, handleSubmit = props.handleSubmit, onChange = props.onChange, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange"]);
4249
+ var label = props.label, id = props.id, placeholder = props.placeholder, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, _b = props.intent, intent = _b === void 0 ? "default" : _b, handleSubmit = props.handleSubmit, onChange = props.onChange, disabled = props.disabled, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange", "disabled"]);
4250
+ /**
4251
+ * (masoudmanson): In case that the ref is not provided, we will create a new one.
4252
+ */
4253
+ var inputRef = React.useRef(null);
4254
+ /**
4255
+ * (masoudmanson): This is a custom hook that listens for keyboard and mouse events
4256
+ * and adds a 'user-is-tabbing' class to the body element when the user starts
4257
+ * navigating with the keyboard. Unlike button elements which have both :focus
4258
+ * and :focus-visible states available to style separately, input elements have
4259
+ * identical styles for :focus and :focus-visible states. By detecting when the
4260
+ * user is tabbing, we can apply different styles for :focus and :focus-visible states.
4261
+ */
4262
+ useDetectUserTabbing((ref ? ref : inputRef));
4187
4263
  var _c = React.useState(false), hasValue = _c[0], setHasValue = _c[1];
4188
4264
  var _d = React.useState(""), value = _d[0], setValue = _d[1];
4189
4265
  var handleChange = function (event) {
@@ -4228,16 +4304,16 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
4228
4304
  console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
4229
4305
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
4230
4306
  }
4231
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ ref: ref,
4307
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
4232
4308
  // passed to mui Input
4233
4309
  InputProps: {
4234
- endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4310
+ endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4235
4311
  sdsType: "iconButton",
4236
4312
  }, icon: "XMarkCircle" }) })),
4237
- startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4313
+ startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4238
4314
  sdsType: "interactive",
4239
4315
  }, icon: "Search" }) })),
4240
- }, type: "search", id: id, variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent,
4316
+ }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
4241
4317
  /**
4242
4318
  * (masoudmanson): This prevents the browser's default auto completion
4243
4319
  * menu from being displayed for the InputSearch.
@@ -4262,7 +4338,7 @@ var StyledAutocompleteBase = styles.styled(material.Autocomplete, {
4262
4338
  var borders = getBorders(props);
4263
4339
  var semanticTextColors = getSemanticTextColors(props);
4264
4340
  var semanticComponentColors = getSemanticComponentColors(props);
4265
- return "\n ".concat(!search && "height: 0", ";\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.secondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
4341
+ return "\n ".concat(!search && "height: 0", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid black;\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.secondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
4266
4342
  });
4267
4343
  var InputBaseWrapper$1 = styles.styled("div", {
4268
4344
  shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
@@ -4272,7 +4348,7 @@ var InputBaseWrapper$1 = styles.styled("div", {
4272
4348
  // (thuang): We cannot use `display: none;` here, since
4273
4349
  // the component needs to be in the DOM to handle backdrop
4274
4350
  // click to close the menu
4275
- return "\n border: 0;\n padding: 0;\n white-space: nowrap;\n clip-path: inset(100%);\n clip: rect(0 0 0 0);\n overflow: hidden;\n margin: 0;\n ";
4351
+ return "\n border: 0;\n padding: 0;\n white-space: nowrap;\n clip-path: inset(100%);\n clip: rect(0 0 0 0);\n overflow: hidden;\n margin: 0;\n speak: none;\n ";
4276
4352
  }
4277
4353
  });
4278
4354
  var StyledMenuInputSearch$1 = styles.styled(InputSearch, {
@@ -4299,10 +4375,12 @@ var StyledMenuItemText = styles.styled("div")(templateObject_6$7 || (templateObj
4299
4375
  var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$7;
4300
4376
 
4301
4377
  var AutocompleteBase = function (props) {
4302
- 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;
4378
+ 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;
4303
4379
  var theme = styles.useTheme();
4380
+ var ref = React.useRef(null);
4304
4381
  var _r = React.useState(""), inputValue = _r[0], setInputValue = _r[1];
4305
- return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple,
4382
+ useDetectUserTabbing(ref);
4383
+ return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ ref: ref, clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple,
4306
4384
  /**
4307
4385
  * (masoudmanson): Overrides the onOpen and onClose handlers to ensure that
4308
4386
  * the onClick and onClickAway handlers are triggered when a controlled dropdown
@@ -4330,7 +4408,7 @@ var AutocompleteBase = function (props) {
4330
4408
  * the provided onInputChange from props is called at the end to emit the input changes
4331
4409
  * to the user.
4332
4410
  */
4333
- onInputChange: defaultOnInputChange })));
4411
+ onInputChange: defaultOnInputChange, disabled: disabled || !search })));
4334
4412
  /**
4335
4413
  * (masoudmanson): Using a custom Popper or Paper with the Autocomplete
4336
4414
  * without a useCallback results in scroll jumps while selecting an option!
@@ -4350,20 +4428,32 @@ var AutocompleteBase = function (props) {
4350
4428
  }, []);
4351
4429
  }
4352
4430
  function defaultRenderInput(params) {
4353
- return (jsxRuntime.jsx(InputBaseWrapper$1, { search: search, children: jsxRuntime.jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", label: label, placeholder: label, ref: params.InputProps.ref, search: search,
4431
+ return (jsxRuntime.jsx(InputBaseWrapper$1, { search: search, children: jsxRuntime.jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", "aria-label": "Search Input",
4432
+ // (masoudmanson): This is to ensure that the input field won't be focusable
4433
+ // when the search prop is set to false.
4434
+ tabIndex: search ? 0 : -1, "aria-hidden": !search, label: label, placeholder: label, ref: params.InputProps.ref, search: search,
4354
4435
  // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
4355
4436
  onKeyDown: function (event) {
4356
4437
  if (event.key === "Backspace") {
4357
4438
  event.stopPropagation();
4358
4439
  }
4359
- }, InputProps: __assign(__assign({
4440
+ }, InputProps: __assign(__assign({}, params.InputProps.ref), { "aria-hidden": !search, endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button
4441
+ // (masoudmanson): This is to ensure that the clear button won't be focusable
4442
+ // when the search prop is set to false.
4443
+ , {
4444
+ // (masoudmanson): This is to ensure that the clear button won't be focusable
4445
+ // when the search prop is set to false.
4446
+ tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, "aria-label": "Clear Button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4447
+ sdsType: "iconButton",
4448
+ }, icon: "XMarkCircle" })) })),
4360
4449
  /**
4361
4450
  * (thuang): Works with css caret-color: "transparent" to hide
4362
4451
  * mobile keyboard
4363
4452
  */
4364
- inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4365
- sdsType: "iconButton",
4366
- }, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4453
+ inputMode: search ? "text" : "none", inputProps: params.inputProps, startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "Search Button",
4454
+ // (masoudmanson): This is to ensure that the search button won't be focusable
4455
+ // when the search prop is set to false.
4456
+ tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4367
4457
  sdsType: "interactive",
4368
4458
  }, icon: "Search" }) })) }) }, InputBaseProps)) }));
4369
4459
  }
@@ -4567,6 +4657,7 @@ var AutocompleteMultiColumn = function (props) {
4567
4657
  }, [isOpenControlled, open]);
4568
4658
  var anchorRef = React.useRef(null);
4569
4659
  var _h = React.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
4660
+ useDetectUserTabbing(anchorRef);
4570
4661
  React.useEffect(function () {
4571
4662
  setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
4572
4663
  }, [anchorRef]);
@@ -4608,7 +4699,7 @@ var AutocompleteMultiColumn = function (props) {
4608
4699
  * inner autocompletes should remain hidden and unfocused when the parent
4609
4700
  * input is focused. This prevents blurring of the main search input.
4610
4701
  */
4611
- InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
4702
+ InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false, tabIndex: -1 }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
4612
4703
  function clearInput() {
4613
4704
  setInputValue("");
4614
4705
  /**
@@ -4705,6 +4796,11 @@ var AutocompleteMultiColumn = function (props) {
4705
4796
  }
4706
4797
  setPopperOpen(false);
4707
4798
  }
4799
+ else {
4800
+ // (masoudmanson): This is to open the dropdown when the user types in the search input.
4801
+ // especially when the user is tabbing through the input.
4802
+ setPopperOpen(true);
4803
+ }
4708
4804
  }
4709
4805
  }
4710
4806
  };
@@ -5022,11 +5118,14 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
5022
5118
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
5023
5119
  var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title, sdsStyle === "dark" && subtitle && jsxRuntime.jsx(Subtitle$1, { children: subtitle })] }));
5024
5120
  var leaveDelay = inverted || sdsStyle === "dark" ? 0 : 500;
5025
- return (jsxRuntime.jsx(material.Tooltip, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent, ref: ref }, rest, {
5121
+ return (jsxRuntime.jsx(material.Tooltip, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent,
5122
+ // (masoudmanson): Setting tabIndex to 0 makes the tooltip component
5123
+ // focusable and allows keyboard navigation.
5124
+ tabIndex: 0, ref: ref,
5026
5125
  // (masoudmanson): SDS Tooltips should always have an arrow
5027
5126
  // and by setting the arrow prop to true, we ensure that
5028
5127
  // the arrow is always rendered.
5029
- arrow: true })));
5128
+ arrow: true }, rest)));
5030
5129
  });
5031
5130
  function mergeClass$1(_a) {
5032
5131
  var props = _a.props, className = _a.className, key = _a.key;
@@ -5066,10 +5165,10 @@ var verticalAlignToFlexMap = {
5066
5165
  };
5067
5166
  var StyledTableData = styles.styled("td", {
5068
5167
  shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
5069
- })(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
5168
+ })(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
5070
5169
  var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
5071
5170
  var spaces = getSpaces(props);
5072
- return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlignCSSMap[verticalAlign], ";\n // width: 96px;\n overflow: hidden;\n ");
5171
+ return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlignCSSMap[verticalAlign], ";\n overflow: hidden;\n ");
5073
5172
  });
5074
5173
  var ShouldWrap = function (lineCount) {
5075
5174
  return "\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: ".concat(lineCount, ";\n -webkit-box-orient: vertical; \n ");
@@ -5145,7 +5244,7 @@ var CellBasic = React.forwardRef(function (props, ref) {
5145
5244
  var doNotForwardProps$i = ["horizontalAlign", "verticalAlign"];
5146
5245
  var StyledCellComponentData = styles.styled("td", {
5147
5246
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
5148
- })(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
5247
+ })(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
5149
5248
  var spaces = getSpaces(props);
5150
5249
  var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
5151
5250
  return "\n align-items: center;\n text-align: ".concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlign, ";\n overflow: hidden;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
@@ -5181,7 +5280,7 @@ var StyledSortingIcon = styles.styled(Icon, {
5181
5280
  });
5182
5281
  var StyledTableHeader$1 = styles.styled("th", {
5183
5282
  shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
5184
- })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderS, function (props) {
5283
+ })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
5185
5284
  var _a, _b, _c, _d, _e, _f, _g, _h;
5186
5285
  var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
5187
5286
  var spaces = getSpaces(props);
@@ -5353,7 +5452,7 @@ var StyledPaper$1 = styles.styled(material.Paper, {
5353
5452
  var spaces = getSpaces(props);
5354
5453
  var borders = getBorders(props);
5355
5454
  var shadows = getShadows(props);
5356
- 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 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 .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 ");
5455
+ 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 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 ");
5357
5456
  });
5358
5457
  var templateObject_1$z, templateObject_2$k, templateObject_3$c, templateObject_4$b;
5359
5458
 
@@ -5364,9 +5463,9 @@ var DEFAULT_POPPER_BASE_PROPS = {
5364
5463
  disablePortal: true,
5365
5464
  };
5366
5465
  var DropdownMenu = function (props) {
5367
- var _a;
5466
+ var _a, _b;
5368
5467
  var theme = styles.useTheme();
5369
- var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _b = props.open, open = _b === void 0 ? false : _b, _c = props.PopperComponent, PopperComponent = _c === void 0 ? StyledPopper : _c, _d = props.PaperComponent, PaperComponent = _d === void 0 ? StyledPaper$1 : _d, _e = props.PopperPlacement, PopperPlacement = _e === void 0 ? "bottom-start" : _e, _f = props.PopperBaseProps, PopperBaseProps = _f === void 0 ? {} : _f, _g = props.search, search = _g === void 0 ? false : _g, title = props.title, _h = props.label, label = _h === void 0 ? "Search" : _h, children = props.children, options = props.options, _j = props.onClickAway, onClickAway = _j === void 0 ? noop : _j, ClickAwayListenerProps = props.ClickAwayListenerProps, _k = props.width, width = _k === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _k, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
5468
+ var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search = _h === void 0 ? false : _h, title = props.title, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
5370
5469
  var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
5371
5470
  // (masoudmanson): The DropdownMenu's Popper component should have a minimum
5372
5471
  // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
@@ -5384,7 +5483,7 @@ var DropdownMenu = function (props) {
5384
5483
  {
5385
5484
  name: "offset",
5386
5485
  options: {
5387
- offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
5486
+ offset: [0, (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s],
5388
5487
  },
5389
5488
  },
5390
5489
  ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
@@ -5411,20 +5510,20 @@ var inputDropdownStyles = function (props) {
5411
5510
  var spaces = getSpaces(props);
5412
5511
  var borders = getBorders(props);
5413
5512
  var semanticTextColors = getSemanticTextColors(props);
5414
- var semanticCommonColors = getSemanticComponentColors(props);
5513
+ var semanticComponentColors = getSemanticComponentColors(props);
5415
5514
  /**
5416
5515
  * (masoudmanson)
5417
5516
  * The top/bottom padding is set to 1px less than the actual value to account for the border.
5418
5517
  */
5419
5518
  var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
5420
- return react.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, padding, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_e = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, (_g = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _g === void 0 ? void 0 : _g.iconHover, (_h = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _h === void 0 ? void 0 : _h.primary, (_j = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _j === void 0 ? void 0 : _j.default, (_k = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _k === void 0 ? void 0 : _k.primary, (_l = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.accent) === null || _l === void 0 ? void 0 : _l.icon);
5519
+ return react.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, padding, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.iconHover, (_h = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _h === void 0 ? void 0 : _h.primary, (_j = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _j === void 0 ? void 0 : _j.default, (_k = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _k === void 0 ? void 0 : _k.primary, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon);
5421
5520
  };
5422
5521
  var minimal$1 = function (props) {
5423
5522
  var _a, _b, _c, _d, _e, _f, _g;
5424
5523
  var spaces = getSpaces(props);
5425
5524
  var semanticTextColors = getSemanticTextColors(props);
5426
- var semanticCommonColors = getSemanticComponentColors(props);
5427
- return react.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, (_b = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, (_e = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, (_g = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
5525
+ var semanticComponentColors = getSemanticComponentColors(props);
5526
+ return react.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
5428
5527
  };
5429
5528
  var square$1 = function (props) {
5430
5529
  var corners = getCorners(props);
@@ -5435,18 +5534,22 @@ var rounded$1 = function (props) {
5435
5534
  return react.css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
5436
5535
  };
5437
5536
  var userInput$1 = function (props) {
5438
- var _a, _b;
5537
+ var _a, _b, _c, _d, _e, _f;
5538
+ var sdsStyle = props.sdsStyle;
5439
5539
  var semanticTextColors = getSemanticTextColors(props);
5440
- return react.css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.primary);
5540
+ var semanticComponentColors = getSemanticComponentColors(props);
5541
+ return react.css(templateObject_5$6 || (templateObject_5$6 = __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 = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.primary, sdsStyle === "minimal"
5542
+ ? "\n background-color: ".concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n border: none;\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, ";\n\n path {\n fill: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, ";\n }\n\n .styled-label {\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n }\n ")
5543
+ : "");
5441
5544
  };
5442
5545
  var isOpen = function (props) {
5443
5546
  var _a, _b;
5444
5547
  var colors = getColors(props);
5445
5548
  var semanticTextColors = getSemanticTextColors(props);
5446
- var semanticCommonColors = getSemanticComponentColors(props);
5549
+ var semanticComponentColors = getSemanticComponentColors(props);
5447
5550
  return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), props.sdsStyle === "minimal"
5448
5551
  ? "& > span, &:hover > span { color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, "; }")
5449
- : "", (_b = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.accent) === null || _b === void 0 ? void 0 : _b.icon, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[400]);
5552
+ : "", (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[400]);
5450
5553
  };
5451
5554
  var warning$1 = function (props) {
5452
5555
  var colors = getColors(props);
@@ -5461,8 +5564,8 @@ var error$1 = function (props) {
5461
5564
  var isDisabled = function (props) {
5462
5565
  var _a, _b, _c, _d;
5463
5566
  var semanticTextColors = getSemanticTextColors(props);
5464
- var semanticCommonColors = getSemanticComponentColors(props);
5465
- return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.disabled, (_d = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _d === void 0 ? void 0 : _d.fillDisabled);
5567
+ var semanticComponentColors = getSemanticComponentColors(props);
5568
+ return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.disabled, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.fillDisabled);
5466
5569
  };
5467
5570
  /**
5468
5571
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -5474,7 +5577,7 @@ var isDisabled = function (props) {
5474
5577
  */
5475
5578
  var StyledInputDropdown = styles.styled(Button, {
5476
5579
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
5477
- })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, function (props) {
5580
+ })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, focusVisibleA11yStyle, function (props) {
5478
5581
  var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
5479
5582
  return react.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), state === "open" && isOpen(props), sdsStage === "userInput" && userInput$1(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
5480
5583
  });
@@ -5504,9 +5607,9 @@ var StyledCounter = styles.styled("span", {
5504
5607
  var _a, _b;
5505
5608
  var corners = getCorners(props);
5506
5609
  var spaces = getSpaces(props);
5507
- var semanticCommonColors = getSemanticComponentColors(props);
5610
+ var semanticComponentColors = getSemanticComponentColors(props);
5508
5611
  var semanticTextColors = getSemanticTextColors(props);
5509
- return "\n background-color: ".concat((_a = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.accent, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5612
+ return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.accent, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5510
5613
  });
5511
5614
  var MinimalDetails = styles.styled("div", {
5512
5615
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
@@ -5545,7 +5648,7 @@ var InputDropdown = function (props) {
5545
5648
  var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple;
5546
5649
  var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
5547
5650
  var shouldRenderCounter = multiple && counter !== undefined && counter !== "0" && !isMinimal;
5548
- return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { children: [jsxRuntime.jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsxRuntime.jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
5651
+ return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { "aria-label": "Dropdown input", children: [jsxRuntime.jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsxRuntime.jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
5549
5652
  counter: counter,
5550
5653
  details: details,
5551
5654
  isMinimal: isMinimal,
@@ -5689,7 +5792,7 @@ function createTypeCss(props, type) {
5689
5792
  secondary: generateSecondaryTagColors(intent, colors, semanticColors),
5690
5793
  };
5691
5794
  var typeColors = typeToColors[type];
5692
- return react.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\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 &:focus {\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 &:focus {\n background-color: ", ";\n }\n\n &:focus:hover {\n background-color: ", ";\n }\n\n &:focus:active {\n background-color: ", ";\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 &:focus {\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 &:focus {\n background-color: ", ";\n }\n\n &:focus:hover {\n background-color: ", ";\n }\n\n &:focus:active {\n background-color: ", ";\n }\n "])), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.onFill, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.background, typeColors.backgroundHover, typeColors.backgroundClicked);
5795
+ return react.css(templateObject_6$2 || (templateObject_6$2 = __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(), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.onFill, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
5693
5796
  }
5694
5797
  var typeToCss = {
5695
5798
  primary: primary,
@@ -5725,10 +5828,10 @@ var Tag = function (props) {
5725
5828
  };
5726
5829
 
5727
5830
  var StyledTag = styles.styled(Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5728
- var _a, _b;
5831
+ var _a, _b, _c, _d;
5729
5832
  var spaces = getSpaces(props);
5730
5833
  var iconSizes = getIconSizes(props);
5731
- return react.css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n padding: ", "px ", "px;\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon,\n .MuiSvgIcon-root {\n margin-left: ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "], ["\n padding: ", "px ", "px;\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon,\n .MuiSvgIcon-root {\n margin-left: ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.width, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.height);
5834
+ return react.css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n padding: ", "px ", "px;\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "], ["\n padding: ", "px ", "px;\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.width, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.width, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.height);
5732
5835
  });
5733
5836
  var templateObject_1$w, templateObject_2$h;
5734
5837
 
@@ -5818,18 +5921,14 @@ var ComplexFilter = function (_a) {
5818
5921
  if (multiple) {
5819
5922
  if (isTriggerChangeOnOptionClick) {
5820
5923
  setPendingValue(newValue);
5821
- return setValueAndCallOnChange(event, newValue);
5924
+ return setValue(newValue);
5822
5925
  }
5823
5926
  return setPendingValue(newValue);
5824
5927
  }
5825
- setValueAndCallOnChange(event, newValue);
5928
+ setValue(newValue);
5826
5929
  if (!multiple)
5827
5930
  setOpen(false);
5828
5931
  }
5829
- function setValueAndCallOnChange(event, newValue) {
5830
- setValue(newValue);
5831
- onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
5832
- }
5833
5932
  function handleDelete(option) {
5834
5933
  if (!multiple) {
5835
5934
  return setValue(null);
@@ -6184,7 +6283,7 @@ var StyledCheckbox = styles.styled(material.Checkbox)(templateObject_1$o || (tem
6184
6283
  warning: "notice",
6185
6284
  };
6186
6285
  var checkboxColor = intentToColor[intent];
6187
- return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.checkboxClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n padding: 0;\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .MuiSvgIcon-root {\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 ");
6286
+ return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.checkboxClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n padding: 0;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n border-radius: 0;\n }\n\n .MuiSvgIcon-root {\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 ");
6188
6287
  });
6189
6288
  var StyledFormControlLabel$1 = styles.styled(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6190
6289
  var spaces = getSpaces(props);
@@ -6264,7 +6363,7 @@ var StyledRadioButton = styles.styled(material.Radio)(templateObject_1$n || (tem
6264
6363
  warning: "notice",
6265
6364
  };
6266
6365
  var radioColor = intentToColor[intent];
6267
- return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.radioClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n }\n\n .MuiSvgIcon-root {\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 ");
6366
+ return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.radioClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n padding: 0;\n }\n\n .MuiSvgIcon-root {\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 ");
6268
6367
  });
6269
6368
  var StyledFormControlLabel = styles.styled(material.FormControlLabel)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6270
6369
  var spaces = getSpaces(props);
@@ -6287,19 +6386,26 @@ var templateObject_1$n, templateObject_2$c, templateObject_3$7, templateObject_4
6287
6386
  * @see https://mui.com/material-ui/react-radio-button/
6288
6387
  */
6289
6388
  var InputRadio = function (props) {
6290
- var label = props.label, caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value;
6389
+ var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value;
6390
+ // (masoudmanson): We don't need to pass the label prop to the radio component
6391
+ // so we are destructuring it here.
6392
+ var label = props.label, restProps = __rest(props, ["label"]);
6291
6393
  var newProps;
6292
6394
  switch (stage) {
6293
6395
  case "checked":
6294
- newProps = __assign(__assign({}, props), { checked: true, color: "primary" });
6396
+ newProps = __assign(__assign({}, restProps), { checked: true, color: "primary" });
6295
6397
  break;
6296
6398
  case "unchecked":
6297
- newProps = __assign(__assign({}, props), { checked: false, color: "default" });
6399
+ newProps = __assign(__assign({}, restProps), { checked: false, color: "default" });
6298
6400
  break;
6299
6401
  default:
6300
- newProps = props;
6402
+ newProps = restProps;
6301
6403
  }
6302
- var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { children: [jsxRuntime.jsx(StyledRadioLabel, { children: label }), jsxRuntime.jsx(StyledRadioCaption, { disabled: disabled, children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { children: jsxRuntime.jsx(StyledRadioLabel, { children: label }) }));
6404
+ // (masoudmanson): The id for the label and caption is required for accessibility.
6405
+ // Otherwise, the screen reader will read the label twice!
6406
+ var labelId = "".concat(value, "-label");
6407
+ var captionId = caption ? "".concat(value, "-caption") : undefined;
6408
+ var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { children: [jsxRuntime.jsx(StyledRadioLabel, { id: labelId, children: label }), jsxRuntime.jsx(StyledRadioCaption, { disabled: disabled, id: captionId, children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { children: jsxRuntime.jsx(StyledRadioLabel, { id: labelId, children: label }) }));
6303
6409
  return (jsxRuntime.jsx(StyledFormControlLabel, { control: jsxRuntime.jsx(StyledRadioButton, __assign({ disabled: disabled, checkedIcon: jsxRuntime.jsx(material.SvgIcon, { fillcontrast: "white", component: SvgIconRadioChecked, viewBox: "0 0 16 16" }), icon: jsxRuntime.jsx(material.SvgIcon, { fillcontrast: "white", component: SvgIconRadioUnchecked, viewBox: "0 0 16 16" }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
6304
6410
  };
6305
6411
 
@@ -6310,7 +6416,7 @@ var inputSlider = function (props) {
6310
6416
  var shadows = getShadows(props);
6311
6417
  var semanticComponentColors = getSemanticComponentColors(props);
6312
6418
  var semanticTextColors = getSemanticTextColors(props);
6313
- return "\n position: relative;\n\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(material.sliderClasses.rail, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n }\n \n .").concat(material.sliderClasses.track, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fill, ";\n }\n\n .").concat(material.sliderClasses.thumb, " {\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fill, ";\n\n &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(material.sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(material.sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surface, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: black;\n background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.surface, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n opacity: 1;\n }\n\n .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.surface, ";\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n ").concat((_h = fontBodyXxxs$1(props)) === null || _h === void 0 ? void 0 : _h.styles, "\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n }\n\n .").concat(material.sliderClasses.markLabelActive, " {\n color: ").concat((_j = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _j === void 0 ? void 0 : _j.primary, ";\n }\n ");
6419
+ return "\n position: relative;\n\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(material.sliderClasses.rail, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n }\n \n .").concat(material.sliderClasses.track, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fill, ";\n }\n\n .").concat(material.sliderClasses.thumb, " {\n ").concat(focusVisibleA11yStyle(), "\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fill, ";\n\n &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(material.sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(material.sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surface, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: black;\n background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.surface, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n opacity: 1;\n }\n\n .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.surface, ";\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n ").concat((_h = fontBodyXxxs$1(props)) === null || _h === void 0 ? void 0 : _h.styles, "\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n }\n\n .").concat(material.sliderClasses.markLabelActive, " {\n color: ").concat((_j = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _j === void 0 ? void 0 : _j.primary, ";\n }\n ");
6314
6420
  };
6315
6421
  var horizontal = function (props) {
6316
6422
  var marks = props.marks;
@@ -6334,7 +6440,8 @@ var templateObject_1$m;
6334
6440
  * @see https://mui.com/material-ui/react-slider/
6335
6441
  */
6336
6442
  var InputSlider = React.forwardRef(function (props, ref) {
6337
- return jsxRuntime.jsx(StyledSlider, __assign({ ref: ref }, props, { orientation: "horizontal" }));
6443
+ var min = props.min, max = props.max, rest = __rest(props, ["min", "max"]);
6444
+ return (jsxRuntime.jsx(StyledSlider, __assign({ ref: ref, min: min, max: max }, rest, { orientation: "horizontal", "aria-label": "Slider - min ".concat(min, " to max ").concat(max) })));
6338
6445
  });
6339
6446
 
6340
6447
  var sdsPropNames$1 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
@@ -6386,7 +6493,7 @@ var StyledInputBase = styles.styled(material.TextField, {
6386
6493
  var borders = getBorders(props);
6387
6494
  var corners = getCorners(props);
6388
6495
  var semanticComponentColors = getSemanticComponentColors(props);
6389
- return react.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\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.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, 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 === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
6496
+ return react.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\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.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, 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 === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
6390
6497
  });
6391
6498
  var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
6392
6499
 
@@ -6395,6 +6502,19 @@ var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4
6395
6502
  */
6396
6503
  var InputText = React.forwardRef(function InputText(props, ref) {
6397
6504
  var id = props.id, _a = props.intent, intent = _a === void 0 ? "default" : _a, label = props.label, placeholder = props.placeholder, sdsType = props.sdsType, hideLabel = props.hideLabel, rest = __rest(props, ["id", "intent", "label", "placeholder", "sdsType", "hideLabel"]);
6505
+ /**
6506
+ * (masoudmanson): In case that the ref is not provided, we will create a new one.
6507
+ */
6508
+ var inputRef = React.useRef(null);
6509
+ /**
6510
+ * (masoudmanson): This is a custom hook that listens for keyboard and mouse events
6511
+ * and adds a 'user-is-tabbing' class to the body element when the user starts
6512
+ * navigating with the keyboard. Unlike button elements which have both :focus
6513
+ * and :focus-visible states available to style separately, input elements have
6514
+ * identical styles for :focus and :focus-visible states. By detecting when the
6515
+ * user is tabbing, we can apply different styles for :focus and :focus-visible states.
6516
+ */
6517
+ useDetectUserTabbing((ref ? ref : inputRef));
6398
6518
  var _b = React.useState(false), hasValue = _b[0], setHasValue = _b[1];
6399
6519
  var handleChange = function (event) {
6400
6520
  if (event.target.value) {
@@ -6413,18 +6533,17 @@ var InputText = React.forwardRef(function InputText(props, ref) {
6413
6533
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
6414
6534
  }
6415
6535
  var finalLabel = typeof label === "string" ? (jsxRuntime.jsx(StyledLabel, { htmlFor: id, children: label })) : (label);
6416
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hideLabel && finalLabel, jsxRuntime.jsx(StyledInputBase, __assign({ ref: ref, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsStage: hasValue ? "userInput" : "default", sdsType: sdsType, onChange: handleChange }, rest))] }));
6536
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hideLabel && finalLabel, jsxRuntime.jsx(StyledInputBase, __assign({ ref: ref ? ref : inputRef, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsStage: hasValue ? "userInput" : "default", sdsType: sdsType, onChange: handleChange }, rest))] }));
6417
6537
  });
6418
6538
 
6419
6539
  var toggle = function (props) {
6420
- var _a;
6421
- var disabled = props.disabled;
6540
+ var _a, _b, _c, _d;
6541
+ var disabled = props.disabled, _e = props.width, width = _e === void 0 ? 62 : _e;
6422
6542
  var corners = getCorners(props);
6423
- var spaces = getSpaces(props);
6424
6543
  var shadows = getShadows(props);
6544
+ var iconSizes = getIconSizes(props);
6425
6545
  var semanticComponentColors = getSemanticComponentColors(props);
6426
- var TOGGLE_HEIGHT = 18;
6427
- return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 26px;\n width: 62px;\n line-height: 18px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .").concat(material.switchClasses.switchBase, " {\n font: inherit;\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n padding: 0;\n transform: unset;\n\n &.").concat(material.switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(material.switchClasses.thumb, " {\n height: ").concat(TOGGLE_HEIGHT, "px;\n width: ").concat(TOGGLE_HEIGHT, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n width: unset;\n }\n ");
6546
+ return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 24px;\n width: ").concat(width, "px;\n line-height: 18px;\n padding: 0;\n overflow: visible;\n\n .").concat(material.switchClasses.switchBase, " {\n ").concat(focusVisibleA11yStyle(), "\n outline-offset: 2px !important;\n width: 100%;\n height: 100%;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n font: inherit;\n transform: unset;\n justify-content: space-between;\n\n .").concat(material.switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(material.switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(material.switchClasses.thumb, " {\n height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n width: unset;\n }\n ");
6428
6547
  };
6429
6548
  var toggleOn = function (props) {
6430
6549
  var _a, _b, _c, _d, _e, _f, _g;
@@ -6434,7 +6553,7 @@ var toggleOn = function (props) {
6434
6553
  var spaces = getSpaces(props);
6435
6554
  var semanticComponentColors = getSemanticComponentColors(props);
6436
6555
  var semanticTextColors = getSemanticTextColors(props);
6437
- return "\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.borderDisabled : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled : (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n content: \"").concat(value, "\";\n }\n }\n\n ").concat(!disabled &&
6556
+ return "\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.borderDisabled : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled : (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n content: \"").concat(value, "\";\n }\n }\n\n ").concat(!disabled &&
6438
6557
  "&:hover {\n outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _g === void 0 ? void 0 : _g.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.blue[500], ";\n }\n }"), "\n ");
6439
6558
  };
6440
6559
  var toggleOff = function (props) {
@@ -6446,7 +6565,7 @@ var toggleOff = function (props) {
6446
6565
  var semanticTextColors = getSemanticTextColors(props);
6447
6566
  return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled
6448
6567
  ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled
6449
- : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled : (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n content: \"").concat(value, "\";\n }\n }\n\n ").concat(!disabled &&
6568
+ : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled : (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n content: \"").concat(value, "\";\n }\n }\n\n ").concat(!disabled &&
6450
6569
  "&:hover {\n outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.black, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.iconHover, ";\n }\n }"), "\n ");
6451
6570
  };
6452
6571
  var Toggle = styles.styled(material.Switch)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
@@ -6473,9 +6592,11 @@ var InputToggle = function (props) {
6473
6592
 
6474
6593
  var doNotForwardProps$9 = ["sdsStyle", "sdsSize", "fontWeight"];
6475
6594
  var defaultStyle = function (props) {
6476
- var _a, _b, _c;
6595
+ var _a, _b, _c, _d, _e, _f, _g;
6596
+ var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
6477
6597
  var semanticTextColors = getSemanticTextColors(props);
6478
- return react.css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n\n &:hover,\n &:focus {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n &:hover,\n &:focus {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "])), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _b === void 0 ? void 0 : _b.hover, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _c === void 0 ? void 0 : _c.pressed);
6598
+ var semanticComponentColors = getSemanticComponentColors(props);
6599
+ return react.css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "], ["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "])), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default, sdsSize === "s" ? -4 : -3, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _b === void 0 ? void 0 : _b.hover, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _d === void 0 ? void 0 : _d.hover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _f === void 0 ? void 0 : _f.pressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.borderPressed);
6479
6600
  };
6480
6601
  var dashedStyle = function (props) {
6481
6602
  var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a;
@@ -6491,7 +6612,7 @@ var StyledLink = styles.styled(material.Link, {
6491
6612
  shouldForwardProp: function (prop) {
6492
6613
  return !doNotForwardProps$9.includes(prop.toString());
6493
6614
  },
6494
- })(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n all: unset;\n\n ", "\n"], ["\n all: unset;\n\n ", "\n"])), function (props) {
6615
+ })(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
6495
6616
  var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
6496
6617
  return react.css(templateObject_3$5 || (templateObject_3$5 = __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(props), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
6497
6618
  });
@@ -6640,7 +6761,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4, templateObject_4
6640
6761
 
6641
6762
  var LoadingIndicator = function (_a) {
6642
6763
  var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
6643
- return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
6764
+ return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
6644
6765
  };
6645
6766
 
6646
6767
  var StyledMenu = styles.styled(material.Menu)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"], ["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"])), material.menuClasses.paper, function (props) {
@@ -6805,7 +6926,7 @@ var StyledTabs$1 = styles.styled(material.Tabs, {
6805
6926
  var _c = props.sdsIndicatorColor, sdsIndicatorColor = _c === void 0 ? "info" : _c;
6806
6927
  var spaces = getSpaces(props);
6807
6928
  var semanticComponentColors = getSemanticComponentColors(props);
6808
- return "\n &:before {\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n max-width: 180px;\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n position: sticky;\n .MuiTabs-indicator {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[sdsIndicatorColor]) === null || _b === void 0 ? void 0 : _b.fill, " !important;\n border-radius: 2px;\n left: 0;\n width: 2px;\n }\n ");
6929
+ return "\n &:before {\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n max-width: 180px;\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n position: sticky;\n overflow: visible;\n\n .").concat(material.tabsClasses.indicator, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[sdsIndicatorColor]) === null || _b === void 0 ? void 0 : _b.fill, " !important;\n border-radius: 2px;\n left: 0;\n width: 2px;\n }\n\n .").concat(material.tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
6809
6930
  });
6810
6931
  var StyledTab$1 = styles.styled(material.Tab, {
6811
6932
  shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
@@ -6813,7 +6934,7 @@ var StyledTab$1 = styles.styled(material.Tab, {
6813
6934
  var _a, _b;
6814
6935
  var spaces = getSpaces(props);
6815
6936
  var semanticComponentColors = getSemanticComponentColors(props);
6816
- return "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: black;\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: black;\n font-weight: 600;\n }\n &.MuiTabs-indicator {\n backgroundColor: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfaceTertiary, ";\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
6937
+ return "\n ".concat(focusVisibleA11yStyle(), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: black;\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: black;\n font-weight: 600;\n }\n &.MuiTabs-indicator {\n backgroundColor: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfaceTertiary, ";\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
6817
6938
  });
6818
6939
  var templateObject_1$c, templateObject_2$6;
6819
6940
 
@@ -6954,7 +7075,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
6954
7075
  return (jsxRuntime.jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", sdsIndicatorColor: indicatorColor }, rest, { children: items.map(function (_a, index) {
6955
7076
  var _b;
6956
7077
  var title = _a.title, elementRef = _a.elementRef;
6957
- return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
7078
+ return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
6958
7079
  "navigation-panel-".concat(index + 1))), toKebabCase(title)));
6959
7080
  }) })));
6960
7081
  });
@@ -7061,7 +7182,7 @@ var StyledPaginationChevronList = styles.styled("li", {
7061
7182
  var disabled = props.disabled;
7062
7183
  var spaces = getSpaces(props);
7063
7184
  var semanticComponentColors = getSemanticComponentColors(props);
7064
- return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, "\n }\n }\n ");
7185
+ return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, "\n }\n }\n\n ").concat(focusVisibleA11yStyle(), "\n ");
7065
7186
  });
7066
7187
  var StyledPagination = styles.styled("ul", {
7067
7188
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -7081,7 +7202,7 @@ var Page = styles.styled("li", {
7081
7202
  var corners = getCorners(props);
7082
7203
  var semanticComponentColors = getSemanticComponentColors(props);
7083
7204
  var semanticTextColors = getSemanticTextColors(props);
7084
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n cursor: pointer;\n list-style: none;\n width: 32px;\n height: 32px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n user-select: none;\n &:hover {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, ";\n }\n\n &:nth-last-of-type(-n+2) {\n margin-right: 0;\n }\n\n ").concat(selected && selectedPageStyle(props), ";\n ");
7205
+ return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n cursor: pointer;\n list-style: none;\n width: 32px;\n height: 32px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n user-select: none;\n &:hover {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, ";\n }\n\n &:nth-last-of-type(-n+2) {\n margin-right: 0;\n }\n\n ").concat(selected && selectedPageStyle(props), ";\n ").concat(focusVisibleA11yStyle(), "\n ");
7085
7206
  });
7086
7207
  var templateObject_1$a, templateObject_2$4, templateObject_3$2, templateObject_4$1;
7087
7208
 
@@ -7160,6 +7281,22 @@ var usePagination = function (_a) {
7160
7281
  }, [totalCount, pageSize, siblingCount, currentPage]);
7161
7282
  };
7162
7283
 
7284
+ var PaginationPageList = function (paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage) {
7285
+ function handlePageKeyDown(event, pageNumber) {
7286
+ if (event.key === "Enter" || event.code === "Space") {
7287
+ onPageChange(pageNumber);
7288
+ }
7289
+ }
7290
+ return paginationRange.map(function (pageNumber) {
7291
+ if (Array.isArray(pageNumber)) {
7292
+ if (truncateDropdown) {
7293
+ return (jsxRuntime.jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
7294
+ }
7295
+ return (jsxRuntime.jsx(Page, { sdsStyle: sdsStyle, children: jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }) }, pageNumber.join("-")));
7296
+ }
7297
+ return (jsxRuntime.jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, onKeyDown: function (event) { return handlePageKeyDown(event, pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, tabIndex: 0, children: pageNumber }, pageNumber));
7298
+ });
7299
+ };
7163
7300
  var Pagination = React.forwardRef(function (props, ref) {
7164
7301
  var _a = props.sdsStyle, sdsStyle = _a === void 0 ? "round" : _a, onPageChange = props.onPageChange, onNextPage = props.onNextPage, onPreviousPage = props.onPreviousPage, totalCount = props.totalCount, _b = props.siblingCount, siblingCount = _b === void 0 ? 1 : _b, currentPage = props.currentPage, pageSize = props.pageSize, _c = props.truncateDropdown, truncateDropdown = _c === void 0 ? true : _c;
7165
7302
  if (pageSize < 1) {
@@ -7175,15 +7312,19 @@ var Pagination = React.forwardRef(function (props, ref) {
7175
7312
  return null;
7176
7313
  }
7177
7314
  var lastPage = paginationRange[paginationRange.length - 1];
7178
- return (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), paginationRange.map(function (pageNumber) {
7179
- if (Array.isArray(pageNumber)) {
7180
- if (truncateDropdown) {
7181
- return (jsxRuntime.jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
7182
- }
7183
- return (jsxRuntime.jsx(Page, { sdsStyle: sdsStyle, children: jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }) }, pageNumber.join("-")));
7184
- }
7185
- return (jsxRuntime.jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, children: pageNumber }, pageNumber));
7186
- }), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, children: jsxRuntime.jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
7315
+ return (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
7316
+ function handleGoBackButtonKeyDown(event) {
7317
+ if ((event.key === "Enter" || event.code === "Space") &&
7318
+ currentPage > 1) {
7319
+ onPreviousPage();
7320
+ }
7321
+ }
7322
+ function handleGoNextButtonKeyDown(event) {
7323
+ if ((event.key === "Enter" || event.code === "Space") &&
7324
+ currentPage !== lastPage) {
7325
+ onNextPage();
7326
+ }
7327
+ }
7187
7328
  });
7188
7329
 
7189
7330
  var doNotForwardProps$1 = ["buttonDefinition"];
@@ -7193,7 +7334,7 @@ var StyledSegmentedControl = styles.styled(material.ToggleButtonGroup, {
7193
7334
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
7194
7335
  var spaces = getSpaces(props);
7195
7336
  var semanticComponentColors = getSemanticComponentColors(props);
7196
- return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen, ";\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon, ";\n border-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.border, ";\n\n &:hover {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n .").concat(material.toggleButtonClasses.root, " {\n border-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.border, ";\n line-height: 0px;\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.iconHover, ";\n padding: ").concat(((_g = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _g !== void 0 ? _g : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.border, ";\n background-color: ").concat((_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.fillHover, ";\n }\n }\n ");
7337
+ return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen, ";\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon, ";\n border-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.border, ";\n\n &:hover {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n .").concat(material.toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n border-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.border, ";\n line-height: 0px;\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.iconHover, ";\n padding: ").concat(((_g = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _g !== void 0 ? _g : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.border, ";\n background-color: ").concat((_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.fillHover, ";\n }\n }\n ");
7197
7338
  });
7198
7339
  var templateObject_1$8;
7199
7340
 
@@ -7207,7 +7348,7 @@ var SegmentedControl = function (props) {
7207
7348
  setActive(newActive);
7208
7349
  }
7209
7350
  };
7210
- return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
7351
+ return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
7211
7352
  var icon = button.icon, tooltipText = button.tooltipText, value = button.value;
7212
7353
  var iconItem = function () {
7213
7354
  if (icon) {
@@ -7219,7 +7360,7 @@ var SegmentedControl = function (props) {
7219
7360
  }
7220
7361
  }
7221
7362
  };
7222
- return (jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText, disableRipple: true, value: value, children: jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : value, sdsStyle: "dark", arrow: true, children: jsxRuntime.jsx("span", { children: iconItem() }) }) }, value));
7363
+ return (jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : value, sdsStyle: "dark", arrow: true, children: jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText, value: value, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem() }) }) }, value));
7223
7364
  }), ";"] })));
7224
7365
  };
7225
7366
 
@@ -7253,7 +7394,7 @@ var hoverStyled = function (props) {
7253
7394
  };
7254
7395
  var StyledTableRow = styles.styled("tr", {
7255
7396
  shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
7256
- })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderS, function (props) {
7397
+ })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
7257
7398
  var _a, _b;
7258
7399
  var rowHeight = props.rowHeight, _c = props.useDivider, useDivider = _c === void 0 ? true : _c, _d = props.selected, selected = _d === void 0 ? false : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.hover, hover = _f === void 0 ? true : _f;
7259
7400
  var semanticComponentColors = getSemanticComponentColors(props);
@@ -7418,7 +7559,7 @@ var TooltipCondensed = React.forwardRef(function TooltipCondensed(props, ref) {
7418
7559
  key: "tooltip",
7419
7560
  props: props,
7420
7561
  });
7421
- return (jsxRuntime.jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, children: children }));
7562
+ return (jsxRuntime.jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, children: children }));
7422
7563
  });
7423
7564
  function mergeClass(_a) {
7424
7565
  var props = _a.props, className = _a.className, key = _a.key;