@czi-sds/components 20.5.0 → 20.6.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useCallback, useEffect, useRef, useMemo, createContext, useContext } from 'react';
+import React__default, { forwardRef, useEffect, useRef, useState, useCallback, useMemo, createContext, useContext } from 'react';
 import { css } from '@emotion/react';
-import { colors, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, Popper, ClickAwayListener, alertClasses, alertTitleClasses, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, ToggleButtonGroup, toggleButtonClasses, ToggleButton, useTheme as useTheme$1, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
+import { colors, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, Popper, ClickAwayListener, alertClasses, alertTitleClasses, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box, ToggleButtonGroup, toggleButtonClasses, ToggleButton, useTheme as useTheme$1, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
 import { createTheme, styled, useTheme } from '@mui/material/styles';
 import { Check, Remove, Clear } from '@mui/icons-material';
 import { css as css$1 } from '@emotion/css';
@@ -582,6 +582,7 @@ function makeThemeOptions(appTheme) {
                         borderFocus: appTheme.colors.blue[400],
                         borderHover: appTheme.colors.blue[500],
                         borderOpen: appTheme.colors.blue[400],
+                        borderPressed: appTheme.colors.blue[600],
                         borderSelected: appTheme.colors.blue[400],
                         fill: appTheme.colors.blue[400],
                         fillDisabled: appTheme.colors.blue[300],
@@ -595,6 +596,8 @@ function makeThemeOptions(appTheme) {
                         border: appTheme.colors.gray[400],
                         borderDisabled: appTheme.colors.gray[300],
                         borderHover: appTheme.colors.common.black,
+                        borderPressed: appTheme.colors.common.black,
+                        borderTable: appTheme.colors.gray[300],
                         divider: appTheme.colors.gray[200],
                         fill: appTheme.colors.common.white,
                         fillDisabled: appTheme.colors.gray[300],
@@ -812,7 +815,7 @@ var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
 var defaultTheme = createTheme(defaultThemeOptions);
 
 function focusVisibleA11yStyle() {
-    return "\n      &.Mui-focusVisible, &:focus-visible {\n        outline: 5px auto Highlight;\n        outline: 5px auto -webkit-focus-ring-color;\n      }\n  ";
+    return "\n      &.Mui-focusVisible, &:focus-visible {\n        outline: 2px solid black;\n        outline-offset: 1px;\n      }\n  ";
 }
 
 var getSpaces = function (_a) {
@@ -820,6 +823,9 @@ var getSpaces = function (_a) {
     var theme = _a.theme;
     return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.spacing) || null;
 };
+/**
+ * @deprecated getSpacings() is deprecated and may be removed in a future release. Please use getSpaces()
+ */
 var getSpacings = function (_a) {
     var _b;
     var theme = _a.theme;
@@ -3625,7 +3631,7 @@ var StyledAccordion = styled(Accordion$1, {
     var typography = getTypography(props);
     var borders = getBorders(props);
     var spaces = getSpaces(props);
-    return 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    "])), accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", accordionSummaryClasses.root, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
+    return 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    "])), accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", accordionSummaryClasses.root, focusVisibleA11yStyle(), accordionSummaryClasses.focusVisible, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
 });
 var leftPosition = function (props) {
     var _a, _b, _c;
@@ -3878,17 +3884,20 @@ var tertiary = function (props) {
 var small$1 = function (props) {
     var sdsType = props.sdsType;
     var iconSizes = getIconSizes(props);
-    return 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;" : "");
+    var spaces = getSpaces(props);
+    return 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;") : "");
 };
 var medium$1 = function (props) {
     var sdsType = props.sdsType;
     var iconSizes = getIconSizes(props);
-    return 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;" : "");
+    var spaces = getSpaces(props);
+    return 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;") : "");
 };
 var large = function (props) {
     var sdsType = props.sdsType;
     var iconSizes = getIconSizes(props);
-    return 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;" : "");
+    var spaces = getSpaces(props);
+    return 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;") : "");
 };
 var doNotForwardProps$o = [
     "on",
@@ -4030,7 +4039,7 @@ var disabledStyled$2 = function (props) {
     var _a, _b, _c;
     var colors = getColors(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    return 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  "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, 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]);
+    return 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  "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, 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]);
 };
 var StyledLabel$2 = styled("label")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyM$1, function (props) {
     var spaces = getSpaces(props);
@@ -4042,11 +4051,11 @@ var StyledSearchBase = styled(TextField, {
     },
 })(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage, value = props.value;
+    var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    return 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, 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, 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, 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, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, inputAdornmentClasses.root, 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));
+    return 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, 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, 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, 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, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon, 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));
 });
 var StyledInputAdornment = styled(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"])));
 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;
@@ -4159,11 +4168,78 @@ var MenuItem = forwardRef(function MenuItem(props, ref) {
     return (jsxs(StyledMenuItem$1, __assign({}, originalMenuItemProps, { disabled: disabled, ref: ref, children: [isMultiSelect && selectionIcon(), jsxs(ContentWrapper, { children: [jsxs(TextWrapper, { selected: selected, className: "primary-text", disabled: disabled, children: [iconItem(), children] }), column && jsx(ColumnWrapper, { disabled: disabled, children: column })] })] })));
 });
 
+/**
+ * Adds a 'user-is-tabbing' class and a 'data-user-is-tabbing' attribute to the provided element when the user starts navigating
+ * with the keyboard. This is useful for styling focus outlines differently when the user is using the keyboard to tab through elements.
+ * It is particularly beneficial for input elements where the styles for :focus and :focus-visible are identical,
+ * unlike button elements which have both :focus and :focus-visible states available to style separately.
+ * By detecting when the user is tabbing, we can apply different styles for :focus and :focus-visible states.
+ *
+ * @param {HTMLElement} element - The element to which the 'user-is-tabbing' class will be added.
+ * @returns {Function} A function to remove the 'user-is-tabbing' class and 'data-user-is-tabbing' attribute and clean up the event listeners.
+ */
+var detectUserTabbing = function (element) {
+    if (!element)
+        return;
+    var removed = false;
+    function handleFirstTab(e) {
+        if (e.code === "Tab") {
+            element.classList.add("user-is-tabbing");
+            element.setAttribute("data-user-is-tabbing", "true");
+            window.removeEventListener("keydown", handleFirstTab);
+            window.addEventListener("mousedown", handleMouseDownOnce);
+        }
+    }
+    function handleMouseDownOnce() {
+        element.classList.remove("user-is-tabbing");
+        element.removeAttribute("data-user-is-tabbing");
+        window.removeEventListener("mousedown", handleMouseDownOnce);
+        window.addEventListener("keydown", handleFirstTab);
+    }
+    window.addEventListener("keydown", handleFirstTab);
+    return function () {
+        if (removed) {
+            return;
+        }
+        removed = true;
+        window.removeEventListener("keydown", handleFirstTab);
+        window.removeEventListener("mousedown", handleMouseDownOnce);
+    };
+};
+/**
+ * Custom hook that listens for keyboard and mouse events to detect when
+ * the user is tabbing through elements.
+ *
+ * @param {React.RefObject} ref - The ref to the element to which the 'user-is-tabbing' class
+ * and 'data-user-is-tabbing' attribute will be added.
+ */
+var useDetectUserTabbing = function (ref) {
+    useEffect(function () {
+        if (ref.current) {
+            var destroyListener_1 = detectUserTabbing(ref.current);
+            return function () { return destroyListener_1 === null || destroyListener_1 === void 0 ? void 0 : destroyListener_1(); };
+        }
+    }, [ref]);
+};
+
 /**
  * @see https://mui.com/material-ui/react-text-field/
  */
 var InputSearch = forwardRef(function InputSearch(props, ref) {
-    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"]);
+    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"]);
+    /**
+     * (masoudmanson): In case that the ref is not provided, we will create a new one.
+     */
+    var inputRef = useRef(null);
+    /**
+     * (masoudmanson): This is a custom hook that listens for keyboard and mouse events
+     * and adds a 'user-is-tabbing' class to the body element when the user starts
+     * navigating with the keyboard. Unlike button elements which have both :focus
+     * and :focus-visible states available to style separately, input elements have
+     * identical styles for :focus and :focus-visible states. By detecting when the
+     * user is tabbing, we can apply different styles for :focus and :focus-visible states.
+     */
+    useDetectUserTabbing((ref ? ref : inputRef));
     var _c = useState(false), hasValue = _c[0], setHasValue = _c[1];
     var _d = useState(""), value = _d[0], setValue = _d[1];
     var handleChange = function (event) {
@@ -4208,16 +4284,16 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
         console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
         return jsx(Fragment, {});
     }
-    return (jsxs(Fragment, { children: [jsx(StyledLabel$2, { htmlFor: id, children: label }), jsx(StyledSearchBase, __assign({ ref: ref, 
+    return (jsxs(Fragment, { children: [jsx(StyledLabel$2, { htmlFor: id, children: label }), jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef, 
                 // passed to mui Input
                 InputProps: {
-                    endAdornment: (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
+                    endAdornment: (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
                                 sdsType: "iconButton",
                             }, icon: "XMarkCircle" }) })),
-                    startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
+                    startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
                                 sdsType: "interactive",
                             }, icon: "Search" }) })),
-                }, type: "search", id: id, variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, 
+                }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled, 
                 /**
                  * (masoudmanson): This prevents the browser's default auto completion
                  * menu from being displayed for the InputSearch.
@@ -4242,7 +4318,7 @@ var StyledAutocompleteBase = styled(Autocomplete$1, {
     var borders = getBorders(props);
     var semanticTextColors = getSemanticTextColors(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    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(autocompleteClasses.popper, " > .").concat(autocompleteClasses.paper, " {\n        .").concat(autocompleteClasses.listbox, " {\n          max-height: 40vh;\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n          .").concat(autocompleteClasses.option, " {\n            min-height: unset;\n\n            &.").concat(autocompleteClasses.focused, " {\n              background-color: ").concat((_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(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(autocompleteClasses.groupUl, " {\n            border-bottom: none;\n            margin-bottom: 0;\n            padding-bottom: 0;\n          }\n        }\n\n        .").concat(autocompleteClasses.groupLabel, " {\n          top: 0;\n          color: ").concat((_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(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(autocompleteClasses.noOptions, " {\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n          margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        }\n\n        .").concat(autocompleteClasses.loading, " {\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n        }\n      }\n    ");
+    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(autocompleteClasses.popper, " > .").concat(autocompleteClasses.paper, " {\n        .").concat(autocompleteClasses.listbox, " {\n          max-height: 40vh;\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n          .").concat(autocompleteClasses.option, " {\n            min-height: unset;\n\n            &.").concat(autocompleteClasses.focused, " {\n              background-color: ").concat((_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(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(autocompleteClasses.groupUl, " {\n            border-bottom: none;\n            margin-bottom: 0;\n            padding-bottom: 0;\n          }\n        }\n\n        .").concat(autocompleteClasses.groupLabel, " {\n          top: 0;\n          color: ").concat((_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(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(autocompleteClasses.noOptions, " {\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n          margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        }\n\n        .").concat(autocompleteClasses.loading, " {\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n        }\n      }\n    ");
 });
 var InputBaseWrapper$1 = styled("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
@@ -4252,7 +4328,7 @@ var InputBaseWrapper$1 = styled("div", {
         // (thuang): We cannot use `display: none;` here, since
         // the component needs to be in the DOM to handle backdrop
         // click to close the menu
-        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      ";
+        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      ";
     }
 });
 var StyledMenuInputSearch$1 = styled(InputSearch, {
@@ -4279,10 +4355,12 @@ var StyledMenuItemText = styled("div")(templateObject_6$7 || (templateObject_6$7
 var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$7;
 
 var AutocompleteBase = function (props) {
-    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;
+    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;
     var theme = useTheme();
+    var ref = useRef(null);
     var _r = useState(""), inputValue = _r[0], setInputValue = _r[1];
-    return (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, 
+    useDetectUserTabbing(ref);
+    return (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, 
         /**
          * (masoudmanson): Overrides the onOpen and onClose handlers to ensure that
          * the onClick and onClickAway handlers are triggered when a controlled dropdown
@@ -4310,7 +4388,7 @@ var AutocompleteBase = function (props) {
          * the provided onInputChange from props is called at the end to emit the input changes
          * to the user.
          */
-        onInputChange: defaultOnInputChange })));
+        onInputChange: defaultOnInputChange, disabled: disabled || !search })));
     /**
      * (masoudmanson): Using a custom Popper or Paper with the Autocomplete
      * without a useCallback results in scroll jumps while selecting an option!
@@ -4330,20 +4408,32 @@ var AutocompleteBase = function (props) {
         }, []);
     }
     function defaultRenderInput(params) {
-        return (jsx(InputBaseWrapper$1, { search: search, children: jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", label: label, placeholder: label, ref: params.InputProps.ref, search: search, 
+        return (jsx(InputBaseWrapper$1, { search: search, children: jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", "aria-label": "Search Input", 
+                // (masoudmanson): This is to ensure that the input field won't be focusable
+                // when the search prop is set to false.
+                tabIndex: search ? 0 : -1, "aria-hidden": !search, label: label, placeholder: label, ref: params.InputProps.ref, search: search, 
                 // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
                 onKeyDown: function (event) {
                     if (event.key === "Backspace") {
                         event.stopPropagation();
                     }
-                }, InputProps: __assign(__assign({ 
+                }, InputProps: __assign(__assign({}, params.InputProps.ref), { "aria-hidden": !search, endAdornment: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button
+                        // (masoudmanson): This is to ensure that the clear button won't be focusable
+                        // when the search prop is set to false.
+                        , { 
+                            // (masoudmanson): This is to ensure that the clear button won't be focusable
+                            // when the search prop is set to false.
+                            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: {
+                                sdsType: "iconButton",
+                            }, icon: "XMarkCircle" })) })), 
                     /**
                      * (thuang): Works with css caret-color: "transparent" to hide
                      * mobile keyboard
                      */
-                    inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
-                                sdsType: "iconButton",
-                            }, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
+                    inputMode: search ? "text" : "none", inputProps: params.inputProps, startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "Search Button", 
+                            // (masoudmanson): This is to ensure that the search button won't be focusable
+                            // when the search prop is set to false.
+                            tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                 sdsType: "interactive",
                             }, icon: "Search" }) })) }) }, InputBaseProps)) }));
     }
@@ -4547,6 +4637,7 @@ var AutocompleteMultiColumn = function (props) {
     }, [isOpenControlled, open]);
     var anchorRef = useRef(null);
     var _h = React__default.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
+    useDetectUserTabbing(anchorRef);
     useEffect(function () {
         setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
     }, [anchorRef]);
@@ -4588,7 +4679,7 @@ var AutocompleteMultiColumn = function (props) {
                              * inner autocompletes should remain hidden and unfocused when the parent
                              * input is focused. This prevents blurring of the main search input.
                              */
-                            InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
+                            InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false, tabIndex: -1 }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
     function clearInput() {
         setInputValue("");
         /**
@@ -4685,6 +4776,11 @@ var AutocompleteMultiColumn = function (props) {
                 }
                 setPopperOpen(false);
             }
+            else {
+                // (masoudmanson): This is to open the dropdown when the user types in the search input.
+                // especially when the user is tabbing through the input.
+                setPopperOpen(true);
+            }
         }
     }
 };
@@ -5002,11 +5098,14 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
         return jsx(Fragment, { children: children });
     var content = (jsxs(Fragment, { children: [title, sdsStyle === "dark" && subtitle && jsx(Subtitle$1, { children: subtitle })] }));
     var leaveDelay = inverted || sdsStyle === "dark" ? 0 : 500;
-    return (jsx(Tooltip$1, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent, ref: ref }, rest, { 
+    return (jsx(Tooltip$1, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent, 
+        // (masoudmanson): Setting tabIndex to 0 makes the tooltip component
+        // focusable and allows keyboard navigation.
+        tabIndex: 0, ref: ref, 
         // (masoudmanson): SDS Tooltips should always have an arrow
         // and by setting the arrow prop to true, we ensure that
         // the arrow is always rendered.
-        arrow: true })));
+        arrow: true }, rest)));
 });
 function mergeClass$1(_a) {
     var props = _a.props, className = _a.className, key = _a.key;
@@ -5046,10 +5145,10 @@ var verticalAlignToFlexMap = {
 };
 var StyledTableData = styled("td", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
+})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
     var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
     var spaces = getSpaces(props);
-    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    ");
+    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    ");
 });
 var ShouldWrap = function (lineCount) {
     return "\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: ".concat(lineCount, ";\n    -webkit-box-orient: vertical; \n  ");
@@ -5125,7 +5224,7 @@ var CellBasic = forwardRef(function (props, ref) {
 var doNotForwardProps$i = ["horizontalAlign", "verticalAlign"];
 var StyledCellComponentData = styled("td", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
-})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
     var spaces = getSpaces(props);
     var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
     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    ");
@@ -5161,7 +5260,7 @@ var StyledSortingIcon = styled(Icon, {
 });
 var StyledTableHeader$1 = styled("th", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderS, function (props) {
+})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
     var spaces = getSpaces(props);
@@ -5333,7 +5432,7 @@ var StyledPaper$1 = styled(Paper, {
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     var shadows = getShadows(props);
-    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    ");
+    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    ");
 });
 var templateObject_1$z, templateObject_2$k, templateObject_3$c, templateObject_4$b;
 
@@ -5344,9 +5443,9 @@ var DEFAULT_POPPER_BASE_PROPS = {
     disablePortal: true,
 };
 var DropdownMenu = function (props) {
-    var _a;
+    var _a, _b;
     var theme = useTheme();
-    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"]);
+    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"]);
     var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
     // (masoudmanson): The DropdownMenu's Popper component should have a minimum
     // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
@@ -5364,7 +5463,7 @@ var DropdownMenu = function (props) {
             {
                 name: "offset",
                 options: {
-                    offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
+                    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],
                 },
             },
         ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, { 
@@ -5391,20 +5490,20 @@ var inputDropdownStyles = function (props) {
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     var semanticTextColors = getSemanticTextColors(props);
-    var semanticCommonColors = getSemanticComponentColors(props);
+    var semanticComponentColors = getSemanticComponentColors(props);
     /**
      * (masoudmanson)
      * The top/bottom padding is set to 1px less than the actual value to account for the border.
      */
     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");
-    return 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);
+    return 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);
 };
 var minimal$1 = function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
     var spaces = getSpaces(props);
     var semanticTextColors = getSemanticTextColors(props);
-    var semanticCommonColors = getSemanticComponentColors(props);
-    return 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);
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return 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);
 };
 var square$1 = function (props) {
     var corners = getCorners(props);
@@ -5415,18 +5514,22 @@ var rounded$1 = function (props) {
     return 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);
 };
 var userInput$1 = function (props) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
+    var sdsStyle = props.sdsStyle;
     var semanticTextColors = getSemanticTextColors(props);
-    return 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);
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return 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"
+        ? "\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      ")
+        : "");
 };
 var isOpen = function (props) {
     var _a, _b;
     var colors = getColors(props);
     var semanticTextColors = getSemanticTextColors(props);
-    var semanticCommonColors = getSemanticComponentColors(props);
+    var semanticComponentColors = getSemanticComponentColors(props);
     return 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"
         ? "& > span, &:hover > span { color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, "; }")
-        : "", (_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]);
+        : "", (_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]);
 };
 var warning$1 = function (props) {
     var colors = getColors(props);
@@ -5441,8 +5544,8 @@ var error$1 = function (props) {
 var isDisabled = function (props) {
     var _a, _b, _c, _d;
     var semanticTextColors = getSemanticTextColors(props);
-    var semanticCommonColors = getSemanticComponentColors(props);
-    return 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);
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return 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);
 };
 /**
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -5454,7 +5557,7 @@ var isDisabled = function (props) {
  */
 var StyledInputDropdown = styled(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
-})(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) {
+})(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) {
     var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
     return 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));
 });
@@ -5484,9 +5587,9 @@ var StyledCounter = styled("span", {
     var _a, _b;
     var corners = getCorners(props);
     var spaces = getSpaces(props);
-    var semanticCommonColors = getSemanticComponentColors(props);
+    var semanticComponentColors = getSemanticComponentColors(props);
     var semanticTextColors = getSemanticTextColors(props);
-    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    ");
+    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    ");
 });
 var MinimalDetails = styled("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
@@ -5525,7 +5628,7 @@ var InputDropdown = function (props) {
     var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple;
     var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
     var shouldRenderCounter = multiple && counter !== undefined && counter !== "0" && !isMinimal;
-    return (jsxs(StyledInputDropdown, __assign({}, props, { children: [jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
+    return (jsxs(StyledInputDropdown, __assign({}, props, { "aria-label": "Dropdown input", children: [jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
                             counter: counter,
                             details: details,
                             isMinimal: isMinimal,
@@ -5669,7 +5772,7 @@ function createTypeCss(props, type) {
         secondary: generateSecondaryTagColors(intent, colors, semanticColors),
     };
     var typeColors = typeToColors[type];
-    return 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);
+    return 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);
 }
 var typeToCss = {
     primary: primary,
@@ -5705,10 +5808,10 @@ var Tag = function (props) {
 };
 
 var StyledTag = styled(Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
-    return 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);
+    return 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);
 });
 var templateObject_1$w, templateObject_2$h;
 
@@ -6164,7 +6267,7 @@ var StyledCheckbox = styled(Checkbox)(templateObject_1$o || (templateObject_1$o
         warning: "notice",
     };
     var checkboxColor = intentToColor[intent];
-    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(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(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(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(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    ");
+    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(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(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(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(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    ");
 });
 var StyledFormControlLabel$1 = styled(FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
@@ -6244,7 +6347,7 @@ var StyledRadioButton = styled(Radio)(templateObject_1$n || (templateObject_1$n
         warning: "notice",
     };
     var radioColor = intentToColor[intent];
-    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(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(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(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(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    ");
+    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(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(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(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(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    ");
 });
 var StyledFormControlLabel = styled(FormControlLabel)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
@@ -6267,19 +6370,26 @@ var templateObject_1$n, templateObject_2$c, templateObject_3$7, templateObject_4
  * @see https://mui.com/material-ui/react-radio-button/
  */
 var InputRadio = function (props) {
-    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;
+    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;
+    // (masoudmanson): We don't need to pass the label prop to the radio component
+    // so we are destructuring it here.
+    var label = props.label, restProps = __rest(props, ["label"]);
     var newProps;
     switch (stage) {
         case "checked":
-            newProps = __assign(__assign({}, props), { checked: true, color: "primary" });
+            newProps = __assign(__assign({}, restProps), { checked: true, color: "primary" });
             break;
         case "unchecked":
-            newProps = __assign(__assign({}, props), { checked: false, color: "default" });
+            newProps = __assign(__assign({}, restProps), { checked: false, color: "default" });
             break;
         default:
-            newProps = props;
+            newProps = restProps;
     }
-    var finalLabel = caption ? (jsxs(StyledLabelContainer, { children: [jsx(StyledRadioLabel, { children: label }), jsx(StyledRadioCaption, { disabled: disabled, children: caption })] })) : (jsx(StyledLabelContainer, { children: jsx(StyledRadioLabel, { children: label }) }));
+    // (masoudmanson): The id for the label and caption is required for accessibility.
+    // Otherwise, the screen reader will read the label twice!
+    var labelId = "".concat(value, "-label");
+    var captionId = caption ? "".concat(value, "-caption") : undefined;
+    var finalLabel = caption ? (jsxs(StyledLabelContainer, { children: [jsx(StyledRadioLabel, { id: labelId, children: label }), jsx(StyledRadioCaption, { disabled: disabled, id: captionId, children: caption })] })) : (jsx(StyledLabelContainer, { children: jsx(StyledRadioLabel, { id: labelId, children: label }) }));
     return (jsx(StyledFormControlLabel, { control: jsx(StyledRadioButton, __assign({ disabled: disabled, checkedIcon: jsx(SvgIcon, { fillcontrast: "white", component: SvgIconRadioChecked, viewBox: "0 0 16 16" }), icon: jsx(SvgIcon, { fillcontrast: "white", component: SvgIconRadioUnchecked, viewBox: "0 0 16 16" }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
 };
 
@@ -6290,7 +6400,7 @@ var inputSlider = function (props) {
     var shadows = getShadows(props);
     var semanticComponentColors = getSemanticComponentColors(props);
     var semanticTextColors = getSemanticTextColors(props);
-    return "\n    position: relative;\n\n    .".concat(sliderClasses.rail, ",\n    .").concat(sliderClasses.track, " {\n      border-radius: 2px;\n    }\n\n    .").concat(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(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(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(sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      }\n    }\n\n    .").concat(sliderClasses.thumb, "::before {\n      display: none;\n    }\n\n    .").concat(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(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(sliderClasses.mark, " {\n      background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n      opacity: 1;\n    }\n\n    .").concat(sliderClasses.mark, ".").concat(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(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(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  ");
+    return "\n    position: relative;\n\n    .".concat(sliderClasses.rail, ",\n    .").concat(sliderClasses.track, " {\n      border-radius: 2px;\n    }\n\n    .").concat(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(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(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(sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      }\n    }\n\n    .").concat(sliderClasses.thumb, "::before {\n      display: none;\n    }\n\n    .").concat(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(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(sliderClasses.mark, " {\n      background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n      opacity: 1;\n    }\n\n    .").concat(sliderClasses.mark, ".").concat(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(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(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  ");
 };
 var horizontal = function (props) {
     var marks = props.marks;
@@ -6314,7 +6424,8 @@ var templateObject_1$m;
  * @see https://mui.com/material-ui/react-slider/
  */
 var InputSlider = forwardRef(function (props, ref) {
-    return jsx(StyledSlider, __assign({ ref: ref }, props, { orientation: "horizontal" }));
+    var min = props.min, max = props.max, rest = __rest(props, ["min", "max"]);
+    return (jsx(StyledSlider, __assign({ ref: ref, min: min, max: max }, rest, { orientation: "horizontal", "aria-label": "Slider - min ".concat(min, " to max ").concat(max) })));
 });
 
 var sdsPropNames$1 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
@@ -6366,7 +6477,7 @@ var StyledInputBase = styled(TextField, {
     var borders = getBorders(props);
     var corners = getCorners(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    return 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, 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, 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, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
+    return 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, 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, 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, outlinedInputClasses.input, outlinedInputClasses.input, focusVisibleA11yStyle(), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
 });
 var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
 
@@ -6375,6 +6486,19 @@ var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4
  */
 var InputText = forwardRef(function InputText(props, ref) {
     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"]);
+    /**
+     * (masoudmanson): In case that the ref is not provided, we will create a new one.
+     */
+    var inputRef = useRef(null);
+    /**
+     * (masoudmanson): This is a custom hook that listens for keyboard and mouse events
+     * and adds a 'user-is-tabbing' class to the body element when the user starts
+     * navigating with the keyboard. Unlike button elements which have both :focus
+     * and :focus-visible states available to style separately, input elements have
+     * identical styles for :focus and :focus-visible states. By detecting when the
+     * user is tabbing, we can apply different styles for :focus and :focus-visible states.
+     */
+    useDetectUserTabbing((ref ? ref : inputRef));
     var _b = useState(false), hasValue = _b[0], setHasValue = _b[1];
     var handleChange = function (event) {
         if (event.target.value) {
@@ -6393,18 +6517,17 @@ var InputText = forwardRef(function InputText(props, ref) {
         return jsx(Fragment, {});
     }
     var finalLabel = typeof label === "string" ? (jsx(StyledLabel, { htmlFor: id, children: label })) : (label);
-    return (jsxs(Fragment, { children: [!hideLabel && finalLabel, 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))] }));
+    return (jsxs(Fragment, { children: [!hideLabel && finalLabel, 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))] }));
 });
 
 var toggle = function (props) {
-    var _a;
-    var disabled = props.disabled;
+    var _a, _b, _c, _d;
+    var disabled = props.disabled, _e = props.width, width = _e === void 0 ? 62 : _e;
     var corners = getCorners(props);
-    var spaces = getSpaces(props);
     var shadows = getShadows(props);
+    var iconSizes = getIconSizes(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    var TOGGLE_HEIGHT = 18;
-    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(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(switchClasses.checked, " {\n        transform: unset;\n      }\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    .").concat(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(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  ");
+    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(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(switchClasses.input, " {\n        width: 100%;\n        height: 100%;\n        left: 0;\n      }\n\n      &.").concat(switchClasses.checked, " {\n        transform: unset;\n      }\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    .").concat(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(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  ");
 };
 var toggleOn = function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -6414,7 +6537,7 @@ var toggleOn = function (props) {
     var spaces = getSpaces(props);
     var semanticComponentColors = getSemanticComponentColors(props);
     var semanticTextColors = getSemanticTextColors(props);
-    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(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(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 &&
+    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(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(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 &&
         "&: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(switchClasses.thumb, " {\n          color: ").concat(colors === null || colors === void 0 ? void 0 : colors.blue[500], ";\n        }\n      }"), "\n  ");
 };
 var toggleOff = function (props) {
@@ -6426,7 +6549,7 @@ var toggleOff = function (props) {
     var semanticTextColors = getSemanticTextColors(props);
     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(switchClasses.thumb, " {\n      color: ").concat(disabled
         ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled
-        : (_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(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 &&
+        : (_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(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 &&
         "&: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(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  ");
 };
 var Toggle = styled(Switch)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXs$2, function (props) {
@@ -6453,9 +6576,11 @@ var InputToggle = function (props) {
 
 var doNotForwardProps$9 = ["sdsStyle", "sdsSize", "fontWeight"];
 var defaultStyle = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
+    var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
     var semanticTextColors = getSemanticTextColors(props);
-    return 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);
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return 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);
 };
 var dashedStyle = function (props) {
     var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a;
@@ -6471,7 +6596,7 @@ var StyledLink = styled(Link$1, {
     shouldForwardProp: function (prop) {
         return !doNotForwardProps$9.includes(prop.toString());
     },
-})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  all: unset;\n\n  ", "\n"], ["\n  all: unset;\n\n  ", "\n"])), function (props) {
+})(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) {
     var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
     return 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");
 });
@@ -6620,7 +6745,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4, templateObject_4
 
 var LoadingIndicator = function (_a) {
     var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
-    return (jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, children: [jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
+    return (jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
 };
 
 var StyledMenu = styled(Menu$1)(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"])), menuClasses.paper, function (props) {
@@ -6785,7 +6910,7 @@ var StyledTabs$1 = styled(Tabs$1, {
     var _c = props.sdsIndicatorColor, sdsIndicatorColor = _c === void 0 ? "info" : _c;
     var spaces = getSpaces(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    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    ");
+    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(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(tabsClasses.scroller, " {\n        overflow: visible !important;\n      }\n    ");
 });
 var StyledTab$1 = styled(Tab$1, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
@@ -6793,7 +6918,7 @@ var StyledTab$1 = styled(Tab$1, {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    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    ");
+    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    ");
 });
 var templateObject_1$c, templateObject_2$6;
 
@@ -6934,7 +7059,7 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
     return (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) {
             var _b;
             var title = _a.title, elementRef = _a.elementRef;
-            return (jsx(StyledTab$1, __assign({ label: title }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
+            return (jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
                 "navigation-panel-".concat(index + 1))), toKebabCase(title)));
         }) })));
 });
@@ -7041,7 +7166,7 @@ var StyledPaginationChevronList = styled("li", {
     var disabled = props.disabled;
     var spaces = getSpaces(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    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    ");
+    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    ");
 });
 var StyledPagination = styled("ul", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -7061,7 +7186,7 @@ var Page = styled("li", {
     var corners = getCorners(props);
     var semanticComponentColors = getSemanticComponentColors(props);
     var semanticTextColors = getSemanticTextColors(props);
-    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    ");
+    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    ");
 });
 var templateObject_1$a, templateObject_2$4, templateObject_3$2, templateObject_4$1;
 
@@ -7140,6 +7265,22 @@ var usePagination = function (_a) {
     }, [totalCount, pageSize, siblingCount, currentPage]);
 };
 
+var PaginationPageList = function (paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage) {
+    function handlePageKeyDown(event, pageNumber) {
+        if (event.key === "Enter" || event.code === "Space") {
+            onPageChange(pageNumber);
+        }
+    }
+    return paginationRange.map(function (pageNumber) {
+        if (Array.isArray(pageNumber)) {
+            if (truncateDropdown) {
+                return (jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
+            }
+            return (jsx(Page, { sdsStyle: sdsStyle, children: jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }) }, pageNumber.join("-")));
+        }
+        return (jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, onKeyDown: function (event) { return handlePageKeyDown(event, pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, tabIndex: 0, children: pageNumber }, pageNumber));
+    });
+};
 var Pagination = forwardRef(function (props, ref) {
     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;
     if (pageSize < 1) {
@@ -7155,15 +7296,19 @@ var Pagination = forwardRef(function (props, ref) {
         return null;
     }
     var lastPage = paginationRange[paginationRange.length - 1];
-    return (jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, children: jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), paginationRange.map(function (pageNumber) {
-                if (Array.isArray(pageNumber)) {
-                    if (truncateDropdown) {
-                        return (jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
-                    }
-                    return (jsx(Page, { sdsStyle: sdsStyle, children: jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }) }, pageNumber.join("-")));
-                }
-                return (jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, children: pageNumber }, pageNumber));
-            }), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
+    return (jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
+    function handleGoBackButtonKeyDown(event) {
+        if ((event.key === "Enter" || event.code === "Space") &&
+            currentPage > 1) {
+            onPreviousPage();
+        }
+    }
+    function handleGoNextButtonKeyDown(event) {
+        if ((event.key === "Enter" || event.code === "Space") &&
+            currentPage !== lastPage) {
+            onNextPage();
+        }
+    }
 });
 
 var doNotForwardProps$1 = ["buttonDefinition"];
@@ -7173,7 +7318,7 @@ var StyledSegmentedControl = styled(ToggleButtonGroup, {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var spaces = getSpaces(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    return "\n    .".concat(toggleButtonClasses.root, ".").concat(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(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    ");
+    return "\n      .".concat(toggleButtonClasses.root, ".").concat(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(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    ");
 });
 var templateObject_1$8;
 
@@ -7187,7 +7332,7 @@ var SegmentedControl = function (props) {
             setActive(newActive);
         }
     };
-    return (jsxs(StyledSegmentedControl, __assign({ size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
+    return (jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
                 var icon = button.icon, tooltipText = button.tooltipText, value = button.value;
                 var iconItem = function () {
                     if (icon) {
@@ -7199,7 +7344,7 @@ var SegmentedControl = function (props) {
                         }
                     }
                 };
-                return (jsx(ToggleButton, { "aria-label": tooltipText, disableRipple: true, value: value, children: jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : value, sdsStyle: "dark", arrow: true, children: jsx("span", { children: iconItem() }) }) }, value));
+                return (jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : value, sdsStyle: "dark", arrow: true, children: jsx(ToggleButton, { "aria-label": tooltipText, value: value, children: jsx("span", { tabIndex: -1, children: iconItem() }) }) }, value));
             }), ";"] })));
 };
 
@@ -7233,7 +7378,7 @@ var hoverStyled = function (props) {
 };
 var StyledTableRow = styled("tr", {
     shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderS, function (props) {
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
     var _a, _b;
     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;
     var semanticComponentColors = getSemanticComponentColors(props);
@@ -7398,7 +7543,7 @@ var TooltipCondensed = forwardRef(function TooltipCondensed(props, ref) {
         key: "tooltip",
         props: props,
     });
-    return (jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, children: children }));
+    return (jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, children: children }));
 });
 function mergeClass(_a) {
     var props = _a.props, className = _a.className, key = _a.key;