@czi-sds/components 24.0.0 → 24.2.0

package/dist/index.cjs.js

@@ -670,7 +670,7 @@ const SDSDarkThemeColors = {
 		"500": "#aaaaaa",
 		"600": "#cdcdcd",
 		"700": "#ededed",
-		"75": "#101010",
+		"75": "#1b1b1b",
 		"800": "#fafafa",
 		"900": "#ffffff"
 	},
@@ -927,7 +927,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],
@@ -957,6 +958,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],
@@ -965,6 +967,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],
@@ -1125,8 +1128,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),
@@ -1143,20 +1146,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),
@@ -1164,7 +1168,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],
@@ -1179,9 +1183,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],
@@ -1311,6 +1317,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 },
@@ -1351,7 +1358,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],
@@ -1398,7 +1412,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],
@@ -6316,6 +6330,19 @@ const StyledIcon$2 = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { ta
 //#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 = (0, react.forwardRef)(function Icon({ className, color, shade, sdsIcon, sdsSize }, ref) {
 	var _iconMap$sdsIcon;
@@ -8240,17 +8267,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,
@@ -8465,8 +8484,71 @@ const StyledButtonGroup = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_m
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.css)("&&&&{color:", contentColor, ";svg{color:", ornamentColor, ";}&::before{background-color:", sdsStyle === "minimal" && !backgroundOnHover ? "transparent" : backgroundColor, ";}}");
+	return /*#__PURE__*/ (0, _emotion_react.css)("&&&&{background-color:", sdsStyle === "minimal" && !backgroundOnHover ? "transparent" : backgroundColor, ";color:", contentColor, ";svg{color:", ornamentColor, ";}}");
+};
+const StyledButtonToggle = /*#__PURE__*/ (0, _emotion_styled_base.default)(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.default.forwardRef((props, ref) => {
+	const { startIcon } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -8495,17 +8577,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 react.Children.map(children, (child) => {
-		if ((0, react.isValidElement)(child) && isButton(child)) return (0, react.cloneElement)(child, { size });
+		if ((0, react.isValidElement)(child) && takesGroupSize(child)) return (0, react.cloneElement)(child, { size });
 		return child;
 	});
 };
@@ -8518,7 +8603,7 @@ const cloneChildrenWithSize = (children, size) => {
 * Note: Vertical orientation is only available when all buttons are icon-only.
 */
 const ButtonGroup = react.default.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");
@@ -8571,7 +8656,7 @@ const large = (props) => {
 	const spaces = getSpaces(props);
 	return /*#__PURE__*/ (0, _emotion_react.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",
@@ -8581,7 +8666,7 @@ const doNotForwardProps$39 = [
 	"customTheme"
 ];
 const StyledButtonIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.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;
@@ -8627,68 +8712,6 @@ const ButtonIcon = (0, react.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__*/ (0, _emotion_react.css)("&&&&{color:", contentColor, ";svg{color:", ornamentColor, ";}&::before{background-color:", sdsStyle === "minimal" && !backgroundOnHover ? "transparent" : backgroundColor, ";}}");
-	return /*#__PURE__*/ (0, _emotion_react.css)("&&&&{background-color:", sdsStyle === "minimal" && !backgroundOnHover ? "transparent" : backgroundColor, ";color:", contentColor, ";svg{color:", ornamentColor, ";}}");
-};
-const StyledButtonToggle = /*#__PURE__*/ (0, _emotion_styled_base.default)(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.default.forwardRef((props, ref) => {
-	const { startIcon } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -9035,7 +9058,8 @@ const _excluded$35 = [
 	"hideTitle",
 	"hideBody",
 	"sdsStyle",
-	"children"
+	"children",
+	"extraContent"
 ];
 const SDS_STAGE_OPEN = "open";
 const SDS_STAGE_CLOSED = "closed";
@@ -9043,7 +9067,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] = (0, react.useState)(dismissed);
 	const [stage, setStage] = (0, react.useState)(sdsStage);
 	(0, react.useEffect)(() => {
@@ -9123,70 +9147,62 @@ const Callout = (props) => {
 				hideTitle,
 				children: body
 			}),
-			sdsStyle === "expandable" && !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalloutExtraContent, {
+			sdsStyle === "expandable" && !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.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__*/ (0, _emotion_css.css)(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__*/ (0, _emotion_css.css)(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__*/ (0, _emotion_css.css)(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__*/ (0, _emotion_css.css)("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;");
 };
-const doNotForwardProps$34 = ["hasInvertedStyle", "textAlign"];
+const doNotForwardProps$34 = ["textAlign"];
 const StyledTitle = /*#__PURE__*/ (0, _emotion_styled_base.default)("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__*/ (0, _emotion_styled_base.default)("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__*/ (0, _emotion_css.css)("&.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__*/ (0, _emotion_css.css)("&.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__*/ (0, _emotion_css.css)("&.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__*/ (0, _emotion_css.css)("&.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__*/ (0, _emotion_styled_base.default)(_mui_material.Popper, { target: "e1j7jeiz1" })("z-index:", (props) => {
 	var _props$theme$zIndex$t, _props$theme;
@@ -9222,17 +9238,14 @@ const _excluded$34 = [
 * https://mui.com/components/tooltips/#disabled-elements
 */
 const Tooltip = (0, react.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 = (0, _mui_material.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: (0, _mui_material.useTheme)(),
 		width
 	};
 	const tooltip = mergeClass$1({
@@ -9251,16 +9264,9 @@ const Tooltip = (0, react.forwardRef)(function Tooltip(props, ref) {
 			arrow,
 			tooltip
 		},
-		leaveDelay: hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500,
 		title: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTitle, {
-				hasInvertedStyle,
-				children: title
-			}),
-			subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSubtitle, {
-				hasInvertedStyle,
-				children: subtitle
-			}),
+			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTitle, { children: title }),
+			subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSubtitle, { children: subtitle }),
 			componentSlot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledComponentSlotWrapper, {
 				shouldAddMargin: !!title || !!subtitle,
 				children: componentSlot
@@ -9271,15 +9277,6 @@ const Tooltip = (0, react.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;
@@ -9510,8 +9507,7 @@ const CellBasic = (0, react.forwardRef)((props, ref) => {
 		subtitle: secondaryText,
 		arrow: true,
 		leaveDelay: 0,
-		leaveTouchDelay: 0,
-		sdsStyle: "dark"
+		leaveTouchDelay: 0
 	}, tooltipProps), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableData, _objectSpread2(_objectSpread2({
 		ref,
 		as
@@ -9682,7 +9678,6 @@ const CellHeader = (0, react.forwardRef)((props, ref) => {
 	if (shouldShowTooltipOnHover && hover) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, _objectSpread2(_objectSpread2({
 		arrow: true,
 		placement: "top-start",
-		sdsStyle: "dark",
 		subtitle: tooltipSubtitle,
 		title: tooltipText
 	}, tooltipProps), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableHeader$1, _objectSpread2(_objectSpread2({
@@ -10073,10 +10068,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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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;
@@ -10250,7 +10245,7 @@ const validateSdsStyle = (sdsStyle) => {
 /**
 * @see https://mui.com/material-ui/react-button/
 */
-const InputDropdown = (props) => {
+const InputDropdown = (0, react.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";
@@ -10260,6 +10255,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__ */ (0, react_jsx_runtime.jsxs)(StyledInputDropdown, _objectSpread2(_objectSpread2({}, props), {}, {
+		ref,
 		className: cn(rootClassName, className),
 		sdsStyle,
 		"aria-label": "Dropdown input",
@@ -10324,7 +10320,7 @@ const InputDropdown = (props) => {
 			})
 		})]
 	}));
-};
+});
 function renderLabelText(props) {
 	const { sdsType } = props;
 	if (sdsType === "label") return renderLabelTypeLabelText(props);
@@ -10397,7 +10393,7 @@ const _excluded$30 = [
 	"disabled",
 	"value",
 	"onClick"
-];
+], _excluded2$4 = ["ref"];
 function useDropdownState(propValue, multiple, options) {
 	const getInitialValue = (0, react.useCallback)(() => {
 		return multiple ? [] : null;
@@ -10631,6 +10627,7 @@ const Dropdown = (props) => {
 		countMultiColumnSelections,
 		getSingleSelectionProps
 	]);
+	const { ref } = rest, inputRest = _objectWithoutProperties(rest, _excluded2$4);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputDropdownComponent, _objectSpread2(_objectSpread2(_objectSpread2({
 		disabled,
 		label,
@@ -10638,7 +10635,7 @@ const Dropdown = (props) => {
 		"aria-expanded": open,
 		"aria-haspopup": "listbox",
 		multiple: multiple || isMultiColumn
-	}, getInputDropdownProps), InputDropdownProps), rest)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenu, _objectSpread2(_objectSpread2({
+	}, getInputDropdownProps), InputDropdownProps), inputRest)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenu, _objectSpread2(_objectSpread2({
 		anchorEl,
 		open,
 		search,
@@ -11811,6 +11808,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);
@@ -11842,18 +11854,10 @@ const HeroTitle = /*#__PURE__*/ (0, _emotion_styled_base.default)("h1", { target
 	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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.css)("color:", getTextColor(props), ";"), " margin:0;padding:0;");
 const HeroCaption = /*#__PURE__*/ (0, _emotion_styled_base.default)("p", { target: "e1wdq27g6" })(fontBodyXxxs, " ", (props) => {
-	var _semanticColors$base3, _semanticColors$base4;
-	const { hasInvertTextColor } = props;
-	const semanticColors = getSemanticColors(props);
 	const spaces = getSpaces(props);
-	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.css)("color:", getTextColor(props), ";margin:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;");
 }, " padding:0;");
 const ContentSlot = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { target: "e1wdq27g5" })((props) => {
 	const spaces = getSpaces(props);
@@ -16632,27 +16636,47 @@ const NavigationJumpTo = (0, react.forwardRef)((props, ref) => {
 		});
 		return map;
 	}, [items, flattenedItems]);
-	const a11yProps = (title, elementId) => {
+	const tabIds = (0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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;
 	};
@@ -16705,7 +16729,7 @@ const NavigationJumpTo = (0, react.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
@@ -17192,6 +17216,20 @@ const Pagination = (0, react.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",
@@ -17215,7 +17253,7 @@ const overlayPanelStyles = (props) => {
 	const semanticColors = getSemanticColors(props);
 	const spaces = getSpaces(props);
 	const shadows = getShadows(props);
-	return /*#__PURE__*/ (0, _emotion_react.css)("width:fit-content;height:fit-content;div[data-testid=\"sentinelStart\"],div[data-testid=\"sentinelEnd\"]{width:fit-content;}.", _mui_material.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__*/ (0, _emotion_react.css)("pointer-events:none;.", _mui_material.drawerClasses.paper, ",.", _mui_material.backdropClasses.root, "{pointer-events:auto;}.", _mui_material.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__*/ (0, _emotion_styled_base.default)(_mui_material.Drawer, {
 	shouldForwardProp: (prop) => !doNotForwardProps$2.includes(prop),
@@ -17297,7 +17335,8 @@ const _excluded$5 = [
 	"width",
 	"ModalProps",
 	"isBackdropClickEnabled",
-	"slotProps"
+	"slotProps",
+	"transitionDuration"
 ];
 function isOverlayPanelProps(props) {
 	return props.sdsType === "overlay";
@@ -17310,7 +17349,7 @@ const SLOT_PROPS = {
 * @see https://mui.com/material-ui/react-drawer/
 */
 const Panel = react.default.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 : {})
@@ -17335,6 +17374,7 @@ const Panel = react.default.forwardRef((props, ref) => {
 			anchor: drawerAnchor,
 			variant: drawerVariant,
 			width: drawerWidth,
+			transitionDuration,
 			ModalProps: _objectSpread2(_objectSpread2({}, ModalProps), {}, {
 				disableEnforceFocus: true,
 				disableScrollLock: true
@@ -17549,7 +17589,6 @@ const TableRow = (0, react.forwardRef)((props, ref) => {
 	const { children, shouldShowTooltipOnHover = true, tooltipProps, tooltipText = false, tooltipSubtitle, hover = true } = props;
 	if (shouldShowTooltipOnHover && hover) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, _objectSpread2(_objectSpread2({
 		arrow: true,
-		sdsStyle: "dark",
 		subtitle: tooltipSubtitle,
 		title: tooltipText
 	}, tooltipProps), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableRow, _objectSpread2(_objectSpread2({ ref }, props), {}, { children })) }));
@@ -18472,7 +18511,8 @@ const Tabs = (0, react.forwardRef)(function Tabs(props, ref) {
 		value: contextValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTabs, _objectSpread2({
 			slotProps: { indicator: indicatorProps },
-			ref
+			ref,
+			sdsSize
 		}, rest))
 	});
 });