@czi-sds/components 23.3.4 → 23.5.0

package/dist/index.esm.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, Children, isValidElement, useEffect, useRef, useState, useCallback, createElement, cloneElement, useMemo, memo, Fragment as Fragment$1, createContext, useContext } from 'react';
+import React__default, { forwardRef, Children, isValidElement, useEffect, useRef, useState, useCallback, createElement, cloneElement, useMemo, createContext, Fragment as Fragment$1, useContext, memo } from 'react';
 import { css as css$1 } from '@emotion/react';
-import { createTheme, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme, Popper, styled as styled$1, ClickAwayListener, ButtonGroup as ButtonGroup$1, buttonGroupClasses, IconButton, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, alpha, darken as darken$1, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, checkboxClasses, Checkbox, FormControlLabel, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, menuClasses, Menu as Menu$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
+import { createTheme, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme, Popper, styled as styled$1, ClickAwayListener, ButtonGroup as ButtonGroup$1, buttonGroupClasses, IconButton, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, menuClasses, Menu as Menu$1, checkboxClasses, Checkbox, FormControlLabel, Link as Link$1, Chip as Chip$1, alpha, darken as darken$1, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, drawerClasses, popoverClasses, Popover as Popover$1, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
 export { CardMedia as ContentCardMedia } from '@mui/material';
 import styled from '@emotion/styled';
 import { Remove, Clear } from '@mui/icons-material';
 import { css as css$2 } from '@emotion/css';
+import { useReactTable, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import Button$2 from '@mui/material/Button';
 import { useTheme as useTheme$1 } from '@mui/material/styles';
 
@@ -1664,9 +1665,9 @@ const AccordionDetails = (props) => {
     return (jsx(StyledAccordionDetails$1, __assign({ id: id }, rest, { children: children })));
 };
 
-const doNotForwardProps$N = ["chevronSize", "hasInvertedStyle"];
+const doNotForwardProps$M = ["chevronSize", "hasInvertedStyle"];
 const StyledAccordionHeader = styled(AccordionSummary, {
-    shouldForwardProp: (prop) => !doNotForwardProps$N.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$M.includes(prop)
 }) `
   ${fontBodySemiboldL}
   ${(props) => {
@@ -4921,12 +4922,12 @@ const iconMap = {
     }
 };
 
-const doNotForwardProps$M = ["sdsIcon", "sdsSize", "iconColor"];
+const doNotForwardProps$L = ["sdsIcon", "sdsSize", "iconColor"];
 /**
  * @see https://mui.com/material-ui/icons/#svgicon
  */
 const StyledSvgIcon = styled(SvgIcon, {
-    shouldForwardProp: (prop) => !doNotForwardProps$M.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$L.includes(prop)
 }) `
   ${(props) => {
     const mode = getMode(props);
@@ -5199,7 +5200,7 @@ const mergeRefs = (refs) => {
 };
 
 /* eslint-disable sonarjs/cognitive-complexity */
-const doNotForwardProps$L = [
+const doNotForwardProps$K = [
     "sdsType",
     "sdsSize",
     "backgroundOnHover",
@@ -5839,7 +5840,7 @@ const DestructiveButtonStyles = (props) => {
   `;
 };
 const StyledButton$4 = styled(Button$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$L.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$K.includes(prop)
 }) `
   ${focusVisibleA11yStyle}
 
@@ -5917,7 +5918,7 @@ const Button = React__default.forwardRef((props, ref) => {
     return (jsx(StyledButton$4, __assign({ variant: MUI_VARIANT_MAP$1[sdsStyle] || variant, sdsType: sdsType, size: size, iconOnlyChild: iconOnlyChild, ref: ref }, rest, { children: children ? (jsx(StyledChildren, { size: size, children: children })) : null })));
 });
 
-const doNotForwardProps$K = [
+const doNotForwardProps$J = [
     "sdsStyle",
     "intent",
     "handleSubmit",
@@ -6015,7 +6016,7 @@ const StyledLabel$4 = styled("label") `
 `;
 const StyledSearchBase = styled(TextField, {
     shouldForwardProp: (prop) => {
-        return !doNotForwardProps$K.includes(prop.toString());
+        return !doNotForwardProps$J.includes(prop.toString());
     }
 }) `
   ${(props) => {
@@ -6027,6 +6028,8 @@ const StyledSearchBase = styled(TextField, {
     return css$1 `
       min-width: 120px;
       display: block;
+      background-color: ${semanticColors?.base?.backgroundPrimary} !important;
+      border-radius: ${corners?.l}px;
 
       [type="search"]::-webkit-search-cancel-button {
         -webkit-appearance: none;
@@ -6511,7 +6514,7 @@ const InputSearch = forwardRef(function InputSearch(props, ref) {
                 autoComplete: "one-time-code" }, rest))] }));
 });
 
-const doNotForwardProps$J = [
+const doNotForwardProps$I = [
     "count",
     "keepSearchOnSelect",
     "search",
@@ -6521,7 +6524,7 @@ const doNotForwardProps$J = [
     "hasGroupBy",
 ];
 const StyledAutocompleteBase = styled(Autocomplete$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$J.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
 }) `
   + .${autocompleteClasses.popper}
     > .${autocompleteClasses.paper}
@@ -6620,7 +6623,7 @@ const StyledAutocompleteBase = styled(Autocomplete$1, {
 }}
 `;
 const InputBaseWrapper$1 = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$J.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
 }) `
   ${(props) => {
     const { search } = props;
@@ -6642,7 +6645,7 @@ const InputBaseWrapper$1 = styled("div", {
 }}
 `;
 const StyledMenuInputSearch$1 = styled(InputSearch, {
-    shouldForwardProp: (prop) => !doNotForwardProps$J.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
 }) `
   margin: 0;
   .MuiInputBase-root {
@@ -6912,7 +6915,7 @@ const AutocompleteGroup = (props) => {
     }
 };
 
-const doNotForwardProps$I = [
+const doNotForwardProps$H = [
     "anchorEl",
     "count",
     "keepSearchOnSelect",
@@ -6924,7 +6927,7 @@ const doNotForwardProps$I = [
     "ClickAwayListenerProps",
 ];
 const StyledPopper$2 = styled(Popper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop) || prop === "anchorEl"
+    shouldForwardProp: (prop) => !doNotForwardProps$H.includes(prop) || prop === "anchorEl"
 }) `
   ${(props) => {
     const corners = getCorners(props);
@@ -6954,7 +6957,7 @@ const StyledPopper$2 = styled(Popper, {
 }}
 `;
 const StyledPaper$2 = styled(Paper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$H.includes(prop)
 }) `
   ${(props) => {
     const shadows = getShadows(props);
@@ -6974,7 +6977,7 @@ const StyledAutocompleteGroupWrapper = styled("div") `
   display: flex;
 `;
 const StyledAutocompleteInput = styled(InputSearch, {
-    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$H.includes(prop)
 }) `
   ${({ search }) => !search && "height: 0; display: none; margin: 0 !important;"}
 
@@ -7296,9 +7299,9 @@ const secondary$2 = (props) => {
     color: ${semanticColors?.base?.textPrimary};
   `;
 };
-const doNotForwardProps$H = ["sdsType", "textChild", "intent"];
+const doNotForwardProps$G = ["sdsType", "textChild", "intent"];
 const StyledBanner = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$H.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$G.includes(prop)
 }) `
   ${fontBodyS$1}
 
@@ -7370,6 +7373,9 @@ var SDSWarningTypes;
     SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
     SDSWarningTypes["ContentCardActionsOnlyButtons"] = "contentCardActionsOnlyButtons";
     SDSWarningTypes["ClickableContentCardNumberOfButtons"] = "clickableContentCardNumberOfButtons";
+    SDSWarningTypes["SegmentedControlTooltipTextDeprecated"] = "segmentedControlTooltipTextDeprecated";
+    SDSWarningTypes["SegmentedControlMissingIconOrLabel"] = "segmentedControlMissingIconOrLabel";
+    SDSWarningTypes["SegmentedControlIconAndLabelConflict"] = "segmentedControlIconAndLabelConflict";
 })(SDSWarningTypes || (SDSWarningTypes = {}));
 const SDS_WARNINGS = {
     [SDSWarningTypes.ButtonMinimalIsAllCaps]: {
@@ -7427,6 +7433,21 @@ const SDS_WARNINGS = {
     [SDSWarningTypes.ClickableContentCardNumberOfButtons]: {
         hasWarned: false,
         message: "Warning: Clickable Content Cards can only have one or no buttons!"
+    },
+    [SDSWarningTypes.SegmentedControlTooltipTextDeprecated]: {
+        hasWarned: false,
+        message: 'Warning: "tooltipText" in SegmentedControl buttonDefinition is deprecated. ' +
+            'Please use "tooltipProps" instead. Example: { tooltipProps: { title: "My tooltip" } }'
+    },
+    [SDSWarningTypes.SegmentedControlMissingIconOrLabel]: {
+        hasWarned: false,
+        message: 'Warning: Each SegmentedControl button must have either an "icon" or a "label" prop. ' +
+            "A button was found with neither."
+    },
+    [SDSWarningTypes.SegmentedControlIconAndLabelConflict]: {
+        hasWarned: false,
+        message: 'Warning: Each SegmentedControl button should have either an "icon" or a "label", ' +
+            "not both. Please use only one per button."
     }
 };
 const showWarningIfFirstOccurence = (warningType) => {
@@ -7460,7 +7481,7 @@ const ButtonDropdown = React__default.forwardRef((props, ref) => {
 });
 
 /* eslint-disable sonarjs/cognitive-complexity */
-const doNotForwardProps$G = ["sdsType", "sdsStyle", "backgroundAppearance"];
+const doNotForwardProps$F = ["sdsType", "sdsStyle", "backgroundAppearance"];
 /**
  * General styles for the ButtonGroup component
  * Uses CSS borders for styling (with box-sizing: border-box to maintain dimensions)
@@ -7474,6 +7495,10 @@ const GeneralButtonGroupStyles = (props) => {
       min-width: fit-content;
       z-index: 1;
 
+      &::before {
+        border-radius: inherit;
+      }
+
       &:hover,
       &:active,
       &:focus {
@@ -7580,10 +7605,11 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7591,8 +7617,10 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       ${theme?.breakpoints?.down("md")} {
         padding: 0 14px;
@@ -7658,10 +7686,11 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7669,8 +7698,10 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       padding: 0 10px;
     }
@@ -7734,10 +7765,11 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7745,8 +7777,10 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       padding: 0 ${spaces?.s}px;
     }
@@ -7795,6 +7829,7 @@ const PrimaryButtonGroupStyles = (props) => {
     && .${buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${defaultColor};
 
       svg {
@@ -7806,6 +7841,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${hoverColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${hoverColor};
+      box-shadow: none;
 
       svg {
         color: ${hoverColor};
@@ -7816,6 +7852,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${pressedColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${pressedColor};
+      box-shadow: none;
 
       svg {
         color: ${pressedColor};
@@ -7830,6 +7867,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -7883,6 +7921,7 @@ const SecondaryButtonGroupStyles = (props) => {
     && .${buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${textColor};
 
       svg {
@@ -7894,6 +7933,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7904,6 +7944,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${pressedBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7918,6 +7959,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -7926,7 +7968,7 @@ const SecondaryButtonGroupStyles = (props) => {
   `;
 };
 const StyledButtonGroup = styled(ButtonGroup$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$G.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$F.includes(prop)
 }) `
   ${(props) => {
     const { sdsType = "primary", size = "large" } = props;
@@ -8114,10 +8156,6 @@ const small$1 = (props) => {
     const iconSizes = getIconSizes(props);
     const spaces = getSpaces(props);
     return css$1 `
-    ${sdsType !== "tertiary"
-        ? `margin: 0 ${spaces?.xxs}px ${spaces?.xxs}px 0;`
-        : ""}
-
     .MuiSvgIcon-root {
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
@@ -8157,7 +8195,7 @@ const large = (props) => {
     }
   `;
 };
-const doNotForwardProps$F = [
+const doNotForwardProps$E = [
     "on",
     "sdsSize",
     "sdsType",
@@ -8167,7 +8205,7 @@ const doNotForwardProps$F = [
     "customTheme",
 ];
 const StyledButtonIcon = styled(IconButton, {
-    shouldForwardProp: (prop) => !doNotForwardProps$F.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$E.includes(prop)
 }) `
   padding: 0;
   ${focusVisibleA11yStyle}
@@ -8232,7 +8270,7 @@ const ButtonIcon = forwardRef(function ButtonIcon(props, ref) {
  * All other props should be passed down to Button; otherwise,
  * the component won’t function as expected.
  */
-const doNotForwardProps$E = ["sdsStage"];
+const doNotForwardProps$D = ["sdsStage"];
 /**
  * Utility to select the appropriate color based on background appearance.
  * Returns the dark variant when backgroundAppearance is "dark", otherwise returns the light variant.
@@ -8260,34 +8298,49 @@ const StageOnStyles = (props) => {
     // So we need to apply the "on" state background to ::before as well
     const isSecondary = sdsType === "secondary";
     if (isSecondary) {
+        /**
+         * Specificity boost via Emotion's `&&&&` technique.
+         *
+         * Each `&` repeats the component's generated class, producing a selector
+         * like `.css-abc123.css-abc123.css-abc123.css-abc123` — specificity (0,4,0).
+         *
+         * This is needed because ButtonGroup styles its children with
+         * `&& .MuiButtonGroup-grouped` which has specificity (0,3,0).
+         * Without the boost, the sdsStage="on" styles would always lose
+         * the cascade to the ButtonGroup's parent-level overrides.
+         */
         return css$1 `
-      color: ${contentColor};
+      &&&& {
+        color: ${contentColor};
 
-      svg {
-        color: ${ornamentColor};
-      }
+        svg {
+          color: ${ornamentColor};
+        }
 
-      /* Apply "on" state background via ::before to match Button's hover pattern */
-      &::before {
-        background-color: ${sdsStyle === "minimal" && !backgroundOnHover
+        /* Apply "on" state background via ::before to match Button's hover pattern */
+        &::before {
+          background-color: ${sdsStyle === "minimal" && !backgroundOnHover
             ? "transparent"
             : backgroundColor};
+        }
       }
     `;
     }
     return css$1 `
-    background-color: ${sdsStyle === "minimal" && !backgroundOnHover
+    &&&& {
+      background-color: ${sdsStyle === "minimal" && !backgroundOnHover
         ? "transparent"
         : backgroundColor};
-    color: ${contentColor};
+      color: ${contentColor};
 
-    svg {
-      color: ${ornamentColor};
+      svg {
+        color: ${ornamentColor};
+      }
     }
   `;
 };
 const StyledButtonToggle = styled(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$E.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$D.includes(prop)
 }) `
   ${(props) => {
     const { sdsStage } = props;
@@ -8306,7 +8359,7 @@ const ButtonToggle = React__default.forwardRef((props, ref) => {
     return (jsx(StyledButtonToggle, __assign({}, rest, { startIcon: startIcon, endIcon: null, backgroundOnHover: true, ref: ref })));
 });
 
-const doNotForwardProps$D = [
+const doNotForwardProps$C = [
     "isAllCaps",
     "isRounded",
     "sdsStyle",
@@ -8497,7 +8550,7 @@ const DestructiveButton = (props) => {
   `;
 };
 const StyledButton$2 = styled(Button$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$D.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$C.includes(prop)
 }) `
   ${focusVisibleA11yStyle}
 
@@ -8603,7 +8656,7 @@ const SecondaryMinimalButton = (props) => {
   `;
 };
 const StyledMinimalButton = styled(Button$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$D.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$C.includes(prop)
 }) `
   ${(props) => {
     const { sdsType } = props;
@@ -8614,7 +8667,7 @@ const StyledMinimalButton = styled(Button$1, {
 }}
 `;
 const StyledButtonLegacy = styled(Button$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$D.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$C.includes(prop)
 }) `
   ${focusVisibleA11yStyle}
   ${(props) => {
@@ -8721,9 +8774,9 @@ const ButtonDropdownLegacy = React__default.forwardRef((props, ref) => {
  * All other props should be passed down to ButtonIcon; otherwise,
  * the component won’t function as expected.
  */
-const doNotForwardProps$C = ["sdsStage"];
+const doNotForwardProps$B = ["sdsStage"];
 const StyledButtonToggleLegacy = styled(ButtonIcon, {
-    shouldForwardProp: (prop) => !doNotForwardProps$C.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$B.includes(prop)
 }) `
   ${(props) => {
     const { sdsStage } = props;
@@ -8749,7 +8802,7 @@ const ButtonToggleLegacy = React__default.forwardRef((props, ref) => {
     }
 });
 
-const doNotForwardProps$B = [
+const doNotForwardProps$A = [
     "calloutTitle",
     "collapsed",
     "severity",
@@ -8757,7 +8810,7 @@ const doNotForwardProps$B = [
     "hideBody",
 ];
 const StyledCallout = styled(Alert$2, {
-    shouldForwardProp: (prop) => !doNotForwardProps$B.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$A.includes(prop)
 }) `
   ${fontBodyXs$2}
 
@@ -8938,9 +8991,9 @@ const tableStyles = (props) => {
     padding: ${spaces?.m}px;
   `;
 };
-const doNotForwardProps$A = ["hasInvertedStyle", "textAlign"];
+const doNotForwardProps$z = ["hasInvertedStyle", "textAlign"];
 const StyledTitle = styled("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$A.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
 }) `
   ${fontBodyMediumXs}
 
@@ -8954,7 +9007,7 @@ const StyledTitle = styled("p", {
 }}
 `;
 const StyledSubtitle = styled("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$A.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
 }) `
   ${fontBodyXxs$1}
 
@@ -9145,209 +9198,176 @@ function mergeClass$1({ props, className, key, }) {
     return propClassName ? `${propClassName} ${className}` : className;
 }
 
-const doNotForwardProps$z = [
-    "icon",
-    "iconVerticalAlign",
-    "horizontalAlign",
-    "verticalAlign",
-    "primaryText",
-    "secondaryText",
-    "tertiaryText",
-    "shouldTextWrap",
+const StyledTable = styled("table") `
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: auto;
+`;
+
+const Table = forwardRef((props, ref) => {
+    const { children } = props;
+    return (jsx(StyledTable, __assign({ ref: ref }, props, { children: children })));
+});
+
+const doNotForwardProps$y = [
+    "rowHeight",
+    "useDivider",
     "shouldShowTooltipOnHover",
     "tooltipProps",
-    "primaryTextWrapLineCount",
-    "secondaryTextWrapLineCount",
-    "tertiaryTextWrapLineCount",
-    "primaryTextComponentSlotBottom",
-    "primaryTextComponentSlotRight",
-    "tabularNums",
+    "tooltipSubtitle",
+    "tooltipText",
+    "hover",
 ];
-const TABULAR_NUMS = "tabular-nums";
-const verticalAlignCSSMap = {
-    bottom: "bottom",
-    center: "middle",
-    top: "top"
-};
-const verticalAlignToFlexMap = {
-    bottom: "flex-end",
-    center: "center",
-    top: "flex-start"
-};
-const StyledTableData = styled("td", {
-    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
-}) `
-  ${fontBodyS$1}
-  ${focusVisibleA11yStyle}
-
-  ${(props) => {
-    const { horizontalAlign = "left", verticalAlign = "top" } = props;
-    const spaces = getSpaces(props);
-    return `
-        padding: ${spaces?.l}px ${spaces?.m}px;
-        text-align: ${horizontalAlign};
-        vertical-align: ${verticalAlignCSSMap[verticalAlign]};
-        overflow: hidden;
-    `;
-}}
-`;
-const ShouldWrap = (lineCount) => {
+const disabledStyled$1 = (props) => {
+    const semanticColors = getSemanticColors(props);
     return `
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: ${lineCount};
-    -webkit-box-orient: vertical; 
-    word-break: break-all;
+    background-color: ${semanticColors?.base?.backgroundSecondary};
+    color: ${semanticColors?.base?.textDisabled};
+    user-select: none;
+
+    &:hover {
+      background-color: ${semanticColors?.base?.backgroundSecondary};
+      color: ${semanticColors?.base?.textDisabled};
+    }
+
+    & span, & div {
+      color: ${semanticColors?.base?.textDisabled};
+      background-color: transparent !important;
+    }
+
+    .cell-component {
+      color: ${semanticColors?.base?.textDisabled};
+      pointer-events: none;
+      user-select: none;
+      & div {
+        color: ${semanticColors?.base?.textDisabled};
+        background-color: transparent;
+      }
+
+      & .MuiChip-root {
+        background-color: ${semanticColors?.base?.fillDisabled};
+        box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryDisabled} !important;
+
+        & span {
+          color: ${semanticColors?.base?.textDisabled} !important;
+        }
+      }
+
+      svg {
+        fill: ${semanticColors?.base?.ornamentDisabled};
+      }
+
+      filter: grayscale(100%);
+    }
   `;
 };
-const ShouldTruncate$1 = () => {
+const hoverStyled = (props) => {
+    const { selected } = props;
+    const semanticColors = getSemanticColors(props);
     return `
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    word-break: break-all;
+    &:hover {
+      td, th {
+        position: relative;
+        background-color: ${selected ? semanticColors?.accent?.surfaceSecondary : semanticColors?.base?.backgroundPrimary};
+
+        &:before {
+          background-color: ${semanticColors?.base?.fillPrimaryInteraction};
+        }
+      }
+    }
   `;
 };
-const StyledCellContent = styled("div") `
-  display: flex;
-`;
-const StyledCellContentWrapper = styled("div") `
-  width: 100%;
-`;
-const StyledCellIconWrapper = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
-}) `
-  ${(props) => {
-    const { iconVerticalAlign = "top" } = props;
-    const spaces = getSpaces(props);
-    return `
-      padding-right: ${spaces?.l}px;
-      display: flex;
-      flex-direction: column;
-      justify-content: ${verticalAlignToFlexMap[iconVerticalAlign]};
-    `;
-}}
-`;
-const PrimaryTextWrapper = styled("div") `
-  ${(props) => {
-    const { horizontalAlign } = props;
+const selectedStyled = (props) => {
+    const semanticColors = getSemanticColors(props);
     return `
-      display: flex;
-      justify-content: ${horizontalAlign === "left" ? "flex-start" : "flex-end"};
-    `;
-}}
-`;
-const PrimaryText = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
-}) `
-  ${fontBodyS$1}
+    td, th {
+      &:before {
+        background-color: ${semanticColors?.accent?.surfaceSecondary};
+      }
 
-  ${(props) => {
-    const { primaryTextWrapLineCount = 3, tabularNums = false } = props;
-    return `
-      display: block;
-      font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
-      
-      ${props.shouldTextWrap
-        ? ShouldWrap(primaryTextWrapLineCount)
-        : ShouldTruncate$1()}
-    `;
-}}
-`;
-const SecondaryText = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
+      background-color: ${semanticColors?.base?.fillPrimaryInteraction};
+    }
+  `;
+};
+const StyledTableRow = styled("tr", {
+    shouldForwardProp: (prop) => !doNotForwardProps$y.includes(prop)
 }) `
-  ${fontBodyXxs$1}
+  ${fontHeaderS}
+  ${focusVisibleA11yStyle}
 
   ${(props) => {
-    const { secondaryTextWrapLineCount = 1, tabularNums = false } = props;
-    const spaces = getSpaces(props);
+    const { rowHeight, useDivider = true, selected = false, disabled = false, hover = true, } = props;
     const semanticColors = getSemanticColors(props);
     return `
-      display: block;
-      color: ${semanticColors?.base?.textSecondary};
-      padding-top: ${spaces?.xxxs}px;
-      font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      align-items: center;
+      position: relative;
+      margin: 0;
+      padding: 0;
+      display: table-row;
 
-      ${props.shouldTextWrap
-        ? ShouldWrap(secondaryTextWrapLineCount)
-        : ShouldTruncate$1()}
-    `;
-}}
-`;
-const TertiaryText = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
-}) `
-  ${fontBodyXxs$1}
+      ${useDivider &&
+        `
+          &:after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background-color: ${semanticColors?.base?.borderSecondary};
+            z-index: 1;
+          }
+        `}
 
-  ${(props) => {
-    const { tertiaryTextWrapLineCount = 1, tabularNums = false } = props;
-    const spaces = getSpaces(props);
-    const semanticColors = getSemanticColors(props);
-    return `
-      display: block;
-      color: ${semanticColors?.base?.textSecondary};
-      padding-top: ${spaces?.s}px;
-      font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      td, th {
+        margin: 0;
+        padding: 0;
+        position: sticky !important;
+        background-color: ${semanticColors?.base?.backgroundPrimary};
 
-      ${props.shouldTextWrap
-        ? ShouldWrap(tertiaryTextWrapLineCount)
-        : ShouldTruncate$1()}
-    `;
-}}
-`;
-const PrimaryTextComponentSlotBottomWrapper = styled("div") `
-  ${(props) => {
-    const spaces = getSpaces(props);
-    return `
-      margin-top: ${spaces?.xxs}px;
-    `;
-}}
-`;
-const PrimaryTextComponentSlotRightWrapper = styled("div") `
-  ${(props) => {
-    const spaces = getSpaces(props);
-    return `
-      margin-left: ${spaces?.xs}px;
+        &:before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: -1;
+          background-color: ${semanticColors?.base?.backgroundPrimary};
+        }
+      }
+
+      ${rowHeight ? `max-height: ${rowHeight}px;` : ""}
+      ${hover && hoverStyled(props)};
+      ${selected && selectedStyled(props)};
+      ${disabled && disabledStyled$1(props)}
     `;
 }}
 `;
 
-const CellBasicContent = (props) => {
-    const { primaryText, primaryTextWrapLineCount, secondaryText, secondaryTextWrapLineCount, tertiaryText, tertiaryTextWrapLineCount, shouldTextWrap = true, icon, iconVerticalAlign, primaryTextComponentSlotRight, primaryTextComponentSlotBottom, horizontalAlign = "left", tabularNums = false, } = props;
-    return (jsxs(StyledCellContent, { children: [icon && (jsx(StyledCellIconWrapper, { iconVerticalAlign: iconVerticalAlign, children: icon })), jsxs(StyledCellContentWrapper, { children: [jsxs(PrimaryTextWrapper, { horizontalAlign: horizontalAlign, children: [jsx(PrimaryText, { shouldTextWrap: shouldTextWrap, primaryTextWrapLineCount: primaryTextWrapLineCount, tabularNums: tabularNums, children: primaryText }), primaryTextComponentSlotRight && (jsx(PrimaryTextComponentSlotRightWrapper, { children: primaryTextComponentSlotRight }))] }), !secondaryText && !tertiaryText && primaryTextComponentSlotBottom && (jsx(PrimaryTextComponentSlotBottomWrapper, { children: primaryTextComponentSlotBottom })), secondaryText && (jsx(SecondaryText, { shouldTextWrap: shouldTextWrap, secondaryTextWrapLineCount: secondaryTextWrapLineCount, tabularNums: tabularNums, children: secondaryText })), tertiaryText && (jsx(TertiaryText, { shouldTextWrap: shouldTextWrap, tertiaryTextWrapLineCount: tertiaryTextWrapLineCount, tabularNums: tabularNums, children: tertiaryText }))] })] }));
-};
-const CellBasic = forwardRef((props, ref) => {
-    const { primaryText, secondaryText, shouldShowTooltipOnHover = true, tooltipProps, } = props;
-    if (shouldShowTooltipOnHover) {
-        return (jsx(Tooltip, __assign({ title: primaryText, subtitle: secondaryText, arrow: true, leaveDelay: 0, leaveTouchDelay: 0, sdsStyle: "dark" }, tooltipProps, { children: jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsx(CellBasicContent, __assign({}, props)) })) })));
+const TableRow = forwardRef((props, ref) => {
+    const { children, shouldShowTooltipOnHover = true, tooltipProps, tooltipText = false, tooltipSubtitle, hover = true, } = props;
+    if (shouldShowTooltipOnHover && hover) {
+        return (jsx(Tooltip, __assign({ arrow: true, sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })) })));
     }
-    return (jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsx(CellBasicContent, __assign({}, props)) })));
+    return (jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })));
 });
 
-const doNotForwardProps$y = ["horizontalAlign", "verticalAlign"];
-const StyledCellComponentData = styled("td", {
-    shouldForwardProp: (prop) => !doNotForwardProps$y.includes(prop)
-}) `
-  ${fontBodyS$1}
-  ${focusVisibleA11yStyle}
-
+const StyledTableHeader$1 = styled("thead") `
   ${(props) => {
-    const spaces = getSpaces(props);
-    const { horizontalAlign = "left", verticalAlign = "top" } = props;
+    const semanticColors = getSemanticColors(props);
     return `
-      align-items: center;
-      text-align: ${horizontalAlign};
-      vertical-align: ${verticalAlign};
-      overflow: hidden;
-      padding: ${spaces?.l}px ${spaces?.m}px;
+      border-bottom: solid 2px ${semanticColors?.base?.borderSecondary};
+      margin: 0;
+      padding: 0;
     `;
 }}
 `;
 
-const CellComponent = forwardRef((props, _) => {
-    const { children, ...rest } = props;
-    return (jsx(StyledCellComponentData, __assign({ className: "cell-component" }, rest, { children: children })));
+const TableHeader = forwardRef((props, ref) => {
+    const { children } = props;
+    return (jsx(StyledTableHeader$1, __assign({ ref: ref }, props, { children: jsx(TableRow, { hover: false, shouldShowTooltipOnHover: false, children: children }) })));
 });
 
 const contentPositionMapping = {
@@ -9381,7 +9401,7 @@ const StyledSortingIcon = styled(Icon, {
     `;
 }}
 `;
-const ShouldTruncate = () => {
+const ShouldTruncate$1 = () => {
     return `
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -9389,9 +9409,7 @@ const ShouldTruncate = () => {
     word-break: break-all;
   `;
 };
-const StyledTableHeader$1 = styled("th", {
-    shouldForwardProp: (prop) => !doNotForwardProps$x.includes(prop)
-}) `
+const StyledTableHeader = styled.div `
   ${fontHeaderS}
   ${focusVisibleA11yStyle}
 
@@ -9407,9 +9425,8 @@ const StyledTableHeader$1 = styled("th", {
         : semanticColors?.base?.textPrimary;
     return `
       color: ${defaultColor};
-      padding: ${spaces?.l}px ${spaces?.m}px;
+      padding: ${spaces?.m}px !important;
       text-align: ${horizontalAlign};
-      min-width: 96px;
       cursor: ${hover ? "pointer" : "default"};
       vertical-align: bottom;
 
@@ -9439,7 +9456,7 @@ const StyledCellHeaderText = styled("div", {
   ${(props) => {
     const { shouldTruncate = false } = props;
     return `
-      ${shouldTruncate && ShouldTruncate()}
+      ${shouldTruncate && ShouldTruncate$1()}
     `;
 }}
 `;
@@ -9463,86 +9480,1298 @@ const CellHeaderContent = (props) => {
     const sortIcon = (jsx(StyledSortingIcon, { "aria-label": direction === "asc"
             ? "Change sort direction from ascending to descending"
             : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
-    return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx(StyledCellHeaderText, { shouldTruncate: shouldTruncate, children: children }), (!hideSortIcon || active) && hover && sortIcon] }));
+    return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [typeof children === "string" || typeof children === "number" ? (jsx(StyledCellHeaderText, { shouldTruncate: shouldTruncate, children: children })) : (children), (!hideSortIcon || active) && hover && sortIcon] }));
 };
 const CellHeader = forwardRef((props, ref) => {
-    const { children, shouldShowTooltipOnHover = false, tooltipProps, tooltipText = "", tooltipSubtitle, hover = false, ...rest } = props;
+    const { as = "th", children, shouldShowTooltipOnHover = false, tooltipProps, tooltipText = "", tooltipSubtitle, hover = false, ...rest } = props;
     if (shouldShowTooltipOnHover && hover) {
-        return (jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsx(CellHeaderContent, __assign({}, props, { hover: hover, children: children })) })) })));
+        return (jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsx(StyledTableHeader, __assign({ as: as, ref: ref, hover: hover }, rest, { children: jsx(CellHeaderContent, __assign({}, props, { hover: hover, children: children })) })) })));
     }
-    return (jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsx(CellHeaderContent, __assign({ hover: hover }, props, { children: children })) })));
+    return (jsx(StyledTableHeader, __assign({ as: as, ref: ref, hover: hover }, rest, { children: jsx(CellHeaderContent, __assign({ hover: hover }, props, { children: children })) })));
 });
 
-const small = (props) => {
-    const spaces = getSpaces(props);
-    return css$1 `
-    height: ${spaces?.l}px;
-    padding: ${spaces?.xxs}px ${spaces?.xs}px;
+const doNotForwardProps$w = [
+    "sdsStyle",
+    "selected",
+    "onPageChange",
+    "onNextPage",
+    "onPreviousPage",
+    "goToPage",
+    "totalCount",
+    "siblingCount",
+    "currentPage",
+    "pageSize",
+    "truncateDropdown",
+];
+const StyledPaginationButton = styled(Button) `
+  ${(props) => {
+    const semanticColors = getSemanticColors(props);
+    return `
+      width: 28px;
+      height: 28px;
+      cursor: "pointer";
 
-    .MuiChip-label {
-      ${fontCapsXxxxs(props)}
-      padding: 0;
-    }
-  `;
-};
-const medium = (props) => {
-    const spaces = getSpaces(props);
-    const colors = getColors(props);
-    return css$1 `
-    margin: 0 ${spaces?.s}px;
-    height: 24px;
+      & .MuiSvgIcon-root {
+        width: 12px;
+        color: ${semanticColors?.base?.ornamentSecondary};
+      }
 
-    background-color: ${colors?.blue[400]};
+      &:hover {
+        & .MuiSvgIcon-root {
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction}
+        }
+      }
+    `;
+}}
+`;
+const StyledPaginationChevronList = styled("li", {
+    shouldForwardProp: (prop) => !doNotForwardProps$w.includes(prop)
+}) `
+  ${(props) => {
+    const { disabled, sdsStyle } = props;
+    const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
+    const corners = getCorners(props);
+    return `
+      width: 28px;
+      height: 28px;
+      cursor: ${disabled ? "auto" : "pointer"};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: ${sdsStyle === "round" ? corners?.rounded : corners?.m}px;
 
-    &:hover {
-      background-color: ${colors?.blue[500]};
-    }
+      &[data-order="first"] {
+        margin-right: ${spaces?.m}px;
+      }
 
-    &:active {
-      background-color: ${colors?.blue[600]};
-    }
+      &[data-order="last"] {
+        margin-left: ${spaces?.m}px;
+      }
 
-    .MuiChip-label {
-      ${fontHeaderXs(props)}
-      color: white;
-      padding-left: ${spaces?.s}px;
-    }
+      & .MuiSvgIcon-root {
+        color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondary};
+      }
 
-    .MuiChip-deleteIcon {
-      color: white;
-      padding-right: ${spaces?.xxs}px;
-      margin: 0 0 0 -${spaces?.s}px;
-      height: ${spaces?.l}px;
-      width: ${spaces?.l}px;
+      &:hover {
+        background-color: ${disabled ? "transparent" : semanticColors?.base?.fillPrimaryInteraction};
 
-      &:hover,
-      &:focus-visible {
-        color: white;
+        & .MuiSvgIcon-root {
+          color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryInteraction}
+        }
       }
-    }
-  `;
-};
-const rounded$2 = (props) => {
-    const corners = getCorners(props);
+
+      ${focusVisibleA11yStyle(props)}
+    `;
+}}
+`;
+const StyledPagination = styled("ul", {
+    shouldForwardProp: (prop) => !doNotForwardProps$w.includes(prop)
+}) `
+  ${fontBodyS$1}
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+  & li {
+    list-style: none;
+  }
+`;
+const selectedPageStyle = (props) => {
+    const semanticColors = getSemanticColors(props);
     return css$1 `
-    border-radius: ${corners?.rounded}px;
+    background-color: ${semanticColors?.base?.fillPrimaryInteraction};
+    color: ${semanticColors?.base?.textPrimary};
+    box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
+
+    &:hover {
+      box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
+    }
+
+    ${fontTabularSemiboldS(props)}
   `;
 };
-const square$2 = (props) => {
+const Page = styled("li", {
+    shouldForwardProp: (prop) => !doNotForwardProps$w.includes(prop)
+}) `
+  ${fontTabularMediumS}
+
+  ${(props) => {
+    const { selected, sdsStyle } = props;
+    const spaces = getSpaces(props);
     const corners = getCorners(props);
+    const semanticColors = getSemanticColors(props);
     return css$1 `
-    border-radius: ${corners?.m}px;
-  `;
-};
-const success = (props) => {
-    return createStatusCss(props, "success");
-};
-const error = (props) => {
-    return createStatusCss(props, "error");
-};
-const beta = (props) => {
-    return createStatusCss(props, "beta");
-};
+      color: ${semanticColors?.base?.textSecondary};
+      cursor: pointer;
+      list-style: none;
+      padding: 0 ${spaces?.s}px;
+      min-width: 28px;
+      height: 28px;
+      margin-right: ${spaces?.s}px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: ${sdsStyle === "round" ? corners?.rounded : corners?.l}px;
+      user-select: none;
+      &:hover {
+        background-color: ${semanticColors?.base?.fillPrimaryInteraction};
+        color: ${semanticColors?.base?.textPrimary};
+      }
+
+      &:nth-last-of-type(-n + 2) {
+        margin-right: 0;
+      }
+
+      ${selected && selectedPageStyle(props)}
+      ${focusVisibleA11yStyle(props)}
+    `;
+}}
+`;
+const StyledPage = styled(Page) `
+  width: 28px;
+  max-width: 28px;
+`;
+
+const StyledMenu = styled(Menu$1) `
+  & {
+    .${menuClasses.paper} {
+      ${(props) => {
+    const spaces = getSpaces(props);
+    const corners = getCorners(props);
+    const semanticColors = getSemanticColors(props);
+    return `
+          background-color: ${semanticColors?.base?.surfacePrimary};
+          background-image: none;
+          padding: ${spaces?.xs}px;
+          border-radius: ${corners?.l}px;
+        `;
+}}
+    }
+
+    .MuiList-padding {
+      padding: 0;
+    }
+  }
+`;
+
+const ANCHOR_ORIGIN = {
+    horizontal: "center",
+    vertical: "bottom"
+};
+const TRANSFORM_ORIGIN = {
+    horizontal: "center",
+    vertical: "top"
+};
+/**
+ * @see https://mui.com/material-ui/react-menu/
+ */
+const Menu = (props) => {
+    return (jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
+};
+
+const StyledPaginationDropdownMenu = styled(Menu) `
+  & .MuiPaper-root {
+    max-height: 120px;
+  }
+`;
+
+const PageListDropdown = (props) => {
+    const { pageList, onPageChange, sdsStyle } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (jsxs(StyledPage, { sdsStyle: sdsStyle, children: [jsx(StyledPaginationButton, { "aria-label": "Go to a page", onClick: handleClick, size: "small", sdsStyle: "minimal", sdsType: "secondary", backgroundOnHover: false, children: jsx(Icon, { sdsIcon: "DotsHorizontal", sdsSize: "s" }) }), jsx(StyledPaginationDropdownMenu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: pageList.map((page) => {
+                    return (jsx(MenuItem, { onClick: () => {
+                            onPageChange(page);
+                            handleClose();
+                        }, sdsType: "action", children: page }, page));
+                }) })] }));
+};
+
+const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, idx) => idx + start);
+};
+const usePagination = ({ totalCount, pageSize, siblingCount = 1, currentPage, }) => {
+    return useMemo(() => {
+        const totalPageCount = Math.ceil(totalCount / pageSize);
+        // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
+        const totalPageNumbers = siblingCount + 5;
+        /*
+          If the number of pages is less than the page numbers we want to show in our
+          paginationComponent, we return the range [1..totalPageCount]
+        */
+        if (totalPageNumbers >= totalPageCount) {
+            return range(1, totalPageCount);
+        }
+        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPageCount);
+        /*
+          We do not want to show dots if there is only one position left
+          after/before the left/right page count as that would lead to a change of our Pagination
+          component size which we do not want
+        */
+        const shouldShowLeftDots = leftSiblingIndex > 2;
+        const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+        const firstPageIndex = 1;
+        const lastPageIndex = totalPageCount;
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            const leftItemCount = 3 + 2 * siblingCount;
+            const leftRange = range(1, leftItemCount);
+            const rightDotsRange = range(leftItemCount + 1, totalPageCount - 1);
+            return [...leftRange, rightDotsRange, totalPageCount];
+        }
+        if (shouldShowLeftDots && !shouldShowRightDots) {
+            const rightItemCount = 3 + 2 * siblingCount;
+            const rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
+            const leftDotsRange = range(2, totalPageCount - rightItemCount);
+            return [firstPageIndex, leftDotsRange, ...rightRange];
+        }
+        if (shouldShowLeftDots && shouldShowRightDots) {
+            const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+            const leftDotsRange = range(2, leftSiblingIndex - 1);
+            const rightDotsRange = range(rightSiblingIndex + 1, totalPageCount - 1);
+            return [
+                firstPageIndex,
+                leftDotsRange,
+                ...middleRange,
+                rightDotsRange,
+                lastPageIndex,
+            ];
+        }
+    }, [totalCount, pageSize, siblingCount, currentPage]);
+};
+
+const PaginationPageList = (paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage) => {
+    function handlePageKeyDown(event, pageNumber) {
+        if (event.key === "Enter" || event.code === "Space") {
+            onPageChange(pageNumber);
+        }
+    }
+    return paginationRange.map((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, size: "small", sdsStyle: "minimal", sdsType: "primary", children: jsx(Icon, { sdsIcon: "DotsHorizontal", sdsSize: "s" }) }) }, pageNumber.join("-")));
+        }
+        return (jsx(Page, { onClick: () => onPageChange(pageNumber), onKeyDown: (event) => handlePageKeyDown(event, pageNumber), selected: pageNumber === currentPage, sdsStyle: sdsStyle, tabIndex: 0, children: pageNumber }, pageNumber));
+    });
+};
+const Pagination = forwardRef((props, ref) => {
+    const { sdsStyle = "round", onPageChange, onNextPage, onPreviousPage, totalCount, siblingCount = 1, currentPage, pageSize, truncateDropdown = true, } = props;
+    if (pageSize < 1) {
+        throw new Error("PageSize can not be smaller than 1!");
+    }
+    const paginationRange = usePagination({
+        currentPage,
+        pageSize,
+        siblingCount,
+        totalCount
+    }) || [];
+    if (currentPage === 0 || paginationRange.length < 2) {
+        return null;
+    }
+    const lastPage = paginationRange[paginationRange.length - 1];
+    return (jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: () => currentPage > 1 && onPreviousPage(), onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, sdsStyle: sdsStyle, children: jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: () => currentPage !== lastPage && onNextPage(), onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, sdsStyle: sdsStyle, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs" }) }, "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();
+        }
+    }
+});
+
+const intentToColor$2 = {
+    default: "base",
+    negative: "negative",
+    notice: "notice",
+    positive: "positive"
+};
+const StyledIcon = styled(Icon) `
+  ${(props) => {
+    const iconSizes = getIconSizes(props);
+    return `
+      height: ${iconSizes?.xs.height}px;
+      width: ${iconSizes?.xs.width}px;
+    `;
+}}
+`;
+const StyledCheckboxDefaultIcon = styled("span") `
+  ${(props) => {
+    const { intent = "default" } = props;
+    const iconSizes = getIconSizes(props);
+    const borders = getBorders(props);
+    const borderColor = intentToColor$2[intent];
+    return `
+      height: ${iconSizes?.s.height}px;
+      width: ${iconSizes?.s.width}px;
+      border: ${borders?.[borderColor]?.default};
+      border-radius: 2px;
+    `;
+}}
+`;
+const StyledCheckboxCheckedIcon = styled("div") `
+  ${(props) => {
+    const iconSizes = getIconSizes(props);
+    const semanticColors = getSemanticColors(props);
+    return `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: ${iconSizes?.s.height}px;
+      width: ${iconSizes?.s.width}px;
+      border-radius: 2px;
+      background-color: ${semanticColors?.accent?.foreground};
+
+      ${StyledIcon} {
+        fill: ${semanticColors?.base?.ornamentPrimaryInverse};
+      }
+    `;
+}}
+`;
+const StyledCheckbox = styled(Checkbox) `
+  ${(props) => {
+    const { label } = props;
+    const spaces = getSpaces(props);
+    const corners = getCorners(props);
+    const semanticColors = getSemanticColors(props);
+    return `
+      &.${checkboxClasses.root} {
+        ${focusVisibleA11yStyle(props)}
+        
+        padding: 0;
+        margin-right: ${label ? spaces?.s : 0}px;
+        border-radius: ${corners?.s}px;
+        background-color: ${semanticColors?.base?.backgroundPrimary} !important;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    `;
+}}
+`;
+const StyledLabelContainer$1 = styled("span") `
+  display: flex;
+  justify-content: start;
+  flex-direction: column;
+`;
+const StyledCheckboxLabel = styled("span") `
+  ${fontBodyXs$2}
+
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      margin-top: -${spaces?.xxxs}px !important;
+    `;
+}}
+`;
+const StyledCheckboxCaption = styled("span") `
+  ${fontBodyXxs$1}
+
+  ${(props) => {
+    const semanticColors = getSemanticColors(props);
+    return `
+      color: ${semanticColors?.base?.textSecondary};
+    `;
+}}
+`;
+const disabledStyles$1 = (props) => {
+    const semanticColors = getSemanticColors(props);
+    const borders = getBorders(props);
+    return `
+    user-select: none;
+
+    ${StyledCheckboxDefaultIcon} {
+      border: ${borders?.base?.disabled};
+    }
+
+    ${StyledCheckboxCheckedIcon} {
+      background-color: ${semanticColors?.base?.ornamentDisabled};
+    }
+
+    ${StyledCheckboxCaption} {
+      color: ${semanticColors?.base?.textDisabled};
+    }
+
+    &:hover, &:active {
+      ${StyledCheckboxDefaultIcon} {
+        border: ${borders?.base?.disabled};
+      }
+
+      ${StyledCheckboxCheckedIcon} {
+        background-color: ${semanticColors?.base?.ornamentDisabled};
+      }
+    }
+  `;
+};
+const StyledFormControlLabel$1 = styled(FormControlLabel) `
+  ${(props) => {
+    const { disabled } = props;
+    const semanticColors = getSemanticColors(props);
+    const borders = getBorders(props);
+    return `
+      align-items: start;
+      margin-bottom: 0;
+      margin-left: 0;
+      margin-right: 0;
+      width: fit-content;
+
+      &:hover {
+        ${StyledCheckboxDefaultIcon} {
+          border: ${borders?.base?.hover};
+          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillPrimaryInteraction};
+        }
+
+        ${StyledCheckboxCheckedIcon} {
+          background-color: ${semanticColors?.accent?.fillInteraction};
+        }
+      }
+
+      &:active {
+        ${StyledCheckboxDefaultIcon} {
+          border: ${borders?.base?.pressed};
+        }
+
+        ${StyledCheckboxCheckedIcon} {
+          background-color: ${semanticColors?.accent?.fillPressed};
+        }
+      }
+
+      ${disabled && disabledStyles$1(props)}
+    `;
+}}
+`;
+
+/**
+ * @see https://mui.com/material-ui/react-checkbox/
+ */
+const InputCheckbox = (props) => {
+    const { caption, checkboxProps, disabled, intent = "default", label, stage, value, classes = EMPTY_OBJECT, className, ...rest } = props;
+    const { root: rootClassName, labelCaptionContainer: labelCaptionContainerClassName, label: labelClassName, caption: captionClassName, checkbox: checkboxClassName, checkboxCheckedIcon: checkboxCheckedIconClassName, checkboxDefaultIcon: checkboxDefaultIconClassName, checkboxIndeterminateIcon: checkboxIndeterminateIconClassName, } = classes;
+    let newProps;
+    switch (stage) {
+        case "checked":
+            newProps = {
+                ...rest,
+                checked: true,
+                color: "primary"
+            };
+            break;
+        case "unchecked":
+            newProps = {
+                ...rest,
+                checked: false,
+                color: "default"
+            };
+            break;
+        case "indeterminate":
+            newProps = {
+                ...rest,
+                checked: true,
+                color: "primary",
+                indeterminate: true
+            };
+            break;
+        default:
+            newProps = rest;
+    }
+    const finalLabel = caption ? (jsxs(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: [jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }), jsx(StyledCheckboxCaption, { className: cn(captionClassName), children: caption })] })) : (jsx(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }) }));
+    return (jsx(StyledFormControlLabel$1, { control: jsx(StyledCheckbox, __assign({ className: cn(checkboxClassName), checkedIcon: jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxCheckedIconClassName), children: jsx(StyledIcon, { sdsIcon: "Check", sdsSize: "xs" }) }), icon: jsx(StyledCheckboxDefaultIcon, { intent: intent, className: cn(checkboxDefaultIconClassName) }), indeterminateIcon: jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxIndeterminateIconClassName), children: jsx(StyledIcon, { sdsIcon: "Minus", sdsSize: "xs" }) }), intent: intent, label: label }, checkboxProps, newProps)), disabled: disabled, label: label ? finalLabel : null, value: value, className: cn(rootClassName, className) }));
+};
+
+const StyledCellComponentData = styled.div `
+  ${fontBodyS$1}
+  ${focusVisibleA11yStyle}
+
+  ${(props) => {
+    const spaces = getSpaces(props);
+    const { horizontalAlign = "left", verticalAlign = "top" } = props;
+    return `
+      align-items: center;
+      text-align: ${horizontalAlign};
+      vertical-align: ${verticalAlign};
+      overflow: hidden;
+      padding: ${spaces?.m}px !important;
+    `;
+}}
+`;
+
+const CellComponent = forwardRef((props, ref) => {
+    const { children, as = "td", ...rest } = props;
+    return (jsx(StyledCellComponentData, __assign({ ref: ref, className: "cell-component", as: as }, rest, { children: children })));
+});
+
+const StyledTableContainer$1 = styled.div `
+  width: 100%;
+  overflow: hidden;
+`;
+const stripedStyle = (props) => {
+    const semanticColors = getSemanticColors(props);
+    return `
+    tr {
+      border: none !important;
+      box-shadow: none !important;
+      &:after {
+        display: none !important;
+      }
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: ${semanticColors?.base?.backgroundSecondary};
+
+      td, th {
+        background-color: ${semanticColors?.base?.backgroundPrimary};
+
+        &::before {
+          background-color: ${semanticColors?.base?.backgroundSecondary};
+        }
+      }
+
+      &:hover {
+        td, th {
+          position: relative;
+          background-color: ${semanticColors?.base?.backgroundPrimary};
+
+          &:before {
+            background-color: ${semanticColors?.base?.fillPrimaryInteraction};
+          }
+        }
+      }
+    }
+
+    tr[aria-selected="true"]:nth-of-type(odd) {
+      background-color: ${semanticColors?.accent?.surfaceSecondary};
+
+      td, th {
+        background-color: ${semanticColors?.accent?.surfaceSecondary};
+
+        &::before {
+          background-color: ${semanticColors?.accent?.surfaceSecondary};
+        }
+      }
+
+      &:hover {
+        td, th {
+          position: relative;
+          background-color: ${semanticColors?.accent?.surfaceSecondary};
+
+          &:before {
+            background-color: ${semanticColors?.base?.fillPrimaryInteraction};
+          }
+        }
+      }
+    }
+  `;
+};
+const StyledInputCheckbox = styled(InputCheckbox) `
+  ${(props) => {
+    const semanticColors = getSemanticColors(props);
+    const corners = getCorners(props);
+    return `
+      background-color: ${semanticColors?.base?.backgroundPrimary} !important;
+      border-radius: ${corners?.s}px !important;
+    `;
+}}
+`;
+const StyledTableWrapper = styled.div `
+  ${(props) => {
+    const { border = true, sdsStyle = "lined" } = props;
+    const semanticColors = getSemanticColors(props);
+    const corners = getCorners(props);
+    return css$1 `
+      width: 100%;
+      overflow-x: auto;
+      border: 1px solid
+        ${border ? semanticColors?.base?.borderSecondary : "transparent"};
+      border-radius: ${border ? corners?.xl : 0}px;
+
+      tbody {
+        width: 100%;
+        min-width: max-content;
+
+        ${sdsStyle === "striped" && stripedStyle(props)}
+
+        tr:last-child {
+          border-bottom: none;
+          &:after {
+            display: none !important;
+          }
+        }
+      }
+    `;
+}}
+`;
+styled("th") `
+  ${(props) => {
+    const { selected, hover } = props;
+    const semanticColors = getSemanticColors(props);
+    return `
+      position: relative;
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -2;
+        background-color: ${selected ? semanticColors?.accent?.surfaceSecondary : semanticColors?.base?.backgroundPrimary};
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background-color: ${hover ? semanticColors?.base?.fillPrimaryInteraction : "transparent"};
+      }
+    `;
+}}
+`;
+const StyledInputSearch = styled(InputSearch) `
+  margin-right: 0;
+`;
+const StyledPaginationWrapper = styled.div `
+  ${(props) => {
+    const { placement = "right" } = props;
+    const spaces = getSpaces(props);
+    return `
+      display: flex;
+      justify-content: ${placement};
+      margin-top: ${spaces?.m}px;
+    `;
+}}
+`;
+const StyledSelectionCell = styled(CellComponent) `
+  line-height: 22px !important;
+`;
+
+const SELECT_COLUMN_ID = "SdsTableSelectColumn";
+function getSize(size = 100, max = Number.MAX_SAFE_INTEGER, min = 40) {
+    return Math.max(Math.min(size, max), min);
+}
+/**
+ * Calculates the sizing of table columns and distributes available width proportionally.
+ * This function acts as an extension for TanStack Table, ensuring proper column sizing
+ * based on provided metadata, including `isGrow`, `widthPercentage`, and size constraints.
+ *
+ * https://github.com/TanStack/table/discussions/4179#discussioncomment-11895847
+ */
+const calculateTableSizing = (columns, totalWidth) => {
+    let totalAvailableWidth = totalWidth;
+    let totalIsGrow = 0;
+    columns.forEach((header) => {
+        const column = header.column.columnDef;
+        if (!column.size && !column.meta?.isGrow) {
+            let calculatedSize = 100;
+            if (column?.meta?.widthPercentage) {
+                calculatedSize = column.meta.widthPercentage * totalWidth * 0.01;
+            }
+            else {
+                calculatedSize = totalWidth / columns.length;
+            }
+            const size = getSize(calculatedSize, column.maxSize, column.minSize);
+            column.size = size;
+        }
+        if (column.meta?.isGrow)
+            totalIsGrow += 1;
+        else
+            totalAvailableWidth -= getSize(column.size, column.maxSize, column.minSize);
+    });
+    const sizing = {};
+    columns.forEach((header) => {
+        const column = header.column.columnDef;
+        if (column.meta?.isGrow) {
+            let calculatedSize = 100;
+            calculatedSize = Math.floor(totalAvailableWidth / totalIsGrow);
+            const size = getSize(calculatedSize, column.maxSize, column.minSize);
+            column.size = size;
+        }
+        sizing[`${column.id}`] = Number(column.size);
+    });
+    return sizing;
+};
+const calculateLeftPosition = (column, table) => {
+    if (column.id === SELECT_COLUMN_ID)
+        return 0;
+    const allColumns = table.getAllColumns();
+    const currentIndex = allColumns.findIndex((col) => col.id === column.id);
+    let leftPosition = 0;
+    // Add widths of other left-pinned columns before this one
+    for (let i = 0; i < currentIndex; i++) {
+        const col = allColumns[i];
+        const colDef = col.columnDef;
+        if (colDef.meta?.pinning === "left") {
+            leftPosition += col.getSize();
+        }
+    }
+    return leftPosition;
+};
+const calculateRightPosition = (column, table) => {
+    const allColumns = table.getAllColumns();
+    const currentIndex = allColumns.findIndex((col) => col.id === column.id);
+    let rightPosition = 0;
+    for (let i = currentIndex + 1; i < allColumns.length; i++) {
+        const col = allColumns[i];
+        const colDef = col.columnDef;
+        if (colDef.meta?.pinning === "right") {
+            rightPosition += col.getSize();
+        }
+    }
+    return rightPosition;
+};
+const getCommonPinningStyles = (column, table) => {
+    const columnWithPinning = column.columnDef;
+    const shouldPin = columnWithPinning.meta?.pinning;
+    if (!shouldPin) {
+        return {
+            position: "relative",
+            width: column.getSize()
+        };
+    }
+    const leftPosition = shouldPin === "left" ? calculateLeftPosition(column, table) : 0;
+    const rightPosition = shouldPin === "right" ? calculateRightPosition(column, table) : 0;
+    return {
+        left: shouldPin === "left" ? `${leftPosition}px` : undefined,
+        position: "sticky",
+        right: shouldPin === "right" ? `${rightPosition}px` : undefined,
+        width: column.getSize(),
+        zIndex: 1
+    };
+};
+
+// Create context for row hover state
+const RowHoverContext = createContext({
+    isRowHovered: false
+});
+const PreComposedTable = ({ data, columns, border = true, enableSorting = false, enableRowSelection = false, shouldPinSelectRowToLeft = true, enablePagination = false, enableColumnFiltering = false, enableGlobalFiltering = false, paginationConfig, className, style, tableWidth = "100%", onRowSelect, tableRowProps, sdsStyle = "lined", }) => {
+    const [sorting, setSorting] = useState([]);
+    const [rowSelection, setRowSelection] = useState({});
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const [globalFilter, setGlobalFilter] = useState("");
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: paginationConfig?.pageSize ?? 10
+    });
+    const [columnPinning, setColumnPinning] = useState({});
+    const [hoveredRowId, setHoveredRowId] = useState(null);
+    const tableContainerRef = useRef(null);
+    /** Determines the final set of columns based on two conditions:
+     *   - hasCustomSelectColumn: whether the user provided a column with id === SELECT_COLUMN_ID
+     *   - enableRowSelection: whether row selection is enabled via props
+     *
+     * The four possible states:
+     *   hasCustomSelectColumn | enableRowSelection | Behavior
+     *   --------------------- | ------------------ | -------------------------------------------------------------
+     *   true                  | true               | Return columns as-is (user already provided their own custom select column)
+     *   true                  | false              | Return columnsWithoutSelection (no selection column needed)
+     *   false                 | true               | Prepend our default select column to columnsWithoutSelection
+     *   false                 | false              | Return columnsWithoutSelection (no selection column needed)
+     */
+    const tableColumns = useMemo(() => {
+        const customSelectionColumn = columns.find((col) => col.id === SELECT_COLUMN_ID);
+        if (customSelectionColumn && enableRowSelection) {
+            return columns;
+        }
+        const columnsWithoutSelection = columns.filter((col) => col.id !== SELECT_COLUMN_ID);
+        if (!enableRowSelection) {
+            return columnsWithoutSelection;
+        }
+        return [
+            {
+                accessorFn: () => null,
+                cell: (props) => {
+                    const { row, cell, table } = props;
+                    const pinnedStyle = getCommonPinningStyles(cell.column, table);
+                    return (jsx(StyledSelectionCell, __assign({ horizontalAlign: "center", verticalAlign: "top" }, props, { style: {
+                            width: `${cell.column.getSize()}px`,
+                            ...pinnedStyle
+                        }, children: jsx(StyledInputCheckbox, { stage: row.getIsSelected() ? "checked" : "unchecked", disabled: !row.getCanSelect(), onChange: () => row.toggleSelected(), "aria-label": "Select row" }) })));
+                },
+                enableFiltering: false,
+                enablePinning: false,
+                enableSorting: false,
+                header: ({ table, header, }) => {
+                    const pinnedStyle = getCommonPinningStyles(header.column, table);
+                    let stage = "unchecked";
+                    if (table.getIsAllPageRowsSelected()) {
+                        stage = "checked";
+                    }
+                    else if (table.getIsSomePageRowsSelected()) {
+                        stage = "indeterminate";
+                    }
+                    return (jsx(CellHeader, { horizontalAlign: "center", style: {
+                            verticalAlign: "middle",
+                            width: `${header.getSize()}px`,
+                            ...pinnedStyle
+                        }, children: jsx(StyledInputCheckbox, { stage: stage, onChange: () => table.toggleAllPageRowsSelected(), "aria-label": "Select all rows" }) }));
+                },
+                id: SELECT_COLUMN_ID,
+                meta: {
+                    pinning: shouldPinSelectRowToLeft ? "left" : undefined,
+                    verticalAlign: "top"
+                },
+                size: 40
+            },
+            ...columnsWithoutSelection,
+        ];
+    }, [columns, enableRowSelection, shouldPinSelectRowToLeft]);
+    const table = useReactTable({
+        columns: tableColumns,
+        data,
+        debugTable: true,
+        enableColumnFilters: enableColumnFiltering,
+        enableGlobalFilter: enableGlobalFiltering,
+        enableRowSelection: enableRowSelection,
+        enableSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        onColumnPinningChange: setColumnPinning,
+        onColumnVisibilityChange: setColumnVisibility,
+        onGlobalFilterChange: setGlobalFilter,
+        onPaginationChange: setPagination,
+        onRowSelectionChange: setRowSelection,
+        onSortingChange: setSorting,
+        state: {
+            columnPinning,
+            columnVisibility,
+            globalFilter,
+            pagination,
+            rowSelection,
+            sorting
+        }
+    });
+    const createInitialPinning = useCallback(() => {
+        const initialPinning = {};
+        tableColumns.forEach((column) => {
+            const columnWithPinning = column;
+            if (columnWithPinning.meta?.pinning) {
+                const columnId = column.id || column.accessorKey;
+                if (columnId) {
+                    const side = columnWithPinning.meta.pinning;
+                    if (!initialPinning[side]) {
+                        initialPinning[side] = [];
+                    }
+                    initialPinning[side].push(columnId);
+                }
+            }
+        });
+        return initialPinning;
+    }, [tableColumns]);
+    // Initialize column pinning from column definitions
+    useEffect(() => {
+        setColumnPinning(createInitialPinning());
+    }, [createInitialPinning]);
+    // Call onRowSelect callback when row selection changes
+    useEffect(() => {
+        if (onRowSelect && enableRowSelection) {
+            const selectedRows = table
+                .getSelectedRowModel()
+                .rows.map((row) => row.original);
+            onRowSelect(selectedRows);
+        }
+    }, [rowSelection, onRowSelect, enableRowSelection, table]);
+    useEffect(() => {
+        setPagination({
+            pageIndex: 0,
+            pageSize: paginationConfig?.pageSize ?? 10
+        });
+    }, [paginationConfig]);
+    const headers = table.getFlatHeaders();
+    useEffect(() => {
+        if (!tableContainerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry) {
+                const initialColumnSizing = calculateTableSizing(headers, entry.contentRect.width);
+                table.setColumnSizing(initialColumnSizing);
+            }
+        });
+        resizeObserver.observe(tableContainerRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [headers, table]);
+    const renderCell = (cell, row) => {
+        const isRowHovered = hoveredRowId === row.id;
+        const isPinned = cell.column.columnDef.meta?.pinning;
+        const pinnedStyle = getCommonPinningStyles(cell.column, table);
+        let cellContent;
+        if (typeof cell.column.columnDef.cell === "string") {
+            cellContent = (jsx(CellBasic, { as: "div", primaryText: cell.getValue(), shouldShowTooltipOnHover: false, shouldShowUnderlineOnHover: false, verticalAlign: cell.column.columnDef.meta?.verticalAlign === "middle"
+                    ? "center"
+                    : cell.column.columnDef.meta?.verticalAlign, style: {
+                    width: `${cell.column.getSize()}px`
+                } }));
+        }
+        else if (cell.column.columnDef.cell) {
+            cellContent = flexRender(cell.column.columnDef.cell, {
+                ...cell.getContext(),
+                as: "div",
+                style: {
+                    width: `${cell.column.getSize()}px`
+                }
+            });
+        }
+        else {
+            // Fallback for undefined cell content
+            cellContent = (jsx(CellBasic, { as: "div", primaryText: String(cell.getValue() || ""), shouldShowTooltipOnHover: false, shouldShowUnderlineOnHover: false, style: {
+                    width: `${cell.column.getSize()}px`
+                }, verticalAlign: cell.column.columnDef.meta?.verticalAlign === "middle"
+                    ? "center"
+                    : cell.column.columnDef.meta?.verticalAlign }));
+        }
+        if (isPinned) {
+            return (jsx(RowHoverContext.Provider, { value: { isRowHovered }, children: jsx("td", { style: {
+                        ...pinnedStyle,
+                        width: `${cell.column.getSize()}px`,
+                        verticalAlign: cell.column.columnDef.meta?.verticalAlign
+                    }, children: cellContent }) }, cell.id));
+        }
+        return (jsx(RowHoverContext.Provider, { value: { isRowHovered }, children: jsx("td", { style: {
+                    verticalAlign: cell.column.columnDef.meta?.verticalAlign,
+                    width: `${cell.column.getSize()}px`
+                }, children: cellContent }) }, cell.id));
+    };
+    const renderHeader = (header) => {
+        const isSortable = enableSorting && header.column.getCanSort();
+        const isSorted = header.column.getIsSorted();
+        const sortDirection = header.column.getIsSorted();
+        const isPinned = header.column.columnDef.meta?.pinning;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { ref, ...headerCellProps } = header.column.columnDef.meta?.headerCellProps || {};
+        const pinnedStyle = getCommonPinningStyles(header.column, table);
+        if (typeof header.column.columnDef.header === "string") {
+            return (jsx(CellHeader, __assign({ colSpan: header.colSpan, style: {
+                    ...(isPinned ? pinnedStyle : {}),
+                    width: `${header.getSize()}px`
+                }, active: !!isSorted, direction: sortDirection || undefined, hover: isSortable, onClick: header.column.getToggleSortingHandler() }, headerCellProps, { children: header.isPlaceholder ? null : header.column.columnDef.header }), header.id));
+        }
+        else if (header.column.columnDef.header) {
+            return flexRender(header.column.columnDef.header, {
+                ...header.getContext(),
+                key: header.id,
+                style: {
+                    ...(isPinned ? pinnedStyle : {}),
+                    width: `${header.getSize()}px`
+                }
+            });
+        }
+        else {
+            // Fallback for undefined header content
+            return (jsx(CellHeader, { colSpan: header.colSpan, style: {
+                    ...(isPinned ? pinnedStyle : {}),
+                    width: `${header.getSize()}px`
+                }, active: !!isSorted, direction: sortDirection || undefined, hover: isSortable, onClick: header.column.getToggleSortingHandler(), children: header.column.id || "Header" }, header.id));
+        }
+    };
+    return (jsxs(StyledTableContainer$1, { ref: tableContainerRef, className: className, style: { width: tableWidth, ...style }, children: [enableGlobalFiltering && (jsx("div", { style: { marginBottom: "16px" }, children: jsx(StyledInputSearch, { id: "global-search", label: "Search", placeholder: "Search all columns...", value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsx(StyledTableWrapper, { border: border, sdsStyle: sdsStyle, children: jsxs(Table, { children: [jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => {
+                                return (jsx(Fragment$1, { children: headerGroup.headers.map((header) => {
+                                        return renderHeader(header);
+                                    }) }, headerGroup.id));
+                            }) }), jsx("tbody", { children: table.getRowModel().rows.map((row) => (jsx(TableRow, __assign({ onMouseEnter: () => setHoveredRowId(row.id), onMouseLeave: () => setHoveredRowId(null), selected: row.getIsSelected(), "aria-selected": row.getIsSelected() }, tableRowProps, { children: row.getVisibleCells().map((cell) => {
+                                    return renderCell(cell, row);
+                                }) }), row.id))) })] }) }), enablePagination && (jsx(StyledPaginationWrapper, { placement: paginationConfig?.placement, children: jsx(Pagination, __assign({ currentPage: table.getState().pagination.pageIndex + 1, onPageChange: (page) => table.setPageIndex(page - 1), onNextPage: () => table.nextPage(), onPreviousPage: () => table.previousPage(), pageSize: table.getState().pagination.pageSize, totalCount: table.getFilteredRowModel().rows.length }, paginationConfig)) }))] }, `table-${columns.length}-${columns.map((col) => col.id || "col").join("-")}`));
+};
+
+const doNotForwardProps$v = [
+    "icon",
+    "iconVerticalAlign",
+    "horizontalAlign",
+    "verticalAlign",
+    "primaryText",
+    "secondaryText",
+    "tertiaryText",
+    "shouldTextWrap",
+    "shouldShowTooltipOnHover",
+    "shouldShowUnderlineOnHover",
+    "isRowHovered",
+    "tooltipProps",
+    "primaryTextWrapLineCount",
+    "secondaryTextWrapLineCount",
+    "tertiaryTextWrapLineCount",
+    "primaryTextComponentSlotBottom",
+    "primaryTextComponentSlotRight",
+    "tabularNums",
+];
+const TABULAR_NUMS = "tabular-nums";
+const verticalAlignCSSMap = {
+    bottom: "bottom",
+    center: "middle",
+    top: "top"
+};
+const verticalAlignToFlexMap = {
+    bottom: "flex-end",
+    center: "center",
+    top: "flex-start"
+};
+const ShouldWrap = (lineCount) => {
+    return `
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: ${lineCount};
+    -webkit-box-orient: vertical; 
+    word-break: break-all;
+  `;
+};
+const ShouldTruncate = () => {
+    return `
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    word-break: break-all;
+  `;
+};
+const StyledCellContent = styled("div") `
+  display: flex;
+`;
+const StyledCellContentWrapper = styled("div") `
+  width: 100%;
+`;
+const StyledCellIconWrapper = styled("div", {
+    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+}) `
+  ${(props) => {
+    const { iconVerticalAlign = "top" } = props;
+    const spaces = getSpaces(props);
+    return `
+      padding-right: ${spaces?.m}px;
+      display: flex;
+      flex-direction: column;
+      justify-content: ${verticalAlignToFlexMap[iconVerticalAlign]};
+    `;
+}}
+`;
+const PrimaryTextWrapper = styled("div") `
+  ${(props) => {
+    const { horizontalAlign } = props;
+    return `
+      display: flex;
+      justify-content: ${horizontalAlign === "left" ? "flex-start" : "flex-end"};
+    `;
+}}
+`;
+const PrimaryText = styled("div", {
+    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+}) `
+  ${fontBodyS$1}
+
+  ${(props) => {
+    const { primaryTextWrapLineCount = 3, tabularNums = false } = props;
+    return `
+      display: block;
+      font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      
+      ${props.shouldTextWrap
+        ? ShouldWrap(primaryTextWrapLineCount)
+        : ShouldTruncate()}
+    `;
+}}
+`;
+const SecondaryText = styled("span", {
+    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+}) `
+  ${fontBodyXxs$1}
+
+  ${(props) => {
+    const { secondaryTextWrapLineCount = 1, tabularNums = false } = props;
+    const semanticColors = getSemanticColors(props);
+    return `
+      display: block;
+      color: ${semanticColors?.base?.textSecondary};
+      padding-top: 0px;
+      font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+
+      ${props.shouldTextWrap
+        ? ShouldWrap(secondaryTextWrapLineCount)
+        : ShouldTruncate()}
+    `;
+}}
+`;
+const TertiaryText = styled("span", {
+    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+}) `
+  ${fontBodyXxs$1}
+
+  ${(props) => {
+    const { tertiaryTextWrapLineCount = 1, tabularNums = false } = props;
+    const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
+    return `
+      display: block;
+      color: ${semanticColors?.base?.textSecondary};
+      padding-top: ${spaces?.xxxs}px;
+      font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+
+      ${props.shouldTextWrap
+        ? ShouldWrap(tertiaryTextWrapLineCount)
+        : ShouldTruncate()}
+    `;
+}}
+`;
+const PrimaryTextComponentSlotBottomWrapper = styled("div") `
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      margin-top: ${spaces?.xxs}px;
+    `;
+}}
+`;
+const PrimaryTextComponentSlotRightWrapper = styled("div") `
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      margin-left: ${spaces?.xs}px;
+    `;
+}}
+`;
+const StyledTableData = styled.div `
+  ${fontBodyS$1}
+  ${focusVisibleA11yStyle}
+
+  ${(props) => {
+    const { horizontalAlign = "left", verticalAlign = "top", shouldShowUnderlineOnHover = false, isRowHovered = false, extraRightPadding = 0, } = props;
+    const spaces = getSpaces(props);
+    const paddingRight = horizontalAlign === "right"
+        ? (spaces?.m ?? 0) + extraRightPadding
+        : spaces?.m;
+    return `
+        padding: ${spaces?.m}px ${paddingRight}px ${spaces?.m}px ${spaces?.m}px !important;
+        text-align: ${horizontalAlign};
+        vertical-align: ${verticalAlignCSSMap[verticalAlign]};
+        overflow: hidden;
+
+        &:hover {
+          ${PrimaryText} {
+            ${shouldShowUnderlineOnHover ? "text-decoration: underline;" : ""}
+          }
+        }
+
+        ${PrimaryText} {
+          ${isRowHovered && shouldShowUnderlineOnHover ? "text-decoration: underline;" : ""}
+        }
+    `;
+}}
+`;
+const StyledCellBasicLink = styled("a") `
+  ${(props) => {
+    const semanticColors = getSemanticColors(props);
+    return `
+      text-decoration: none;
+      color: ${semanticColors?.base?.textPrimary};
+    `;
+}}
+`;
+
+const CellBasicContent = (props) => {
+    const { primaryText, primaryTextWrapLineCount, secondaryText, secondaryTextWrapLineCount, tertiaryText, tertiaryTextWrapLineCount, shouldTextWrap = true, icon, iconVerticalAlign, primaryTextComponentSlotRight, primaryTextComponentSlotBottom, horizontalAlign = "left", tabularNums = false, } = props;
+    return (jsxs(StyledCellContent, { children: [icon && (jsx(StyledCellIconWrapper, { iconVerticalAlign: iconVerticalAlign, children: icon })), jsxs(StyledCellContentWrapper, { children: [jsxs(PrimaryTextWrapper, { horizontalAlign: horizontalAlign, children: [jsx(PrimaryText, { shouldTextWrap: shouldTextWrap, primaryTextWrapLineCount: primaryTextWrapLineCount, tabularNums: tabularNums, children: primaryText }), primaryTextComponentSlotRight && (jsx(PrimaryTextComponentSlotRightWrapper, { children: primaryTextComponentSlotRight }))] }), !secondaryText && !tertiaryText && primaryTextComponentSlotBottom && (jsx(PrimaryTextComponentSlotBottomWrapper, { children: primaryTextComponentSlotBottom })), secondaryText && (jsx(SecondaryText, { shouldTextWrap: shouldTextWrap, secondaryTextWrapLineCount: secondaryTextWrapLineCount, tabularNums: tabularNums, children: secondaryText })), tertiaryText && (jsx(TertiaryText, { shouldTextWrap: shouldTextWrap, tertiaryTextWrapLineCount: tertiaryTextWrapLineCount, tabularNums: tabularNums, children: tertiaryText }))] })] }));
+};
+const CellBasic = forwardRef((props, ref) => {
+    const { primaryText, secondaryText, shouldShowTooltipOnHover = true, tooltipProps, as = "td", link, linkProps, linkComponent, } = props;
+    // Get row hover state from context (fallback to false if not available)
+    const { isRowHovered } = useContext(RowHoverContext) || {
+        isRowHovered: false
+    };
+    // Pass the row hover state to the styled component
+    const enhancedProps = { ...props, isRowHovered };
+    if (shouldShowTooltipOnHover) {
+        return (jsx(Tooltip, __assign({ title: primaryText, subtitle: secondaryText, arrow: true, leaveDelay: 0, leaveTouchDelay: 0, sdsStyle: "dark" }, tooltipProps, { children: jsx(StyledTableData, __assign({ ref: ref, as: as }, enhancedProps, { children: link ? (jsx(StyledCellBasicLink, __assign({ href: link }, linkProps, { component: linkComponent, children: jsx(CellBasicContent, __assign({}, props)) }))) : (jsx(CellBasicContent, __assign({}, props))) })) })));
+    }
+    return (jsx(StyledTableData, __assign({ ref: ref, as: as }, enhancedProps, { children: link ? (jsx(Link$1, __assign({ href: link }, linkProps, { underline: "none", color: "inherit", component: linkComponent, children: jsx(CellBasicContent, __assign({}, props)) }))) : (jsx(CellBasicContent, __assign({}, props))) })));
+});
+CellBasic.displayName = "CellBasic";
+
+const small = (props) => {
+    const spaces = getSpaces(props);
+    return css$1 `
+    height: ${spaces?.l}px;
+    padding: ${spaces?.xxs}px ${spaces?.xs}px;
+
+    .MuiChip-label {
+      ${fontCapsXxxxs(props)}
+      padding: 0;
+    }
+  `;
+};
+const medium = (props) => {
+    const spaces = getSpaces(props);
+    const colors = getColors(props);
+    return css$1 `
+    margin: 0 ${spaces?.s}px;
+    height: 24px;
+
+    background-color: ${colors?.blue[400]};
+
+    &:hover {
+      background-color: ${colors?.blue[500]};
+    }
+
+    &:active {
+      background-color: ${colors?.blue[600]};
+    }
+
+    .MuiChip-label {
+      ${fontHeaderXs(props)}
+      color: white;
+      padding-left: ${spaces?.s}px;
+    }
+
+    .MuiChip-deleteIcon {
+      color: white;
+      padding-right: ${spaces?.xxs}px;
+      margin: 0 0 0 -${spaces?.s}px;
+      height: ${spaces?.l}px;
+      width: ${spaces?.l}px;
+
+      &:hover,
+      &:focus-visible {
+        color: white;
+      }
+    }
+  `;
+};
+const rounded$2 = (props) => {
+    const corners = getCorners(props);
+    return css$1 `
+    border-radius: ${corners?.rounded}px;
+  `;
+};
+const square$2 = (props) => {
+    const corners = getCorners(props);
+    return css$1 `
+    border-radius: ${corners?.m}px;
+  `;
+};
+const success = (props) => {
+    return createStatusCss(props, "success");
+};
+const error = (props) => {
+    return createStatusCss(props, "error");
+};
+const beta = (props) => {
+    return createStatusCss(props, "beta");
+};
 const pending = (props) => {
     return createStatusCss(props, "pending");
 };
@@ -9600,9 +10829,9 @@ const statusToCss = {
     success,
     warning
 };
-const doNotForwardProps$w = ["isRounded"];
+const doNotForwardProps$u = ["isRounded"];
 const StyledChip = styled(Chip$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$w.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
 }) `
   border: none;
 
@@ -9634,7 +10863,7 @@ const Chip = (props) => {
     return jsx(StyledChip, __assign({}, props));
 };
 
-const doNotForwardProps$v = [
+const doNotForwardProps$t = [
     "anchorEl",
     "count",
     "keepSearchOnSelect",
@@ -9649,7 +10878,7 @@ const doNotForwardProps$v = [
     "titleValue",
 ];
 const StyledHeaderTitle = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
 }) `
   ${fontBodyMediumXs}
 
@@ -9663,7 +10892,7 @@ const StyledHeaderTitle = styled("div", {
 }}
 `;
 const StyledHeaderSubTitle = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
 }) `
   ${fontBodyXxs$1}
 
@@ -9678,7 +10907,7 @@ const StyledHeaderSubTitle = styled("div", {
 }}
 `;
 const StyledDropdownMenuAutocompleteWrapper = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
 }) `
   ${(props) => {
     const { search, titleValue } = props;
@@ -9715,7 +10944,7 @@ const StyledDropdownMenuAutocompleteWrapper = styled("div", {
 }}
 `;
 const StyledPopper = styled(Popper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop) || prop === "anchorEl"
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop) || prop === "anchorEl"
 }) `
   ${(props) => {
     const borders = getBorders(props);
@@ -9734,7 +10963,7 @@ const StyledPopper = styled(Popper, {
 }}
 `;
 const StyledPaper$1 = styled(Paper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -9841,7 +11070,7 @@ const DropdownMenu = (props) => {
         sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [jsxs("div", { children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] }), title && subTitle && (jsx(StyledHeaderSubTitle, { children: subTitle }))] })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
 };
 
-const doNotForwardProps$u = [
+const doNotForwardProps$s = [
     "intent",
     "state",
     "sdsType",
@@ -9852,7 +11081,7 @@ const doNotForwardProps$u = [
     "sdsStyle",
     "multiple",
 ];
-const intentToColor$2 = {
+const intentToColor$1 = {
     default: "accent",
     negative: "negative",
     notice: "notice",
@@ -9867,6 +11096,7 @@ const inputDropdownStyles = (props) => {
     return css$1 `
     ${labelStyle(props)}
 
+    background-color: ${semanticColors?.base?.backgroundPrimary} !important;
     border: none;
     box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimary};
     cursor: pointer;
@@ -10032,7 +11262,7 @@ const userInput = (props) => {
 const isOpen = (props) => {
     const { sdsStyle = "square", intent = "default" } = props;
     const semanticColors = getSemanticColors(props);
-    const inputColor = intentToColor$2[intent];
+    const inputColor = intentToColor$1[intent];
     return css$1 `
     &.MuiButton-text {
       .styled-label {
@@ -10124,7 +11354,7 @@ const isDisabled = (props) => {
  * to the InputDropdownProps interface.
  */
 const StyledInputDropdown = styled(Button$2, {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${labelFontBodyXs}
   ${focusVisibleA11yStyle}
@@ -10160,7 +11390,7 @@ const StyledInputDropdown = styled(Button$2, {
 }}
 `;
 const StyledDetail = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -10175,7 +11405,7 @@ const StyledDetail = styled("span", {
 }}
 `;
 const StyledLabel$3 = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${(props) => {
     const { details, counter, sdsType } = props;
@@ -10192,7 +11422,7 @@ const StyledLabel$3 = styled("span", {
 }}
 `;
 const StyledCounter = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${(props) => {
     const corners = getCorners(props);
@@ -10213,7 +11443,7 @@ const StyledCounter = styled("span", {
 }}
 `;
 const MinimalDetails = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${labelFontBodyS}
   text-align: left;
@@ -10233,7 +11463,7 @@ const MinimalDetails = styled("div", {
 }}
 `;
 const LabelWrapper = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   align-items: center;
   display: inline-flex;
@@ -10249,7 +11479,7 @@ const LabelWrapper = styled("span", {
   }
 `;
 const IconWrapper = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   margin-left: auto;
   display: flex;
@@ -10335,9 +11565,9 @@ function renderDetailsText({ details, sdsType, value, }) {
     }
 }
 
-const doNotForwardProps$t = ["buttonPosition"];
+const doNotForwardProps$r = ["buttonPosition"];
 const StyledButtonsWrapper = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
 }) `
   ${(props) => {
     const { buttonPosition } = props;
@@ -10850,7 +12080,7 @@ const typeToCss = {
     primary,
     secondary
 };
-const doNotForwardProps$s = [
+const doNotForwardProps$q = [
     "sdsType",
     "sdsStyle",
     "sdsSize",
@@ -10858,7 +12088,7 @@ const doNotForwardProps$s = [
     "hover",
 ];
 const StyledTag$4 = styled(Chip$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
 }) `
   border: none;
 
@@ -11149,7 +12379,7 @@ const ComplexFilter = ({ label = "", multiple = false, search = false, onChange:
                 }, buttons: true }, rest)), jsx(StyledChipsWrapper, { children: jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] }));
 };
 
-const doNotForwardProps$r = [
+const doNotForwardProps$p = [
     "visualElement",
     "sdsType",
     "imagePosition",
@@ -11190,7 +12420,7 @@ const getShowDecorativeBorder = (visualElementType, boundingBox, decorativeBorde
         : boundingBox && decorativeBorder;
 };
 const StyledCard = styled(Card, {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${(props) => {
     const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
@@ -11272,7 +12502,7 @@ const StyledCard = styled(Card, {
 }}
 `;
 const StyledCardActionArea = styled(Button$2, {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${(props) => {
     const { imagePosition = "left", cardSdsType = "wide", visualElementType, } = props;
@@ -11301,7 +12531,7 @@ const StyledCardActionArea = styled(Button$2, {
 }}
 `;
 const StyledIconMediaWrapper = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${(props) => {
     const { boundingBox = true } = props;
@@ -11318,7 +12548,7 @@ const StyledIconMediaWrapper = styled("div", {
 }}
 `;
 const StyledCardContent = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${(props) => {
     const { boundingBox = true, sdsType = "wide", visualElementType } = props;
@@ -11346,7 +12576,7 @@ const StyledCardContent = styled("div", {
 }}
 `;
 const StyledContentCardBody = styled(CardContent, {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${fontBodyS$1}
   ${(props) => {
@@ -11367,7 +12597,7 @@ const StyledCardContentAligner = styled("div") `
   height: 100%;
 `;
 
-const doNotForwardProps$q = [
+const doNotForwardProps$o = [
     "visualElement",
     "sdsType",
     "imagePosition",
@@ -11379,7 +12609,7 @@ const doNotForwardProps$q = [
     "contentBlock",
 ];
 const StyledTitleWrapper = styled$1("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -11391,7 +12621,7 @@ const StyledTitleWrapper = styled$1("div", {
 }}
 `;
 const StyledOverlineText = styled$1("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${fontCapsXxxs}
   ${(props) => {
@@ -11403,7 +12633,7 @@ const StyledOverlineText = styled$1("p", {
 }}
 `;
 const StyledTitleText = styled$1("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${fontHeaderXl}
   ${(props) => {
@@ -11415,7 +12645,7 @@ const StyledTitleText = styled$1("p", {
 }}
 `;
 const StyledSubtitleText = styled$1("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${fontHeaderM$1}
   ${(props) => {
@@ -11427,7 +12657,7 @@ const StyledSubtitleText = styled$1("p", {
 }}
 `;
 const StyledMetadataText = styled$1("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${fontBodyXxs$1}
   ${(props) => {
@@ -11457,9 +12687,9 @@ const ContentCardTitle = forwardRef(function ContentCardTitle(props, ref) {
     return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { className: cn(cardHeader), children: [jsx(OverlineText, { text: overlineText, className: cardOverline }), jsx(TitleText, { text: titleText, className: cardTitle }), jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
 });
 
-const doNotForwardProps$p = ["buttonsPosition"];
+const doNotForwardProps$n = ["buttonsPosition"];
 const StyledCardActions = styled(CardActions, {
-    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$n.includes(prop)
 }) `
   ${(props) => {
     const { buttonsPosition = "left" } = props;
@@ -11531,7 +12761,7 @@ const ContentCardActions = forwardRef(function ContentCardActions(props, ref) {
 });
 
 /* eslint-disable sonarjs/cognitive-complexity */
-const doNotForwardProps$o = [
+const doNotForwardProps$m = [
     "imagePadding",
     "boundingBox",
     "sdsType",
@@ -11540,7 +12770,7 @@ const doNotForwardProps$o = [
     "imagePosition",
 ];
 const StyledImageMediaWrapper = styled$1("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
 }) `
   ${(props) => {
     const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left", } = props;
@@ -11708,9 +12938,9 @@ const ContentCard = React__default.forwardRef((props, ref) => {
 });
 
 // (thuang): Please keep this in sync with the props used in `ExtraProps`
-const doNotForwardProps$n = ["sdsSize"];
+const doNotForwardProps$l = ["sdsSize"];
 const StyledPaper = styled(Paper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$n.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$l.includes(prop)
 }) `
   & {
     ${paperDimensions}
@@ -11816,9 +13046,9 @@ const CloseButton = forwardRef(function CloseButton(props, ref) {
     return (jsx(StyledButton$1, __assign({ "aria-label": "Close", ref: ref, onClick: onClick, size: size, sdsStyle: "minimal", sdsType: "secondary", backgroundOnHover: false, className: className }, rest, { children: jsx(Icon, { sdsIcon: "XMark", sdsSize: iconSize }) })));
 });
 
-const doNotForwardProps$m = ["sdsSize"];
+const doNotForwardProps$k = ["sdsSize"];
 const StyledDialogTitle = styled(DialogTitle$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
 }) `
   padding: 0;
   ${(props) => {
@@ -11831,7 +13061,7 @@ const StyledDialogTitle = styled(DialogTitle$1, {
 }}
 `;
 const Title = styled(Typography, {
-    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
 }) `
   ${(props) => {
     const { sdsSize } = props;
@@ -11844,7 +13074,7 @@ const Title = styled(Typography, {
 }}
 `;
 const Subtitle = styled(Typography, {
-    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
 }) `
   ${(props) => {
     const { sdsSize } = props;
@@ -11860,7 +13090,7 @@ const Subtitle = styled(Typography, {
 }}
 `;
 const Overline = styled(Typography, {
-    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
 }) `
   ${(props) => {
     const { sdsSize } = props;
@@ -11884,9 +13114,9 @@ const DialogTitle = forwardRef(function DialogTitle(props, ref) {
 });
 
 // (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
-const doNotForwardProps$l = ["buttonPosition", "sdsSize"];
+const doNotForwardProps$j = ["buttonPosition", "sdsSize"];
 const StyledDialogActions = styled(DialogActions$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$l.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$j.includes(prop)
 }) `
   padding: 0;
 
@@ -11941,9 +13171,9 @@ const Dialog = forwardRef(function Dialog(props, ref) {
         }) })));
 });
 
-const doNotForwardProps$k = ["sdsSize"];
+const doNotForwardProps$i = ["sdsSize"];
 const StyledDialogContent = styled(DialogContent, {
-    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$i.includes(prop)
 }) `
   ${fontBodyS$1}
   padding: 0;
@@ -11993,7 +13223,7 @@ const overlayContentPositionJustifyMapping = {
 };
 
 /* eslint-disable sonarjs/no-duplicate-string */
-const doNotForwardProps$j = [
+const doNotForwardProps$h = [
     "heroHeight",
     "overlayContainerMinMargin",
     "backgroundFillColor",
@@ -12020,7 +13250,7 @@ const getResponsivePadding = (props) => {
 };
 // Main Hero Container
 const StyledHeroContainer = styled("section", {
-    shouldForwardProp: (prop) => !doNotForwardProps$j.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$h.includes(prop)
 }) `
   ${(props) => {
     const { heroHeight = "fit-content", overlayContentPosition, backgroundFillColor, } = props;
@@ -12155,306 +13385,111 @@ styled("div") `
     const semanticColors = getSemanticColors(props);
     return css$1 `
       color: ${semanticColors?.base?.textSecondary};
-      border: 1px dashed ${semanticColors?.base?.borderSecondary};
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100px;
-      width: 100%;
-    `;
-}}
-`;
-const DarkeningVignette = styled("div") `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 40px;
-  z-index: 1;
-  background-image: linear-gradient(
-    to bottom,
-    black 0%,
-    rgba(0, 0, 0, 0.738) 19%,
-    rgba(0, 0, 0, 0.541) 34%,
-    rgba(0, 0, 0, 0.382) 47%,
-    rgba(0, 0, 0, 0.278) 56.5%,
-    rgba(0, 0, 0, 0.194) 65%,
-    rgba(0, 0, 0, 0.126) 73%,
-    rgba(0, 0, 0, 0.075) 80.2%,
-    rgba(0, 0, 0, 0.042) 86.1%,
-    rgba(0, 0, 0, 0.021) 91%,
-    rgba(0, 0, 0, 0.008) 95.2%,
-    rgba(0, 0, 0, 0.002) 98.2%,
-    transparent 100%
-  );
-`;
-const OverlayMediaWrapper = styled("div") `
-  ${(props) => {
-    const { overlayMediaPosition } = props;
-    return css$1 `
-      display: flex;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      flex-direction: column;
-      align-items: ${overlayMediaPosition
-        ? overlayContentPositionAlignMapping[overlayMediaPosition]
-        : "center"};
-      justify-content: ${overlayMediaPosition
-        ? overlayContentPositionJustifyMapping[overlayMediaPosition]
-        : "center"};
-      height: 100%;
-    `;
-}}
-`;
-const OverlayMedia = styled("div") `
-  ${(props) => {
-    const { overlayMediaMaxHeight, overlayMediaMaxWidth, overlayMediaMargin } = props;
-    const breakpoints = getBreakpoints(props);
-    return css$1 `
-      position: absolute;
-      z-index: 1;
-      width: ${overlayMediaMaxWidth};
-      height: ${overlayMediaMaxHeight};
-      margin: ${overlayMediaMargin
-        ? typeof overlayMediaMargin === "string"
-            ? overlayMediaMargin
-            : overlayMediaMargin?.large
-        : "0"};
-
-      ${breakpoints?.down("lg")} {
-        margin: ${overlayMediaMargin
-        ? typeof overlayMediaMargin === "string"
-            ? overlayMediaMargin
-            : overlayMediaMargin?.medium
-        : "0"};
-      }
-
-      ${breakpoints?.down("md")} {
-        margin: ${overlayMediaMargin
-        ? typeof overlayMediaMargin === "string"
-            ? overlayMediaMargin
-            : overlayMediaMargin?.small
-        : "0"};
-      }
-
-      img,
-      video {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-      }
-    `;
-}}
-`;
-
-const Hero = React__default.forwardRef((props, ref) => {
-    const { heroHeight, children, headerText, captionText, headerFontSize, hasInvertTextColor, overlayContentWidth, textAlignment, darkeningMask, darkeningMaskColor = "#000000", darkeningMaskOpacity = 0, darkeningVignette, overlayMedia, overlayMediaPosition, overlayMediaMaxHeight, overlayMediaMaxWidth, overlayMediaMargin, backgroundFill, ...rest } = props;
-    // Determine if backgroundFill is a color string or a React node
-    const isBackgroundFillColorString = typeof backgroundFill === "string" && !isValidElement(backgroundFill);
-    const isBackgroundFillReactNode = isValidElement(backgroundFill);
-    return (jsxs(StyledHeroContainer, __assign({ ref: ref, heroHeight: heroHeight, backgroundFillColor: isBackgroundFillColorString ? backgroundFill : undefined }, rest, { children: [isBackgroundFillReactNode && (jsx(BackgroundFillContainer, { children: backgroundFill })), darkeningMask && (jsx(DarkeningMask, { darkeningMaskColor: darkeningMaskColor, darkeningMaskOpacity: darkeningMaskOpacity })), overlayMedia && (jsx(OverlayMediaWrapper, { overlayMediaPosition: overlayMediaPosition, children: jsx(OverlayMedia, { overlayMediaPosition: overlayMediaPosition, overlayMediaMaxHeight: overlayMediaMaxHeight, overlayMediaMaxWidth: overlayMediaMaxWidth, overlayMediaMargin: overlayMediaMargin, children: overlayMedia }) })), jsxs(OverlayContent, { overlayContentWidth: overlayContentWidth, textAlignment: textAlignment, children: [headerText && (jsx(HeroTitle, { headerFontSize: headerFontSize, hasInvertTextColor: hasInvertTextColor, children: headerText })), captionText && (jsx(HeroCaption, { hasInvertTextColor: hasInvertTextColor, children: captionText })), children && jsx(ContentSlot, { children: children })] }), darkeningVignette && jsx(DarkeningVignette, {})] })));
-});
-Hero.displayName = "Hero";
-
-const intentToColor$1 = {
-    default: "base",
-    negative: "negative",
-    notice: "notice",
-    positive: "positive"
-};
-const StyledIcon = styled(Icon) `
-  ${(props) => {
-    const iconSizes = getIconSizes(props);
-    return `
-      height: ${iconSizes?.xs.height}px;
-      width: ${iconSizes?.xs.width}px;
-    `;
-}}
-`;
-const StyledCheckboxDefaultIcon = styled("span") `
-  ${(props) => {
-    const { intent = "default" } = props;
-    const iconSizes = getIconSizes(props);
-    const borders = getBorders(props);
-    const borderColor = intentToColor$1[intent];
-    return `
-      height: ${iconSizes?.s.height}px;
-      width: ${iconSizes?.s.width}px;
-      border: ${borders?.[borderColor]?.default};
-      border-radius: 2px;
-    `;
-}}
-`;
-const StyledCheckboxCheckedIcon = styled("div") `
-  ${(props) => {
-    const iconSizes = getIconSizes(props);
-    const semanticColors = getSemanticColors(props);
-    return `
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: ${iconSizes?.s.height}px;
-      width: ${iconSizes?.s.width}px;
-      border-radius: 2px;
-      background-color: ${semanticColors?.accent?.foreground};
-
-      ${StyledIcon} {
-        fill: ${semanticColors?.base?.ornamentPrimaryInverse};
-      }
-    `;
-}}
-`;
-const StyledCheckbox = styled(Checkbox) `
-  ${(props) => {
-    const spaces = getSpaces(props);
-    return `
-      &.${checkboxClasses.root} {
-        ${focusVisibleA11yStyle(props)}
-        
-        padding: 0;
-        margin-right: ${spaces?.s}px;
-        border-radius: 0;
-
-        &:hover {
-          background-color: transparent;
-        }
-      }
-    `;
-}}
-`;
-const StyledLabelContainer$1 = styled("span") `
-  display: flex;
-  justify-content: start;
-  flex-direction: column;
-`;
-const StyledCheckboxLabel = styled("span") `
-  ${fontBodyXs$2}
-
-  ${(props) => {
-    const spaces = getSpaces(props);
-    return `
-      margin-top: -${spaces?.xxxs}px !important;
+      border: 1px dashed ${semanticColors?.base?.borderSecondary};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100px;
+      width: 100%;
     `;
 }}
 `;
-const StyledCheckboxCaption = styled("span") `
-  ${fontBodyXxs$1}
-
+const DarkeningVignette = styled("div") `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  z-index: 1;
+  background-image: linear-gradient(
+    to bottom,
+    black 0%,
+    rgba(0, 0, 0, 0.738) 19%,
+    rgba(0, 0, 0, 0.541) 34%,
+    rgba(0, 0, 0, 0.382) 47%,
+    rgba(0, 0, 0, 0.278) 56.5%,
+    rgba(0, 0, 0, 0.194) 65%,
+    rgba(0, 0, 0, 0.126) 73%,
+    rgba(0, 0, 0, 0.075) 80.2%,
+    rgba(0, 0, 0, 0.042) 86.1%,
+    rgba(0, 0, 0, 0.021) 91%,
+    rgba(0, 0, 0, 0.008) 95.2%,
+    rgba(0, 0, 0, 0.002) 98.2%,
+    transparent 100%
+  );
+`;
+const OverlayMediaWrapper = styled("div") `
   ${(props) => {
-    const semanticColors = getSemanticColors(props);
-    return `
-      color: ${semanticColors?.base?.textSecondary};
+    const { overlayMediaPosition } = props;
+    return css$1 `
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      flex-direction: column;
+      align-items: ${overlayMediaPosition
+        ? overlayContentPositionAlignMapping[overlayMediaPosition]
+        : "center"};
+      justify-content: ${overlayMediaPosition
+        ? overlayContentPositionJustifyMapping[overlayMediaPosition]
+        : "center"};
+      height: 100%;
     `;
 }}
 `;
-const disabledStyles$1 = (props) => {
-    const semanticColors = getSemanticColors(props);
-    const borders = getBorders(props);
-    return `
-    user-select: none;
-
-    ${StyledCheckboxDefaultIcon} {
-      border: ${borders?.base?.disabled};
-    }
-
-    ${StyledCheckboxCheckedIcon} {
-      background-color: ${semanticColors?.base?.ornamentDisabled};
-    }
-
-    ${StyledCheckboxCaption} {
-      color: ${semanticColors?.base?.textDisabled};
-    }
-
-    &:hover, &:active {
-      ${StyledCheckboxDefaultIcon} {
-        border: ${borders?.base?.disabled};
-      }
-
-      ${StyledCheckboxCheckedIcon} {
-        background-color: ${semanticColors?.base?.ornamentDisabled};
-      }
-    }
-  `;
-};
-const StyledFormControlLabel$1 = styled(FormControlLabel) `
+const OverlayMedia = styled("div") `
   ${(props) => {
-    const { disabled } = props;
-    const semanticColors = getSemanticColors(props);
-    const borders = getBorders(props);
-    return `
-      align-items: start;
-      margin-bottom: 0;
-      margin-left: 0;
-      margin-right: 0;
-      width: fit-content;
-
-      &:hover {
-        ${StyledCheckboxDefaultIcon} {
-          border: ${borders?.base?.hover};
-          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillPrimaryInteraction};
-        }
+    const { overlayMediaMaxHeight, overlayMediaMaxWidth, overlayMediaMargin } = props;
+    const breakpoints = getBreakpoints(props);
+    return css$1 `
+      position: absolute;
+      z-index: 1;
+      width: ${overlayMediaMaxWidth};
+      height: ${overlayMediaMaxHeight};
+      margin: ${overlayMediaMargin
+        ? typeof overlayMediaMargin === "string"
+            ? overlayMediaMargin
+            : overlayMediaMargin?.large
+        : "0"};
 
-        ${StyledCheckboxCheckedIcon} {
-          background-color: ${semanticColors?.accent?.fillInteraction};
-        }
+      ${breakpoints?.down("lg")} {
+        margin: ${overlayMediaMargin
+        ? typeof overlayMediaMargin === "string"
+            ? overlayMediaMargin
+            : overlayMediaMargin?.medium
+        : "0"};
       }
 
-      &:active {
-        ${StyledCheckboxDefaultIcon} {
-          border: ${borders?.base?.pressed};
-        }
-
-        ${StyledCheckboxCheckedIcon} {
-          background-color: ${semanticColors?.accent?.fillPressed};
-        }
+      ${breakpoints?.down("md")} {
+        margin: ${overlayMediaMargin
+        ? typeof overlayMediaMargin === "string"
+            ? overlayMediaMargin
+            : overlayMediaMargin?.small
+        : "0"};
       }
 
-      ${disabled && disabledStyles$1(props)}
+      img,
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
     `;
 }}
 `;
 
-/**
- * @see https://mui.com/material-ui/react-checkbox/
- */
-const InputCheckbox = (props) => {
-    const { caption, checkboxProps, disabled, intent = "default", label, stage, value, classes = EMPTY_OBJECT, className, ...rest } = props;
-    const { root: rootClassName, labelCaptionContainer: labelCaptionContainerClassName, label: labelClassName, caption: captionClassName, checkbox: checkboxClassName, checkboxCheckedIcon: checkboxCheckedIconClassName, checkboxDefaultIcon: checkboxDefaultIconClassName, checkboxIndeterminateIcon: checkboxIndeterminateIconClassName, } = classes;
-    let newProps;
-    switch (stage) {
-        case "checked":
-            newProps = {
-                ...rest,
-                checked: true,
-                color: "primary"
-            };
-            break;
-        case "unchecked":
-            newProps = {
-                ...rest,
-                checked: false,
-                color: "default"
-            };
-            break;
-        case "indeterminate":
-            newProps = {
-                ...rest,
-                checked: true,
-                color: "primary",
-                indeterminate: true
-            };
-            break;
-        default:
-            newProps = rest;
-    }
-    const finalLabel = caption ? (jsxs(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: [jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }), jsx(StyledCheckboxCaption, { className: cn(captionClassName), children: caption })] })) : (jsx(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }) }));
-    return (jsx(StyledFormControlLabel$1, { control: jsx(StyledCheckbox, __assign({ className: cn(checkboxClassName), checkedIcon: jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxCheckedIconClassName), children: jsx(StyledIcon, { sdsIcon: "Check", sdsSize: "xs" }) }), icon: jsx(StyledCheckboxDefaultIcon, { intent: intent, className: cn(checkboxDefaultIconClassName) }), indeterminateIcon: jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxIndeterminateIconClassName), children: jsx(StyledIcon, { sdsIcon: "Minus", sdsSize: "xs" }) }), intent: intent }, checkboxProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: cn(rootClassName, className) }));
-};
+const Hero = React__default.forwardRef((props, ref) => {
+    const { heroHeight, children, headerText, captionText, headerFontSize, hasInvertTextColor, overlayContentWidth, textAlignment, darkeningMask, darkeningMaskColor = "#000000", darkeningMaskOpacity = 0, darkeningVignette, overlayMedia, overlayMediaPosition, overlayMediaMaxHeight, overlayMediaMaxWidth, overlayMediaMargin, backgroundFill, ...rest } = props;
+    // Determine if backgroundFill is a color string or a React node
+    const isBackgroundFillColorString = typeof backgroundFill === "string" && !isValidElement(backgroundFill);
+    const isBackgroundFillReactNode = isValidElement(backgroundFill);
+    return (jsxs(StyledHeroContainer, __assign({ ref: ref, heroHeight: heroHeight, backgroundFillColor: isBackgroundFillColorString ? backgroundFill : undefined }, rest, { children: [isBackgroundFillReactNode && (jsx(BackgroundFillContainer, { children: backgroundFill })), darkeningMask && (jsx(DarkeningMask, { darkeningMaskColor: darkeningMaskColor, darkeningMaskOpacity: darkeningMaskOpacity })), overlayMedia && (jsx(OverlayMediaWrapper, { overlayMediaPosition: overlayMediaPosition, children: jsx(OverlayMedia, { overlayMediaPosition: overlayMediaPosition, overlayMediaMaxHeight: overlayMediaMaxHeight, overlayMediaMaxWidth: overlayMediaMaxWidth, overlayMediaMargin: overlayMediaMargin, children: overlayMedia }) })), jsxs(OverlayContent, { overlayContentWidth: overlayContentWidth, textAlignment: textAlignment, children: [headerText && (jsx(HeroTitle, { headerFontSize: headerFontSize, hasInvertTextColor: hasInvertTextColor, children: headerText })), captionText && (jsx(HeroCaption, { hasInvertTextColor: hasInvertTextColor, children: captionText })), children && jsx(ContentSlot, { children: children })] }), darkeningVignette && jsx(DarkeningVignette, {})] })));
+});
+Hero.displayName = "Hero";
 
 const intentToColor = {
     default: "base",
@@ -12505,11 +13540,13 @@ const StyledRadioCheckedIcon = styled("div") `
 const StyledRadioButton = styled(Radio) `
   ${(props) => {
     const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
     return `
       &.${radioClasses.root} {
         ${focusVisibleA11yStyle(props)}
         margin: 0 ${spaces?.s}px 0 0;
         padding: 0;
+        background-color: ${semanticColors?.base?.backgroundPrimary} !important;
       }
     `;
 }}
@@ -12847,7 +13884,7 @@ const applyIntentColor = (props, intent) => {
     }
   `;
 };
-const disabledStyled$1 = (props) => {
+const disabledStyled = (props) => {
     const borders = getBorders(props);
     const semanticColors = getSemanticColors(props);
     return css$1 `
@@ -12907,6 +13944,8 @@ const StyledInputBase = styled(TextField, {
     const semanticColors = getSemanticColors(props);
     return css$1 `
       display: block;
+      background-color: ${semanticColors?.base?.backgroundPrimary} !important;
+      border-radius: ${corners?.l}px;
 
       .${outlinedInputClasses.root} {
         width: 100%;
@@ -12954,7 +13993,7 @@ const StyledInputBase = styled(TextField, {
       ${intent === "negative" && applyIntentColor(props, "negative")}
       ${intent === "notice" && applyIntentColor(props, "notice")}
       ${intent === "positive" && applyIntentColor(props, "positive")}
-      ${disabled && disabledStyled$1(props)}
+      ${disabled && disabledStyled(props)}
     `;
 }}
 `;
@@ -12995,6 +14034,7 @@ const toggle = (props) => {
     const corners = getCorners(props);
     const shadows = getShadows(props);
     const iconSizes = getIconSizes(props);
+    const semanticColors = getSemanticColors(props);
     return `
     cursor: ${disabled ? "default" : "pointer"};
     border-radius: ${corners?.rounded}px;
@@ -13003,6 +14043,7 @@ const toggle = (props) => {
     line-height: 18px;
     padding: 0;
     overflow: visible;
+    background-color: ${semanticColors?.base?.backgroundPrimary} !important;
 
     .${switchClasses.switchBase} {
       ${focusVisibleA11yStyle(props)}
@@ -13423,7 +14464,7 @@ const Legend = (props) => {
         }) })));
 };
 
-const doNotForwardProps$i = ["sdsStyle", "sdsSize", "fontWeight"];
+const doNotForwardProps$g = ["sdsStyle", "sdsSize", "fontWeight"];
 const defaultStyle = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$1 `
@@ -13471,7 +14512,7 @@ const extraSmallStyle = (props) => {
 };
 const StyledLink = styled(Link$1, {
     shouldForwardProp: (prop) => {
-        return !doNotForwardProps$i.includes(prop.toString());
+        return !doNotForwardProps$g.includes(prop.toString());
     }
 }) `
   all: unset;
@@ -13502,9 +14543,9 @@ const Link = forwardRef((props, ref) => {
 });
 
 // (thuang): Please keep this in sync with the props used in `ListExtraProps`
-const doNotForwardProps$h = ["marginBottom", "ordered"];
+const doNotForwardProps$f = ["marginBottom", "ordered"];
 const StyledList = styled(List$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$h.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$f.includes(prop)
 }) `
   .MuiListSubheader-root {
     ${propsToMarginBottom$1}
@@ -13549,9 +14590,9 @@ const fontBodyXs$1 = fontBody("xs");
 const fontBodyXxs = fontBody("xxs");
 const fontBodyXxxs = fontBody("xxxs");
 // (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
-const doNotForwardProps$g = ["marginBottom", "fontSize", "ordered"];
+const doNotForwardProps$e = ["marginBottom", "fontSize", "ordered"];
 const StyledListItem = styled(ListItem$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$g.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$e.includes(prop)
 }) `
   ${propsToMarginBottom}
   ${propsToFontBody}
@@ -13701,9 +14742,9 @@ const tag = (props) => {
     }
   `;
 };
-const doNotForwardProps$f = ["sdsStyle"];
+const doNotForwardProps$d = ["sdsStyle"];
 const StyledLoadingIndicator = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$f.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
 }) `
   ${(props) => {
     const { sdsStyle } = props;
@@ -13725,57 +14766,20 @@ const LoadingIndicator = ({ "aria-label": ariaLabel, sdsStyle, }) => {
     return (jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsx(Icon, { sdsIcon: "Loading", sdsSize: "l" }), jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
 };
 
-const StyledMenu = styled(Menu$1) `
-  & {
-    .${menuClasses.paper} {
-      ${(props) => {
-    const spaces = getSpaces(props);
-    const corners = getCorners(props);
-    const semanticColors = getSemanticColors(props);
-    return `
-          background-color: ${semanticColors?.base?.surfacePrimary};
-          background-image: none;
-          padding: ${spaces?.xs}px;
-          border-radius: ${corners?.l}px;
-        `;
-}}
-    }
-
-    .MuiList-padding {
-      padding: 0;
-    }
-  }
-`;
-
-const ANCHOR_ORIGIN = {
-    horizontal: "center",
-    vertical: "bottom"
-};
-const TRANSFORM_ORIGIN = {
-    horizontal: "center",
-    vertical: "top"
-};
-/**
- * @see https://mui.com/material-ui/react-menu/
- */
-const Menu = (props) => {
-    return (jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
-};
-
 const StyledMenuItem = styled(MenuItem) `
   width: 100%;
 `;
-const doNotForwardProps$e = ["search", "InputBaseProps", "keepSearchOnSelect"];
+const doNotForwardProps$c = ["search", "InputBaseProps", "keepSearchOnSelect"];
 // (thuang): Casting the type to `Autocomplete`
 //  per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
 const StyledAutocomplete = styled(Autocomplete$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$e.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$c.includes(prop)
 }) `
   ${({ search }) => !search && "height: 0; margin: 0 !important;"}
   width: 100%;
 `;
 const InputBaseWrapper = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$e.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$c.includes(prop)
 }) `
   ${(props) => {
     const { search } = props;
@@ -13802,7 +14806,7 @@ const InputBaseWrapper = styled("div", {
 }}
 `;
 const StyledMenuInputSearch = styled(InputSearch, {
-    shouldForwardProp: (prop) => !doNotForwardProps$e.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$c.includes(prop)
 }) `
   && {
     margin: 0;
@@ -13875,9 +14879,9 @@ const MenuSelect = (props) => {
     }
 };
 
-const doNotForwardProps$d = ["hasInvertedStyle", "isNarrow"];
+const doNotForwardProps$b = ["hasInvertedStyle", "isNarrow"];
 const StyledFooter = styled("footer", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   ${(props) => {
     const { isNarrow } = props;
@@ -13901,7 +14905,7 @@ const StyledFooter = styled("footer", {
 }}
 `;
 const StyledLogoWrapper$1 = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -13939,7 +14943,7 @@ const StyledLogoWrapper$1 = styled("div", {
   }
 `;
 const StyledNavSection = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   ${(props) => {
     const { isNarrow } = props;
@@ -13962,7 +14966,7 @@ const StyledNavSection = styled("div", {
 }}
 `;
 const StyledTopSection = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   ${(props) => {
     const { isNarrow } = props;
@@ -13997,7 +15001,7 @@ const StyledTopSection = styled("div", {
 }}
 `;
 const StyledLinkSection = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14034,7 +15038,7 @@ const StyledMobileLinkRow = styled.div `
 }}
 `;
 const StyledImageSection = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14070,7 +15074,7 @@ const StyledMobileImageRow = styled.div `
 }}
 `;
 const StyledBottomSection = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14094,7 +15098,7 @@ const StyledBottomSection = styled("div", {
 }}
 `;
 
-const doNotForwardProps$c = ["hasInvertedStyle", "isNarrow"];
+const doNotForwardProps$a = ["hasInvertedStyle", "isNarrow"];
 const NarrowNavItemLinkStyles = (props) => {
     const semanticColors = getSemanticColors(props);
     const spaces = getSpaces(props);
@@ -14117,7 +15121,7 @@ const NarrowNavItemLinkStyles = (props) => {
   `;
 };
 const StyledNavItemLink = styled(Link, {
-    shouldForwardProp: (prop) => !doNotForwardProps$c.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
 }) `
   ${fontBodyMediumS}
 
@@ -14160,9 +15164,9 @@ const StyledNavItemLink = styled(Link, {
 const NavItem = memo(({ item, hasInvertedStyle, isNarrow }) => (jsx(StyledNavItemLink, __assign({ href: item.url, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, component: item.component }, item.linkProps, { children: item.label }), item.label)));
 NavItem.displayName = "NavItem";
 
-const doNotForwardProps$b = ["hasInvertedStyle", "showDivider"];
+const doNotForwardProps$9 = ["hasInvertedStyle", "showDivider"];
 const StyledLinkItemLink = styled(Link, {
-    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop)
 }) `
   ${fontBodyXxs$1}
 
@@ -14211,7 +15215,7 @@ const StyledLinkItemLink = styled(Link, {
 }}
 `;
 const StyledDivider$1 = styled(Divider, {
-    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop)
 }) `
   ${(props) => {
     const semanticColors = getSemanticColors(props);
@@ -14379,7 +15383,7 @@ function NavigationFooter({ backgroundAppearance = "matchBackground", images, lo
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable sonarjs/no-duplicate-string */
 const TOOLBAR_HEIGHT = 48;
-const doNotForwardProps$a = [
+const doNotForwardProps$8 = [
     "hasInvertedStyle",
     "isNarrow",
     "primaryNavPosition",
@@ -14397,7 +15401,7 @@ const StyledTopComponentSlot = styled("div") `
   z-index: 2100;
 `;
 const StyledAppBar = styled(AppBar, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const colors = getSemanticColors(props);
@@ -14428,7 +15432,7 @@ const NarrowToolbar = (props) => {
   `;
 };
 const StyledToolbar = styled(Toolbar, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { isNarrow } = props;
@@ -14445,7 +15449,7 @@ const StyledToolbar = styled(Toolbar, {
 }}
 `;
 styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const shadows = getShadows(props);
@@ -14461,7 +15465,7 @@ styled("div", {
 }}
 `;
 styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const colors = getSemanticColors(props);
@@ -14477,7 +15481,7 @@ styled("div", {
 }}
 `;
 const StyledHeaderButton = styled(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   ${(props) => {
     const { sdsType, hasInvertedStyle } = props;
@@ -14519,7 +15523,7 @@ const invertedNarrowButtonStyles = (props) => {
   `;
 };
 const StyledNarrowIconButton = styled(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, isNarrow } = props;
@@ -14547,7 +15551,7 @@ const invertedWideButtonStyles = (props) => {
   `;
 };
 const StyledWideIconButton = styled(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -14558,7 +15562,7 @@ const StyledWideIconButton = styled(Button, {
 }}
 `;
 const StyledLogoLinkWrapper = styled(Link, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14584,7 +15588,7 @@ const NarrowTitleContainer = () => {
   `;
 };
 const StyledTitleContainer = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -14606,7 +15610,7 @@ const StyledTitleContainer = styled("div", {
 }}
 `;
 const StyledTitleTagWrapper = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -14627,7 +15631,7 @@ const StyledTag$2 = styled(Tag) `
   margin: 0;
 `;
 const StyledPrimaryNavContainer = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14650,7 +15654,7 @@ const StyledPrimaryNavContainer = styled("div", {
 }}
 `;
 const StyledSearch = styled(InputSearch, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   margin: 0;
   width: 100%;
@@ -14785,7 +15789,7 @@ const NarrowButtonStyles = (props) => {
   `;
 };
 const StyledButtonSection = styled("section", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -14803,7 +15807,7 @@ const StyledButtonSection = styled("section", {
 }}
 `;
 const StyledDrawer$1 = styled(Drawer, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle", "topOffset"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle", "topOffset"].includes(prop)
 }) `
   ${(props) => {
     const colors = getSemanticColors(props);
@@ -14824,7 +15828,7 @@ const StyledDrawer$1 = styled(Drawer, {
 }}
 `;
 const StyledDrawerContent = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -14838,7 +15842,7 @@ const StyledDrawerContent = styled("div", {
 }}
 `;
 const StyledNarrowHamburgerMenuButton = styled(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -14883,7 +15887,7 @@ const DrawerAccordionStyles = (props) => {
   `;
 };
 const StyledAccordion = styled(Accordion, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   padding: 0 !important;
   width: 100%;
@@ -15033,7 +16037,7 @@ const StyledAccordion = styled(Accordion, {
 }}
 `;
 const StyledSectionDivider = styled(Divider, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const semanticColors = getSemanticColors(props);
@@ -15048,7 +16052,7 @@ const StyledSectionDivider = styled(Divider, {
 `;
 // Hover Drawer Components for sdsStyle="drawer"
 const StyledMegaMenuDrawer = styled(Drawer, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle", "topOffset"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle", "topOffset"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, topOffset = 0 } = props;
@@ -15084,7 +16088,7 @@ const StyledMegaMenuDrawer = styled(Drawer, {
 }}
 `;
 const StyledMegaMenuContent = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -15106,7 +16110,7 @@ const StyledMegaMenuContent = styled("div", {
 }}
 `;
 const StyledHoverDrawerColumn = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle", "totalColumns"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle", "totalColumns"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -15145,7 +16149,7 @@ const StyledContentWrapper = styled("div") `
 }}
 `;
 const StyledHoverDrawerColumnHeader = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -15163,7 +16167,7 @@ const StyledHoverDrawerColumnHeader = styled("div", {
 }}
 `;
 const StyledHoverDrawerItem = styled(Button, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, hasDetails } = props;
@@ -15207,7 +16211,7 @@ const StyledHoverDrawerItem = styled(Button, {
 }}
 `;
 const StyledHoverDrawerItemContent = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -15220,7 +16224,7 @@ const StyledHoverDrawerItemContent = styled("div", {
 }}
 `;
 const StyledHoverDrawerItemIcon = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const semanticColors = getSemanticColors(props);
@@ -15240,7 +16244,7 @@ const StyledHoverDrawerItemIcon = styled("div", {
 }}
 `;
 const StyledHoverDrawerItemText = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${() => {
     return css$3 `
@@ -15253,7 +16257,7 @@ const StyledHoverDrawerItemText = styled("div", {
 }}
 `;
 const EmptyIcon = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasDetails } = props;
@@ -15268,7 +16272,7 @@ const EmptyIcon = styled("div", {
 }}
 `;
 const StyledHoverDrawerItemTitle = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, hasDetails } = props;
@@ -15293,7 +16297,7 @@ const StyledHoverDrawerItemTitle = styled("div", {
 }}
 `;
 const StyledHoverDrawerItemDetails = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -15311,7 +16315,7 @@ const StyledHoverDrawerItemDetails = styled("div", {
 }}
 `;
 const StyledHoverDrawerActions = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -15350,12 +16354,12 @@ const StyledButton = styled(Button) `
 }}
 `;
 const StyledHoverDrawerContainer = styled("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   position: relative;
 `;
 
-const doNotForwardProps$9 = [
+const doNotForwardProps$7 = [
     "active",
     "hasInvertedStyle",
     "isNarrow",
@@ -15416,7 +16420,7 @@ const NarrowPrimaryNavItem = (props) => {
   `;
 };
 styled(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -15481,7 +16485,7 @@ const NarrowStyledLabel = (props) => {
   `;
 };
 const StyledLabel$1 = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, active, isNarrow } = props;
@@ -15514,7 +16518,7 @@ const StyledLabel$1 = styled("span", {
 `;
 
 /* eslint-disable sonarjs/cognitive-complexity */
-const doNotForwardProps$8 = [
+const doNotForwardProps$6 = [
     "active",
     "hasInvertedStyle",
     "isNarrow",
@@ -15580,7 +16584,7 @@ const NarrowNavItemStyles = (props) => {
   `;
 };
 const UnifiedNavItem = styled(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -15662,7 +16666,7 @@ const UnifiedNavItem = styled(Button, {
 `;
 // StyledLabel for primary nav items (secondary nav doesn't use this)
 const StyledLabel = styled("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, active, isNarrow } = props;
@@ -15692,7 +16696,7 @@ const StyledLabel = styled("span", {
 }}
 `;
 
-const doNotForwardProps$7 = [
+const doNotForwardProps$5 = [
     "isNarrow",
     "hasSection",
     "hasInvertedStyle",
@@ -15708,7 +16712,7 @@ const NarrowStyledSection = (props) => {
   `;
 };
 const StyledSection = styled("section", {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -15724,7 +16728,7 @@ const StyledSection = styled("section", {
 }}
 `;
 const StyledSectionHeader = styled(ListSubheader, {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   ${(props) => {
     const { isNarrow, hasInvertedStyle, sdsStyle } = props;
@@ -15769,7 +16773,7 @@ const StyledSectionHeader = styled(ListSubheader, {
 }}
 `;
 const StyledAccordionDetails = styled(AccordionDetails, {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   ${(props) => {
     const { sdsStyle } = props;
@@ -15785,7 +16789,7 @@ const StyledAccordionDetails = styled(AccordionDetails, {
 }}
 `;
 const StyledAccordionSection = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   ${(props) => {
     const { sdsStyle, hasInvertedStyle } = props;
@@ -15807,7 +16811,7 @@ const StyledAccordionSection = styled("div", {
 }}
 `;
 const StyledDivider = styled(Divider, {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   ${(props) => {
     const { hasSection, isNarrow, hasInvertedStyle } = props;
@@ -15916,7 +16920,7 @@ function DrawerContent({ drawerItems, sectionProps, section, hasMultipleSections
                 }) }))] }));
 }
 
-const doNotForwardProps$6 = [
+const doNotForwardProps$4 = [
     "hasInvertedStyle",
     "hasCaption",
     "iconSize",
@@ -15925,7 +16929,7 @@ const doNotForwardProps$6 = [
     "sdsStyle",
 ];
 const StyledDrawerNavItem = styled(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -15977,7 +16981,7 @@ const StyledDrawerNavItem = styled(Button, {
 }}
 `;
 const StyledDrawerNavItemContent = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -15992,7 +16996,7 @@ const StyledDrawerNavItemContent = styled("div", {
 }}
 `;
 const StyledDrawerNavItemText = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const { hasDetails, hasInvertedStyle } = props;
@@ -16011,7 +17015,7 @@ const StyledDrawerNavItemText = styled("div", {
 }}
 `;
 const StyledDrawerNavItemCaption = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const semanticColors = getSemanticColors(props);
@@ -16031,7 +17035,7 @@ const StyledDrawerNavItemCaption = styled("div", {
 }}
 `;
 const StyledIconWrapper = styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const { iconSize } = props;
@@ -17021,9 +18025,9 @@ const useScrollStopListener = (callback, timeout = 50) => {
     }, [timeout]);
 };
 
-const doNotForwardProps$5 = ["items", "sdsIndicatorColor", "width", "isSubItem"];
+const doNotForwardProps$3 = ["items", "sdsIndicatorColor", "width", "isSubItem"];
 const StyledTabs$1 = styled(Tabs$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
 }) `
   ${(props) => {
     const { width = "100%" } = props;
@@ -17062,7 +18066,7 @@ const StyledTabs$1 = styled(Tabs$1, {
 }}
 `;
 const StyledTab$1 = styled(Tab$1, {
-    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
 }) `
   ${fontBodyMediumXs}
 
@@ -17258,451 +18262,185 @@ const NavigationJumpTo = forwardRef((props, ref) => {
             targetItem?.elementRef?.current?.scrollIntoView({
                 behavior: "smooth",
                 block: "start"
-            });
-        }
-        // Update the tab value to newValue to adjust the position of the tabsIndicator
-        setFirstTabIndexInview(newValue);
-        // Invoke the custom onChange prop
-        handleOnChange(newValue, event, "click");
-    };
-    // Observe changes in the sectionIsInView object to update the tabs value
-    // based on the index of the visible sections in the viewport.
-    useEffect(() => {
-        // Retrieve the index of the first section that is intersecting with the viewport.
-        const flattenedSectionInView = Object.values(sectionIsInView).findIndex((section) => section.isInView);
-        // Convert flattened index back to tab index
-        const tabSectionInView = tabToFlattenedIndexMap.findIndex((flatIndex) => flatIndex === flattenedSectionInView);
-        // Update the tabs value only if a section is present in the viewport
-        // and no navigation item has been clicked, preventing updates during window scroll
-        // and unnecessary movement of the tabs indicator.
-        if (tabSectionInView > -1 && !navItemClicked) {
-            setFirstTabIndexInview(tabSectionInView);
-            // Invoke the custom onChange prop
-            handleOnChange(tabSectionInView, {
-                target: flattenedItems[flattenedSectionInView],
-                type: "scroll"
-            }, "scroll");
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        handleOnChange,
-        flattenedItems,
-        sectionIsInView,
-        tabToFlattenedIndexMap,
-    ]);
-    // Set navItemClicked to false to re-enable the option
-    // to update the tab value based on scroll.
-    useScrollStopListener(() => {
-        setNavItemClicked(false);
-    });
-    return (jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", width: width }, rest, { children: items.map((item, itemIndex) => createTabsForItem(item, itemIndex)) })));
-});
-
-const fontBodyXs = fontBody("xs");
-const doNotForwardProps$4 = ["slideDirection"];
-const StyledNotification = styled(Alert$2, {
-    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
-}) `
-  ${fontBodyXs}
-
-  ${(props) => {
-    const { intent = "info" } = props;
-    const spaces = getSpaces(props);
-    const shadows = getShadows(props);
-    const corners = getCorners(props);
-    const semanticColors = getSemanticColors(props);
-    const iconColor = semanticColors?.[intent]?.ornament ?? "black";
-    const backgroundColor = semanticColors?.[intent]?.surfaceSecondary ?? "white";
-    return `
-      position: relative;
-      overflow: hidden;
-      background-color: ${backgroundColor};
-      max-width: 480px;
-      min-width: 280px;
-      box-sizing: border-box;
-      margin: ${spaces?.m}px 0;
-      border-radius: ${corners?.xl}px;
-      color: ${semanticColors?.base?.textPrimary};
-      padding: ${spaces?.m}px ${spaces?.m}px ${spaces?.m}px ${spaces?.l}px;
-      align-items: flex-start;
-      box-shadow: ${shadows?.s};
-
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: ${spaces?.xxs}px;
-        height: 100%;
-        background-color: ${semanticColors?.[intent]?.ornament};
-      }
-
-      .MuiAlert-icon {
-        margin-top: ${spaces?.xxxs}px;
-        margin-right: ${spaces?.s}px;
-        padding: 0;
-        path {
-          fill: ${iconColor};
-        }
-      }
-
-      .MuiAlert-message {
-        padding: 0;
-        margin-right: ${spaces?.m}px;
-        width: 100%;
-
-        > * {
-          margin: ${spaces?.m}px 0px;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-
-        button {
-          display: block;
-        }
-      }
-
-      .MuiAlert-action {
-        margin-right: 0;
-        padding: 0;
-        align-items: flex-start;
-        margin-top: ${spaces?.xxs}px;
-
-        > button {
-            padding: 0;
-          }
-        }
-      }
-    `;
-}}
-`;
-const StyledButtonWrapper = styled("div") `
-  ${(props) => {
-    const { buttonPosition = "right" } = props;
-    return `
-      display: flex;
-      justify-content: ${buttonPosition === "left" ? "flex-start" : "flex-end"};
-    `;
-}}
-`;
-
-/**
- * @see https://mui.com/material-ui/react-alert/
- */
-const Notification = ({ autoDismiss, children, dismissed, slideDirection = "left", intent, onClose, buttonOnClick, buttonText, buttonPosition, icon, sdsIconProps, ...rest }) => {
-    const [hide, setHide] = useState(dismissed);
-    // remove prop used only for stories
-    const passedProps = { ...rest };
-    delete passedProps.extraContent;
-    useEffect(() => {
-        setHide(dismissed);
-        if (autoDismiss) {
-            const timeout = typeof autoDismiss === "boolean" ? 8000 : autoDismiss;
-            setTimeout(() => {
-                setHide(true);
-            }, timeout);
-        }
-    }, [dismissed, autoDismiss]);
-    const handleClose = (event) => {
-        setHide(true);
-        if (onClose)
-            onClose(event);
-    };
-    const getIcon = () => {
-        if (icon !== undefined) {
-            if (typeof icon !== "string") {
-                return icon;
-            }
-            else {
-                return (jsx(Icon, __assign({ sdsSize: "s", sdsIcon: icon }, sdsIconProps)));
-            }
-        }
-        else {
-            switch (intent) {
-                case "positive":
-                    return jsx(Icon, { sdsSize: "s", sdsIcon: "CheckCircle" });
-                case "info":
-                    return jsx(Icon, { sdsSize: "s", sdsIcon: "InfoCircle" });
-                default:
-                    return jsx(Icon, { sdsSize: "s", sdsIcon: "ExclamationMarkCircle" });
-            }
-        }
-    };
-    return (jsx(Fragment, { children: jsx(Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsx(Box, { children: jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsx(Button, { onClick: handleClose, sdsStyle: "minimal", sdsType: "secondary", "data-testid": "notificationCloseButton", children: jsx(Icon, { sdsIcon: "XMark", sdsSize: "s" }) })) : null, icon: getIcon(), className: "elevated", intent: intent, slideDirection: slideDirection }, passedProps, { children: [children, buttonOnClick !== undefined && (jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsx(Button, { sdsStyle: "minimal", sdsType: "secondary", size: "medium", onClick: buttonOnClick, children: buttonText }) }))] })) }) }) }));
-};
-
-const doNotForwardProps$3 = [
-    "sdsStyle",
-    "selected",
-    "onPageChange",
-    "onNextPage",
-    "onPreviousPage",
-    "goToPage",
-    "totalCount",
-    "siblingCount",
-    "currentPage",
-    "pageSize",
-    "truncateDropdown",
-];
-const StyledPaginationButton = styled(Button) `
-  ${(props) => {
-    const semanticColors = getSemanticColors(props);
-    return `
-      width: 28px;
-      height: 28px;
-      cursor: "pointer";
-
-      & .MuiSvgIcon-root {
-        width: 12px;
-        color: ${semanticColors?.base?.ornamentSecondary};
-      }
-
-      &:hover {
-        & .MuiSvgIcon-root {
-          color: ${semanticColors?.base?.ornamentSecondaryInteraction}
+            });
         }
-      }
-    `;
-}}
-`;
-const StyledPaginationChevronList = styled("li", {
-    shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
-}) `
-  ${(props) => {
-    const { disabled, sdsStyle } = props;
-    const spaces = getSpaces(props);
-    const semanticColors = getSemanticColors(props);
-    const corners = getCorners(props);
-    return `
-      width: 28px;
-      height: 28px;
-      cursor: ${disabled ? "auto" : "pointer"};
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: ${sdsStyle === "round" ? corners?.rounded : corners?.m}px;
-
-      &[data-order="first"] {
-        margin-right: ${spaces?.m}px;
-      }
-
-      &[data-order="last"] {
-        margin-left: ${spaces?.m}px;
-      }
-
-      & .MuiSvgIcon-root {
-        color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondary};
-      }
-
-      &:hover {
-        background-color: ${disabled ? "transparent" : semanticColors?.base?.fillPrimaryInteraction};
-
-        & .MuiSvgIcon-root {
-          color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryInteraction}
+        // Update the tab value to newValue to adjust the position of the tabsIndicator
+        setFirstTabIndexInview(newValue);
+        // Invoke the custom onChange prop
+        handleOnChange(newValue, event, "click");
+    };
+    // Observe changes in the sectionIsInView object to update the tabs value
+    // based on the index of the visible sections in the viewport.
+    useEffect(() => {
+        // Retrieve the index of the first section that is intersecting with the viewport.
+        const flattenedSectionInView = Object.values(sectionIsInView).findIndex((section) => section.isInView);
+        // Convert flattened index back to tab index
+        const tabSectionInView = tabToFlattenedIndexMap.findIndex((flatIndex) => flatIndex === flattenedSectionInView);
+        // Update the tabs value only if a section is present in the viewport
+        // and no navigation item has been clicked, preventing updates during window scroll
+        // and unnecessary movement of the tabs indicator.
+        if (tabSectionInView > -1 && !navItemClicked) {
+            setFirstTabIndexInview(tabSectionInView);
+            // Invoke the custom onChange prop
+            handleOnChange(tabSectionInView, {
+                target: flattenedItems[flattenedSectionInView],
+                type: "scroll"
+            }, "scroll");
         }
-      }
-
-      ${focusVisibleA11yStyle(props)}
-    `;
-}}
-`;
-const StyledPagination = styled("ul", {
-    shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
-}) `
-  ${fontBodyS$1}
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0;
-  margin: 0;
-  & li {
-    list-style: none;
-  }
-`;
-const selectedPageStyle = (props) => {
-    const semanticColors = getSemanticColors(props);
-    return css$1 `
-    background-color: ${semanticColors?.base?.fillPrimaryInteraction};
-    color: ${semanticColors?.base?.textPrimary};
-    box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        handleOnChange,
+        flattenedItems,
+        sectionIsInView,
+        tabToFlattenedIndexMap,
+    ]);
+    // Set navItemClicked to false to re-enable the option
+    // to update the tab value based on scroll.
+    useScrollStopListener(() => {
+        setNavItemClicked(false);
+    });
+    return (jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", width: width }, rest, { children: items.map((item, itemIndex) => createTabsForItem(item, itemIndex)) })));
+});
 
-    ${fontTabularSemiboldS(props)}
-  `;
-};
-const Page = styled("li", {
-    shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
+const fontBodyXs = fontBody("xs");
+const doNotForwardProps$2 = ["slideDirection"];
+const StyledNotification = styled(Alert$2, {
+    shouldForwardProp: (prop) => !doNotForwardProps$2.includes(prop)
 }) `
-  ${fontTabularMediumS}
+  ${fontBodyXs}
 
   ${(props) => {
-    const { selected, sdsStyle } = props;
+    const { intent = "info" } = props;
     const spaces = getSpaces(props);
+    const shadows = getShadows(props);
     const corners = getCorners(props);
     const semanticColors = getSemanticColors(props);
-    return css$1 `
-      color: ${semanticColors?.base?.textSecondary};
-      cursor: pointer;
-      list-style: none;
-      padding: 0 ${spaces?.s}px;
-      min-width: 28px;
-      height: 28px;
-      margin-right: ${spaces?.s}px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: ${sdsStyle === "round" ? corners?.rounded : corners?.l}px;
-      user-select: none;
-      &:hover {
-        background-color: ${semanticColors?.base?.fillPrimaryInteraction};
-        color: ${semanticColors?.base?.textPrimary};
-      }
+    const iconColor = semanticColors?.[intent]?.ornament ?? "black";
+    const backgroundColor = semanticColors?.[intent]?.surfaceSecondary ?? "white";
+    return `
+      position: relative;
+      overflow: hidden;
+      background-color: ${backgroundColor};
+      max-width: 480px;
+      min-width: 280px;
+      box-sizing: border-box;
+      margin: ${spaces?.m}px 0;
+      border-radius: ${corners?.xl}px;
+      color: ${semanticColors?.base?.textPrimary};
+      padding: ${spaces?.m}px ${spaces?.m}px ${spaces?.m}px ${spaces?.l}px;
+      align-items: flex-start;
+      box-shadow: ${shadows?.s};
 
-      &:nth-last-of-type(-n + 2) {
-        margin-right: 0;
+      &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: ${spaces?.xxs}px;
+        height: 100%;
+        background-color: ${semanticColors?.[intent]?.ornament};
       }
 
-      ${selected && selectedPageStyle(props)}
-      ${focusVisibleA11yStyle(props)}
-    `;
-}}
-`;
-const StyledPage = styled(Page) `
-  width: 28px;
-  max-width: 28px;
-`;
+      .MuiAlert-icon {
+        margin-top: ${spaces?.xxxs}px;
+        margin-right: ${spaces?.s}px;
+        padding: 0;
+        path {
+          fill: ${iconColor};
+        }
+      }
 
-const StyledPaginationDropdownMenu = styled(Menu) `
-  & .MuiPaper-root {
-    max-height: 120px;
-  }
-`;
+      .MuiAlert-message {
+        padding: 0;
+        margin-right: ${spaces?.m}px;
+        width: 100%;
 
-const PageListDropdown = (props) => {
-    const { pageList, onPageChange, sdsStyle } = props;
-    const [anchorEl, setAnchorEl] = useState(null);
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    return (jsxs(StyledPage, { sdsStyle: sdsStyle, children: [jsx(StyledPaginationButton, { "aria-label": "Go to a page", onClick: handleClick, size: "small", sdsStyle: "minimal", sdsType: "secondary", backgroundOnHover: false, children: jsx(Icon, { sdsIcon: "DotsHorizontal", sdsSize: "s" }) }), jsx(StyledPaginationDropdownMenu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: pageList.map((page) => {
-                    return (jsx(MenuItem, { onClick: () => {
-                            onPageChange(page);
-                            handleClose();
-                        }, sdsType: "action", children: page }, page));
-                }) })] }));
-};
+        > * {
+          margin: ${spaces?.m}px 0px;
 
-const range = (start, end) => {
-    const length = end - start + 1;
-    return Array.from({ length }, (_, idx) => idx + start);
-};
-const usePagination = ({ totalCount, pageSize, siblingCount = 1, currentPage, }) => {
-    return useMemo(() => {
-        const totalPageCount = Math.ceil(totalCount / pageSize);
-        // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
-        const totalPageNumbers = siblingCount + 5;
-        /*
-          If the number of pages is less than the page numbers we want to show in our
-          paginationComponent, we return the range [1..totalPageCount]
-        */
-        if (totalPageNumbers >= totalPageCount) {
-            return range(1, totalPageCount);
-        }
-        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPageCount);
-        /*
-          We do not want to show dots if there is only one position left
-          after/before the left/right page count as that would lead to a change of our Pagination
-          component size which we do not want
-        */
-        const shouldShowLeftDots = leftSiblingIndex > 2;
-        const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-        const firstPageIndex = 1;
-        const lastPageIndex = totalPageCount;
-        if (!shouldShowLeftDots && shouldShowRightDots) {
-            const leftItemCount = 3 + 2 * siblingCount;
-            const leftRange = range(1, leftItemCount);
-            const rightDotsRange = range(leftItemCount + 1, totalPageCount - 1);
-            return [...leftRange, rightDotsRange, totalPageCount];
+          &:last-child {
+            margin-bottom: 0;
+          }
         }
-        if (shouldShowLeftDots && !shouldShowRightDots) {
-            const rightItemCount = 3 + 2 * siblingCount;
-            const rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
-            const leftDotsRange = range(2, totalPageCount - rightItemCount);
-            return [firstPageIndex, leftDotsRange, ...rightRange];
+
+        button {
+          display: block;
         }
-        if (shouldShowLeftDots && shouldShowRightDots) {
-            const middleRange = range(leftSiblingIndex, rightSiblingIndex);
-            const leftDotsRange = range(2, leftSiblingIndex - 1);
-            const rightDotsRange = range(rightSiblingIndex + 1, totalPageCount - 1);
-            return [
-                firstPageIndex,
-                leftDotsRange,
-                ...middleRange,
-                rightDotsRange,
-                lastPageIndex,
-            ];
+      }
+
+      .MuiAlert-action {
+        margin-right: 0;
+        padding: 0;
+        align-items: flex-start;
+        margin-top: ${spaces?.xxs}px;
+
+        > button {
+            padding: 0;
+          }
         }
-    }, [totalCount, pageSize, siblingCount, currentPage]);
-};
+      }
+    `;
+}}
+`;
+const StyledButtonWrapper = styled("div") `
+  ${(props) => {
+    const { buttonPosition = "right" } = props;
+    return `
+      display: flex;
+      justify-content: ${buttonPosition === "left" ? "flex-start" : "flex-end"};
+    `;
+}}
+`;
 
-const PaginationPageList = (paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage) => {
-    function handlePageKeyDown(event, pageNumber) {
-        if (event.key === "Enter" || event.code === "Space") {
-            onPageChange(pageNumber);
+/**
+ * @see https://mui.com/material-ui/react-alert/
+ */
+const Notification = ({ autoDismiss, children, dismissed, slideDirection = "left", intent, onClose, buttonOnClick, buttonText, buttonPosition, icon, sdsIconProps, ...rest }) => {
+    const [hide, setHide] = useState(dismissed);
+    // remove prop used only for stories
+    const passedProps = { ...rest };
+    delete passedProps.extraContent;
+    useEffect(() => {
+        setHide(dismissed);
+        if (autoDismiss) {
+            const timeout = typeof autoDismiss === "boolean" ? 8000 : autoDismiss;
+            setTimeout(() => {
+                setHide(true);
+            }, timeout);
         }
-    }
-    return paginationRange.map((pageNumber) => {
-        if (Array.isArray(pageNumber)) {
-            if (truncateDropdown) {
-                return (jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
+    }, [dismissed, autoDismiss]);
+    const handleClose = (event) => {
+        setHide(true);
+        if (onClose)
+            onClose(event);
+    };
+    const getIcon = () => {
+        if (icon !== undefined) {
+            if (typeof icon !== "string") {
+                return icon;
+            }
+            else {
+                return (jsx(Icon, __assign({ sdsSize: "s", sdsIcon: icon }, sdsIconProps)));
             }
-            return (jsx(Page, { sdsStyle: sdsStyle, children: jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, size: "small", sdsStyle: "minimal", sdsType: "primary", children: jsx(Icon, { sdsIcon: "DotsHorizontal", sdsSize: "s" }) }) }, pageNumber.join("-")));
-        }
-        return (jsx(Page, { onClick: () => onPageChange(pageNumber), onKeyDown: (event) => handlePageKeyDown(event, pageNumber), selected: pageNumber === currentPage, sdsStyle: sdsStyle, tabIndex: 0, children: pageNumber }, pageNumber));
-    });
-};
-const Pagination = forwardRef((props, ref) => {
-    const { sdsStyle = "round", onPageChange, onNextPage, onPreviousPage, totalCount, siblingCount = 1, currentPage, pageSize, truncateDropdown = true, } = props;
-    if (pageSize < 1) {
-        throw new Error("PageSize can not be smaller than 1!");
-    }
-    const paginationRange = usePagination({
-        currentPage,
-        pageSize,
-        siblingCount,
-        totalCount
-    }) || [];
-    if (currentPage === 0 || paginationRange.length < 2) {
-        return null;
-    }
-    const lastPage = paginationRange[paginationRange.length - 1];
-    return (jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: () => currentPage > 1 && onPreviousPage(), onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, sdsStyle: sdsStyle, children: jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: () => currentPage !== lastPage && onNextPage(), onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, sdsStyle: sdsStyle, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs" }) }, "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();
+        else {
+            switch (intent) {
+                case "positive":
+                    return jsx(Icon, { sdsSize: "s", sdsIcon: "CheckCircle" });
+                case "info":
+                    return jsx(Icon, { sdsSize: "s", sdsIcon: "InfoCircle" });
+                default:
+                    return jsx(Icon, { sdsSize: "s", sdsIcon: "ExclamationMarkCircle" });
+            }
         }
-    }
-});
+    };
+    return (jsx(Fragment, { children: jsx(Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsx(Box, { children: jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsx(Button, { onClick: handleClose, sdsStyle: "minimal", sdsType: "secondary", "data-testid": "notificationCloseButton", children: jsx(Icon, { sdsIcon: "XMark", sdsSize: "s" }) })) : null, icon: getIcon(), className: "elevated", intent: intent, slideDirection: slideDirection }, passedProps, { children: [children, buttonOnClick !== undefined && (jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsx(Button, { sdsStyle: "minimal", sdsType: "secondary", size: "medium", onClick: buttonOnClick, children: buttonText }) }))] })) }) }) }));
+};
 
 const PANEL_BASIC_MIN_WIDTH_PX = 240;
 const PANEL_OVERLAY_MIN_WIDTH_PX = 320;
 
-const doNotForwardProps$2 = [
+const doNotForwardProps$1 = [
     "sdsType",
     "position",
     "width",
@@ -17755,7 +18493,7 @@ const overlayPanelStyles = (props) => {
   `;
 };
 const StyledDrawer = styled(Drawer, {
-    shouldForwardProp: (prop) => !doNotForwardProps$2.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop)
 }) `
   ${(props) => {
     const { sdsType = "basic", anchor = "left", width } = props;
@@ -17882,9 +18620,44 @@ const Panel = React__default.forwardRef((props, ref) => {
         }, slotProps: SLOT_PROPS, hideBackdrop: !isBackdropClickEnabled, children: [isOverlayPanelProps(props) && (jsxs(StyledHeaderComponent, { children: [props?.HeaderComponent && (jsx(PanelHeader, { children: props?.HeaderComponent })), jsx(PanelHeaderClose, { onClick: props?.closeButtonOnClick, CloseButtonComponent: props?.CloseButtonComponent })] })), children] })));
 });
 
-const doNotForwardProps$1 = ["buttonDefinition"];
+const StyledPopover = styled(Popover$1) `
+  & .${popoverClasses.paper} {
+    ${(props) => {
+    const corners = getCorners(props);
+    const shadows = getShadows(props);
+    const semanticColors = getSemanticColors(props);
+    const borders = getBorders(props);
+    const spaces = getSpaces(props);
+    return `
+        background-color: ${semanticColors?.base?.surfacePrimary};
+        background-image: none;
+        border-radius: ${corners?.l}px;
+        padding: ${spaces?.xs}px ${spaces?.m}px;
+        border: ${borders?.none};
+        outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
+        box-shadow: ${shadows?.m};
+        box-sizing: border-box;
+        z-index: ${props?.theme?.zIndex?.tooltip ?? 1400};
+      `;
+}}
+  }
+`;
+
+/**
+ * @see https://mui.com/material-ui/react-popover/
+ */
+const Popover = forwardRef(function Popover(props, ref) {
+    const theme = useTheme();
+    const spaces = getSpaces({ theme });
+    return (jsx(StyledPopover, __assign({ ref: ref, anchorOrigin: {
+            horizontal: "left",
+            vertical: "bottom"
+        }, transformOrigin: { vertical: -(spaces?.s || 8), horizontal: 0 } }, props)));
+});
+
+const doNotForwardProps = ["buttonDefinition"];
 const StyledSegmentedControl = styled(ToggleButtonGroup, {
-    shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -17923,7 +18696,6 @@ const StyledSegmentedControl = styled(ToggleButtonGroup, {
         ${focusVisibleA11yStyle(props)}
         background-color: transparent;
         border: none;
-        line-height: 0px;
         color: ${semanticColors?.base?.ornamentSecondary};
         padding: ${spaces?.xxs}px ${spaces?.m}px;
         border-radius: ${corners?.m}px;
@@ -17939,7 +18711,7 @@ const StyledSegmentedControl = styled(ToggleButtonGroup, {
 }}
 `;
 const StyledToggleButton = styled(ToggleButton, {
-    shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps.includes(prop)
 }) `
   ${(props) => {
     const { disabled } = props;
@@ -17952,6 +18724,14 @@ const StyledToggleButton = styled(ToggleButton, {
     `;
 }}
 `;
+const StyledToggleButtonIcon = styled("div") `
+  line-height: 0px;
+`;
+const StyledToggleButtonLabel = styled("div") `
+  ${fontBodyMediumS}
+  white-space: nowrap;
+  line-height: 16px !important;
+`;
 
 /**
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -17971,133 +18751,28 @@ const SegmentedControl = (props) => {
             onChangeProp(event, newActive);
         }
     };
-    return (jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map((button) => {
-                const { icon, tooltipText, value: buttonValue, disabled = false, } = button;
-                const iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
-                const toggleButton = (jsx(StyledToggleButton, { "aria-label": tooltipText ?? buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
-                // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
-                return disabled ? (toggleButton) : (jsx(Tooltip, { title: tooltipText ?? buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
-            }), ";"] })));
-};
-
-const StyledTable = styled("table") `
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  table-layout: fixed;
-`;
-
-const Table = forwardRef((props, ref) => {
-    const { children } = props;
-    return (jsx(StyledTable, __assign({ ref: ref }, props, { children: children })));
-});
-
-const doNotForwardProps = [
-    "rowHeight",
-    "useDivider",
-    "shouldShowTooltipOnHover",
-    "tooltipProps",
-    "tooltipSubtitle",
-    "tooltipText",
-    "hover",
-];
-const disabledStyled = (props) => {
-    const semanticColors = getSemanticColors(props);
-    return `
-    background-color: ${semanticColors?.base?.backgroundSecondary};
-    color: ${semanticColors?.base?.textDisabled};
-    user-select: none;
-
-    &:hover {
-      background-color: ${semanticColors?.base?.backgroundSecondary};
-      color: ${semanticColors?.base?.textDisabled};
-    }
-
-    & span, & div {
-      color: ${semanticColors?.base?.textDisabled};
-      background-color: transparent !important;
-    }
-
-    .cell-component {
-      color: ${semanticColors?.base?.textDisabled};
-      pointer-events: none;
-      user-select: none;
-      & div {
-        color: ${semanticColors?.base?.textDisabled};
-        background-color: transparent;
-      }
-
-      & .MuiChip-root {
-        background-color: ${semanticColors?.base?.fillDisabled};
-        box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryDisabled} !important;
-
-        & span {
-          color: ${semanticColors?.base?.textDisabled} !important;
-        }
-      }
-
-      svg {
-        fill: ${semanticColors?.base?.ornamentDisabled};
-      }
-
-      filter: grayscale(100%);
-    }
-  `;
-};
-const hoverStyled = (props) => {
-    const semanticColors = getSemanticColors(props);
-    return `
-    &:hover {
-      background-color: ${semanticColors?.base?.fillPrimaryInteraction};
-    }
-  `;
+    return (jsx(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: buttonDefinition.map((button) => {
+            const { icon, label, shouldShowTooltip = true, tooltipProps, tooltipText, value: buttonValue, disabled = false, } = button;
+            if (tooltipText) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlTooltipTextDeprecated);
+            }
+            if (!icon && !label) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlMissingIconOrLabel);
+            }
+            if (icon && label) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlIconAndLabelConflict);
+            }
+            const iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
+            const buttonContent = label ? (jsx(StyledToggleButtonLabel, { children: label })) : iconItem ? (jsx(StyledToggleButtonIcon, { children: iconItem })) : (jsx(StyledToggleButtonLabel, { children: buttonValue }));
+            const toggleButton = (jsx(StyledToggleButton, { "aria-label": tooltipText ?? label ?? buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: buttonContent }) }, buttonValue));
+            // Resolve the tooltip title: tooltipText takes priority,
+            // then tooltipProps.title, then label, then falls back to buttonValue.
+            const resolvedTitle = tooltipText ?? tooltipProps?.title ?? label ?? buttonValue;
+            // (masoudmanson): If the button is disabled or shouldShowTooltip
+            // is false, we don't render the tooltip.
+            return disabled || !shouldShowTooltip ? (toggleButton) : (createElement(Tooltip, __assign({ arrow: true }, tooltipProps, { title: resolvedTitle, key: buttonValue }), toggleButton));
+        }) })));
 };
-const StyledTableRow = styled("tr", {
-    shouldForwardProp: (prop) => !doNotForwardProps.includes(prop)
-}) `
-  ${fontHeaderS}
-  ${focusVisibleA11yStyle}
-
-  ${(props) => {
-    const { rowHeight, useDivider = true, selected = false, disabled = false, hover = true, } = props;
-    const semanticColors = getSemanticColors(props);
-    const borders = getBorders(props);
-    return `
-      align-items: center;
-      border-bottom: ${useDivider ? borders?.base?.table : borders?.none};
-
-      ${rowHeight ? `max-height: ${rowHeight}px;` : ""}
-
-      ${selected ? `background-color: ${semanticColors?.accent?.surfacePrimary};` : ""}
-
-      ${hover && hoverStyled(props)};
-
-      ${disabled && disabledStyled(props)}
-    `;
-}}
-`;
-
-const TableRow = forwardRef((props, ref) => {
-    const { children, shouldShowTooltipOnHover = true, tooltipProps, tooltipText = false, tooltipSubtitle, hover = true, } = props;
-    if (shouldShowTooltipOnHover && hover) {
-        return (jsx(Tooltip, __assign({ arrow: true, sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })) })));
-    }
-    return (jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })));
-});
-
-const StyledTableHeader = styled("thead") `
-  ${(props) => {
-    const semanticColors = getSemanticColors(props);
-    return `
-      border-bottom: solid 2px ${semanticColors?.base?.borderSecondary};
-    `;
-}}
-`;
-
-const TableHeader = forwardRef((props, ref) => {
-    const { children } = props;
-    return (jsx(StyledTableHeader, __assign({ ref: ref }, props, { children: jsx(TableRow, { hover: false, shouldShowTooltipOnHover: false, children: children }) })));
-});
 
 const TabsContext = createContext({ sdsSize: "large" });
 
@@ -21925,4 +22600,4 @@ const generateDiscreteColors = (count, options = {}) => {
     return isDarkMode ? colors.reverse() : colors;
 };
 
-export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonDropdownLegacy, ButtonGroup, ButtonIcon, ButtonLegacy, ButtonToggle, ButtonToggleLegacy, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, isIconOnlyButton, makeSdsSemanticAppTheme, makeThemeOptions };
+export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonDropdownLegacy, ButtonGroup, ButtonIcon, ButtonLegacy, ButtonToggle, ButtonToggleLegacy, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, Popover, PreComposedTable, RowHoverContext, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, isIconOnlyButton, makeSdsSemanticAppTheme, makeThemeOptions };