@equinor/eds-core-react 0.16.1 → 0.17.0

package/dist/core-react.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 var styled = require('styled-components');
 var edsTokens = require('@equinor/eds-tokens');
 var jsxRuntime = require('react/jsx-runtime');
@@ -33,7 +33,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ReactDom__namespace = /*#__PURE__*/_interopNamespace(ReactDom);
 
@@ -82,7 +81,7 @@ const {
     compact__standard: compactClickboundHeight$1
   }
 } = edsTokens.tokens;
-const button$1 = {
+const button = {
   background: 'transparent',
   height: buttonHeight,
   typography: { ...buttonTypography,
@@ -446,7 +445,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight_1(button$1, {
+const primary$9 = mergeDeepRight_1(button, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -531,7 +530,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight_1(button$1, {
+const primary$8 = mergeDeepRight_1(button, {
   typography: {
     color: primaryColor$7
   },
@@ -632,7 +631,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight_1(button$1, {
+const primary$7 = mergeDeepRight_1(button, {
   typography: {
     color: primaryColor$6
   },
@@ -711,11 +710,11 @@ const {
     default__base: clicboundHeight,
     compact__standard: compactClickboundHeight
   },
-  shape: shape$2
+  shape: shape$3
 } = edsTokens.tokens;
-const primary$6 = mergeDeepRight_1(button$1, {
-  height: shape$2.icon_button.minHeight,
-  width: shape$2.icon_button.minWidth,
+const primary$6 = mergeDeepRight_1(button, {
+  height: shape$3.icon_button.minHeight,
+  width: shape$3.icon_button.minWidth,
   typography: {
     color: primaryColor$5
   },
@@ -732,7 +731,7 @@ const primary$6 = mergeDeepRight_1(button$1, {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt(shape$2.icon_button.minWidth)) / 2, "px")
+      left: "".concat((parseInt(clicboundHeight) - parseInt(shape$3.icon_button.minWidth)) / 2, "px")
     }
   },
   states: {
@@ -757,13 +756,13 @@ const primary$6 = mergeDeepRight_1(button$1, {
   },
   modes: {
     compact: {
-      height: shape$2._modes.compact.icon_button.minHeight,
-      width: shape$2._modes.compact.icon_button.minWidth,
+      height: shape$3._modes.compact.icon_button.minHeight,
+      width: shape$3._modes.compact.icon_button.minWidth,
       clickbound: {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape$2._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2, "px")
         }
       }
     }
@@ -796,7 +795,7 @@ const danger$2 = mergeDeepRight_1(primary$6, {
   }
 });
 
-const token$6 = {
+const token$5 = {
   primary: {
     contained: primary$9,
     outlined: primary$8,
@@ -972,7 +971,7 @@ const setReactInputValue = (input, value) => {
 };
 
 const useOutsideClick = (el, callback) => {
-  React.useEffect(() => {
+  react.useEffect(() => {
     const handleClick = e => {
       if (el && !el.contains(e.target)) {
         callback(e);
@@ -988,7 +987,7 @@ const useOutsideClick = (el, callback) => {
 
 /** Returns a memoized function that calls passed refs sequentially with passed element */
 const useCombinedRefs = (...refs) => {
-  return React.useCallback(element => refs.forEach(ref => {
+  return react.useCallback(element => refs.forEach(ref => {
     if (typeof ref === 'function') {
       ref(element);
     } else if (ref && typeof ref === 'object') {
@@ -1036,7 +1035,7 @@ var KEY;
 })(KEY || (KEY = {}));
 
 const useGlobalKeyPress = (targetKey, callback) => {
-  React.useEffect(() => {
+  react.useEffect(() => {
     const handleGlobalKeyPress = e => {
       const {
         key
@@ -1057,9 +1056,9 @@ const useGlobalKeyPress = (targetKey, callback) => {
 };
 
 const useId = (idOverride, type) => {
-  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const [defaultId, setDefaultId] = react.useState(idOverride);
   const id = idOverride || defaultId;
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (defaultId == null) {
       setDefaultId("eds-".concat(type ? type + "-" : '').concat(Math.round(Math.random() * 1e5)));
     }
@@ -1068,8 +1067,8 @@ const useId = (idOverride, type) => {
 };
 
 const useIsMounted = () => {
-  const [isMounted, setIsMounted] = React.useState(null);
-  React.useEffect(() => {
+  const [isMounted, setIsMounted] = react.useState(null);
+  react.useEffect(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -1077,7 +1076,7 @@ const useIsMounted = () => {
 };
 
 const useAutoResize = (targetEl, maxHeight) => {
-  React.useEffect(() => {
+  react.useEffect(() => {
     const handleResize = () => {
       targetEl.style.height = 'auto';
       const {
@@ -1112,7 +1111,7 @@ const useAutoResize = (targetEl, maxHeight) => {
   }, [targetEl, maxHeight]);
 };
 
-const useToken = (options, token) => React.useCallback(() => {
+const useToken = (options, token) => react.useCallback(() => {
   const {
     density
   } = options;
@@ -1124,13 +1123,21 @@ const useToken = (options, token) => React.useCallback(() => {
   return token;
 }, [options, token]);
 
-const useHideBodyScroll = overflowState => {
-  React.useEffect(() => {
-    document.body.style.overflow = 'hidden';
+const useHideBodyScroll = active => {
+  const overflowState = react.useRef(document.body.style.overflow);
+  react.useEffect(() => {
+    const originalState = overflowState.current;
+
+    if (active) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = originalState;
+    }
+
     return () => {
-      document.body.style.overflow = overflowState;
+      document.body.style.overflow = originalState;
     };
-  }, []);
+  }, [active]);
 };
 
 const FullWidthCenterContent = styled__default['default'].span.withConfig({
@@ -1141,11 +1148,11 @@ const FullWidthInner = styled__default['default'].span.withConfig({
   displayName: "InnerFullWidth__FullWidthInner",
   componentId: "sc-qeawkb-1"
 })(["height:100%;display:flex;align-items:center;> img:first-child,> svg:first-child{margin-right:8px;}> img:last-child,> svg:last-child{margin-left:8px;}> img:only-child,> svg:only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:32px;}> span:last-child{margin-right:32px;}> span:only-child{margin-right:0;margin-left:0;}"]);
-const InnerFullWidth = /*#__PURE__*/React.forwardRef(function InnerFullWidth({
+const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth({
   children
 }, ref) {
   // We need everything in elements for proper flexing 💪
-  const updatedChildren = React.Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsxRuntime.jsx(FullWidthCenterContent, {
+  const updatedChildren = react.Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsxRuntime.jsx(FullWidthCenterContent, {
     children: child
   }) : child);
   return /*#__PURE__*/jsxRuntime.jsx(FullWidthInner, {
@@ -1157,12 +1164,12 @@ const InnerFullWidth = /*#__PURE__*/React.forwardRef(function InnerFullWidth({
 const initalState$3 = {
   density: 'comfortable'
 };
-const EdsContext = /*#__PURE__*/React.createContext(initalState$3);
+const EdsContext = /*#__PURE__*/react.createContext(initalState$3);
 const EdsProvider = ({
   children,
   density = 'comfortable'
 }) => {
-  const [state, setState] = React.useState({ ...initalState$3,
+  const [state, setState] = react.useState({ ...initalState$3,
     density
   });
 
@@ -1170,7 +1177,7 @@ const EdsProvider = ({
     density
   }));
 
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (typeof density !== 'undefined' && density !== state.density) {
       setDensity(density);
     }
@@ -1183,7 +1190,7 @@ const EdsProvider = ({
     children: children
   });
 };
-const useEds = () => React.useContext(EdsContext);
+const useEds = () => react.useContext(EdsContext);
 
 const getVariant = (tokenSet, variant) => {
   switch (variant) {
@@ -1205,14 +1212,14 @@ const getVariant = (tokenSet, variant) => {
 const getToken$1 = (variant, color) => {
   switch (color) {
     case 'danger':
-      return getVariant(token$6.danger, variant);
+      return getVariant(token$5.danger, variant);
 
     case 'secondary':
-      return getVariant(token$6.secondary, variant);
+      return getVariant(token$5.secondary, variant);
 
     case 'primary':
     default:
-      return getVariant(token$6.primary, variant);
+      return getVariant(token$5.primary, variant);
   }
 };
 
@@ -1239,7 +1246,7 @@ const ButtonBase = styled__default['default'].button.withConfig({
   } = states;
   return styled.css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
-const Button = /*#__PURE__*/React.forwardRef(function Button({
+const Button = /*#__PURE__*/react.forwardRef(function Button({
   color = 'primary',
   variant = 'contained',
   children,
@@ -1280,13 +1287,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
 });
 
 const {
-  typography: typography$i,
+  typography: typography$g,
   colors: colorsToken
 } = edsTokens.tokens;
 const {
   heading,
   paragraph: paragraph$2
-} = typography$i;
+} = typography$g;
 const {
   interactive: {
     primary__resting: {
@@ -1368,7 +1375,7 @@ const findTypography = (variantName, group) => {
     return quickVariants[variantName];
   }
 
-  return typography$i[group][variantName];
+  return typography$g[group][variantName];
 };
 
 const findColor = (inputColor = null) => typeof colors$7[inputColor] === 'undefined' ? inputColor : colors$7[inputColor];
@@ -1391,7 +1398,7 @@ const StyledTypography$1 = styled__default['default'].p.withConfig({
 lines > 0 && styled.css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], lines), ({
   link: link$1
 }) => link$1 && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline)));
-const Typography = /*#__PURE__*/React.forwardRef(function Typography({
+const Typography = /*#__PURE__*/react.forwardRef(function Typography({
   variant = 'body_short',
   children,
   bold,
@@ -1573,7 +1580,7 @@ const TableBase$1 = styled__default['default'].table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
-const Table$1 = /*#__PURE__*/React.forwardRef(function Table({
+const Table$1 = /*#__PURE__*/react.forwardRef(function Table({
   children,
   ...props
 }, ref) {
@@ -1586,13 +1593,13 @@ const Table$1 = /*#__PURE__*/React.forwardRef(function Table({
 const initalState$2 = {
   variant: 'body'
 };
-const InnerContext = /*#__PURE__*/React.createContext(initalState$2);
+const InnerContext = /*#__PURE__*/react.createContext(initalState$2);
 
 const TableBase = styled__default['default'].tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
-const Body = /*#__PURE__*/React.forwardRef(function Body({
+const Body = /*#__PURE__*/react.forwardRef(function Body({
   children,
   ...props
 }, ref) {
@@ -1626,7 +1633,7 @@ const StyledTableCell$1 = styled__default['default'].td.withConfig({
   const base = styled.css(["min-height:", ";height:", ";background:", ";", " ", " ", ""], height, height, backgroundColor, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
-const TableDataCell = /*#__PURE__*/React.forwardRef(function TableDataCell({
+const TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell({
   children,
   variant = 'text',
   ...rest
@@ -1696,7 +1703,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const token$5 = {
+const token$4 = {
   height: '48px',
   background: backgroundColor$4,
   typography: { ...cellTypography,
@@ -1788,13 +1795,13 @@ const StyledTableCell = styled__default['default'].th.withConfig({
     sortStylingActive = styled.css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? styled.css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
   }
 
-  return styled.css(["min-height:", ";height:", ";background:", ";", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? styled.css(["position:sticky;top:0;"]) : '');
+  return styled.css(["min-height:", ";height:", ";background:", ";", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
 });
 const CellInner = styled__default['default'].div.withConfig({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
 })(["display:flex;align-items:center;"]);
-const TableHeaderCell = /*#__PURE__*/React.forwardRef(function TableHeaderCell({
+const TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell({
   children,
   sort,
   ...rest
@@ -1804,7 +1811,7 @@ const TableHeaderCell = /*#__PURE__*/React.forwardRef(function TableHeaderCell({
   } = useEds();
   const token = useToken({
     density
-  }, token$5);
+  }, token$4);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell, {
@@ -1818,7 +1825,7 @@ const TableHeaderCell = /*#__PURE__*/React.forwardRef(function TableHeaderCell({
   });
 });
 
-const Cell = /*#__PURE__*/React.forwardRef(function Cell({ ...rest
+const Cell = /*#__PURE__*/react.forwardRef(function Cell({ ...rest
 }, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Consumer, {
     children: ({
@@ -1858,7 +1865,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const token$4 = {
+const token$3 = {
   background: backgroundColor$3,
   border: {
     type: 'bordergroup',
@@ -1874,8 +1881,8 @@ const token$4 = {
 const StyledTableHead = styled__default['default'].thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
-})(["", " background:", ";"], bordersTemplate(token$4.border), token$4.background);
-const Head = /*#__PURE__*/React.forwardRef(function Head({
+})(["", " background:", ";"], bordersTemplate(token$3.border), token$3.background);
+const Head = /*#__PURE__*/react.forwardRef(function Head({
   children,
   sticky,
   ...props
@@ -1904,7 +1911,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const token$3 = {
+const token$2 = {
   states: {
     active: {
       background: activeBackgroundColor
@@ -1924,15 +1931,15 @@ const StyledRow = styled__default['default'].tr.withConfig({
   var _token$states$active, _token$states$hover;
 
   return {
-    background: active ? (_token$states$active = token$3.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null,
+    background: active ? (_token$states$active = token$2.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null,
     '@media (hover: hover) and (pointer: fine)': {
       ':hover': {
-        background: (_token$states$hover = token$3.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background
+        background: (_token$states$hover = token$2.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background
       }
     }
   };
 });
-const Row = /*#__PURE__*/React.forwardRef(function Row({ ...props
+const Row = /*#__PURE__*/react.forwardRef(function Row({ ...props
 }, ref) {
   const {
     children
@@ -1951,7 +1958,7 @@ const StyledCaption = styled__default['default'].caption.withConfig({
 }) => ({
   captionSide
 }));
-const Caption = /*#__PURE__*/React.forwardRef(function Caption(props, ref) {
+const Caption = /*#__PURE__*/react.forwardRef(function Caption(props, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledCaption, { ...props,
     ref: ref
   });
@@ -2041,7 +2048,7 @@ const StyledDivider$3 = styled__default['default'].hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
 })(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/React.forwardRef(function Divider({
+const Divider = /*#__PURE__*/react.forwardRef(function Divider({
   color = 'medium',
   variant = 'medium',
   ...rest
@@ -2062,11 +2069,11 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider({
 const initalState$1 = {
   isFocused: false
 };
-const TextFieldContext = /*#__PURE__*/React.createContext(initalState$1);
+const TextFieldContext = /*#__PURE__*/react.createContext(initalState$1);
 const TextFieldProvider = ({
   children
 }) => {
-  const [state, setState] = React.useState(initalState$1);
+  const [state, setState] = react.useState(initalState$1);
 
   const handleFocus = () => {
     setState(prevState => ({ ...prevState,
@@ -2090,13 +2097,13 @@ const TextFieldProvider = ({
     children: children
   });
 };
-const useTextField = () => React.useContext(TextFieldContext);
+const useTextField = () => react.useContext(TextFieldContext);
 
 const {
   colors: {
     ui: {
       background__light: {
-        rgba: background$f
+        rgba: background$d
       }
     },
     text: {
@@ -2120,19 +2127,19 @@ const {
       x_small: x_small$5
     }
   },
-  typography: typography$h,
-  shape: shape$1
+  typography: typography$f,
+  shape: shape$2
 } = edsTokens.tokens;
 const input$2 = {
-  minHeight: shape$1.straight.minHeight,
-  background: background$f,
+  minHeight: shape$2.straight.minHeight,
+  background: background$d,
   spacings: {
     left: small$6,
     right: small$6,
     top: '6px',
     bottom: '6px'
   },
-  typography: { ...typography$h.input.text,
+  typography: { ...typography$f.input.text,
     color: static_icons__default.rgba
   },
   entities: {
@@ -2174,7 +2181,7 @@ const input$2 = {
   boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
   modes: {
     compact: {
-      minHeight: shape$1._modes.compact.straight.minHeight,
+      minHeight: shape$2._modes.compact.straight.minHeight,
       spacings: {
         left: x_small$5,
         right: x_small$5,
@@ -2290,7 +2297,7 @@ const StyledInput = styled__default['default'].input.withConfig({
   } = theme;
   return styled.css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
 });
-const Input$5 = /*#__PURE__*/React.forwardRef(function Input({
+const Input$4 = /*#__PURE__*/react.forwardRef(function Input({
   variant = 'default',
   disabled = false,
   type = 'text',
@@ -2386,7 +2393,7 @@ const StyledIcon$2 = styled__default['default'].div.withConfig({
 
   return styled.css(["&,svg{fill:", ";width:", "px;height:", "px;}"], fill, size, size);
 });
-const InputIcon = /*#__PURE__*/React.forwardRef(function InputIcon({
+const InputIcon = /*#__PURE__*/react.forwardRef(function InputIcon({
   size = 24,
   variant = 'default',
   isDisabled = false,
@@ -2417,7 +2424,7 @@ const InputIcon = /*#__PURE__*/React.forwardRef(function InputIcon({
 
 const {
   colors: colors$5,
-  typography: typography$g,
+  typography: typography$e,
   spacings: {
     comfortable: {
       small: small$5,
@@ -2455,7 +2462,7 @@ const textfield$1 = {
   },
   entities: {
     unit: {
-      typography: { ...typography$g.input.label,
+      typography: { ...typography$e.input.label,
         color: colors$5.text.static_icons__tertiary.hex
       },
       states: {
@@ -2581,7 +2588,7 @@ const StyledTextarea = styled__default['default'].textarea.withConfig({
   displayName: "Textarea__StyledTextarea",
   componentId: "sc-2yjdcc-0"
 })(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, typographyTemplate(input.typography), Variation$2, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
-const Textarea = /*#__PURE__*/React.forwardRef(function Textarea({
+const Textarea = /*#__PURE__*/react.forwardRef(function Textarea({
   variant = 'default',
   disabled = false,
   type = 'text',
@@ -2590,7 +2597,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea({
 }, ref) {
   const actualVariant = variant === 'default' ? 'input' : variant;
   const inputVariant = tokens$6[actualVariant];
-  const [textareaEl, setTextareaEl] = React.useState(null);
+  const [textareaEl, setTextareaEl] = react.useState(null);
   const {
     density
   } = useEds();
@@ -2642,7 +2649,7 @@ const Variation$1 = ({
   return styled.css(["box-shadow:", ";", ""], isFocused ? "none" : variant === 'default' ? "inset 0 -1px 0 0 ".concat(((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)) : "0 0 0 1px ".concat(((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)), isFocused && outlineTemplate(token.states.focus.outline));
 };
 
-const StrippedInput = styled__default['default'](Input$5).withConfig({
+const StrippedInput = styled__default['default'](Input$4).withConfig({
   displayName: "Field__StrippedInput",
   componentId: "sc-455b88-0"
 })(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
@@ -2679,7 +2686,7 @@ const Adornments = styled__default['default'].div.withConfig({
   marginTop: theme.spacings.top,
   alignSelf: 'start'
 });
-const Field = /*#__PURE__*/React.forwardRef(function Field({
+const Field = /*#__PURE__*/react.forwardRef(function Field({
   multiline,
   variant,
   disabled,
@@ -2703,6 +2710,7 @@ const Field = /*#__PURE__*/React.forwardRef(function Field({
   const iconSize = density === 'compact' ? 16 : 24;
   const actualVariant = variant === 'default' ? 'textfield' : variant;
   const inputVariant = tokens$5[actualVariant];
+  const isError = actualVariant === 'error';
 
   const focusHandler = e => {
     handleFocus();
@@ -2726,6 +2734,7 @@ const Field = /*#__PURE__*/React.forwardRef(function Field({
   };
   const inputProps = {
     ref: ref,
+    'aria-invalid': isError,
     type,
     disabled,
     readOnly,
@@ -2761,11 +2770,11 @@ const {
   spacings: {
     comfortable: comfortable$5
   },
-  typography: typography$f
+  typography: typography$d
 } = edsTokens.tokens;
 const label = {
   background: colors$4.ui.background__light.rgba,
-  typography: { ...typography$f.input.label,
+  typography: { ...typography$d.input.label,
     color: colors$4.text.static_icons__tertiary.rgba
   },
   spacings: {
@@ -2793,7 +2802,7 @@ const Text$2 = styled__default['default'].span.withConfig({
   displayName: "Label__Text",
   componentId: "sc-1gi2bcn-1"
 })(["margin:0;"]);
-const Label$1 = /*#__PURE__*/React.forwardRef(function Label(props, ref) {
+const Label$1 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
   const {
     label = '',
     meta,
@@ -2822,11 +2831,11 @@ const {
   spacings: {
     comfortable: comfortable$4
   },
-  typography: typography$e
+  typography: typography$c
 } = edsTokens.tokens;
 const helperText = {
   background: colors$3.ui.background__light.hex,
-  typography: typography$e.input.helper,
+  typography: typography$c.input.helper,
   spacings: {
     comfortable: {
       left: comfortable$4.small,
@@ -2901,7 +2910,7 @@ const Text$1 = styled__default['default'].p.withConfig({
 })(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), ({
   spacings
 }) => spacings.left, Variation);
-const TextfieldHelperText = /*#__PURE__*/React.forwardRef(function TextfieldHelperText({
+const TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelperText({
   helperText: helperText$1,
   icon,
   variant = 'default',
@@ -2941,7 +2950,7 @@ const Container$3 = styled__default['default'].div.withConfig({
   displayName: "TextField__Container",
   componentId: "sc-o1nc07-0"
 })(["min-width:100px;width:100%;"]);
-const TextField = /*#__PURE__*/React.forwardRef(function TextField({
+const TextField = /*#__PURE__*/react.forwardRef(function TextField({
   id,
   label,
   meta,
@@ -2958,7 +2967,9 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField({
   rowsMax,
   ...other
 }, ref) {
+  const helperTextId = useId(null, 'helpertext');
   const inputProps = {
+    'aria-describedby': helperTextId,
     multiline,
     disabled,
     placeholder,
@@ -2971,6 +2982,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField({
     ...other
   };
   const helperProps = {
+    id: helperTextId,
     variant,
     helperText,
     icon: helperIcon,
@@ -3061,7 +3073,7 @@ const StyledPath$2 = styled__default['default'].path.attrs(({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
-const Icon$2 = /*#__PURE__*/React.forwardRef(function Icon({
+const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   size = 24,
   color = 'currentColor',
   name,
@@ -3135,15 +3147,15 @@ const list = {
 };
 
 const {
-  typography: typography$d
+  typography: typography$b
 } = list;
 const StyledList$1 = styled__default['default'].ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-v9d2hy-0"
 })(["", " ", ""], ({
   as
-}) => as === 'ol' ? styled.css(["& ol{list-style-type:lower-alpha;}"]) : '', typographyTemplate(typography$d));
-const List$2 = /*#__PURE__*/React.forwardRef(function List({
+}) => as === 'ol' ? styled.css(["& ol{list-style-type:lower-alpha;}"]) : '', typographyTemplate(typography$b));
+const List$2 = /*#__PURE__*/react.forwardRef(function List({
   children,
   variant = 'bullet',
   ...props
@@ -3157,7 +3169,7 @@ const List$2 = /*#__PURE__*/React.forwardRef(function List({
   });
 }); // List.displayName = 'List'
 
-const ListItem$2 = /*#__PURE__*/React.forwardRef(function ListItem({
+const ListItem$2 = /*#__PURE__*/react.forwardRef(function ListItem({
   children,
   ...props
 }, ref) {
@@ -3171,76 +3183,10 @@ const List$1 = List$2;
 List$1.Item = ListItem$2;
 List$1.Item.displayName = 'List.Item';
 
-const Accordion$1 = /*#__PURE__*/React.forwardRef(function Accordion({
-  headerLevel = 'h2',
-  chevronPosition = 'left',
-  children,
-  id,
-  ...props
-}, ref) {
-  const accordionId = useId(id, 'accordion');
-  const AccordionItems = React.Children.map(children, (child, index) => {
-    if (!child) return null;
-    return /*#__PURE__*/React.cloneElement(child, {
-      accordionId,
-      index,
-      headerLevel,
-      chevronPosition
-    });
-  });
-  return /*#__PURE__*/jsxRuntime.jsx("div", { ...props,
-    ref: ref,
-    children: AccordionItems
-  });
-}); // Accordion.displayName = 'Accordion'
-
-const AccordionItem = /*#__PURE__*/React.forwardRef(function AccordionItem({
-  headerLevel,
-  chevronPosition,
-  index = 0,
-  accordionId,
-  isExpanded,
-  children,
-  disabled,
-  ...props
-}, ref) {
-  const [expanded, setExpanded] = React.useState(isExpanded);
-
-  const toggleExpanded = () => {
-    setExpanded(!expanded);
-  };
-
-  const Children = React.Children.map(children, (child, childIndex) => {
-    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
-    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
-    return childIndex === 0 ? /*#__PURE__*/React.cloneElement(child, {
-      isExpanded: expanded,
-      toggleExpanded,
-      id: headerId,
-      panelId,
-      headerLevel,
-      chevronPosition,
-      parentIndex: index,
-      disabled
-    }) : /*#__PURE__*/React.cloneElement(child, {
-      hidden: !expanded,
-      id: panelId,
-      headerId
-    });
-  });
-  React.useEffect(() => {
-    setExpanded(isExpanded);
-  }, [isExpanded]);
-  return /*#__PURE__*/jsxRuntime.jsx("div", { ...props,
-    ref: ref,
-    children: Children
-  });
-}); // AccordionItem.displayName = 'AccordionItem'
-
 const {
   typography: {
     ui: {
-      accordion_header: typography$c
+      accordion_header: typography$a
     }
   },
   colors: {
@@ -3300,7 +3246,7 @@ const accordion = {
     header: {
       height: '48px',
       background: backgroundDefault,
-      typography: typography$c,
+      typography: typography$a,
       spacings: {
         left: mediumSpacing,
         right: mediumSpacing
@@ -3316,12 +3262,12 @@ const accordion = {
           }
         },
         disabled: {
-          typography: { ...typography$c,
+          typography: { ...typography$a,
             color: disabledColor$2
           }
         },
         active: {
-          typography: { ...typography$c,
+          typography: { ...typography$a,
             color: activatedColor
           }
         },
@@ -3343,21 +3289,100 @@ const accordion = {
         color: defaultIconColor
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 
+const Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion({
+  headerLevel = 'h2',
+  chevronPosition = 'left',
+  children,
+  id,
+  ...props
+}, ref) {
+  const accordionId = useId(id, 'accordion');
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, accordion);
+  const AccordionItems = react.Children.map(children, (child, index) => {
+    if (!child) return null;
+    return /*#__PURE__*/react.cloneElement(child, {
+      accordionId,
+      index,
+      headerLevel,
+      chevronPosition
+    });
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", { ...props,
+      ref: ref,
+      children: AccordionItems
+    })
+  });
+}); // Accordion.displayName = 'Accordion'
+
+const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem({
+  headerLevel,
+  chevronPosition,
+  index = 0,
+  accordionId,
+  isExpanded,
+  children,
+  disabled,
+  ...props
+}, ref) {
+  const [expanded, setExpanded] = react.useState(isExpanded);
+
+  const toggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  const Children = react.Children.map(children, (child, childIndex) => {
+    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
+    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
+    return childIndex === 0 ? /*#__PURE__*/react.cloneElement(child, {
+      isExpanded: expanded,
+      toggleExpanded,
+      id: headerId,
+      panelId,
+      headerLevel,
+      chevronPosition,
+      parentIndex: index,
+      disabled
+    }) : /*#__PURE__*/react.cloneElement(child, {
+      hidden: !expanded,
+      id: panelId,
+      headerId
+    });
+  });
+  react.useEffect(() => {
+    setExpanded(isExpanded);
+  }, [isExpanded]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", { ...props,
+    ref: ref,
+    children: Children
+  });
+}); // AccordionItem.displayName = 'AccordionItem'
+
 const StyledAccordionHeaderTitle = styled__default['default'].span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
-})(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], ({
+})(({
+  theme,
   isExpanded,
   disabled
 }) => {
-  var _tokens$entities$head;
+  var _theme$entities$heade;
 
-  return isExpanded && !disabled ? (_tokens$entities$head = accordion.entities.header.states.active.typography) === null || _tokens$entities$head === void 0 ? void 0 : _tokens$entities$head.color : 'inherit';
+  return styled.css(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], isExpanded && !disabled ? (_theme$entities$heade = theme.entities.header.states.active.typography) === null || _theme$entities$heade === void 0 ? void 0 : _theme$entities$heade.color : 'inherit');
 });
-const AccordionHeaderTitle = /*#__PURE__*/React.forwardRef(function AccordionHeaderTitle({
+const AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeaderTitle({
   isExpanded,
   disabled,
   children
@@ -3372,9 +3397,7 @@ const AccordionHeaderTitle = /*#__PURE__*/React.forwardRef(function AccordionHea
 
 const {
   entities: {
-    header: header$2,
-    chevron: chevronToken,
-    icon: iconToken
+    chevron: chevronToken
   }
 } = accordion;
 const StyledAccordionHeader = styled__default['default'].div.attrs(({
@@ -3391,22 +3414,31 @@ const StyledAccordionHeader = styled__default['default'].div.attrs(({
 })).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header$2.typography), bordersTemplate(accordion.border), spacingsTemplate(header$2.spacings), outlineTemplate(header$2.states.focus.outline), outlineTemplate(header$2.states.focus.outline), ({
+})(({
+  theme,
+  disabled,
   parentIndex
-}) => parentIndex === 0 ? null : 'none', header$2.background, header$2.height, ({
-  disabled
-}) => disabled ? styled.css({
-  color: header$2.states.disabled.typography.color,
-  cursor: 'not-allowed'
-}) : styled.css({
-  color: header$2.typography.color,
-  cursor: 'pointer',
-  '@media (hover: hover) and (pointer: fine)': {
-    ':hover': {
-      background: header$2.states.hover.background
-    }
-  }
-}), iconToken.typography.color);
+}) => {
+  const {
+    entities: {
+      header,
+      icon: iconToken
+    },
+    border
+  } = theme;
+  return styled.css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? styled.css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : styled.css({
+    color: header.typography.color,
+    cursor: 'pointer',
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: header.states.hover.background
+      }
+    }
+  }), iconToken.typography.color);
+});
 const StyledIcon$1 = styled__default['default'](Icon$1).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-1"
@@ -3417,7 +3449,7 @@ const StyledIcon$1 = styled__default['default'](Icon$1).withConfig({
 } : {
   marginLeft: '16px'
 });
-const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionHeader({
+const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader({
   parentIndex,
   headerLevel,
   chevronPosition,
@@ -3462,7 +3494,7 @@ const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionHeader({
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
   }, "".concat(id, "-icon"));
 
-  const headerChildren = React.Children.map(children, child => {
+  const headerChildren = react.Children.map(children, child => {
     if (typeof child === 'string') {
       return /*#__PURE__*/jsxRuntime.jsx(AccordionHeaderTitle, {
         isExpanded: isExpanded,
@@ -3471,8 +3503,8 @@ const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionHeader({
       });
     }
 
-    if ( /*#__PURE__*/React.isValidElement(child) && child.type === AccordionHeaderTitle) {
-      return /*#__PURE__*/React.cloneElement(child, {
+    if ( /*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderTitle) {
+      return /*#__PURE__*/react.cloneElement(child, {
         isExpanded,
         disabled
       });
@@ -3495,12 +3527,6 @@ const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionHeader({
   });
 }); // AccordionHeader.displayName = 'EdsAccordionHeader'
 
-const {
-  entities: {
-    header: header$1,
-    panel: panel$1
-  }
-} = accordion;
 const StyledAccordionPanel = styled__default['default'].div.attrs(({
   headerId
 }) => ({
@@ -3509,8 +3535,19 @@ const StyledAccordionPanel = styled__default['default'].div.attrs(({
 })).withConfig({
   displayName: "AccordionPanel__StyledAccordionPanel",
   componentId: "sc-suplv4-0"
-})(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(accordion.border), spacingsTemplate(panel$1.spacings), header$1.background);
-const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPanel({
+})(({
+  theme
+}) => {
+  const {
+    entities: {
+      header,
+      panel
+    },
+    border
+  } = theme;
+  return styled.css(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(border), spacingsTemplate(panel.spacings), header.background);
+});
+const AccordionPanel = /*#__PURE__*/react.forwardRef(function AccordionPanel({
   id,
   headerId,
   hidden,
@@ -3537,7 +3574,7 @@ Accordion.Header.displayName = 'Accordion.Header';
 Accordion.HeaderTitle.displayName = 'Accordion.HeaderTitle';
 Accordion.Panel.displayName = 'Accordion.Panel';
 
-const TabsContext = /*#__PURE__*/React.createContext({
+const TabsContext = /*#__PURE__*/react.createContext({
   variant: 'minWidth',
   handleChange: () => null,
   activeTab: 0,
@@ -3547,55 +3584,191 @@ const TabsContext = /*#__PURE__*/React.createContext({
 const TabsProvider = TabsContext.Provider;
 TabsContext.Consumer;
 
-const Tabs$1 = /*#__PURE__*/React.forwardRef(function Tabs({
-  activeTab = 0,
-  onChange,
-  onBlur,
-  onFocus,
-  variant = 'minWidth',
-  id,
-  ...props
-}, ref) {
-  const tabsId = useId(id, 'tabs');
-  const [tabsFocused, setTabsFocused] = React.useState(false);
-  let blurTimer;
-
-  const handleBlur = e => {
-    blurTimer = setTimeout(() => {
-      if (tabsFocused) {
-        setTabsFocused(false);
+const {
+  colors: {
+    text: {
+      static_icons__tertiary: {
+        rgba: defaultColor
+      }
+    },
+    ui: {
+      background__medium: {
+        rgba: defaultBorderColor
+      }
+    },
+    interactive: {
+      focus: {
+        rgba: focusOutlineColor$5
+      },
+      primary__hover_alt: {
+        rgba: hoverBackgroundColor
+      },
+      primary__resting: {
+        rgba: activeColor$2
+      },
+      primary__hover: {
+        rgba: activeHoverColor
       }
-    }, 0);
-    onBlur && onBlur(e);
-  };
-
-  const handleFocus = e => {
-    if (e.target.getAttribute('role') !== 'tab') {
-      return;
     }
-
-    clearTimeout(blurTimer);
-
-    if (!tabsFocused) {
-      setTabsFocused(true);
+  },
+  clickbounds: {
+    default__base: clickboundsHeight
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium$7
     }
-
-    onFocus && onFocus(e);
-  };
-
-  return /*#__PURE__*/jsxRuntime.jsx(TabsProvider, {
-    value: {
-      activeTab,
-      handleChange: onChange,
-      tabsId,
-      variant,
-      tabsFocused
+  }
+} = edsTokens.tokens;
+const token$1 = {
+  entities: {
+    panel: {
+      spacings: {
+        top: spacingMedium$7,
+        bottom: spacingMedium$7
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            width: '1px',
+            style: 'dashed',
+            color: focusOutlineColor$5
+          }
+        }
+      }
     },
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: ref,
-      ...props,
-      onBlur: handleBlur,
-      onFocus: handleFocus
+    tab: {
+      background: 'transparent',
+      height: clickboundsHeight,
+      clickbound: {
+        height: clickboundsHeight,
+        offset: {
+          top: '2px'
+        }
+      },
+      spacings: {
+        left: spacingMedium$7,
+        right: spacingMedium$7
+      },
+      typography: {
+        color: defaultColor,
+        textAlign: 'center'
+      },
+      border: {
+        type: 'bordergroup',
+        bottom: {
+          color: defaultBorderColor,
+          style: 'solid',
+          width: '2px'
+        }
+      },
+      states: {
+        disabled: {
+          border: {
+            type: 'border',
+            width: 0,
+            color: 'transparent',
+            style: 'solid'
+          }
+        },
+        hover: {
+          background: hoverBackgroundColor
+        },
+        focus: {
+          outline: {
+            type: 'outline',
+            width: '1px',
+            style: 'dashed',
+            color: focusOutlineColor$5
+          }
+        },
+        active: {
+          typography: {
+            color: activeColor$2
+          },
+          border: {
+            type: 'bordergroup',
+            bottom: {
+              color: activeColor$2,
+              style: 'solid',
+              width: '2px'
+            }
+          },
+          states: {
+            hover: {
+              typography: {
+                color: activeHoverColor
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  modes: {
+    compact: {}
+  }
+};
+
+const Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs({
+  activeTab = 0,
+  onChange,
+  onBlur,
+  onFocus,
+  variant = 'minWidth',
+  id,
+  ...props
+}, ref) {
+  const tabsId = useId(id, 'tabs');
+  const [tabsFocused, setTabsFocused] = react.useState(false);
+  let blurTimer;
+
+  const handleBlur = e => {
+    blurTimer = setTimeout(() => {
+      if (tabsFocused) {
+        setTabsFocused(false);
+      }
+    }, 0);
+    onBlur && onBlur(e);
+  };
+
+  const handleFocus = e => {
+    if (e.target.getAttribute('role') !== 'tab') {
+      return;
+    }
+
+    clearTimeout(blurTimer);
+
+    if (!tabsFocused) {
+      setTabsFocused(true);
+    }
+
+    onFocus && onFocus(e);
+  };
+
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, token$1);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(TabsProvider, {
+      value: {
+        activeTab,
+        handleChange: onChange,
+        tabsId,
+        variant,
+        tabsFocused
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: ref,
+        ...props,
+        onBlur: handleBlur,
+        onFocus: handleFocus
+      })
     })
   });
 });
@@ -3612,7 +3785,7 @@ const StyledTabList = styled__default['default'].div.attrs(() => ({
 })(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";"], ({
   variant
 }) => variants$1[variant]);
-const TabList = /*#__PURE__*/React.forwardRef(function TabsList({
+const TabList = /*#__PURE__*/react.forwardRef(function TabsList({
   children = [],
   ...props
 }, ref) {
@@ -3622,20 +3795,20 @@ const TabList = /*#__PURE__*/React.forwardRef(function TabsList({
     tabsId,
     variant = 'minWidth',
     tabsFocused
-  } = React.useContext(TabsContext);
-  const currentTab = React.useRef(activeTab);
-  const selectedTabRef = React.useCallback(node => {
+  } = react.useContext(TabsContext);
+  const currentTab = react.useRef(activeTab);
+  const selectedTabRef = react.useCallback(node => {
     if (node !== null && tabsFocused) {
       node.focus();
     }
   }, [tabsFocused]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     currentTab.current = activeTab;
   }, [activeTab]);
-  const Tabs = React.Children.map(children, (child, index) => {
+  const Tabs = react.Children.map(children, (child, index) => {
     const tabRef = index === activeTab ? // eslint-disable-next-line react-hooks/rules-of-hooks
     useCombinedRefs(child.ref, selectedTabRef) : child.ref;
-    return /*#__PURE__*/React.cloneElement(child, {
+    return /*#__PURE__*/react.cloneElement(child, {
       id: "".concat(tabsId, "-tab-").concat(index + 1),
       'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
       active: index === activeTab,
@@ -3683,135 +3856,6 @@ const TabList = /*#__PURE__*/React.forwardRef(function TabsList({
   });
 });
 
-const {
-  colors: {
-    text: {
-      static_icons__tertiary: {
-        rgba: defaultColor
-      }
-    },
-    ui: {
-      background__medium: {
-        rgba: defaultBorderColor
-      }
-    },
-    interactive: {
-      focus: {
-        rgba: focusOutlineColor$5
-      },
-      primary__hover_alt: {
-        rgba: hoverBackgroundColor
-      },
-      primary__resting: {
-        rgba: activeColor$2
-      },
-      primary__hover: {
-        rgba: activeHoverColor
-      }
-    }
-  },
-  clickbounds: {
-    default__base: clickboundsHeight
-  },
-  spacings: {
-    comfortable: {
-      medium: spacingMedium$7
-    }
-  }
-} = edsTokens.tokens;
-const token$2 = {
-  entities: {
-    panel: {
-      spacings: {
-        top: spacingMedium$7,
-        bottom: spacingMedium$7
-      },
-      states: {
-        focus: {
-          outline: {
-            type: 'outline',
-            width: '1px',
-            style: 'dashed',
-            color: focusOutlineColor$5
-          }
-        }
-      }
-    },
-    tab: {
-      background: 'transparent',
-      height: clickboundsHeight,
-      clickbound: {
-        height: clickboundsHeight,
-        offset: {
-          top: '2px'
-        }
-      },
-      spacings: {
-        left: spacingMedium$7,
-        right: spacingMedium$7
-      },
-      typography: {
-        color: defaultColor,
-        textAlign: 'center'
-      },
-      border: {
-        type: 'bordergroup',
-        bottom: {
-          color: defaultBorderColor,
-          style: 'solid',
-          width: '2px'
-        }
-      },
-      states: {
-        disabled: {
-          border: {
-            type: 'border',
-            width: 0,
-            color: 'transparent',
-            style: 'solid'
-          }
-        },
-        hover: {
-          background: hoverBackgroundColor
-        },
-        focus: {
-          outline: {
-            type: 'outline',
-            width: '1px',
-            style: 'dashed',
-            color: focusOutlineColor$5
-          }
-        },
-        active: {
-          typography: {
-            color: activeColor$2
-          },
-          border: {
-            type: 'bordergroup',
-            bottom: {
-              color: activeColor$2,
-              style: 'solid',
-              width: '2px'
-            }
-          },
-          states: {
-            hover: {
-              typography: {
-                color: activeHoverColor
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-};
-
-const {
-  entities: {
-    tab
-  }
-} = token$2;
 const StyledTab = styled__default['default'].button.attrs(({
   active = false,
   disabled = false
@@ -3824,33 +3868,34 @@ const StyledTab = styled__default['default'].button.attrs(({
 })).withConfig({
   displayName: "Tab__StyledTab",
   componentId: "sc-scjkct-0"
-})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), ({
-  active
-}) => active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), ({
-  active
-}) => active ? tab.states.active.states.hover.typography.color : tab.typography.color, ({
-  disabled
-}) => disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), ({
+})(({
+  theme,
+  active,
   disabled
-}) => disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), ({
-  active
-}) => active && bordersTemplate(tab.states.active.border));
-const Tab = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+}) => {
+  const {
+    entities: {
+      tab
+    }
+  } = theme;
+  return styled.css(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), active && bordersTemplate(tab.states.active.border));
+});
+const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledTab, {
     ref: ref,
     ...props
   });
 });
 
-const TabPanels = /*#__PURE__*/React.forwardRef(function TabPanels({
+const TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels({
   children,
   ...props
 }, ref) {
   const {
     activeTab,
     tabsId
-  } = React.useContext(TabsContext);
-  const Panels = React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+  } = react.useContext(TabsContext);
+  const Panels = react.Children.map(children, (child, index) => /*#__PURE__*/react.cloneElement(child, {
     id: "".concat(tabsId, "-panel-").concat(index + 1),
     'aria-labelledby': "".concat(tabsId, "-tab-").concat(index + 1),
     hidden: activeTab !== index
@@ -3862,19 +3907,23 @@ const TabPanels = /*#__PURE__*/React.forwardRef(function TabPanels({
   });
 });
 
-const {
-  entities: {
-    panel
-  }
-} = token$2;
 const StyledTabPanel = styled__default['default'].div.attrs(() => ({
   tabIndex: 0,
   role: 'tabpanel'
 })).withConfig({
   displayName: "TabPanel__StyledTabPanel",
   componentId: "sc-e8v1d4-0"
-})(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
-const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel({ ...props
+})(({
+  theme
+}) => {
+  const {
+    entities: {
+      panel
+    }
+  } = theme;
+  return styled.css(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
+});
+const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel({ ...props
 }, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledTabPanel, {
     ref: ref,
@@ -3897,7 +3946,7 @@ const {
   colors: {
     ui: {
       background__default: {
-        rgba: background$e
+        rgba: background$c
       },
       background__info: {
         rgba: backgroundInfo
@@ -3922,7 +3971,7 @@ const {
   }
 } = edsTokens.tokens;
 const primary$4 = {
-  background: background$e,
+  background: background$c,
   border: {
     type: 'border',
     radius: borderRadius$7
@@ -3963,7 +4012,7 @@ const StyledCard = styled__default['default'].div.withConfig({
 }) => background, ({
   cursor
 }) => cursor, bordersTemplate(primary$3.border));
-const Card$1 = /*#__PURE__*/React.forwardRef(function Card({
+const Card$1 = /*#__PURE__*/react.forwardRef(function Card({
   children,
   variant = 'default',
   onClick,
@@ -3985,15 +4034,15 @@ const Card$1 = /*#__PURE__*/React.forwardRef(function Card({
 });
 
 const {
-  spacings: spacings$8
+  spacings: spacings$6
 } = primary$4;
 const StyledCardActions = styled__default['default'].div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
 })(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], ({
   justifyContent
-}) => justifyContent, spacings$8.right, spacings$8.left, spacings$8.top, spacings$8.bottom);
-const CardActions = /*#__PURE__*/React.forwardRef(function CardActions({
+}) => justifyContent, spacings$6.right, spacings$6.left, spacings$6.top, spacings$6.bottom);
+const CardActions = /*#__PURE__*/react.forwardRef(function CardActions({
   children,
   alignRight = false,
   meta = '',
@@ -4014,13 +4063,13 @@ const CardActions = /*#__PURE__*/React.forwardRef(function CardActions({
 });
 
 const {
-  spacings: spacings$7
+  spacings: spacings$5
 } = primary$4;
 const StyledCardContent = styled__default['default'].div.withConfig({
   displayName: "CardContent__StyledCardContent",
   componentId: "sc-esm4ym-0"
-})(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings$7.right, spacings$7.left, spacings$7.bottom);
-const CardContent = /*#__PURE__*/React.forwardRef(function CardContent({
+})(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings$5.right, spacings$5.left, spacings$5.bottom);
+const CardContent = /*#__PURE__*/react.forwardRef(function CardContent({
   children,
   ...props
 }, ref) {
@@ -4032,16 +4081,16 @@ const CardContent = /*#__PURE__*/React.forwardRef(function CardContent({
 });
 
 const {
-  spacings: spacings$6,
-  border: border$5
+  spacings: spacings$4,
+  border: border$3
 } = primary$4;
 const StyledCardMedia = styled__default['default'].div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
 })(["display:flex;width:auto;", ""], ({
   fullWidth
-}) => fullWidth ? styled.css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius) : styled.css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings$6.right, spacings$6.left, spacings$6.top, spacings$6.right, spacings$6.left, spacings$6.right, spacings$6.bottom, spacings$6.left));
-const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia({
+}) => fullWidth ? styled.css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border$3.type === 'border' && border$3.radius, border$3.type === 'border' && border$3.radius, border$3.type === 'border' && border$3.radius, border$3.type === 'border' && border$3.radius) : styled.css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings$4.right, spacings$4.left, spacings$4.top, spacings$4.right, spacings$4.left, spacings$4.right, spacings$4.bottom, spacings$4.left));
+const CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia({
   children,
   fullWidth = false,
   ...rest
@@ -4056,13 +4105,13 @@ const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia({
 });
 
 const {
-  spacings: spacings$5
+  spacings: spacings$3
 } = primary$4;
 const StyledCardHeader = styled__default['default'].div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
-})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$5.right, spacings$5.left, spacings$5.left, spacings$5.top, spacings$5.bottom);
-const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader({
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$3.right, spacings$3.left, spacings$3.left, spacings$3.top, spacings$3.bottom);
+const CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader({
   children,
   ...rest
 }, ref) {
@@ -4078,7 +4127,7 @@ const StyledCardHeaderTitle = styled__default['default'].div.withConfig({
   displayName: "CardHeaderTitle__StyledCardHeaderTitle",
   componentId: "sc-11m80r3-0"
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
-const CardHeaderTitle = /*#__PURE__*/React.forwardRef(function CardHeaderTitle({
+const CardHeaderTitle = /*#__PURE__*/react.forwardRef(function CardHeaderTitle({
   children,
   ...rest
 }, ref) {
@@ -4111,7 +4160,7 @@ const {
     navigation
   }
 } = edsTokens.tokens;
-const token$1 = {
+const topbar = {
   height: '64px',
   background: colors$2.ui.background__default.rgba,
   typography: navigation.menu_title,
@@ -4128,27 +4177,36 @@ const token$1 = {
       color: colors$2.ui.background__light.rgba,
       width: '2px'
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 
-const {
-  background: background$d,
-  height: height$3,
-  spacings: spacings$4,
-  border: border$4,
-  typography: typography$b
-} = token$1;
 const StyledTopBar = styled__default['default'].header.withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
-})(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:250;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], height$3, background$d, spacings$4.left, bordersTemplate(border$4), spacingsTemplate(spacings$4), typographyTemplate(typography$b));
-const TopBar$1 = /*#__PURE__*/React.forwardRef(function TopBar({
+})(({
+  theme
+}) => {
+  return styled.css(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:250;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], theme.height, theme.background, theme.spacings.left, bordersTemplate(theme.border), spacingsTemplate(theme.spacings), typographyTemplate(theme.typography));
+});
+const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, { ...props,
-    ref: ref,
-    children: children
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, topbar);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, { ...props,
+      ref: ref,
+      children: children
+    })
   });
 }); // TopBar.displayName = 'eds-topbar'
 
@@ -4156,7 +4214,7 @@ const StyledActions$1 = styled__default['default'].div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
 })(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
-const Actions$1 = /*#__PURE__*/React.forwardRef(function Actions({
+const Actions$1 = /*#__PURE__*/react.forwardRef(function Actions({
   children,
   ...props
 }, ref) {
@@ -4171,7 +4229,7 @@ const StyledHeader = styled__default['default'].div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
 })(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:24px;align-items:center;"]);
-const Header$2 = /*#__PURE__*/React.forwardRef(function Header({
+const Header$2 = /*#__PURE__*/react.forwardRef(function Header({
   children,
   ...props
 }, ref) {
@@ -4186,7 +4244,7 @@ const StyledCustomContent$1 = styled__default['default'].div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
-const CustomContent$1 = /*#__PURE__*/React.forwardRef(function CustomContent({
+const CustomContent$1 = /*#__PURE__*/react.forwardRef(function CustomContent({
   children,
   ...props
 }, ref) {
@@ -4205,6 +4263,40 @@ TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
 TopBar.CustomContent.displayName = 'Topbar.CustomContent';
 
+const {
+  elevation,
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background$b
+      }
+    }
+  }
+} = edsTokens.tokens;
+const paper = {
+  maxWidth: 'calc(100% - 32px)',
+  minWidth: '96px',
+  background: background$b
+};
+
+const StyledPaper = styled__default['default'].div.withConfig({
+  displayName: "Paper__StyledPaper",
+  componentId: "sc-6ncnv9-0"
+})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, ({
+  elevation
+}) => elevation);
+const Paper = /*#__PURE__*/react.forwardRef(function Paper({
+  elevation: elevation$1,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    elevation: elevation[elevation$1] || 'none'
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
+    ref: ref
+  });
+});
+
 const {
   spacings: {
     comfortable: {
@@ -4222,7 +4314,7 @@ const {
   colors: {
     ui: {
       background__default: {
-        rgba: background$c
+        rgba: background$a
       }
     }
   },
@@ -4234,7 +4326,7 @@ const {
 } = edsTokens.tokens;
 const dialog = {
   width: '252px',
-  background: background$c,
+  background: background$a,
   typography: accordion_header,
   border: {
     type: 'border',
@@ -4272,72 +4364,57 @@ const dialog = {
     actions: {
       minHeight: '48px'
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 
-const {
-  elevation,
-  colors: {
-    ui: {
-      background__default: {
-        rgba: background$b
-      }
-    }
-  }
-} = edsTokens.tokens;
-const paper = {
-  maxWidth: 'calc(100% - 32px)',
-  minWidth: '96px',
-  background: background$b
-};
-
-const StyledPaper = styled__default['default'].div.withConfig({
-  displayName: "Paper__StyledPaper",
-  componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, ({
-  elevation
-}) => elevation);
-const Paper = /*#__PURE__*/React.forwardRef(function Paper({
-  elevation: elevation$1,
-  ...rest
-}, ref) {
-  const props = { ...rest,
-    elevation: elevation[elevation$1] || 'none'
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
-    ref: ref
-  });
-});
-
-const StyledDialog = styled__default['default'](Paper).attrs(() => ({
+const StyledDialog = styled__default['default'](Paper).attrs({
   tabIndex: 0,
   role: 'dialog',
   'aria-labelledby': 'eds-dialog-title',
   'aria-describedby': 'eds-dialog-customcontent',
   'aria-modal': true
-})).withConfig({
+}).withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-1mewo3f-0"
-})(["width:", ";background:", ";display:grid;", " ", " ", ""], dialog.width, dialog.background, typographyTemplate(dialog.typography), spacingsTemplate(dialog.spacings), bordersTemplate(dialog.border));
-const Dialog$1 = /*#__PURE__*/React.forwardRef(function Dialog({
+})(({
+  theme
+}) => {
+  return styled.css(["width:", ";background:", ";display:grid;", " ", " ", ""], theme.width, theme.background, typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), bordersTemplate(theme.border));
+});
+const Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
-    elevation: "above_scrim",
-    ...props,
-    ref: ref,
-    children: children
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, dialog);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
+      elevation: "above_scrim",
+      ...props,
+      ref: ref,
+      children: children
+    })
   });
 }); // Dialog.displayName = 'EdsDialog'
 
 const StyledActions = styled__default['default'].div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1qfwg1m-0"
-})(["min-height:", ";", " align-self:end;justify-self:start;", ""], dialog.entities.actions.minHeight, spacingsTemplate(dialog.entities.children.spacings), ({
+})(({
+  theme,
   children
-}) => !children && styled.css(["min-height:initial;height:'8px';"]));
-const Actions = /*#__PURE__*/React.forwardRef(function Actions({
+}) => {
+  return styled.css(["min-height:", ";", " align-self:end;justify-self:start;", ""], theme.entities.actions.minHeight, spacingsTemplate(theme.entities.children.spacings), !children && styled.css(["min-height:initial;height:'8px';"]));
+});
+const Actions = /*#__PURE__*/react.forwardRef(function Actions({
   children,
   ...props
 }, ref) {
@@ -4351,14 +4428,21 @@ const Actions = /*#__PURE__*/React.forwardRef(function Actions({
 const StyledTitle = styled__default['default'].div.withConfig({
   displayName: "Title__StyledTitle",
   componentId: "sc-i4qfl5-0"
-})(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(dialog.entities.title.typography), dialog.entities.title.minHeight, spacingsTemplate(dialog.entities.children.spacings), ({
+})(({
+  theme,
   children
-}) => !children && styled.css(["min-height:initial;height:'8px';"]));
+}) => {
+  return styled.css(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, spacingsTemplate(theme.entities.children.spacings), !children && styled.css(["min-height:initial;height:'8px';"]));
+});
 const StyledDivider$2 = styled__default['default'](Divider).withConfig({
   displayName: "Title__StyledDivider",
   componentId: "sc-i4qfl5-1"
-})(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
-const Title = /*#__PURE__*/React.forwardRef(function Title({
+})(({
+  theme
+}) => {
+  return styled.css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
+});
+const Title = /*#__PURE__*/react.forwardRef(function Title({
   children,
   ...rest
 }, ref) {
@@ -4378,14 +4462,21 @@ const Title = /*#__PURE__*/React.forwardRef(function Title({
 const StyledCustomContent = styled__default['default'].div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-17fsw6x-0"
-})(["", " min-height:", ";margin-bottom:", ";align-self:stretch;justify-self:stretch;", " ", ""], typographyTemplate(dialog.entities.content.typography), dialog.entities.content.minHeight, dialog.entities.content.spacings.bottom, spacingsTemplate(dialog.entities.children.spacings), ({
+})(({
+  theme,
   scrollable
-}) => scrollable && styled.css(["min-height:initial;height:", ";overflow-y:auto;"], dialog.entities.content.height));
+}) => {
+  return styled.css(["", " min-height:", ";margin-bottom:", ";align-self:stretch;justify-self:stretch;", " ", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.content.spacings.bottom, spacingsTemplate(theme.entities.children.spacings), scrollable && styled.css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+});
 const StyledDivider$1 = styled__default['default'](Divider).withConfig({
   displayName: "CustomContent__StyledDivider",
   componentId: "sc-17fsw6x-1"
-})(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
-const CustomContent = /*#__PURE__*/React.forwardRef(function CustomContent({
+})(({
+  theme
+}) => {
+  return styled.css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
+});
+const CustomContent = /*#__PURE__*/react.forwardRef(function CustomContent({
   children,
   scrollable = false,
   ...rest
@@ -4419,7 +4510,7 @@ const {
   colors: {
     ui: {
       background__scrim: {
-        rgba: background$a
+        rgba: background$9
       }
     }
   }
@@ -4427,44 +4518,45 @@ const {
 const scrim = {
   width: '100%',
   height: '100%',
-  background: background$a
+  background: background$9
 };
 
 const {
-  height: height$2,
+  height: height$1,
   width,
-  background: background$9
+  background: background$8
 } = scrim;
 const StyledScrim = styled__default['default'].div.withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["width:", ";height:", ";background:", ";position:fixed;z-index:500;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height$2, background$9);
+})(["width:", ";height:", ";background:", ";position:fixed;z-index:500;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height$1, background$8);
 const ScrimContent = styled__default['default'].div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
 })(["width:auto;height:auto;"]);
-const Scrim = /*#__PURE__*/React.forwardRef(function Scrim({
+const Scrim = /*#__PURE__*/react.forwardRef(function Scrim({
   children,
   onClose,
+  open,
   isDismissable = false,
   ...rest
 }, ref) {
   const props = { ...rest,
+    open,
     isDismissable,
     ref
   };
-  const overflowState = document.body.style.overflow;
-  useHideBodyScroll(overflowState);
-  useGlobalKeyPress('Escape', e => {
-    if (isDismissable && onClose) {
-      onClose(e, false);
+  useHideBodyScroll(open);
+  useGlobalKeyPress('Escape', () => {
+    if (isDismissable && onClose && open) {
+      onClose();
     }
   });
 
   const handleMouseClose = event => {
     if (event) {
-      if (event.type === 'click' && isDismissable) {
-        onClose && onClose(event, false);
+      if (event.type === 'click' && isDismissable && open) {
+        onClose && onClose();
       }
     }
   };
@@ -4474,6 +4566,10 @@ const Scrim = /*#__PURE__*/React.forwardRef(function Scrim({
     event.stopPropagation();
   };
 
+  if (!open) {
+    return null;
+  }
+
   return /*#__PURE__*/jsxRuntime.jsx(StyledScrim, {
     onClick: handleMouseClose,
     ...props,
@@ -4518,10 +4614,10 @@ const {
       xxx_large
     }
   },
-  typography: typography$a
+  typography: typography$9
 } = edsTokens.tokens;
 const tableOfContents = {
-  typography: { ...typography$a.navigation.button,
+  typography: { ...typography$9.navigation.button,
     color: labelColor
   },
   spacings: {
@@ -4537,7 +4633,7 @@ const tableOfContents = {
     },
     links: {
       width: 'calc(189px - 36px)',
-      typography: { ...typography$a.navigation.button,
+      typography: { ...typography$9.navigation.button,
         color: primaryColor$4
       },
       spacings: {
@@ -4577,19 +4673,25 @@ const tableOfContents = {
           background: primaryHover$3
         }
       },
-      typography: { ...typography$a.navigation.button,
+      typography: { ...typography$9.navigation.button,
         color: primaryHover$3
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 
 const StyledTableOfContents = styled__default['default'].nav.withConfig({
   displayName: "TableOfContents__StyledTableOfContents",
   componentId: "sc-q23s6y-0"
-})(["margin-top:", ";margin-bottom:", ";", ""], tableOfContents.spacings.top, tableOfContents.spacings.bottom, ({
+})(({
+  theme,
   sticky
-}) => sticky && styled.css(["position:fixed;top:", ";right:", ";"], tableOfContents.entities.sticky.spacings.top, tableOfContents.entities.sticky.spacings.right));
+}) => {
+  return styled.css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, sticky && styled.css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
+});
 const TocList = styled__default['default'](List$1).withConfig({
   displayName: "TableOfContents__TocList",
   componentId: "sc-q23s6y-1"
@@ -4597,32 +4699,49 @@ const TocList = styled__default['default'](List$1).withConfig({
 const TocLabel = styled__default['default'](Typography).withConfig({
   displayName: "TableOfContents__TocLabel",
   componentId: "sc-q23s6y-2"
-})(["", ""], typographyTemplate(tableOfContents.typography));
-const TableOfContents$1 = /*#__PURE__*/React.forwardRef(function TableOfContents({
+})(({
+  theme
+}) => {
+  return styled.css(["", ""], typographyTemplate(theme.typography));
+});
+const TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents({
   children,
   sticky = false,
   label = '',
   ...rest
 }, ref) {
-  return /*#__PURE__*/jsxRuntime.jsxs(StyledTableOfContents, {
-    ref: ref,
-    label: label,
-    sticky: sticky,
-    ...rest,
-    children: [/*#__PURE__*/jsxRuntime.jsx(TocLabel, {
-      variant: "overline",
-      children: label
-    }), /*#__PURE__*/jsxRuntime.jsx(TocList, {
-      children: children
-    })]
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, tableOfContents);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(StyledTableOfContents, {
+      ref: ref,
+      label: label,
+      sticky: sticky,
+      ...rest,
+      children: [/*#__PURE__*/jsxRuntime.jsx(TocLabel, {
+        variant: "overline",
+        children: label
+      }), /*#__PURE__*/jsxRuntime.jsx(TocList, {
+        children: children
+      })]
+    })
   });
 });
 
 const StyledLinkItem = styled__default['default'].li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
-})(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(tableOfContents.entities.links.typography), spacingsTemplate(tableOfContents.entities.links.spacings), tableOfContents.entities.links.typography.lineHeight, tableOfContents.entities.links.width, tableOfContents.entities.icon.background, tableOfContents.entities.icon.spacings.right, tableOfContents.entities.span.maxWidth, outlineTemplate(tableOfContents.states.focus.outline), typographyTemplate(tableOfContents.states.hover.typography), tableOfContents.states.hover.background, bordersTemplate(tableOfContents.states.hover.border), tableOfContents.states.hover.entities.icon.background);
-const LinkItem = /*#__PURE__*/React.forwardRef(function LinkItem({
+})(({
+  theme
+}) => {
+  return styled.css(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(theme.entities.links.typography), spacingsTemplate(theme.entities.links.spacings), theme.entities.links.typography.lineHeight, theme.entities.links.width, theme.entities.icon.background, theme.entities.icon.spacings.right, theme.entities.span.maxWidth, outlineTemplate(theme.states.focus.outline), typographyTemplate(theme.states.hover.typography), theme.states.hover.background, bordersTemplate(theme.states.hover.border), theme.states.hover.entities.icon.background);
+});
+const LinkItem = /*#__PURE__*/react.forwardRef(function LinkItem({
   children,
   ...props
 }, ref) {
@@ -4640,7 +4759,7 @@ const {
   colors: {
     ui: {
       background__default: {
-        rgba: background$8
+        rgba: background$7
       },
       background__light: {
         rgba: borderColor
@@ -4655,7 +4774,7 @@ const {
   }
 } = edsTokens.tokens;
 const comfortable$2 = {
-  background: background$8,
+  background: background$7,
   spacings: {
     left: '14px',
     // padding left is 14px, because of border-left 'steals' 2px of the padding
@@ -4679,21 +4798,21 @@ const variants = {
 };
 
 const {
-  background: background$7,
-  spacings: spacings$3,
-  border: border$3
+  background: background$6,
+  spacings: spacings$2,
+  border: border$2
 } = comfortable$2;
 const StyledSideSheet = styled__default['default'].div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background$7, ({
+})(["height:100%;position:absolute;z-index:200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background$6, ({
   width
-}) => width, bordersTemplate(border$3), spacingsTemplate(spacings$3));
+}) => width, bordersTemplate(border$2), spacingsTemplate(spacings$2));
 const Header$1 = styled__default['default'].div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
 })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;"]);
-const SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet({
+const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet({
   variant = 'medium',
   title = '',
   children,
@@ -4784,7 +4903,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const enabled$6 = {
+const enabled$3 = {
   background: backgroundColor$2,
   height: '22px',
   border: {
@@ -4873,7 +4992,7 @@ const error$2 = {
 
 var tokens$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  enabled: enabled$6,
+  enabled: enabled$3,
   error: error$2
 });
 
@@ -4881,13 +5000,13 @@ Icon$1.add({
   close: edsIcons.close
 });
 const {
-  enabled: enabled$5,
+  enabled: enabled$2,
   error: error$1
 } = tokens$3;
 const Icon = styled__default['default'](Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
-})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled$5.entities.icon.border), ({
+})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled$2.entities.icon.border), ({
   variant
 }) => {
   switch (variant) {
@@ -4895,24 +5014,24 @@ const Icon = styled__default['default'](Icon$1).withConfig({
       return styled.css(["background:", ";svg{fill:", ";}"], error$1.entities.icon.background, error$1.entities.icon.typography.color);
 
     default:
-      return styled.css(["background:", ";svg{fill:", ";}"], enabled$5.entities.icon.states.hover.background, enabled$5.states.hover.typography.color);
+      return styled.css(["background:", ";svg{fill:", ";}"], enabled$2.entities.icon.states.hover.background, enabled$2.states.hover.typography.color);
   }
 }, ({
   disabled
 }) => disabled && styled.css(["cursor:not-allowed;&:hover{background:transparent;}"]));
 
 const {
-  enabled: enabled$4,
+  enabled: enabled$1,
   error
 } = tokens$3;
 const {
-  background: background$6,
-  height: height$1,
-  typography: typography$9,
-  spacings: spacings$2,
-  border: border$2,
-  states: states$3
-} = enabled$4;
+  background: background$5,
+  height,
+  typography: typography$8,
+  spacings: spacings$1,
+  border: border$1,
+  states: states$2
+} = enabled$1;
 const StyledChips = styled__default['default'].div.attrs(({
   clickable,
   deletable
@@ -4922,14 +5041,14 @@ const StyledChips = styled__default['default'].div.attrs(({
 })).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$6, height$1, typography$9.color, states$3.hover.typography.color, states$3.hover.typography.color, outlineTemplate(states$3.focus.outline), outlineTemplate(states$3.focus.outline), bordersTemplate(border$2), spacingsTemplate(spacings$2), typographyTemplate(typography$9), ({
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$5, height, typography$8.color, states$2.hover.typography.color, states$2.hover.typography.color, outlineTemplate(states$2.focus.outline), outlineTemplate(states$2.focus.outline), bordersTemplate(border$1), spacingsTemplate(spacings$1), typographyTemplate(typography$8), ({
   clickable
 }) => clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]), ({
   variant
 }) => {
   switch (variant) {
     case 'active':
-      return styled.css(["background:", ";"], states$3.active.background);
+      return styled.css(["background:", ";"], states$2.active.background);
 
     case 'error':
       return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
@@ -4939,12 +5058,12 @@ const StyledChips = styled__default['default'].div.attrs(({
   }
 }, ({
   disabled
-}) => disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$6, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color), ({
+}) => disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$5, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color), ({
   deletable
 }) => deletable && styled.css(["padding-right:4px;"]), ({
   onlyChild
 }) => onlyChild ? styled.css(["padding-left:8px;"]) : '');
-const Chip = /*#__PURE__*/React.forwardRef(function Chip({
+const Chip = /*#__PURE__*/react.forwardRef(function Chip({
   children,
   onDelete,
   disabled = false,
@@ -4983,10 +5102,10 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip({
     }
   };
 
-  const resizedChildren = React.Children.map(children, child => {
+  const resizedChildren = react.Children.map(children, child => {
     // We force size on Icon & Avatar component
     if (child.props) {
-      return /*#__PURE__*/React.cloneElement(child, {
+      return /*#__PURE__*/react.cloneElement(child, {
         size: 16,
         disabled
       });
@@ -5041,7 +5160,7 @@ const StyledImage = styled__default['default'].img.withConfig({
 })(["height:100%;text-align:center;color:transparent;", ";"], ({
   disabled
 }) => disabled && styled.css(["opacity:", ";"], avatar.states.disabled.opacity));
-const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
+const Avatar = /*#__PURE__*/react.forwardRef(function Avatar({
   src = null,
   alt,
   size = 24,
@@ -5066,7 +5185,7 @@ const {
   colors: {
     ui: {
       background__light: {
-        rgba: background$5
+        rgba: background$4
       }
     },
     interactive: {
@@ -5090,13 +5209,14 @@ const {
   },
   typography: {
     input: {
-      text: typography$8
+      text: typography$7
     }
-  }
+  },
+  shape: shape$1
 } = edsTokens.tokens;
 const search = {
-  background: background$5,
-  typography: typography$8,
+  background: background$4,
+  typography: typography$7,
   height: '36px',
   clickbound: {
     offset: {
@@ -5106,9 +5226,7 @@ const search = {
   },
   spacings: {
     left: small$2,
-    right: small$2,
-    top: '6px',
-    bottom: '6px'
+    right: small$2
   },
   border: {
     type: 'border',
@@ -5159,44 +5277,60 @@ const search = {
         right: small$2
       }
     }
+  },
+  modes: {
+    compact: {
+      height: shape$1._modes.compact.straight.minHeight
+    }
   }
 };
 
-const {
-  height,
-  spacings: spacings$1,
-  background: background$4,
-  typography: typography$7,
-  border: border$1,
-  clickbound,
-  entities: {
-    icon: icon$1,
-    placeholder,
-    button
-  },
-  states: states$2
-} = search;
 const Container$2 = styled__default['default'].span.withConfig({
   displayName: "Search__Container",
   componentId: "sc-v8l23u-0"
-})(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background$4, height, bordersTemplate(border$1), icon$1.typography.color, spacingsTemplate(spacings$1), ({
-  isFocused
-}) => isFocused && styled.css(["", ""], bordersTemplate(states$2.focus.border)), placeholder.typography.color, ({
-  disabled
-}) => disabled ? styled.css(["cursor:not-allowed;"]) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states$2.focus.border)), clickbound.offset, clickbound.height);
-const Input$4 = styled__default['default'].input.withConfig({
-  displayName: "Search__Input",
+})(({
+  disabled,
+  isFocused,
+  theme
+}) => {
+  const {
+    height,
+    spacings,
+    background,
+    border,
+    clickbound,
+    entities: {
+      icon,
+      placeholder
+    },
+    states
+  } = theme;
+  return styled.css(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, bordersTemplate(border), icon.typography.color, spacingsTemplate(spacings), isFocused && bordersTemplate(states.focus.border), placeholder.typography.color, disabled ? styled.css(["cursor:not-allowed;"]) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
+});
+const SearchInput = styled__default['default'](Input$4).withConfig({
+  displayName: "Search__SearchInput",
   componentId: "sc-v8l23u-1"
-})(["min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:0;border:none;appearance:none;box-sizing:border-box;background:transparent;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], typographyTemplate(typography$7), ({
+})(({
+  theme,
   disabled
-}) => disabled && styled.css(["cursor:not-allowed;"]));
+}) => {
+  return styled.css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], theme.height, typographyTemplate(theme.typography), disabled && styled.css(["cursor:not-allowed;"]));
+});
 const InsideButton = styled__default['default'](Button).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-2"
-})(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, ({
+})(({
+  theme,
   isActive
-}) => isActive && styled.css(["visibility:visible;"]));
-const Search = /*#__PURE__*/React.forwardRef(function Search({
+}) => {
+  const {
+    entities: {
+      button
+    }
+  } = theme;
+  return styled.css(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, isActive && styled.css(["visibility:visible;"]));
+});
+const Search = /*#__PURE__*/react.forwardRef(function Search({
   onChange,
   defaultValue = '',
   value,
@@ -5206,14 +5340,20 @@ const Search = /*#__PURE__*/React.forwardRef(function Search({
   onFocus,
   ...rest
 }, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, search);
   const isControlled = typeof value !== 'undefined';
   const isActive = isControlled && value !== '' || defaultValue !== '';
-  const inputRef = React.useRef(null);
-  const [state, setState] = React.useState({
+  const inputRef = react.useRef(null);
+  const [state, setState] = react.useState({
     isActive,
     isFocused: false
   });
-  React.useEffect(() => {
+  react.useEffect(() => {
     setState(prevState => ({ ...prevState,
       isActive
     }));
@@ -5313,21 +5453,24 @@ const Search = /*#__PURE__*/React.forwardRef(function Search({
       }
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$2, { ...containerProps,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Icon$1, {
-      data: edsIcons.search,
-      "aria-hidden": true,
-      size: size
-    }), /*#__PURE__*/jsxRuntime.jsx(Input$4, { ...inputProps
-    }), /*#__PURE__*/jsxRuntime.jsx(InsideButton, { ...clearButtonProps,
-      "aria-label": 'clear search',
-      title: "clear",
-      variant: "ghost_icon",
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
-        data: edsIcons.close,
-        size: 16
-      })
-    })]
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, { ...containerProps,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        data: edsIcons.search,
+        "aria-hidden": true,
+        size: size
+      }), /*#__PURE__*/jsxRuntime.jsx(SearchInput, { ...inputProps
+      }), /*#__PURE__*/jsxRuntime.jsx(InsideButton, { ...clearButtonProps,
+        "aria-label": 'clear search',
+        title: "clear",
+        variant: "ghost_icon",
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          data: edsIcons.close,
+          size: 16
+        })
+      })]
+    })
   });
 }); // Search.displayName = 'eds-search'
 
@@ -5474,7 +5617,7 @@ const StyledMinMax = styled__default['default'].span.withConfig({
   displayName: "MinMax__StyledMinMax",
   componentId: "sc-lxmlid-0"
 })(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], typographyTemplate(output$1.typography), track$3.spacings.top);
-const MinMax = /*#__PURE__*/React.forwardRef(function MinMax({
+const MinMax = /*#__PURE__*/react.forwardRef(function MinMax({
   children
 }, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledMinMax, {
@@ -5495,7 +5638,7 @@ const StyledOutput = styled__default['default'].output.withConfig({
 })(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], ({
   value
 }) => value, typographyTemplate(output.typography), slider.background, track$2.spacings.top);
-const Output = /*#__PURE__*/React.forwardRef(function Output({
+const Output = /*#__PURE__*/react.forwardRef(function Output({
   children,
   value,
   htmlFor
@@ -5527,7 +5670,7 @@ const StyledSliderInput = styled__default['default'].input.attrs(() => ({
   displayName: "SliderInput__StyledSliderInput",
   componentId: "sc-17orw4f-0"
 })(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:focus-visible{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle$1.states.focus.outline), outlineTemplate(handle$1.states.focus.outline), outlineTemplate(handle$1.states.focus.outline), outlineTemplate(handle$1.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track$1, track$1);
-const SliderInput = /*#__PURE__*/React.forwardRef(function SliderInput({
+const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
   value,
   min,
   max,
@@ -5611,7 +5754,7 @@ const SrOnlyLabel = styled__default['default'].label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-const Slider = /*#__PURE__*/React.forwardRef(function Slider({
+const Slider = /*#__PURE__*/react.forwardRef(function Slider({
   min = 0,
   max = 100,
   value = [40, 60],
@@ -5626,9 +5769,9 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider({
   ...rest
 }, ref) {
   const isRangeSlider = Array.isArray(value);
-  const [sliderValue, setSliderValue] = React.useState(isRangeSlider ? value : [value]);
-  const minRange = React.useRef(null);
-  const maxRange = React.useRef(null);
+  const [sliderValue, setSliderValue] = react.useState(isRangeSlider ? value : [value]);
+  const minRange = react.useRef(null);
+  const maxRange = react.useRef(null);
 
   const onValueChange = (event, valueArrIdx) => {
     const target = event.target;
@@ -5865,7 +6008,7 @@ const TooltipArrow = styled__default['default'].svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
 })(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
-const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
+const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip({
   title,
   placement = 'bottom',
   children,
@@ -5874,12 +6017,12 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
   ...rest
 }, ref) {
   const isMounted = useIsMounted();
-  const [popperEl, setPopperEl] = React.useState(null);
-  const [arrowRef, setArrowRef] = React.useState(null);
-  const [open, setOpen] = React.useState(false);
-  const openTimer = React.useRef();
+  const [popperEl, setPopperEl] = react.useState(null);
+  const [arrowRef, setArrowRef] = react.useState(null);
+  const [open, setOpen] = react.useState(false);
+  const openTimer = react.useRef();
   const tooltipRef = useCombinedRefs(setPopperEl, ref);
-  const anchorRef = React.useRef();
+  const anchorRef = react.useRef();
   const combinedChilddRef = useCombinedRefs(anchorRef, children === null || children === void 0 ? void 0 : children.ref);
   const tooltipId = useId(id, 'tooltip');
   const containerId = 'eds-tooltip-container';
@@ -5888,7 +6031,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
     setTimeout,
     clearTimeout
   } = window;
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (document.getElementById(containerId) === null) {
       const tooltipContainerElement = document.createElement('div');
       tooltipContainerElement.id = containerId;
@@ -5925,7 +6068,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
     ...attributes.popper
   };
   const childProps = children.props;
-  const updatedChildren = /*#__PURE__*/React.cloneElement(children, {
+  const updatedChildren = /*#__PURE__*/react.cloneElement(children, {
     ref: combinedChilddRef,
     'aria-describedby': open ? tooltipId : null,
     onMouseOver: joinHandlers(openTooltip, childProps.onMouseOver),
@@ -5957,6 +6100,26 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
   });
 });
 
+const StyledSnackbarAction = styled__default['default'].div.withConfig({
+  displayName: "SnackbarAction__StyledSnackbarAction",
+  componentId: "sc-1v5mjvd-0"
+})(({
+  theme
+}) => {
+  return styled.css(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], theme.entities.actions.spacings.left, theme.entities.actions.spacings.top, theme.entities.actions.spacings.bottom);
+});
+const SnackbarAction = /*#__PURE__*/react.forwardRef(function SnackbarAction({
+  children,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSnackbarAction, { ...props,
+    children: react.Children.only(children)
+  });
+});
+
 const {
   typography: {
     ui: {
@@ -6025,40 +6188,28 @@ const snackbar = {
   },
   typography: { ...typography$6,
     color
+  },
+  modes: {
+    compact: {}
   }
 };
 
-const StyledSnackbarAction = styled__default['default'].div.withConfig({
-  displayName: "SnackbarAction__StyledSnackbarAction",
-  componentId: "sc-1v5mjvd-0"
-})(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], snackbar.entities.actions.spacings.left, snackbar.entities.actions.spacings.top, snackbar.entities.actions.spacings.bottom);
-const SnackbarAction = /*#__PURE__*/React.forwardRef(function SnackbarAction({
-  children,
-  ...rest
-}, ref) {
-  const props = { ...rest,
-    ref
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledSnackbarAction, { ...props,
-    children: React.Children.only(children)
-  });
-});
-
-const StyledSnackbar = styled__default['default'](Paper).attrs(() => ({
-  role: 'alert'
-})).withConfig({
+const StyledSnackbar = styled__default['default'](Paper).withConfig({
   displayName: "Snackbar__StyledSnackbar",
   componentId: "sc-ac6no8-0"
-})(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:300;", " a,button{color:", ";}"], snackbar.background, spacingsTemplate(snackbar.spacings), bordersTemplate(snackbar.border), typographyTemplate(snackbar.typography), snackbar.minHeight, ({
+})(({
+  theme,
   placement
-}) => styled.css({
-  top: placement.includes('top') ? snackbar.spacings.top : placement === 'left' || placement === 'right' ? '50%' : undefined,
-  bottom: placement.includes('bottom') ? snackbar.spacings.bottom : undefined,
-  right: placement.includes('right') ? snackbar.spacings.right : undefined,
-  left: placement.includes('left') ? snackbar.spacings.left : placement === 'top' || placement === 'bottom' ? '50%' : undefined,
-  transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
-}), snackbar.entities.button.typography.color);
-const Snackbar$1 = /*#__PURE__*/React.forwardRef(function Snackbar({
+}) => {
+  return styled.css(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:300;", " a,button{color:", ";}"], theme.background, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), theme.minHeight, {
+    top: placement.includes('top') ? theme.spacings.top : placement === 'left' || placement === 'right' ? '50%' : undefined,
+    bottom: placement.includes('bottom') ? theme.spacings.bottom : undefined,
+    right: placement.includes('right') ? theme.spacings.right : undefined,
+    left: placement.includes('left') ? theme.spacings.left : placement === 'top' || placement === 'bottom' ? '50%' : undefined,
+    transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
+  }, theme.entities.button.typography.color);
+});
+const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
   open = false,
   autoHideDuration = 7000,
   onClose,
@@ -6066,13 +6217,13 @@ const Snackbar$1 = /*#__PURE__*/React.forwardRef(function Snackbar({
   children,
   ...rest
 }, ref) {
-  const [visible, setVisible] = React.useState(open);
-  const timer = React.useRef();
+  const [visible, setVisible] = react.useState(open);
+  const timer = react.useRef();
   const {
     setTimeout,
     clearTimeout
   } = window;
-  React.useEffect(() => {
+  react.useEffect(() => {
     setVisible(open);
     timer.current = setTimeout(() => {
       setVisible(false);
@@ -6088,8 +6239,16 @@ const Snackbar$1 = /*#__PURE__*/React.forwardRef(function Snackbar({
     placement,
     ...rest
   };
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, snackbar);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
     children: visible && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/jsxRuntime.jsx(StyledSnackbar, {
+      role: "alert",
       elevation: "overlay",
       ...props,
       children: children
@@ -6167,30 +6326,48 @@ const popover = {
   border: {
     type: 'border',
     radius: borderRadius$2
+  },
+  modes: {
+    compact: {}
   }
 };
 
 const PopoverPaper = styled__default['default'](Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
-})(["", " ", " ", " display:grid;grid-gap:", ";grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";min-height:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], ({
+})(({
+  theme,
   open
-}) => styled.css({
-  visibility: open ? null : 'hidden'
-}), typographyTemplate(popover.typography), spacingsTemplate(popover.spacings), popover.spacings.bottom, popover.background, popover.maxHeight, popover.maxWidth, popover.minHeight, bordersTemplate(popover.border), popover.entities.arrow.width, popover.entities.arrow.height, popover.entities.arrow.spacings.bottom, popover.entities.arrow.spacings.top, popover.entities.arrow.spacings.right, popover.entities.arrow.spacings.left);
+}) => {
+  return styled.css(["", " ", " ", " display:grid;grid-gap:", ";grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";min-height:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], {
+    visibility: open ? null : 'hidden'
+  }, typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.spacings.bottom, theme.background, theme.maxHeight, theme.maxWidth, theme.minHeight, bordersTemplate(theme.border), theme.entities.arrow.width, theme.entities.arrow.height, theme.entities.arrow.spacings.bottom, theme.entities.arrow.spacings.top, theme.entities.arrow.spacings.right, theme.entities.arrow.spacings.left);
+});
 const StyledCloseButton = styled__default['default'](Button).withConfig({
   displayName: "Popover__StyledCloseButton",
   componentId: "sc-b7p1is-1"
-})(["position:absolute;top:", ";right:", ";height:", ";width:", ";&:after{height:", ";}"], popover.entities.closeButton.spacings.top, popover.spacings.right, popover.entities.closeButton.height, popover.entities.closeButton.width, popover.entities.closeButton.height);
+})(({
+  theme
+}) => {
+  return styled.css(["position:absolute;top:", ";right:", ";height:", ";width:", ";&:after{height:", ";}"], theme.entities.closeButton.spacings.top, theme.spacings.right, theme.entities.closeButton.height, theme.entities.closeButton.width, theme.entities.closeButton.height);
+});
 const ArrowWrapper = styled__default['default'].div.withConfig({
   displayName: "Popover__ArrowWrapper",
   componentId: "sc-b7p1is-2"
-})(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], popover.entities.arrow.width, popover.entities.arrow.height);
+})(({
+  theme
+}) => {
+  return styled.css(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], theme.entities.arrow.width, theme.entities.arrow.height);
+});
 const PopoverArrow = styled__default['default'].svg.withConfig({
   displayName: "Popover__PopoverArrow",
   componentId: "sc-b7p1is-3"
-})(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], popover.entities.arrow.width, popover.entities.arrow.height, popover.background);
-const Popover$1 = /*#__PURE__*/React.forwardRef(function Popover({
+})(({
+  theme
+}) => {
+  return styled.css(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], theme.entities.arrow.width, theme.entities.arrow.height, theme.background);
+});
+const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
   children,
   placement = 'bottom',
   anchorEl,
@@ -6198,8 +6375,9 @@ const Popover$1 = /*#__PURE__*/React.forwardRef(function Popover({
   onClose,
   ...rest
 }, ref) {
-  const [popperEl, setPopperEl] = React.useState(null);
-  const [arrowRef, setArrowRef] = React.useState(null);
+  const [popperEl, setPopperEl] = react.useState(null);
+  const [storedAnchorEl, setStoredAnchorEl] = react.useState(null);
+  const [arrowRef, setArrowRef] = react.useState(null);
   const popoverRef = useCombinedRefs(ref, setPopperEl);
   useOutsideClick(popperEl, e => {
     if (open && onClose !== null && anchorEl && !anchorEl.contains(e.target)) {
@@ -6211,54 +6389,75 @@ const Popover$1 = /*#__PURE__*/React.forwardRef(function Popover({
       onClose();
     }
   });
+  react.useEffect(() => {
+    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
+    return () => setStoredAnchorEl(null);
+  }, [anchorEl, open]);
   const {
     styles,
     attributes
-  } = usePopper(anchorEl, popperEl, arrowRef, placement);
+  } = usePopper(storedAnchorEl, popperEl, arrowRef, placement);
   const props = {
     open,
     ...rest,
     ...attributes.popper
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
-    ref: popoverRef,
-    elevation: "overlay",
-    style: styles.popper,
-    "data-testid": "popover",
-    ...props,
-    children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
-      ref: setArrowRef,
-      style: styles.arrow,
-      className: "arrow",
-      children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
-        className: "arrowSvg",
-        children: /*#__PURE__*/jsxRuntime.jsx("path", {
-          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, popover);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
+      ref: popoverRef,
+      elevation: "overlay",
+      style: styles.popper,
+      "data-testid": "popover",
+      ...props,
+      children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
+        ref: setArrowRef,
+        style: styles.arrow,
+        className: "arrow",
+        children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
+          className: "arrowSvg",
+          children: /*#__PURE__*/jsxRuntime.jsx("path", {
+            d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+          })
         })
-      })
-    }), children, /*#__PURE__*/jsxRuntime.jsx(StyledCloseButton, {
-      onClick: onClose,
-      variant: "ghost_icon",
-      "data-testid": "popover-close",
-      "aria-label": "Close popover",
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
-        name: "close",
-        data: edsIcons.close,
-        size: 24
-      })
-    })]
+      }), children, /*#__PURE__*/jsxRuntime.jsx(StyledCloseButton, {
+        onClick: onClose,
+        variant: "ghost_icon",
+        "data-testid": "popover-close",
+        "aria-label": "Close popover",
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          name: "close",
+          data: edsIcons.close,
+          size: 24
+        })
+      })]
+    })
   });
 });
 
 const StyledPopoverTitle = styled__default['default'].div.withConfig({
   displayName: "PopoverTitle__StyledPopoverTitle",
   componentId: "sc-1ben8su-0"
-})(["margin-right:", ";max-width:calc(", " - ", ");overflow:hidden;margin-top:-", ";"], popover.entities.closeButton.width, popover.maxWidth, popover.entities.closeButton.width, popover.entities.title.spacings.top);
+})(({
+  theme
+}) => {
+  return styled.css(["margin-right:", ";max-width:calc(", " - ", ");overflow:hidden;margin-top:-", ";"], theme.entities.closeButton.width, theme.maxWidth, theme.entities.closeButton.width, theme.entities.title.spacings.top);
+});
 const StyledDivider = styled__default['default'](Divider).withConfig({
   displayName: "PopoverTitle__StyledDivider",
   componentId: "sc-1ben8su-1"
-})(["margin-left:-", ";margin-right:-", ";margin-bottom:0;width:auto;max-width:", ";"], popover.spacings.left, popover.spacings.right, popover.maxWidth);
-const PopoverTitle = /*#__PURE__*/React.forwardRef(function PopoverTitle({
+})(({
+  theme
+}) => {
+  return styled.css(["margin-left:-", ";margin-right:-", ";margin-bottom:0;width:auto;max-width:", ";"], theme.spacings.left, theme.spacings.right, theme.maxWidth);
+});
+const PopoverTitle = /*#__PURE__*/react.forwardRef(function PopoverTitle({
   children,
   ...rest
 }, ref) {
@@ -6278,7 +6477,7 @@ const ContentWrapper = styled__default['default'].div.withConfig({
   displayName: "PopoverContent__ContentWrapper",
   componentId: "sc-vwww9h-0"
 })(["overflow:hidden;"]);
-const PopoverContent = /*#__PURE__*/React.forwardRef(function PopoverContent({
+const PopoverContent = /*#__PURE__*/react.forwardRef(function PopoverContent({
   children,
   ...rest
 }, ref) {
@@ -6337,7 +6536,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const enabled$3 = {
+const enabled = {
   typography: { ...messageTypography
   },
   background: backgroundColor,
@@ -6356,6 +6555,9 @@ const enabled$3 = {
         radius: borderRadius$1
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 const info$1 = {
@@ -6366,6 +6568,9 @@ const info$1 = {
         color: infoColor
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 const warning$1 = {
@@ -6376,35 +6581,40 @@ const warning$1 = {
         color: warningColor
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 
 var tokens$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  enabled: enabled$3,
+  enabled: enabled,
   info: info$1,
   warning: warning$1
 });
 
 const {
-  enabled: enabled$2,
   info,
   warning
 } = tokens$2;
 const StyledBannerIcon = styled__default['default'].span.withConfig({
   displayName: "BannerIcon__StyledBannerIcon",
   componentId: "sc-7ow3zc-0"
-})(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(enabled$2.entities.icon.border), ({
+})(({
+  theme,
   variant
-}) => variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, enabled$2.entities.icon.width, enabled$2.entities.icon.height, enabled$2.spacings.right);
-const BannerIcon = /*#__PURE__*/React.forwardRef(function BannerIcon({
+}) => {
+  return styled.css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(theme.entities.icon.border), variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
+});
+const BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon({
   children,
   variant = 'info',
   ...rest
 }, ref) {
-  const childrenWithColor = React.Children.map(children, child => {
+  const childrenWithColor = react.Children.map(children, child => {
     const color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
-    return /*#__PURE__*/React.isValidElement(child) && child.type === Icon$1 && /*#__PURE__*/React.cloneElement(child, {
+    return /*#__PURE__*/react.isValidElement(child) && child.type === Icon$1 && /*#__PURE__*/react.cloneElement(child, {
       color
     }) || child;
   });
@@ -6423,41 +6633,50 @@ const StyledBanner = styled__default['default'].div.withConfig({
   displayName: "Banner__StyledBanner",
   componentId: "sc-1ju451i-0"
 })([""]);
-const {
-  enabled: enabled$1
-} = tokens$2;
 const Content$1 = styled__default['default'].div.withConfig({
   displayName: "Banner__Content",
   componentId: "sc-1ju451i-1"
-})(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(enabled$1.spacings), ({
+})(({
+  theme,
   hasIcon
-}) => hasIcon ? 'min-content 1fr auto' : '1fr auto', enabled$1.background);
+}) => {
+  return styled.css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(theme.spacings), hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
+});
 const NonMarginDivider = styled__default['default'](Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
   componentId: "sc-1ju451i-2"
 })(["margin:0;height:2px;"]);
-const Banner$1 = /*#__PURE__*/React.forwardRef(function Banner({
+const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner({
   children,
   className,
   ...rest
 }, ref) {
-  const childrenWhereBannerIcon = React.Children.map(children, child => {
-    return /*#__PURE__*/React.isValidElement(child) && child.type === BannerIcon;
+  const childrenWhereBannerIcon = react.Children.map(children, child => {
+    return /*#__PURE__*/react.isValidElement(child) && child.type === BannerIcon;
   });
   const hasIcon = childrenWhereBannerIcon.some(bool => bool);
   const props = {
     ref,
     ...rest
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(StyledBanner, { ...props,
-    className: className,
-    role: "alert",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Content$1, {
-      hasIcon: hasIcon,
-      children: children
-    }), /*#__PURE__*/jsxRuntime.jsx(NonMarginDivider, {
-      color: "light"
-    })]
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, enabled);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(StyledBanner, { ...props,
+      className: className,
+      role: "alert",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Content$1, {
+        hasIcon: hasIcon,
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(NonMarginDivider, {
+        color: "light"
+      })]
+    })
   });
 });
 
@@ -6465,7 +6684,7 @@ const StyledBannerMessage = styled__default['default'](Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
-const BannerMessage = /*#__PURE__*/React.forwardRef(function BannerMessage({
+const BannerMessage = /*#__PURE__*/react.forwardRef(function BannerMessage({
   children,
   ...rest
 }, ref) {
@@ -6480,21 +6699,19 @@ const BannerMessage = /*#__PURE__*/React.forwardRef(function BannerMessage({
   });
 });
 
-const {
-  enabled
-} = tokens$2;
 const StyledBannerActions = styled__default['default'].div.withConfig({
   displayName: "BannerActions__StyledBannerActions",
   componentId: "sc-1o38ds2-0"
-})(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], enabled.spacings.left, ({
-  placement
-}) => placement === 'bottom' ? '1/-1' : 'auto', ({
+})(({
+  theme,
   placement
-}) => placement === 'bottom' && {
-  marginTop: enabled.spacings.top,
-  marginLeft: '0'
+}) => {
+  return styled.css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, placement === 'bottom' ? '1/-1' : 'auto', placement === 'bottom' && {
+    marginTop: theme.spacings.top,
+    marginLeft: '0'
+  });
 });
-const BannerActions = /*#__PURE__*/React.forwardRef(function BannerActions({
+const BannerActions = /*#__PURE__*/react.forwardRef(function BannerActions({
   children,
   placement = 'left',
   ...rest
@@ -6552,7 +6769,7 @@ const IndeterminateProgressBar = styled__default['default'].div.withConfig({
   displayName: "LinearProgress__IndeterminateProgressBar",
   componentId: "sc-5orxpi-2"
 })(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary$2.entities.progress.background, indeterminate$2);
-const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress({
+const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress({
   variant = 'indeterminate',
   value = null,
   ...rest
@@ -6659,7 +6876,7 @@ const getToken = color => {
   };
 };
 
-const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress({
+const CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress({
   variant = 'indeterminate',
   value = null,
   size = 48,
@@ -6738,7 +6955,7 @@ const Svg$3 = styled__default['default'].svg.withConfig({
   variant,
   progress
 }) => variant === 'indeterminate' ? styled.css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : styled.css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, progress > 90 ? 'running' : 'paused', progress > 80 ? 'running' : 'paused', progress > 60 ? 'running' : 'paused', progress > 40 ? 'running' : 'paused', progress > 20 ? 'running' : 'paused', progress <= 20 ? 'running' : 'paused'));
-const StarProgress = /*#__PURE__*/React.forwardRef(function StarProgress({
+const StarProgress = /*#__PURE__*/react.forwardRef(function StarProgress({
   variant = 'indeterminate',
   value = null,
   size = 48,
@@ -6835,7 +7052,7 @@ const getColor = color => {
   return color;
 };
 
-const DotProgress = /*#__PURE__*/React.forwardRef(function DotProgress({
+const DotProgress = /*#__PURE__*/react.forwardRef(function DotProgress({
   color = 'neutral',
   size = 32,
   ...rest
@@ -6932,7 +7149,7 @@ const Collapsed = styled__default['default'](Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
-const Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs({
+const Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs({
   children,
   collapse,
   ...rest
@@ -6940,7 +7157,7 @@ const Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs({
   const props = { ...rest,
     ref
   };
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = react.useState(false);
 
   const collapsedCrumbs = allCrumbs => {
     const handleExpandClick = e => {
@@ -6958,7 +7175,7 @@ const Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs({
       return allCrumbs;
     }
 
-    return [allCrumbs[0], /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
+    return [allCrumbs[0], /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
         children: /*#__PURE__*/jsxRuntime.jsx(Collapsed, {
           link: true,
@@ -6979,13 +7196,13 @@ const Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs({
     }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
   };
 
-  const allCrumbs = React.Children.toArray(children).map((child, index) =>
+  const allCrumbs = react.Children.toArray(children).map((child, index) =>
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
-  jsxRuntime.jsxs(React.Fragment, {
+  jsxRuntime.jsxs(react.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
       children: child
-    }), index !== React.Children.toArray(children).length - 1 && /*#__PURE__*/jsxRuntime.jsx("li", {
+    }), index !== react.Children.toArray(children).length - 1 && /*#__PURE__*/jsxRuntime.jsx("li", {
       "aria-hidden": true,
       children: /*#__PURE__*/jsxRuntime.jsx(Separator, {
         variant: "body_short",
@@ -7013,7 +7230,7 @@ const StyledTypography = styled__default['default'](Typography).withConfig({
 }) => styled.css({
   maxWidth
 }));
-const Breadcrumb = /*#__PURE__*/React.forwardRef(function Breadcrumb({
+const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb({
   children,
   maxWidth,
   href,
@@ -7050,11 +7267,11 @@ const initalState = {
   focusedIndex: -1,
   onClose: null
 };
-const MenuContext = /*#__PURE__*/React.createContext(initalState);
+const MenuContext = /*#__PURE__*/react.createContext(initalState);
 const MenuProvider = ({
   children
 }) => {
-  const [state, setState] = React.useState(initalState);
+  const [state, setState] = react.useState(initalState);
   const {
     focusedIndex,
     onClose
@@ -7088,7 +7305,7 @@ const MenuProvider = ({
     children: children
   });
 };
-const useMenu = () => React.useContext(MenuContext);
+const useMenu = () => react.useContext(MenuContext);
 
 const {
   colors: {
@@ -7252,7 +7469,7 @@ const Content = styled__default['default'].div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
 })(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
-const MenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function MenuItem({
+const MenuItem = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function MenuItem({
   children,
   disabled,
   index = 0,
@@ -7305,7 +7522,7 @@ const Header = styled__default['default'].div.attrs(() => ({
   displayName: "MenuSection__Header",
   componentId: "sc-gfcbvg-0"
 })(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
-const MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(props) {
+const MenuSection = /*#__PURE__*/react.memo(function MenuSection(props) {
   const {
     children,
     title,
@@ -7332,11 +7549,11 @@ const List = styled__default['default'].div.withConfig({
 })(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
 
 function isIndexable(item) {
-  if ( /*#__PURE__*/React.isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
+  if ( /*#__PURE__*/react.isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
   return false;
 }
 
-const MenuList = /*#__PURE__*/React.forwardRef(function MenuList({
+const MenuList = /*#__PURE__*/react.forwardRef(function MenuList({
   children,
   focus,
   ...rest
@@ -7346,28 +7563,28 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList({
     setFocusedIndex
   } = useMenu();
   let index = -1;
-  const focusableIndexs = React.useMemo(() => [], []);
-  const updatedChildren = React.useMemo(() => React.Children.map(children, child => {
+  const focusableIndexs = react.useMemo(() => [], []);
+  const updatedChildren = react.useMemo(() => react.Children.map(children, child => {
     if (child.type === MenuSection) {
-      const updatedGrandChildren = React.Children.map(child.props.children, grandChild => {
+      const updatedGrandChildren = react.Children.map(child.props.children, grandChild => {
         index++;
         if (isIndexable(grandChild)) focusableIndexs.push(index);
-        return /*#__PURE__*/React.cloneElement(grandChild, {
+        return /*#__PURE__*/react.cloneElement(grandChild, {
           index
         });
       });
-      return /*#__PURE__*/React.cloneElement(child, null, updatedGrandChildren);
+      return /*#__PURE__*/react.cloneElement(child, null, updatedGrandChildren);
     } else {
       index++;
       if (isIndexable(child)) focusableIndexs.push(index);
-      return /*#__PURE__*/React.cloneElement(child, {
+      return /*#__PURE__*/react.cloneElement(child, {
         index
       });
     }
   }), [children, focusableIndexs, index]);
   const firstFocusIndex = focusableIndexs[0];
   const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (focus === 'first') {
       setFocusedIndex(firstFocusIndex);
     }
@@ -7423,7 +7640,7 @@ const MenuPaper = styled__default['default'](Paper).withConfig({
 }) => styled.css({
   visibility: open ? null : 'hidden'
 }));
-const MenuContainer = /*#__PURE__*/React.forwardRef(function MenuContainer({
+const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer({
   children,
   anchorEl,
   onClose: onCloseCallback,
@@ -7435,11 +7652,11 @@ const MenuContainer = /*#__PURE__*/React.forwardRef(function MenuContainer({
     setOnClose,
     onClose
   } = useMenu();
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
-  });
+  }, [onClose, onCloseCallback, setOnClose]);
   useOutsideClick(containerEl, e => {
     if (open && onClose !== null && !anchorEl.contains(e.target)) {
       onClose();
@@ -7461,7 +7678,7 @@ const MenuContainer = /*#__PURE__*/React.forwardRef(function MenuContainer({
     children: children
   });
 });
-const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu({
+const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu({
   anchorEl,
   open,
   placement = 'auto',
@@ -7469,7 +7686,8 @@ const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu({
   className,
   ...rest
 }, ref) {
-  const [containerEl, setContainerEl] = React.useState(null);
+  const [containerEl, setContainerEl] = react.useState(null);
+  const [storedAnchorEl, setStoredAnchorEl] = react.useState(null);
   const isMounted = useIsMounted();
   const {
     density
@@ -7477,10 +7695,14 @@ const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu({
   const token = useToken({
     density
   }, menu);
+  react.useEffect(() => {
+    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
+    return () => setStoredAnchorEl(null);
+  }, [anchorEl, open]);
   const {
     styles,
     attributes
-  } = usePopper(anchorEl, containerEl, null, placement, 4);
+  } = usePopper(storedAnchorEl, containerEl, null, placement, 4);
   const props = {
     open,
     style: { ...styles.popper,
@@ -7554,7 +7776,7 @@ const pagination = {
   }
 };
 
-const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem({
+const PaginationItem = /*#__PURE__*/react.forwardRef(function PaginationItem({
   page,
   selected,
   onClick,
@@ -7660,7 +7882,7 @@ function getAriaLabel(page, selected) {
   return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
 }
 
-const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
+const Pagination = /*#__PURE__*/react.forwardRef(function Pagination({
   totalItems,
   defaultPage = 1,
   withItemIndicator,
@@ -7672,7 +7894,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
 
   const columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2:  < and >
 
-  const [activePage, setActivePage] = React.useState(defaultPage);
+  const [activePage, setActivePage] = react.useState(defaultPage);
   const currentItemFirst = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1; // First number of range of items at current page
 
   const currentItemLast = activePage === pages ? totalItems : activePage * itemsPerPage; // Last number of range of items at current page
@@ -7690,7 +7912,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
 
   const isMounted = useIsMounted();
   const items = PaginationControl(pages, activePage);
-  React.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (isMounted) {
       setActivePage(1);
       onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
@@ -7837,7 +8059,7 @@ const StyledSelect = styled__default['default'].select.withConfig({
 })(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), ({
   theme
 }) => styled.css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
-const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect({
+const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect({
   label,
   children,
   className,
@@ -7936,6 +8158,9 @@ const select = {
         left: spacingSmall,
         right: spacingSmall,
         top: '6px'
+      },
+      typography: {
+        color: colors.text.static_icons__tertiary.rgba
       }
     }
   },
@@ -7985,7 +8210,7 @@ const Container = styled__default['default'].div.withConfig({
   displayName: "commonStyles__Container",
   componentId: "sc-v98ajk-0"
 })(["position:relative;"]);
-const PaddedInput = styled__default['default'](Input$5).withConfig({
+const PaddedInput = styled__default['default'](Input$4).withConfig({
   displayName: "commonStyles__PaddedInput",
   componentId: "sc-v98ajk-1"
 })(["padding-right:calc( ", " + ", " + ", " + 0px );"], buttonToken.height, buttonToken.spacings.left, buttonToken.spacings.right);
@@ -8014,7 +8239,7 @@ const StyledButton = styled__default['default'](Button).withConfig({
     }
   }
 }) => {
-  return styled.css(["position:absolute;right:", ";height:", ";width:", ";top:", ";"], button.spacings.right, button.height, button.height, button.spacings.top);
+  return styled.css(["position:absolute;right:", ";height:", ";width:", ";top:", ";color:", ";"], button.spacings.right, button.height, button.height, button.spacings.top, button.typography.color);
 });
 const StyledInputWrapper = styled__default['default'].div.withConfig({
   displayName: "commonStyles__StyledInputWrapper",
@@ -8027,7 +8252,7 @@ const PaddedStyledListItem$1 = styled__default['default'](StyledListItem).withCo
 })(["", ""], ({
   theme
 }) => spacingsTemplate(theme.spacings));
-const SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect({
+const SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect({
   items = [],
   label,
   meta,
@@ -8039,7 +8264,7 @@ const SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect({
   handleSelectedItemChange,
   ...other
 }, ref) {
-  const [inputItems, setInputItems] = React.useState(items);
+  const [inputItems, setInputItems] = react.useState(items);
   const isControlled = selectedOption !== undefined ? true : false;
   const {
     density
@@ -8047,7 +8272,7 @@ const SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect({
   const token = useToken({
     density
   }, select);
-  React.useEffect(() => {
+  react.useEffect(() => {
     setInputItems(items);
   }, [items]);
   let comboboxProps = {
@@ -8290,7 +8515,7 @@ const InputWrapper$1 = styled__default['default'].span.withConfig({
 }) => spacingsTemplate(theme.spacings), ({
   disabled
 }) => disabled ? 'transparent' : checkbox.states.hover.background);
-const CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput({
+const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput({
   disabled = false,
   indeterminate,
   ...rest
@@ -8352,7 +8577,7 @@ const PaddedStyledListItem = styled__default['default'](StyledListItem).withConf
 })(["display:flex;align-items:center;", ""], ({
   theme
 }) => spacingsTemplate(theme.spacings));
-const MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect({
+const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect({
   items = [],
   initialSelectedItems = [],
   label,
@@ -8365,7 +8590,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect({
   ...other
 }, ref) {
   const isControlled = selectedOptions ? true : false;
-  const [inputValue, setInputValue] = React.useState('');
+  const [inputValue, setInputValue] = react.useState('');
   const {
     density
   } = useEds();
@@ -8451,8 +8676,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect({
         case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
         case downshift.useCombobox.stateChangeTypes.ItemClick:
         case downshift.useCombobox.stateChangeTypes.InputBlur:
+          setInputValue('');
+
           if (selectedItem) {
-            setInputValue('');
             selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
           }
 
@@ -8468,6 +8694,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect({
     }
   };
 
+  const handleClear = () => {
+    reset();
+    setInputValue('');
+  };
+
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
@@ -8491,7 +8722,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect({
           disabled: disabled || readOnly,
           "aria-label": 'clear options',
           title: "clear",
-          onClick: reset,
+          onClick: handleClear,
           style: {
             right: 32
           },
@@ -8544,7 +8775,7 @@ const LabelText$1 = styled__default['default'].span.withConfig({
   displayName: "Checkbox__LabelText",
   componentId: "sc-yg6l8h-1"
 })(["", ";"], typographyTemplate(checkbox.typography));
-const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox({
+const Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox({
   label,
   disabled = false,
   indeterminate,
@@ -8719,7 +8950,7 @@ const InputWrapper = styled__default['default'].span.withConfig({
 }) => disabled ? 'not-allowed' : 'pointer', ({
   disabled
 }) => disabled ? 'transparent' : comfortable$1.states.hover.background);
-const Radio = /*#__PURE__*/React.forwardRef(function Radio({
+const Radio = /*#__PURE__*/react.forwardRef(function Radio({
   label,
   disabled = false,
   className,
@@ -8733,7 +8964,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio({
   }, comfortable$1);
   const iconSize = 24;
   const fill = disabled ? comfortable$1.states.disabled.background : comfortable$1.background;
-  const renderSVG = React.useMemo(() => {
+  const renderSVG = react.useMemo(() => {
     return /*#__PURE__*/jsxRuntime.jsxs(Svg, {
       width: iconSize,
       height: iconSize,
@@ -8841,7 +9072,7 @@ const Handle$1 = styled__default['default'].span.withConfig({
     }
   }
 }) => styled.css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height));
-const SwitchSmall = /*#__PURE__*/React.forwardRef(function SwitchSmall({
+const SwitchSmall = /*#__PURE__*/react.forwardRef(function SwitchSmall({
   disabled,
   ...rest
 }, ref) {
@@ -8893,7 +9124,7 @@ const Handle = styled__default['default'].span.withConfig({
 }) => styled.css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, isDisabled && {
   backgroundColor: states.disabled.background
 }, handle.boxShadow, handle.width, handle.height));
-const SwitchDefault = /*#__PURE__*/React.forwardRef(function SwitchDefault({
+const SwitchDefault = /*#__PURE__*/react.forwardRef(function SwitchDefault({
   disabled,
   ...rest
 }, ref) {
@@ -9089,7 +9320,7 @@ const Label = styled__default['default'].span.withConfig({
 })(({
   theme
 }) => styled.css(["", " margin-left:", ";"], typographyTemplate(theme.typography), theme.entities.label.spacings.left));
-const Switch = /*#__PURE__*/React.forwardRef(function Switch({
+const Switch = /*#__PURE__*/react.forwardRef(function Switch({
   size = 'default',
   disabled,
   label,
@@ -9147,7 +9378,7 @@ exports.Divider = Divider;
 exports.DotProgress = DotProgress;
 exports.EdsProvider = EdsProvider;
 exports.Icon = Icon$1;
-exports.Input = Input$5;
+exports.Input = Input$4;
 exports.Label = Label$1;
 exports.LinearProgress = LinearProgress;
 exports.List = List$1;