@czi-sds/components 23.3.4 → 23.5.0

package/dist/index.cjs.js

@@ -8,6 +8,7 @@ var material = require('@mui/material');
 var styled = require('@emotion/styled');
 var iconsMaterial = require('@mui/icons-material');
 var css$1 = require('@emotion/css');
+var reactTable = require('@tanstack/react-table');
 var Button$1 = require('@mui/material/Button');
 var styles = require('@mui/material/styles');
 
@@ -1688,9 +1689,9 @@ const AccordionDetails = (props) => {
     return (jsxRuntime.jsx(StyledAccordionDetails$1, __assign({ id: id }, rest, { children: children })));
 };
 
-const doNotForwardProps$N = ["chevronSize", "hasInvertedStyle"];
+const doNotForwardProps$M = ["chevronSize", "hasInvertedStyle"];
 const StyledAccordionHeader = styled__default.default(material.AccordionSummary, {
-    shouldForwardProp: (prop) => !doNotForwardProps$N.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$M.includes(prop)
 }) `
   ${fontBodySemiboldL}
   ${(props) => {
@@ -4945,12 +4946,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__default.default(material.SvgIcon, {
-    shouldForwardProp: (prop) => !doNotForwardProps$M.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$L.includes(prop)
 }) `
   ${(props) => {
     const mode = getMode(props);
@@ -5223,7 +5224,7 @@ const mergeRefs = (refs) => {
 };
 
 /* eslint-disable sonarjs/cognitive-complexity */
-const doNotForwardProps$L = [
+const doNotForwardProps$K = [
     "sdsType",
     "sdsSize",
     "backgroundOnHover",
@@ -5863,7 +5864,7 @@ const DestructiveButtonStyles = (props) => {
   `;
 };
 const StyledButton$4 = styled__default.default(material.Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$L.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$K.includes(prop)
 }) `
   ${focusVisibleA11yStyle}
 
@@ -5941,7 +5942,7 @@ const Button = React__namespace.default.forwardRef((props, ref) => {
     return (jsxRuntime.jsx(StyledButton$4, __assign({ variant: MUI_VARIANT_MAP$1[sdsStyle] || variant, sdsType: sdsType, size: size, iconOnlyChild: iconOnlyChild, ref: ref }, rest, { children: children ? (jsxRuntime.jsx(StyledChildren, { size: size, children: children })) : null })));
 });
 
-const doNotForwardProps$K = [
+const doNotForwardProps$J = [
     "sdsStyle",
     "intent",
     "handleSubmit",
@@ -6039,7 +6040,7 @@ const StyledLabel$4 = styled__default.default("label") `
 `;
 const StyledSearchBase = styled__default.default(material.TextField, {
     shouldForwardProp: (prop) => {
-        return !doNotForwardProps$K.includes(prop.toString());
+        return !doNotForwardProps$J.includes(prop.toString());
     }
 }) `
   ${(props) => {
@@ -6051,6 +6052,8 @@ const StyledSearchBase = styled__default.default(material.TextField, {
     return react.css `
       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;
@@ -6535,7 +6538,7 @@ const InputSearch = React.forwardRef(function InputSearch(props, ref) {
                 autoComplete: "one-time-code" }, rest))] }));
 });
 
-const doNotForwardProps$J = [
+const doNotForwardProps$I = [
     "count",
     "keepSearchOnSelect",
     "search",
@@ -6545,7 +6548,7 @@ const doNotForwardProps$J = [
     "hasGroupBy",
 ];
 const StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
-    shouldForwardProp: (prop) => !doNotForwardProps$J.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
 }) `
   + .${material.autocompleteClasses.popper}
     > .${material.autocompleteClasses.paper}
@@ -6644,7 +6647,7 @@ const StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
 }}
 `;
 const InputBaseWrapper$1 = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$J.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
 }) `
   ${(props) => {
     const { search } = props;
@@ -6666,7 +6669,7 @@ const InputBaseWrapper$1 = styled__default.default("div", {
 }}
 `;
 const StyledMenuInputSearch$1 = styled__default.default(InputSearch, {
-    shouldForwardProp: (prop) => !doNotForwardProps$J.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
 }) `
   margin: 0;
   .MuiInputBase-root {
@@ -6936,7 +6939,7 @@ const AutocompleteGroup = (props) => {
     }
 };
 
-const doNotForwardProps$I = [
+const doNotForwardProps$H = [
     "anchorEl",
     "count",
     "keepSearchOnSelect",
@@ -6948,7 +6951,7 @@ const doNotForwardProps$I = [
     "ClickAwayListenerProps",
 ];
 const StyledPopper$2 = styled__default.default(material.Popper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop) || prop === "anchorEl"
+    shouldForwardProp: (prop) => !doNotForwardProps$H.includes(prop) || prop === "anchorEl"
 }) `
   ${(props) => {
     const corners = getCorners(props);
@@ -6978,7 +6981,7 @@ const StyledPopper$2 = styled__default.default(material.Popper, {
 }}
 `;
 const StyledPaper$2 = styled__default.default(material.Paper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$H.includes(prop)
 }) `
   ${(props) => {
     const shadows = getShadows(props);
@@ -6998,7 +7001,7 @@ const StyledAutocompleteGroupWrapper = styled__default.default("div") `
   display: flex;
 `;
 const StyledAutocompleteInput = styled__default.default(InputSearch, {
-    shouldForwardProp: (prop) => !doNotForwardProps$I.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$H.includes(prop)
 }) `
   ${({ search }) => !search && "height: 0; display: none; margin: 0 !important;"}
 
@@ -7320,9 +7323,9 @@ const secondary$2 = (props) => {
     color: ${semanticColors?.base?.textPrimary};
   `;
 };
-const doNotForwardProps$H = ["sdsType", "textChild", "intent"];
+const doNotForwardProps$G = ["sdsType", "textChild", "intent"];
 const StyledBanner = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$H.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$G.includes(prop)
 }) `
   ${fontBodyS$1}
 
@@ -7394,6 +7397,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]: {
@@ -7451,6 +7457,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) => {
@@ -7484,7 +7505,7 @@ const ButtonDropdown = React__namespace.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)
@@ -7498,6 +7519,10 @@ const GeneralButtonGroupStyles = (props) => {
       min-width: fit-content;
       z-index: 1;
 
+      &::before {
+        border-radius: inherit;
+      }
+
       &:hover,
       &:active,
       &:focus {
@@ -7604,10 +7629,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) */
     .${material.buttonGroupClasses.grouped}:has(svg):not(
         :has(.${material.buttonClasses.startIcon})
-      ):not(:has(.${material.buttonClasses.endIcon})) {
+      ):not(:has(.${material.buttonClasses.endIcon})),
+    .${material.buttonGroupClasses.grouped}:has(> .${material.buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7615,8 +7641,10 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon */
-    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}):not(
+        :has(> .${material.buttonClasses.startIcon}:only-child)
+      ),
     .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.endIcon}) {
       ${theme?.breakpoints?.down("md")} {
         padding: 0 14px;
@@ -7682,10 +7710,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) */
     .${material.buttonGroupClasses.grouped}:has(svg):not(
         :has(.${material.buttonClasses.startIcon})
-      ):not(:has(.${material.buttonClasses.endIcon})) {
+      ):not(:has(.${material.buttonClasses.endIcon})),
+    .${material.buttonGroupClasses.grouped}:has(> .${material.buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7693,8 +7722,10 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}):not(
+        :has(> .${material.buttonClasses.startIcon}:only-child)
+      ),
     .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.endIcon}) {
       padding: 0 10px;
     }
@@ -7758,10 +7789,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) */
     .${material.buttonGroupClasses.grouped}:has(svg):not(
         :has(.${material.buttonClasses.startIcon})
-      ):not(:has(.${material.buttonClasses.endIcon})) {
+      ):not(:has(.${material.buttonClasses.endIcon})),
+    .${material.buttonGroupClasses.grouped}:has(> .${material.buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7769,8 +7801,10 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}):not(
+        :has(> .${material.buttonClasses.startIcon}:only-child)
+      ),
     .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.endIcon}) {
       padding: 0 ${spaces?.s}px;
     }
@@ -7819,6 +7853,7 @@ const PrimaryButtonGroupStyles = (props) => {
     && .${material.buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${defaultColor};
 
       svg {
@@ -7830,6 +7865,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${hoverColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${hoverColor};
+      box-shadow: none;
 
       svg {
         color: ${hoverColor};
@@ -7840,6 +7876,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${pressedColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${pressedColor};
+      box-shadow: none;
 
       svg {
         color: ${pressedColor};
@@ -7854,6 +7891,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -7907,6 +7945,7 @@ const SecondaryButtonGroupStyles = (props) => {
     && .${material.buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${textColor};
 
       svg {
@@ -7918,6 +7957,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7928,6 +7968,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${pressedBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7942,6 +7983,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -7950,7 +7992,7 @@ const SecondaryButtonGroupStyles = (props) => {
   `;
 };
 const StyledButtonGroup = styled__default.default(material.ButtonGroup, {
-    shouldForwardProp: (prop) => !doNotForwardProps$G.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$F.includes(prop)
 }) `
   ${(props) => {
     const { sdsType = "primary", size = "large" } = props;
@@ -8138,10 +8180,6 @@ const small$1 = (props) => {
     const iconSizes = getIconSizes(props);
     const spaces = getSpaces(props);
     return react.css `
-    ${sdsType !== "tertiary"
-        ? `margin: 0 ${spaces?.xxs}px ${spaces?.xxs}px 0;`
-        : ""}
-
     .MuiSvgIcon-root {
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
@@ -8181,7 +8219,7 @@ const large = (props) => {
     }
   `;
 };
-const doNotForwardProps$F = [
+const doNotForwardProps$E = [
     "on",
     "sdsSize",
     "sdsType",
@@ -8191,7 +8229,7 @@ const doNotForwardProps$F = [
     "customTheme",
 ];
 const StyledButtonIcon = styled__default.default(material.IconButton, {
-    shouldForwardProp: (prop) => !doNotForwardProps$F.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$E.includes(prop)
 }) `
   padding: 0;
   ${focusVisibleA11yStyle}
@@ -8256,7 +8294,7 @@ const ButtonIcon = React.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.
@@ -8284,34 +8322,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 react.css `
-      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 react.css `
-    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__default.default(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$E.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$D.includes(prop)
 }) `
   ${(props) => {
     const { sdsStage } = props;
@@ -8330,7 +8383,7 @@ const ButtonToggle = React__namespace.default.forwardRef((props, ref) => {
     return (jsxRuntime.jsx(StyledButtonToggle, __assign({}, rest, { startIcon: startIcon, endIcon: null, backgroundOnHover: true, ref: ref })));
 });
 
-const doNotForwardProps$D = [
+const doNotForwardProps$C = [
     "isAllCaps",
     "isRounded",
     "sdsStyle",
@@ -8521,7 +8574,7 @@ const DestructiveButton = (props) => {
   `;
 };
 const StyledButton$2 = styled__default.default(material.Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$D.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$C.includes(prop)
 }) `
   ${focusVisibleA11yStyle}
 
@@ -8627,7 +8680,7 @@ const SecondaryMinimalButton = (props) => {
   `;
 };
 const StyledMinimalButton = styled__default.default(material.Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$D.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$C.includes(prop)
 }) `
   ${(props) => {
     const { sdsType } = props;
@@ -8638,7 +8691,7 @@ const StyledMinimalButton = styled__default.default(material.Button, {
 }}
 `;
 const StyledButtonLegacy = styled__default.default(material.Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$D.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$C.includes(prop)
 }) `
   ${focusVisibleA11yStyle}
   ${(props) => {
@@ -8745,9 +8798,9 @@ const ButtonDropdownLegacy = React__namespace.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__default.default(ButtonIcon, {
-    shouldForwardProp: (prop) => !doNotForwardProps$C.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$B.includes(prop)
 }) `
   ${(props) => {
     const { sdsStage } = props;
@@ -8773,7 +8826,7 @@ const ButtonToggleLegacy = React__namespace.default.forwardRef((props, ref) => {
     }
 });
 
-const doNotForwardProps$B = [
+const doNotForwardProps$A = [
     "calloutTitle",
     "collapsed",
     "severity",
@@ -8781,7 +8834,7 @@ const doNotForwardProps$B = [
     "hideBody",
 ];
 const StyledCallout = styled__default.default(material.Alert, {
-    shouldForwardProp: (prop) => !doNotForwardProps$B.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$A.includes(prop)
 }) `
   ${fontBodyXs$2}
 
@@ -8962,9 +9015,9 @@ const tableStyles = (props) => {
     padding: ${spaces?.m}px;
   `;
 };
-const doNotForwardProps$A = ["hasInvertedStyle", "textAlign"];
+const doNotForwardProps$z = ["hasInvertedStyle", "textAlign"];
 const StyledTitle = styled__default.default("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$A.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
 }) `
   ${fontBodyMediumXs}
 
@@ -8978,7 +9031,7 @@ const StyledTitle = styled__default.default("p", {
 }}
 `;
 const StyledSubtitle = styled__default.default("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$A.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
 }) `
   ${fontBodyXxs$1}
 
@@ -9169,209 +9222,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__default.default("table") `
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: auto;
+`;
+
+const Table = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (jsxRuntime.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__default.default("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__default.default("div") `
-  display: flex;
-`;
-const StyledCellContentWrapper = styled__default.default("div") `
-  width: 100%;
-`;
-const StyledCellIconWrapper = styled__default.default("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__default.default("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__default.default("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__default.default("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$z.includes(prop)
+      background-color: ${semanticColors?.base?.fillPrimaryInteraction};
+    }
+  `;
+};
+const StyledTableRow = styled__default.default("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__default.default("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__default.default("div") `
-  ${(props) => {
-    const spaces = getSpaces(props);
-    return `
-      margin-top: ${spaces?.xxs}px;
-    `;
-}}
-`;
-const PrimaryTextComponentSlotRightWrapper = styled__default.default("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 (jsxRuntime.jsxs(StyledCellContent, { children: [icon && (jsxRuntime.jsx(StyledCellIconWrapper, { iconVerticalAlign: iconVerticalAlign, children: icon })), jsxRuntime.jsxs(StyledCellContentWrapper, { children: [jsxRuntime.jsxs(PrimaryTextWrapper, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx(PrimaryText, { shouldTextWrap: shouldTextWrap, primaryTextWrapLineCount: primaryTextWrapLineCount, tabularNums: tabularNums, children: primaryText }), primaryTextComponentSlotRight && (jsxRuntime.jsx(PrimaryTextComponentSlotRightWrapper, { children: primaryTextComponentSlotRight }))] }), !secondaryText && !tertiaryText && primaryTextComponentSlotBottom && (jsxRuntime.jsx(PrimaryTextComponentSlotBottomWrapper, { children: primaryTextComponentSlotBottom })), secondaryText && (jsxRuntime.jsx(SecondaryText, { shouldTextWrap: shouldTextWrap, secondaryTextWrapLineCount: secondaryTextWrapLineCount, tabularNums: tabularNums, children: secondaryText })), tertiaryText && (jsxRuntime.jsx(TertiaryText, { shouldTextWrap: shouldTextWrap, tertiaryTextWrapLineCount: tertiaryTextWrapLineCount, tabularNums: tabularNums, children: tertiaryText }))] })] }));
-};
-const CellBasic = React.forwardRef((props, ref) => {
-    const { primaryText, secondaryText, shouldShowTooltipOnHover = true, tooltipProps, } = props;
-    if (shouldShowTooltipOnHover) {
-        return (jsxRuntime.jsx(Tooltip, __assign({ title: primaryText, subtitle: secondaryText, arrow: true, leaveDelay: 0, leaveTouchDelay: 0, sdsStyle: "dark" }, tooltipProps, { children: jsxRuntime.jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) })) })));
+const TableRow = React.forwardRef((props, ref) => {
+    const { children, shouldShowTooltipOnHover = true, tooltipProps, tooltipText = false, tooltipSubtitle, hover = true, } = props;
+    if (shouldShowTooltipOnHover && hover) {
+        return (jsxRuntime.jsx(Tooltip, __assign({ arrow: true, sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsxRuntime.jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })) })));
     }
-    return (jsxRuntime.jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) })));
+    return (jsxRuntime.jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })));
 });
 
-const doNotForwardProps$y = ["horizontalAlign", "verticalAlign"];
-const StyledCellComponentData = styled__default.default("td", {
-    shouldForwardProp: (prop) => !doNotForwardProps$y.includes(prop)
-}) `
-  ${fontBodyS$1}
-  ${focusVisibleA11yStyle}
-
+const StyledTableHeader$1 = styled__default.default("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 = React.forwardRef((props, _) => {
-    const { children, ...rest } = props;
-    return (jsxRuntime.jsx(StyledCellComponentData, __assign({ className: "cell-component" }, rest, { children: children })));
+const TableHeader = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(TableRow, { hover: false, shouldShowTooltipOnHover: false, children: children }) })));
 });
 
 const contentPositionMapping = {
@@ -9405,7 +9425,7 @@ const StyledSortingIcon = styled__default.default(Icon, {
     `;
 }}
 `;
-const ShouldTruncate = () => {
+const ShouldTruncate$1 = () => {
     return `
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -9413,9 +9433,7 @@ const ShouldTruncate = () => {
     word-break: break-all;
   `;
 };
-const StyledTableHeader$1 = styled__default.default("th", {
-    shouldForwardProp: (prop) => !doNotForwardProps$x.includes(prop)
-}) `
+const StyledTableHeader = styled__default.default.div `
   ${fontHeaderS}
   ${focusVisibleA11yStyle}
 
@@ -9431,9 +9449,8 @@ const StyledTableHeader$1 = styled__default.default("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;
 
@@ -9463,7 +9480,7 @@ const StyledCellHeaderText = styled__default.default("div", {
   ${(props) => {
     const { shouldTruncate = false } = props;
     return `
-      ${shouldTruncate && ShouldTruncate()}
+      ${shouldTruncate && ShouldTruncate$1()}
     `;
 }}
 `;
@@ -9487,86 +9504,1298 @@ const CellHeaderContent = (props) => {
     const sortIcon = (jsxRuntime.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 (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx(StyledCellHeaderText, { shouldTruncate: shouldTruncate, children: children }), (!hideSortIcon || active) && hover && sortIcon] }));
+    return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [typeof children === "string" || typeof children === "number" ? (jsxRuntime.jsx(StyledCellHeaderText, { shouldTruncate: shouldTruncate, children: children })) : (children), (!hideSortIcon || active) && hover && sortIcon] }));
 };
 const CellHeader = React.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 (jsxRuntime.jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({}, props, { hover: hover, children: children })) })) })));
+        return (jsxRuntime.jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsxRuntime.jsx(StyledTableHeader, __assign({ as: as, ref: ref, hover: hover }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({}, props, { hover: hover, children: children })) })) })));
     }
-    return (jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({ hover: hover }, props, { children: children })) })));
+    return (jsxRuntime.jsx(StyledTableHeader, __assign({ as: as, ref: ref, hover: hover }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({ hover: hover }, props, { children: children })) })));
 });
 
-const small = (props) => {
-    const spaces = getSpaces(props);
-    return react.css `
-    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__default.default(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 react.css `
-    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__default.default("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__default.default("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 react.css `
-    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__default.default("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 react.css `
-    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__default.default(Page) `
+  width: 28px;
+  max-width: 28px;
+`;
+
+const StyledMenu = styled__default.default(material.Menu) `
+  & {
+    .${material.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 (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
+};
+
+const StyledPaginationDropdownMenu = styled__default.default(Menu) `
+  & .MuiPaper-root {
+    max-height: 120px;
+  }
+`;
+
+const PageListDropdown = (props) => {
+    const { pageList, onPageChange, sdsStyle } = props;
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (jsxRuntime.jsxs(StyledPage, { sdsStyle: sdsStyle, children: [jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", onClick: handleClick, size: "small", sdsStyle: "minimal", sdsType: "secondary", backgroundOnHover: false, children: jsxRuntime.jsx(Icon, { sdsIcon: "DotsHorizontal", sdsSize: "s" }) }), jsxRuntime.jsx(StyledPaginationDropdownMenu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: pageList.map((page) => {
+                    return (jsxRuntime.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 React.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 (jsxRuntime.jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
+            }
+            return (jsxRuntime.jsx(Page, { sdsStyle: sdsStyle, children: jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, size: "small", sdsStyle: "minimal", sdsType: "primary", children: jsxRuntime.jsx(Icon, { sdsIcon: "DotsHorizontal", sdsSize: "s" }) }) }, pageNumber.join("-")));
+        }
+        return (jsxRuntime.jsx(Page, { onClick: () => onPageChange(pageNumber), onKeyDown: (event) => handlePageKeyDown(event, pageNumber), selected: pageNumber === currentPage, sdsStyle: sdsStyle, tabIndex: 0, children: pageNumber }, pageNumber));
+    });
+};
+const Pagination = React.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 (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: () => currentPage > 1 && onPreviousPage(), onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, sdsStyle: sdsStyle, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: () => currentPage !== lastPage && onNextPage(), onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, sdsStyle: sdsStyle, children: jsxRuntime.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__default.default(Icon) `
+  ${(props) => {
+    const iconSizes = getIconSizes(props);
+    return `
+      height: ${iconSizes?.xs.height}px;
+      width: ${iconSizes?.xs.width}px;
+    `;
+}}
+`;
+const StyledCheckboxDefaultIcon = styled__default.default("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__default.default("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__default.default(material.Checkbox) `
+  ${(props) => {
+    const { label } = props;
+    const spaces = getSpaces(props);
+    const corners = getCorners(props);
+    const semanticColors = getSemanticColors(props);
+    return `
+      &.${material.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__default.default("span") `
+  display: flex;
+  justify-content: start;
+  flex-direction: column;
+`;
+const StyledCheckboxLabel = styled__default.default("span") `
+  ${fontBodyXs$2}
+
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      margin-top: -${spaces?.xxxs}px !important;
+    `;
+}}
+`;
+const StyledCheckboxCaption = styled__default.default("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__default.default(material.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 ? (jsxRuntime.jsxs(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: [jsxRuntime.jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }), jsxRuntime.jsx(StyledCheckboxCaption, { className: cn(captionClassName), children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: jsxRuntime.jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }) }));
+    return (jsxRuntime.jsx(StyledFormControlLabel$1, { control: jsxRuntime.jsx(StyledCheckbox, __assign({ className: cn(checkboxClassName), checkedIcon: jsxRuntime.jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxCheckedIconClassName), children: jsxRuntime.jsx(StyledIcon, { sdsIcon: "Check", sdsSize: "xs" }) }), icon: jsxRuntime.jsx(StyledCheckboxDefaultIcon, { intent: intent, className: cn(checkboxDefaultIconClassName) }), indeterminateIcon: jsxRuntime.jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxIndeterminateIconClassName), children: jsxRuntime.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__default.default.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 = React.forwardRef((props, ref) => {
+    const { children, as = "td", ...rest } = props;
+    return (jsxRuntime.jsx(StyledCellComponentData, __assign({ ref: ref, className: "cell-component", as: as }, rest, { children: children })));
+});
+
+const StyledTableContainer$1 = styled__default.default.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__default.default(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__default.default.div `
+  ${(props) => {
+    const { border = true, sdsStyle = "lined" } = props;
+    const semanticColors = getSemanticColors(props);
+    const corners = getCorners(props);
+    return react.css `
+      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__default.default("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__default.default(InputSearch) `
+  margin-right: 0;
+`;
+const StyledPaginationWrapper = styled__default.default.div `
+  ${(props) => {
+    const { placement = "right" } = props;
+    const spaces = getSpaces(props);
+    return `
+      display: flex;
+      justify-content: ${placement};
+      margin-top: ${spaces?.m}px;
+    `;
+}}
+`;
+const StyledSelectionCell = styled__default.default(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 = React.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] = React.useState([]);
+    const [rowSelection, setRowSelection] = React.useState({});
+    const [columnVisibility, setColumnVisibility] = React.useState({});
+    const [globalFilter, setGlobalFilter] = React.useState("");
+    const [pagination, setPagination] = React.useState({
+        pageIndex: 0,
+        pageSize: paginationConfig?.pageSize ?? 10
+    });
+    const [columnPinning, setColumnPinning] = React.useState({});
+    const [hoveredRowId, setHoveredRowId] = React.useState(null);
+    const tableContainerRef = React.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 = React.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 (jsxRuntime.jsx(StyledSelectionCell, __assign({ horizontalAlign: "center", verticalAlign: "top" }, props, { style: {
+                            width: `${cell.column.getSize()}px`,
+                            ...pinnedStyle
+                        }, children: jsxRuntime.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 (jsxRuntime.jsx(CellHeader, { horizontalAlign: "center", style: {
+                            verticalAlign: "middle",
+                            width: `${header.getSize()}px`,
+                            ...pinnedStyle
+                        }, children: jsxRuntime.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 = reactTable.useReactTable({
+        columns: tableColumns,
+        data,
+        debugTable: true,
+        enableColumnFilters: enableColumnFiltering,
+        enableGlobalFilter: enableGlobalFiltering,
+        enableRowSelection: enableRowSelection,
+        enableSorting,
+        getCoreRowModel: reactTable.getCoreRowModel(),
+        getFilteredRowModel: reactTable.getFilteredRowModel(),
+        getPaginationRowModel: reactTable.getPaginationRowModel(),
+        getSortedRowModel: reactTable.getSortedRowModel(),
+        onColumnPinningChange: setColumnPinning,
+        onColumnVisibilityChange: setColumnVisibility,
+        onGlobalFilterChange: setGlobalFilter,
+        onPaginationChange: setPagination,
+        onRowSelectionChange: setRowSelection,
+        onSortingChange: setSorting,
+        state: {
+            columnPinning,
+            columnVisibility,
+            globalFilter,
+            pagination,
+            rowSelection,
+            sorting
+        }
+    });
+    const createInitialPinning = React.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
+    React.useEffect(() => {
+        setColumnPinning(createInitialPinning());
+    }, [createInitialPinning]);
+    // Call onRowSelect callback when row selection changes
+    React.useEffect(() => {
+        if (onRowSelect && enableRowSelection) {
+            const selectedRows = table
+                .getSelectedRowModel()
+                .rows.map((row) => row.original);
+            onRowSelect(selectedRows);
+        }
+    }, [rowSelection, onRowSelect, enableRowSelection, table]);
+    React.useEffect(() => {
+        setPagination({
+            pageIndex: 0,
+            pageSize: paginationConfig?.pageSize ?? 10
+        });
+    }, [paginationConfig]);
+    const headers = table.getFlatHeaders();
+    React.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 = (jsxRuntime.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 = reactTable.flexRender(cell.column.columnDef.cell, {
+                ...cell.getContext(),
+                as: "div",
+                style: {
+                    width: `${cell.column.getSize()}px`
+                }
+            });
+        }
+        else {
+            // Fallback for undefined cell content
+            cellContent = (jsxRuntime.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 (jsxRuntime.jsx(RowHoverContext.Provider, { value: { isRowHovered }, children: jsxRuntime.jsx("td", { style: {
+                        ...pinnedStyle,
+                        width: `${cell.column.getSize()}px`,
+                        verticalAlign: cell.column.columnDef.meta?.verticalAlign
+                    }, children: cellContent }) }, cell.id));
+        }
+        return (jsxRuntime.jsx(RowHoverContext.Provider, { value: { isRowHovered }, children: jsxRuntime.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 (jsxRuntime.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 reactTable.flexRender(header.column.columnDef.header, {
+                ...header.getContext(),
+                key: header.id,
+                style: {
+                    ...(isPinned ? pinnedStyle : {}),
+                    width: `${header.getSize()}px`
+                }
+            });
+        }
+        else {
+            // Fallback for undefined header content
+            return (jsxRuntime.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 (jsxRuntime.jsxs(StyledTableContainer$1, { ref: tableContainerRef, className: className, style: { width: tableWidth, ...style }, children: [enableGlobalFiltering && (jsxRuntime.jsx("div", { style: { marginBottom: "16px" }, children: jsxRuntime.jsx(StyledInputSearch, { id: "global-search", label: "Search", placeholder: "Search all columns...", value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsxRuntime.jsx(StyledTableWrapper, { border: border, sdsStyle: sdsStyle, children: jsxRuntime.jsxs(Table, { children: [jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => {
+                                return (jsxRuntime.jsx(React.Fragment, { children: headerGroup.headers.map((header) => {
+                                        return renderHeader(header);
+                                    }) }, headerGroup.id));
+                            }) }), jsxRuntime.jsx("tbody", { children: table.getRowModel().rows.map((row) => (jsxRuntime.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 && (jsxRuntime.jsx(StyledPaginationWrapper, { placement: paginationConfig?.placement, children: jsxRuntime.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__default.default("div") `
+  display: flex;
+`;
+const StyledCellContentWrapper = styled__default.default("div") `
+  width: 100%;
+`;
+const StyledCellIconWrapper = styled__default.default("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__default.default("div") `
+  ${(props) => {
+    const { horizontalAlign } = props;
+    return `
+      display: flex;
+      justify-content: ${horizontalAlign === "left" ? "flex-start" : "flex-end"};
+    `;
+}}
+`;
+const PrimaryText = styled__default.default("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__default.default("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__default.default("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__default.default("div") `
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      margin-top: ${spaces?.xxs}px;
+    `;
+}}
+`;
+const PrimaryTextComponentSlotRightWrapper = styled__default.default("div") `
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      margin-left: ${spaces?.xs}px;
+    `;
+}}
+`;
+const StyledTableData = styled__default.default.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__default.default("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 (jsxRuntime.jsxs(StyledCellContent, { children: [icon && (jsxRuntime.jsx(StyledCellIconWrapper, { iconVerticalAlign: iconVerticalAlign, children: icon })), jsxRuntime.jsxs(StyledCellContentWrapper, { children: [jsxRuntime.jsxs(PrimaryTextWrapper, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx(PrimaryText, { shouldTextWrap: shouldTextWrap, primaryTextWrapLineCount: primaryTextWrapLineCount, tabularNums: tabularNums, children: primaryText }), primaryTextComponentSlotRight && (jsxRuntime.jsx(PrimaryTextComponentSlotRightWrapper, { children: primaryTextComponentSlotRight }))] }), !secondaryText && !tertiaryText && primaryTextComponentSlotBottom && (jsxRuntime.jsx(PrimaryTextComponentSlotBottomWrapper, { children: primaryTextComponentSlotBottom })), secondaryText && (jsxRuntime.jsx(SecondaryText, { shouldTextWrap: shouldTextWrap, secondaryTextWrapLineCount: secondaryTextWrapLineCount, tabularNums: tabularNums, children: secondaryText })), tertiaryText && (jsxRuntime.jsx(TertiaryText, { shouldTextWrap: shouldTextWrap, tertiaryTextWrapLineCount: tertiaryTextWrapLineCount, tabularNums: tabularNums, children: tertiaryText }))] })] }));
+};
+const CellBasic = React.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 } = React.useContext(RowHoverContext) || {
+        isRowHovered: false
+    };
+    // Pass the row hover state to the styled component
+    const enhancedProps = { ...props, isRowHovered };
+    if (shouldShowTooltipOnHover) {
+        return (jsxRuntime.jsx(Tooltip, __assign({ title: primaryText, subtitle: secondaryText, arrow: true, leaveDelay: 0, leaveTouchDelay: 0, sdsStyle: "dark" }, tooltipProps, { children: jsxRuntime.jsx(StyledTableData, __assign({ ref: ref, as: as }, enhancedProps, { children: link ? (jsxRuntime.jsx(StyledCellBasicLink, __assign({ href: link }, linkProps, { component: linkComponent, children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) }))) : (jsxRuntime.jsx(CellBasicContent, __assign({}, props))) })) })));
+    }
+    return (jsxRuntime.jsx(StyledTableData, __assign({ ref: ref, as: as }, enhancedProps, { children: link ? (jsxRuntime.jsx(material.Link, __assign({ href: link }, linkProps, { underline: "none", color: "inherit", component: linkComponent, children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) }))) : (jsxRuntime.jsx(CellBasicContent, __assign({}, props))) })));
+});
+CellBasic.displayName = "CellBasic";
+
+const small = (props) => {
+    const spaces = getSpaces(props);
+    return react.css `
+    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 react.css `
+    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 react.css `
+    border-radius: ${corners?.rounded}px;
+  `;
+};
+const square$2 = (props) => {
+    const corners = getCorners(props);
+    return react.css `
+    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");
 };
@@ -9624,9 +10853,9 @@ const statusToCss = {
     success,
     warning
 };
-const doNotForwardProps$w = ["isRounded"];
+const doNotForwardProps$u = ["isRounded"];
 const StyledChip = styled__default.default(material.Chip, {
-    shouldForwardProp: (prop) => !doNotForwardProps$w.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
 }) `
   border: none;
 
@@ -9658,7 +10887,7 @@ const Chip = (props) => {
     return jsxRuntime.jsx(StyledChip, __assign({}, props));
 };
 
-const doNotForwardProps$v = [
+const doNotForwardProps$t = [
     "anchorEl",
     "count",
     "keepSearchOnSelect",
@@ -9673,7 +10902,7 @@ const doNotForwardProps$v = [
     "titleValue",
 ];
 const StyledHeaderTitle = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
 }) `
   ${fontBodyMediumXs}
 
@@ -9687,7 +10916,7 @@ const StyledHeaderTitle = styled__default.default("div", {
 }}
 `;
 const StyledHeaderSubTitle = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
 }) `
   ${fontBodyXxs$1}
 
@@ -9702,7 +10931,7 @@ const StyledHeaderSubTitle = styled__default.default("div", {
 }}
 `;
 const StyledDropdownMenuAutocompleteWrapper = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
 }) `
   ${(props) => {
     const { search, titleValue } = props;
@@ -9739,7 +10968,7 @@ const StyledDropdownMenuAutocompleteWrapper = styled__default.default("div", {
 }}
 `;
 const StyledPopper = styled__default.default(material.Popper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop) || prop === "anchorEl"
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop) || prop === "anchorEl"
 }) `
   ${(props) => {
     const borders = getBorders(props);
@@ -9758,7 +10987,7 @@ const StyledPopper = styled__default.default(material.Popper, {
 }}
 `;
 const StyledPaper$1 = styled__default.default(material.Paper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -9865,7 +11094,7 @@ const DropdownMenu = (props) => {
         sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [jsxRuntime.jsxs("div", { children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] }), title && subTitle && (jsxRuntime.jsx(StyledHeaderSubTitle, { children: subTitle }))] })), anchorEl && (jsxRuntime.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",
@@ -9876,7 +11105,7 @@ const doNotForwardProps$u = [
     "sdsStyle",
     "multiple",
 ];
-const intentToColor$2 = {
+const intentToColor$1 = {
     default: "accent",
     negative: "negative",
     notice: "notice",
@@ -9891,6 +11120,7 @@ const inputDropdownStyles = (props) => {
     return react.css `
     ${labelStyle(props)}
 
+    background-color: ${semanticColors?.base?.backgroundPrimary} !important;
     border: none;
     box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimary};
     cursor: pointer;
@@ -10056,7 +11286,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 react.css `
     &.MuiButton-text {
       .styled-label {
@@ -10148,7 +11378,7 @@ const isDisabled = (props) => {
  * to the InputDropdownProps interface.
  */
 const StyledInputDropdown = styled__default.default(Button__default.default, {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${labelFontBodyXs}
   ${focusVisibleA11yStyle}
@@ -10184,7 +11414,7 @@ const StyledInputDropdown = styled__default.default(Button__default.default, {
 }}
 `;
 const StyledDetail = styled__default.default("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -10199,7 +11429,7 @@ const StyledDetail = styled__default.default("span", {
 }}
 `;
 const StyledLabel$3 = styled__default.default("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${(props) => {
     const { details, counter, sdsType } = props;
@@ -10216,7 +11446,7 @@ const StyledLabel$3 = styled__default.default("span", {
 }}
 `;
 const StyledCounter = styled__default.default("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${(props) => {
     const corners = getCorners(props);
@@ -10237,7 +11467,7 @@ const StyledCounter = styled__default.default("span", {
 }}
 `;
 const MinimalDetails = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   ${labelFontBodyS}
   text-align: left;
@@ -10257,7 +11487,7 @@ const MinimalDetails = styled__default.default("div", {
 }}
 `;
 const LabelWrapper = styled__default.default("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   align-items: center;
   display: inline-flex;
@@ -10273,7 +11503,7 @@ const LabelWrapper = styled__default.default("span", {
   }
 `;
 const IconWrapper = styled__default.default("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$u.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
 }) `
   margin-left: auto;
   display: flex;
@@ -10359,9 +11589,9 @@ function renderDetailsText({ details, sdsType, value, }) {
     }
 }
 
-const doNotForwardProps$t = ["buttonPosition"];
+const doNotForwardProps$r = ["buttonPosition"];
 const StyledButtonsWrapper = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$t.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
 }) `
   ${(props) => {
     const { buttonPosition } = props;
@@ -10874,7 +12104,7 @@ const typeToCss = {
     primary,
     secondary
 };
-const doNotForwardProps$s = [
+const doNotForwardProps$q = [
     "sdsType",
     "sdsStyle",
     "sdsSize",
@@ -10882,7 +12112,7 @@ const doNotForwardProps$s = [
     "hover",
 ];
 const StyledTag$4 = styled__default.default(material.Chip, {
-    shouldForwardProp: (prop) => !doNotForwardProps$s.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
 }) `
   border: none;
 
@@ -11173,7 +12403,7 @@ const ComplexFilter = ({ label = "", multiple = false, search = false, onChange:
                 }, buttons: true }, rest)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] }));
 };
 
-const doNotForwardProps$r = [
+const doNotForwardProps$p = [
     "visualElement",
     "sdsType",
     "imagePosition",
@@ -11214,7 +12444,7 @@ const getShowDecorativeBorder = (visualElementType, boundingBox, decorativeBorde
         : boundingBox && decorativeBorder;
 };
 const StyledCard = styled__default.default(material.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;
@@ -11296,7 +12526,7 @@ const StyledCard = styled__default.default(material.Card, {
 }}
 `;
 const StyledCardActionArea = styled__default.default(Button__default.default, {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${(props) => {
     const { imagePosition = "left", cardSdsType = "wide", visualElementType, } = props;
@@ -11325,7 +12555,7 @@ const StyledCardActionArea = styled__default.default(Button__default.default, {
 }}
 `;
 const StyledIconMediaWrapper = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${(props) => {
     const { boundingBox = true } = props;
@@ -11342,7 +12572,7 @@ const StyledIconMediaWrapper = styled__default.default("div", {
 }}
 `;
 const StyledCardContent = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${(props) => {
     const { boundingBox = true, sdsType = "wide", visualElementType } = props;
@@ -11370,7 +12600,7 @@ const StyledCardContent = styled__default.default("div", {
 }}
 `;
 const StyledContentCardBody = styled__default.default(material.CardContent, {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
 }) `
   ${fontBodyS$1}
   ${(props) => {
@@ -11391,7 +12621,7 @@ const StyledCardContentAligner = styled__default.default("div") `
   height: 100%;
 `;
 
-const doNotForwardProps$q = [
+const doNotForwardProps$o = [
     "visualElement",
     "sdsType",
     "imagePosition",
@@ -11403,7 +12633,7 @@ const doNotForwardProps$q = [
     "contentBlock",
 ];
 const StyledTitleWrapper = material.styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -11415,7 +12645,7 @@ const StyledTitleWrapper = material.styled("div", {
 }}
 `;
 const StyledOverlineText = material.styled("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${fontCapsXxxs}
   ${(props) => {
@@ -11427,7 +12657,7 @@ const StyledOverlineText = material.styled("p", {
 }}
 `;
 const StyledTitleText = material.styled("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${fontHeaderXl}
   ${(props) => {
@@ -11439,7 +12669,7 @@ const StyledTitleText = material.styled("p", {
 }}
 `;
 const StyledSubtitleText = material.styled("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${fontHeaderM$1}
   ${(props) => {
@@ -11451,7 +12681,7 @@ const StyledSubtitleText = material.styled("p", {
 }}
 `;
 const StyledMetadataText = material.styled("p", {
-    shouldForwardProp: (prop) => !doNotForwardProps$q.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
 }) `
   ${fontBodyXxs$1}
   ${(props) => {
@@ -11481,9 +12711,9 @@ const ContentCardTitle = React.forwardRef(function ContentCardTitle(props, ref)
     return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { className: cn(cardHeader), children: [jsxRuntime.jsx(OverlineText, { text: overlineText, className: cardOverline }), jsxRuntime.jsx(TitleText, { text: titleText, className: cardTitle }), jsxRuntime.jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsxRuntime.jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
 });
 
-const doNotForwardProps$p = ["buttonsPosition"];
+const doNotForwardProps$n = ["buttonsPosition"];
 const StyledCardActions = styled__default.default(material.CardActions, {
-    shouldForwardProp: (prop) => !doNotForwardProps$p.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$n.includes(prop)
 }) `
   ${(props) => {
     const { buttonsPosition = "left" } = props;
@@ -11555,7 +12785,7 @@ const ContentCardActions = React.forwardRef(function ContentCardActions(props, r
 });
 
 /* eslint-disable sonarjs/cognitive-complexity */
-const doNotForwardProps$o = [
+const doNotForwardProps$m = [
     "imagePadding",
     "boundingBox",
     "sdsType",
@@ -11564,7 +12794,7 @@ const doNotForwardProps$o = [
     "imagePosition",
 ];
 const StyledImageMediaWrapper = material.styled("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$o.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
 }) `
   ${(props) => {
     const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left", } = props;
@@ -11732,9 +12962,9 @@ const ContentCard = React__namespace.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__default.default(material.Paper, {
-    shouldForwardProp: (prop) => !doNotForwardProps$n.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$l.includes(prop)
 }) `
   & {
     ${paperDimensions}
@@ -11840,9 +13070,9 @@ const CloseButton = React.forwardRef(function CloseButton(props, ref) {
     return (jsxRuntime.jsx(StyledButton$1, __assign({ "aria-label": "Close", ref: ref, onClick: onClick, size: size, sdsStyle: "minimal", sdsType: "secondary", backgroundOnHover: false, className: className }, rest, { children: jsxRuntime.jsx(Icon, { sdsIcon: "XMark", sdsSize: iconSize }) })));
 });
 
-const doNotForwardProps$m = ["sdsSize"];
+const doNotForwardProps$k = ["sdsSize"];
 const StyledDialogTitle = styled__default.default(material.DialogTitle, {
-    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
 }) `
   padding: 0;
   ${(props) => {
@@ -11855,7 +13085,7 @@ const StyledDialogTitle = styled__default.default(material.DialogTitle, {
 }}
 `;
 const Title = styled__default.default(material.Typography, {
-    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
 }) `
   ${(props) => {
     const { sdsSize } = props;
@@ -11868,7 +13098,7 @@ const Title = styled__default.default(material.Typography, {
 }}
 `;
 const Subtitle = styled__default.default(material.Typography, {
-    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
 }) `
   ${(props) => {
     const { sdsSize } = props;
@@ -11884,7 +13114,7 @@ const Subtitle = styled__default.default(material.Typography, {
 }}
 `;
 const Overline = styled__default.default(material.Typography, {
-    shouldForwardProp: (prop) => !doNotForwardProps$m.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
 }) `
   ${(props) => {
     const { sdsSize } = props;
@@ -11908,9 +13138,9 @@ const DialogTitle = React.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__default.default(material.DialogActions, {
-    shouldForwardProp: (prop) => !doNotForwardProps$l.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$j.includes(prop)
 }) `
   padding: 0;
 
@@ -11965,9 +13195,9 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
         }) })));
 });
 
-const doNotForwardProps$k = ["sdsSize"];
+const doNotForwardProps$i = ["sdsSize"];
 const StyledDialogContent = styled__default.default(material.DialogContent, {
-    shouldForwardProp: (prop) => !doNotForwardProps$k.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$i.includes(prop)
 }) `
   ${fontBodyS$1}
   padding: 0;
@@ -12017,7 +13247,7 @@ const overlayContentPositionJustifyMapping = {
 };
 
 /* eslint-disable sonarjs/no-duplicate-string */
-const doNotForwardProps$j = [
+const doNotForwardProps$h = [
     "heroHeight",
     "overlayContainerMinMargin",
     "backgroundFillColor",
@@ -12044,7 +13274,7 @@ const getResponsivePadding = (props) => {
 };
 // Main Hero Container
 const StyledHeroContainer = styled__default.default("section", {
-    shouldForwardProp: (prop) => !doNotForwardProps$j.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$h.includes(prop)
 }) `
   ${(props) => {
     const { heroHeight = "fit-content", overlayContentPosition, backgroundFillColor, } = props;
@@ -12179,306 +13409,111 @@ styled__default.default("div") `
     const semanticColors = getSemanticColors(props);
     return react.css `
       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__default.default("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__default.default("div") `
-  ${(props) => {
-    const { overlayMediaPosition } = props;
-    return react.css `
-      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__default.default("div") `
-  ${(props) => {
-    const { overlayMediaMaxHeight, overlayMediaMaxWidth, overlayMediaMargin } = props;
-    const breakpoints = getBreakpoints(props);
-    return react.css `
-      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__namespace.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" && !React.isValidElement(backgroundFill);
-    const isBackgroundFillReactNode = React.isValidElement(backgroundFill);
-    return (jsxRuntime.jsxs(StyledHeroContainer, __assign({ ref: ref, heroHeight: heroHeight, backgroundFillColor: isBackgroundFillColorString ? backgroundFill : undefined }, rest, { children: [isBackgroundFillReactNode && (jsxRuntime.jsx(BackgroundFillContainer, { children: backgroundFill })), darkeningMask && (jsxRuntime.jsx(DarkeningMask, { darkeningMaskColor: darkeningMaskColor, darkeningMaskOpacity: darkeningMaskOpacity })), overlayMedia && (jsxRuntime.jsx(OverlayMediaWrapper, { overlayMediaPosition: overlayMediaPosition, children: jsxRuntime.jsx(OverlayMedia, { overlayMediaPosition: overlayMediaPosition, overlayMediaMaxHeight: overlayMediaMaxHeight, overlayMediaMaxWidth: overlayMediaMaxWidth, overlayMediaMargin: overlayMediaMargin, children: overlayMedia }) })), jsxRuntime.jsxs(OverlayContent, { overlayContentWidth: overlayContentWidth, textAlignment: textAlignment, children: [headerText && (jsxRuntime.jsx(HeroTitle, { headerFontSize: headerFontSize, hasInvertTextColor: hasInvertTextColor, children: headerText })), captionText && (jsxRuntime.jsx(HeroCaption, { hasInvertTextColor: hasInvertTextColor, children: captionText })), children && jsxRuntime.jsx(ContentSlot, { children: children })] }), darkeningVignette && jsxRuntime.jsx(DarkeningVignette, {})] })));
-});
-Hero.displayName = "Hero";
-
-const intentToColor$1 = {
-    default: "base",
-    negative: "negative",
-    notice: "notice",
-    positive: "positive"
-};
-const StyledIcon = styled__default.default(Icon) `
-  ${(props) => {
-    const iconSizes = getIconSizes(props);
-    return `
-      height: ${iconSizes?.xs.height}px;
-      width: ${iconSizes?.xs.width}px;
-    `;
-}}
-`;
-const StyledCheckboxDefaultIcon = styled__default.default("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__default.default("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__default.default(material.Checkbox) `
-  ${(props) => {
-    const spaces = getSpaces(props);
-    return `
-      &.${material.checkboxClasses.root} {
-        ${focusVisibleA11yStyle(props)}
-        
-        padding: 0;
-        margin-right: ${spaces?.s}px;
-        border-radius: 0;
-
-        &:hover {
-          background-color: transparent;
-        }
-      }
-    `;
-}}
-`;
-const StyledLabelContainer$1 = styled__default.default("span") `
-  display: flex;
-  justify-content: start;
-  flex-direction: column;
-`;
-const StyledCheckboxLabel = styled__default.default("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__default.default("span") `
-  ${fontBodyXxs$1}
-
+const DarkeningVignette = styled__default.default("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__default.default("div") `
   ${(props) => {
-    const semanticColors = getSemanticColors(props);
-    return `
-      color: ${semanticColors?.base?.textSecondary};
+    const { overlayMediaPosition } = props;
+    return react.css `
+      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__default.default(material.FormControlLabel) `
+const OverlayMedia = styled__default.default("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 react.css `
+      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 ? (jsxRuntime.jsxs(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: [jsxRuntime.jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }), jsxRuntime.jsx(StyledCheckboxCaption, { className: cn(captionClassName), children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: jsxRuntime.jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }) }));
-    return (jsxRuntime.jsx(StyledFormControlLabel$1, { control: jsxRuntime.jsx(StyledCheckbox, __assign({ className: cn(checkboxClassName), checkedIcon: jsxRuntime.jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxCheckedIconClassName), children: jsxRuntime.jsx(StyledIcon, { sdsIcon: "Check", sdsSize: "xs" }) }), icon: jsxRuntime.jsx(StyledCheckboxDefaultIcon, { intent: intent, className: cn(checkboxDefaultIconClassName) }), indeterminateIcon: jsxRuntime.jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxIndeterminateIconClassName), children: jsxRuntime.jsx(StyledIcon, { sdsIcon: "Minus", sdsSize: "xs" }) }), intent: intent }, checkboxProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: cn(rootClassName, className) }));
-};
+const Hero = React__namespace.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" && !React.isValidElement(backgroundFill);
+    const isBackgroundFillReactNode = React.isValidElement(backgroundFill);
+    return (jsxRuntime.jsxs(StyledHeroContainer, __assign({ ref: ref, heroHeight: heroHeight, backgroundFillColor: isBackgroundFillColorString ? backgroundFill : undefined }, rest, { children: [isBackgroundFillReactNode && (jsxRuntime.jsx(BackgroundFillContainer, { children: backgroundFill })), darkeningMask && (jsxRuntime.jsx(DarkeningMask, { darkeningMaskColor: darkeningMaskColor, darkeningMaskOpacity: darkeningMaskOpacity })), overlayMedia && (jsxRuntime.jsx(OverlayMediaWrapper, { overlayMediaPosition: overlayMediaPosition, children: jsxRuntime.jsx(OverlayMedia, { overlayMediaPosition: overlayMediaPosition, overlayMediaMaxHeight: overlayMediaMaxHeight, overlayMediaMaxWidth: overlayMediaMaxWidth, overlayMediaMargin: overlayMediaMargin, children: overlayMedia }) })), jsxRuntime.jsxs(OverlayContent, { overlayContentWidth: overlayContentWidth, textAlignment: textAlignment, children: [headerText && (jsxRuntime.jsx(HeroTitle, { headerFontSize: headerFontSize, hasInvertTextColor: hasInvertTextColor, children: headerText })), captionText && (jsxRuntime.jsx(HeroCaption, { hasInvertTextColor: hasInvertTextColor, children: captionText })), children && jsxRuntime.jsx(ContentSlot, { children: children })] }), darkeningVignette && jsxRuntime.jsx(DarkeningVignette, {})] })));
+});
+Hero.displayName = "Hero";
 
 const intentToColor = {
     default: "base",
@@ -12529,11 +13564,13 @@ const StyledRadioCheckedIcon = styled__default.default("div") `
 const StyledRadioButton = styled__default.default(material.Radio) `
   ${(props) => {
     const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
     return `
       &.${material.radioClasses.root} {
         ${focusVisibleA11yStyle(props)}
         margin: 0 ${spaces?.s}px 0 0;
         padding: 0;
+        background-color: ${semanticColors?.base?.backgroundPrimary} !important;
       }
     `;
 }}
@@ -12871,7 +13908,7 @@ const applyIntentColor = (props, intent) => {
     }
   `;
 };
-const disabledStyled$1 = (props) => {
+const disabledStyled = (props) => {
     const borders = getBorders(props);
     const semanticColors = getSemanticColors(props);
     return react.css `
@@ -12931,6 +13968,8 @@ const StyledInputBase = styled__default.default(material.TextField, {
     const semanticColors = getSemanticColors(props);
     return react.css `
       display: block;
+      background-color: ${semanticColors?.base?.backgroundPrimary} !important;
+      border-radius: ${corners?.l}px;
 
       .${material.outlinedInputClasses.root} {
         width: 100%;
@@ -12978,7 +14017,7 @@ const StyledInputBase = styled__default.default(material.TextField, {
       ${intent === "negative" && applyIntentColor(props, "negative")}
       ${intent === "notice" && applyIntentColor(props, "notice")}
       ${intent === "positive" && applyIntentColor(props, "positive")}
-      ${disabled && disabledStyled$1(props)}
+      ${disabled && disabledStyled(props)}
     `;
 }}
 `;
@@ -13019,6 +14058,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;
@@ -13027,6 +14067,7 @@ const toggle = (props) => {
     line-height: 18px;
     padding: 0;
     overflow: visible;
+    background-color: ${semanticColors?.base?.backgroundPrimary} !important;
 
     .${material.switchClasses.switchBase} {
       ${focusVisibleA11yStyle(props)}
@@ -13447,7 +14488,7 @@ const Legend = (props) => {
         }) })));
 };
 
-const doNotForwardProps$i = ["sdsStyle", "sdsSize", "fontWeight"];
+const doNotForwardProps$g = ["sdsStyle", "sdsSize", "fontWeight"];
 const defaultStyle = (props) => {
     const semanticColors = getSemanticColors(props);
     return react.css `
@@ -13495,7 +14536,7 @@ const extraSmallStyle = (props) => {
 };
 const StyledLink = styled__default.default(material.Link, {
     shouldForwardProp: (prop) => {
-        return !doNotForwardProps$i.includes(prop.toString());
+        return !doNotForwardProps$g.includes(prop.toString());
     }
 }) `
   all: unset;
@@ -13526,9 +14567,9 @@ const Link = React.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__default.default(material.List, {
-    shouldForwardProp: (prop) => !doNotForwardProps$h.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$f.includes(prop)
 }) `
   .MuiListSubheader-root {
     ${propsToMarginBottom$1}
@@ -13573,9 +14614,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__default.default(material.ListItem, {
-    shouldForwardProp: (prop) => !doNotForwardProps$g.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$e.includes(prop)
 }) `
   ${propsToMarginBottom}
   ${propsToFontBody}
@@ -13725,9 +14766,9 @@ const tag = (props) => {
     }
   `;
 };
-const doNotForwardProps$f = ["sdsStyle"];
+const doNotForwardProps$d = ["sdsStyle"];
 const StyledLoadingIndicator = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$f.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
 }) `
   ${(props) => {
     const { sdsStyle } = props;
@@ -13749,57 +14790,20 @@ const LoadingIndicator = ({ "aria-label": ariaLabel, sdsStyle, }) => {
     return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
 };
 
-const StyledMenu = styled__default.default(material.Menu) `
-  & {
-    .${material.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 (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
-};
-
 const StyledMenuItem = styled__default.default(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__default.default(material.Autocomplete, {
-    shouldForwardProp: (prop) => !doNotForwardProps$e.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$c.includes(prop)
 }) `
   ${({ search }) => !search && "height: 0; margin: 0 !important;"}
   width: 100%;
 `;
 const InputBaseWrapper = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$e.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$c.includes(prop)
 }) `
   ${(props) => {
     const { search } = props;
@@ -13826,7 +14830,7 @@ const InputBaseWrapper = styled__default.default("div", {
 }}
 `;
 const StyledMenuInputSearch = styled__default.default(InputSearch, {
-    shouldForwardProp: (prop) => !doNotForwardProps$e.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$c.includes(prop)
 }) `
   && {
     margin: 0;
@@ -13899,9 +14903,9 @@ const MenuSelect = (props) => {
     }
 };
 
-const doNotForwardProps$d = ["hasInvertedStyle", "isNarrow"];
+const doNotForwardProps$b = ["hasInvertedStyle", "isNarrow"];
 const StyledFooter = styled__default.default("footer", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   ${(props) => {
     const { isNarrow } = props;
@@ -13925,7 +14929,7 @@ const StyledFooter = styled__default.default("footer", {
 }}
 `;
 const StyledLogoWrapper$1 = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -13963,7 +14967,7 @@ const StyledLogoWrapper$1 = styled__default.default("div", {
   }
 `;
 const StyledNavSection = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   ${(props) => {
     const { isNarrow } = props;
@@ -13986,7 +14990,7 @@ const StyledNavSection = styled__default.default("div", {
 }}
 `;
 const StyledTopSection = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   ${(props) => {
     const { isNarrow } = props;
@@ -14021,7 +15025,7 @@ const StyledTopSection = styled__default.default("div", {
 }}
 `;
 const StyledLinkSection = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14058,7 +15062,7 @@ const StyledMobileLinkRow = styled__default.default.div `
 }}
 `;
 const StyledImageSection = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14094,7 +15098,7 @@ const StyledMobileImageRow = styled__default.default.div `
 }}
 `;
 const StyledBottomSection = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$d.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14118,7 +15122,7 @@ const StyledBottomSection = styled__default.default("div", {
 }}
 `;
 
-const doNotForwardProps$c = ["hasInvertedStyle", "isNarrow"];
+const doNotForwardProps$a = ["hasInvertedStyle", "isNarrow"];
 const NarrowNavItemLinkStyles = (props) => {
     const semanticColors = getSemanticColors(props);
     const spaces = getSpaces(props);
@@ -14141,7 +15145,7 @@ const NarrowNavItemLinkStyles = (props) => {
   `;
 };
 const StyledNavItemLink = styled__default.default(Link, {
-    shouldForwardProp: (prop) => !doNotForwardProps$c.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
 }) `
   ${fontBodyMediumS}
 
@@ -14184,9 +15188,9 @@ const StyledNavItemLink = styled__default.default(Link, {
 const NavItem = React.memo(({ item, hasInvertedStyle, isNarrow }) => (jsxRuntime.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__default.default(Link, {
-    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop)
 }) `
   ${fontBodyXxs$1}
 
@@ -14235,7 +15239,7 @@ const StyledLinkItemLink = styled__default.default(Link, {
 }}
 `;
 const StyledDivider$1 = styled__default.default(material.Divider, {
-    shouldForwardProp: (prop) => !doNotForwardProps$b.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop)
 }) `
   ${(props) => {
     const semanticColors = getSemanticColors(props);
@@ -14403,7 +15407,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",
@@ -14421,7 +15425,7 @@ const StyledTopComponentSlot = styled__default.default("div") `
   z-index: 2100;
 `;
 const StyledAppBar = styled__default.default(material.AppBar, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const colors = getSemanticColors(props);
@@ -14452,7 +15456,7 @@ const NarrowToolbar = (props) => {
   `;
 };
 const StyledToolbar = styled__default.default(material.Toolbar, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { isNarrow } = props;
@@ -14469,7 +15473,7 @@ const StyledToolbar = styled__default.default(material.Toolbar, {
 }}
 `;
 styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const shadows = getShadows(props);
@@ -14485,7 +15489,7 @@ styled__default.default("div", {
 }}
 `;
 styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const colors = getSemanticColors(props);
@@ -14501,7 +15505,7 @@ styled__default.default("div", {
 }}
 `;
 const StyledHeaderButton = styled__default.default(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   ${(props) => {
     const { sdsType, hasInvertedStyle } = props;
@@ -14543,7 +15547,7 @@ const invertedNarrowButtonStyles = (props) => {
   `;
 };
 const StyledNarrowIconButton = styled__default.default(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, isNarrow } = props;
@@ -14571,7 +15575,7 @@ const invertedWideButtonStyles = (props) => {
   `;
 };
 const StyledWideIconButton = styled__default.default(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -14582,7 +15586,7 @@ const StyledWideIconButton = styled__default.default(Button, {
 }}
 `;
 const StyledLogoLinkWrapper = styled__default.default(Link, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14608,7 +15612,7 @@ const NarrowTitleContainer = () => {
   `;
 };
 const StyledTitleContainer = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -14630,7 +15634,7 @@ const StyledTitleContainer = styled__default.default("div", {
 }}
 `;
 const StyledTitleTagWrapper = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -14651,7 +15655,7 @@ const StyledTag$2 = styled__default.default(Tag) `
   margin: 0;
 `;
 const StyledPrimaryNavContainer = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   align-items: center;
   display: flex;
@@ -14674,7 +15678,7 @@ const StyledPrimaryNavContainer = styled__default.default("div", {
 }}
 `;
 const StyledSearch = styled__default.default(InputSearch, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   margin: 0;
   width: 100%;
@@ -14809,7 +15813,7 @@ const NarrowButtonStyles = (props) => {
   `;
 };
 const StyledButtonSection = styled__default.default("section", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -14827,7 +15831,7 @@ const StyledButtonSection = styled__default.default("section", {
 }}
 `;
 const StyledDrawer$1 = styled__default.default(material.Drawer, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle", "topOffset"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle", "topOffset"].includes(prop)
 }) `
   ${(props) => {
     const colors = getSemanticColors(props);
@@ -14848,7 +15852,7 @@ const StyledDrawer$1 = styled__default.default(material.Drawer, {
 }}
 `;
 const StyledDrawerContent = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -14862,7 +15866,7 @@ const StyledDrawerContent = styled__default.default("div", {
 }}
 `;
 const StyledNarrowHamburgerMenuButton = styled__default.default(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$a.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -14907,7 +15911,7 @@ const DrawerAccordionStyles = (props) => {
   `;
 };
 const StyledAccordion = styled__default.default(Accordion, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   padding: 0 !important;
   width: 100%;
@@ -15057,7 +16061,7 @@ const StyledAccordion = styled__default.default(Accordion, {
 }}
 `;
 const StyledSectionDivider = styled__default.default(material.Divider, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const semanticColors = getSemanticColors(props);
@@ -15072,7 +16076,7 @@ const StyledSectionDivider = styled__default.default(material.Divider, {
 `;
 // Hover Drawer Components for sdsStyle="drawer"
 const StyledMegaMenuDrawer = styled__default.default(material.Drawer, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle", "topOffset"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle", "topOffset"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, topOffset = 0 } = props;
@@ -15108,7 +16112,7 @@ const StyledMegaMenuDrawer = styled__default.default(material.Drawer, {
 }}
 `;
 const StyledMegaMenuContent = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -15130,7 +16134,7 @@ const StyledMegaMenuContent = styled__default.default("div", {
 }}
 `;
 const StyledHoverDrawerColumn = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle", "totalColumns"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle", "totalColumns"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -15169,7 +16173,7 @@ const StyledContentWrapper = styled__default.default("div") `
 }}
 `;
 const StyledHoverDrawerColumnHeader = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -15187,7 +16191,7 @@ const StyledHoverDrawerColumnHeader = styled__default.default("div", {
 }}
 `;
 const StyledHoverDrawerItem = styled__default.default(Button, {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, hasDetails } = props;
@@ -15231,7 +16235,7 @@ const StyledHoverDrawerItem = styled__default.default(Button, {
 }}
 `;
 const StyledHoverDrawerItemContent = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -15244,7 +16248,7 @@ const StyledHoverDrawerItemContent = styled__default.default("div", {
 }}
 `;
 const StyledHoverDrawerItemIcon = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const semanticColors = getSemanticColors(props);
@@ -15264,7 +16268,7 @@ const StyledHoverDrawerItemIcon = styled__default.default("div", {
 }}
 `;
 const StyledHoverDrawerItemText = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${() => {
     return material.css `
@@ -15277,7 +16281,7 @@ const StyledHoverDrawerItemText = styled__default.default("div", {
 }}
 `;
 const EmptyIcon = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasDetails } = props;
@@ -15292,7 +16296,7 @@ const EmptyIcon = styled__default.default("div", {
 }}
 `;
 const StyledHoverDrawerItemTitle = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, hasDetails } = props;
@@ -15317,7 +16321,7 @@ const StyledHoverDrawerItemTitle = styled__default.default("div", {
 }}
 `;
 const StyledHoverDrawerItemDetails = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle } = props;
@@ -15335,7 +16339,7 @@ const StyledHoverDrawerItemDetails = styled__default.default("div", {
 }}
 `;
 const StyledHoverDrawerActions = styled__default.default("div", {
-    shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
+    shouldForwardProp: (prop) => ![...doNotForwardProps$8, "sdsStyle"].includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -15374,12 +16378,12 @@ const StyledButton = styled__default.default(Button) `
 }}
 `;
 const StyledHoverDrawerContainer = styled__default.default("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",
@@ -15440,7 +16444,7 @@ const NarrowPrimaryNavItem = (props) => {
   `;
 };
 styled__default.default(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -15505,7 +16509,7 @@ const NarrowStyledLabel = (props) => {
   `;
 };
 const StyledLabel$1 = styled__default.default("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, active, isNarrow } = props;
@@ -15538,7 +16542,7 @@ const StyledLabel$1 = styled__default.default("span", {
 `;
 
 /* eslint-disable sonarjs/cognitive-complexity */
-const doNotForwardProps$8 = [
+const doNotForwardProps$6 = [
     "active",
     "hasInvertedStyle",
     "isNarrow",
@@ -15604,7 +16608,7 @@ const NarrowNavItemStyles = (props) => {
   `;
 };
 const UnifiedNavItem = styled__default.default(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -15686,7 +16690,7 @@ const UnifiedNavItem = styled__default.default(Button, {
 `;
 // StyledLabel for primary nav items (secondary nav doesn't use this)
 const StyledLabel = styled__default.default("span", {
-    shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
 }) `
   ${(props) => {
     const { hasInvertedStyle, active, isNarrow } = props;
@@ -15716,7 +16720,7 @@ const StyledLabel = styled__default.default("span", {
 }}
 `;
 
-const doNotForwardProps$7 = [
+const doNotForwardProps$5 = [
     "isNarrow",
     "hasSection",
     "hasInvertedStyle",
@@ -15732,7 +16736,7 @@ const NarrowStyledSection = (props) => {
   `;
 };
 const StyledSection = styled__default.default("section", {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   display: flex;
   align-items: center;
@@ -15748,7 +16752,7 @@ const StyledSection = styled__default.default("section", {
 }}
 `;
 const StyledSectionHeader = styled__default.default(ListSubheader, {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   ${(props) => {
     const { isNarrow, hasInvertedStyle, sdsStyle } = props;
@@ -15793,7 +16797,7 @@ const StyledSectionHeader = styled__default.default(ListSubheader, {
 }}
 `;
 const StyledAccordionDetails = styled__default.default(AccordionDetails, {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   ${(props) => {
     const { sdsStyle } = props;
@@ -15809,7 +16813,7 @@ const StyledAccordionDetails = styled__default.default(AccordionDetails, {
 }}
 `;
 const StyledAccordionSection = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   ${(props) => {
     const { sdsStyle, hasInvertedStyle } = props;
@@ -15831,7 +16835,7 @@ const StyledAccordionSection = styled__default.default("div", {
 }}
 `;
 const StyledDivider = styled__default.default(material.Divider, {
-    shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
   ${(props) => {
     const { hasSection, isNarrow, hasInvertedStyle } = props;
@@ -15940,7 +16944,7 @@ function DrawerContent({ drawerItems, sectionProps, section, hasMultipleSections
                 }) }))] }));
 }
 
-const doNotForwardProps$6 = [
+const doNotForwardProps$4 = [
     "hasInvertedStyle",
     "hasCaption",
     "iconSize",
@@ -15949,7 +16953,7 @@ const doNotForwardProps$6 = [
     "sdsStyle",
 ];
 const StyledDrawerNavItem = styled__default.default(Button, {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -16001,7 +17005,7 @@ const StyledDrawerNavItem = styled__default.default(Button, {
 }}
 `;
 const StyledDrawerNavItemContent = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -16016,7 +17020,7 @@ const StyledDrawerNavItemContent = styled__default.default("div", {
 }}
 `;
 const StyledDrawerNavItemText = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const { hasDetails, hasInvertedStyle } = props;
@@ -16035,7 +17039,7 @@ const StyledDrawerNavItemText = styled__default.default("div", {
 }}
 `;
 const StyledDrawerNavItemCaption = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const semanticColors = getSemanticColors(props);
@@ -16055,7 +17059,7 @@ const StyledDrawerNavItemCaption = styled__default.default("div", {
 }}
 `;
 const StyledIconWrapper = styled__default.default("div", {
-    shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop)
 }) `
   ${(props) => {
     const { iconSize } = props;
@@ -17045,9 +18049,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__default.default(material.Tabs, {
-    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
 }) `
   ${(props) => {
     const { width = "100%" } = props;
@@ -17086,7 +18090,7 @@ const StyledTabs$1 = styled__default.default(material.Tabs, {
 }}
 `;
 const StyledTab$1 = styled__default.default(material.Tab, {
-    shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
 }) `
   ${fontBodyMediumXs}
 
@@ -17282,451 +18286,185 @@ const NavigationJumpTo = React.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.
-    React.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 (jsxRuntime.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__default.default(material.Alert, {
-    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__default.default("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] = React.useState(dismissed);
-    // remove prop used only for stories
-    const passedProps = { ...rest };
-    delete passedProps.extraContent;
-    React.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 (jsxRuntime.jsx(Icon, __assign({ sdsSize: "s", sdsIcon: icon }, sdsIconProps)));
-            }
-        }
-        else {
-            switch (intent) {
-                case "positive":
-                    return jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "CheckCircle" });
-                case "info":
-                    return jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "InfoCircle" });
-                default:
-                    return jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "ExclamationMarkCircle" });
-            }
-        }
-    };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsxRuntime.jsx(Button, { onClick: handleClose, sdsStyle: "minimal", sdsType: "secondary", "data-testid": "notificationCloseButton", children: jsxRuntime.jsx(Icon, { sdsIcon: "XMark", sdsSize: "s" }) })) : null, icon: getIcon(), className: "elevated", intent: intent, slideDirection: slideDirection }, passedProps, { children: [children, buttonOnClick !== undefined && (jsxRuntime.jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsxRuntime.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__default.default(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__default.default("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.
+    React.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__default.default("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 react.css `
-    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 (jsxRuntime.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__default.default("li", {
-    shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
+const fontBodyXs = fontBody("xs");
+const doNotForwardProps$2 = ["slideDirection"];
+const StyledNotification = styled__default.default(material.Alert, {
+    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 react.css `
-      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__default.default(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__default.default(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] = React.useState(null);
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    return (jsxRuntime.jsxs(StyledPage, { sdsStyle: sdsStyle, children: [jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", onClick: handleClick, size: "small", sdsStyle: "minimal", sdsType: "secondary", backgroundOnHover: false, children: jsxRuntime.jsx(Icon, { sdsIcon: "DotsHorizontal", sdsSize: "s" }) }), jsxRuntime.jsx(StyledPaginationDropdownMenu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: pageList.map((page) => {
-                    return (jsxRuntime.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 React.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__default.default("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] = React.useState(dismissed);
+    // remove prop used only for stories
+    const passedProps = { ...rest };
+    delete passedProps.extraContent;
+    React.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 (jsxRuntime.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 (jsxRuntime.jsx(Icon, __assign({ sdsSize: "s", sdsIcon: icon }, sdsIconProps)));
             }
-            return (jsxRuntime.jsx(Page, { sdsStyle: sdsStyle, children: jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, size: "small", sdsStyle: "minimal", sdsType: "primary", children: jsxRuntime.jsx(Icon, { sdsIcon: "DotsHorizontal", sdsSize: "s" }) }) }, pageNumber.join("-")));
-        }
-        return (jsxRuntime.jsx(Page, { onClick: () => onPageChange(pageNumber), onKeyDown: (event) => handlePageKeyDown(event, pageNumber), selected: pageNumber === currentPage, sdsStyle: sdsStyle, tabIndex: 0, children: pageNumber }, pageNumber));
-    });
-};
-const Pagination = React.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 (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: () => currentPage > 1 && onPreviousPage(), onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, sdsStyle: sdsStyle, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: () => currentPage !== lastPage && onNextPage(), onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, sdsStyle: sdsStyle, children: jsxRuntime.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 jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "CheckCircle" });
+                case "info":
+                    return jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "InfoCircle" });
+                default:
+                    return jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "ExclamationMarkCircle" });
+            }
         }
-    }
-});
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsxRuntime.jsx(Button, { onClick: handleClose, sdsStyle: "minimal", sdsType: "secondary", "data-testid": "notificationCloseButton", children: jsxRuntime.jsx(Icon, { sdsIcon: "XMark", sdsSize: "s" }) })) : null, icon: getIcon(), className: "elevated", intent: intent, slideDirection: slideDirection }, passedProps, { children: [children, buttonOnClick !== undefined && (jsxRuntime.jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsxRuntime.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",
@@ -17779,7 +18517,7 @@ const overlayPanelStyles = (props) => {
   `;
 };
 const StyledDrawer = styled__default.default(material.Drawer, {
-    shouldForwardProp: (prop) => !doNotForwardProps$2.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop)
 }) `
   ${(props) => {
     const { sdsType = "basic", anchor = "left", width } = props;
@@ -17906,9 +18644,44 @@ const Panel = React__namespace.default.forwardRef((props, ref) => {
         }, slotProps: SLOT_PROPS, hideBackdrop: !isBackdropClickEnabled, children: [isOverlayPanelProps(props) && (jsxRuntime.jsxs(StyledHeaderComponent, { children: [props?.HeaderComponent && (jsxRuntime.jsx(PanelHeader, { children: props?.HeaderComponent })), jsxRuntime.jsx(PanelHeaderClose, { onClick: props?.closeButtonOnClick, CloseButtonComponent: props?.CloseButtonComponent })] })), children] })));
 });
 
-const doNotForwardProps$1 = ["buttonDefinition"];
+const StyledPopover = styled__default.default(material.Popover) `
+  & .${material.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 = React.forwardRef(function Popover(props, ref) {
+    const theme = material.useTheme();
+    const spaces = getSpaces({ theme });
+    return (jsxRuntime.jsx(StyledPopover, __assign({ ref: ref, anchorOrigin: {
+            horizontal: "left",
+            vertical: "bottom"
+        }, transformOrigin: { vertical: -(spaces?.s || 8), horizontal: 0 } }, props)));
+});
+
+const doNotForwardProps = ["buttonDefinition"];
 const StyledSegmentedControl = styled__default.default(material.ToggleButtonGroup, {
-    shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps.includes(prop)
 }) `
   ${(props) => {
     const spaces = getSpaces(props);
@@ -17947,7 +18720,6 @@ const StyledSegmentedControl = styled__default.default(material.ToggleButtonGrou
         ${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;
@@ -17963,7 +18735,7 @@ const StyledSegmentedControl = styled__default.default(material.ToggleButtonGrou
 }}
 `;
 const StyledToggleButton = styled__default.default(material.ToggleButton, {
-    shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop)
+    shouldForwardProp: (prop) => !doNotForwardProps.includes(prop)
 }) `
   ${(props) => {
     const { disabled } = props;
@@ -17976,6 +18748,14 @@ const StyledToggleButton = styled__default.default(material.ToggleButton, {
     `;
 }}
 `;
+const StyledToggleButtonIcon = styled__default.default("div") `
+  line-height: 0px;
+`;
+const StyledToggleButtonLabel = styled__default.default("div") `
+  ${fontBodyMediumS}
+  white-space: nowrap;
+  line-height: 16px !important;
+`;
 
 /**
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -17995,133 +18775,28 @@ const SegmentedControl = (props) => {
             onChangeProp(event, newActive);
         }
     };
-    return (jsxRuntime.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) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
-                const toggleButton = (jsxRuntime.jsx(StyledToggleButton, { "aria-label": tooltipText ?? buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
-                // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
-                return disabled ? (toggleButton) : (jsxRuntime.jsx(Tooltip, { title: tooltipText ?? buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
-            }), ";"] })));
-};
-
-const StyledTable = styled__default.default("table") `
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  table-layout: fixed;
-`;
-
-const Table = React.forwardRef((props, ref) => {
-    const { children } = props;
-    return (jsxRuntime.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 (jsxRuntime.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) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
+            const buttonContent = label ? (jsxRuntime.jsx(StyledToggleButtonLabel, { children: label })) : iconItem ? (jsxRuntime.jsx(StyledToggleButtonIcon, { children: iconItem })) : (jsxRuntime.jsx(StyledToggleButtonLabel, { children: buttonValue }));
+            const toggleButton = (jsxRuntime.jsx(StyledToggleButton, { "aria-label": tooltipText ?? label ?? buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.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) : (React.createElement(Tooltip, __assign({ arrow: true }, tooltipProps, { title: resolvedTitle, key: buttonValue }), toggleButton));
+        }) })));
 };
-const StyledTableRow = styled__default.default("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 = React.forwardRef((props, ref) => {
-    const { children, shouldShowTooltipOnHover = true, tooltipProps, tooltipText = false, tooltipSubtitle, hover = true, } = props;
-    if (shouldShowTooltipOnHover && hover) {
-        return (jsxRuntime.jsx(Tooltip, __assign({ arrow: true, sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsxRuntime.jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })) })));
-    }
-    return (jsxRuntime.jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })));
-});
-
-const StyledTableHeader = styled__default.default("thead") `
-  ${(props) => {
-    const semanticColors = getSemanticColors(props);
-    return `
-      border-bottom: solid 2px ${semanticColors?.base?.borderSecondary};
-    `;
-}}
-`;
-
-const TableHeader = React.forwardRef((props, ref) => {
-    const { children } = props;
-    return (jsxRuntime.jsx(StyledTableHeader, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(TableRow, { hover: false, shouldShowTooltipOnHover: false, children: children }) })));
-});
 
 const TabsContext = React.createContext({ sdsSize: "large" });
 
@@ -22025,6 +22700,9 @@ exports.NavigationJumpTo = NavigationJumpTo;
 exports.Notification = Notification;
 exports.Pagination = Pagination;
 exports.Panel = Panel;
+exports.Popover = Popover;
+exports.PreComposedTable = PreComposedTable;
+exports.RowHoverContext = RowHoverContext;
 exports.SDSChooseTheme = SDSChooseTheme;
 exports.SDSDarkAppTheme = SDSDarkAppTheme;
 exports.SDSDarkThemeColors = SDSDarkThemeColors;