@czi-sds/components 24.0.0 → 24.2.0

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import * as React$1 from "react";
 import React, { Children, Fragment, cloneElement, createContext, createElement, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import _styled from "@emotion/styled/base";
 import { css } from "@emotion/react";
-import { Accordion as Accordion$1, AccordionDetails as AccordionDetails$1, AccordionSummary, Alert as Alert$1, AlertTitle, AppBar, Autocomplete as Autocomplete$1, Box, Button as Button$1, ButtonGroup as ButtonGroup$1, Card, CardActions, CardContent, CardMedia, CardMedia as CardMedia$1, Checkbox, Chip as Chip$1, ClickAwayListener, Dialog as Dialog$1, DialogActions as DialogActions$1, DialogContent, DialogTitle as DialogTitle$1, Divider, Drawer, FormControlLabel, Grow, IconButton, InputAdornment, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuList, Paper, Popover as Popover$1, Popper, Radio, Slide, Slider, SvgIcon, Switch, Tab as Tab$1, Table as Table$1, TableBody, TableCell, TableContainer, TableRow as TableRow$1, Tabs as Tabs$1, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip as Tooltip$1, Typography, accordionClasses, accordionDetailsClasses, accordionSummaryClasses, alertClasses, alertTitleClasses, alpha, autocompleteClasses, buttonBaseClasses, buttonClasses, buttonGroupClasses, checkboxClasses, createTheme, css as css$1, darken, dialogActionsClasses, drawerClasses, inputAdornmentClasses, inputBaseClasses, menuClasses, menuItemClasses, outlinedInputClasses, popoverClasses, radioClasses, sliderClasses, styled, switchClasses, tabsClasses, toggleButtonClasses, useMediaQuery, useScrollTrigger, useTheme } from "@mui/material";
+import { Accordion as Accordion$1, AccordionDetails as AccordionDetails$1, AccordionSummary, Alert as Alert$1, AlertTitle, AppBar, Autocomplete as Autocomplete$1, Box, Button as Button$1, ButtonGroup as ButtonGroup$1, Card, CardActions, CardContent, CardMedia, CardMedia as CardMedia$1, Checkbox, Chip as Chip$1, ClickAwayListener, Dialog as Dialog$1, DialogActions as DialogActions$1, DialogContent, DialogTitle as DialogTitle$1, Divider, Drawer, FormControlLabel, Grow, IconButton, InputAdornment, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuList, Paper, Popover as Popover$1, Popper, Radio, Slide, Slider, SvgIcon, Switch, Tab as Tab$1, Table as Table$1, TableBody, TableCell, TableContainer, TableRow as TableRow$1, Tabs as Tabs$1, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip as Tooltip$1, Typography, accordionClasses, accordionDetailsClasses, accordionSummaryClasses, alertClasses, alertTitleClasses, alpha, autocompleteClasses, backdropClasses, buttonBaseClasses, buttonClasses, buttonGroupClasses, checkboxClasses, createTheme, css as css$1, darken, dialogActionsClasses, drawerClasses, inputAdornmentClasses, inputBaseClasses, menuClasses, menuItemClasses, outlinedInputClasses, popoverClasses, radioClasses, sliderClasses, styled, switchClasses, tabsClasses, toggleButtonClasses, useMediaQuery, useScrollTrigger, useTheme } from "@mui/material";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useForkRef } from "@mui/material/utils";
 import { Clear } from "@mui/icons-material";
@@ -645,7 +645,7 @@ const SDSDarkThemeColors = {
 		"500": "#aaaaaa",
 		"600": "#cdcdcd",
 		"700": "#ededed",
-		"75": "#101010",
+		"75": "#1b1b1b",
 		"800": "#fafafa",
 		"900": "#ffffff"
 	},
@@ -902,7 +902,8 @@ const SDSPaletteLight = (appTheme) => {
 			borderPrimaryOnDark: appTheme.colors.gray[300],
 			borderPrimaryInverse: appTheme.colors.gray[300],
 			borderPrimaryPressedInverse: appTheme.colors.gray[50],
-			borderSecondary: appTheme.colors.gray[300],
+			borderSecondary: addOpacityToHex(appTheme.colors.gray[300], 70),
+			borderHighlight: addOpacityToHex(appTheme.colors.gray[900], 10),
 			borderSecondaryOnDark: appTheme.colors.gray[600],
 			divider: appTheme.colors.gray[200],
 			dividerOnDark: appTheme.colors.gray[700],
@@ -932,6 +933,7 @@ const SDSPaletteLight = (appTheme) => {
 			ornamentPrimaryOnDark: appTheme.colors.gray[50],
 			ornamentPrimaryInverse: appTheme.colors.gray[50],
 			ornamentSecondary: appTheme.colors.gray[600],
+			ornamentTertiary: appTheme.colors.gray[300],
 			ornamentSecondaryInteraction: appTheme.colors.gray[900],
 			ornamentSecondaryInteractionOnDark: appTheme.colors.gray[50],
 			ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
@@ -940,6 +942,7 @@ const SDSPaletteLight = (appTheme) => {
 			ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
 			surfacePrimary: appTheme.colors.gray[50],
 			surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 20),
+			surfaceTertiary: appTheme.colors.gray[200],
 			surfacePrimaryDark: appTheme.colors.gray[900],
 			surfaceInverse: appTheme.colors.gray[900],
 			textDisabled: appTheme.colors.gray[300],
@@ -1100,8 +1103,8 @@ const SDSPaletteDark = (appTheme) => {
 			textActionPressed: appTheme.colors.indigo[800]
 		},
 		base: {
-			backgroundPrimary: appTheme.colors.gray[75],
-			backgroundPrimaryDark: appTheme.colors.gray[75],
+			backgroundPrimary: appTheme.colors.gray[50],
+			backgroundPrimaryDark: appTheme.colors.gray[50],
 			backgroundPrimaryInverse: appTheme.colors.gray[75],
 			backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 60),
 			backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[100], 60),
@@ -1118,20 +1121,21 @@ const SDSPaletteDark = (appTheme) => {
 			borderPrimaryOnDark: appTheme.colors.gray[600],
 			borderPrimaryInverse: appTheme.colors.gray[600],
 			borderPrimaryPressedInverse: appTheme.colors.gray[900],
-			borderSecondary: appTheme.colors.gray[300],
+			borderSecondary: addOpacityToHex(appTheme.colors.gray[300], 70),
+			borderHighlight: addOpacityToHex(appTheme.colors.gray[900], 10),
 			borderSecondaryOnDark: appTheme.colors.gray[300],
 			divider: appTheme.colors.gray[200],
 			dividerOnDark: appTheme.colors.gray[200],
 			dividerInverse: appTheme.colors.gray[200],
-			fillDisabled: appTheme.colors.gray[100],
+			fillDisabled: appTheme.colors.gray[75],
 			fillPrimaryInteraction: addOpacityToHex(appTheme.colors.gray[300], 32),
-			fillPrimaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
+			fillPrimaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 24),
 			fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
 			fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
-			fillPrimaryPressed: addOpacityToHex(appTheme.colors.gray[300], 40),
+			fillPrimaryPressed: addOpacityToHex(appTheme.colors.gray[300], 34),
 			fillPrimaryPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 40),
 			fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
-			fillPrimary: appTheme.colors.gray[100],
+			fillPrimary: appTheme.colors.gray[75],
 			fillSelected: appTheme.colors.gray[900],
 			fillSecondary: appTheme.colors.gray[200],
 			fillSecondaryInteraction: addOpacityToHex(appTheme.colors.gray[400], 26),
@@ -1139,7 +1143,7 @@ const SDSPaletteDark = (appTheme) => {
 			fillSecondaryOnDark: appTheme.colors.gray[200],
 			fillSecondaryInteractionOnDark: addOpacityToHex(appTheme.colors.gray[400], 34),
 			fillSecondaryPressedOnDark: addOpacityToHex(appTheme.colors.gray[400], 46),
-			fillDisabledOnDark: appTheme.colors.gray[100],
+			fillDisabledOnDark: appTheme.colors.gray[75],
 			ornamentDisabled: appTheme.colors.gray[300],
 			ornamentDisabledOnDark: appTheme.colors.gray[300],
 			ornamentDisabledInverse: appTheme.colors.gray[300],
@@ -1154,9 +1158,11 @@ const SDSPaletteDark = (appTheme) => {
 			ornamentSecondaryOnDark: appTheme.colors.gray[600],
 			ornamentSecondaryInverse: appTheme.colors.gray[600],
 			ornamentSecondaryPressedInverse: appTheme.colors.gray[900],
-			surfacePrimary: appTheme.colors.gray[100],
-			surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 32),
-			surfacePrimaryDark: appTheme.colors.gray[100],
+			ornamentTertiary: appTheme.colors.gray[300],
+			surfacePrimary: appTheme.colors.gray[75],
+			surfaceSecondary: addOpacityToHex(appTheme.colors.gray[100], 64),
+			surfaceTertiary: appTheme.colors.gray[100],
+			surfacePrimaryDark: appTheme.colors.gray[75],
 			surfaceInverse: appTheme.colors.gray[100],
 			textDisabled: appTheme.colors.gray[300],
 			textDisabledOnDark: appTheme.colors.gray[300],
@@ -1286,6 +1292,7 @@ const SDSPaletteDark = (appTheme) => {
 * This function creates the theme options for the MUI theme provider
 */
 function makeThemeOptions(appTheme, mode) {
+	const semanticColors = mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme);
 	return {
 		app: appTheme,
 		breakpoints: { values: Breakpoints$1 },
@@ -1326,7 +1333,14 @@ function makeThemeOptions(appTheme, mode) {
 				disabled: appTheme.colors.gray[400],
 				disabledBackground: appTheme.colors.gray[300]
 			},
-			background: { default: mode === "dark" ? appTheme.colors.gray[75] : appTheme.colors.gray[50] },
+			/**
+			* What `CssBaseline` paints the page with, so it has to be the same token
+			* a component fills its own background with — otherwise a component sits
+			* on a page a shade off from itself. The two are only one token in dark
+			* mode, where the background and the surfaces above it are deliberately
+			* different shades of near-black.
+			*/
+			background: { default: semanticColors.base.backgroundPrimary },
 			divider: appTheme.colors.gray[200],
 			error: {
 				"100": appTheme.colors.red[100],
@@ -1373,7 +1387,7 @@ function makeThemeOptions(appTheme, mode) {
 				light: appTheme.colors.blue[200],
 				main: appTheme.colors.blue[400]
 			},
-			sds: mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme),
+			sds: semanticColors,
 			secondary: {
 				"100": appTheme.colors.green[100],
 				"200": appTheme.colors.green[200],
@@ -6288,6 +6302,19 @@ const StyledIcon$2 = /*#__PURE__*/ _styled("div", { target: "emi0zh40" })({
 //#region src/core/Icon/index.tsx
 /**
 * @see https://mui.com/material-ui/icons/#icons
+*
+* @deprecated
+* This component is deprecated and will be removed in a future major version.
+* SDS icons come from Phosphor now: import the icon you need from
+* `@phosphor-icons/react`, or from `@czi-sds/icons` for the icons SDS draws
+* itself. Both take the same props, so the only difference is the import.
+*
+* ```tsx
+* // Before
+* <Icon sdsIcon="InfoCircle" sdsSize="l" />
+* // After
+* <InfoIcon size={24} />
+* ```
 */
 const Icon = forwardRef(function Icon({ className, color, shade, sdsIcon, sdsSize }, ref) {
 	var _iconMap$sdsIcon;
@@ -8197,17 +8224,9 @@ const SDS_WARNINGS = {
 		hasWarned: false,
 		message: "Warning: MenuSelect will be deprecated and replaced with <DropdownMenu />"
 	},
-	["tooltipSubtitle"]: {
-		hasWarned: false,
-		message: "Warning: The 'subtitle' text is only available for dark tooltips!"
-	},
-	["tooltipWidth"]: {
-		hasWarned: false,
-		message: "Warning: The 'wide' width is only available for light tooltips!"
-	},
 	["tooltipInvertStyle"]: {
 		hasWarned: false,
-		message: "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!"
+		message: "Warning: The 'hasInvertedStyle', 'inverted' and 'sdsStyle' props are deprecated and no longer change how a Tooltip looks. Tooltips now follow the theme mode, and these props will be removed in a future release."
 	},
 	["contentCardActionsOnlyButtons"]: {
 		hasWarned: false,
@@ -8422,8 +8441,71 @@ const StyledButtonGroup = /*#__PURE__*/ _styled(ButtonGroup$1, {
 	return /*#__PURE__*/ css(GeneralButtonGroupStyles(props), " ", sdsType === "primary" && PrimaryButtonGroupStyles(props), " ", sdsType === "secondary" && SecondaryButtonGroupStyles(props), " ", size === "large" && LargeButtonGroupStyles(props), " ", size === "medium" && MediumButtonGroupStyles(props), " ", size === "small" && SmallButtonGroupStyles(props), ";");
 }, ";");
 //#endregion
+//#region src/core/ButtonToggle/style.ts
+/**
+* (masoudmanson): Since StyledButtonToggle is built on top of Button,
+* we only need to exclude the `sdsStage` prop from being forwarded,
+* as it is not a valid prop for Button.
+* All other props should be passed down to Button; otherwise,
+* the component won’t function as expected.
+*/
+const doNotForwardProps$39 = ["sdsStage"];
+/**
+* Utility to select the appropriate color based on background appearance.
+* Returns the dark variant when backgroundAppearance is "dark", otherwise returns the light variant.
+*/
+const getAppearanceColor = (lightColor, darkColor, backgroundAppearance) => {
+	return backgroundAppearance === "dark" ? darkColor : lightColor;
+};
+const StageOnStyles = (props) => {
+	var _semanticColors$accen, _semanticColors$accen2, _semanticColors$base, _semanticColors$base2, _semanticColors$accen3, _semanticColors$accen4, _semanticColors$base3, _semanticColors$base4, _semanticColors$accen5, _semanticColors$accen6, _semanticColors$base5, _semanticColors$base6, _semanticColors$accen7, _semanticColors$accen8, _semanticColors$base7, _semanticColors$base8;
+	const { sdsType, sdsStyle, backgroundOnHover, backgroundAppearance = "matchBackground" } = props;
+	const semanticColors = getSemanticColors(props);
+	const contentColor = sdsType === "primary" ? getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.foreground, semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.foregroundOnDark, backgroundAppearance) : getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimary, semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textPrimaryOnDark, backgroundAppearance);
+	const backgroundColor = sdsStyle === "outline" && sdsType === "primary" ? getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$accen3 = semanticColors.accent) === null || _semanticColors$accen3 === void 0 ? void 0 : _semanticColors$accen3.surfaceSecondary, semanticColors === null || semanticColors === void 0 || (_semanticColors$accen4 = semanticColors.accent) === null || _semanticColors$accen4 === void 0 ? void 0 : _semanticColors$accen4.surfaceSecondaryOnDark, backgroundAppearance) : getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.fillPrimaryInteraction, semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.fillPrimaryInteractionOnDark, backgroundAppearance);
+	const ornamentColor = sdsStyle === "outline" ? sdsType === "primary" ? getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$accen5 = semanticColors.accent) === null || _semanticColors$accen5 === void 0 ? void 0 : _semanticColors$accen5.foreground, semanticColors === null || semanticColors === void 0 || (_semanticColors$accen6 = semanticColors.accent) === null || _semanticColors$accen6 === void 0 ? void 0 : _semanticColors$accen6.foregroundOnDark, backgroundAppearance) : getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.ornamentPrimary, semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.ornamentPrimaryOnDark, backgroundAppearance) : sdsType === "primary" ? getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$accen7 = semanticColors.accent) === null || _semanticColors$accen7 === void 0 ? void 0 : _semanticColors$accen7.foreground, semanticColors === null || semanticColors === void 0 || (_semanticColors$accen8 = semanticColors.accent) === null || _semanticColors$accen8 === void 0 ? void 0 : _semanticColors$accen8.foregroundOnDark, backgroundAppearance) : getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base7 = semanticColors.base) === null || _semanticColors$base7 === void 0 ? void 0 : _semanticColors$base7.ornamentSecondaryInteraction, semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.ornamentSecondaryInteractionOnDark, backgroundAppearance);
+	if (sdsType === "secondary")
+ /**
+	* 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`, which has
+	* 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 /*#__PURE__*/ css("&&&&{color:", contentColor, ";svg{color:", ornamentColor, ";}&::before{background-color:", sdsStyle === "minimal" && !backgroundOnHover ? "transparent" : backgroundColor, ";}}");
+	return /*#__PURE__*/ css("&&&&{background-color:", sdsStyle === "minimal" && !backgroundOnHover ? "transparent" : backgroundColor, ";color:", contentColor, ";svg{color:", ornamentColor, ";}}");
+};
+const StyledButtonToggle = /*#__PURE__*/ _styled(Button, {
+	shouldForwardProp: (prop) => !doNotForwardProps$39.includes(prop),
+	target: "euuolxv0"
+})((props) => {
+	const { sdsStage } = props;
+	if (sdsStage === "on") return StageOnStyles(props);
+	return null;
+}, ";");
+//#endregion
+//#region src/core/ButtonToggle/index.tsx
+const _excluded$38 = ["startIcon"];
+/**
+* @see https://mui.com/material-ui/react-button/
+*/
+const ButtonToggle = React.forwardRef((props, ref) => {
+	const { startIcon } = props;
+	return /* @__PURE__ */ jsx(StyledButtonToggle, _objectSpread2(_objectSpread2({}, _objectWithoutProperties(props, _excluded$38)), {}, {
+		startIcon,
+		endIcon: null,
+		backgroundOnHover: true,
+		ref
+	}));
+});
+//#endregion
 //#region src/core/ButtonGroup/index.tsx
-const _excluded$38 = [
+const _excluded$37 = [
 	"sdsType",
 	"size",
 	"orientation",
@@ -8452,17 +8534,20 @@ const areAllButtonsIconOnly = (children) => {
 	return childArray.every((child) => isIconOnlyButton(child));
 };
 /**
-* Check if a React element is a Button component.
+* The components a group is made of, and so the ones its size applies to. A
+* ButtonToggle passes `size` on to the Button underneath it, which is what
+* keeps a mixed group at one height.
 */
-const isButton = (element) => {
-	return element.type === Button;
+const GROUPED_COMPONENTS = [Button, ButtonToggle];
+const takesGroupSize = (element) => {
+	return GROUPED_COMPONENTS.includes(element.type);
 };
 /**
-* Clone children and inject the size prop to Button components.
+* Clone children and inject the size prop to the buttons in the group.
 */
 const cloneChildrenWithSize = (children, size) => {
 	return Children.map(children, (child) => {
-		if (isValidElement(child) && isButton(child)) return cloneElement(child, { size });
+		if (isValidElement(child) && takesGroupSize(child)) return cloneElement(child, { size });
 		return child;
 	});
 };
@@ -8475,7 +8560,7 @@ const cloneChildrenWithSize = (children, size) => {
 * Note: Vertical orientation is only available when all buttons are icon-only.
 */
 const ButtonGroup = React.forwardRef((props, ref) => {
-	const { sdsType = "primary", size = "large", orientation = "horizontal", children } = props, rest = _objectWithoutProperties(props, _excluded$38);
+	const { sdsType = "primary", size = "large", orientation = "horizontal", children } = props, rest = _objectWithoutProperties(props, _excluded$37);
 	const allIconOnly = areAllButtonsIconOnly(children);
 	const effectiveOrientation = allIconOnly ? orientation : "horizontal";
 	if (orientation === "vertical" && !allIconOnly) showWarningIfFirstOccurence("ButtonGroupVerticalOrientation");
@@ -8528,7 +8613,7 @@ const large = (props) => {
 	const spaces = getSpaces(props);
 	return /*#__PURE__*/ css(sdsType !== "tertiary" ? `margin: 0 ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px 0;` : "", " .MuiSvgIcon-root{height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, "px;", sdsType !== "tertiary" ? `margin: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;` : "", ";}");
 };
-const doNotForwardProps$39 = [
+const doNotForwardProps$38 = [
 	"on",
 	"sdsSize",
 	"sdsType",
@@ -8538,7 +8623,7 @@ const doNotForwardProps$39 = [
 	"customTheme"
 ];
 const StyledButtonIcon = /*#__PURE__*/ _styled(IconButton, {
-	shouldForwardProp: (prop) => !doNotForwardProps$39.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$38.includes(prop),
 	target: "e164i6480"
 })("padding:0;", focusVisibleA11yStyle, " ", (props) => {
 	const { disabled, sdsSize = "medium", sdsType = "primary" } = props;
@@ -8584,68 +8669,6 @@ const ButtonIcon = forwardRef(function ButtonIcon(props, ref) {
 	}));
 });
 //#endregion
-//#region src/core/ButtonToggle/style.ts
-/**
-* (masoudmanson): Since StyledButtonToggle is built on top of Button,
-* we only need to exclude the `sdsStage` prop from being forwarded,
-* as it is not a valid prop for Button.
-* All other props should be passed down to Button; otherwise,
-* the component won’t function as expected.
-*/
-const doNotForwardProps$38 = ["sdsStage"];
-/**
-* Utility to select the appropriate color based on background appearance.
-* Returns the dark variant when backgroundAppearance is "dark", otherwise returns the light variant.
-*/
-const getAppearanceColor = (lightColor, darkColor, backgroundAppearance) => {
-	return backgroundAppearance === "dark" ? darkColor : lightColor;
-};
-const StageOnStyles = (props) => {
-	var _semanticColors$accen, _semanticColors$accen2, _semanticColors$base, _semanticColors$base2, _semanticColors$accen3, _semanticColors$accen4, _semanticColors$base3, _semanticColors$base4, _semanticColors$accen5, _semanticColors$accen6, _semanticColors$base5, _semanticColors$base6, _semanticColors$accen7, _semanticColors$accen8, _semanticColors$base7, _semanticColors$base8;
-	const { sdsType, sdsStyle, backgroundOnHover, backgroundAppearance = "matchBackground" } = props;
-	const semanticColors = getSemanticColors(props);
-	const contentColor = sdsType === "primary" ? getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.foreground, semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.foregroundOnDark, backgroundAppearance) : getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimary, semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textPrimaryOnDark, backgroundAppearance);
-	const backgroundColor = sdsStyle === "outline" && sdsType === "primary" ? getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$accen3 = semanticColors.accent) === null || _semanticColors$accen3 === void 0 ? void 0 : _semanticColors$accen3.surfaceSecondary, semanticColors === null || semanticColors === void 0 || (_semanticColors$accen4 = semanticColors.accent) === null || _semanticColors$accen4 === void 0 ? void 0 : _semanticColors$accen4.surfaceSecondaryOnDark, backgroundAppearance) : getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.fillPrimaryInteraction, semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.fillPrimaryInteractionOnDark, backgroundAppearance);
-	const ornamentColor = sdsStyle === "outline" ? sdsType === "primary" ? getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$accen5 = semanticColors.accent) === null || _semanticColors$accen5 === void 0 ? void 0 : _semanticColors$accen5.foreground, semanticColors === null || semanticColors === void 0 || (_semanticColors$accen6 = semanticColors.accent) === null || _semanticColors$accen6 === void 0 ? void 0 : _semanticColors$accen6.foregroundOnDark, backgroundAppearance) : getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.ornamentPrimary, semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.ornamentPrimaryOnDark, backgroundAppearance) : sdsType === "primary" ? getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$accen7 = semanticColors.accent) === null || _semanticColors$accen7 === void 0 ? void 0 : _semanticColors$accen7.foreground, semanticColors === null || semanticColors === void 0 || (_semanticColors$accen8 = semanticColors.accent) === null || _semanticColors$accen8 === void 0 ? void 0 : _semanticColors$accen8.foregroundOnDark, backgroundAppearance) : getAppearanceColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base7 = semanticColors.base) === null || _semanticColors$base7 === void 0 ? void 0 : _semanticColors$base7.ornamentSecondaryInteraction, semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.ornamentSecondaryInteractionOnDark, backgroundAppearance);
-	if (sdsType === "secondary")
- /**
-	* 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 /*#__PURE__*/ css("&&&&{color:", contentColor, ";svg{color:", ornamentColor, ";}&::before{background-color:", sdsStyle === "minimal" && !backgroundOnHover ? "transparent" : backgroundColor, ";}}");
-	return /*#__PURE__*/ css("&&&&{background-color:", sdsStyle === "minimal" && !backgroundOnHover ? "transparent" : backgroundColor, ";color:", contentColor, ";svg{color:", ornamentColor, ";}}");
-};
-const StyledButtonToggle = /*#__PURE__*/ _styled(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$38.includes(prop),
-	target: "euuolxv0"
-})((props) => {
-	const { sdsStage } = props;
-	if (sdsStage === "on") return StageOnStyles(props);
-	return null;
-}, ";");
-//#endregion
-//#region src/core/ButtonToggle/index.tsx
-const _excluded$37 = ["startIcon"];
-/**
-* @see https://mui.com/material-ui/react-button/
-*/
-const ButtonToggle = React.forwardRef((props, ref) => {
-	const { startIcon } = props;
-	return /* @__PURE__ */ jsx(StyledButtonToggle, _objectSpread2(_objectSpread2({}, _objectWithoutProperties(props, _excluded$37)), {}, {
-		startIcon,
-		endIcon: null,
-		backgroundOnHover: true,
-		ref
-	}));
-});
-//#endregion
 //#region src/core/ButtonLegacy/style.ts
 const doNotForwardProps$37 = [
 	"isAllCaps",
@@ -8992,7 +9015,8 @@ const _excluded$35 = [
 	"hideTitle",
 	"hideBody",
 	"sdsStyle",
-	"children"
+	"children",
+	"extraContent"
 ];
 const SDS_STAGE_OPEN = "open";
 const SDS_STAGE_CLOSED = "closed";
@@ -9000,7 +9024,7 @@ const SDS_STAGE_CLOSED = "closed";
 * @see https://mui.com/material-ui/react-alert/
 */
 const Callout = (props) => {
-	const { autoDismiss, dismissed, icon, sdsIconProps, intent, sdsStage = SDS_STAGE_OPEN, title, body, hideTitle = false, hideBody = false, sdsStyle = "persistent", children } = props, rest = _objectWithoutProperties(props, _excluded$35);
+	const { autoDismiss, dismissed, icon, sdsIconProps, intent, sdsStage = SDS_STAGE_OPEN, title, body, hideTitle = false, hideBody = false, sdsStyle = "persistent", children, extraContent } = props, rest = _objectWithoutProperties(props, _excluded$35);
 	const [hide, setHide] = useState(dismissed);
 	const [stage, setStage] = useState(sdsStage);
 	useEffect(() => {
@@ -9080,70 +9104,62 @@ const Callout = (props) => {
 				hideTitle,
 				children: body
 			}),
-			sdsStyle === "expandable" && !collapsed && /* @__PURE__ */ jsx(CalloutExtraContent, {
+			sdsStyle === "expandable" && !collapsed && /* @__PURE__ */ jsxs(CalloutExtraContent, {
 				hideTitle,
 				hideBody,
-				children
+				children: [children, extraContent]
 			})
 		] }))
 	});
 };
 //#endregion
 //#region src/core/Tooltip/style.ts
-const dark = (props) => {
+const surface = (props) => {
 	var _semanticColors$base, _semanticColors$base2;
 	const spaces = getSpaces(props);
 	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css$2(fontHeaderXs(props), " background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.surfacePrimaryDark, ";color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textPrimaryOnDark, ";padding:", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;");
-};
-const light = (props) => {
-	var _semanticColors$base3, _semanticColors$base4;
-	const spaces = getSpaces(props);
-	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css$2(fontBodyXs(props), " background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.surfacePrimary, ";color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.textPrimary, ";padding:", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;");
+	return /*#__PURE__*/ css$2(fontBodyXs(props), " background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.surfacePrimary, ";color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textPrimary, ";padding:", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;");
 };
 const tableStyles = (props) => {
 	const spaces = getSpaces(props);
 	return /*#__PURE__*/ css$2("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;");
 };
-const doNotForwardProps$34 = ["hasInvertedStyle", "textAlign"];
+const doNotForwardProps$34 = ["textAlign"];
 const StyledTitle = /*#__PURE__*/ _styled("p", {
 	shouldForwardProp: (prop) => !doNotForwardProps$34.includes(prop),
 	target: "e1j7jeiz3"
 })(fontBodyMediumXs, " ", (props) => {
-	var _semanticColors$base5, _semanticColors$base6;
-	const { hasInvertedStyle } = props;
+	var _semanticColors$base3;
 	const semanticColors = getSemanticColors(props);
 	return `
       margin: 0;
-      color: ${hasInvertedStyle ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.textPrimaryOnDark : semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.textPrimary};
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textPrimary};
     `;
 }, ";");
 const StyledSubtitle = /*#__PURE__*/ _styled("p", {
 	shouldForwardProp: (prop) => !doNotForwardProps$34.includes(prop),
 	target: "e1j7jeiz2"
 })(fontBodyXxs, " ", (props) => {
-	var _semanticColors$base7, _semanticColors$base8;
-	const { hasInvertedStyle } = props;
+	var _semanticColors$base4;
 	const semanticColors = getSemanticColors(props);
 	return `
       margin: 0;
-      color: ${hasInvertedStyle ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base7 = semanticColors.base) === null || _semanticColors$base7 === void 0 ? void 0 : _semanticColors$base7.textSecondaryOnDark : semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.textSecondary};
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.textSecondary};
     `;
 }, ";");
 const tooltipCss = (props) => {
-	var _semanticColors$base9;
-	const { hasInvertedStyle = true, inverted, sdsStyle, width, followCursor, textAlign } = props;
+	var _semanticColors$base5;
+	const { width, followCursor, textAlign } = props;
 	const shadows = getShadows(props);
 	const corners = getCorners(props);
 	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css$2("&.MuiTooltip-tooltip{border-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;box-shadow:", shadows === null || shadows === void 0 ? void 0 : shadows.m, ";max-width:", width === "wide" ? "550px" : "250px", "!important;text-align:", textAlign ? textAlign : width === "wide" ? "left" : "center", "!important;", !hasInvertedStyle && `outline: 1px solid ${addOpacityToHex((semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.borderSecondary) || "#000000", 15)};`, " ", sdsStyle === "dark" || inverted || hasInvertedStyle ? dark(props) : light(props), " ", followCursor === true && tableStyles(props), ";}");
+	return /*#__PURE__*/ css$2("&.MuiTooltip-tooltip{border-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;box-shadow:", shadows === null || shadows === void 0 ? void 0 : shadows.m, ";max-width:", width === "wide" ? "550px" : "250px", "!important;outline:1px solid ", addOpacityToHex((semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.borderSecondary) || "#000000", 15), ";text-align:", textAlign ? textAlign : width === "wide" ? "left" : "center", "!important;", surface(props), " ", followCursor === true && tableStyles(props), ";}");
 };
 const arrowCss = (props) => {
-	var _semanticColors$base10, _semanticColors$base11;
-	const { hasInvertedStyle, inverted, sdsStyle, arrowOffset } = props;
+	var _semanticColors$base6;
+	const { arrowOffset } = props;
 	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css$2("&.MuiTooltip-arrow{", arrowOffset !== void 0 ? `left: ${arrowOffset}px !important;` : "", " color:", hasInvertedStyle || inverted || sdsStyle === "dark" ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.surfacePrimaryDark : semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.surfacePrimary, ";&:before{box-sizing:border-box;width:12px;height:12px;}}");
+	return /*#__PURE__*/ css$2("&.MuiTooltip-arrow{", arrowOffset !== void 0 ? `left: ${arrowOffset}px !important;` : "", " color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.surfacePrimary, ";&:before{box-sizing:border-box;width:12px;height:12px;}}");
 };
 const StyledPopper$2 = /*#__PURE__*/ _styled(Popper, { target: "e1j7jeiz1" })("z-index:", (props) => {
 	var _props$theme$zIndex$t, _props$theme;
@@ -9179,17 +9195,14 @@ const _excluded$34 = [
 * https://mui.com/components/tooltips/#disabled-elements
 */
 const Tooltip = forwardRef(function Tooltip(props, ref) {
-	const { arrowOffset, classes, hasInvertedStyle = true, inverted, sdsStyle = "dark", subtitle, title, width = "default", PopperComponent = StyledPopper$2, textAlign, componentSlot } = props, rest = _objectWithoutProperties(props, _excluded$34);
+	const { arrowOffset, classes, hasInvertedStyle, inverted, sdsStyle, subtitle, title, width = "default", PopperComponent = StyledPopper$2, textAlign, componentSlot } = props, rest = _objectWithoutProperties(props, _excluded$34);
 	const { children } = rest;
-	if (inverted || sdsStyle) showWarningIfFirstOccurence("tooltipInvertStyle");
-	if (width === "wide" && (sdsStyle === "dark" || hasInvertedStyle)) showWarningIfFirstOccurence("tooltipWidth");
-	const theme = useTheme();
+	if (hasInvertedStyle !== void 0 || inverted !== void 0 || sdsStyle !== void 0) showWarningIfFirstOccurence("tooltipInvertStyle");
 	const extraProps = {
 		arrowOffset,
 		classes,
-		hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
 		textAlign,
-		theme,
+		theme: useTheme(),
 		width
 	};
 	const tooltip = mergeClass$1({
@@ -9208,16 +9221,9 @@ const Tooltip = forwardRef(function Tooltip(props, ref) {
 			arrow,
 			tooltip
 		},
-		leaveDelay: hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500,
 		title: /* @__PURE__ */ jsxs("div", { children: [
-			title && /* @__PURE__ */ jsx(StyledTitle, {
-				hasInvertedStyle,
-				children: title
-			}),
-			subtitle && /* @__PURE__ */ jsx(StyledSubtitle, {
-				hasInvertedStyle,
-				children: subtitle
-			}),
+			title && /* @__PURE__ */ jsx(StyledTitle, { children: title }),
+			subtitle && /* @__PURE__ */ jsx(StyledSubtitle, { children: subtitle }),
 			componentSlot && /* @__PURE__ */ jsx(StyledComponentSlotWrapper, {
 				shouldAddMargin: !!title || !!subtitle,
 				children: componentSlot
@@ -9228,15 +9234,6 @@ const Tooltip = forwardRef(function Tooltip(props, ref) {
 		arrow: true
 	}, rest), {}, { slots: { popper: PopperComponent } }));
 });
-/**
-* (masoudmanson): Temporary function to handle the inversion of the tooltip
-* based on the sdsStyle, invert and hasInvertedStyle props.
-* Once the sdsStyle and invert props are completely removed,
-* this function will be removed as well.
-*/
-function invertStyleValue(inverted, sdsStyle, hasInvertedStyle) {
-	return hasInvertedStyle !== void 0 ? hasInvertedStyle : sdsStyle === "dark" ? true : sdsStyle === "light" ? false : inverted;
-}
 function mergeClass$1({ props, className, key }) {
 	const { classes } = props;
 	if (!classes) return className;
@@ -9461,8 +9458,7 @@ const CellBasic = forwardRef((props, ref) => {
 		subtitle: secondaryText,
 		arrow: true,
 		leaveDelay: 0,
-		leaveTouchDelay: 0,
-		sdsStyle: "dark"
+		leaveTouchDelay: 0
 	}, tooltipProps), {}, { children: /* @__PURE__ */ jsx(StyledTableData, _objectSpread2(_objectSpread2({
 		ref,
 		as
@@ -9633,7 +9629,6 @@ const CellHeader = forwardRef((props, ref) => {
 	if (shouldShowTooltipOnHover && hover) return /* @__PURE__ */ jsx(Tooltip, _objectSpread2(_objectSpread2({
 		arrow: true,
 		placement: "top-start",
-		sdsStyle: "dark",
 		subtitle: tooltipSubtitle,
 		title: tooltipText
 	}, tooltipProps), {}, { children: /* @__PURE__ */ jsx(StyledTableHeader$1, _objectSpread2(_objectSpread2({
@@ -10024,10 +10019,10 @@ const labelFontBodyS = fontBody("s", "regular");
 const labelFontBodyXs = fontBody("xs", "regular");
 const inputDropdownStyles = (props) => {
 	var _semanticColors$base, _semanticColors$base2, _semanticColors$base3, _semanticColors$base4, _semanticColors$base5, _semanticColors$base6, _semanticColors$base7, _semanticColors$base8, _semanticColors$base9, _semanticColors$accen, _semanticColors$base10, _semanticColors$base11;
-	const { width = "auto" } = props;
+	const { width } = props;
 	const spaces = getSpaces(props);
 	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css(labelStyle(props), " background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.backgroundPrimary, "!important;border:none;box-shadow:inset 0 0 0 1px ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.borderPrimary, ";cursor:pointer;padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;justify-content:start;width:", /^\d+$/.test(width) ? `${width}px` : width, ";min-width:90px!important;&.MuiButton-text{&:hover{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textPrimary, ";}.styled-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", IconWrapper, "{margin-left:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;}}path{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.ornamentSecondary, ";}&:hover{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.fillPrimaryInteraction, ";box-shadow:inset 0 0 0 1px ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.borderPrimaryInteraction, ";color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base7 = semanticColors.base) === null || _semanticColors$base7 === void 0 ? void 0 : _semanticColors$base7.textPrimary, ";path{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.ornamentSecondaryInteraction, ";}.styled-label{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.textPrimary, ";}}&:active{background-color:transparent;box-shadow:inset 0 0 0 1px ", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.foreground, ";color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.textPrimary, ";path{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.ornamentSecondaryInteraction, ";}}&:focus{background-color:transparent;outline-offset:-1px;}");
+	return /*#__PURE__*/ css(labelStyle(props), " background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.backgroundPrimary, "!important;border:none;box-shadow:inset 0 0 0 1px ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.borderPrimary, ";cursor:pointer;padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;justify-content:start;", width ? `width: ${/^\d+$/.test(width) ? `${width}px` : width};` : "", " min-width:90px!important;&.MuiButton-text{&:hover{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textPrimary, ";}.styled-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", IconWrapper, "{margin-left:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;}}path{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.ornamentSecondary, ";}&:hover{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.fillPrimaryInteraction, ";box-shadow:inset 0 0 0 1px ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.borderPrimaryInteraction, ";color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base7 = semanticColors.base) === null || _semanticColors$base7 === void 0 ? void 0 : _semanticColors$base7.textPrimary, ";path{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.ornamentSecondaryInteraction, ";}.styled-label{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.textPrimary, ";}}&:active{background-color:transparent;box-shadow:inset 0 0 0 1px ", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.foreground, ";color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.textPrimary, ";path{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.ornamentSecondaryInteraction, ";}}&:focus{background-color:transparent;outline-offset:-1px;}");
 };
 const minimal$1 = (props) => {
 	var _semanticColors$base12, _semanticColors$base13, _semanticColors$base14, _semanticColors$base15, _semanticColors$base16, _semanticColors$base17, _semanticColors$base18;
@@ -10195,7 +10190,7 @@ const validateSdsStyle = (sdsStyle) => {
 /**
 * @see https://mui.com/material-ui/react-button/
 */
-const InputDropdown = (props) => {
+const InputDropdown = forwardRef(function InputDropdown(props, ref) {
 	const { label, multiple = false, sdsStyle: rawSdsStyle = "square", sdsType = "label", details, counter, shouldTruncateMinimalDetails, shouldPutAColonAfterLabel = true, value, classes = EMPTY_OBJECT, className } = props;
 	const sdsStyle = validateSdsStyle(rawSdsStyle);
 	const isMinimal = sdsStyle === "minimal";
@@ -10205,6 +10200,7 @@ const InputDropdown = (props) => {
 	const shouldRenderCounter = multiple && counter !== void 0 && counter !== "0" && !isMinimal;
 	const { root: rootClassName, label: labelClassName, contentWrapper: contentWrapperClassName, labelDetailsWrapper: labelDetailsWrapperClassName, details: detailsClassName, counter: counterClassName, iconWrapper: iconWrapperClassName, chevronIcon: chevronIconClassName, minimalDetails: minimalDetailsClassName } = classes;
 	return /* @__PURE__ */ jsxs(StyledInputDropdown, _objectSpread2(_objectSpread2({}, props), {}, {
+		ref,
 		className: cn(rootClassName, className),
 		sdsStyle,
 		"aria-label": "Dropdown input",
@@ -10269,7 +10265,7 @@ const InputDropdown = (props) => {
 			})
 		})]
 	}));
-};
+});
 function renderLabelText(props) {
 	const { sdsType } = props;
 	if (sdsType === "label") return renderLabelTypeLabelText(props);
@@ -10342,7 +10338,7 @@ const _excluded$30 = [
 	"disabled",
 	"value",
 	"onClick"
-];
+], _excluded2$4 = ["ref"];
 function useDropdownState(propValue, multiple, options) {
 	const getInitialValue = useCallback(() => {
 		return multiple ? [] : null;
@@ -10576,6 +10572,7 @@ const Dropdown = (props) => {
 		countMultiColumnSelections,
 		getSingleSelectionProps
 	]);
+	const { ref } = rest, inputRest = _objectWithoutProperties(rest, _excluded2$4);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(InputDropdownComponent, _objectSpread2(_objectSpread2(_objectSpread2({
 		disabled,
 		label,
@@ -10583,7 +10580,7 @@ const Dropdown = (props) => {
 		"aria-expanded": open,
 		"aria-haspopup": "listbox",
 		multiple: multiple || isMultiColumn
-	}, getInputDropdownProps), InputDropdownProps), rest)), /* @__PURE__ */ jsx(DropdownMenu, _objectSpread2(_objectSpread2({
+	}, getInputDropdownProps), InputDropdownProps), inputRest)), /* @__PURE__ */ jsx(DropdownMenu, _objectSpread2(_objectSpread2({
 		anchorEl,
 		open,
 		search,
@@ -11750,6 +11747,21 @@ const doNotForwardProps$18 = [
 	"backgroundFillColor",
 	"overlayContentPosition"
 ];
+/**
+* The color the header and the caption are set in.
+*
+* `hasInvertTextColor` is for text over a dark backdrop: imagery, or a darkening
+* mask over it. That backdrop is dark whatever the theme, so the text has to
+* stay light in both — which is what `textPrimaryOnDark` is for. The theme's
+* inverse text would follow the theme instead and come out near-black in the
+* dark theme, over an image that had not changed.
+*/
+const getTextColor = (props) => {
+	var _semanticColors$base, _semanticColors$base2;
+	const { hasInvertTextColor } = props;
+	const semanticColors = getSemanticColors(props);
+	return hasInvertTextColor ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimaryOnDark : semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textPrimary;
+};
 const getResponsivePadding = (props) => {
 	const { overlayContainerMinMargin } = props;
 	const spaces = getSpaces(props);
@@ -11778,18 +11790,10 @@ const HeroTitle = /*#__PURE__*/ _styled("h1", { target: "e1wdq27g7" })((props) =
 	if (headerFontSize === "s") return fontHeaderS(props);
 	else if (headerFontSize === "m") return fontHeaderM(props);
 	else if (headerFontSize === "l") return fontHeaderL(props);
-}, " ", (props) => {
-	var _semanticColors$base, _semanticColors$base2;
-	const { hasInvertTextColor } = props;
-	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css("color:", hasInvertTextColor ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimaryInverse : semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textPrimary, ";");
-}, " margin:0;padding:0;");
+}, " ", (props) => /*#__PURE__*/ css("color:", getTextColor(props), ";"), " margin:0;padding:0;");
 const HeroCaption = /*#__PURE__*/ _styled("p", { target: "e1wdq27g6" })(fontBodyXxxs, " ", (props) => {
-	var _semanticColors$base3, _semanticColors$base4;
-	const { hasInvertTextColor } = props;
-	const semanticColors = getSemanticColors(props);
 	const spaces = getSpaces(props);
-	return /*#__PURE__*/ css("color:", hasInvertTextColor ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textPrimaryInverse : semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.textPrimary, ";margin:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;");
+	return /*#__PURE__*/ css("color:", getTextColor(props), ";margin:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;");
 }, " padding:0;");
 const ContentSlot = /*#__PURE__*/ _styled("div", { target: "e1wdq27g5" })((props) => {
 	const spaces = getSpaces(props);
@@ -16521,27 +16525,47 @@ const NavigationJumpTo = forwardRef((props, ref) => {
 		});
 		return map;
 	}, [items, flattenedItems]);
-	const a11yProps = (title, elementId) => {
+	const tabIds = useMemo(() => {
+		const seen = /* @__PURE__ */ new Map();
+		return flattenedItems.map(({ title }) => {
+			var _seen$get;
+			const base = toKebabCase(title);
+			const count = ((_seen$get = seen.get(base)) !== null && _seen$get !== void 0 ? _seen$get : 0) + 1;
+			seen.set(base, count);
+			return count === 1 ? base : `${base}-${count}`;
+		});
+	}, [flattenedItems]);
+	const itemOffsets = useMemo(() => {
+		let offset = 0;
+		return items.map((item) => {
+			var _item$subItems$length, _item$subItems;
+			const start = offset;
+			offset += 1 + ((_item$subItems$length = (_item$subItems = item.subItems) === null || _item$subItems === void 0 ? void 0 : _item$subItems.length) !== null && _item$subItems$length !== void 0 ? _item$subItems$length : 0);
+			return start;
+		});
+	}, [items]);
+	const a11yProps = (tabId, elementId) => {
 		return {
 			"aria-controls": elementId,
-			id: `navigation-tab-${title}`
+			id: `navigation-tab-${tabId}`
 		};
 	};
-	const createTabsForItem = (item, itemIndex) => {
+	const createTabsForItem = (item, itemIndex, flatIndex) => {
 		var _item$elementRef$curr;
 		const tabs = [/* @__PURE__ */ jsx(StyledTab$1, _objectSpread2({
 			label: item.title,
 			tabIndex: 0,
 			width
-		}, a11yProps(toKebabCase(item.title), ((_item$elementRef$curr = item.elementRef.current) === null || _item$elementRef$curr === void 0 ? void 0 : _item$elementRef$curr.getAttribute("id")) || `navigation-panel-${itemIndex + 1}`)), toKebabCase(item.title))];
+		}, a11yProps(tabIds[flatIndex], ((_item$elementRef$curr = item.elementRef.current) === null || _item$elementRef$curr === void 0 ? void 0 : _item$elementRef$curr.getAttribute("id")) || `navigation-panel-${itemIndex + 1}`)), tabIds[flatIndex])];
 		if (item.subItems) item.subItems.forEach((subItem, subIndex) => {
 			var _subItem$elementRef$c;
+			const subTabId = tabIds[flatIndex + subIndex + 1];
 			tabs.push(/* @__PURE__ */ jsx(StyledTab$1, _objectSpread2({
 				label: subItem.title,
 				tabIndex: 0,
 				width,
 				isSubItem: true
-			}, a11yProps(toKebabCase(subItem.title), ((_subItem$elementRef$c = subItem.elementRef.current) === null || _subItem$elementRef$c === void 0 ? void 0 : _subItem$elementRef$c.getAttribute("id")) || `navigation-panel-${itemIndex + 1}-${subIndex + 1}`)), `${toKebabCase(item.title)}-${toKebabCase(subItem.title)}`));
+			}, a11yProps(subTabId, ((_subItem$elementRef$c = subItem.elementRef.current) === null || _subItem$elementRef$c === void 0 ? void 0 : _subItem$elementRef$c.getAttribute("id")) || `navigation-panel-${itemIndex + 1}-${subIndex + 1}`)), subTabId));
 		});
 		return tabs;
 	};
@@ -16594,7 +16618,7 @@ const NavigationJumpTo = forwardRef((props, ref) => {
 		onChange: handleChange,
 		"aria-label": "navigation-jump-to",
 		width
-	}, rest), {}, { children: items.map((item, itemIndex) => createTabsForItem(item, itemIndex)) }));
+	}, rest), {}, { children: items.map((item, itemIndex) => createTabsForItem(item, itemIndex, itemOffsets[itemIndex])) }));
 });
 //#endregion
 //#region src/core/Notification/style.ts
@@ -17075,6 +17099,20 @@ const Pagination = forwardRef((props, ref) => {
 	}
 });
 //#endregion
+//#region src/core/Panel/Panel.types.ts
+/**
+* (masoudmanson): The SDS theme shortens MUI's global transition durations to
+* 20ms in and 10ms out, which suits small elements but is too brief for a surface
+* as large as a Panel: it arrives before the eye can follow it in, so it reads as
+* a jump rather than a slide. The Panel therefore keeps MUI's own drawer timings
+* instead of the SDS ones. Pass `transitionDuration` to change or remove the
+* animation, e.g. `transitionDuration={0}` or `{ enter: 300, exit: 200 }`.
+*/
+const PANEL_TRANSITION_DURATION_MS = {
+	enter: 225,
+	exit: 195
+};
+//#endregion
 //#region src/core/Panel/style.ts
 const doNotForwardProps$2 = [
 	"sdsType",
@@ -17098,7 +17136,7 @@ const overlayPanelStyles = (props) => {
 	const semanticColors = getSemanticColors(props);
 	const spaces = getSpaces(props);
 	const shadows = getShadows(props);
-	return /*#__PURE__*/ css("width:fit-content;height:fit-content;div[data-testid=\"sentinelStart\"],div[data-testid=\"sentinelEnd\"]{width:fit-content;}.", drawerClasses.paper, "{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundPrimary, ";padding:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;min-width:", 320, "px;min-height:", 320, "px;box-shadow:", shadows === null || shadows === void 0 ? void 0 : shadows.l, ";background-image:none;}");
+	return /*#__PURE__*/ css("pointer-events:none;.", drawerClasses.paper, ",.", backdropClasses.root, "{pointer-events:auto;}.", drawerClasses.paper, "{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundPrimary, ";padding:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;min-width:", 320, "px;min-height:", 320, "px;box-shadow:", shadows === null || shadows === void 0 ? void 0 : shadows.l, ";background-image:none;}");
 };
 const StyledDrawer = /*#__PURE__*/ _styled(Drawer, {
 	shouldForwardProp: (prop) => !doNotForwardProps$2.includes(prop),
@@ -17180,7 +17218,8 @@ const _excluded$5 = [
 	"width",
 	"ModalProps",
 	"isBackdropClickEnabled",
-	"slotProps"
+	"slotProps",
+	"transitionDuration"
 ];
 function isOverlayPanelProps(props) {
 	return props.sdsType === "overlay";
@@ -17193,7 +17232,7 @@ const SLOT_PROPS = {
 * @see https://mui.com/material-ui/react-drawer/
 */
 const Panel = React.forwardRef((props, ref) => {
-	const { children, sdsType = "basic", position = "left", width, ModalProps, isBackdropClickEnabled = false, slotProps: userSlotProps } = props, rest = _objectWithoutProperties(props, _excluded$5);
+	const { children, sdsType = "basic", position = "left", width, ModalProps, isBackdropClickEnabled = false, slotProps: userSlotProps, transitionDuration = PANEL_TRANSITION_DURATION_MS } = props, rest = _objectWithoutProperties(props, _excluded$5);
 	const mergedSlotProps = _objectSpread2(_objectSpread2(_objectSpread2({}, SLOT_PROPS), userSlotProps), {}, {
 		backdrop: _objectSpread2(_objectSpread2({}, SLOT_PROPS.backdrop), typeof (userSlotProps === null || userSlotProps === void 0 ? void 0 : userSlotProps.backdrop) === "object" ? userSlotProps.backdrop : {}),
 		paper: _objectSpread2(_objectSpread2({}, SLOT_PROPS.paper), typeof (userSlotProps === null || userSlotProps === void 0 ? void 0 : userSlotProps.paper) === "object" ? userSlotProps.paper : {})
@@ -17218,6 +17257,7 @@ const Panel = React.forwardRef((props, ref) => {
 			anchor: drawerAnchor,
 			variant: drawerVariant,
 			width: drawerWidth,
+			transitionDuration,
 			ModalProps: _objectSpread2(_objectSpread2({}, ModalProps), {}, {
 				disableEnforceFocus: true,
 				disableScrollLock: true
@@ -17429,7 +17469,6 @@ const TableRow = forwardRef((props, ref) => {
 	const { children, shouldShowTooltipOnHover = true, tooltipProps, tooltipText = false, tooltipSubtitle, hover = true } = props;
 	if (shouldShowTooltipOnHover && hover) return /* @__PURE__ */ jsx(Tooltip, _objectSpread2(_objectSpread2({
 		arrow: true,
-		sdsStyle: "dark",
 		subtitle: tooltipSubtitle,
 		title: tooltipText
 	}, tooltipProps), {}, { children: /* @__PURE__ */ jsx(StyledTableRow, _objectSpread2(_objectSpread2({ ref }, props), {}, { children })) }));
@@ -18340,7 +18379,8 @@ const Tabs = forwardRef(function Tabs(props, ref) {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(StyledTabs, _objectSpread2({
 			slotProps: { indicator: indicatorProps },
-			ref
+			ref,
+			sdsSize
 		}, rest))
 	});
 });