@czi-sds/components 23.4.0 → 23.6.0

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, Children, isValidElement, useEffect, useRef, useState, useCallback, createElement, cloneElement, useMemo, createContext, Fragment as Fragment$1, useContext, memo } from 'react';
+import React__default, { forwardRef, Children, isValidElement, useEffect, useRef, useState, useCallback, createElement, cloneElement, useMemo, createContext, useImperativeHandle, Fragment as Fragment$1, useContext, memo } from 'react';
 import { css as css$1 } from '@emotion/react';
-import { createTheme, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme, Popper, styled as styled$1, ClickAwayListener, ButtonGroup as ButtonGroup$1, buttonGroupClasses, IconButton, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, menuClasses, Menu as Menu$1, checkboxClasses, Checkbox, FormControlLabel, Link as Link$1, Chip as Chip$1, alpha, darken as darken$1, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
+import { createTheme, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme, Popper, styled as styled$1, ClickAwayListener, ButtonGroup as ButtonGroup$1, buttonGroupClasses, IconButton, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, menuClasses, Menu as Menu$1, checkboxClasses, Checkbox, FormControlLabel, Link as Link$1, Chip as Chip$1, alpha, darken as darken$1, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, drawerClasses, popoverClasses, Popover as Popover$1, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
 export { CardMedia as ContentCardMedia } from '@mui/material';
 import styled from '@emotion/styled';
 import { Remove, Clear } from '@mui/icons-material';
@@ -421,12 +421,12 @@ const createAppThemeBorders = (colors, isDarkMode) => {
             default: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
             focused: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
             hover: createBorder("indigo", isDarkMode ? 700 : 600, "solid", "default"),
-            open: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
+            open: createBorder("indigo", isDarkMode ? 800 : 700, "solid", "default"),
             pressed: createBorder("indigo", isDarkMode ? 800 : 700, "solid", "default"),
-            selected: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default")
+            selected: createBorder("indigo", isDarkMode ? 800 : 700, "solid", "default")
         },
         base: {
-            default: createBorder("gray", 500, "solid", "default"),
+            default: createBorder("gray", 600, "solid", "default"),
             disabled: createBorder("gray", 300, "solid", "default"),
             divider: createBorder("gray", 200, "solid", "default"),
             dividerOnDark: createBorder("gray", isDarkMode ? 200 : 700, "solid", "default"),
@@ -456,9 +456,9 @@ const createAppThemeBorders = (colors, isDarkMode) => {
             thick: createBorder("red", 600, "solid", "thick")
         },
         neutral: {
-            default: createBorder("gray", 500, "solid", "default"),
-            extraThick: createBorder("gray", 500, "solid", "extraThick"),
-            thick: createBorder("gray", 500, "solid", "thick")
+            default: createBorder("gray", 700, "solid", "default"),
+            extraThick: createBorder("gray", 700, "solid", "extraThick"),
+            thick: createBorder("gray", 700, "solid", "thick")
         },
         none: "none",
         notice: {
@@ -6450,7 +6450,7 @@ const useDetectUserTabbing = (ref) => {
  * @see https://mui.com/material-ui/react-text-field/
  */
 const InputSearch = forwardRef(function InputSearch(props, ref) {
-    const { label, id, placeholder, sdsStyle = "square", intent = "default", handleSubmit, onChange, disabled, classes = EMPTY_OBJECT, className, ...rest } = props;
+    const { label, id, placeholder, sdsStyle = "square", intent = "default", handleSubmit, onChange, disabled, classes = EMPTY_OBJECT, className, value: propValue, ...rest } = props;
     const { root: rootClassName, label: labelClassName, input: inputClassName, endAdornment: endAdornmentClassName, startAdornment: startAdornmentClassName, clearButton: clearButtonClassName, searchButton: searchButtonClassName, } = classes;
     /**
      * (masoudmanson): In case that the ref is not provided, we will create a new one.
@@ -6465,14 +6465,20 @@ const InputSearch = forwardRef(function InputSearch(props, ref) {
      * user is tabbing, we can apply different styles for :focus and :focus-visible states.
      */
     useDetectUserTabbing((ref ? ref : inputRef));
-    const [value, setValue] = useState("");
+    const [internalValue, setInternalValue] = useState("");
+    const isControlled = propValue !== undefined;
+    const value = isControlled ? String(propValue ?? "") : internalValue;
     const handleChange = (event) => {
-        setValue(event.target.value);
+        if (!isControlled) {
+            setInternalValue(event.target.value);
+        }
         if (onChange)
             onChange(event);
     };
     const clearInput = () => {
-        setValue("");
+        if (!isControlled) {
+            setInternalValue("");
+        }
         if (handleSubmit)
             handleSubmit("");
         /**
@@ -7373,6 +7379,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]: {
@@ -7430,6 +7439,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) => {
@@ -7477,6 +7501,10 @@ const GeneralButtonGroupStyles = (props) => {
       min-width: fit-content;
       z-index: 1;
 
+      &::before {
+        border-radius: inherit;
+      }
+
       &:hover,
       &:active,
       &:focus {
@@ -7583,10 +7611,11 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7594,8 +7623,10 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       ${theme?.breakpoints?.down("md")} {
         padding: 0 14px;
@@ -7661,10 +7692,11 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7672,8 +7704,10 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       padding: 0 10px;
     }
@@ -7737,10 +7771,11 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7748,8 +7783,10 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       padding: 0 ${spaces?.s}px;
     }
@@ -7798,6 +7835,7 @@ const PrimaryButtonGroupStyles = (props) => {
     && .${buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${defaultColor};
 
       svg {
@@ -7809,6 +7847,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${hoverColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${hoverColor};
+      box-shadow: none;
 
       svg {
         color: ${hoverColor};
@@ -7819,6 +7858,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${pressedColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${pressedColor};
+      box-shadow: none;
 
       svg {
         color: ${pressedColor};
@@ -7833,6 +7873,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -7886,6 +7927,7 @@ const SecondaryButtonGroupStyles = (props) => {
     && .${buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${textColor};
 
       svg {
@@ -7897,6 +7939,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7907,6 +7950,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${pressedBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7921,6 +7965,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -8259,29 +8304,44 @@ const StageOnStyles = (props) => {
     // So we need to apply the "on" state background to ::before as well
     const isSecondary = sdsType === "secondary";
     if (isSecondary) {
+        /**
+         * Specificity boost via Emotion's `&&&&` technique.
+         *
+         * Each `&` repeats the component's generated class, producing a selector
+         * like `.css-abc123.css-abc123.css-abc123.css-abc123` — specificity (0,4,0).
+         *
+         * This is needed because ButtonGroup styles its children with
+         * `&& .MuiButtonGroup-grouped` which has specificity (0,3,0).
+         * Without the boost, the sdsStage="on" styles would always lose
+         * the cascade to the ButtonGroup's parent-level overrides.
+         */
         return css$1 `
-      color: ${contentColor};
+      &&&& {
+        color: ${contentColor};
 
-      svg {
-        color: ${ornamentColor};
-      }
+        svg {
+          color: ${ornamentColor};
+        }
 
-      /* Apply "on" state background via ::before to match Button's hover pattern */
-      &::before {
-        background-color: ${sdsStyle === "minimal" && !backgroundOnHover
+        /* Apply "on" state background via ::before to match Button's hover pattern */
+        &::before {
+          background-color: ${sdsStyle === "minimal" && !backgroundOnHover
             ? "transparent"
             : backgroundColor};
+        }
       }
     `;
     }
     return css$1 `
-    background-color: ${sdsStyle === "minimal" && !backgroundOnHover
+    &&&& {
+      background-color: ${sdsStyle === "minimal" && !backgroundOnHover
         ? "transparent"
         : backgroundColor};
-    color: ${contentColor};
+      color: ${contentColor};
 
-    svg {
-      color: ${ornamentColor};
+      svg {
+        color: ${ornamentColor};
+      }
     }
   `;
 };
@@ -9302,18 +9362,31 @@ const TableRow = forwardRef((props, ref) => {
 
 const StyledTableHeader$1 = styled("thead") `
   ${(props) => {
+    const { hasFilterRow } = props;
     const semanticColors = getSemanticColors(props);
     return `
       border-bottom: solid 2px ${semanticColors?.base?.borderSecondary};
       margin: 0;
       padding: 0;
+
+      ${hasFilterRow
+        ? `
+        > tr:first-of-type {
+          border-bottom: none;
+
+          :after {
+            display: none !important;
+          }
+        }
+      `
+        : ""}
     `;
 }}
 `;
 
 const TableHeader = forwardRef((props, ref) => {
-    const { children } = props;
-    return (jsx(StyledTableHeader$1, __assign({ ref: ref }, props, { children: jsx(TableRow, { hover: false, shouldShowTooltipOnHover: false, children: children }) })));
+    const { children, filterRow } = props;
+    return (jsxs(StyledTableHeader$1, __assign({ ref: ref, hasFilterRow: !!filterRow }, props, { children: [jsx(TableRow, { hover: false, shouldShowTooltipOnHover: false, children: children }), filterRow] })));
 });
 
 const contentPositionMapping = {
@@ -9357,7 +9430,6 @@ const ShouldTruncate$1 = () => {
 };
 const StyledTableHeader = styled.div `
   ${fontHeaderS}
-  ${focusVisibleA11yStyle}
 
   ${(props) => {
     const { active = false, horizontalAlign = "left", hover = true } = props;
@@ -9370,6 +9442,7 @@ const StyledTableHeader = styled.div `
         ? semanticColors?.accent?.foregroundInteraction
         : semanticColors?.base?.textPrimary;
     return `
+      outline: none;
       color: ${defaultColor};
       padding: ${spaces?.m}px !important;
       text-align: ${horizontalAlign};
@@ -9940,12 +10013,12 @@ const InputCheckbox = (props) => {
 
 const StyledCellComponentData = styled.div `
   ${fontBodyS$1}
-  ${focusVisibleA11yStyle}
 
   ${(props) => {
     const spaces = getSpaces(props);
     const { horizontalAlign = "left", verticalAlign = "top" } = props;
     return `
+      outline: none;
       align-items: center;
       text-align: ${horizontalAlign};
       vertical-align: ${verticalAlign};
@@ -10057,6 +10130,104 @@ const StyledTableWrapper = styled.div `
           }
         }
       }
+
+      td,
+      th {
+        --pinned-gradient-base: transparent;
+        --pinned-gradient-bg: ${semanticColors?.base?.backgroundPrimary};
+        --pinned-gradient-overlay: transparent;
+      }
+
+      tbody tr:hover td,
+      tbody tr:hover th {
+        --pinned-gradient-overlay: ${semanticColors?.base
+        ?.fillPrimaryInteraction};
+      }
+
+      tbody tr[aria-selected="true"] td,
+      tbody tr[aria-selected="true"] th {
+        --pinned-gradient-bg: ${semanticColors?.accent?.surfaceSecondary};
+      }
+
+      ${sdsStyle === "striped" &&
+        `
+        tbody tr:nth-of-type(odd) td,
+        tbody tr:nth-of-type(odd) th {
+          --pinned-gradient-base: ${semanticColors?.base?.backgroundPrimary};
+          --pinned-gradient-bg: ${semanticColors?.base?.backgroundSecondary};
+        }
+
+        tbody tr:nth-of-type(odd):hover td,
+        tbody tr:nth-of-type(odd):hover th {
+          --pinned-gradient-base: transparent;
+          --pinned-gradient-bg: ${semanticColors?.base?.backgroundPrimary};
+        }
+
+        tbody tr[aria-selected="true"]:nth-of-type(odd) td,
+        tbody tr[aria-selected="true"]:nth-of-type(odd) th {
+          --pinned-gradient-base: transparent;
+          --pinned-gradient-bg: ${semanticColors?.accent?.surfaceSecondary};
+        }
+
+        tbody tr[aria-selected="true"]:nth-of-type(odd):hover td,
+        tbody tr[aria-selected="true"]:nth-of-type(odd):hover th {
+          --pinned-gradient-base: transparent;
+          --pinned-gradient-bg: ${semanticColors?.accent?.surfaceSecondary};
+        }
+      `}
+
+      [data-pinned-edge]::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 24px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+
+      [data-pinned-edge="left"]::after {
+        right: 0;
+        transform: translateX(100%);
+        background:
+          linear-gradient(
+            var(--pinned-gradient-overlay),
+            var(--pinned-gradient-overlay)
+          ),
+          linear-gradient(var(--pinned-gradient-bg), var(--pinned-gradient-bg)),
+          linear-gradient(
+            var(--pinned-gradient-base),
+            var(--pinned-gradient-base)
+          );
+        -webkit-mask-image: linear-gradient(to right, black, transparent);
+        mask-image: linear-gradient(to right, black, transparent);
+      }
+
+      [data-pinned-edge="right"]::after {
+        left: 0;
+        transform: translateX(-100%);
+        background:
+          linear-gradient(
+            var(--pinned-gradient-overlay),
+            var(--pinned-gradient-overlay)
+          ),
+          linear-gradient(var(--pinned-gradient-bg), var(--pinned-gradient-bg)),
+          linear-gradient(
+            var(--pinned-gradient-base),
+            var(--pinned-gradient-base)
+          );
+        -webkit-mask-image: linear-gradient(to left, black, transparent);
+        mask-image: linear-gradient(to left, black, transparent);
+      }
+
+      &[data-scrolled-left="true"] [data-pinned-edge="left"]::after {
+        opacity: 1;
+      }
+
+      &[data-scrolled-right="true"] [data-pinned-edge="right"]::after {
+        opacity: 1;
+      }
     `;
 }}
 `;
@@ -10108,6 +10279,38 @@ const StyledPaginationWrapper = styled.div `
 const StyledSelectionCell = styled(CellComponent) `
   line-height: 22px !important;
 `;
+const StyledFilterRow = styled("tr") `
+  ${(props) => {
+    const semanticColors = getSemanticColors(props);
+    return `
+      background-color: ${semanticColors?.base?.backgroundPrimary};
+      border: none;
+      box-shadow: none;
+
+      td, th {
+        background-color: ${semanticColors?.base?.backgroundPrimary};
+      }
+
+      &:after {
+        display: none !important;
+      }
+
+      &:hover {
+        background-color: ${semanticColors?.base?.backgroundPrimary};
+      }
+    `;
+}}
+`;
+const StyledFilterCell = styled("th") `
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      padding: 0 ${spaces?.s}px ${spaces?.s}px;
+      vertical-align: middle;
+      width: 100%;
+    `;
+}}
+`;
 
 const SELECT_COLUMN_ID = "SdsTableSelectColumn";
 function getSize(size = 100, max = Number.MAX_SAFE_INTEGER, min = 40) {
@@ -10203,11 +10406,78 @@ const getCommonPinningStyles = (column, table) => {
     };
 };
 
+/**
+ * Manages gradient vignettes on the inner edges of pinned columns.
+ *
+ * Identifies which columns sit at the boundary of left/right pinned groups
+ * and toggles scroll-aware data attributes on the wrapper so the CSS
+ * gradients in StyledTableWrapper only appear while content scrolls
+ * underneath the pinned columns.
+ */
+function usePinnedColumnGradient(table, columns) {
+    const tableWrapperRef = useRef(null);
+    const { lastLeftPinnedColumnId, firstRightPinnedColumnId } = useMemo(() => {
+        const allCols = table.getAllColumns();
+        const leftPinned = allCols.filter((col) => col.columnDef.meta?.pinning === "left");
+        const rightPinned = allCols.filter((col) => col.columnDef.meta?.pinning === "right");
+        return {
+            firstRightPinnedColumnId: rightPinned.length > 0 ? rightPinned[0].id : null,
+            lastLeftPinnedColumnId: leftPinned.length > 0 ? leftPinned[leftPinned.length - 1].id : null
+        };
+        // (masoudmanson): `columns` is included as a dependency even though only
+        // `table.getAllColumns()`is called inside the callback. The TanStack
+        // Table `table` object can be a stable reference that doesn't change
+        // identity when column definitions change, so `columns` acts as a
+        // reactivity signal to ensure this memo recomputes.
+        //
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [table, columns]);
+    const getPinnedEdge = useCallback((columnId) => {
+        if (columnId === lastLeftPinnedColumnId)
+            return "left";
+        if (columnId === firstRightPinnedColumnId)
+            return "right";
+        return undefined;
+    }, [lastLeftPinnedColumnId, firstRightPinnedColumnId]);
+    useEffect(() => {
+        const wrapper = tableWrapperRef.current;
+        if (!wrapper)
+            return;
+        if (!lastLeftPinnedColumnId && !firstRightPinnedColumnId)
+            return;
+        const updateScrollState = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = wrapper;
+            const hasHorizontalScroll = scrollWidth > clientWidth;
+            if (scrollLeft > 0) {
+                wrapper.setAttribute("data-scrolled-left", "true");
+            }
+            else {
+                wrapper.removeAttribute("data-scrolled-left");
+            }
+            if (hasHorizontalScroll && scrollLeft < scrollWidth - clientWidth - 1) {
+                wrapper.setAttribute("data-scrolled-right", "true");
+            }
+            else {
+                wrapper.removeAttribute("data-scrolled-right");
+            }
+        };
+        updateScrollState();
+        wrapper.addEventListener("scroll", updateScrollState, { passive: true });
+        const resizeObserver = new ResizeObserver(() => updateScrollState());
+        resizeObserver.observe(wrapper);
+        return () => {
+            wrapper.removeEventListener("scroll", updateScrollState);
+            resizeObserver.disconnect();
+        };
+    }, [lastLeftPinnedColumnId, firstRightPinnedColumnId]);
+    return { getPinnedEdge, tableWrapperRef };
+}
+
 // Create context for row hover state
 const RowHoverContext = createContext({
     isRowHovered: false
 });
-const PreComposedTable = ({ data, columns, border = true, enableSorting = false, enableRowSelection = false, shouldPinSelectRowToLeft = true, enablePagination = false, enableColumnFiltering = false, enableGlobalFiltering = false, paginationConfig, className, style, tableWidth = "100%", onRowSelect, tableRowProps, sdsStyle = "lined", }) => {
+const PreComposedTableInner = ({ 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", tableOptions, }, ref) => {
     const [sorting, setSorting] = useState([]);
     const [rowSelection, setRowSelection] = useState({});
     const [columnVisibility, setColumnVisibility] = useState({});
@@ -10279,10 +10549,35 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
             ...columnsWithoutSelection,
         ];
     }, [columns, enableRowSelection, shouldPinSelectRowToLeft]);
+    const { onSortingChange: externalOnSortingChange, onRowSelectionChange: externalOnRowSelectionChange, onColumnVisibilityChange: externalOnColumnVisibilityChange, onColumnPinningChange: externalOnColumnPinningChange, onGlobalFilterChange: externalOnGlobalFilterChange, onPaginationChange: externalOnPaginationChange, } = tableOptions ?? {};
+    const handleSortingChange = useCallback((updater) => {
+        setSorting(updater);
+        externalOnSortingChange?.(updater);
+    }, [externalOnSortingChange]);
+    const handleRowSelectionChange = useCallback((updater) => {
+        setRowSelection(updater);
+        externalOnRowSelectionChange?.(updater);
+    }, [externalOnRowSelectionChange]);
+    const handleColumnVisibilityChange = useCallback((updater) => {
+        setColumnVisibility(updater);
+        externalOnColumnVisibilityChange?.(updater);
+    }, [externalOnColumnVisibilityChange]);
+    const handleColumnPinningChange = useCallback((updater) => {
+        setColumnPinning(updater);
+        externalOnColumnPinningChange?.(updater);
+    }, [externalOnColumnPinningChange]);
+    const handleGlobalFilterChange = useCallback((updater) => {
+        setGlobalFilter(updater);
+        externalOnGlobalFilterChange?.(updater);
+    }, [externalOnGlobalFilterChange]);
+    const handlePaginationChange = useCallback((updater) => {
+        setPagination(updater);
+        externalOnPaginationChange?.(updater);
+    }, [externalOnPaginationChange]);
     const table = useReactTable({
+        ...tableOptions,
         columns: tableColumns,
         data,
-        debugTable: true,
         enableColumnFilters: enableColumnFiltering,
         enableGlobalFilter: enableGlobalFiltering,
         enableRowSelection: enableRowSelection,
@@ -10291,21 +10586,23 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
         getFilteredRowModel: getFilteredRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
-        onColumnPinningChange: setColumnPinning,
-        onColumnVisibilityChange: setColumnVisibility,
-        onGlobalFilterChange: setGlobalFilter,
-        onPaginationChange: setPagination,
-        onRowSelectionChange: setRowSelection,
-        onSortingChange: setSorting,
+        onColumnPinningChange: handleColumnPinningChange,
+        onColumnVisibilityChange: handleColumnVisibilityChange,
+        onGlobalFilterChange: handleGlobalFilterChange,
+        onPaginationChange: handlePaginationChange,
+        onRowSelectionChange: handleRowSelectionChange,
+        onSortingChange: handleSortingChange,
         state: {
             columnPinning,
             columnVisibility,
             globalFilter,
             pagination,
             rowSelection,
-            sorting
+            sorting,
+            ...tableOptions?.state
         }
     });
+    useImperativeHandle(ref, () => ({ table }), [table]);
     const createInitialPinning = useCallback(() => {
         const initialPinning = {};
         tableColumns.forEach((column) => {
@@ -10358,6 +10655,7 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
             resizeObserver.disconnect();
         };
     }, [headers, table]);
+    const { tableWrapperRef, getPinnedEdge } = usePinnedColumnGradient(table, tableColumns);
     const renderCell = (cell, row) => {
         const isRowHovered = hoveredRowId === row.id;
         const isPinned = cell.column.columnDef.meta?.pinning;
@@ -10388,7 +10686,7 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
                     : cell.column.columnDef.meta?.verticalAlign }));
         }
         if (isPinned) {
-            return (jsx(RowHoverContext.Provider, { value: { isRowHovered }, children: jsx("td", { style: {
+            return (jsx(RowHoverContext.Provider, { value: { isRowHovered }, children: jsx("td", { "data-pinned-edge": getPinnedEdge(cell.column.id), style: {
                         ...pinnedStyle,
                         width: `${cell.column.getSize()}px`,
                         verticalAlign: cell.column.columnDef.meta?.verticalAlign
@@ -10399,16 +10697,41 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
                     width: `${cell.column.getSize()}px`
                 }, children: cellContent }) }, cell.id));
     };
+    const renderFilterCell = (header) => {
+        const column = header.column;
+        const isPinned = column.columnDef.meta?.pinning;
+        const pinnedStyle = getCommonPinningStyles(column, table);
+        const isSelectionColumn = column.id === SELECT_COLUMN_ID;
+        const cellStyle = {
+            ...(isPinned ? pinnedStyle : {}),
+            width: `${column.getSize()}px`
+        };
+        const pinnedEdge = isPinned ? getPinnedEdge(column.id) : undefined;
+        const customFilter = column.columnDef.meta?.filterComponent;
+        if (customFilter && !isSelectionColumn) {
+            return (jsx(StyledFilterCell, { "data-pinned-edge": pinnedEdge, style: cellStyle, children: customFilter({ column, table }) }, `filter-${header.id}`));
+        }
+        const canFilter = column.getCanFilter() && !isSelectionColumn;
+        if (!canFilter) {
+            return (jsx(StyledFilterCell, { "data-pinned-edge": pinnedEdge, style: cellStyle }, `filter-${header.id}`));
+        }
+        return (jsx(StyledFilterCell, { "data-pinned-edge": pinnedEdge, style: cellStyle, children: jsx(InputSearch, { id: `filter-${column.id}`, label: `Filter ${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`, placeholder: "Search", sdsStyle: "square", value: column.getFilterValue() ?? "", onChange: (e) => column.setFilterValue(e.target.value || undefined) }) }, `filter-${header.id}`));
+    };
+    const renderFilterRow = () => {
+        const flatHeaders = table.getFlatHeaders();
+        return (jsx(StyledFilterRow, { children: flatHeaders.map((header) => renderFilterCell(header)) }));
+    };
     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 { ref: headerCellRef, ...headerCellProps } = header.column.columnDef.meta?.headerCellProps || {};
         const pinnedStyle = getCommonPinningStyles(header.column, table);
+        const pinnedEdge = isPinned ? getPinnedEdge(header.column.id) : undefined;
         if (typeof header.column.columnDef.header === "string") {
-            return (jsx(CellHeader, __assign({ colSpan: header.colSpan, style: {
+            return (jsx(CellHeader, __assign({ colSpan: header.colSpan, "data-pinned-edge": pinnedEdge, 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));
@@ -10416,6 +10739,7 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
         else if (header.column.columnDef.header) {
             return flexRender(header.column.columnDef.header, {
                 ...header.getContext(),
+                "data-pinned-edge": pinnedEdge,
                 key: header.id,
                 style: {
                     ...(isPinned ? pinnedStyle : {}),
@@ -10425,20 +10749,21 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
         }
         else {
             // Fallback for undefined header content
-            return (jsx(CellHeader, { colSpan: header.colSpan, style: {
+            return (jsx(CellHeader, { colSpan: header.colSpan, "data-pinned-edge": pinnedEdge, style: {
                     ...(isPinned ? pinnedStyle : {}),
                     width: `${header.getSize()}px`
                 }, active: !!isSorted, direction: sortDirection || undefined, hover: isSortable, onClick: header.column.getToggleSortingHandler(), children: header.column.id || "Header" }, header.id));
         }
     };
-    return (jsxs(StyledTableContainer$1, { ref: tableContainerRef, className: className, style: { width: tableWidth, ...style }, children: [enableGlobalFiltering && (jsx("div", { style: { marginBottom: "16px" }, children: jsx(StyledInputSearch, { id: "global-search", label: "Search", placeholder: "Search all columns...", value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsx(StyledTableWrapper, { border: border, sdsStyle: sdsStyle, children: jsxs(Table, { children: [jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => {
+    return (jsxs(StyledTableContainer$1, { ref: tableContainerRef, className: className, style: { width: tableWidth, ...style }, children: [enableGlobalFiltering && (jsx("div", { style: { marginBottom: "16px" }, children: jsx(StyledInputSearch, { id: "global-search", label: "Search", placeholder: "Search all columns...", value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsx(StyledTableWrapper, { ref: tableWrapperRef, border: border, sdsStyle: sdsStyle, children: jsxs(Table, { children: [jsx(TableHeader, { filterRow: enableColumnFiltering ? renderFilterRow() : undefined, children: table.getHeaderGroups().map((headerGroup) => {
                                 return (jsx(Fragment$1, { children: headerGroup.headers.map((header) => {
                                         return renderHeader(header);
                                     }) }, headerGroup.id));
-                            }) }), jsx("tbody", { children: table.getRowModel().rows.map((row) => (jsx(TableRow, __assign({ onMouseEnter: () => setHoveredRowId(row.id), onMouseLeave: () => setHoveredRowId(null), selected: row.getIsSelected(), "aria-selected": row.getIsSelected() }, tableRowProps, { children: row.getVisibleCells().map((cell) => {
+                            }) }), jsx("tbody", { children: table.getRowModel().rows.map((row) => (jsx(TableRow, __assign({ onMouseEnter: () => setHoveredRowId(row.id), onMouseLeave: () => setHoveredRowId(null), selected: row.getIsSelected(), "aria-selected": row.getIsSelected(), className: "group" }, tableRowProps, { children: row.getVisibleCells().map((cell) => {
                                     return renderCell(cell, row);
                                 }) }), row.id))) })] }) }), enablePagination && (jsx(StyledPaginationWrapper, { placement: paginationConfig?.placement, children: jsx(Pagination, __assign({ currentPage: table.getState().pagination.pageIndex + 1, onPageChange: (page) => table.setPageIndex(page - 1), onNextPage: () => table.nextPage(), onPreviousPage: () => table.previousPage(), pageSize: table.getState().pagination.pageSize, totalCount: table.getFilteredRowModel().rows.length }, paginationConfig)) }))] }, `table-${columns.length}-${columns.map((col) => col.id || "col").join("-")}`));
 };
+const PreComposedTable = forwardRef(PreComposedTableInner);
 
 const doNotForwardProps$v = [
     "icon",
@@ -10527,6 +10852,7 @@ const PrimaryText = styled("div", {
     return `
       display: block;
       font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      white-space: pre-wrap;
       
       ${props.shouldTextWrap
         ? ShouldWrap(primaryTextWrapLineCount)
@@ -10547,6 +10873,7 @@ const SecondaryText = styled("span", {
       color: ${semanticColors?.base?.textSecondary};
       padding-top: 0px;
       font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      white-space: pre-wrap;
 
       ${props.shouldTextWrap
         ? ShouldWrap(secondaryTextWrapLineCount)
@@ -10568,6 +10895,7 @@ const TertiaryText = styled("span", {
       color: ${semanticColors?.base?.textSecondary};
       padding-top: ${spaces?.xxxs}px;
       font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      white-space: pre-wrap;
 
       ${props.shouldTextWrap
         ? ShouldWrap(tertiaryTextWrapLineCount)
@@ -10593,7 +10921,6 @@ const PrimaryTextComponentSlotRightWrapper = styled("div") `
 `;
 const StyledTableData = styled.div `
   ${fontBodyS$1}
-  ${focusVisibleA11yStyle}
 
   ${(props) => {
     const { horizontalAlign = "left", verticalAlign = "top", shouldShowUnderlineOnHover = false, isRowHovered = false, extraRightPadding = 0, } = props;
@@ -10602,6 +10929,7 @@ const StyledTableData = styled.div `
         ? (spaces?.m ?? 0) + extraRightPadding
         : spaces?.m;
     return `
+        outline: none;
         padding: ${spaces?.m}px ${paddingRight}px ${spaces?.m}px ${spaces?.m}px !important;
         text-align: ${horizontalAlign};
         vertical-align: ${verticalAlignCSSMap[verticalAlign]};
@@ -10609,12 +10937,12 @@ const StyledTableData = styled.div `
 
         &:hover {
           ${PrimaryText} {
-            ${shouldShowUnderlineOnHover ? "text-decoration: underline;" : ""}
+            ${shouldShowUnderlineOnHover ? "text-decoration: underline !important;" : ""}
           }
         }
 
         ${PrimaryText} {
-          ${isRowHovered && shouldShowUnderlineOnHover ? "text-decoration: underline;" : ""}
+          ${isRowHovered && shouldShowUnderlineOnHover ? "text-decoration: underline !important;" : ""}
         }
     `;
 }}
@@ -18466,11 +18794,28 @@ const StyledHeaderComponent = styled("div") `
       top: 0;
       z-index: 1000;
       background-color: ${semanticColors?.base?.backgroundPrimary};
-      padding-bottom: ${spaces?.xl}px;
+      padding-bottom: ${spaces?.m}px;
+      margin-bottom: ${spaces?.m}px;
       padding-top: ${spaces?.xl}px;
       display: flex;
       justify-content: space-between;
-      align-items: start;
+      align-items: center;
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: ${spaces?.xl}px;
+        transform: translateY(100%);
+        background: linear-gradient(
+          to bottom,
+          ${semanticColors?.base?.backgroundPrimary},
+          transparent
+        );
+        pointer-events: none;
+      }
     `;
 }}
 `;
@@ -18500,6 +18845,8 @@ const StyledPanelHeaderClose = styled("div") `
     align-items: center;
 
     button {
+      height: auto !important;
+      
       svg {
         width: ${iconSizes?.l?.width}px;
         height: ${iconSizes?.l?.height}px;
@@ -18566,6 +18913,41 @@ const Panel = React__default.forwardRef((props, ref) => {
         }, slotProps: SLOT_PROPS, hideBackdrop: !isBackdropClickEnabled, children: [isOverlayPanelProps(props) && (jsxs(StyledHeaderComponent, { children: [props?.HeaderComponent && (jsx(PanelHeader, { children: props?.HeaderComponent })), jsx(PanelHeaderClose, { onClick: props?.closeButtonOnClick, CloseButtonComponent: props?.CloseButtonComponent })] })), children] })));
 });
 
+const StyledPopover = styled(Popover$1) `
+  & .${popoverClasses.paper} {
+    ${(props) => {
+    const corners = getCorners(props);
+    const shadows = getShadows(props);
+    const semanticColors = getSemanticColors(props);
+    const borders = getBorders(props);
+    const spaces = getSpaces(props);
+    return `
+        background-color: ${semanticColors?.base?.surfacePrimary};
+        background-image: none;
+        border-radius: ${corners?.l}px;
+        padding: ${spaces?.xs}px ${spaces?.m}px;
+        border: ${borders?.none};
+        outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
+        box-shadow: ${shadows?.m};
+        box-sizing: border-box;
+        z-index: ${props?.theme?.zIndex?.tooltip ?? 1400};
+      `;
+}}
+  }
+`;
+
+/**
+ * @see https://mui.com/material-ui/react-popover/
+ */
+const Popover = forwardRef(function Popover(props, ref) {
+    const theme = useTheme();
+    const spaces = getSpaces({ theme });
+    return (jsx(StyledPopover, __assign({ ref: ref, anchorOrigin: {
+            horizontal: "left",
+            vertical: "bottom"
+        }, transformOrigin: { vertical: -(spaces?.s || 8), horizontal: 0 } }, props)));
+});
+
 const doNotForwardProps = ["buttonDefinition"];
 const StyledSegmentedControl = styled(ToggleButtonGroup, {
     shouldForwardProp: (prop) => !doNotForwardProps.includes(prop)
@@ -18607,7 +18989,6 @@ const StyledSegmentedControl = styled(ToggleButtonGroup, {
         ${focusVisibleA11yStyle(props)}
         background-color: transparent;
         border: none;
-        line-height: 0px;
         color: ${semanticColors?.base?.ornamentSecondary};
         padding: ${spaces?.xxs}px ${spaces?.m}px;
         border-radius: ${corners?.m}px;
@@ -18636,6 +19017,14 @@ const StyledToggleButton = styled(ToggleButton, {
     `;
 }}
 `;
+const StyledToggleButtonIcon = styled("div") `
+  line-height: 0px;
+`;
+const StyledToggleButtonLabel = styled("div") `
+  ${fontBodyMediumS}
+  white-space: nowrap;
+  line-height: 16px !important;
+`;
 
 /**
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -18655,13 +19044,27 @@ const SegmentedControl = (props) => {
             onChangeProp(event, newActive);
         }
     };
-    return (jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map((button) => {
-                const { icon, tooltipText, value: buttonValue, disabled = false, } = button;
-                const iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
-                const toggleButton = (jsx(StyledToggleButton, { "aria-label": tooltipText ?? buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
-                // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
-                return disabled ? (toggleButton) : (jsx(Tooltip, { title: tooltipText ?? buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
-            }), ";"] })));
+    return (jsx(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: buttonDefinition.map((button) => {
+            const { icon, label, shouldShowTooltip = true, tooltipProps, tooltipText, value: buttonValue, disabled = false, } = button;
+            if (tooltipText) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlTooltipTextDeprecated);
+            }
+            if (!icon && !label) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlMissingIconOrLabel);
+            }
+            if (icon && label) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlIconAndLabelConflict);
+            }
+            const iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
+            const buttonContent = label ? (jsx(StyledToggleButtonLabel, { children: label })) : iconItem ? (jsx(StyledToggleButtonIcon, { children: iconItem })) : (jsx(StyledToggleButtonLabel, { children: buttonValue }));
+            const toggleButton = (jsx(StyledToggleButton, { "aria-label": tooltipText ?? label ?? buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: buttonContent }) }, buttonValue));
+            // Resolve the tooltip title: tooltipText takes priority,
+            // then tooltipProps.title, then label, then falls back to buttonValue.
+            const resolvedTitle = tooltipText ?? tooltipProps?.title ?? label ?? buttonValue;
+            // (masoudmanson): If the button is disabled or shouldShowTooltip
+            // is false, we don't render the tooltip.
+            return disabled || !shouldShowTooltip ? (toggleButton) : (createElement(Tooltip, __assign({ arrow: true }, tooltipProps, { title: resolvedTitle, key: buttonValue }), toggleButton));
+        }) })));
 };
 
 const TabsContext = createContext({ sdsSize: "large" });
@@ -22490,4 +22893,4 @@ const generateDiscreteColors = (count, options = {}) => {
     return isDarkMode ? colors.reverse() : colors;
 };
 
-export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonDropdownLegacy, ButtonGroup, ButtonIcon, ButtonLegacy, ButtonToggle, ButtonToggleLegacy, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, PreComposedTable, RowHoverContext, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, isIconOnlyButton, makeSdsSemanticAppTheme, makeThemeOptions };
+export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonDropdownLegacy, ButtonGroup, ButtonIcon, ButtonLegacy, ButtonToggle, ButtonToggleLegacy, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, Popover, PreComposedTable, RowHoverContext, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, isIconOnlyButton, makeSdsSemanticAppTheme, makeThemeOptions };