@czi-sds/components 24.2.0 → 25.0.0

package/dist/index.esm.js

@@ -3,11 +3,12 @@ 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, 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 { 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, emphasize, 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";
+import "@mui/icons-material";
 import { css as css$2 } from "@emotion/css";
+import { ArrowUpRightIcon } from "@phosphor-icons/react";
 import Button$2 from "@mui/material/Button";
 import { useTheme as useTheme$1 } from "@mui/material/styles";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
@@ -1747,9 +1748,9 @@ function _objectWithoutProperties(e, t) {
 }
 //#endregion
 //#region src/core/Accordion/components/AccordionDetails/index.tsx
-const _excluded$50 = ["children", "id"];
+const _excluded$52 = ["children", "id"];
 const AccordionDetails = (props) => {
-	const { children, id } = props, rest = _objectWithoutProperties(props, _excluded$50);
+	const { children, id } = props, rest = _objectWithoutProperties(props, _excluded$52);
 	return /* @__PURE__ */ jsx(StyledAccordionDetails$1, _objectSpread2(_objectSpread2({ id }, rest), {}, { children }));
 };
 //#endregion
@@ -6271,7 +6272,7 @@ const iconMap = {
 };
 //#endregion
 //#region src/core/Icon/style.ts
-function _EMOTION_STRINGIFIED_CSS_ERROR__$25() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$26() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 const doNotForwardProps$46 = [
@@ -6296,7 +6297,7 @@ const StyledSvgIcon = /*#__PURE__*/ _styled(SvgIcon, {
 const StyledIcon$2 = /*#__PURE__*/ _styled("div", { target: "emi0zh40" })({
 	name: "49aokf",
 	styles: "display:contents",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$25
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$26
 });
 //#endregion
 //#region src/core/Icon/index.tsx
@@ -6354,13 +6355,13 @@ const Icon = forwardRef(function Icon({ className, color, shade, sdsIcon, sdsSiz
 });
 //#endregion
 //#region src/core/Accordion/components/AccordionHeader/index.tsx
-const _excluded$49 = [
+const _excluded$51 = [
 	"children",
 	"subtitle",
 	"chevronSize"
 ];
 const AccordionHeader = (props) => {
-	const { children, subtitle, chevronSize = "xs" } = props, rest = _objectWithoutProperties(props, _excluded$49);
+	const { children, subtitle, chevronSize = "xs" } = props, rest = _objectWithoutProperties(props, _excluded$51);
 	return /* @__PURE__ */ jsxs(StyledAccordionHeader, _objectSpread2(_objectSpread2({
 		chevronSize,
 		expandIcon: /* @__PURE__ */ jsx(Icon, {
@@ -6397,7 +6398,7 @@ const leftPosition = (props) => {
 };
 //#endregion
 //#region src/core/Accordion/index.tsx
-const _excluded$48 = [
+const _excluded$50 = [
 	"id",
 	"children",
 	"useDivider",
@@ -6408,7 +6409,7 @@ const _excluded$48 = [
 * @see https://mui.com/material-ui/react-accordion/
 */
 const Accordion = React.forwardRef((props, ref) => {
-	const { id, children, useDivider, togglePosition = "right", defaultExpanded = false } = props, rest = _objectWithoutProperties(props, _excluded$48);
+	const { id, children, useDivider, togglePosition = "right", defaultExpanded = false } = props, rest = _objectWithoutProperties(props, _excluded$50);
 	const [expanded, setExpanded] = React.useState(defaultExpanded ? id : false);
 	const handleChange = (panel) => (_event, isExpanded) => {
 		setExpanded(isExpanded ? panel : false);
@@ -6670,7 +6671,7 @@ const StyledChildren = /*#__PURE__*/ _styled("span", {
 }, ";");
 //#endregion
 //#region src/core/Button/index.tsx
-const _excluded$47 = [
+const _excluded$49 = [
 	"sdsStyle",
 	"sdsType",
 	"size",
@@ -6686,7 +6687,7 @@ const MUI_VARIANT_MAP$1 = {
 * @see https://mui.com/material-ui/react-button/
 */
 const Button = React.forwardRef((props, ref) => {
-	const { sdsStyle = "solid", sdsType = "primary", size = "large", variant = "contained", children } = props, rest = _objectWithoutProperties(props, _excluded$47);
+	const { sdsStyle = "solid", sdsType = "primary", size = "large", variant = "contained", children } = props, rest = _objectWithoutProperties(props, _excluded$49);
 	const iconOnlyChild = isIconOnlyChild(children);
 	return /* @__PURE__ */ jsx(StyledButton$4, _objectSpread2(_objectSpread2({
 		variant: MUI_VARIANT_MAP$1[sdsStyle] || variant,
@@ -6701,7 +6702,7 @@ const Button = React.forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/core/InputSearch/style.ts
-function _EMOTION_STRINGIFIED_CSS_ERROR__$24() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$25() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 const doNotForwardProps$44 = [
@@ -6711,7 +6712,7 @@ const doNotForwardProps$44 = [
 	"customTheme",
 	"hasInvertedStyle"
 ];
-const rounded$3 = (props) => {
+const rounded$2 = (props) => {
 	var _semanticColors$base;
 	const corners = getCorners(props);
 	const semanticColors = getSemanticColors(props);
@@ -6754,16 +6755,16 @@ const StyledSearchBase = /*#__PURE__*/ _styled(TextField, {
 	const iconSizes = getIconSizes(props);
 	const semanticColors = getSemanticColors(props);
 	const corners = getCorners(props);
-	return /*#__PURE__*/ css("min-width:120px;display:block;background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.backgroundPrimary, "!important;border-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;[type=\"search\"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}& .input-search-clear-icon{cursor:pointer;svg{height:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs = iconSizes.xs) === null || _iconSizes$xs === void 0 ? void 0 : _iconSizes$xs.height, "px;width:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs2 = iconSizes.xs) === null || _iconSizes$xs2 === void 0 ? void 0 : _iconSizes$xs2.width, "px;}}.", outlinedInputClasses.root, "{padding:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;border-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;width:100%;.", outlinedInputClasses.input, "{padding-right:", spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;&::placeholder{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.textTertiary, ";opacity:1;}}.MuiInputAdornment-positionEnd{position:absolute;right:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;}.", outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.borderPrimary, ";}&:hover .input-search-clear-icon,&:focus-within .input-search-clear-icon{svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.ornamentSecondary, "!important;}&:hover{svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base12 = semanticColors.base) === null || _semanticColors$base12 === void 0 ? void 0 : _semanticColors$base12.ornamentSecondaryInteraction, "!important;}}&:active{svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.fillPressed, "!important;}}}}.", inputBaseClasses.sizeSmall, ">.", inputBaseClasses.input, "{", fontBodyXs(props), " padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;height:unset;box-sizing:border-box;}.", outlinedInputClasses.root, ":hover{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base13 = semanticColors.base) === null || _semanticColors$base13 === void 0 ? void 0 : _semanticColors$base13.fillPrimaryInteraction, ";& .", buttonBaseClasses.root, ":last-of-type{svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base14 = semanticColors.base) === null || _semanticColors$base14 === void 0 ? void 0 : _semanticColors$base14.ornamentSecondary, ";}}.", outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base15 = semanticColors.base) === null || _semanticColors$base15 === void 0 ? void 0 : _semanticColors$base15.borderPrimaryInteraction, ";}}.", outlinedInputClasses.root, ".", outlinedInputClasses.focused, "{outline:none;.", outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.foreground, ";}.", inputAdornmentClasses.root, " .", buttonBaseClasses.root, ":last-of-type{cursor:default;svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base16 = semanticColors.base) === null || _semanticColors$base16 === void 0 ? void 0 : _semanticColors$base16.ornamentSecondaryInteraction, ";}}}&.user-is-tabbing .", outlinedInputClasses.root, ":focus-within{outline:2px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base17 = semanticColors.base) === null || _semanticColors$base17 === void 0 ? void 0 : _semanticColors$base17.borderPrimaryInteraction, ";outline-offset:1px;}", sdsStyle === "rounded" && rounded$3(props), " ", intent === "negative" && applyIntentColor$2(props, "negative"), " ", intent === "notice" && applyIntentColor$2(props, "notice"), " ", intent === "positive" && applyIntentColor$2(props, "positive"), " ", disabled && disabledStyled$2(props), ";");
+	return /*#__PURE__*/ css("min-width:120px;display:block;background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.backgroundPrimary, "!important;border-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;[type=\"search\"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}& .input-search-clear-icon{cursor:pointer;svg{height:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs = iconSizes.xs) === null || _iconSizes$xs === void 0 ? void 0 : _iconSizes$xs.height, "px;width:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs2 = iconSizes.xs) === null || _iconSizes$xs2 === void 0 ? void 0 : _iconSizes$xs2.width, "px;}}.", outlinedInputClasses.root, "{padding:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;border-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;width:100%;.", outlinedInputClasses.input, "{padding-right:", spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;&::placeholder{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.textTertiary, ";opacity:1;}}.MuiInputAdornment-positionEnd{position:absolute;right:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;}.", outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.borderPrimary, ";}&:hover .input-search-clear-icon,&:focus-within .input-search-clear-icon{svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.ornamentSecondary, "!important;}&:hover{svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base12 = semanticColors.base) === null || _semanticColors$base12 === void 0 ? void 0 : _semanticColors$base12.ornamentSecondaryInteraction, "!important;}}&:active{svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.fillPressed, "!important;}}}}.", inputBaseClasses.sizeSmall, ">.", inputBaseClasses.input, "{", fontBodyXs(props), " padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;height:unset;box-sizing:border-box;}.", outlinedInputClasses.root, ":hover{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base13 = semanticColors.base) === null || _semanticColors$base13 === void 0 ? void 0 : _semanticColors$base13.fillPrimaryInteraction, ";& .", buttonBaseClasses.root, ":last-of-type{svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base14 = semanticColors.base) === null || _semanticColors$base14 === void 0 ? void 0 : _semanticColors$base14.ornamentSecondary, ";}}.", outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base15 = semanticColors.base) === null || _semanticColors$base15 === void 0 ? void 0 : _semanticColors$base15.borderPrimaryInteraction, ";}}.", outlinedInputClasses.root, ".", outlinedInputClasses.focused, "{outline:none;.", outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.foreground, ";}.", inputAdornmentClasses.root, " .", buttonBaseClasses.root, ":last-of-type{cursor:default;svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base16 = semanticColors.base) === null || _semanticColors$base16 === void 0 ? void 0 : _semanticColors$base16.ornamentSecondaryInteraction, ";}}}&.user-is-tabbing .", outlinedInputClasses.root, ":focus-within{outline:2px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base17 = semanticColors.base) === null || _semanticColors$base17 === void 0 ? void 0 : _semanticColors$base17.borderPrimaryInteraction, ";outline-offset:1px;}", sdsStyle === "rounded" && rounded$2(props), " ", intent === "negative" && applyIntentColor$2(props, "negative"), " ", intent === "notice" && applyIntentColor$2(props, "notice"), " ", intent === "positive" && applyIntentColor$2(props, "positive"), " ", disabled && disabledStyled$2(props), ";");
 }, ";");
 const StyledInputAdornment = /*#__PURE__*/ _styled(InputAdornment, { target: "e1h1uy4z0" })({
 	name: "vtdujo",
 	styles: "position:relative;height:unset;margin:0",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$24
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$25
 });
 //#endregion
 //#region src/core/MenuItem/style.ts
-function _EMOTION_STRINGIFIED_CSS_ERROR__$23() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$24() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 const StyledMenuItem$1 = /*#__PURE__*/ _styled(MenuItem$1, { target: "eanvvd48" })((props) => {
@@ -6849,7 +6850,7 @@ const StyledMenuItem$1 = /*#__PURE__*/ _styled(MenuItem$1, { target: "eanvvd48"
 const ContentWrapper = /*#__PURE__*/ _styled("span", { target: "eanvvd47" })({
 	name: "18ov00z",
 	styles: "display:flex;justify-content:space-between;align-items:flex-start;width:100%",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$23
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$24
 });
 const disabledStyles$2 = (props) => {
 	var _semanticColors$base13;
@@ -6927,7 +6928,7 @@ const DotIcon = /*#__PURE__*/ _styled("svg", { target: "eanvvd41" })((props) =>
 }, ";");
 //#endregion
 //#region src/core/MenuItem/index.tsx
-const _excluded$46 = [
+const _excluded$48 = [
 	"children",
 	"column",
 	"disabled",
@@ -6942,7 +6943,7 @@ const _excluded$46 = [
 * @see https://mui.com/material-ui/react-menu/
 */
 const MenuItem = forwardRef(function MenuItem(props, ref) {
-	const { children, column = null, disabled, isMultiSelect = false, icon: newIcon, sdsIcon, sdsIconProps, sdsStyle = "determinate", sdsType = "default" } = props, originalMenuItemProps = _objectWithoutProperties(props, _excluded$46);
+	const { children, column = null, disabled, isMultiSelect = false, icon: newIcon, sdsIcon, sdsIconProps, sdsStyle = "determinate", sdsType = "default" } = props, originalMenuItemProps = _objectWithoutProperties(props, _excluded$48);
 	const { selected = false } = originalMenuItemProps;
 	const isActionType = sdsType === "action";
 	const selectionIcon = () => {
@@ -7060,7 +7061,7 @@ const useDetectUserTabbing = (ref) => {
 };
 //#endregion
 //#region src/core/InputSearch/index.tsx
-const _excluded$45 = [
+const _excluded$47 = [
 	"label",
 	"id",
 	"placeholder",
@@ -7078,7 +7079,7 @@ const _excluded$45 = [
 * @see https://mui.com/material-ui/react-text-field/
 */
 const InputSearch = forwardRef(function InputSearch(props, ref) {
-	const { label, id, placeholder, sdsStyle = "square", intent = "default", handleSubmit, onChange, disabled, classes = EMPTY_OBJECT, className, value: propValue, slotProps: userSlotProps } = props, rest = _objectWithoutProperties(props, _excluded$45);
+	const { label, id, placeholder, sdsStyle = "square", intent = "default", handleSubmit, onChange, disabled, classes = EMPTY_OBJECT, className, value: propValue, slotProps: userSlotProps } = props, rest = _objectWithoutProperties(props, _excluded$47);
 	const { root: rootClassName, label: labelClassName, input: inputClassName, endAdornment: endAdornmentClassName, startAdornment: startAdornmentClassName, clearButton: clearButtonClassName, searchButton: searchButtonClassName } = classes;
 	/**
 	* (masoudmanson): In case that the ref is not provided, we will create a new one.
@@ -7189,7 +7190,7 @@ const InputSearch = forwardRef(function InputSearch(props, ref) {
 });
 //#endregion
 //#region src/core/Autocomplete/components/AutocompleteBase/style.ts
-function _EMOTION_STRINGIFIED_CSS_ERROR__$22() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$23() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 const doNotForwardProps$43 = [
@@ -7348,11 +7349,11 @@ const StyledMenuItemDetails = /*#__PURE__*/ _styled("div", { target: "eelfr3l1"
 const StyledMenuItemText = /*#__PURE__*/ _styled("div", { target: "eelfr3l0" })({
 	name: "1fttcpj",
 	styles: "display:flex;flex-direction:column",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$22
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$23
 });
 //#endregion
 //#region src/core/Autocomplete/components/AutocompleteBase/index.tsx
-const _excluded$44 = [
+const _excluded$46 = [
 	"component",
 	"details",
 	"count",
@@ -7582,7 +7583,7 @@ const AutocompleteBase = (props) => {
 	}
 	function defaultRenderOption(optionProps, option, { selected }) {
 		let MenuItemContent;
-		const { component, details, count, icon, sdsIconProps, disabled: optionDisabled } = option, restOptionProps = _objectWithoutProperties(option, _excluded$44);
+		const { component, details, count, icon, sdsIconProps, disabled: optionDisabled } = option, restOptionProps = _objectWithoutProperties(option, _excluded$46);
 		const menuItemLabel = getOptionLabel(option);
 		if (component) MenuItemContent = component;
 		else MenuItemContent = /* @__PURE__ */ jsxs(StyledMenuItemText, { children: [menuItemLabel, details && /* @__PURE__ */ jsx(StyledMenuItemDetails, {
@@ -7621,7 +7622,7 @@ const StyledColumnTitle = /*#__PURE__*/ _styled("p", { target: "e1teds5i0" })(fo
 }, ";");
 //#endregion
 //#region src/core/Autocomplete/components/AutocompleteGroup/index.tsx
-const _excluded$43 = [
+const _excluded$45 = [
 	"autocompleteProps",
 	"onValueChange",
 	"value",
@@ -7632,7 +7633,7 @@ const _excluded$43 = [
 	"inputValue"
 ];
 const AutocompleteGroup = (props) => {
-	const { autocompleteProps, onValueChange, value: propValue, multiple, label, InputBaseProps, popperOpen, inputValue } = props, rest = _objectWithoutProperties(props, _excluded$43);
+	const { autocompleteProps, onValueChange, value: propValue, multiple, label, InputBaseProps, popperOpen, inputValue } = props, rest = _objectWithoutProperties(props, _excluded$45);
 	const { name, width, props: propProps } = autocompleteProps;
 	const [value, setValue] = useState(getInitialValue(multiple, propValue));
 	const [pendingValue, setPendingValue] = useState(getInitialValue(multiple, propValue));
@@ -7676,7 +7677,7 @@ const AutocompleteGroup = (props) => {
 };
 //#endregion
 //#region src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
-function _EMOTION_STRINGIFIED_CSS_ERROR__$21() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$22() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 const doNotForwardProps$42 = [
@@ -7740,7 +7741,7 @@ const StyledPaper$3 = /*#__PURE__*/ _styled(Paper, {
 const StyledAutocompleteGroupWrapper = /*#__PURE__*/ _styled("div", { target: "e48e76h1" })({
 	name: "zjik7",
 	styles: "display:flex",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$21
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$22
 });
 const StyledAutocompleteInput = /*#__PURE__*/ _styled(InputSearch, {
 	shouldForwardProp: (prop) => !doNotForwardProps$42.includes(prop),
@@ -7788,7 +7789,7 @@ const VerticalDivider = ({ icon }) => {
 };
 //#endregion
 //#region src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
-const _excluded$42 = [
+const _excluded$44 = [
 	"InputBaseProps",
 	"open",
 	"PopperPlacement",
@@ -7808,7 +7809,7 @@ const _excluded$42 = [
 ];
 const AutocompleteMultiColumn = (props) => {
 	var _theme$app;
-	const { InputBaseProps, open, PopperPlacement = "bottom-start", PopperBaseProps, search = false, label = "Search", onClickAway, onClick, ClickAwayListenerProps, options, onInputChange, onBlur, multiple, value: parentInitialValue, onChange, PopperComponent = StyledPopper } = props, rest = _objectWithoutProperties(props, _excluded$42);
+	const { InputBaseProps, open, PopperPlacement = "bottom-start", PopperBaseProps, search = false, label = "Search", onClickAway, onClick, ClickAwayListenerProps, options, onInputChange, onBlur, multiple, value: parentInitialValue, onChange, PopperComponent = StyledPopper } = props, rest = _objectWithoutProperties(props, _excluded$44);
 	const theme = useTheme();
 	const isOpenControlled = open !== void 0;
 	const [inputValue, setInputValue] = useState("");
@@ -7996,13 +7997,13 @@ const AutocompleteMultiColumn = (props) => {
 };
 //#endregion
 //#region src/core/Autocomplete/index.tsx
-const _excluded$41 = [
+const _excluded$43 = [
 	"options",
 	"value",
 	"onChange"
 ];
 const Autocomplete = (props) => {
-	const { options, value, onChange } = props, rest = _objectWithoutProperties(props, _excluded$41);
+	const { options, value, onChange } = props, rest = _objectWithoutProperties(props, _excluded$43);
 	if (options && !!options[0] && "options" in options[0]) if (options.length > 1) return /* @__PURE__ */ jsx(AutocompleteMultiColumn, _objectSpread2(_objectSpread2({
 		options,
 		value,
@@ -8021,13 +8022,13 @@ const Autocomplete = (props) => {
 };
 //#endregion
 //#region src/core/Banner/style.ts
-function _EMOTION_STRINGIFIED_CSS_ERROR__$20() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$21() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 const Centered = /*#__PURE__*/ _styled("div", { target: "e15g05664" })({
 	name: "qke47e",
 	styles: "flex:1 1 auto;display:flex;justify-content:center;align-items:center",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$20
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$21
 });
 const doNotForwardPropsIconWrapper = ["bannerType", "intent"];
 const IconWrapper$1 = /*#__PURE__*/ _styled("div", {
@@ -8122,7 +8123,7 @@ const StyledBanner = /*#__PURE__*/ _styled("div", {
 }, ";");
 //#endregion
 //#region src/core/Banner/index.tsx
-const _excluded$40 = [
+const _excluded$42 = [
 	"children",
 	"dismissed",
 	"dismissible",
@@ -8133,7 +8134,7 @@ const _excluded$40 = [
 	"intent"
 ];
 const Banner = forwardRef(function Banner(props, ref) {
-	const { children, dismissed, dismissible = true, onClose, sdsType, icon, sdsIconProps, intent = "info" } = props, rest = _objectWithoutProperties(props, _excluded$40);
+	const { children, dismissed, dismissible = true, onClose, sdsType, icon, sdsIconProps, intent = "info" } = props, rest = _objectWithoutProperties(props, _excluded$42);
 	const [wasDismissed, setWasDismissed] = useState(false);
 	if (dismissed || wasDismissed) return null;
 	const handleClose = (e) => {
@@ -8216,10 +8217,6 @@ const SDS_WARNINGS = {
 		hasWarned: false,
 		message: "Warning: ButtonGroup vertical orientation is only available when all buttons are icon-only. Falling back to horizontal orientation."
 	},
-	["chipDeprecated"]: {
-		hasWarned: false,
-		message: "Warning: <Chip /> will be deprecated and replaced with <Tag />"
-	},
 	["menuSelectDeprecated"]: {
 		hasWarned: false,
 		message: "Warning: MenuSelect will be deprecated and replaced with <DropdownMenu />"
@@ -8260,7 +8257,7 @@ const showWarningIfFirstOccurence = (warningType) => {
 };
 //#endregion
 //#region src/core/ButtonDropdown/index.tsx
-const _excluded$39 = [
+const _excluded$41 = [
 	"size",
 	"sdsType",
 	"children"
@@ -8269,7 +8266,7 @@ const _excluded$39 = [
 * @see https://mui.com/material-ui/react-button/
 */
 const ButtonDropdown = React.forwardRef((props, ref) => {
-	const { size = "large", sdsType, children } = props, rest = _objectWithoutProperties(props, _excluded$39);
+	const { size = "large", sdsType, children } = props, rest = _objectWithoutProperties(props, _excluded$41);
 	if (sdsType === "destructive") {
 		showWarningIfFirstOccurence("buttonDropdownV2Destructive");
 		return null;
@@ -8490,13 +8487,13 @@ const StyledButtonToggle = /*#__PURE__*/ _styled(Button, {
 }, ";");
 //#endregion
 //#region src/core/ButtonToggle/index.tsx
-const _excluded$38 = ["startIcon"];
+const _excluded$40 = ["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)), {}, {
+	return /* @__PURE__ */ jsx(StyledButtonToggle, _objectSpread2(_objectSpread2({}, _objectWithoutProperties(props, _excluded$40)), {}, {
 		startIcon,
 		endIcon: null,
 		backgroundOnHover: true,
@@ -8505,7 +8502,7 @@ const ButtonToggle = React.forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/core/ButtonGroup/index.tsx
-const _excluded$37 = [
+const _excluded$39 = [
 	"sdsType",
 	"size",
 	"orientation",
@@ -8560,7 +8557,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$37);
+	const { sdsType = "primary", size = "large", orientation = "horizontal", children } = props, rest = _objectWithoutProperties(props, _excluded$39);
 	const allIconOnly = areAllButtonsIconOnly(children);
 	const effectiveOrientation = allIconOnly ? orientation : "horizontal";
 	if (orientation === "vertical" && !allIconOnly) showWarningIfFirstOccurence("ButtonGroupVerticalOrientation");
@@ -8595,13 +8592,13 @@ const tertiary = (props) => {
 	const semanticColors = getSemanticColors(props);
 	return /*#__PURE__*/ css("color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.ornamentSecondary, ";svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.ornamentSecondary, ";}&:hover{background:none;color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.ornamentSecondaryInteraction, ";svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base12 = semanticColors.base) === null || _semanticColors$base12 === void 0 ? void 0 : _semanticColors$base12.ornamentSecondaryInteraction, ";}}&:active{background:none;color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base13 = semanticColors.base) === null || _semanticColors$base13 === void 0 ? void 0 : _semanticColors$base13.ornamentSecondaryInteraction, ";svg{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base14 = semanticColors.base) === null || _semanticColors$base14 === void 0 ? void 0 : _semanticColors$base14.ornamentSecondaryInteraction, ";}}");
 };
-const small$1 = (props) => {
+const small = (props) => {
 	const { sdsType } = props;
 	const iconSizes = getIconSizes(props);
 	const spaces = getSpaces(props);
 	return /*#__PURE__*/ css(".MuiSvgIcon-root{height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;", sdsType !== "tertiary" ? `margin: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;` : "", ";}");
 };
-const medium$1 = (props) => {
+const medium = (props) => {
 	const { sdsType } = props;
 	const iconSizes = getIconSizes(props);
 	const spaces = getSpaces(props);
@@ -8627,7 +8624,7 @@ const StyledButtonIcon = /*#__PURE__*/ _styled(IconButton, {
 	target: "e164i6480"
 })("padding:0;", focusVisibleA11yStyle, " ", (props) => {
 	const { disabled, sdsSize = "medium", sdsType = "primary" } = props;
-	return /*#__PURE__*/ css(sdsType === "primary" && primary$1(props), " ", sdsType === "secondary" && secondary$1(props), " ", sdsType === "tertiary" && tertiary(props), " ", disabled && isDisabled$1(props), " ", sdsSize === "small" && small$1(props), " ", sdsSize === "medium" && medium$1(props), " ", sdsSize === "large" && large(props), ";");
+	return /*#__PURE__*/ css(sdsType === "primary" && primary$1(props), " ", sdsType === "secondary" && secondary$1(props), " ", sdsType === "tertiary" && tertiary(props), " ", disabled && isDisabled$1(props), " ", sdsSize === "small" && small(props), " ", sdsSize === "medium" && medium(props), " ", sdsSize === "large" && large(props), ";");
 }, ";");
 //#endregion
 //#region src/core/ButtonIcon/index.tsx
@@ -8869,7 +8866,7 @@ const StyledButtonToggleLegacy = /*#__PURE__*/ _styled(ButtonIcon, {
 }, ";");
 //#endregion
 //#region src/core/ButtonToggleLegacy/index.tsx
-const _excluded$36 = [
+const _excluded$38 = [
 	"icon",
 	"sdsSize",
 	"sdsStage",
@@ -8880,7 +8877,7 @@ const _excluded$36 = [
 * @deprecated Use ButtonToggle instead. ButtonToggleLegacy will be removed in a future release.
 */
 const ButtonToggleLegacy = React.forwardRef((props, ref) => {
-	const { icon, sdsSize = "medium", sdsStage = "off", sdsType = "primary" } = props, rest = _objectWithoutProperties(props, _excluded$36);
+	const { icon, sdsSize = "medium", sdsStage = "off", sdsType = "primary" } = props, rest = _objectWithoutProperties(props, _excluded$38);
 	if (icon !== void 0) return /* @__PURE__ */ jsx(StyledButtonToggleLegacy, _objectSpread2({
 		icon,
 		sdsType,
@@ -9003,7 +9000,7 @@ const CalloutExtraContent = ({ children, hideTitle, hideBody }) => {
 };
 //#endregion
 //#region src/core/Callout/index.tsx
-const _excluded$35 = [
+const _excluded$37 = [
 	"autoDismiss",
 	"dismissed",
 	"icon",
@@ -9024,7 +9021,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, extraContent } = 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$37);
 	const [hide, setHide] = useState(dismissed);
 	const [stage, setStage] = useState(sdsStage);
 	useEffect(() => {
@@ -9174,7 +9171,7 @@ const StyledComponentSlotWrapper = /*#__PURE__*/ _styled("div", { target: "e1j7j
 }, ";");
 //#endregion
 //#region src/core/Tooltip/index.tsx
-const _excluded$34 = [
+const _excluded$36 = [
 	"arrowOffset",
 	"classes",
 	"hasInvertedStyle",
@@ -9195,7 +9192,7 @@ const _excluded$34 = [
 * https://mui.com/components/tooltips/#disabled-elements
 */
 const Tooltip = forwardRef(function Tooltip(props, ref) {
-	const { arrowOffset, classes, hasInvertedStyle, inverted, sdsStyle, 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$36);
 	const { children } = rest;
 	if (hasInvertedStyle !== void 0 || inverted !== void 0 || sdsStyle !== void 0) showWarningIfFirstOccurence("tooltipInvertStyle");
 	const extraProps = {
@@ -9245,7 +9242,7 @@ function mergeClass$1({ props, className, key }) {
 const RowHoverContext = createContext({ isRowHovered: false });
 //#endregion
 //#region src/core/CellBasic/style.ts
-function _EMOTION_STRINGIFIED_CSS_ERROR__$19() {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$20() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 const doNotForwardProps$33 = [
@@ -9299,12 +9296,12 @@ const ShouldTruncate$1 = () => {
 const StyledCellContent = /*#__PURE__*/ _styled("div", { target: "ekxclbn10" })({
 	name: "zjik7",
 	styles: "display:flex",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$19
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$20
 });
 const StyledCellContentWrapper = /*#__PURE__*/ _styled("div", { target: "ekxclbn9" })({
 	name: "1d3w5wq",
 	styles: "width:100%",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$19
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$20
 });
 const StyledCellIconWrapper = /*#__PURE__*/ _styled("div", {
 	shouldForwardProp: (prop) => !doNotForwardProps$33.includes(prop),
@@ -9493,9 +9490,9 @@ const StyledCellComponentData = /*#__PURE__*/ _styled("div", { target: "e173l55i
 }, ";");
 //#endregion
 //#region src/core/CellComponent/index.tsx
-const _excluded$33 = ["children", "as"];
+const _excluded$35 = ["children", "as"];
 const CellComponent = forwardRef((props, ref) => {
-	const { children, as = "td" } = props, rest = _objectWithoutProperties(props, _excluded$33);
+	const { children, as = "td" } = props, rest = _objectWithoutProperties(props, _excluded$35);
 	return /* @__PURE__ */ jsx(StyledCellComponentData, _objectSpread2(_objectSpread2({
 		ref,
 		className: "cell-component",
@@ -9599,7 +9596,7 @@ const StyledCellHeaderContainer = /*#__PURE__*/ _styled("div", {
 }, ";");
 //#endregion
 //#region src/core/CellHeader/index.tsx
-const _excluded$32 = [
+const _excluded$34 = [
 	"as",
 	"children",
 	"shouldShowTooltipOnHover",
@@ -9625,7 +9622,7 @@ const CellHeaderContent = (props) => {
 	});
 };
 const CellHeader = forwardRef((props, ref) => {
-	const { as = "th", children, shouldShowTooltipOnHover = false, tooltipProps, tooltipText = "", tooltipSubtitle, hover = false } = props, rest = _objectWithoutProperties(props, _excluded$32);
+	const { as = "th", children, shouldShowTooltipOnHover = false, tooltipProps, tooltipText = "", tooltipSubtitle, hover = false } = props, rest = _objectWithoutProperties(props, _excluded$34);
 	if (shouldShowTooltipOnHover && hover) return /* @__PURE__ */ jsx(Tooltip, _objectSpread2(_objectSpread2({
 		arrow: true,
 		placement: "top-start",
@@ -9646,106 +9643,238 @@ const CellHeader = forwardRef((props, ref) => {
 	}, rest), {}, { children: /* @__PURE__ */ jsx(CellHeaderContent, _objectSpread2(_objectSpread2({ hover }, props), {}, { children })) }));
 });
 //#endregion
-//#region src/core/Chip/style.ts
-const small = (props) => {
-	const spaces = getSpaces(props);
-	return /*#__PURE__*/ css("height:", spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;.MuiChip-label{", fontCapsXxxxs(props), " padding:0;}");
+//#region src/core/Tag/style.ts
+function _EMOTION_STRINGIFIED_CSS_ERROR__$19() {
+	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const TAG_LABEL_TEXT_CLASS = "SdsTag-labelText";
+const TAG_LINK_ICON_CLASS = "SdsTag-linkIcon";
+const TAG_HEIGHTS = {
+	medium: 24,
+	small: 20
 };
-const medium = (props) => {
-	const spaces = getSpaces(props);
-	const colors = getColors(props);
-	return /*#__PURE__*/ css("margin:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;height:24px;background-color:", colors === null || colors === void 0 ? void 0 : colors.blue[400], ";&:hover{background-color:", colors === null || colors === void 0 ? void 0 : colors.blue[500], ";}&:active{background-color:", colors === null || colors === void 0 ? void 0 : colors.blue[600], ";}.MuiChip-label{", fontHeaderXs(props), " color:white;padding-left:", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;}.MuiChip-deleteIcon{color:white;padding-right:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;margin:0 0 0 -", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;height:", spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;width:", spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;&:hover,&:focus-visible{color:white;}}");
+const OUTLINE_BORDER_OPACITY = {
+	dark: .56,
+	light: .28
 };
-const rounded$2 = (props) => {
-	const corners = getCorners(props);
-	return /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.rounded, "px;");
+/**
+* MUI's color helpers throw on anything they cannot parse, such as a named
+* color or a CSS variable, so a custom color they cannot read is used as given.
+*/
+function safely(transform, color, amount) {
+	try {
+		return transform(color, amount);
+	} catch (_unused) {
+		return color;
+	}
+}
+function disabledColors(props, sdsStyle) {
+	var _getSemanticColors;
+	const base = (_getSemanticColors = getSemanticColors(props)) === null || _getSemanticColors === void 0 ? void 0 : _getSemanticColors.base;
+	return {
+		background: sdsStyle === "solid" ? base === null || base === void 0 ? void 0 : base.fillDisabled : "transparent",
+		border: sdsStyle === "outline" ? base === null || base === void 0 ? void 0 : base.borderPrimaryDisabled : void 0,
+		icon: base === null || base === void 0 ? void 0 : base.ornamentDisabled,
+		label: base === null || base === void 0 ? void 0 : base.textDisabled
+	};
+}
+function intentColors(props, intent, sdsStyle) {
+	var _semanticColors$accen, _semanticColors$inten, _getColors;
+	const semanticColors = getSemanticColors(props);
+	const base = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base;
+	const palette = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent];
+	const disabled = disabledColors(props, sdsStyle);
+	if (sdsStyle === "solid") {
+		const onInteraction = {
+			icon: base === null || base === void 0 ? void 0 : base.ornamentPrimaryInverse,
+			label: base === null || base === void 0 ? void 0 : base.textPrimaryInverse
+		};
+		return {
+			disabled,
+			hover: _objectSpread2({ background: palette === null || palette === void 0 ? void 0 : palette.fillInteraction }, onInteraction),
+			pressed: _objectSpread2({ background: palette === null || palette === void 0 ? void 0 : palette.fillPressed }, onInteraction),
+			rest: {
+				background: palette === null || palette === void 0 ? void 0 : palette.fillPrimary,
+				icon: base === null || base === void 0 ? void 0 : base.ornamentOnFill,
+				label: base === null || base === void 0 ? void 0 : base.textOnFill
+			}
+		};
+	}
+	const background = intent === "accent" ? semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.surfaceSecondary : semanticColors === null || semanticColors === void 0 || (_semanticColors$inten = semanticColors[intent]) === null || _semanticColors$inten === void 0 ? void 0 : _semanticColors$inten.fillSecondary;
+	const borderBase = intent === "accent" ? (_getColors = getColors(props)) === null || _getColors === void 0 ? void 0 : _getColors.indigo[600] : palette === null || palette === void 0 ? void 0 : palette.foreground;
+	const opacity = OUTLINE_BORDER_OPACITY[getMode(props)];
+	const stateOf = (color) => ({
+		background,
+		border: color,
+		icon: color,
+		label: color
+	});
+	return {
+		disabled,
+		hover: stateOf(palette === null || palette === void 0 ? void 0 : palette.foregroundInteraction),
+		pressed: stateOf(palette === null || palette === void 0 ? void 0 : palette.foregroundPressed),
+		rest: _objectSpread2(_objectSpread2({}, stateOf(palette === null || palette === void 0 ? void 0 : palette.foreground)), {}, { border: borderBase ? safely(alpha, borderBase, opacity) : void 0 })
+	};
+}
+function customColors(props, [label, background, icon = label], sdsStyle) {
+	const disabled = disabledColors(props, sdsStyle);
+	if (sdsStyle === "solid") {
+		const rest = {
+			background,
+			icon,
+			label
+		};
+		return {
+			disabled,
+			hover: _objectSpread2(_objectSpread2({}, rest), {}, { background: safely(emphasize, background, .15) }),
+			pressed: _objectSpread2(_objectSpread2({}, rest), {}, { background: safely(emphasize, background, .3) }),
+			rest
+		};
+	}
+	const opacity = OUTLINE_BORDER_OPACITY[getMode(props)];
+	const rest = {
+		background,
+		border: safely(alpha, label, opacity),
+		icon,
+		label
+	};
+	return {
+		disabled,
+		hover: _objectSpread2(_objectSpread2({}, rest), {}, { border: label }),
+		pressed: _objectSpread2(_objectSpread2({}, rest), {}, {
+			background: safely(emphasize, background, .15),
+			border: label
+		}),
+		rest
+	};
+}
+function stateColors({ background, border, icon, label }) {
+	return /*#__PURE__*/ css("background-color:", background, ";box-shadow:", border ? `inset 0 0 0 1px ${border}` : "none", ";color:", label, ";.MuiChip-label{color:", label, ";}.MuiChip-icon,.MuiChip-deleteIcon,.", TAG_LINK_ICON_CLASS, "{color:", icon, ";fill:", icon, ";}");
+}
+function interactiveStyles(props, colors) {
+	return /*#__PURE__*/ css("cursor:pointer;", focusVisibleA11yStyle(props), " &:hover,&.Mui-focusVisible{", stateColors(colors.hover), ";}&:active{", stateColors(colors.pressed), ";}");
+}
+var _ref$3 = {
+	name: "7khdib",
+	styles: ".MuiChip-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;position:absolute;width:1px;}",
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$19
 };
-const square$2 = (props) => {
+function sizeStyles(props) {
+	const { iconOnly = false, size = "medium" } = props;
+	const spaces = getSpaces(props);
 	const corners = getCorners(props);
-	return /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.m, "px;");
-};
-const success = (props) => {
-	return createStatusCss(props, "success");
-};
-const error = (props) => {
-	return createStatusCss(props, "error");
-};
-const beta = (props) => {
-	return createStatusCss(props, "beta");
-};
-const pending = (props) => {
-	return createStatusCss(props, "pending");
-};
-const warning = (props) => {
-	return createStatusCss(props, "warning");
-};
-const info = (props) => {
-	return createStatusCss(props, "info");
-};
-function createStatusCss(props, status) {
-	var _semanticColors$beta, _semanticColors$beta2, _semanticColors$negat, _semanticColors$negat2, _semanticColors$info, _semanticColors$info2, _semanticColors$neutr, _semanticColors$neutr2, _semanticColors$posit, _semanticColors$posit2, _semanticColors$notic;
-	const colors = getColors(props);
-	const semanticColors = getSemanticColors(props);
-	if (!colors) return;
-	const statusColors = {
-		beta: {
-			dark: semanticColors === null || semanticColors === void 0 || (_semanticColors$beta = semanticColors.beta) === null || _semanticColors$beta === void 0 ? void 0 : _semanticColors$beta.foreground,
-			light: semanticColors === null || semanticColors === void 0 || (_semanticColors$beta2 = semanticColors.beta) === null || _semanticColors$beta2 === void 0 ? void 0 : _semanticColors$beta2.surfaceSecondary
-		},
-		error: {
-			dark: semanticColors === null || semanticColors === void 0 || (_semanticColors$negat = semanticColors.negative) === null || _semanticColors$negat === void 0 ? void 0 : _semanticColors$negat.foreground,
-			light: semanticColors === null || semanticColors === void 0 || (_semanticColors$negat2 = semanticColors.negative) === null || _semanticColors$negat2 === void 0 ? void 0 : _semanticColors$negat2.surfaceSecondary
-		},
-		info: {
-			dark: semanticColors === null || semanticColors === void 0 || (_semanticColors$info = semanticColors.info) === null || _semanticColors$info === void 0 ? void 0 : _semanticColors$info.foreground,
-			light: semanticColors === null || semanticColors === void 0 || (_semanticColors$info2 = semanticColors.info) === null || _semanticColors$info2 === void 0 ? void 0 : _semanticColors$info2.surfaceSecondary
-		},
-		pending: {
-			dark: semanticColors === null || semanticColors === void 0 || (_semanticColors$neutr = semanticColors.neutral) === null || _semanticColors$neutr === void 0 ? void 0 : _semanticColors$neutr.foreground,
-			light: semanticColors === null || semanticColors === void 0 || (_semanticColors$neutr2 = semanticColors.neutral) === null || _semanticColors$neutr2 === void 0 ? void 0 : _semanticColors$neutr2.surfaceSecondary
-		},
-		success: {
-			dark: semanticColors === null || semanticColors === void 0 || (_semanticColors$posit = semanticColors.positive) === null || _semanticColors$posit === void 0 ? void 0 : _semanticColors$posit.foreground,
-			light: semanticColors === null || semanticColors === void 0 || (_semanticColors$posit2 = semanticColors.positive) === null || _semanticColors$posit2 === void 0 ? void 0 : _semanticColors$posit2.surfaceSecondary
-		},
-		warning: {
-			dark: colors === null || colors === void 0 ? void 0 : colors.yellow[700],
-			light: semanticColors === null || semanticColors === void 0 || (_semanticColors$notic = semanticColors.notice) === null || _semanticColors$notic === void 0 ? void 0 : _semanticColors$notic.surfaceSecondary
-		}
-	}[status];
-	return /*#__PURE__*/ css("background-color:", statusColors.light, ";.MuiChip-label{color:", statusColors.dark, ";}");
-}
-const statusToCss = {
-	beta,
-	error,
-	info,
-	pending,
-	success,
-	warning
-};
-const doNotForwardProps$31 = ["isRounded"];
-const StyledChip = /*#__PURE__*/ _styled(Chip$1, {
+	const iconSizes = getIconSizes(props);
+	const height = TAG_HEIGHTS[size];
+	const iconSize = size === "small" ? iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xxs : iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs;
+	return /*#__PURE__*/ css(size === "small" ? fontBodyXxxxs(props) : fontBodyXs(props), " gap:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;height:", height, "px;", iconOnly ? /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.m, "px;padding:0;width:", height, "px;") : /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.rounded, "px;padding:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;"), " .MuiChip-icon,.MuiChip-deleteIcon,.", TAG_LINK_ICON_CLASS, "{flex-shrink:0;height:", iconSize === null || iconSize === void 0 ? void 0 : iconSize.height, "px;margin:0;width:", iconSize === null || iconSize === void 0 ? void 0 : iconSize.width, "px;}.MuiChip-label{align-items:center;display:flex;gap:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;min-width:0;overflow:hidden;padding:0;}.", TAG_LABEL_TEXT_CLASS, "{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", iconOnly && _ref$3, ";");
+}
+const doNotForwardProps$31 = [
+	"iconOnly",
+	"isInteractive",
+	"sdsStyle",
+	"tagColor"
+];
+const StyledTag$4 = /*#__PURE__*/ _styled(Chip$1, {
 	shouldForwardProp: (prop) => !doNotForwardProps$31.includes(prop),
-	target: "edxh7710"
-})("border:none;", (props) => {
-	const { size, status, isRounded } = props;
-	return /*#__PURE__*/ css(isRounded && rounded$2(props), " ", !isRounded && square$2(props), " ", size === "small" && small(props), " ", size === "medium" && medium(props), " ", status && statusToCss[status](props), ";");
+	target: "esrfbz40"
+})("border:none;box-sizing:border-box;max-width:100%;position:relative;", (props) => {
+	const { isInteractive = false, sdsStyle = "solid", tagColor = "neutral" } = props;
+	const colors = Array.isArray(tagColor) ? customColors(props, tagColor, sdsStyle) : intentColors(props, tagColor, sdsStyle);
+	return /*#__PURE__*/ css(sizeStyles(props), " ", stateColors(colors.rest), " ", isInteractive && interactiveStyles(props, colors), " &.Mui-disabled{opacity:1;", stateColors(colors.disabled), ";}");
+}, ";");
+//#endregion
+//#region src/core/Tag/index.tsx
+const _excluded$33 = [
+	"clickable",
+	"color",
+	"component",
+	"href",
+	"icon",
+	"iconOnly",
+	"label",
+	"onClick",
+	"rel",
+	"sdsStyle",
+	"showLinkIcon",
+	"size",
+	"target"
+];
+/**
+* @see https://mui.com/material-ui/react-chip/
+*/
+const Tag = forwardRef((props, ref) => {
+	const { clickable, color = "neutral", component, href, icon, iconOnly = false, label, onClick, rel, sdsStyle = "solid", showLinkIcon = false, size = "medium", target } = props, rest = _objectWithoutProperties(props, _excluded$33);
+	const isLink = Boolean(href);
+	const isIconOnly = iconOnly && Boolean(icon);
+	const isClickable = clickable !== null && clickable !== void 0 ? clickable : isLink || Boolean(onClick) ? true : void 0;
+	const linkProps = isLink ? {
+		href,
+		rel: rel !== null && rel !== void 0 ? rel : target === "_blank" ? "noopener noreferrer" : void 0,
+		target
+	} : {};
+	return /* @__PURE__ */ jsx(StyledTag$4, _objectSpread2(_objectSpread2(_objectSpread2({ ref }, rest), linkProps), {}, {
+		clickable: isClickable,
+		color: "default",
+		component: component !== null && component !== void 0 ? component : isLink ? "a" : void 0,
+		icon,
+		iconOnly: isIconOnly,
+		isInteractive: Boolean(isClickable),
+		label: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: TAG_LABEL_TEXT_CLASS,
+			children: label
+		}), showLinkIcon && !isIconOnly && /* @__PURE__ */ jsx(ArrowUpRightIcon, {
+			weight: "bold",
+			"aria-hidden": true,
+			className: "SdsTag-linkIcon"
+		})] }),
+		onClick,
+		sdsStyle,
+		size,
+		tagColor: color,
+		variant: "filled"
+	}));
+});
+//#endregion
+//#region src/core/Chip/style.ts
+const StyledChip = /*#__PURE__*/ _styled(Tag, { target: "edxh7710" })((props) => {
+	const spaces = getSpaces(props);
+	const corners = getCorners(props);
+	return /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.m, "px;padding:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;");
 }, ";");
 //#endregion
 //#region src/core/Chip/index.tsx
+const _excluded$32 = [
+	"aria-label",
+	"label",
+	"onClick",
+	"onDelete",
+	"sdsStyle"
+];
 /**
 * @see https://mui.com/material-ui/react-chip/
-*
-* @deprecated
-* This component is deprecated and will be removed in the next major version.
-* Please use `Tag` or `TagFilter` instead.
 */
-const Chip = (props) => {
-	showWarningIfFirstOccurence("chipDeprecated");
-	const { onDelete } = props;
-	if (onDelete) return /* @__PURE__ */ jsx(StyledChip, _objectSpread2({ deleteIcon: /* @__PURE__ */ jsx(Clear, {}) }, props));
-	return /* @__PURE__ */ jsx(StyledChip, _objectSpread2({}, props));
-};
+const Chip = forwardRef((props, ref) => {
+	const { "aria-label": ariaLabel, label, onClick, onDelete, sdsStyle = "solid" } = props, rest = _objectWithoutProperties(props, _excluded$32);
+	const handleClick = (event) => {
+		onClick === null || onClick === void 0 || onClick(event);
+		onDelete(event);
+	};
+	return /* @__PURE__ */ jsx(StyledChip, _objectSpread2(_objectSpread2({
+		ref,
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `Remove ${label}`
+	}, rest), {}, {
+		color: "accent",
+		deleteIcon: /* @__PURE__ */ jsx(Icon, {
+			sdsIcon: "XMark",
+			sdsSize: "xs"
+		}),
+		label,
+		onClick: handleClick,
+		onDelete,
+		sdsStyle,
+		size: "medium"
+	}));
+});
 //#endregion
 //#region src/core/DropdownMenu/style.ts
 const doNotForwardProps$30 = [
@@ -10603,154 +10732,6 @@ const Dropdown = (props) => {
 	}) : null }))] });
 };
 //#endregion
-//#region src/core/Tag/style.ts
-const tagSizeS = (props) => {
-	var _semanticColors$base;
-	const spaces = getSpaces(props);
-	const iconSizes = getIconSizes(props);
-	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css("height:unset;.MuiChip-label{", fontBodyXxxs(props), " padding:0;}.MuiSvgIcon-root{height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;margin:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 0;}.MuiChip-deleteIcon{", fontHeaderXs(props), " color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.ornamentPrimaryInverse, ";margin:0 0 0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;}");
-};
-const tagSizeL = (props) => {
-	var _semanticColors$base2;
-	const spaces = getSpaces(props);
-	const iconSizes = getIconSizes(props);
-	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css("height:unset;.MuiChip-label{", fontBodyXs(props), " padding:0;}.MuiSvgIcon-root{height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;margin:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 0px;}.MuiChip-deleteIcon{", fontHeaderXs(props), " color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.ornamentPrimaryInverse, ";margin:0 0 0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;}");
-};
-const rounded = (props) => {
-	const corners = getCorners(props);
-	const spaces = getSpaces(props);
-	const { sdsSize = "s", icon } = props;
-	const topBottomPadding = sdsSize === "s" ? spaces === null || spaces === void 0 ? void 0 : spaces.xxxs : icon ? spaces === null || spaces === void 0 ? void 0 : spaces.xxs : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
-	const rightPadding = sdsSize === "l" && icon ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
-	return /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.rounded, "px;padding:", topBottomPadding, "px ", rightPadding, "px ", topBottomPadding, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;&:after{content:\"\";border-radius:", corners === null || corners === void 0 ? void 0 : corners.rounded, "px;}");
-};
-const square = (props) => {
-	const corners = getCorners(props);
-	const spaces = getSpaces(props);
-	const { sdsSize = "s", icon } = props;
-	const topBottomPadding = sdsSize === "s" ? spaces === null || spaces === void 0 ? void 0 : spaces.xxxs : icon ? spaces === null || spaces === void 0 ? void 0 : spaces.xxs : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
-	return /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.m, "px;padding:", topBottomPadding, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;&:after{content:\"\";border-radius:", corners === null || corners === void 0 ? void 0 : corners.m, "px;}");
-};
-const withHover = (props) => {
-	var _semanticColors$base3;
-	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css("&:hover{cursor:pointer;}&:hover,&:focus-visible{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textPrimaryInverse, ";}");
-};
-const primary = (props) => {
-	return createTypeCss(props, "primary");
-};
-const secondary = (props) => {
-	return createTypeCss(props, "secondary");
-};
-function generatePrimaryTagColors(intent, colors, semanticColors) {
-	var _semanticColors$base4, _semanticColors$base5, _semanticColors$neutr;
-	const intentColors = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent || "neutral"];
-	const hasCustomColors = colors.length >= 2;
-	return {
-		background: hasCustomColors ? colors[1] : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPrimary,
-		backgroundClicked: hasCustomColors ? darken(colors[1], .3) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPressed,
-		backgroundHover: hasCustomColors ? darken(colors[1], .15) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillInteraction,
-		iconColor: hasCustomColors ? colors[2] : semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.ornamentOnFill,
-		label: colors.length > 0 ? colors[0] : semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.textOnFill,
-		borderColor: alpha((semanticColors === null || semanticColors === void 0 || (_semanticColors$neutr = semanticColors.neutral) === null || _semanticColors$neutr === void 0 ? void 0 : _semanticColors$neutr.foreground) || "#000", .6)
-	};
-}
-function getSecondaryBorderColor(effectiveIntent, theme, intentColors) {
-	if (!theme || !theme.palette) return alpha((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .6);
-	if (effectiveIntent === "negative" && theme.palette.mode === "dark") return alpha((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .65);
-	if (effectiveIntent === "notice" && theme.palette.mode === "light") return alpha((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .85);
-	return alpha((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .6);
-}
-function generateSecondaryTagColors(intent, colors, semanticColors, theme = defaultTheme) {
-	const effectiveIntent = intent || "neutral";
-	const intentColors = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[effectiveIntent];
-	const hasCustomColors = colors.length >= 2;
-	return {
-		background: hasCustomColors ? colors[1] : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillSecondary,
-		backgroundClicked: hasCustomColors ? darken(colors[1], .3) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPressed,
-		backgroundHover: hasCustomColors ? darken(colors[1], .15) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillInteraction,
-		iconColor: hasCustomColors ? colors[2] : intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground,
-		label: colors.length > 0 ? colors[0] : intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground,
-		borderColor: hasCustomColors ? alpha(colors[1], .6) : getSecondaryBorderColor(effectiveIntent, theme, intentColors)
-	};
-}
-function createTypeCss(props, type) {
-	var _semanticColors$base6, _semanticColors$base7;
-	const semanticColors = getSemanticColors(props);
-	const intent = typeof props.tagColor === "string" ? props.tagColor : null;
-	const colors = Array.isArray(props.tagColor) ? [...props.tagColor] : [];
-	const typeColors = {
-		primary: generatePrimaryTagColors(intent, colors, semanticColors),
-		secondary: generateSecondaryTagColors(intent, colors, semanticColors, props.theme)
-	}[type];
-	return /*#__PURE__*/ css(focusVisibleA11yStyle(props), " ", type === "secondary" && /*#__PURE__*/ css("box-shadow:inset 0 0 0 1px ", typeColors.borderColor, ";"), " background-color:", typeColors.background, ";position:relative;.MuiChip-label{color:", typeColors.label, ";}svg{fill:", typeColors.iconColor, ";}&:hover,&:active{box-shadow:none;.MuiChip-label{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.textPrimaryInverse, ";}svg{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base7 = semanticColors.base) === null || _semanticColors$base7 === void 0 ? void 0 : _semanticColors$base7.ornamentPrimaryInverse, ";}}&:hover{background-color:", typeColors.backgroundHover, ";}&:active{background-color:", typeColors.backgroundClicked, ";}&.Mui-focusVisible{background-color:", typeColors.backgroundHover, ";}");
-}
-const typeToCss = {
-	primary,
-	secondary
-};
-const doNotForwardProps$27 = [
-	"sdsType",
-	"sdsStyle",
-	"sdsSize",
-	"tagColor",
-	"hover"
-];
-const StyledTag$4 = /*#__PURE__*/ _styled(Chip$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
-	target: "esrfbz40"
-})("border:none;", (props) => {
-	const { hover = true, sdsType, sdsStyle, sdsSize = "s" } = props;
-	const isRounded = sdsStyle === "rounded";
-	const type = sdsType || "primary";
-	return /*#__PURE__*/ css(sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), " ", typeToCss[type](props), " ", isRounded ? rounded(props) : square(props), " ", hover ? withHover(props) : `pointer-events: none;`, ";");
-}, ";");
-//#endregion
-//#region src/core/Tag/index.tsx
-/**
-* @see https://mui.com/material-ui/react-chip/
-*
-* @props color: {string}                   - applies color for tag based on default theme color values
-*               [string, string]           - applies custom colors for [font, background]
-*               [string, string, string]   - applies custom colors for [font, background, icon]
-*/
-const Tag = (props) => {
-	const { color } = props;
-	return /* @__PURE__ */ jsx(StyledTag$4, _objectSpread2(_objectSpread2({ tagColor: color }, props), {}, { color: "primary" }));
-};
-//#endregion
-//#region src/core/TagFilter/style.ts
-const StyledTag$3 = /*#__PURE__*/ _styled(Tag, { target: "e19crzu0" })((props) => {
-	var _semanticColors$accen, _iconSizes$xs, _iconSizes$xs2, _iconSizes$xs3, _iconSizes$xs4, _semanticColors$accen2, _semanticColors$base, _semanticColors$base2, _semanticColors$accen3;
-	const spaces = getSpaces(props);
-	const iconSizes = getIconSizes(props);
-	const semanticColors = getSemanticColors(props);
-	return /*#__PURE__*/ css("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.fillPrimary, ";.MuiChip-label{", fontHeaderXs(props), " z-index:auto;}.MuiChip-deleteIcon{margin:0 0 0 ", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;width:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs = iconSizes.xs) === null || _iconSizes$xs === void 0 ? void 0 : _iconSizes$xs.width, "px!important;height:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs2 = iconSizes.xs) === null || _iconSizes$xs2 === void 0 ? void 0 : _iconSizes$xs2.height, "px!important;}.MuiSvgIcon-root{margin:0;width:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs3 = iconSizes.xs) === null || _iconSizes$xs3 === void 0 ? void 0 : _iconSizes$xs3.width, "px!important;height:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs4 = iconSizes.xs) === null || _iconSizes$xs4 === void 0 ? void 0 : _iconSizes$xs4.height, "px!important;}svg{z-index:auto;}&:hover,&:focus,&:focus-within{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.fillInteraction, ";.MuiChip-label{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimaryInverse, "!important;}.MuiChip-deleteIcon svg{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.ornamentPrimaryInverse, "!important;}}&:active{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen3 = semanticColors.accent) === null || _semanticColors$accen3 === void 0 ? void 0 : _semanticColors$accen3.fillPressed, ";}&:after{content:\"\";display:none;}");
-}, ";");
-//#endregion
-//#region src/core/TagFilter/index.tsx
-/**
-* @see https://mui.com/material-ui/react-chip/
-*/
-const TagFilter = (props) => {
-	return /* @__PURE__ */ jsx(StyledTag$3, _objectSpread2(_objectSpread2({ role: "none presentation" }, props), {}, {
-		deleteIcon: /* @__PURE__ */ jsx(Button, {
-			"aria-label": "Delete Tag",
-			sdsStyle: "minimal",
-			sdsType: "secondary",
-			size: "medium",
-			backgroundOnHover: false,
-			children: /* @__PURE__ */ jsx(Icon, {
-				sdsIcon: "XMark",
-				sdsSize: "s"
-			})
-		}),
-		color: "info"
-	}));
-};
-//#endregion
 //#region src/core/ComplexFilter/utils.ts
 const checkIfSingleColumn = (value) => {
 	return value && value.name || Array.isArray(value) && value.length > 0 && value[0].name;
@@ -10782,10 +10763,9 @@ const Chips = ({ value, multiple = false, onDelete }) => {
 	if (!value) return null;
 	const chipLabels = checkIfSingleColumn(value) ? getSingleColumnLabels(value, multiple) : getMultiColumnLabels(value, multiple);
 	if (chipLabels.length === 0) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: chipLabels.map((label) => /* @__PURE__ */ jsx(TagFilter, {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: chipLabels.map((label) => /* @__PURE__ */ jsx(Chip, {
 		label,
-		onDelete: () => onDelete(label),
-		onClick: () => onDelete(label)
+		onDelete: () => onDelete(label)
 	}, label)) });
 };
 //#endregion
@@ -10918,7 +10898,7 @@ const ComplexFilter = (_ref) => {
 function _EMOTION_STRINGIFIED_CSS_ERROR__$16() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const doNotForwardProps$26 = [
+const doNotForwardProps$27 = [
 	"visualElement",
 	"sdsType",
 	"imagePosition",
@@ -10948,7 +10928,7 @@ const getShowDecorativeBorder = (visualElementType, boundingBox, decorativeBorde
 	return visualElementType === "image" ? boundingBox && decorativeBorder && (imagePadding && imagePosition === "left" || imagePosition === "right") : boundingBox && decorativeBorder;
 };
 const StyledCard = /*#__PURE__*/ _styled(Card, {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq5"
 })((props) => {
 	var _semanticColors$base, _semanticColors$base2, _semanticColors$accen;
@@ -10962,7 +10942,7 @@ const StyledCard = /*#__PURE__*/ _styled(Card, {
 	return /*#__PURE__*/ css("position:relative;display:flex;background-color:transparent;background-image:none;flex-direction:", flexDirection, ";overflow:visible!important;box-shadow:none;border-radius:", corners === null || corners === void 0 ? void 0 : corners.xl, "px;.MuiCardActionArea-focusHighlight{background:transparent;}&:hover,&:active{box-shadow:", clickableCard ? shadows === null || shadows === void 0 ? void 0 : shadows.l : shadows === null || shadows === void 0 ? void 0 : shadows.none, "!important;}", boundingBox && /*#__PURE__*/ css("border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.borderSecondary, ";background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundPrimary, ";"), " ", showDecorativeBorder && /*#__PURE__*/ css("&:before{content:\"\";position:absolute;background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.foreground, ";z-index:10;", sdsType === "wide" && /*#__PURE__*/ css("top:-1px;bottom:-1px;left:-1px;width:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;border-top-left-radius:", corners === null || corners === void 0 ? void 0 : corners.xl, "px;border-bottom-left-radius:", corners === null || corners === void 0 ? void 0 : corners.xl, "px;"), " ", sdsType === "narrow" && /*#__PURE__*/ css("height:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;top:-1px;left:-1px;right:-1px;border-top-left-radius:", corners === null || corners === void 0 ? void 0 : corners.xl, "px;border-top-right-radius:", corners === null || corners === void 0 ? void 0 : corners.xl, "px;"), ";}"), " ", sdsType === "wide" && showDecorativeBorder && /*#__PURE__*/ css("border-top-left-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;border-bottom-left-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;"), " ", sdsType === "narrow" && showDecorativeBorder && /*#__PURE__*/ css("border-top-left-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;border-top-right-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;"), ";");
 }, ";");
 const StyledCardActionArea = /*#__PURE__*/ _styled(Button$2, {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq4"
 })((props) => {
 	var _semanticColors$base3, _semanticColors$base4;
@@ -10990,7 +10970,7 @@ const StyledCardActionArea = /*#__PURE__*/ _styled(Button$2, {
     `;
 }, ";");
 const StyledIconMediaWrapper = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq3"
 })((props) => {
 	const { boundingBox = true } = props;
@@ -10998,7 +10978,7 @@ const StyledIconMediaWrapper = /*#__PURE__*/ _styled("div", {
 	return /*#__PURE__*/ css(boundingBox ? /*#__PURE__*/ css("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px 0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;") : /*#__PURE__*/ css("padding-right:", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;"), ";");
 }, ";");
 const StyledCardContent = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq2"
 })((props) => {
 	const { boundingBox = true, sdsType = "wide", visualElementType } = props;
@@ -11007,7 +10987,7 @@ const StyledCardContent = /*#__PURE__*/ _styled("div", {
 	return /*#__PURE__*/ css("display:flex;flex-direction:column;min-width:100px;width:100%;height:100%;", boundingBox ? /*#__PURE__*/ css("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;") : /*#__PURE__*/ css("padding:", NoBoundingBoxPadding, ";"), ";");
 }, ";");
 const StyledContentCardBody = /*#__PURE__*/ _styled(CardContent, {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq1"
 })(fontBodyS, " ", (props) => {
 	var _semanticColors$base5;
@@ -11027,7 +11007,7 @@ const StyledCardContentAligner = /*#__PURE__*/ _styled("div", { target: "e1dovfy
 });
 //#endregion
 //#region src/core/ContentCard/components/ContentCardTitle/style.ts
-const doNotForwardProps$25 = [
+const doNotForwardProps$26 = [
 	"visualElement",
 	"sdsType",
 	"imagePosition",
@@ -11038,7 +11018,7 @@ const doNotForwardProps$25 = [
 	"metadataText",
 	"contentBlock"
 ];
-const StyledTitleWrapper = styled("div", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledTitleWrapper = styled("div", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${(props) => {
 	const spaces = getSpaces(props);
 	return `
@@ -11048,7 +11028,7 @@ const StyledTitleWrapper = styled("div", { shouldForwardProp: (prop) => !doNotFo
     `;
 }}
 `;
-const StyledOverlineText = styled("p", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledOverlineText = styled("p", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${fontCapsXxxs}
   ${(props) => {
 	var _semanticColors$base;
@@ -11059,7 +11039,7 @@ const StyledOverlineText = styled("p", { shouldForwardProp: (prop) => !doNotForw
     `;
 }}
 `;
-const StyledTitleText = styled("p", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledTitleText = styled("p", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${fontHeaderXl}
   ${(props) => {
 	var _semanticColors$base2;
@@ -11070,7 +11050,7 @@ const StyledTitleText = styled("p", { shouldForwardProp: (prop) => !doNotForward
     `;
 }}
 `;
-const StyledSubtitleText = styled("p", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledSubtitleText = styled("p", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${fontHeaderM}
   ${(props) => {
 	var _semanticColors$base3;
@@ -11081,7 +11061,7 @@ const StyledSubtitleText = styled("p", { shouldForwardProp: (prop) => !doNotForw
     `;
 }}
 `;
-const StyledMetadataText = styled("p", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledMetadataText = styled("p", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${fontBodyXxs}
   ${(props) => {
 	var _semanticColors$base4;
@@ -11137,9 +11117,9 @@ const ContentCardTitle = forwardRef(function ContentCardTitle(props, ref) {
 });
 //#endregion
 //#region src/core/ContentCard/components/ContentCardActions/style.ts
-const doNotForwardProps$24 = ["buttonsPosition"];
+const doNotForwardProps$25 = ["buttonsPosition"];
 const StyledCardActions = /*#__PURE__*/ _styled(CardActions, {
-	shouldForwardProp: (prop) => !doNotForwardProps$24.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop),
 	target: "ewfyato0"
 })((props) => {
 	const { buttonsPosition = "left" } = props;
@@ -11210,7 +11190,7 @@ const ContentCardActions = forwardRef(function ContentCardActions(props, ref) {
 });
 //#endregion
 //#region src/core/ContentCard/components/ContentCardImageMedia/style.ts
-const doNotForwardProps$23 = [
+const doNotForwardProps$24 = [
 	"imagePadding",
 	"boundingBox",
 	"sdsType",
@@ -11218,7 +11198,7 @@ const doNotForwardProps$23 = [
 	"image",
 	"imagePosition"
 ];
-const StyledImageMediaWrapper = styled("div", { shouldForwardProp: (prop) => !doNotForwardProps$23.includes(prop) })`
+const StyledImageMediaWrapper = styled("div", { shouldForwardProp: (prop) => !doNotForwardProps$24.includes(prop) })`
   ${(props) => {
 	const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left" } = props;
 	const spaces = getSpaces(props);
@@ -11393,9 +11373,9 @@ const ContentCard = React.forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/core/Dialog/components/DialogPaper/style.ts
-const doNotForwardProps$22 = ["sdsSize"];
+const doNotForwardProps$23 = ["sdsSize"];
 const StyledPaper$2 = /*#__PURE__*/ _styled(Paper, {
-	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$23.includes(prop),
 	target: "e3jjuqo0"
 })("&{", paperDimensions, " ", (props) => {
 	var _semanticColors$base, _semanticColors$base2;
@@ -11517,9 +11497,9 @@ const CloseButton = forwardRef(function CloseButton(props, ref) {
 });
 //#endregion
 //#region src/core/Dialog/components/DialogTitle/style.ts
-const doNotForwardProps$21 = ["sdsSize"];
+const doNotForwardProps$22 = ["sdsSize"];
 const StyledDialogTitle = /*#__PURE__*/ _styled(DialogTitle$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
 	target: "e18l2rxq3"
 })("padding:0;", (props) => {
 	const { sdsSize } = props;
@@ -11530,7 +11510,7 @@ const StyledDialogTitle = /*#__PURE__*/ _styled(DialogTitle$1, {
     `;
 }, ";");
 const Title = /*#__PURE__*/ _styled(Typography, {
-	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
 	target: "e18l2rxq2"
 })((props) => {
 	var _semanticColors$base;
@@ -11540,7 +11520,7 @@ const Title = /*#__PURE__*/ _styled(Typography, {
 	return [isSmall ? fontHeaderL(props) : fontHeaderXl(props), `color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimary};`];
 }, ";");
 const Subtitle = /*#__PURE__*/ _styled(Typography, {
-	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
 	target: "e18l2rxq1"
 })((props) => {
 	var _semanticColors$base2;
@@ -11553,7 +11533,7 @@ const Subtitle = /*#__PURE__*/ _styled(Typography, {
       `];
 }, ";");
 const Overline = /*#__PURE__*/ _styled(Typography, {
-	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
 	target: "e18l2rxq0"
 })((props) => {
 	var _semanticColors$base3;
@@ -11609,9 +11589,9 @@ const DialogTitle = forwardRef(function DialogTitle(props, ref) {
 });
 //#endregion
 //#region src/core/Dialog/components/DialogActions/style.ts
-const doNotForwardProps$20 = ["buttonPosition", "sdsSize"];
+const doNotForwardProps$21 = ["buttonPosition", "sdsSize"];
 const StyledDialogActions = /*#__PURE__*/ _styled(DialogActions$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$20.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
 	target: "esa0jqu0"
 })("padding:0;", (props) => {
 	const spaces = getSpaces(props);
@@ -11681,9 +11661,9 @@ const Dialog = forwardRef(function Dialog(props, ref) {
 });
 //#endregion
 //#region src/core/Dialog/components/DialogContent/style.ts
-const doNotForwardProps$19 = ["sdsSize"];
+const doNotForwardProps$20 = ["sdsSize"];
 const StyledDialogContent = /*#__PURE__*/ _styled(DialogContent, {
-	shouldForwardProp: (prop) => !doNotForwardProps$19.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$20.includes(prop),
 	target: "e1ub36ac0"
 })(fontBodyS, " padding:0;");
 //#endregion
@@ -11741,7 +11721,7 @@ const overlayContentPositionJustifyMapping = {
 function _EMOTION_STRINGIFIED_CSS_ERROR__$15() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const doNotForwardProps$18 = [
+const doNotForwardProps$19 = [
 	"heroHeight",
 	"overlayContainerMinMargin",
 	"backgroundFillColor",
@@ -11769,7 +11749,7 @@ const getResponsivePadding = (props) => {
 	return /*#__PURE__*/ css("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xxxl, "px ", (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.small) || HeroMargins.SMALL, ";", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.up("md"), "{padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xxxl, "px ", (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.medium) || HeroMargins.MEDIUM, ";}", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.up("lg"), "{padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xxxl, "px ", (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.large) || HeroMargins.LARGE, ";}");
 };
 const StyledHeroContainer = /*#__PURE__*/ _styled("section", {
-	shouldForwardProp: (prop) => !doNotForwardProps$18.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$19.includes(prop),
 	target: "e1wdq27g10"
 })((props) => {
 	const { heroHeight = "fit-content", overlayContentPosition, backgroundFillColor } = props;
@@ -12924,15 +12904,56 @@ const IntentMessage = (props) => {
 	}, index))] }));
 };
 //#endregion
+//#region src/core/Popover/style.ts
+const StyledPopover = /*#__PURE__*/ _styled(Popover$1, { target: "e89mz5z0" })("& .", popoverClasses.paper, "{", (props) => {
+	var _semanticColors$base, _semanticColors$base2, _props$theme$zIndex$t, _props$theme;
+	const corners = getCorners(props);
+	const shadows = getShadows(props);
+	const semanticColors = getSemanticColors(props);
+	const borders = getBorders(props);
+	const spaces = getSpaces(props);
+	return `
+        background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.surfacePrimary};
+        background-image: none;
+        border-radius: ${corners === null || corners === void 0 ? void 0 : corners.l}px;
+        padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+        border: ${borders === null || borders === void 0 ? void 0 : borders.none};
+        outline: 1px solid ${addOpacityToHex((semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.borderSecondary) || "#000000", 15)};
+        box-shadow: ${shadows === null || shadows === void 0 ? void 0 : shadows.m};
+        box-sizing: border-box;
+        z-index: ${(_props$theme$zIndex$t = props === null || props === void 0 || (_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.zIndex) === null || _props$theme === void 0 ? void 0 : _props$theme.tooltip) !== null && _props$theme$zIndex$t !== void 0 ? _props$theme$zIndex$t : 1400};
+      `;
+}, ";}");
+//#endregion
+//#region src/core/Popover/index.tsx
+/**
+* @see https://mui.com/material-ui/react-popover/
+*/
+const Popover = forwardRef(function Popover(props, ref) {
+	const spaces = getSpaces({ theme: useTheme() });
+	return /* @__PURE__ */ jsx(StyledPopover, _objectSpread2({
+		ref,
+		anchorOrigin: {
+			horizontal: "left",
+			vertical: "bottom"
+		},
+		transformOrigin: {
+			vertical: -((spaces === null || spaces === void 0 ? void 0 : spaces.s) || 8),
+			horizontal: 0
+		}
+	}, props));
+});
+//#endregion
 //#region src/core/Legend/style.ts
-const LegendContainer = /*#__PURE__*/ _styled("div", { target: "ezuih624" })("display:flex;flex-wrap:wrap;align-items:center;", (props) => {
+const LegendContainer = /*#__PURE__*/ _styled("div", { target: "ezuih625" })("display:flex;flex-wrap:wrap;align-items:center;", (props) => {
 	const spaces = getSpaces(props);
 	return `
       column-gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
       row-gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
+      margin: -${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px -${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
     `;
 }, ";");
-const LegendItem = /*#__PURE__*/ _styled("div", { target: "ezuih623" })((props) => {
+const LegendItem = /*#__PURE__*/ _styled("div", { target: "ezuih624" })((props) => {
 	var _semanticColors$base, _semanticColors$base2, _semanticColors$base3, _semanticColors$base4;
 	const { isSelected, disabled, isHovered } = props;
 	const spaces = getSpaces(props);
@@ -12953,13 +12974,13 @@ const LegendItem = /*#__PURE__*/ _styled("div", { target: "ezuih623" })((props)
       }
     `;
 }, ";");
-const LegendIcon = /*#__PURE__*/ _styled("div", { target: "ezuih622" })((props) => {
+const LegendIcon = /*#__PURE__*/ _styled("div", { target: "ezuih623" })((props) => {
 	const { color, isDimmed } = props;
 	const spaces = getSpaces(props);
 	const corners = getCorners(props);
 	return `
-      width: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
-      height: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      width: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
+      height: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
       border-radius: ${corners === null || corners === void 0 ? void 0 : corners.s}px;
       background-color: ${color};
       flex-shrink: 0;
@@ -12968,14 +12989,14 @@ const LegendIcon = /*#__PURE__*/ _styled("div", { target: "ezuih622" })((props)
       margin-right: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
     `;
 }, ";");
-const LegendLabel = /*#__PURE__*/ _styled("span", { target: "ezuih621" })(fontBodyMediumXxxs, " ", (props) => {
+const LegendLabel = /*#__PURE__*/ _styled("span", { target: "ezuih622" })(fontBodyMediumXxxxs, " ", (props) => {
 	var _semanticColors$base5;
 	const semanticColors = getSemanticColors(props);
 	return `
       color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.textPrimary};
     `;
 }, ";");
-const LegendValue = /*#__PURE__*/ _styled("span", { target: "ezuih620" })(fontBodyMediumXxxs, " ", (props) => {
+const LegendValue = /*#__PURE__*/ _styled("span", { target: "ezuih621" })(fontBodyXxxxs, " ", (props) => {
 	var _semanticColors$base6;
 	const semanticColors = getSemanticColors(props);
 	const spaces = getSpaces(props);
@@ -12984,6 +13005,18 @@ const LegendValue = /*#__PURE__*/ _styled("span", { target: "ezuih620" })(fontBo
       margin-left: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
     `;
 }, ";");
+const StyledLegendPopover = /*#__PURE__*/ _styled(Popover, { target: "ezuih620" })("& .", popoverClasses.paper, "{", (props) => {
+	var _spaces$s, _spaces$xxxs, _spaces$s2, _spaces$xxs;
+	const spaces = getSpaces(props);
+	const corners = getCorners(props);
+	const shadows = getShadows(props);
+	return `
+        max-width: 480px;
+        padding: ${((_spaces$s = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _spaces$s !== void 0 ? _spaces$s : 0) + ((_spaces$xxxs = spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) !== null && _spaces$xxxs !== void 0 ? _spaces$xxxs : 0)}px ${((_spaces$s2 = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _spaces$s2 !== void 0 ? _spaces$s2 : 0) + ((_spaces$xxs = spaces === null || spaces === void 0 ? void 0 : spaces.xxs) !== null && _spaces$xxs !== void 0 ? _spaces$xxs : 0)}px;
+        border-radius: ${corners === null || corners === void 0 ? void 0 : corners.xl}px;
+        box-shadow: ${shadows === null || shadows === void 0 ? void 0 : shadows.l};
+      `;
+}, ";}");
 //#endregion
 //#region src/core/Legend/index.tsx
 const _excluded$15 = [
@@ -12995,14 +13028,19 @@ const _excluded$15 = [
 	"showValues",
 	"selectedIndices",
 	"onSelectionChange",
-	"hoveredIndex"
+	"hoveredIndex",
+	"lastItemMenuItems"
 ];
 const Legend = (props) => {
 	var _theme$palette;
-	const { items, colors, onItemMouseEnter, onItemMouseLeave, onItemClick, showValues = false, selectedIndices = [], onSelectionChange, hoveredIndex: externalHoveredIndex } = props, rest = _objectWithoutProperties(props, _excluded$15);
+	const { items, colors, onItemMouseEnter, onItemMouseLeave, onItemClick, showValues = false, selectedIndices = [], onSelectionChange, hoveredIndex: externalHoveredIndex, lastItemMenuItems = [] } = props, rest = _objectWithoutProperties(props, _excluded$15);
 	const theme = useTheme();
 	const [internalHoveredIndex, setInternalHoveredIndex] = useState(null);
+	const [menuAnchor, setMenuAnchor] = useState(null);
 	const hoveredIndex = externalHoveredIndex !== null && externalHoveredIndex !== void 0 ? externalHoveredIndex : internalHoveredIndex;
+	const hasOverflowMenu = lastItemMenuItems.length > 0;
+	const overflowItemIndex = items.length;
+	const isOverflowTrigger = (index) => hasOverflowMenu && index === overflowItemIndex - 1;
 	const handleMouseEnter = (item, index) => {
 		if (item.disabled) return;
 		setInternalHoveredIndex(index);
@@ -13013,8 +13051,13 @@ const Legend = (props) => {
 		setInternalHoveredIndex(null);
 		onItemMouseLeave === null || onItemMouseLeave === void 0 || onItemMouseLeave(item, index);
 	};
-	const handleClick = (item, index) => {
+	const handleClick = (item, index, event) => {
 		if (item.disabled) return;
+		if (isOverflowTrigger(index)) {
+			setMenuAnchor(event.currentTarget);
+			onItemClick === null || onItemClick === void 0 || onItemClick(item, index);
+			return;
+		}
 		if (onSelectionChange) {
 			const isSelected = selectedIndices.includes(index);
 			let newSelectedIndices;
@@ -13024,22 +13067,28 @@ const Legend = (props) => {
 		}
 		onItemClick === null || onItemClick === void 0 || onItemClick(item, index);
 	};
+	const handleMenuSelectionChange = (indices) => {
+		onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange([...selectedIndices.filter((i) => i < overflowItemIndex), ...indices.map((i) => i + overflowItemIndex)]);
+	};
 	const hasSelection = selectedIndices.length > 0;
 	const fallbackColor = theme === null || theme === void 0 || (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.sds) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.base) === null || _theme$palette === void 0 ? void 0 : _theme$palette.ornamentSecondary;
-	return /* @__PURE__ */ jsx(LegendContainer, _objectSpread2(_objectSpread2({}, rest), {}, { children: items.map((item, index) => {
-		const isHovered = hoveredIndex === index;
-		const isSelected = selectedIndices.includes(index);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LegendContainer, _objectSpread2(_objectSpread2({}, rest), {}, { children: items.map((item, index) => {
+		const opensMenu = isOverflowTrigger(index);
+		const isHovered = opensMenu ? hoveredIndex !== null && hoveredIndex >= index : hoveredIndex === index;
+		const isSelected = opensMenu ? selectedIndices.some((i) => i >= index) : selectedIndices.includes(index);
 		const isDimmed = item.disabled ? false : hoveredIndex !== null ? !isHovered && !isSelected : hasSelection && !isSelected;
 		const itemColor = (colors === null || colors === void 0 ? void 0 : colors[index]) || item.color || fallbackColor;
 		return /* @__PURE__ */ jsxs(LegendItem, {
 			onMouseEnter: () => handleMouseEnter(item, index),
 			onMouseLeave: () => handleMouseLeave(item, index),
-			onClick: () => handleClick(item, index),
+			onClick: (event) => handleClick(item, index, event),
 			role: "button",
 			tabIndex: item.disabled ? -1 : 0,
 			"aria-label": `${item.name}${item.value ? `: ${item.value}` : ""}`,
 			"aria-pressed": isSelected,
 			"aria-disabled": item.disabled,
+			"aria-haspopup": opensMenu ? "true" : void 0,
+			"aria-expanded": opensMenu ? menuAnchor !== null : void 0,
 			isSelected,
 			disabled: item.disabled,
 			isHovered,
@@ -13058,14 +13107,28 @@ const Legend = (props) => {
 				})
 			]
 		}, `${item.name}-${index}`);
-	}) }));
+	}) })), hasOverflowMenu && /* @__PURE__ */ jsx(StyledLegendPopover, {
+		open: menuAnchor !== null,
+		anchorEl: menuAnchor,
+		onClose: () => setMenuAnchor(null),
+		children: /* @__PURE__ */ jsx(Legend, {
+			items: lastItemMenuItems,
+			showValues,
+			selectedIndices: selectedIndices.filter((i) => i >= overflowItemIndex).map((i) => i - overflowItemIndex),
+			onSelectionChange: onSelectionChange ? handleMenuSelectionChange : void 0,
+			hoveredIndex: hoveredIndex !== null && hoveredIndex >= overflowItemIndex ? hoveredIndex - overflowItemIndex : null,
+			onItemMouseEnter: (item, index) => handleMouseEnter(item, index + overflowItemIndex),
+			onItemMouseLeave: (item, index) => handleMouseLeave(item, index + overflowItemIndex),
+			onItemClick: onItemClick ? (item, index) => onItemClick(item, index + overflowItemIndex) : void 0
+		})
+	})] });
 };
 //#endregion
 //#region src/core/Link/style.ts
 function _EMOTION_STRINGIFIED_CSS_ERROR__$12() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const doNotForwardProps$17 = [
+const doNotForwardProps$18 = [
 	"sdsStyle",
 	"sdsSize",
 	"fontWeight"
@@ -13091,7 +13154,7 @@ const extraSmallStyle = (props) => {
 };
 const StyledLink = /*#__PURE__*/ _styled(Link$1, {
 	shouldForwardProp: (prop) => {
-		return !doNotForwardProps$17.includes(prop.toString());
+		return !doNotForwardProps$18.includes(prop.toString());
 	},
 	target: "ecbcrkq0"
 })("all:unset;", focusVisibleA11yStyle, " ", (props) => {
@@ -13114,9 +13177,9 @@ const Link = forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/core/List/style.ts
-const doNotForwardProps$16 = ["marginBottom", "ordered"];
+const doNotForwardProps$17 = ["marginBottom", "ordered"];
 const StyledList = /*#__PURE__*/ _styled(List$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$16.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$17.includes(prop),
 	target: "e1ch6n580"
 })(".MuiListSubheader-root{", propsToMarginBottom$1, ";}", (props) => {
 	if (!props.ordered) return "";
@@ -13159,13 +13222,13 @@ const fontBodyS$1 = fontBody("s");
 const fontBodyXs$2 = fontBody("xs");
 const fontBodyXxs$1 = fontBody("xxs");
 const fontBodyXxxs$1 = fontBody("xxxs");
-const doNotForwardProps$15 = [
+const doNotForwardProps$16 = [
 	"marginBottom",
 	"fontSize",
 	"ordered"
 ];
 const StyledListItem = /*#__PURE__*/ _styled(ListItem$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$15.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$16.includes(prop),
 	target: "evkbwij1"
 })(propsToMarginBottom, " ", propsToFontBody, " padding:0;", (props) => {
 	const { ordered } = props;
@@ -13258,9 +13321,9 @@ const tag = (props) => {
 	const semanticColors = getSemanticColors(props);
 	return /*#__PURE__*/ css(fontCapsXxxxs(props), " background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.surfaceSecondary, ";border-radius:", corners === null || corners === void 0 ? void 0 : corners.rounded, "px;color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.foreground, ";svg{path{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen3 = semanticColors.accent) === null || _semanticColors$accen3 === void 0 ? void 0 : _semanticColors$accen3.foreground, ";}}");
 };
-const doNotForwardProps$14 = ["sdsStyle"];
+const doNotForwardProps$15 = ["sdsStyle"];
 const StyledLoadingIndicator = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$14.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$15.includes(prop),
 	target: "egvgfho0"
 })((props) => {
 	const { sdsStyle } = props;
@@ -13327,17 +13390,17 @@ const StyledMenuItem = /*#__PURE__*/ _styled(MenuItem, { target: "ezmiyu43" })({
 	styles: "width:100%",
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$11
 });
-const doNotForwardProps$13 = [
+const doNotForwardProps$14 = [
 	"search",
 	"InputBaseProps",
 	"keepSearchOnSelect"
 ];
 const StyledAutocomplete = /*#__PURE__*/ _styled(Autocomplete$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$14.includes(prop),
 	target: "ezmiyu42"
 })(({ search }) => !search && "height: 0; margin: 0 !important;", " width:100%;");
 const InputBaseWrapper = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$14.includes(prop),
 	target: "ezmiyu41"
 })((props) => {
 	const { search } = props;
@@ -13358,7 +13421,7 @@ const InputBaseWrapper = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledMenuInputSearch = /*#__PURE__*/ _styled(InputSearch, {
-	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$14.includes(prop),
 	target: "ezmiyu40"
 })("&&{margin:0;caret-color:", ({ search }) => search ? "auto" : "transparent", ";.", inputBaseClasses.root, "{width:100%;padding:0;padding-right:14px!important;}}");
 //#endregion
@@ -13442,9 +13505,9 @@ inputMode: search ? "text" : "none" }, params.slotProps.input.ref), {}, { endAdo
 };
 //#endregion
 //#region src/core/NavigationFooter/style.ts
-const doNotForwardProps$12 = ["hasInvertedStyle", "isNarrow"];
+const doNotForwardProps$13 = ["hasInvertedStyle", "isNarrow"];
 const StyledFooter = /*#__PURE__*/ _styled("footer", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi8"
 })((props) => {
 	const { isNarrow } = props;
@@ -13462,7 +13525,7 @@ const StyledFooter = /*#__PURE__*/ _styled("footer", {
     `;
 }, ";");
 const StyledLogoWrapper$1 = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi7"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -13488,7 +13551,7 @@ const StyledLogoWrapper$1 = /*#__PURE__*/ _styled("div", {
         `];
 }, ";}");
 const StyledNavSection = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi6"
 })((props) => {
 	const { isNarrow } = props;
@@ -13509,7 +13572,7 @@ const StyledNavSection = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledTopSection = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi5"
 })((props) => {
 	const { isNarrow } = props;
@@ -13538,7 +13601,7 @@ const StyledTopSection = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledLinkSection = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi4"
 })("align-items:center;display:flex;.MuiDivider-root{height:18px;}", (props) => {
 	const { isNarrow } = props;
@@ -13559,7 +13622,7 @@ const StyledMobileLinkRow = /*#__PURE__*/ _styled("div", { target: "e1s7ulzi3" }
     `;
 }, ";");
 const StyledImageSection = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi2"
 })("align-items:center;display:flex;", (props) => {
 	const { isNarrow } = props;
@@ -13583,7 +13646,7 @@ const StyledMobileImageRow = /*#__PURE__*/ _styled("div", { target: "e1s7ulzi1"
     `;
 }, ";");
 const StyledBottomSection = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi0"
 })("align-items:center;display:flex;justify-content:space-between;a:hover{text-decoration:none;}", (props) => {
 	const { isNarrow } = props;
@@ -13598,7 +13661,7 @@ const StyledBottomSection = /*#__PURE__*/ _styled("div", {
 }, ";");
 //#endregion
 //#region src/core/NavigationFooter/components/NavItem/style.ts
-const doNotForwardProps$11 = ["hasInvertedStyle", "isNarrow"];
+const doNotForwardProps$12 = ["hasInvertedStyle", "isNarrow"];
 const NarrowNavItemLinkStyles = (props) => {
 	const semanticColors = getSemanticColors(props);
 	const spaces = getSpaces(props);
@@ -13617,7 +13680,7 @@ const NarrowNavItemLinkStyles = (props) => {
   `;
 };
 const StyledNavItemLink = /*#__PURE__*/ _styled(Link, {
-	shouldForwardProp: (prop) => !doNotForwardProps$11.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
 	target: "e1esv1b90"
 })(fontBodyMediumS, " ", (props) => {
 	var _semanticColors$base, _semanticColors$base2, _semanticColors$base3, _semanticColors$base4, _semanticColors$accen;
@@ -13657,9 +13720,9 @@ const NavItem = memo(({ item, hasInvertedStyle, isNarrow }) => /* @__PURE__ */ j
 NavItem.displayName = "NavItem";
 //#endregion
 //#region src/core/NavigationFooter/components/FooterLink/style.ts
-const doNotForwardProps$10 = ["hasInvertedStyle", "showDivider"];
+const doNotForwardProps$11 = ["hasInvertedStyle", "showDivider"];
 const StyledLinkItemLink = /*#__PURE__*/ _styled(Link, {
-	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$11.includes(prop),
 	target: "eoqhglp1"
 })(fontBodyXxs, " ", (props) => {
 	var _semanticColors$accen;
@@ -13697,7 +13760,7 @@ const StyledLinkItemLink = /*#__PURE__*/ _styled(Link, {
     `;
 }, ";");
 const StyledDivider$1 = /*#__PURE__*/ _styled(Divider, {
-	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$11.includes(prop),
 	target: "eoqhglp0"
 })((props) => {
 	const semanticColors = getSemanticColors(props);
@@ -13869,9 +13932,9 @@ function NavigationFooter(_ref) {
 				logo,
 				title && /* @__PURE__ */ jsx("p", { children: title }),
 				tag && /* @__PURE__ */ jsx(Tag, {
-					tagColor,
+					color: tagColor,
 					label: tag,
-					hover: false
+					size: "small"
 				})
 			]
 		});
@@ -13933,7 +13996,7 @@ function NavigationFooter(_ref) {
 function _EMOTION_STRINGIFIED_CSS_ERROR__$10() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const doNotForwardProps$9 = [
+const doNotForwardProps$10 = [
 	"hasInvertedStyle",
 	"isNarrow",
 	"primaryNavPosition",
@@ -13951,7 +14014,7 @@ const StyledTopComponentSlot = /*#__PURE__*/ _styled("div", { target: "e1bn4x3g3
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$10
 });
 const StyledAppBar = /*#__PURE__*/ _styled(AppBar, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g34"
 })((props) => {
 	const colors = getSemanticColors(props);
@@ -13977,7 +14040,7 @@ const NarrowToolbar = (props) => {
   `;
 };
 const StyledToolbar = /*#__PURE__*/ _styled(Toolbar, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g33"
 })((props) => {
 	const { isNarrow } = props;
@@ -13993,7 +14056,7 @@ const StyledToolbar = /*#__PURE__*/ _styled(Toolbar, {
     `;
 }, ";");
 const StyledHeaderButton = /*#__PURE__*/ _styled(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
 	target: "e1bn4x3g30"
 })((props) => {
 	var _props$theme, _semanticColors$accen, _semanticColors$accen2, _semanticColors$accen3, _semanticColors$accen4, _semanticColors$base;
@@ -14034,7 +14097,7 @@ const invertedNarrowButtonStyles = (props) => {
   `;
 };
 const StyledNarrowIconButton = /*#__PURE__*/ _styled(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
 	target: "e1bn4x3g29"
 })((props) => {
 	const { hasInvertedStyle, isNarrow } = props;
@@ -14062,7 +14125,7 @@ const invertedWideButtonStyles = (props) => {
   `;
 };
 const StyledWideIconButton = /*#__PURE__*/ _styled(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
 	target: "e1bn4x3g28"
 })((props) => {
 	const { hasInvertedStyle } = props;
@@ -14072,7 +14135,7 @@ const StyledWideIconButton = /*#__PURE__*/ _styled(Button, {
     `;
 }, ";");
 const StyledLogoLinkWrapper = /*#__PURE__*/ _styled(Link, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g27"
 })("align-items:center;display:flex;text-decoration:none!important;", (props) => {
 	const { isNarrow } = props;
@@ -14094,7 +14157,7 @@ const NarrowTitleContainer = () => {
   `;
 };
 const StyledTitleContainer = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g25"
 })("display:flex;align-items:center;", (props) => {
 	const { isNarrow } = props;
@@ -14110,7 +14173,7 @@ const StyledTitleContainer = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledTitleTagWrapper = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g24"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -14126,13 +14189,13 @@ const StyledTitleTagWrapper = /*#__PURE__*/ _styled("div", {
       }
     `;
 }, ";");
-const StyledTag$2 = /*#__PURE__*/ _styled(Tag, { target: "e1bn4x3g23" })({
+const StyledTag$3 = /*#__PURE__*/ _styled(Tag, { target: "e1bn4x3g23" })({
 	name: "ti75j2",
 	styles: "margin:0",
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$10
 });
 const StyledPrimaryNavContainer = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g22"
 })("align-items:center;display:flex;flex-grow:1;", (props) => {
 	const { showSearch, primaryNavPosition, isNarrow } = props;
@@ -14148,7 +14211,7 @@ const StyledPrimaryNavContainer = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledSearch = /*#__PURE__*/ _styled(InputSearch, {
-	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
 	target: "e1bn4x3g21"
 })("margin:0;width:100%;", (props) => {
 	var _semanticColors$base8, _semanticColors$base9, _semanticColors$base10, _semanticColors$base11, _semanticColors$base12, _semanticColors$base13, _semanticColors$base14, _semanticColors$base15, _semanticColors$base16, _semanticColors$base17;
@@ -14258,7 +14321,7 @@ const NarrowButtonStyles = (props) => {
   `;
 };
 const StyledButtonSection = /*#__PURE__*/ _styled("section", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g20"
 })("display:flex;align-items:center;z-index:100;", (props) => {
 	const { isNarrow } = props;
@@ -14272,7 +14335,7 @@ const StyledButtonSection = /*#__PURE__*/ _styled("section", {
 }, ";");
 const StyledDrawer$1 = /*#__PURE__*/ _styled(Drawer, {
 	shouldForwardProp: (prop) => ![
-		...doNotForwardProps$9,
+		...doNotForwardProps$10,
 		"sdsStyle",
 		"topOffset"
 	].includes(prop),
@@ -14295,7 +14358,7 @@ const StyledDrawer$1 = /*#__PURE__*/ _styled(Drawer, {
     `;
 }, ";");
 const StyledDrawerContent = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g18"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -14308,7 +14371,7 @@ const StyledDrawerContent = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledNarrowHamburgerMenuButton = /*#__PURE__*/ _styled(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
 	target: "e1bn4x3g17"
 })((props) => {
 	var _iconSizes$l, _iconSizes$l2;
@@ -14348,7 +14411,7 @@ const DrawerAccordionStyles = (props) => {
   `;
 };
 const StyledAccordion = /*#__PURE__*/ _styled(Accordion, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g16"
 })("padding:0!important;width:100%;min-width:unset;.MuiAccordionSummary-content{", fontBodyMediumL, ";}.MuiAccordionDetails-root .MuiButtonBase-root .primary-text{", fontBodyS, ";}", (props) => {
 	var _semanticColors$base22, _semanticColors$base23, _semanticColors$base24, _spaces$l, _spaces$l2, _semanticColors$base25, _semanticColors$base26, _semanticColors$base27, _semanticColors$base28, _semanticColors$base29, _semanticColors$base30, _semanticColors$base31, _semanticColors$accen5;
@@ -14461,7 +14524,7 @@ const StyledAccordion = /*#__PURE__*/ _styled(Accordion, {
     `;
 }, ";");
 const StyledSectionDivider = /*#__PURE__*/ _styled(Divider, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g15"
 })((props) => {
 	const semanticColors = getSemanticColors(props);
@@ -14473,7 +14536,7 @@ const StyledSectionDivider = /*#__PURE__*/ _styled(Divider, {
 }, ";");
 const StyledMegaMenuDrawer = /*#__PURE__*/ _styled(Drawer, {
 	shouldForwardProp: (prop) => ![
-		...doNotForwardProps$9,
+		...doNotForwardProps$10,
 		"sdsStyle",
 		"topOffset"
 	].includes(prop),
@@ -14509,7 +14572,7 @@ const StyledMegaMenuDrawer = /*#__PURE__*/ _styled(Drawer, {
     `;
 }, ";");
 const StyledMegaMenuContent = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g13"
 })((props) => {
 	const { hasInvertedStyle } = props;
@@ -14529,7 +14592,7 @@ const StyledMegaMenuContent = /*#__PURE__*/ _styled("div", {
 }, ";");
 const StyledHoverDrawerColumn = /*#__PURE__*/ _styled("div", {
 	shouldForwardProp: (prop) => ![
-		...doNotForwardProps$9,
+		...doNotForwardProps$10,
 		"sdsStyle",
 		"totalColumns"
 	].includes(prop),
@@ -14562,7 +14625,7 @@ const StyledContentWrapper = /*#__PURE__*/ _styled("div", { target: "e1bn4x3g11"
     `;
 }, ";");
 const StyledHoverDrawerColumnHeader = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g10"
 })((props) => {
 	const { hasInvertedStyle } = props;
@@ -14577,7 +14640,7 @@ const StyledHoverDrawerColumnHeader = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledHoverDrawerItem = /*#__PURE__*/ _styled(Button, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g9"
 })((props) => {
 	var _iconSizes$l3, _iconSizes$s, _iconSizes$l4, _iconSizes$s2, _semanticColors$base32, _semanticColors$base33, _semanticColors$accen6;
@@ -14619,7 +14682,7 @@ const StyledHoverDrawerItem = /*#__PURE__*/ _styled(Button, {
     `;
 }, ";");
 const StyledHoverDrawerItemContent = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g8"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -14631,7 +14694,7 @@ const StyledHoverDrawerItemContent = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledHoverDrawerItemIcon = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g7"
 })((props) => {
 	var _semanticColors$accen7, _semanticColors$accen8;
@@ -14651,7 +14714,7 @@ const StyledHoverDrawerItemIcon = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledHoverDrawerItemText = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g6"
 })(() => {
 	return css$1`
@@ -14663,7 +14726,7 @@ const StyledHoverDrawerItemText = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const EmptyIcon = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g5"
 })((props) => {
 	var _iconSize$l, _iconSize$s, _iconSize$l2, _iconSize$s2;
@@ -14678,7 +14741,7 @@ const EmptyIcon = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledHoverDrawerItemTitle = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g4"
 })((props) => {
 	const { hasInvertedStyle, hasDetails } = props;
@@ -14698,7 +14761,7 @@ const StyledHoverDrawerItemTitle = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledHoverDrawerItemDetails = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g3"
 })((props) => {
 	const { hasInvertedStyle } = props;
@@ -14713,7 +14776,7 @@ const StyledHoverDrawerItemDetails = /*#__PURE__*/ _styled("div", {
     `;
 }, ";");
 const StyledHoverDrawerActions = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g2"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -14742,7 +14805,7 @@ const StyledButton = /*#__PURE__*/ _styled(Button, { target: "e1bn4x3g1" })((pro
     `;
 }, ";");
 const StyledHoverDrawerContainer = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g0"
 })({
 	name: "bjn8wh",
@@ -14754,7 +14817,7 @@ const StyledHoverDrawerContainer = /*#__PURE__*/ _styled("div", {
 function _EMOTION_STRINGIFIED_CSS_ERROR__$9() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const StyledTag$1 = /*#__PURE__*/ _styled(Tag, { target: "etq4jsl1" })({
+const StyledTag$2 = /*#__PURE__*/ _styled(Tag, { target: "etq4jsl1" })({
 	name: "ti75j2",
 	styles: "margin:0",
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
@@ -14764,7 +14827,7 @@ const StyledTag$1 = /*#__PURE__*/ _styled(Tag, { target: "etq4jsl1" })({
 function _EMOTION_STRINGIFIED_CSS_ERROR__$8() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const doNotForwardProps$8 = [
+const doNotForwardProps$9 = [
 	"active",
 	"hasInvertedStyle",
 	"isNarrow",
@@ -14797,7 +14860,7 @@ const NarrowNavItemStyles = (props) => {
 	return /*#__PURE__*/ css(active ? fontBodySemiboldL(props) : fontBodyMediumL(props), " border-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px!important;", navVariant === "primary" ? "justify-content: start;" : "", " ", innerSdsStyle === "drawer" ? _ref2$1 : /*#__PURE__*/ css("background-color:", active ? hasInvertedStyle ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.fillPrimaryPressedOnDark : semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.fillPrimaryPressed : "transparent", ";"), " width:100%;height:unset!important;&:hover{", innerSdsStyle === "drawer" ? _ref$1 : /*#__PURE__*/ css("background:", hasInvertedStyle ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.fillPrimaryInteractionOnDark : semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.fillPrimaryInteraction, ";"), " box-shadow:none;", navVariant === "primary" && StyledLabel, "{color:", hasInvertedStyle ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, ";}svg{color:", ChevronHoverColor, "!important;}}");
 };
 const UnifiedNavItem = /*#__PURE__*/ _styled(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
 	target: "e810m81"
 })("display:flex;align-items:center;min-width:fit-content;border:none;background:transparent;height:unset!important;", (props) => {
 	var _semanticColors$base7, _semanticColors$base8, _semanticColors$base9, _semanticColors$base10, _semanticColors$base11;
@@ -14813,7 +14876,7 @@ const UnifiedNavItem = /*#__PURE__*/ _styled(Button, {
 	return [navVariant === "secondary" && (active ? fontBodySemiboldS(props) : fontBodyMediumS(props)), /*#__PURE__*/ css("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;border-radius:", corners === null || corners === void 0 ? void 0 : corners.l, "px;background-color:", active ? hasInvertedStyle ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.fillPrimaryPressedOnDark : semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.fillPrimaryPressed : "transparent", ";", navVariant === "secondary" ? /*#__PURE__*/ css("gap:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;color:", active ? textActiveColor : textDefaultColor, ";justify-content:flex-start;width:fit-content;&>span{gap:", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px!important;}") : "", " svg{color:", active ? ChevronOpenColor : ChevronDefaultColor, ";}&:hover{background:", hasInvertedStyle ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.fillPrimaryInteractionOnDark : semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.fillPrimaryInteraction, "!important;box-shadow:none;", navVariant === "primary" && StyledLabel, "{color:", hasInvertedStyle ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, ";}svg{color:", ChevronHoverColor, "!important;}}", isNarrow && NarrowNavItemStyles(props), ";")];
 }, ";");
 const StyledLabel = /*#__PURE__*/ _styled("span", {
-	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
 	target: "e810m80"
 })((props) => {
 	const { hasInvertedStyle, active, isNarrow } = props;
@@ -14828,7 +14891,7 @@ const StyledLabel = /*#__PURE__*/ _styled("span", {
 function _EMOTION_STRINGIFIED_CSS_ERROR__$7() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const doNotForwardProps$7 = [
+const doNotForwardProps$8 = [
 	"isNarrow",
 	"hasSection",
 	"hasInvertedStyle",
@@ -14840,7 +14903,7 @@ const NarrowStyledSection = (props) => {
 	return /*#__PURE__*/ css("align-items:start;flex-direction:column;margin-top:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;");
 };
 const StyledSection = /*#__PURE__*/ _styled("section", {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl6"
 })("display:flex;align-items:center;", (props) => {
 	const { isNarrow } = props;
@@ -14848,7 +14911,7 @@ const StyledSection = /*#__PURE__*/ _styled("section", {
 	return /*#__PURE__*/ css("column-gap:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;row-gap:", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;", isNarrow && NarrowStyledSection(props), ";");
 }, ";");
 const StyledSectionHeader = /*#__PURE__*/ _styled(ListSubheader, {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl5"
 })((props) => {
 	const { isNarrow, hasInvertedStyle, sdsStyle } = props;
@@ -14868,7 +14931,7 @@ const StyledSectionHeader = /*#__PURE__*/ _styled(ListSubheader, {
 	return /*#__PURE__*/ css("&.MuiListSubheader-root{", fontCapsXxxxs(props), " top:0;color:", getTextColor(), ";background-color:", getBackgroundColor(), ";padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ", isNarrow ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;margin-bottom:0;}");
 }, ";");
 const StyledAccordionDetails = /*#__PURE__*/ _styled(AccordionDetails, {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl4"
 })((props) => {
 	const { sdsStyle } = props;
@@ -14881,7 +14944,7 @@ var _ref2 = {
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 const StyledAccordionSection = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl3"
 })((props) => {
 	const { sdsStyle, hasInvertedStyle } = props;
@@ -14895,7 +14958,7 @@ const StyledAccordionSection = /*#__PURE__*/ _styled("div", {
 	return _ref2;
 }, ";");
 const StyledDivider = /*#__PURE__*/ _styled(Divider, {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl2"
 })((props) => {
 	const { hasSection, isNarrow, hasInvertedStyle } = props;
@@ -15017,7 +15080,7 @@ function DrawerContent({ drawerItems, sectionProps, section, hasMultipleSections
 }
 //#endregion
 //#region src/core/NavigationHeader/components/shared/AccordionNavItemStyle.ts
-const doNotForwardProps$6 = [
+const doNotForwardProps$7 = [
 	"hasInvertedStyle",
 	"hasCaption",
 	"iconSize",
@@ -15026,7 +15089,7 @@ const doNotForwardProps$6 = [
 	"sdsStyle"
 ];
 const StyledDrawerNavItem = /*#__PURE__*/ _styled(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t4"
 })((props) => {
 	var _semanticColors$base, _semanticColors$base2, _iconSizes$l, _iconSizes$s, _iconSizes$l2, _iconSizes$s2;
@@ -15037,14 +15100,14 @@ const StyledDrawerNavItem = /*#__PURE__*/ _styled(Button, {
 	return /*#__PURE__*/ css("display:flex;justify-content:start;background-color:transparent!important;background-image:none!important;border:none!important;outline:none!important;box-shadow:none!important;align-items:center;text-align:left;gap:", spaces === null || spaces === void 0 ? void 0 : spaces.l, "px!important;padding:", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0!important;&>span{gap:", spaces === null || spaces === void 0 ? void 0 : spaces.l, "px!important;}cursor:pointer;border-radius:8px;transition:background-color 150ms;color:", textColor, ";height:unset!important;svg{width:", props.hasCaption ? iconSizes === null || iconSizes === void 0 || (_iconSizes$l = iconSizes.l) === null || _iconSizes$l === void 0 ? void 0 : _iconSizes$l.width : iconSizes === null || iconSizes === void 0 || (_iconSizes$s = iconSizes.s) === null || _iconSizes$s === void 0 ? void 0 : _iconSizes$s.width, "px!important;height:", props.hasCaption ? iconSizes === null || iconSizes === void 0 || (_iconSizes$l2 = iconSizes.l) === null || _iconSizes$l2 === void 0 ? void 0 : _iconSizes$l2.height : iconSizes === null || iconSizes === void 0 || (_iconSizes$s2 = iconSizes.s) === null || _iconSizes$s2 === void 0 ? void 0 : _iconSizes$s2.height, "px!important;}&:hover{background-color:transparent;background-image:none;border:none;outline:none;box-shadow:none;}");
 }, ";");
 const StyledDrawerNavItemContent = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t3"
 })((props) => {
 	const spaces = getSpaces(props);
 	return /*#__PURE__*/ css("display:flex;flex-direction:column;gap:0!important;flex:1;min-width:0;padding-top:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;");
 }, ";");
 const StyledDrawerNavItemText = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t2"
 })((props) => {
 	var _semanticColors$base3, _semanticColors$base4;
@@ -15054,7 +15117,7 @@ const StyledDrawerNavItemText = /*#__PURE__*/ _styled("div", {
 	return /*#__PURE__*/ css(hasDetails ? fontBodySemiboldS(props) : fontBodyMediumS(props), " color:", textColor, ";overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:24px;");
 }, ";");
 const StyledDrawerNavItemCaption = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t1"
 })((props) => {
 	var _semanticColors$base5, _semanticColors$base6;
@@ -15063,7 +15126,7 @@ const StyledDrawerNavItemCaption = /*#__PURE__*/ _styled("div", {
 	return /*#__PURE__*/ css(fontBodyXs(props), " color:", captionColor, ";white-space:normal;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;");
 }, ";");
 const StyledIconWrapper = /*#__PURE__*/ _styled("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t0"
 })((props) => {
 	const { iconSize } = props;
@@ -15532,10 +15595,10 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
 						isNarrow,
 						children: label
 					}),
-					tag && /* @__PURE__ */ jsx(StyledTag$1, {
+					tag && /* @__PURE__ */ jsx(StyledTag$2, {
 						label: tag,
 						color: tagColor,
-						hover: false
+						size: "small"
 					})
 				]
 			})
@@ -15632,7 +15695,7 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
 function _EMOTION_STRINGIFIED_CSS_ERROR__$6() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const StyledTag = /*#__PURE__*/ _styled(Tag, { target: "es7myp0" })({
+const StyledTag$1 = /*#__PURE__*/ _styled(Tag, { target: "es7myp0" })({
 	name: "ti75j2",
 	styles: "margin:0",
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
@@ -15820,10 +15883,10 @@ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNa
 			sdsStyle: "minimal",
 			navVariant: "secondary",
 			size: "medium",
-			children: [label, tag && /* @__PURE__ */ jsx(StyledTag, {
+			children: [label, tag && /* @__PURE__ */ jsx(StyledTag$1, {
 				label: tag,
 				color: tagColor,
-				hover: false
+				size: "small"
 			})]
 		}), key);
 	};
@@ -16094,10 +16157,10 @@ const NavigationHeader = forwardRef((props, ref) => {
 		let logoNode = /* @__PURE__ */ jsxs(StyledTitleContainer, {
 			hasInvertedStyle,
 			isNarrow: dimensions.isNarrow,
-			children: [logo && /* @__PURE__ */ jsx(StyledLogoWrapper, { children: logo }), (title || tag) && /* @__PURE__ */ jsxs(StyledTitleTagWrapper, { children: [title && /* @__PURE__ */ jsx("p", { children: title }), tag && /* @__PURE__ */ jsx(StyledTag$2, {
+			children: [logo && /* @__PURE__ */ jsx(StyledLogoWrapper, { children: logo }), (title || tag) && /* @__PURE__ */ jsxs(StyledTitleTagWrapper, { children: [title && /* @__PURE__ */ jsx("p", { children: title }), tag && /* @__PURE__ */ jsx(StyledTag$3, {
 				color: tagColor,
 				label: tag,
-				hover: false
+				size: "small"
 			})] })]
 		});
 		if (logoLinkComponent || logoUrl) logoNode = /* @__PURE__ */ jsx(StyledLogoLinkWrapper, _objectSpread2(_objectSpread2({
@@ -16341,14 +16404,14 @@ const useScrollStopListener = (callback, timeout = 50) => {
 };
 //#endregion
 //#region src/core/NavigationJumpTo/style.ts
-const doNotForwardProps$5 = [
+const doNotForwardProps$6 = [
 	"items",
 	"sdsIndicatorColor",
 	"width",
 	"isSubItem"
 ];
 const StyledTabs$1 = /*#__PURE__*/ _styled(Tabs$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
 	target: "e1svjln41"
 })((props) => {
 	var _semanticColors$base, _semanticColors$accen;
@@ -16387,7 +16450,7 @@ const StyledTabs$1 = /*#__PURE__*/ _styled(Tabs$1, {
     `;
 }, ";");
 const StyledTab$1 = /*#__PURE__*/ _styled(Tab$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
 	target: "e1svjln40"
 })(fontBodyMediumXs, " ", (props) => {
 	var _semanticColors$base2, _semanticColors$base3, _semanticColors$base4, _semanticColors$base5;
@@ -16623,9 +16686,9 @@ const NavigationJumpTo = forwardRef((props, ref) => {
 //#endregion
 //#region src/core/Notification/style.ts
 const fontBodyXs$1 = fontBody("xs");
-const doNotForwardProps$4 = ["slideDirection"];
+const doNotForwardProps$5 = ["slideDirection"];
 const StyledNotification = /*#__PURE__*/ _styled(Alert$1, {
-	shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop),
 	target: "e1ktql9t2"
 })(fontBodyXs$1, " ", (props) => {
 	var _semanticColors$inten, _semanticColors$inten2, _semanticColors$inten3, _semanticColors$inten4, _semanticColors$base, _semanticColors$inten5;
@@ -16808,7 +16871,7 @@ const Notification = (_ref) => {
 function _EMOTION_STRINGIFIED_CSS_ERROR__$5() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const doNotForwardProps$3 = [
+const doNotForwardProps$4 = [
 	"sdsStyle",
 	"selected",
 	"onPageChange",
@@ -16842,7 +16905,7 @@ const StyledPaginationButton = /*#__PURE__*/ _styled(Button, { target: "e61vbx4"
     `;
 }, ";");
 const StyledPaginationChevronList = /*#__PURE__*/ _styled("li", {
-	shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop),
 	target: "e61vbx3"
 })((props) => {
 	var _semanticColors$base3, _semanticColors$base4, _semanticColors$base5, _semanticColors$base6, _semanticColors$base7;
@@ -16883,7 +16946,7 @@ const StyledPaginationChevronList = /*#__PURE__*/ _styled("li", {
     `;
 }, ";");
 const StyledPagination = /*#__PURE__*/ _styled("ul", {
-	shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop),
 	target: "e61vbx2"
 })(fontBodyS, " display:flex;flex-wrap:wrap;padding:0;margin:0;& li{list-style:none;}");
 const selectedPageStyle = (props) => {
@@ -16892,7 +16955,7 @@ const selectedPageStyle = (props) => {
 	return /*#__PURE__*/ css("background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.fillPrimaryInteraction, ";color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.textPrimary, ";box-shadow:inset 0 0 0 1px ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.borderSecondary, ";&:hover{box-shadow:inset 0 0 0 1px ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.borderSecondary, ";}", fontTabularSemiboldS(props), ";");
 };
 const Page = /*#__PURE__*/ _styled("li", {
-	shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop),
 	target: "e61vbx1"
 })(fontTabularMediumS, " ", (props) => {
 	var _semanticColors$base12, _semanticColors$base13, _semanticColors$base14;
@@ -17114,7 +17177,7 @@ const PANEL_TRANSITION_DURATION_MS = {
 };
 //#endregion
 //#region src/core/Panel/style.ts
-const doNotForwardProps$2 = [
+const doNotForwardProps$3 = [
 	"sdsType",
 	"position",
 	"width",
@@ -17139,7 +17202,7 @@ const overlayPanelStyles = (props) => {
 	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),
+	shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop),
 	target: "ejokiai1"
 })((props) => {
 	const { sdsType = "basic", anchor = "left", width } = props;
@@ -17272,46 +17335,6 @@ const Panel = React.forwardRef((props, ref) => {
 	);
 });
 //#endregion
-//#region src/core/Popover/style.ts
-const StyledPopover = /*#__PURE__*/ _styled(Popover$1, { target: "e89mz5z0" })("& .", popoverClasses.paper, "{", (props) => {
-	var _semanticColors$base, _semanticColors$base2, _props$theme$zIndex$t, _props$theme;
-	const corners = getCorners(props);
-	const shadows = getShadows(props);
-	const semanticColors = getSemanticColors(props);
-	const borders = getBorders(props);
-	const spaces = getSpaces(props);
-	return `
-        background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.surfacePrimary};
-        background-image: none;
-        border-radius: ${corners === null || corners === void 0 ? void 0 : corners.l}px;
-        padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
-        border: ${borders === null || borders === void 0 ? void 0 : borders.none};
-        outline: 1px solid ${addOpacityToHex((semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.borderSecondary) || "#000000", 15)};
-        box-shadow: ${shadows === null || shadows === void 0 ? void 0 : shadows.m};
-        box-sizing: border-box;
-        z-index: ${(_props$theme$zIndex$t = props === null || props === void 0 || (_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.zIndex) === null || _props$theme === void 0 ? void 0 : _props$theme.tooltip) !== null && _props$theme$zIndex$t !== void 0 ? _props$theme$zIndex$t : 1400};
-      `;
-}, ";}");
-//#endregion
-//#region src/core/Popover/index.tsx
-/**
-* @see https://mui.com/material-ui/react-popover/
-*/
-const Popover = forwardRef(function Popover(props, ref) {
-	const spaces = getSpaces({ theme: useTheme() });
-	return /* @__PURE__ */ jsx(StyledPopover, _objectSpread2({
-		ref,
-		anchorOrigin: {
-			horizontal: "left",
-			vertical: "bottom"
-		},
-		transformOrigin: {
-			vertical: -((spaces === null || spaces === void 0 ? void 0 : spaces.s) || 8),
-			horizontal: 0
-		}
-	}, props));
-});
-//#endregion
 //#region src/core/Table/style.ts
 function _EMOTION_STRINGIFIED_CSS_ERROR__$3() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
@@ -17329,7 +17352,7 @@ const Table = forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/core/TableRow/style.ts
-const doNotForwardProps$1 = [
+const doNotForwardProps$2 = [
 	"rowHeight",
 	"useDivider",
 	"shouldShowTooltipOnHover",
@@ -17413,7 +17436,7 @@ const selectedStyled = (props) => {
   `;
 };
 const StyledTableRow = /*#__PURE__*/ _styled("tr", {
-	shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$2.includes(prop),
 	target: "euwrjwp0"
 })(fontHeaderS, " ", focusVisibleA11yStyle, " ", (props) => {
 	var _semanticColors$base15, _semanticColors$base16, _semanticColors$base17;
@@ -18173,9 +18196,9 @@ const PreComposedTable = forwardRef(PreComposedTableInner);
 function _EMOTION_STRINGIFIED_CSS_ERROR__$1() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const doNotForwardProps = ["buttonDefinition"];
+const doNotForwardProps$1 = ["buttonDefinition"];
 const StyledSegmentedControl = /*#__PURE__*/ _styled(ToggleButtonGroup, {
-	shouldForwardProp: (prop) => !doNotForwardProps.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop),
 	target: "enkxsnk3"
 })((props) => {
 	var _semanticColors$base, _semanticColors$base2, _semanticColors$base3, _semanticColors$accen, _semanticColors$base4, _semanticColors$base5, _semanticColors$base6, _semanticColors$base7, _semanticColors$base8, _semanticColors$base9, _semanticColors$base10;
@@ -18229,7 +18252,7 @@ const StyledSegmentedControl = /*#__PURE__*/ _styled(ToggleButtonGroup, {
     `;
 }, ";");
 const StyledToggleButton = /*#__PURE__*/ _styled(ToggleButton, {
-	shouldForwardProp: (prop) => !doNotForwardProps.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop),
 	target: "enkxsnk2"
 })((props) => {
 	var _semanticColors$base11;
@@ -18419,6 +18442,158 @@ const Tab = forwardRef(function Tab(props, ref) {
 	}, rest), context));
 });
 //#endregion
+//#region src/core/TagLegacy/style.ts
+const tagSizeS = (props) => {
+	var _semanticColors$base;
+	const spaces = getSpaces(props);
+	const iconSizes = getIconSizes(props);
+	const semanticColors = getSemanticColors(props);
+	return /*#__PURE__*/ css("height:unset;.MuiChip-label{", fontBodyXxxs(props), " padding:0;}.MuiSvgIcon-root{height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;margin:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 0;}.MuiChip-deleteIcon{", fontHeaderXs(props), " color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.ornamentPrimaryInverse, ";margin:0 0 0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;}");
+};
+const tagSizeL = (props) => {
+	var _semanticColors$base2;
+	const spaces = getSpaces(props);
+	const iconSizes = getIconSizes(props);
+	const semanticColors = getSemanticColors(props);
+	return /*#__PURE__*/ css("height:unset;.MuiChip-label{", fontBodyXs(props), " padding:0;}.MuiSvgIcon-root{height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;margin:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 0px;}.MuiChip-deleteIcon{", fontHeaderXs(props), " color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.ornamentPrimaryInverse, ";margin:0 0 0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;height:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;width:", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;}");
+};
+const rounded = (props) => {
+	const corners = getCorners(props);
+	const spaces = getSpaces(props);
+	const { sdsSize = "s", icon } = props;
+	const topBottomPadding = sdsSize === "s" ? spaces === null || spaces === void 0 ? void 0 : spaces.xxxs : icon ? spaces === null || spaces === void 0 ? void 0 : spaces.xxs : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
+	const rightPadding = sdsSize === "l" && icon ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
+	return /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.rounded, "px;padding:", topBottomPadding, "px ", rightPadding, "px ", topBottomPadding, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;&:after{content:\"\";border-radius:", corners === null || corners === void 0 ? void 0 : corners.rounded, "px;}");
+};
+const square = (props) => {
+	const corners = getCorners(props);
+	const spaces = getSpaces(props);
+	const { sdsSize = "s", icon } = props;
+	const topBottomPadding = sdsSize === "s" ? spaces === null || spaces === void 0 ? void 0 : spaces.xxxs : icon ? spaces === null || spaces === void 0 ? void 0 : spaces.xxs : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
+	return /*#__PURE__*/ css("border-radius:", corners === null || corners === void 0 ? void 0 : corners.m, "px;padding:", topBottomPadding, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;&:after{content:\"\";border-radius:", corners === null || corners === void 0 ? void 0 : corners.m, "px;}");
+};
+const withHover = (props) => {
+	var _semanticColors$base3;
+	const semanticColors = getSemanticColors(props);
+	return /*#__PURE__*/ css("&:hover{cursor:pointer;}&:hover,&:focus-visible{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textPrimaryInverse, ";}");
+};
+const primary = (props) => {
+	return createTypeCss(props, "primary");
+};
+const secondary = (props) => {
+	return createTypeCss(props, "secondary");
+};
+function generatePrimaryTagColors(intent, colors, semanticColors) {
+	var _semanticColors$base4, _semanticColors$base5, _semanticColors$neutr;
+	const intentColors = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent || "neutral"];
+	const hasCustomColors = colors.length >= 2;
+	return {
+		background: hasCustomColors ? colors[1] : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPrimary,
+		backgroundClicked: hasCustomColors ? darken(colors[1], .3) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPressed,
+		backgroundHover: hasCustomColors ? darken(colors[1], .15) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillInteraction,
+		iconColor: hasCustomColors ? colors[2] : semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.ornamentOnFill,
+		label: colors.length > 0 ? colors[0] : semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.textOnFill,
+		borderColor: alpha((semanticColors === null || semanticColors === void 0 || (_semanticColors$neutr = semanticColors.neutral) === null || _semanticColors$neutr === void 0 ? void 0 : _semanticColors$neutr.foreground) || "#000", .6)
+	};
+}
+function getSecondaryBorderColor(effectiveIntent, theme, intentColors) {
+	if (!theme || !theme.palette) return alpha((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .6);
+	if (effectiveIntent === "negative" && theme.palette.mode === "dark") return alpha((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .65);
+	if (effectiveIntent === "notice" && theme.palette.mode === "light") return alpha((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .85);
+	return alpha((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .6);
+}
+function generateSecondaryTagColors(intent, colors, semanticColors, theme = defaultTheme) {
+	const effectiveIntent = intent || "neutral";
+	const intentColors = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[effectiveIntent];
+	const hasCustomColors = colors.length >= 2;
+	return {
+		background: hasCustomColors ? colors[1] : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillSecondary,
+		backgroundClicked: hasCustomColors ? darken(colors[1], .3) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPressed,
+		backgroundHover: hasCustomColors ? darken(colors[1], .15) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillInteraction,
+		iconColor: hasCustomColors ? colors[2] : intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground,
+		label: colors.length > 0 ? colors[0] : intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground,
+		borderColor: hasCustomColors ? alpha(colors[1], .6) : getSecondaryBorderColor(effectiveIntent, theme, intentColors)
+	};
+}
+function createTypeCss(props, type) {
+	var _semanticColors$base6, _semanticColors$base7;
+	const semanticColors = getSemanticColors(props);
+	const intent = typeof props.tagColor === "string" ? props.tagColor : null;
+	const colors = Array.isArray(props.tagColor) ? [...props.tagColor] : [];
+	const typeColors = {
+		primary: generatePrimaryTagColors(intent, colors, semanticColors),
+		secondary: generateSecondaryTagColors(intent, colors, semanticColors, props.theme)
+	}[type];
+	return /*#__PURE__*/ css(focusVisibleA11yStyle(props), " ", type === "secondary" && /*#__PURE__*/ css("box-shadow:inset 0 0 0 1px ", typeColors.borderColor, ";"), " background-color:", typeColors.background, ";position:relative;.MuiChip-label{color:", typeColors.label, ";}svg{fill:", typeColors.iconColor, ";}&:hover,&:active{box-shadow:none;.MuiChip-label{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.textPrimaryInverse, ";}svg{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base7 = semanticColors.base) === null || _semanticColors$base7 === void 0 ? void 0 : _semanticColors$base7.ornamentPrimaryInverse, ";}}&:hover{background-color:", typeColors.backgroundHover, ";}&:active{background-color:", typeColors.backgroundClicked, ";}&.Mui-focusVisible{background-color:", typeColors.backgroundHover, ";}");
+}
+const typeToCss = {
+	primary,
+	secondary
+};
+const doNotForwardProps = [
+	"sdsType",
+	"sdsStyle",
+	"sdsSize",
+	"tagColor",
+	"hover"
+];
+const StyledTagLegacy = /*#__PURE__*/ _styled(Chip$1, {
+	shouldForwardProp: (prop) => !doNotForwardProps.includes(prop),
+	target: "e47sx6f0"
+})("border:none;", (props) => {
+	const { hover = true, sdsType, sdsStyle, sdsSize = "s" } = props;
+	const isRounded = sdsStyle === "rounded";
+	const type = sdsType || "primary";
+	return /*#__PURE__*/ css(sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), " ", typeToCss[type](props), " ", isRounded ? rounded(props) : square(props), " ", hover ? withHover(props) : `pointer-events: none;`, ";");
+}, ";");
+//#endregion
+//#region src/core/TagLegacy/index.tsx
+/**
+* @see https://mui.com/material-ui/react-chip/
+*
+* @deprecated Use Tag instead. TagLegacy will be removed in a future release.
+*
+* @props color: {string}                   - applies color for tag based on default theme color values
+*               [string, string]           - applies custom colors for [font, background]
+*               [string, string, string]   - applies custom colors for [font, background, icon]
+*/
+const TagLegacy = (props) => {
+	const { color } = props;
+	return /* @__PURE__ */ jsx(StyledTagLegacy, _objectSpread2(_objectSpread2({ tagColor: color }, props), {}, { color: "primary" }));
+};
+//#endregion
+//#region src/core/TagFilter/style.ts
+const StyledTag = /*#__PURE__*/ _styled(TagLegacy, { target: "e19crzu0" })((props) => {
+	var _semanticColors$accen, _iconSizes$xs, _iconSizes$xs2, _iconSizes$xs3, _iconSizes$xs4, _semanticColors$accen2, _semanticColors$base, _semanticColors$base2, _semanticColors$accen3;
+	const spaces = getSpaces(props);
+	const iconSizes = getIconSizes(props);
+	const semanticColors = getSemanticColors(props);
+	return /*#__PURE__*/ css("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen = semanticColors.accent) === null || _semanticColors$accen === void 0 ? void 0 : _semanticColors$accen.fillPrimary, ";.MuiChip-label{", fontHeaderXs(props), " z-index:auto;}.MuiChip-deleteIcon{margin:0 0 0 ", spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;width:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs = iconSizes.xs) === null || _iconSizes$xs === void 0 ? void 0 : _iconSizes$xs.width, "px!important;height:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs2 = iconSizes.xs) === null || _iconSizes$xs2 === void 0 ? void 0 : _iconSizes$xs2.height, "px!important;}.MuiSvgIcon-root{margin:0;width:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs3 = iconSizes.xs) === null || _iconSizes$xs3 === void 0 ? void 0 : _iconSizes$xs3.width, "px!important;height:", iconSizes === null || iconSizes === void 0 || (_iconSizes$xs4 = iconSizes.xs) === null || _iconSizes$xs4 === void 0 ? void 0 : _iconSizes$xs4.height, "px!important;}svg{z-index:auto;}&:hover,&:focus,&:focus-within{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.fillInteraction, ";.MuiChip-label{color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimaryInverse, "!important;}.MuiChip-deleteIcon svg{fill:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.ornamentPrimaryInverse, "!important;}}&:active{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen3 = semanticColors.accent) === null || _semanticColors$accen3 === void 0 ? void 0 : _semanticColors$accen3.fillPressed, ";}&:after{content:\"\";display:none;}");
+}, ";");
+//#endregion
+//#region src/core/TagFilter/index.tsx
+/**
+* @see https://mui.com/material-ui/react-chip/
+*
+* @deprecated Use Chip instead. TagFilter will be removed in a future release.
+*/
+const TagFilter = (props) => {
+	return /* @__PURE__ */ jsx(StyledTag, _objectSpread2(_objectSpread2({ role: "none presentation" }, props), {}, {
+		deleteIcon: /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Delete Tag",
+			sdsStyle: "minimal",
+			sdsType: "secondary",
+			size: "medium",
+			backgroundOnHover: false,
+			children: /* @__PURE__ */ jsx(Icon, {
+				sdsIcon: "XMark",
+				sdsSize: "s"
+			})
+		}),
+		color: "info"
+	}));
+};
+//#endregion
 //#region src/core/TooltipCondensed/style.ts
 const indicatorCSS = (props) => {
 	const { indicatorColor } = props;
@@ -21822,4 +21997,4 @@ const generateDiscreteColors = (count, options = {}) => {
 	return isDarkMode ? colors.reverse() : colors;
 };
 //#endregion
-export { Accordion, AccordionDetails, AccordionHeader, Alert, Autocomplete, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonDropdownLegacy, ButtonGroup, ButtonIcon, ButtonLegacy, ButtonToggle, ButtonToggleLegacy, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, DialogContent_default as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, Hero, Icon, InputCheckbox, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, Popover, PreComposedTable, RowHoverContext, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, TooltipTableContent, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, isIconOnlyButton, makeSdsSemanticAppTheme, makeThemeOptions };
+export { Accordion, AccordionDetails, AccordionHeader, Alert, Autocomplete, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonDropdownLegacy, ButtonGroup, ButtonIcon, ButtonLegacy, ButtonToggle, ButtonToggleLegacy, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, DialogContent_default as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, Hero, Icon, InputCheckbox, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, Popover, PreComposedTable, RowHoverContext, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, TAG_LABEL_TEXT_CLASS, TAG_LINK_ICON_CLASS, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, TagLegacy, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, TooltipTableContent, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, isIconOnlyButton, makeSdsSemanticAppTheme, makeThemeOptions };