@czi-sds/components 24.2.0 → 25.0.0

package/dist/index.cjs.js

@@ -30,8 +30,9 @@ let _emotion_react = require("@emotion/react");
 let _mui_material = require("@mui/material");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_utils = require("@mui/material/utils");
-let _mui_icons_material = require("@mui/icons-material");
+require("@mui/icons-material");
 let _emotion_css = require("@emotion/css");
+let _phosphor_icons_react = require("@phosphor-icons/react");
 let _mui_material_Button = require("@mui/material/Button");
 _mui_material_Button = __toESM(_mui_material_Button);
 let _mui_material_styles = require("@mui/material/styles");
@@ -1772,9 +1773,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__ */ (0, react_jsx_runtime.jsx)(StyledAccordionDetails$1, _objectSpread2(_objectSpread2({ id }, rest), {}, { children }));
 };
 //#endregion
@@ -6296,7 +6297,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 = [
@@ -6324,7 +6325,7 @@ const StyledIcon$2 = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { ta
 } : {
 	name: "49aokf",
 	styles: "display:contents",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$25
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$26
 });
 //#endregion
 //#region src/core/Icon/index.tsx
@@ -6382,13 +6383,13 @@ const Icon = (0, react.forwardRef)(function Icon({ className, color, shade, sdsI
 });
 //#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__ */ (0, react_jsx_runtime.jsxs)(StyledAccordionHeader, _objectSpread2(_objectSpread2({
 		chevronSize,
 		expandIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
@@ -6425,7 +6426,7 @@ const leftPosition = (props) => {
 };
 //#endregion
 //#region src/core/Accordion/index.tsx
-const _excluded$48 = [
+const _excluded$50 = [
 	"id",
 	"children",
 	"useDivider",
@@ -6436,7 +6437,7 @@ const _excluded$48 = [
 * @see https://mui.com/material-ui/react-accordion/
 */
 const Accordion = react.default.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.default.useState(defaultExpanded ? id : false);
 	const handleChange = (panel) => (_event, isExpanded) => {
 		setExpanded(isExpanded ? panel : false);
@@ -6698,7 +6699,7 @@ const StyledChildren = /*#__PURE__*/ (0, _emotion_styled_base.default)("span", {
 }, ";");
 //#endregion
 //#region src/core/Button/index.tsx
-const _excluded$47 = [
+const _excluded$49 = [
 	"sdsStyle",
 	"sdsType",
 	"size",
@@ -6714,7 +6715,7 @@ const MUI_VARIANT_MAP$1 = {
 * @see https://mui.com/material-ui/react-button/
 */
 const Button = react.default.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__ */ (0, react_jsx_runtime.jsx)(StyledButton$4, _objectSpread2(_objectSpread2({
 		variant: MUI_VARIANT_MAP$1[sdsStyle] || variant,
@@ -6729,7 +6730,7 @@ const Button = react.default.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 = [
@@ -6739,7 +6740,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);
@@ -6782,7 +6783,7 @@ const StyledSearchBase = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_ma
 	const iconSizes = getIconSizes(props);
 	const semanticColors = getSemanticColors(props);
 	const corners = getCorners(props);
-	return /*#__PURE__*/ (0, _emotion_react.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;}}.", _mui_material.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%;.", _mui_material.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;}.", _mui_material.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;}}}}.", _mui_material.inputBaseClasses.sizeSmall, ">.", _mui_material.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;}.", _mui_material.outlinedInputClasses.root, ":hover{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base13 = semanticColors.base) === null || _semanticColors$base13 === void 0 ? void 0 : _semanticColors$base13.fillPrimaryInteraction, ";& .", _mui_material.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, ";}}.", _mui_material.outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base15 = semanticColors.base) === null || _semanticColors$base15 === void 0 ? void 0 : _semanticColors$base15.borderPrimaryInteraction, ";}}.", _mui_material.outlinedInputClasses.root, ".", _mui_material.outlinedInputClasses.focused, "{outline:none;.", _mui_material.outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.foreground, ";}.", _mui_material.inputAdornmentClasses.root, " .", _mui_material.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 .", _mui_material.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__*/ (0, _emotion_react.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;}}.", _mui_material.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%;.", _mui_material.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;}.", _mui_material.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;}}}}.", _mui_material.inputBaseClasses.sizeSmall, ">.", _mui_material.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;}.", _mui_material.outlinedInputClasses.root, ":hover{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base13 = semanticColors.base) === null || _semanticColors$base13 === void 0 ? void 0 : _semanticColors$base13.fillPrimaryInteraction, ";& .", _mui_material.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, ";}}.", _mui_material.outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$base15 = semanticColors.base) === null || _semanticColors$base15 === void 0 ? void 0 : _semanticColors$base15.borderPrimaryInteraction, ";}}.", _mui_material.outlinedInputClasses.root, ".", _mui_material.outlinedInputClasses.focused, "{outline:none;.", _mui_material.outlinedInputClasses.notchedOutline, "{border:1px solid ", semanticColors === null || semanticColors === void 0 || (_semanticColors$accen2 = semanticColors.accent) === null || _semanticColors$accen2 === void 0 ? void 0 : _semanticColors$accen2.foreground, ";}.", _mui_material.inputAdornmentClasses.root, " .", _mui_material.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 .", _mui_material.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__*/ (0, _emotion_styled_base.default)(_mui_material.InputAdornment, { target: "e1h1uy4z0" })(process.env.NODE_ENV === "production" ? {
 	name: "vtdujo",
@@ -6790,11 +6791,11 @@ const StyledInputAdornment = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mu
 } : {
 	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__*/ (0, _emotion_styled_base.default)(_mui_material.MenuItem, { target: "eanvvd48" })((props) => {
@@ -6883,7 +6884,7 @@ const ContentWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("span", {
 } : {
 	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;
@@ -6961,7 +6962,7 @@ const DotIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)("svg", { target:
 }, ";");
 //#endregion
 //#region src/core/MenuItem/index.tsx
-const _excluded$46 = [
+const _excluded$48 = [
 	"children",
 	"column",
 	"disabled",
@@ -6976,7 +6977,7 @@ const _excluded$46 = [
 * @see https://mui.com/material-ui/react-menu/
 */
 const MenuItem = (0, react.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 = () => {
@@ -7094,7 +7095,7 @@ const useDetectUserTabbing = (ref) => {
 };
 //#endregion
 //#region src/core/InputSearch/index.tsx
-const _excluded$45 = [
+const _excluded$47 = [
 	"label",
 	"id",
 	"placeholder",
@@ -7112,7 +7113,7 @@ const _excluded$45 = [
 * @see https://mui.com/material-ui/react-text-field/
 */
 const InputSearch = (0, react.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.
@@ -7223,7 +7224,7 @@ const InputSearch = (0, react.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 = [
@@ -7385,11 +7386,11 @@ const StyledMenuItemText = /*#__PURE__*/ (0, _emotion_styled_base.default)("div"
 } : {
 	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",
@@ -7619,7 +7620,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__ */ (0, react_jsx_runtime.jsxs)(StyledMenuItemText, { children: [menuItemLabel, details && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMenuItemDetails, {
@@ -7658,7 +7659,7 @@ const StyledColumnTitle = /*#__PURE__*/ (0, _emotion_styled_base.default)("p", {
 }, ";");
 //#endregion
 //#region src/core/Autocomplete/components/AutocompleteGroup/index.tsx
-const _excluded$43 = [
+const _excluded$45 = [
 	"autocompleteProps",
 	"onValueChange",
 	"value",
@@ -7669,7 +7670,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] = (0, react.useState)(getInitialValue(multiple, propValue));
 	const [pendingValue, setPendingValue] = (0, react.useState)(getInitialValue(multiple, propValue));
@@ -7713,7 +7714,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 = [
@@ -7780,7 +7781,7 @@ const StyledAutocompleteGroupWrapper = /*#__PURE__*/ (0, _emotion_styled_base.de
 } : {
 	name: "zjik7",
 	styles: "display:flex",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$21
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$22
 });
 const StyledAutocompleteInput = /*#__PURE__*/ (0, _emotion_styled_base.default)(InputSearch, {
 	shouldForwardProp: (prop) => !doNotForwardProps$42.includes(prop),
@@ -7828,7 +7829,7 @@ const VerticalDivider = ({ icon }) => {
 };
 //#endregion
 //#region src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
-const _excluded$42 = [
+const _excluded$44 = [
 	"InputBaseProps",
 	"open",
 	"PopperPlacement",
@@ -7848,7 +7849,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 = (0, _mui_material.useTheme)();
 	const isOpenControlled = open !== void 0;
 	const [inputValue, setInputValue] = (0, react.useState)("");
@@ -8036,13 +8037,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__ */ (0, react_jsx_runtime.jsx)(AutocompleteMultiColumn, _objectSpread2(_objectSpread2({
 		options,
 		value,
@@ -8061,7 +8062,7 @@ 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__*/ (0, _emotion_styled_base.default)("div", { target: "e15g05664" })(process.env.NODE_ENV === "production" ? {
@@ -8070,7 +8071,7 @@ const Centered = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { target
 } : {
 	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__*/ (0, _emotion_styled_base.default)("div", {
@@ -8165,7 +8166,7 @@ const StyledBanner = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
 }, ";");
 //#endregion
 //#region src/core/Banner/index.tsx
-const _excluded$40 = [
+const _excluded$42 = [
 	"children",
 	"dismissed",
 	"dismissible",
@@ -8176,7 +8177,7 @@ const _excluded$40 = [
 	"intent"
 ];
 const Banner = (0, react.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] = (0, react.useState)(false);
 	if (dismissed || wasDismissed) return null;
 	const handleClose = (e) => {
@@ -8259,10 +8260,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 />"
@@ -8303,7 +8300,7 @@ const showWarningIfFirstOccurence = (warningType) => {
 };
 //#endregion
 //#region src/core/ButtonDropdown/index.tsx
-const _excluded$39 = [
+const _excluded$41 = [
 	"size",
 	"sdsType",
 	"children"
@@ -8312,7 +8309,7 @@ const _excluded$39 = [
 * @see https://mui.com/material-ui/react-button/
 */
 const ButtonDropdown = react.default.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;
@@ -8533,13 +8530,13 @@ const StyledButtonToggle = /*#__PURE__*/ (0, _emotion_styled_base.default)(Butto
 }, ";");
 //#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.default.forwardRef((props, ref) => {
 	const { startIcon } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButtonToggle, _objectSpread2(_objectSpread2({}, _objectWithoutProperties(props, _excluded$38)), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButtonToggle, _objectSpread2(_objectSpread2({}, _objectWithoutProperties(props, _excluded$40)), {}, {
 		startIcon,
 		endIcon: null,
 		backgroundOnHover: true,
@@ -8548,7 +8545,7 @@ const ButtonToggle = react.default.forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/core/ButtonGroup/index.tsx
-const _excluded$37 = [
+const _excluded$39 = [
 	"sdsType",
 	"size",
 	"orientation",
@@ -8603,7 +8600,7 @@ const cloneChildrenWithSize = (children, size) => {
 * Note: Vertical orientation is only available when all buttons are icon-only.
 */
 const ButtonGroup = react.default.forwardRef((props, ref) => {
-	const { sdsType = "primary", size = "large", orientation = "horizontal", children } = props, rest = _objectWithoutProperties(props, _excluded$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");
@@ -8638,13 +8635,13 @@ const tertiary = (props) => {
 	const semanticColors = getSemanticColors(props);
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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);
@@ -8670,7 +8667,7 @@ const StyledButtonIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_ma
 	target: "e164i6480"
 })("padding:0;", focusVisibleA11yStyle, " ", (props) => {
 	const { disabled, sdsSize = "medium", sdsType = "primary" } = props;
-	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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
@@ -8912,7 +8909,7 @@ const StyledButtonToggleLegacy = /*#__PURE__*/ (0, _emotion_styled_base.default)
 }, ";");
 //#endregion
 //#region src/core/ButtonToggleLegacy/index.tsx
-const _excluded$36 = [
+const _excluded$38 = [
 	"icon",
 	"sdsSize",
 	"sdsStage",
@@ -8923,7 +8920,7 @@ const _excluded$36 = [
 * @deprecated Use ButtonToggle instead. ButtonToggleLegacy will be removed in a future release.
 */
 const ButtonToggleLegacy = react.default.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__ */ (0, react_jsx_runtime.jsx)(StyledButtonToggleLegacy, _objectSpread2({
 		icon,
 		sdsType,
@@ -9046,7 +9043,7 @@ const CalloutExtraContent = ({ children, hideTitle, hideBody }) => {
 };
 //#endregion
 //#region src/core/Callout/index.tsx
-const _excluded$35 = [
+const _excluded$37 = [
 	"autoDismiss",
 	"dismissed",
 	"icon",
@@ -9067,7 +9064,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] = (0, react.useState)(dismissed);
 	const [stage, setStage] = (0, react.useState)(sdsStage);
 	(0, react.useEffect)(() => {
@@ -9217,7 +9214,7 @@ const StyledComponentSlotWrapper = /*#__PURE__*/ (0, _emotion_styled_base.defaul
 }, ";");
 //#endregion
 //#region src/core/Tooltip/index.tsx
-const _excluded$34 = [
+const _excluded$36 = [
 	"arrowOffset",
 	"classes",
 	"hasInvertedStyle",
@@ -9238,7 +9235,7 @@ const _excluded$34 = [
 * https://mui.com/components/tooltips/#disabled-elements
 */
 const Tooltip = (0, react.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 = {
@@ -9288,7 +9285,7 @@ function mergeClass$1({ props, className, key }) {
 const RowHoverContext = (0, react.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 = [
@@ -9345,7 +9342,7 @@ const StyledCellContent = /*#__PURE__*/ (0, _emotion_styled_base.default)("div",
 } : {
 	name: "zjik7",
 	styles: "display:flex",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$19
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$20
 });
 const StyledCellContentWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { target: "ekxclbn9" })(process.env.NODE_ENV === "production" ? {
 	name: "1d3w5wq",
@@ -9353,7 +9350,7 @@ const StyledCellContentWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)
 } : {
 	name: "1d3w5wq",
 	styles: "width:100%",
-	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$19
+	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$20
 });
 const StyledCellIconWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
 	shouldForwardProp: (prop) => !doNotForwardProps$33.includes(prop),
@@ -9542,9 +9539,9 @@ const StyledCellComponentData = /*#__PURE__*/ (0, _emotion_styled_base.default)(
 }, ";");
 //#endregion
 //#region src/core/CellComponent/index.tsx
-const _excluded$33 = ["children", "as"];
+const _excluded$35 = ["children", "as"];
 const CellComponent = (0, react.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__ */ (0, react_jsx_runtime.jsx)(StyledCellComponentData, _objectSpread2(_objectSpread2({
 		ref,
 		className: "cell-component",
@@ -9648,7 +9645,7 @@ const StyledCellHeaderContainer = /*#__PURE__*/ (0, _emotion_styled_base.default
 }, ";");
 //#endregion
 //#region src/core/CellHeader/index.tsx
-const _excluded$32 = [
+const _excluded$34 = [
 	"as",
 	"children",
 	"shouldShowTooltipOnHover",
@@ -9674,7 +9671,7 @@ const CellHeaderContent = (props) => {
 	});
 };
 const CellHeader = (0, react.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__ */ (0, react_jsx_runtime.jsx)(Tooltip, _objectSpread2(_objectSpread2({
 		arrow: true,
 		placement: "top-start",
@@ -9695,106 +9692,241 @@ const CellHeader = (0, react.forwardRef)((props, ref) => {
 	}, rest), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellHeaderContent, _objectSpread2(_objectSpread2({ hover }, props), {}, { children })) }));
 });
 //#endregion
-//#region src/core/Chip/style.ts
-const small = (props) => {
-	const spaces = getSpaces(props);
-	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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(_mui_material.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(_mui_material.emphasize, background, .15) }),
+			pressed: _objectSpread2(_objectSpread2({}, rest), {}, { background: safely(_mui_material.emphasize, background, .3) }),
+			rest
+		};
+	}
+	const opacity = OUTLINE_BORDER_OPACITY[getMode(props)];
+	const rest = {
+		background,
+		border: safely(_mui_material.alpha, label, opacity),
+		icon,
+		label
+	};
+	return {
+		disabled,
+		hover: _objectSpread2(_objectSpread2({}, rest), {}, { border: label }),
+		pressed: _objectSpread2(_objectSpread2({}, rest), {}, {
+			background: safely(_mui_material.emphasize, background, .15),
+			border: label
+		}),
+		rest
+	};
+}
+function stateColors({ background, border, icon, label }) {
+	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.css)("cursor:pointer;", focusVisibleA11yStyle(props), " &:hover,&.Mui-focusVisible{", stateColors(colors.hover), ";}&:active{", stateColors(colors.pressed), ";}");
+}
+var _ref$4 = process.env.NODE_ENV === "production" ? {
+	name: "7khdib",
+	styles: ".MuiChip-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;position:absolute;width:1px;}"
+} : {
+	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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)(_mui_material.Chip, {
+	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__*/ (0, _emotion_react.css)(size === "small" ? fontBodyXxxxs(props) : fontBodyXs(props), " gap:", spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;height:", height, "px;", iconOnly ? /*#__PURE__*/ (0, _emotion_react.css)("border-radius:", corners === null || corners === void 0 ? void 0 : corners.m, "px;padding:0;width:", height, "px;") : /*#__PURE__*/ (0, _emotion_react.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$4, ";");
+}
+const doNotForwardProps$31 = [
+	"iconOnly",
+	"isInteractive",
+	"sdsStyle",
+	"tagColor"
+];
+const StyledTag$4 = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Chip, {
 	shouldForwardProp: (prop) => !doNotForwardProps$31.includes(prop),
-	target: "edxh7710"
-})("border:none;", (props) => {
-	const { size, status, isRounded } = props;
-	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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 = (0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: TAG_LABEL_TEXT_CLASS,
+			children: label
+		}), showLinkIcon && !isIconOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.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__*/ (0, _emotion_styled_base.default)(Tag, { target: "edxh7710" })((props) => {
+	const spaces = getSpaces(props);
+	const corners = getCorners(props);
+	return /*#__PURE__*/ (0, _emotion_react.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__ */ (0, react_jsx_runtime.jsx)(StyledChip, _objectSpread2({ deleteIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material.Clear, {}) }, props));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledChip, _objectSpread2({}, props));
-};
+const Chip = (0, react.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__ */ (0, react_jsx_runtime.jsx)(StyledChip, _objectSpread2(_objectSpread2({
+		ref,
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `Remove ${label}`
+	}, rest), {}, {
+		color: "accent",
+		deleteIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			sdsIcon: "XMark",
+			sdsSize: "xs"
+		}),
+		label,
+		onClick: handleClick,
+		onDelete,
+		sdsStyle,
+		size: "medium"
+	}));
+});
 //#endregion
 //#region src/core/DropdownMenu/style.ts
 const doNotForwardProps$30 = [
@@ -10658,154 +10790,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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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 ? (0, _mui_material.darken)(colors[1], .3) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPressed,
-		backgroundHover: hasCustomColors ? (0, _mui_material.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: (0, _mui_material.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 (0, _mui_material.alpha)((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .6);
-	if (effectiveIntent === "negative" && theme.palette.mode === "dark") return (0, _mui_material.alpha)((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .65);
-	if (effectiveIntent === "notice" && theme.palette.mode === "light") return (0, _mui_material.alpha)((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .85);
-	return (0, _mui_material.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 ? (0, _mui_material.darken)(colors[1], .3) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPressed,
-		backgroundHover: hasCustomColors ? (0, _mui_material.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 ? (0, _mui_material.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__*/ (0, _emotion_react.css)(focusVisibleA11yStyle(props), " ", type === "secondary" && /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)(_mui_material.Chip, {
-	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__*/ (0, _emotion_react.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__ */ (0, react_jsx_runtime.jsx)(StyledTag$4, _objectSpread2(_objectSpread2({ tagColor: color }, props), {}, { color: "primary" }));
-};
-//#endregion
-//#region src/core/TagFilter/style.ts
-const StyledTag$3 = /*#__PURE__*/ (0, _emotion_styled_base.default)(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__*/ (0, _emotion_react.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__ */ (0, react_jsx_runtime.jsx)(StyledTag$3, _objectSpread2(_objectSpread2({ role: "none presentation" }, props), {}, {
-		deleteIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-			"aria-label": "Delete Tag",
-			sdsStyle: "minimal",
-			sdsType: "secondary",
-			size: "medium",
-			backgroundOnHover: false,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.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;
@@ -10837,10 +10821,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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: chipLabels.map((label) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagFilter, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: chipLabels.map((label) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
 		label,
-		onDelete: () => onDelete(label),
-		onClick: () => onDelete(label)
+		onDelete: () => onDelete(label)
 	}, label)) });
 };
 //#endregion
@@ -10976,7 +10959,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",
@@ -11006,7 +10989,7 @@ const getShowDecorativeBorder = (visualElementType, boundingBox, decorativeBorde
 	return visualElementType === "image" ? boundingBox && decorativeBorder && (imagePadding && imagePosition === "left" || imagePosition === "right") : boundingBox && decorativeBorder;
 };
 const StyledCard = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Card, {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq5"
 })((props) => {
 	var _semanticColors$base, _semanticColors$base2, _semanticColors$accen;
@@ -11020,7 +11003,7 @@ const StyledCard = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)(_mui_material_Button.default, {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq4"
 })((props) => {
 	var _semanticColors$base3, _semanticColors$base4;
@@ -11048,7 +11031,7 @@ const StyledCardActionArea = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mu
     `;
 }, ";");
 const StyledIconMediaWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq3"
 })((props) => {
 	const { boundingBox = true } = props;
@@ -11056,7 +11039,7 @@ const StyledIconMediaWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("
 	return /*#__PURE__*/ (0, _emotion_react.css)(boundingBox ? /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.css)("padding-right:", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;"), ";");
 }, ";");
 const StyledCardContent = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq2"
 })((props) => {
 	const { boundingBox = true, sdsType = "wide", visualElementType } = props;
@@ -11065,7 +11048,7 @@ const StyledCardContent = /*#__PURE__*/ (0, _emotion_styled_base.default)("div",
 	return /*#__PURE__*/ (0, _emotion_react.css)("display:flex;flex-direction:column;min-width:100px;width:100%;height:100%;", boundingBox ? /*#__PURE__*/ (0, _emotion_react.css)("padding:", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;") : /*#__PURE__*/ (0, _emotion_react.css)("padding:", NoBoundingBoxPadding, ";"), ";");
 }, ";");
 const StyledContentCardBody = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.CardContent, {
-	shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$27.includes(prop),
 	target: "e1dovfyq1"
 })(fontBodyS, " ", (props) => {
 	var _semanticColors$base5;
@@ -11088,7 +11071,7 @@ const StyledCardContentAligner = /*#__PURE__*/ (0, _emotion_styled_base.default)
 });
 //#endregion
 //#region src/core/ContentCard/components/ContentCardTitle/style.ts
-const doNotForwardProps$25 = [
+const doNotForwardProps$26 = [
 	"visualElement",
 	"sdsType",
 	"imagePosition",
@@ -11099,7 +11082,7 @@ const doNotForwardProps$25 = [
 	"metadataText",
 	"contentBlock"
 ];
-const StyledTitleWrapper = (0, _mui_material.styled)("div", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledTitleWrapper = (0, _mui_material.styled)("div", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${(props) => {
 	const spaces = getSpaces(props);
 	return `
@@ -11109,7 +11092,7 @@ const StyledTitleWrapper = (0, _mui_material.styled)("div", { shouldForwardProp:
     `;
 }}
 `;
-const StyledOverlineText = (0, _mui_material.styled)("p", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledOverlineText = (0, _mui_material.styled)("p", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${fontCapsXxxs}
   ${(props) => {
 	var _semanticColors$base;
@@ -11120,7 +11103,7 @@ const StyledOverlineText = (0, _mui_material.styled)("p", { shouldForwardProp: (
     `;
 }}
 `;
-const StyledTitleText = (0, _mui_material.styled)("p", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledTitleText = (0, _mui_material.styled)("p", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${fontHeaderXl}
   ${(props) => {
 	var _semanticColors$base2;
@@ -11131,7 +11114,7 @@ const StyledTitleText = (0, _mui_material.styled)("p", { shouldForwardProp: (pro
     `;
 }}
 `;
-const StyledSubtitleText = (0, _mui_material.styled)("p", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledSubtitleText = (0, _mui_material.styled)("p", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${fontHeaderM}
   ${(props) => {
 	var _semanticColors$base3;
@@ -11142,7 +11125,7 @@ const StyledSubtitleText = (0, _mui_material.styled)("p", { shouldForwardProp: (
     `;
 }}
 `;
-const StyledMetadataText = (0, _mui_material.styled)("p", { shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop) })`
+const StyledMetadataText = (0, _mui_material.styled)("p", { shouldForwardProp: (prop) => !doNotForwardProps$26.includes(prop) })`
   ${fontBodyXxs}
   ${(props) => {
 	var _semanticColors$base4;
@@ -11198,9 +11181,9 @@ const ContentCardTitle = (0, react.forwardRef)(function ContentCardTitle(props,
 });
 //#endregion
 //#region src/core/ContentCard/components/ContentCardActions/style.ts
-const doNotForwardProps$24 = ["buttonsPosition"];
+const doNotForwardProps$25 = ["buttonsPosition"];
 const StyledCardActions = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.CardActions, {
-	shouldForwardProp: (prop) => !doNotForwardProps$24.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$25.includes(prop),
 	target: "ewfyato0"
 })((props) => {
 	const { buttonsPosition = "left" } = props;
@@ -11271,7 +11254,7 @@ const ContentCardActions = (0, react.forwardRef)(function ContentCardActions(pro
 });
 //#endregion
 //#region src/core/ContentCard/components/ContentCardImageMedia/style.ts
-const doNotForwardProps$23 = [
+const doNotForwardProps$24 = [
 	"imagePadding",
 	"boundingBox",
 	"sdsType",
@@ -11279,7 +11262,7 @@ const doNotForwardProps$23 = [
 	"image",
 	"imagePosition"
 ];
-const StyledImageMediaWrapper = (0, _mui_material.styled)("div", { shouldForwardProp: (prop) => !doNotForwardProps$23.includes(prop) })`
+const StyledImageMediaWrapper = (0, _mui_material.styled)("div", { shouldForwardProp: (prop) => !doNotForwardProps$24.includes(prop) })`
   ${(props) => {
 	const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left" } = props;
 	const spaces = getSpaces(props);
@@ -11454,9 +11437,9 @@ const ContentCard = react.default.forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/core/Dialog/components/DialogPaper/style.ts
-const doNotForwardProps$22 = ["sdsSize"];
+const doNotForwardProps$23 = ["sdsSize"];
 const StyledPaper$2 = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Paper, {
-	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$23.includes(prop),
 	target: "e3jjuqo0"
 })("&{", paperDimensions, " ", (props) => {
 	var _semanticColors$base, _semanticColors$base2;
@@ -11578,9 +11561,9 @@ const CloseButton = (0, react.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__*/ (0, _emotion_styled_base.default)(_mui_material.DialogTitle, {
-	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
 	target: "e18l2rxq3"
 })("padding:0;", (props) => {
 	const { sdsSize } = props;
@@ -11591,7 +11574,7 @@ const StyledDialogTitle = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_m
     `;
 }, ";");
 const Title = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Typography, {
-	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
 	target: "e18l2rxq2"
 })((props) => {
 	var _semanticColors$base;
@@ -11601,7 +11584,7 @@ const Title = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Typo
 	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__*/ (0, _emotion_styled_base.default)(_mui_material.Typography, {
-	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
 	target: "e18l2rxq1"
 })((props) => {
 	var _semanticColors$base2;
@@ -11614,7 +11597,7 @@ const Subtitle = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.T
       `];
 }, ";");
 const Overline = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Typography, {
-	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$22.includes(prop),
 	target: "e18l2rxq0"
 })((props) => {
 	var _semanticColors$base3;
@@ -11670,9 +11653,9 @@ const DialogTitle = (0, react.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__*/ (0, _emotion_styled_base.default)(_mui_material.DialogActions, {
-	shouldForwardProp: (prop) => !doNotForwardProps$20.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$21.includes(prop),
 	target: "esa0jqu0"
 })("padding:0;", (props) => {
 	const spaces = getSpaces(props);
@@ -11742,9 +11725,9 @@ const Dialog = (0, react.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__*/ (0, _emotion_styled_base.default)(_mui_material.DialogContent, {
-	shouldForwardProp: (prop) => !doNotForwardProps$19.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$20.includes(prop),
 	target: "e1ub36ac0"
 })(fontBodyS, " padding:0;");
 //#endregion
@@ -11802,7 +11785,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",
@@ -11830,7 +11813,7 @@ const getResponsivePadding = (props) => {
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)("section", {
-	shouldForwardProp: (prop) => !doNotForwardProps$18.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$19.includes(prop),
 	target: "e1wdq27g10"
 })((props) => {
 	const { heroHeight = "fit-content", overlayContentPosition, backgroundFillColor } = props;
@@ -12997,15 +12980,56 @@ const IntentMessage = (props) => {
 	}, index))] }));
 };
 //#endregion
+//#region src/core/Popover/style.ts
+const StyledPopover = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Popover, { target: "e89mz5z0" })("& .", _mui_material.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 = (0, react.forwardRef)(function Popover(props, ref) {
+	const spaces = getSpaces({ theme: (0, _mui_material.useTheme)() });
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__*/ (0, _emotion_styled_base.default)("div", { target: "ezuih624" })("display:flex;flex-wrap:wrap;align-items:center;", (props) => {
+const LegendContainer = /*#__PURE__*/ (0, _emotion_styled_base.default)("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__*/ (0, _emotion_styled_base.default)("div", { target: "ezuih623" })((props) => {
+const LegendItem = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { target: "ezuih624" })((props) => {
 	var _semanticColors$base, _semanticColors$base2, _semanticColors$base3, _semanticColors$base4;
 	const { isSelected, disabled, isHovered } = props;
 	const spaces = getSpaces(props);
@@ -13026,13 +13050,13 @@ const LegendItem = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { targ
       }
     `;
 }, ";");
-const LegendIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { target: "ezuih622" })((props) => {
+const LegendIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -13041,14 +13065,14 @@ const LegendIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", { targ
       margin-right: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
     `;
 }, ";");
-const LegendLabel = /*#__PURE__*/ (0, _emotion_styled_base.default)("span", { target: "ezuih621" })(fontBodyMediumXxxs, " ", (props) => {
+const LegendLabel = /*#__PURE__*/ (0, _emotion_styled_base.default)("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__*/ (0, _emotion_styled_base.default)("span", { target: "ezuih620" })(fontBodyMediumXxxs, " ", (props) => {
+const LegendValue = /*#__PURE__*/ (0, _emotion_styled_base.default)("span", { target: "ezuih621" })(fontBodyXxxxs, " ", (props) => {
 	var _semanticColors$base6;
 	const semanticColors = getSemanticColors(props);
 	const spaces = getSpaces(props);
@@ -13057,6 +13081,18 @@ const LegendValue = /*#__PURE__*/ (0, _emotion_styled_base.default)("span", { ta
       margin-left: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
     `;
 }, ";");
+const StyledLegendPopover = /*#__PURE__*/ (0, _emotion_styled_base.default)(Popover, { target: "ezuih620" })("& .", _mui_material.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 = [
@@ -13068,14 +13104,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 = (0, _mui_material.useTheme)();
 	const [internalHoveredIndex, setInternalHoveredIndex] = (0, react.useState)(null);
+	const [menuAnchor, setMenuAnchor] = (0, react.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);
@@ -13086,8 +13127,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;
@@ -13097,22 +13143,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__ */ (0, react_jsx_runtime.jsx)(LegendContainer, _objectSpread2(_objectSpread2({}, rest), {}, { children: items.map((item, index) => {
-		const isHovered = hoveredIndex === index;
-		const isSelected = selectedIndices.includes(index);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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,
@@ -13131,14 +13183,28 @@ const Legend = (props) => {
 				})
 			]
 		}, `${item.name}-${index}`);
-	}) }));
+	}) })), hasOverflowMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLegendPopover, {
+		open: menuAnchor !== null,
+		anchorEl: menuAnchor,
+		onClose: () => setMenuAnchor(null),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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"
@@ -13167,7 +13233,7 @@ const extraSmallStyle = (props) => {
 };
 const StyledLink = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Link, {
 	shouldForwardProp: (prop) => {
-		return !doNotForwardProps$17.includes(prop.toString());
+		return !doNotForwardProps$18.includes(prop.toString());
 	},
 	target: "ecbcrkq0"
 })("all:unset;", focusVisibleA11yStyle, " ", (props) => {
@@ -13190,9 +13256,9 @@ const Link = (0, react.forwardRef)((props, ref) => {
 });
 //#endregion
 //#region src/core/List/style.ts
-const doNotForwardProps$16 = ["marginBottom", "ordered"];
+const doNotForwardProps$17 = ["marginBottom", "ordered"];
 const StyledList = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.List, {
-	shouldForwardProp: (prop) => !doNotForwardProps$16.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$17.includes(prop),
 	target: "e1ch6n580"
 })(".MuiListSubheader-root{", propsToMarginBottom$1, ";}", (props) => {
 	if (!props.ordered) return "";
@@ -13235,13 +13301,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__*/ (0, _emotion_styled_base.default)(_mui_material.ListItem, {
-	shouldForwardProp: (prop) => !doNotForwardProps$15.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$16.includes(prop),
 	target: "evkbwij1"
 })(propsToMarginBottom, " ", propsToFontBody, " padding:0;", (props) => {
 	const { ordered } = props;
@@ -13334,9 +13400,9 @@ const tag = (props) => {
 	const semanticColors = getSemanticColors(props);
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$14.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$15.includes(prop),
 	target: "egvgfho0"
 })((props) => {
 	const { sdsStyle } = props;
@@ -13406,17 +13472,17 @@ const StyledMenuItem = /*#__PURE__*/ (0, _emotion_styled_base.default)(MenuItem,
 	styles: "width:100%",
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$11
 });
-const doNotForwardProps$13 = [
+const doNotForwardProps$14 = [
 	"search",
 	"InputBaseProps",
 	"keepSearchOnSelect"
 ];
 const StyledAutocomplete = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Autocomplete, {
-	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__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$14.includes(prop),
 	target: "ezmiyu41"
 })((props) => {
 	const { search } = props;
@@ -13437,7 +13503,7 @@ const InputBaseWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("div",
     `;
 }, ";");
 const StyledMenuInputSearch = /*#__PURE__*/ (0, _emotion_styled_base.default)(InputSearch, {
-	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$14.includes(prop),
 	target: "ezmiyu40"
 })("&&{margin:0;caret-color:", ({ search }) => search ? "auto" : "transparent", ";.", _mui_material.inputBaseClasses.root, "{width:100%;padding:0;padding-right:14px!important;}}");
 //#endregion
@@ -13521,9 +13587,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__*/ (0, _emotion_styled_base.default)("footer", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi8"
 })((props) => {
 	const { isNarrow } = props;
@@ -13541,7 +13607,7 @@ const StyledFooter = /*#__PURE__*/ (0, _emotion_styled_base.default)("footer", {
     `;
 }, ";");
 const StyledLogoWrapper$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi7"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -13567,7 +13633,7 @@ const StyledLogoWrapper$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)("div
         `];
 }, ";}");
 const StyledNavSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi6"
 })((props) => {
 	const { isNarrow } = props;
@@ -13588,7 +13654,7 @@ const StyledNavSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("div",
     `;
 }, ";");
 const StyledTopSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi5"
 })((props) => {
 	const { isNarrow } = props;
@@ -13617,7 +13683,7 @@ const StyledTopSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("div",
     `;
 }, ";");
 const StyledLinkSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -13638,7 +13704,7 @@ const StyledMobileLinkRow = /*#__PURE__*/ (0, _emotion_styled_base.default)("div
     `;
 }, ";");
 const StyledImageSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$12.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$13.includes(prop),
 	target: "e1s7ulzi2"
 })("align-items:center;display:flex;", (props) => {
 	const { isNarrow } = props;
@@ -13662,7 +13728,7 @@ const StyledMobileImageRow = /*#__PURE__*/ (0, _emotion_styled_base.default)("di
     `;
 }, ";");
 const StyledBottomSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -13677,7 +13743,7 @@ const StyledBottomSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("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);
@@ -13696,7 +13762,7 @@ const NarrowNavItemLinkStyles = (props) => {
   `;
 };
 const StyledNavItemLink = /*#__PURE__*/ (0, _emotion_styled_base.default)(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;
@@ -13736,9 +13802,9 @@ const NavItem = (0, react.memo)(({ item, hasInvertedStyle, isNarrow }) => /* @__
 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__*/ (0, _emotion_styled_base.default)(Link, {
-	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$11.includes(prop),
 	target: "eoqhglp1"
 })(fontBodyXxs, " ", (props) => {
 	var _semanticColors$accen;
@@ -13776,7 +13842,7 @@ const StyledLinkItemLink = /*#__PURE__*/ (0, _emotion_styled_base.default)(Link,
     `;
 }, ";");
 const StyledDivider$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Divider, {
-	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$11.includes(prop),
 	target: "eoqhglp0"
 })((props) => {
 	const semanticColors = getSemanticColors(props);
@@ -13948,9 +14014,9 @@ function NavigationFooter(_ref) {
 				logo,
 				title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: title }),
 				tag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
-					tagColor,
+					color: tagColor,
 					label: tag,
-					hover: false
+					size: "small"
 				})
 			]
 		});
@@ -14012,7 +14078,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",
@@ -14033,7 +14099,7 @@ const StyledTopComponentSlot = /*#__PURE__*/ (0, _emotion_styled_base.default)("
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$10
 });
 const StyledAppBar = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.AppBar, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g34"
 })((props) => {
 	const colors = getSemanticColors(props);
@@ -14059,7 +14125,7 @@ const NarrowToolbar = (props) => {
   `;
 };
 const StyledToolbar = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Toolbar, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g33"
 })((props) => {
 	const { isNarrow } = props;
@@ -14075,7 +14141,7 @@ const StyledToolbar = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_mater
     `;
 }, ";");
 const StyledHeaderButton = /*#__PURE__*/ (0, _emotion_styled_base.default)(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;
@@ -14116,7 +14182,7 @@ const invertedNarrowButtonStyles = (props) => {
   `;
 };
 const StyledNarrowIconButton = /*#__PURE__*/ (0, _emotion_styled_base.default)(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
 	target: "e1bn4x3g29"
 })((props) => {
 	const { hasInvertedStyle, isNarrow } = props;
@@ -14144,7 +14210,7 @@ const invertedWideButtonStyles = (props) => {
   `;
 };
 const StyledWideIconButton = /*#__PURE__*/ (0, _emotion_styled_base.default)(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
 	target: "e1bn4x3g28"
 })((props) => {
 	const { hasInvertedStyle } = props;
@@ -14154,7 +14220,7 @@ const StyledWideIconButton = /*#__PURE__*/ (0, _emotion_styled_base.default)(But
     `;
 }, ";");
 const StyledLogoLinkWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)(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;
@@ -14179,7 +14245,7 @@ const NarrowTitleContainer = () => {
   `;
 };
 const StyledTitleContainer = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -14195,7 +14261,7 @@ const StyledTitleContainer = /*#__PURE__*/ (0, _emotion_styled_base.default)("di
     `;
 }, ";");
 const StyledTitleTagWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g24"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -14211,7 +14277,7 @@ const StyledTitleTagWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("d
       }
     `;
 }, ";");
-const StyledTag$2 = /*#__PURE__*/ (0, _emotion_styled_base.default)(Tag, { target: "e1bn4x3g23" })(process.env.NODE_ENV === "production" ? {
+const StyledTag$3 = /*#__PURE__*/ (0, _emotion_styled_base.default)(Tag, { target: "e1bn4x3g23" })(process.env.NODE_ENV === "production" ? {
 	name: "ti75j2",
 	styles: "margin:0"
 } : {
@@ -14220,7 +14286,7 @@ const StyledTag$2 = /*#__PURE__*/ (0, _emotion_styled_base.default)(Tag, { targe
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$10
 });
 const StyledPrimaryNavContainer = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -14236,7 +14302,7 @@ const StyledPrimaryNavContainer = /*#__PURE__*/ (0, _emotion_styled_base.default
     `;
 }, ";");
 const StyledSearch = /*#__PURE__*/ (0, _emotion_styled_base.default)(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;
@@ -14346,7 +14412,7 @@ const NarrowButtonStyles = (props) => {
   `;
 };
 const StyledButtonSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -14360,7 +14426,7 @@ const StyledButtonSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("sec
 }, ";");
 const StyledDrawer$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Drawer, {
 	shouldForwardProp: (prop) => ![
-		...doNotForwardProps$9,
+		...doNotForwardProps$10,
 		"sdsStyle",
 		"topOffset"
 	].includes(prop),
@@ -14383,7 +14449,7 @@ const StyledDrawer$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_mate
     `;
 }, ";");
 const StyledDrawerContent = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g18"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -14396,7 +14462,7 @@ const StyledDrawerContent = /*#__PURE__*/ (0, _emotion_styled_base.default)("div
     `;
 }, ";");
 const StyledNarrowHamburgerMenuButton = /*#__PURE__*/ (0, _emotion_styled_base.default)(Button, {
-	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$10.includes(prop),
 	target: "e1bn4x3g17"
 })((props) => {
 	var _iconSizes$l, _iconSizes$l2;
@@ -14436,7 +14502,7 @@ const DrawerAccordionStyles = (props) => {
   `;
 };
 const StyledAccordion = /*#__PURE__*/ (0, _emotion_styled_base.default)(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;
@@ -14549,7 +14615,7 @@ const StyledAccordion = /*#__PURE__*/ (0, _emotion_styled_base.default)(Accordio
     `;
 }, ";");
 const StyledSectionDivider = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Divider, {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g15"
 })((props) => {
 	const semanticColors = getSemanticColors(props);
@@ -14561,7 +14627,7 @@ const StyledSectionDivider = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mu
 }, ";");
 const StyledMegaMenuDrawer = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Drawer, {
 	shouldForwardProp: (prop) => ![
-		...doNotForwardProps$9,
+		...doNotForwardProps$10,
 		"sdsStyle",
 		"topOffset"
 	].includes(prop),
@@ -14597,7 +14663,7 @@ const StyledMegaMenuDrawer = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mu
     `;
 }, ";");
 const StyledMegaMenuContent = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g13"
 })((props) => {
 	const { hasInvertedStyle } = props;
@@ -14617,7 +14683,7 @@ const StyledMegaMenuContent = /*#__PURE__*/ (0, _emotion_styled_base.default)("d
 }, ";");
 const StyledHoverDrawerColumn = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
 	shouldForwardProp: (prop) => ![
-		...doNotForwardProps$9,
+		...doNotForwardProps$10,
 		"sdsStyle",
 		"totalColumns"
 	].includes(prop),
@@ -14650,7 +14716,7 @@ const StyledContentWrapper = /*#__PURE__*/ (0, _emotion_styled_base.default)("di
     `;
 }, ";");
 const StyledHoverDrawerColumnHeader = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g10"
 })((props) => {
 	const { hasInvertedStyle } = props;
@@ -14665,7 +14731,7 @@ const StyledHoverDrawerColumnHeader = /*#__PURE__*/ (0, _emotion_styled_base.def
     `;
 }, ";");
 const StyledHoverDrawerItem = /*#__PURE__*/ (0, _emotion_styled_base.default)(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;
@@ -14707,7 +14773,7 @@ const StyledHoverDrawerItem = /*#__PURE__*/ (0, _emotion_styled_base.default)(Bu
     `;
 }, ";");
 const StyledHoverDrawerItemContent = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g8"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -14719,7 +14785,7 @@ const StyledHoverDrawerItemContent = /*#__PURE__*/ (0, _emotion_styled_base.defa
     `;
 }, ";");
 const StyledHoverDrawerItemIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g7"
 })((props) => {
 	var _semanticColors$accen7, _semanticColors$accen8;
@@ -14739,7 +14805,7 @@ const StyledHoverDrawerItemIcon = /*#__PURE__*/ (0, _emotion_styled_base.default
     `;
 }, ";");
 const StyledHoverDrawerItemText = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g6"
 })(() => {
 	return _mui_material.css`
@@ -14751,7 +14817,7 @@ const StyledHoverDrawerItemText = /*#__PURE__*/ (0, _emotion_styled_base.default
     `;
 }, ";");
 const EmptyIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -14766,7 +14832,7 @@ const EmptyIcon = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
     `;
 }, ";");
 const StyledHoverDrawerItemTitle = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g4"
 })((props) => {
 	const { hasInvertedStyle, hasDetails } = props;
@@ -14786,7 +14852,7 @@ const StyledHoverDrawerItemTitle = /*#__PURE__*/ (0, _emotion_styled_base.defaul
     `;
 }, ";");
 const StyledHoverDrawerItemDetails = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g3"
 })((props) => {
 	const { hasInvertedStyle } = props;
@@ -14801,7 +14867,7 @@ const StyledHoverDrawerItemDetails = /*#__PURE__*/ (0, _emotion_styled_base.defa
     `;
 }, ";");
 const StyledHoverDrawerActions = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g2"
 })((props) => {
 	const spaces = getSpaces(props);
@@ -14830,7 +14896,7 @@ const StyledButton = /*#__PURE__*/ (0, _emotion_styled_base.default)(Button, { t
     `;
 }, ";");
 const StyledHoverDrawerContainer = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => ![...doNotForwardProps$9, "sdsStyle"].includes(prop),
+	shouldForwardProp: (prop) => ![...doNotForwardProps$10, "sdsStyle"].includes(prop),
 	target: "e1bn4x3g0"
 })(process.env.NODE_ENV === "production" ? {
 	name: "bjn8wh",
@@ -14847,7 +14913,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__$9() {
 }
 process.env.NODE_ENV;
 process.env.NODE_ENV;
-const StyledTag$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)(Tag, { target: "etq4jsl1" })(process.env.NODE_ENV === "production" ? {
+const StyledTag$2 = /*#__PURE__*/ (0, _emotion_styled_base.default)(Tag, { target: "etq4jsl1" })(process.env.NODE_ENV === "production" ? {
 	name: "ti75j2",
 	styles: "margin:0"
 } : {
@@ -14860,7 +14926,7 @@ const StyledTag$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)(Tag, { targe
 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",
@@ -14899,7 +14965,7 @@ const NarrowNavItemStyles = (props) => {
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)(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;
@@ -14915,7 +14981,7 @@ const UnifiedNavItem = /*#__PURE__*/ (0, _emotion_styled_base.default)(Button, {
 	return [navVariant === "secondary" && (active ? fontBodySemiboldS(props) : fontBodyMediumS(props)), /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)("span", {
-	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$9.includes(prop),
 	target: "e810m80"
 })((props) => {
 	const { hasInvertedStyle, active, isNarrow } = props;
@@ -14930,7 +14996,7 @@ const StyledLabel = /*#__PURE__*/ (0, _emotion_styled_base.default)("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",
@@ -14942,7 +15008,7 @@ const NarrowStyledSection = (props) => {
 	return /*#__PURE__*/ (0, _emotion_react.css)("align-items:start;flex-direction:column;margin-top:", spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;");
 };
 const StyledSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("section", {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl6"
 })("display:flex;align-items:center;", (props) => {
 	const { isNarrow } = props;
@@ -14950,7 +15016,7 @@ const StyledSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("section",
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)(ListSubheader, {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl5"
 })((props) => {
 	const { isNarrow, hasInvertedStyle, sdsStyle } = props;
@@ -14970,7 +15036,7 @@ const StyledSectionHeader = /*#__PURE__*/ (0, _emotion_styled_base.default)(List
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)(AccordionDetails, {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl4"
 })((props) => {
 	const { sdsStyle } = props;
@@ -14986,7 +15052,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 	toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 const StyledAccordionSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl3"
 })((props) => {
 	const { sdsStyle, hasInvertedStyle } = props;
@@ -15000,7 +15066,7 @@ const StyledAccordionSection = /*#__PURE__*/ (0, _emotion_styled_base.default)("
 	return _ref2;
 }, ";");
 const StyledDivider = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Divider, {
-	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$8.includes(prop),
 	target: "e13tbovl2"
 })((props) => {
 	const { hasSection, isNarrow, hasInvertedStyle } = props;
@@ -15125,7 +15191,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",
@@ -15134,7 +15200,7 @@ const doNotForwardProps$6 = [
 	"sdsStyle"
 ];
 const StyledDrawerNavItem = /*#__PURE__*/ (0, _emotion_styled_base.default)(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;
@@ -15145,14 +15211,14 @@ const StyledDrawerNavItem = /*#__PURE__*/ (0, _emotion_styled_base.default)(Butt
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t3"
 })((props) => {
 	const spaces = getSpaces(props);
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t2"
 })((props) => {
 	var _semanticColors$base3, _semanticColors$base4;
@@ -15162,7 +15228,7 @@ const StyledDrawerNavItemText = /*#__PURE__*/ (0, _emotion_styled_base.default)(
 	return /*#__PURE__*/ (0, _emotion_react.css)(hasDetails ? fontBodySemiboldS(props) : fontBodyMediumS(props), " color:", textColor, ";overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:24px;");
 }, ";");
 const StyledDrawerNavItemCaption = /*#__PURE__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t1"
 })((props) => {
 	var _semanticColors$base5, _semanticColors$base6;
@@ -15171,7 +15237,7 @@ const StyledDrawerNavItemCaption = /*#__PURE__*/ (0, _emotion_styled_base.defaul
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)("div", {
-	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$7.includes(prop),
 	target: "e1s6tb7t0"
 })((props) => {
 	const { iconSize } = props;
@@ -15640,10 +15706,10 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
 						isNarrow,
 						children: label
 					}),
-					tag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTag$1, {
+					tag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTag$2, {
 						label: tag,
 						color: tagColor,
-						hover: false
+						size: "small"
 					})
 				]
 			})
@@ -15740,7 +15806,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__*/ (0, _emotion_styled_base.default)(Tag, { target: "es7myp0" })(process.env.NODE_ENV === "production" ? {
+const StyledTag$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)(Tag, { target: "es7myp0" })(process.env.NODE_ENV === "production" ? {
 	name: "ti75j2",
 	styles: "margin:0"
 } : {
@@ -15931,10 +15997,10 @@ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNa
 			sdsStyle: "minimal",
 			navVariant: "secondary",
 			size: "medium",
-			children: [label, tag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTag, {
+			children: [label, tag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTag$1, {
 				label: tag,
 				color: tagColor,
-				hover: false
+				size: "small"
 			})]
 		}), key);
 	};
@@ -16205,10 +16271,10 @@ const NavigationHeader = (0, react.forwardRef)((props, ref) => {
 		let logoNode = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTitleContainer, {
 			hasInvertedStyle,
 			isNarrow: dimensions.isNarrow,
-			children: [logo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLogoWrapper, { children: logo }), (title || tag) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTitleTagWrapper, { children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: title }), tag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTag$2, {
+			children: [logo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLogoWrapper, { children: logo }), (title || tag) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTitleTagWrapper, { children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: title }), tag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTag$3, {
 				color: tagColor,
 				label: tag,
-				hover: false
+				size: "small"
 			})] })]
 		});
 		if (logoLinkComponent || logoUrl) logoNode = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLogoLinkWrapper, _objectSpread2(_objectSpread2({
@@ -16452,14 +16518,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__*/ (0, _emotion_styled_base.default)(_mui_material.Tabs, {
-	shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$6.includes(prop),
 	target: "e1svjln41"
 })((props) => {
 	var _semanticColors$base, _semanticColors$accen;
@@ -16498,7 +16564,7 @@ const StyledTabs$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_materi
     `;
 }, ";");
 const StyledTab$1 = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Tab, {
-	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;
@@ -16734,9 +16800,9 @@ const NavigationJumpTo = (0, react.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__*/ (0, _emotion_styled_base.default)(_mui_material.Alert, {
-	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;
@@ -16919,7 +16985,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",
@@ -16953,7 +17019,7 @@ const StyledPaginationButton = /*#__PURE__*/ (0, _emotion_styled_base.default)(B
     `;
 }, ";");
 const StyledPaginationChevronList = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -16994,7 +17060,7 @@ const StyledPaginationChevronList = /*#__PURE__*/ (0, _emotion_styled_base.defau
     `;
 }, ";");
 const StyledPagination = /*#__PURE__*/ (0, _emotion_styled_base.default)("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) => {
@@ -17003,7 +17069,7 @@ const selectedPageStyle = (props) => {
 	return /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)("li", {
-	shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$4.includes(prop),
 	target: "e61vbx1"
 })(fontTabularMediumS, " ", (props) => {
 	var _semanticColors$base12, _semanticColors$base13, _semanticColors$base14;
@@ -17231,7 +17297,7 @@ const PANEL_TRANSITION_DURATION_MS = {
 };
 //#endregion
 //#region src/core/Panel/style.ts
-const doNotForwardProps$2 = [
+const doNotForwardProps$3 = [
 	"sdsType",
 	"position",
 	"width",
@@ -17256,7 +17322,7 @@ const overlayPanelStyles = (props) => {
 	return /*#__PURE__*/ (0, _emotion_react.css)("pointer-events:none;.", _mui_material.drawerClasses.paper, ",.", _mui_material.backdropClasses.root, "{pointer-events:auto;}.", _mui_material.drawerClasses.paper, "{background-color:", semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundPrimary, ";padding:0 ", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px ", spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;min-width:", 320, "px;min-height:", 320, "px;box-shadow:", shadows === null || shadows === void 0 ? void 0 : shadows.l, ";background-image:none;}");
 };
 const StyledDrawer = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Drawer, {
-	shouldForwardProp: (prop) => !doNotForwardProps$2.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop),
 	target: "ejokiai1"
 })((props) => {
 	const { sdsType = "basic", anchor = "left", width } = props;
@@ -17389,46 +17455,6 @@ const Panel = react.default.forwardRef((props, ref) => {
 	);
 });
 //#endregion
-//#region src/core/Popover/style.ts
-const StyledPopover = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.Popover, { target: "e89mz5z0" })("& .", _mui_material.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 = (0, react.forwardRef)(function Popover(props, ref) {
-	const spaces = getSpaces({ theme: (0, _mui_material.useTheme)() });
-	return /* @__PURE__ */ (0, react_jsx_runtime.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).";
@@ -17449,7 +17475,7 @@ const Table = (0, react.forwardRef)((props, ref) => {
 });
 //#endregion
 //#region src/core/TableRow/style.ts
-const doNotForwardProps$1 = [
+const doNotForwardProps$2 = [
 	"rowHeight",
 	"useDivider",
 	"shouldShowTooltipOnHover",
@@ -17533,7 +17559,7 @@ const selectedStyled = (props) => {
   `;
 };
 const StyledTableRow = /*#__PURE__*/ (0, _emotion_styled_base.default)("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;
@@ -18302,9 +18328,9 @@ const PreComposedTable = (0, react.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__*/ (0, _emotion_styled_base.default)(_mui_material.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;
@@ -18358,7 +18384,7 @@ const StyledSegmentedControl = /*#__PURE__*/ (0, _emotion_styled_base.default)(_
     `;
 }, ";");
 const StyledToggleButton = /*#__PURE__*/ (0, _emotion_styled_base.default)(_mui_material.ToggleButton, {
-	shouldForwardProp: (prop) => !doNotForwardProps.includes(prop),
+	shouldForwardProp: (prop) => !doNotForwardProps$1.includes(prop),
 	target: "enkxsnk2"
 })((props) => {
 	var _semanticColors$base11;
@@ -18551,6 +18577,158 @@ const Tab = (0, react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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__*/ (0, _emotion_react.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 ? (0, _mui_material.darken)(colors[1], .3) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPressed,
+		backgroundHover: hasCustomColors ? (0, _mui_material.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: (0, _mui_material.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 (0, _mui_material.alpha)((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .6);
+	if (effectiveIntent === "negative" && theme.palette.mode === "dark") return (0, _mui_material.alpha)((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .65);
+	if (effectiveIntent === "notice" && theme.palette.mode === "light") return (0, _mui_material.alpha)((intentColors === null || intentColors === void 0 ? void 0 : intentColors.foreground) || "#000", .85);
+	return (0, _mui_material.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 ? (0, _mui_material.darken)(colors[1], .3) : intentColors === null || intentColors === void 0 ? void 0 : intentColors.fillPressed,
+		backgroundHover: hasCustomColors ? (0, _mui_material.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 ? (0, _mui_material.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__*/ (0, _emotion_react.css)(focusVisibleA11yStyle(props), " ", type === "secondary" && /*#__PURE__*/ (0, _emotion_react.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__*/ (0, _emotion_styled_base.default)(_mui_material.Chip, {
+	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__*/ (0, _emotion_react.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__ */ (0, react_jsx_runtime.jsx)(StyledTagLegacy, _objectSpread2(_objectSpread2({ tagColor: color }, props), {}, { color: "primary" }));
+};
+//#endregion
+//#region src/core/TagFilter/style.ts
+const StyledTag = /*#__PURE__*/ (0, _emotion_styled_base.default)(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__*/ (0, _emotion_react.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__ */ (0, react_jsx_runtime.jsx)(StyledTag, _objectSpread2(_objectSpread2({ role: "none presentation" }, props), {}, {
+		deleteIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			"aria-label": "Delete Tag",
+			sdsStyle: "minimal",
+			sdsType: "secondary",
+			size: "medium",
+			backgroundOnHover: false,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				sdsIcon: "XMark",
+				sdsSize: "s"
+			})
+		}),
+		color: "info"
+	}));
+};
+//#endregion
 //#region src/core/TooltipCondensed/style.ts
 const indicatorCSS = (props) => {
 	const { indicatorColor } = props;
@@ -22041,6 +22219,8 @@ exports.SDSLightThemeColors = SDSLightThemeColors;
 exports.SDSPaletteDark = SDSPaletteDark;
 exports.SDSPaletteLight = SDSPaletteLight;
 exports.SegmentedControl = SegmentedControl;
+exports.TAG_LABEL_TEXT_CLASS = TAG_LABEL_TEXT_CLASS;
+exports.TAG_LINK_ICON_CLASS = TAG_LINK_ICON_CLASS;
 exports.Tab = Tab;
 exports.Table = Table;
 exports.TableHeader = TableHeader;
@@ -22048,6 +22228,7 @@ exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.TagFilter = TagFilter;
+exports.TagLegacy = TagLegacy;
 exports.Theme = Theme;
 exports.Tooltip = Tooltip;
 exports.TooltipCondensed = TooltipCondensed;