@czi-sds/components 23.4.0 → 23.5.0

package/dist/index.esm.js

@@ -3,7 +3,7 @@ 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 { 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';
@@ -7373,6 +7373,9 @@ var SDSWarningTypes;
     SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
     SDSWarningTypes["ContentCardActionsOnlyButtons"] = "contentCardActionsOnlyButtons";
     SDSWarningTypes["ClickableContentCardNumberOfButtons"] = "clickableContentCardNumberOfButtons";
+    SDSWarningTypes["SegmentedControlTooltipTextDeprecated"] = "segmentedControlTooltipTextDeprecated";
+    SDSWarningTypes["SegmentedControlMissingIconOrLabel"] = "segmentedControlMissingIconOrLabel";
+    SDSWarningTypes["SegmentedControlIconAndLabelConflict"] = "segmentedControlIconAndLabelConflict";
 })(SDSWarningTypes || (SDSWarningTypes = {}));
 const SDS_WARNINGS = {
     [SDSWarningTypes.ButtonMinimalIsAllCaps]: {
@@ -7430,6 +7433,21 @@ const SDS_WARNINGS = {
     [SDSWarningTypes.ClickableContentCardNumberOfButtons]: {
         hasWarned: false,
         message: "Warning: Clickable Content Cards can only have one or no buttons!"
+    },
+    [SDSWarningTypes.SegmentedControlTooltipTextDeprecated]: {
+        hasWarned: false,
+        message: 'Warning: "tooltipText" in SegmentedControl buttonDefinition is deprecated. ' +
+            'Please use "tooltipProps" instead. Example: { tooltipProps: { title: "My tooltip" } }'
+    },
+    [SDSWarningTypes.SegmentedControlMissingIconOrLabel]: {
+        hasWarned: false,
+        message: 'Warning: Each SegmentedControl button must have either an "icon" or a "label" prop. ' +
+            "A button was found with neither."
+    },
+    [SDSWarningTypes.SegmentedControlIconAndLabelConflict]: {
+        hasWarned: false,
+        message: 'Warning: Each SegmentedControl button should have either an "icon" or a "label", ' +
+            "not both. Please use only one per button."
     }
 };
 const showWarningIfFirstOccurence = (warningType) => {
@@ -7477,6 +7495,10 @@ const GeneralButtonGroupStyles = (props) => {
       min-width: fit-content;
       z-index: 1;
 
+      &::before {
+        border-radius: inherit;
+      }
+
       &:hover,
       &:active,
       &:focus {
@@ -7583,10 +7605,11 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7594,8 +7617,10 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       ${theme?.breakpoints?.down("md")} {
         padding: 0 14px;
@@ -7661,10 +7686,11 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7672,8 +7698,10 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       padding: 0 10px;
     }
@@ -7737,10 +7765,11 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${buttonGroupClasses.grouped}:has(svg):not(
         :has(.${buttonClasses.startIcon})
-      ):not(:has(.${buttonClasses.endIcon})) {
+      ):not(:has(.${buttonClasses.endIcon})),
+    .${buttonGroupClasses.grouped}:has(> .${buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7748,8 +7777,10 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${buttonGroupClasses.grouped}:has(.${buttonClasses.startIcon}):not(
+        :has(> .${buttonClasses.startIcon}:only-child)
+      ),
     .${buttonGroupClasses.grouped}:has(.${buttonClasses.endIcon}) {
       padding: 0 ${spaces?.s}px;
     }
@@ -7798,6 +7829,7 @@ const PrimaryButtonGroupStyles = (props) => {
     && .${buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${defaultColor};
 
       svg {
@@ -7809,6 +7841,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${hoverColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${hoverColor};
+      box-shadow: none;
 
       svg {
         color: ${hoverColor};
@@ -7819,6 +7852,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${pressedColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${pressedColor};
+      box-shadow: none;
 
       svg {
         color: ${pressedColor};
@@ -7833,6 +7867,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -7886,6 +7921,7 @@ const SecondaryButtonGroupStyles = (props) => {
     && .${buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${textColor};
 
       svg {
@@ -7897,6 +7933,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7907,6 +7944,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${pressedBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7921,6 +7959,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -8259,29 +8298,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};
+      }
     }
   `;
 };
@@ -18566,6 +18620,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 +18696,6 @@ const StyledSegmentedControl = styled(ToggleButtonGroup, {
         ${focusVisibleA11yStyle(props)}
         background-color: transparent;
         border: none;
-        line-height: 0px;
         color: ${semanticColors?.base?.ornamentSecondary};
         padding: ${spaces?.xxs}px ${spaces?.m}px;
         border-radius: ${corners?.m}px;
@@ -18636,6 +18724,14 @@ const StyledToggleButton = styled(ToggleButton, {
     `;
 }}
 `;
+const StyledToggleButtonIcon = styled("div") `
+  line-height: 0px;
+`;
+const StyledToggleButtonLabel = styled("div") `
+  ${fontBodyMediumS}
+  white-space: nowrap;
+  line-height: 16px !important;
+`;
 
 /**
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -18655,13 +18751,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 +22600,4 @@ const generateDiscreteColors = (count, options = {}) => {
     return isDarkMode ? colors.reverse() : colors;
 };
 
-export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonDropdownLegacy, ButtonGroup, ButtonIcon, ButtonLegacy, ButtonToggle, ButtonToggleLegacy, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, 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 };