@equinor/eds-core-react 0.25.0 → 0.26.0

package/dist/eds-core-react.cjs.js

@@ -50,11 +50,11 @@ var ReactDom__namespace = /*#__PURE__*/_interopNamespace(ReactDom);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
 var buttonTypography = edsTokens.tokens.typography.navigation.button,
-    _tokens$colors$intera$k = edsTokens.tokens.colors.interactive,
-    disabledTextColor$3 = _tokens$colors$intera$k.disabled__text.rgba,
-    disabledBorderColor$2 = _tokens$colors$intera$k.disabled__border.rgba,
-    disabledColor$3 = _tokens$colors$intera$k.disabled__fill.rgba,
-    medium$6 = edsTokens.tokens.spacings.comfortable.medium,
+    _tokens$colors$intera$l = edsTokens.tokens.colors.interactive,
+    disabledTextColor$3 = _tokens$colors$intera$l.disabled__text.rgba,
+    disabledBorderColor$2 = _tokens$colors$intera$l.disabled__border.rgba,
+    disabledColor$3 = _tokens$colors$intera$l.disabled__fill.rgba,
+    medium$7 = edsTokens.tokens.spacings.comfortable.medium,
     _tokens$shape$3 = edsTokens.tokens.shape,
     _tokens$shape$button = _tokens$shape$3.button,
     buttonHeight = _tokens$shape$button.minHeight,
@@ -81,8 +81,8 @@ var button = {
   spacings: {
     top: 'var(--eds_button__padding_y, 0)',
     bottom: 'var(--eds_button__padding_y, 0)',
-    left: "var(--eds_button__padding_x, ".concat(medium$6, ")"),
-    right: "var(--eds_button__padding_x, ".concat(medium$6, ")")
+    left: "var(--eds_button__padding_x, ".concat(medium$7, ")"),
+    right: "var(--eds_button__padding_x, ".concat(medium$7, ")")
   },
   clickbound: {
     height: clicboundHeight$2,
@@ -372,20 +372,20 @@ var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
 
 var mergeDeepRight$1 = mergeDeepRight;
 
-var _tokens$colors$j = edsTokens.tokens.colors,
-    primaryWhite = _tokens$colors$j.text.static_icons__primary_white.rgba,
-    _tokens$colors$intera$j = _tokens$colors$j.interactive,
-    primaryColor$7 = _tokens$colors$intera$j.primary__resting.rgba,
-    primaryHoverColor$2 = _tokens$colors$intera$j.primary__hover.rgba,
-    secondaryColor$3 = _tokens$colors$intera$j.secondary__resting.rgba,
-    secondaryHoverColor$3 = _tokens$colors$intera$j.secondary__link_hover.rgba,
-    dangerColor$3 = _tokens$colors$intera$j.danger__resting.rgba,
-    dangerHoverColor$3 = _tokens$colors$intera$j.danger__hover.rgba,
+var _tokens$colors$k = edsTokens.tokens.colors,
+    primaryWhite$2 = _tokens$colors$k.text.static_icons__primary_white.rgba,
+    _tokens$colors$intera$k = _tokens$colors$k.interactive,
+    primaryColor$7 = _tokens$colors$intera$k.primary__resting.rgba,
+    primaryHoverColor$2 = _tokens$colors$intera$k.primary__hover.rgba,
+    secondaryColor$3 = _tokens$colors$intera$k.secondary__resting.rgba,
+    secondaryHoverColor$3 = _tokens$colors$intera$k.secondary__link_hover.rgba,
+    dangerColor$3 = _tokens$colors$intera$k.danger__resting.rgba,
+    dangerHoverColor$3 = _tokens$colors$intera$k.danger__hover.rgba,
     buttonBorderRadius$1 = edsTokens.tokens.shape.button.borderRadius;
 var primary$a = mergeDeepRight$1(button, {
   background: primaryColor$7,
   typography: {
-    color: primaryWhite
+    color: primaryWhite$2
   },
   border: {
     type: 'border',
@@ -429,16 +429,16 @@ var danger$6 = mergeDeepRight$1(primary$a, {
   }
 });
 
-var _tokens$colors$intera$i = edsTokens.tokens.colors.interactive,
-    primaryColor$6 = _tokens$colors$intera$i.primary__resting.rgba,
-    primaryHoverColor$1 = _tokens$colors$intera$i.primary__hover.rgba,
-    primaryHoverAltColor$2 = _tokens$colors$intera$i.primary__hover_alt.rgba,
-    secondaryColor$2 = _tokens$colors$intera$i.secondary__resting.rgba,
-    secondaryHoverColor$2 = _tokens$colors$intera$i.secondary__link_hover.rgba,
-    secondaryHoverAltColor$2 = _tokens$colors$intera$i.secondary__highlight.rgba,
-    dangerColor$2 = _tokens$colors$intera$i.danger__resting.rgba,
-    dangerHoverColor$2 = _tokens$colors$intera$i.danger__hover.rgba,
-    dangerHoverAltColor$2 = _tokens$colors$intera$i.danger__highlight.rgba,
+var _tokens$colors$intera$j = edsTokens.tokens.colors.interactive,
+    primaryColor$6 = _tokens$colors$intera$j.primary__resting.rgba,
+    primaryHoverColor$1 = _tokens$colors$intera$j.primary__hover.rgba,
+    primaryHoverAltColor$2 = _tokens$colors$intera$j.primary__hover_alt.rgba,
+    secondaryColor$2 = _tokens$colors$intera$j.secondary__resting.rgba,
+    secondaryHoverColor$2 = _tokens$colors$intera$j.secondary__link_hover.rgba,
+    secondaryHoverAltColor$2 = _tokens$colors$intera$j.secondary__highlight.rgba,
+    dangerColor$2 = _tokens$colors$intera$j.danger__resting.rgba,
+    dangerHoverColor$2 = _tokens$colors$intera$j.danger__hover.rgba,
+    dangerHoverAltColor$2 = _tokens$colors$intera$j.danger__highlight.rgba,
     buttonBorderRadius = edsTokens.tokens.shape.button.borderRadius;
 var primary$9 = mergeDeepRight$1(button, {
   typography: {
@@ -508,16 +508,16 @@ var danger$5 = mergeDeepRight$1(primary$9, {
   }
 });
 
-var _tokens$colors$intera$h = edsTokens.tokens.colors.interactive,
-    primaryColor$5 = _tokens$colors$intera$h.primary__resting.rgba,
-    primaryHoverColor = _tokens$colors$intera$h.primary__hover.rgba,
-    primaryHoverAltColor$1 = _tokens$colors$intera$h.primary__hover_alt.rgba,
-    secondaryColor$1 = _tokens$colors$intera$h.secondary__resting.rgba,
-    secondaryHoverColor$1 = _tokens$colors$intera$h.secondary__link_hover.rgba,
-    secondaryHoverAltColor$1 = _tokens$colors$intera$h.secondary__highlight.rgba,
-    dangerColor$1 = _tokens$colors$intera$h.danger__resting.rgba,
-    dangerHoverColor$1 = _tokens$colors$intera$h.danger__hover.rgba,
-    dangerHoverAltColor$1 = _tokens$colors$intera$h.danger__highlight.rgba;
+var _tokens$colors$intera$i = edsTokens.tokens.colors.interactive,
+    primaryColor$5 = _tokens$colors$intera$i.primary__resting.rgba,
+    primaryHoverColor = _tokens$colors$intera$i.primary__hover.rgba,
+    primaryHoverAltColor$1 = _tokens$colors$intera$i.primary__hover_alt.rgba,
+    secondaryColor$1 = _tokens$colors$intera$i.secondary__resting.rgba,
+    secondaryHoverColor$1 = _tokens$colors$intera$i.secondary__link_hover.rgba,
+    secondaryHoverAltColor$1 = _tokens$colors$intera$i.secondary__highlight.rgba,
+    dangerColor$1 = _tokens$colors$intera$i.danger__resting.rgba,
+    dangerHoverColor$1 = _tokens$colors$intera$i.danger__hover.rgba,
+    dangerHoverAltColor$1 = _tokens$colors$intera$i.danger__highlight.rgba;
 var primary$8 = mergeDeepRight$1(button, {
   typography: {
     color: primaryColor$5
@@ -564,15 +564,15 @@ var danger$4 = mergeDeepRight$1(primary$8, {
   }
 });
 
-var _tokens$colors$intera$g = edsTokens.tokens.colors.interactive,
-    primaryColor$4 = _tokens$colors$intera$g.primary__resting.rgba,
-    primaryHoverAltColor = _tokens$colors$intera$g.primary__hover_alt.rgba,
-    secondaryColor = _tokens$colors$intera$g.secondary__resting.rgba,
-    secondaryHoverColor = _tokens$colors$intera$g.secondary__link_hover.rgba,
-    secondaryHoverAltColor = _tokens$colors$intera$g.secondary__highlight.rgba,
-    dangerColor = _tokens$colors$intera$g.danger__resting.rgba,
-    dangerHoverColor = _tokens$colors$intera$g.danger__hover.rgba,
-    dangerHoverAltColor = _tokens$colors$intera$g.danger__highlight.rgba,
+var _tokens$colors$intera$h = edsTokens.tokens.colors.interactive,
+    primaryColor$4 = _tokens$colors$intera$h.primary__resting.rgba,
+    primaryHoverAltColor = _tokens$colors$intera$h.primary__hover_alt.rgba,
+    secondaryColor = _tokens$colors$intera$h.secondary__resting.rgba,
+    secondaryHoverColor = _tokens$colors$intera$h.secondary__link_hover.rgba,
+    secondaryHoverAltColor = _tokens$colors$intera$h.secondary__highlight.rgba,
+    dangerColor = _tokens$colors$intera$h.danger__resting.rgba,
+    dangerHoverColor = _tokens$colors$intera$h.danger__hover.rgba,
+    dangerHoverAltColor = _tokens$colors$intera$h.danger__highlight.rgba,
     _tokens$clickbounds$3 = edsTokens.tokens.clickbounds,
     clicboundHeight$1 = _tokens$clickbounds$3.default__base,
     compactClickboundHeight$1 = _tokens$clickbounds$3.compact__standard,
@@ -755,16 +755,16 @@ var InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth(_ref,
   });
 });
 
-var initalState$2 = {
+var initalState$3 = {
   /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
-var EdsContext = /*#__PURE__*/react.createContext(initalState$2);
+var EdsContext = /*#__PURE__*/react.createContext(initalState$3);
 var EdsProvider = function EdsProvider(_ref) {
   var children = _ref.children,
       density = _ref.density;
 
-  var _useState = react.useState(_objectSpread__default["default"](_objectSpread__default["default"]({}, initalState$2), {}, {
+  var _useState = react.useState(_objectSpread__default["default"](_objectSpread__default["default"]({}, initalState$3), {}, {
     density: density || 'comfortable'
   })),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -797,7 +797,7 @@ var useEds = function useEds() {
   return react.useContext(EdsContext);
 };
 
-var _excluded$1n = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
+var _excluded$1s = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
 
 var getVariant = function getVariant(tokenSet, variant) {
   switch (variant) {
@@ -849,7 +849,7 @@ var ButtonBase = styled__default["default"].button.withConfig({
   var focus = states.focus,
       hover = states.hover,
       disabled = states.disabled;
-  return styled.css(["box-sizing:border-box;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, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.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, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
+  return styled.css(["box-sizing:border-box;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,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.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, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
 });
 var Button$1 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
   var _ref2$color = _ref2.color,
@@ -864,7 +864,7 @@ var Button$1 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
       tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
       _ref2$fullWidth = _ref2.fullWidth,
       fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$1n);
+      other = _objectWithoutProperties__default["default"](_ref2, _excluded$1s);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -905,7 +905,7 @@ var group = {
   }
 };
 
-var _excluded$1m = ["children", "vertical"];
+var _excluded$1r = ["children", "vertical"];
 var border$4 = group.border;
 var radius$1 = border$4.type === 'border' && border$4.radius;
 var ButtonGroupBase = styled__default["default"].div.withConfig({
@@ -918,7 +918,7 @@ var ButtonGroupBase = styled__default["default"].div.withConfig({
 var ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref) {
   var children = _ref2.children,
       vertical = _ref2.vertical,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1m);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1r);
 
   var props = _objectSpread__default["default"]({
     ref: ref,
@@ -932,13 +932,13 @@ var ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref)
   }));
 });
 
-var _excluded$1l = ["children", "multiple", "selectedIndexes", "onChange"];
+var _excluded$1q = ["children", "multiple", "selectedIndexes", "onChange"];
 var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref) {
   var children = _ref.children,
       multiple = _ref.multiple,
       selectedIndexes = _ref.selectedIndexes,
       onChange = _ref.onChange,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1l);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1q);
 
   var _useState = react.useState(selectedIndexes || []),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -1031,7 +1031,7 @@ var link = {
   }
 };
 
-var _excluded$1k = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
+var _excluded$1p = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
 
 var getElementType = function getElementType(variant, link) {
   if (link) {
@@ -1110,7 +1110,7 @@ var Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref) {
       group = _ref5.group,
       token = _ref5.token,
       providedAs = _ref5.as,
-      other = _objectWithoutProperties__default["default"](_ref5, _excluded$1k);
+      other = _objectWithoutProperties__default["default"](_ref5, _excluded$1p);
 
   var as = providedAs ? providedAs : getElementType(variant, link);
   var variantName = toVariantName(variant, bold, italic, link);
@@ -1135,19 +1135,19 @@ var _tokens$typography$2 = edsTokens.tokens.typography,
     cellTypography$1 = _tokens$typography$ta.cell_text,
     cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
     compactTypography$1 = _tokens$typography$2._modes.compact,
-    _tokens$colors$i = edsTokens.tokens.colors,
-    typographyColor$1 = _tokens$colors$i.text.static_icons__default.rgba,
-    borderColor$4 = _tokens$colors$i.ui.background__medium.rgba,
-    _tokens$colors$intera$f = _tokens$colors$i.interactive,
-    backgroundColor$5 = _tokens$colors$intera$f.table__cell__fill_resting.rgba,
-    hoverBackgroundColor$3 = _tokens$colors$intera$f.table__cell__fill_hover.rgba,
-    activeBackgroundColor$2 = _tokens$colors$intera$f.table__cell__fill_activated.rgba,
-    errorColor$1 = _tokens$colors$intera$f.danger__highlight.rgba,
-    primaryRestingColor$1 = _tokens$colors$intera$f.primary__resting.rgba,
-    disabledTextColor$2 = _tokens$colors$intera$f.disabled__text.rgba,
-    disabledBorderColor$1 = _tokens$colors$intera$f.disabled__border.rgba,
-    focusColor$3 = _tokens$colors$intera$f.focus.rgba,
-    medium$5 = edsTokens.tokens.spacings.comfortable.medium;
+    _tokens$colors$j = edsTokens.tokens.colors,
+    typographyColor$1 = _tokens$colors$j.text.static_icons__default.rgba,
+    borderColor$4 = _tokens$colors$j.ui.background__medium.rgba,
+    _tokens$colors$intera$g = _tokens$colors$j.interactive,
+    backgroundColor$5 = _tokens$colors$intera$g.table__cell__fill_resting.rgba,
+    hoverBackgroundColor$3 = _tokens$colors$intera$g.table__cell__fill_hover.rgba,
+    activeBackgroundColor$2 = _tokens$colors$intera$g.table__cell__fill_activated.rgba,
+    errorColor$1 = _tokens$colors$intera$g.danger__highlight.rgba,
+    primaryRestingColor$1 = _tokens$colors$intera$g.primary__resting.rgba,
+    disabledTextColor$2 = _tokens$colors$intera$g.disabled__text.rgba,
+    disabledBorderColor$1 = _tokens$colors$intera$g.disabled__border.rgba,
+    focusColor$4 = _tokens$colors$intera$g.focus.rgba,
+    medium$6 = edsTokens.tokens.spacings.comfortable.medium;
 var tableCell = {
   height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor$5,
@@ -1165,8 +1165,8 @@ var tableCell = {
   spacings: {
     top: 'var(--eds_table__cell__padding_y, 0)',
     bottom: 'var(--eds_table__cell__padding_y, 0)',
-    left: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")"),
-    right: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")")
+    left: "var(--eds_table__cell__padding_x, ".concat(medium$6, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(medium$6, ")")
   },
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, cellTypography$1), {}, {
     color: typographyColor$1,
@@ -1198,7 +1198,7 @@ var tableCell = {
     focus: {
       outline: {
         type: 'outline',
-        color: focusColor$3,
+        color: focusColor$4,
         width: '1px',
         style: 'dashed'
       }
@@ -1216,8 +1216,8 @@ var tableCell = {
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
         bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
-        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")"),
-        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")")
+        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$6, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$6, ")")
       }
     }
   },
@@ -1251,14 +1251,14 @@ var applyVariant = function applyVariant(variant, token) {
   }
 };
 
-var _excluded$1j = ["children"];
+var _excluded$1o = ["children"];
 var TableBase$1 = styled__default["default"].table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
 var Table$1 = /*#__PURE__*/react.forwardRef(function Table(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1j);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1o);
 
   return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
@@ -1266,19 +1266,19 @@ var Table$1 = /*#__PURE__*/react.forwardRef(function Table(_ref, ref) {
   }));
 }); // Table.displayName = 'EdsTable'
 
-var initalState$1 = {
+var initalState$2 = {
   variant: 'body'
 };
-var InnerContext = /*#__PURE__*/react.createContext(initalState$1);
+var InnerContext = /*#__PURE__*/react.createContext(initalState$2);
 
-var _excluded$1i = ["children"];
+var _excluded$1n = ["children"];
 var TableBase = styled__default["default"].tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
 var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1i);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1n);
 
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
@@ -1291,7 +1291,7 @@ var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   });
 });
 
-var _excluded$1h = ["children", "variant"];
+var _excluded$1m = ["children", "variant"];
 var StyledTableCell$1 = styled__default["default"].td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
@@ -1313,7 +1313,7 @@ var TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2,
   var children = _ref2.children,
       _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1h);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1m);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -1333,18 +1333,18 @@ var TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2,
 var _tokens$typography$1 = edsTokens.tokens.typography,
     cellTypography = _tokens$typography$1.table.cell_header,
     compactTypography = _tokens$typography$1._modes.compact,
-    _tokens$colors$h = edsTokens.tokens.colors,
-    typographyColor = _tokens$colors$h.text.static_icons__default.rgba,
-    borderColor$3 = _tokens$colors$h.ui.background__medium.rgba,
-    _tokens$colors$intera$e = _tokens$colors$h.interactive,
-    backgroundColor$4 = _tokens$colors$intera$e.table__header__fill_resting.rgba,
-    hoverBackgroundColor$2 = _tokens$colors$intera$e.table__header__fill_hover.rgba,
-    activeBackgroundColor$1 = _tokens$colors$intera$e.table__header__fill_activated.rgba,
-    primaryRestingColor = _tokens$colors$intera$e.primary__resting.rgba,
-    disabledTextColor$1 = _tokens$colors$intera$e.disabled__text.rgba,
-    disabledBorderColor = _tokens$colors$intera$e.disabled__border.rgba,
-    focusColor$2 = _tokens$colors$intera$e.focus.rgba,
-    medium$4 = edsTokens.tokens.spacings.comfortable.medium;
+    _tokens$colors$i = edsTokens.tokens.colors,
+    typographyColor = _tokens$colors$i.text.static_icons__default.rgba,
+    borderColor$3 = _tokens$colors$i.ui.background__medium.rgba,
+    _tokens$colors$intera$f = _tokens$colors$i.interactive,
+    backgroundColor$4 = _tokens$colors$intera$f.table__header__fill_resting.rgba,
+    hoverBackgroundColor$2 = _tokens$colors$intera$f.table__header__fill_hover.rgba,
+    activeBackgroundColor$1 = _tokens$colors$intera$f.table__header__fill_activated.rgba,
+    primaryRestingColor = _tokens$colors$intera$f.primary__resting.rgba,
+    disabledTextColor$1 = _tokens$colors$intera$f.disabled__text.rgba,
+    disabledBorderColor = _tokens$colors$intera$f.disabled__border.rgba,
+    focusColor$3 = _tokens$colors$intera$f.focus.rgba,
+    medium$5 = edsTokens.tokens.spacings.comfortable.medium;
 var token$4 = {
   height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor$4,
@@ -1367,8 +1367,8 @@ var token$4 = {
   spacings: {
     top: 'var(--eds_table__cell__padding_y, 0)',
     bottom: 'var(--eds_table__cell__padding_y, 0)',
-    left: "var(--eds_table__cell__padding_x, ".concat(medium$4, ")"),
-    right: "var(--eds_table__cell__padding_x, ".concat(medium$4, ")")
+    left: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")")
   },
   states: {
     active: {
@@ -1397,7 +1397,7 @@ var token$4 = {
     focus: {
       outline: {
         type: 'outline',
-        color: focusColor$2,
+        color: focusColor$3,
         width: '1px',
         style: 'dashed'
       }
@@ -1413,14 +1413,14 @@ var token$4 = {
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
         bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
-        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$4, ")"),
-        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$4, ")")
+        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")")
       }
     }
   }
 };
 
-var _excluded$1g = ["children", "sort"];
+var _excluded$1l = ["children", "sort"];
 var StyledTableCell = styled__default["default"].th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
@@ -1453,7 +1453,7 @@ var CellInner = styled__default["default"].div.withConfig({
 var TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell(_ref, ref) {
   var children = _ref.children,
       sort = _ref.sort,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$1g);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$1l);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -1499,9 +1499,9 @@ var Cell = /*#__PURE__*/react.forwardRef(function Cell(_ref, ref) {
   });
 });
 
-var _tokens$colors$g = edsTokens.tokens.colors,
-    borderColor$2 = _tokens$colors$g.ui.background__medium.rgba,
-    backgroundColor$3 = _tokens$colors$g.interactive.table__header__fill_resting.rgba;
+var _tokens$colors$h = edsTokens.tokens.colors,
+    borderColor$2 = _tokens$colors$h.ui.background__medium.rgba,
+    backgroundColor$3 = _tokens$colors$h.interactive.table__header__fill_resting.rgba;
 var token$3 = {
   background: backgroundColor$3,
   border: {
@@ -1515,7 +1515,7 @@ var token$3 = {
   }
 };
 
-var _excluded$1f = ["children", "sticky"];
+var _excluded$1k = ["children", "sticky"];
 var StyledTableHead = styled__default["default"].thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
@@ -1523,7 +1523,7 @@ var StyledTableHead = styled__default["default"].thead.withConfig({
 var Head = /*#__PURE__*/react.forwardRef(function Head(_ref, ref) {
   var children = _ref.children,
       sticky = _ref.sticky,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1f);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1k);
 
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
@@ -1537,9 +1537,9 @@ var Head = /*#__PURE__*/react.forwardRef(function Head(_ref, ref) {
   });
 });
 
-var _tokens$colors$intera$d = edsTokens.tokens.colors.interactive,
-    hoverBackgroundColor$1 = _tokens$colors$intera$d.table__cell__fill_hover.rgba,
-    activeBackgroundColor = _tokens$colors$intera$d.table__cell__fill_activated.rgba;
+var _tokens$colors$intera$e = edsTokens.tokens.colors.interactive,
+    hoverBackgroundColor$1 = _tokens$colors$intera$e.table__cell__fill_hover.rgba,
+    activeBackgroundColor = _tokens$colors$intera$e.table__cell__fill_activated.rgba;
 var token$2 = {
   states: {
     active: {
@@ -1605,13 +1605,13 @@ Table.Head.displayName = 'Table.Head';
 Table.Row.displayName = 'Table.Row';
 Table.Caption.displayName = 'Table.Caption';
 
-var _tokens$colors$ui$5 = edsTokens.tokens.colors.ui,
-    lighter = _tokens$colors$ui$5.background__default.rgba,
-    light = _tokens$colors$ui$5.background__light.rgba,
-    mediumColor = _tokens$colors$ui$5.background__medium.rgba,
-    _tokens$spacings$comf$e = edsTokens.tokens.spacings.comfortable,
-    spacingSmall$5 = _tokens$spacings$comf$e.small,
-    spacingMedium$9 = _tokens$spacings$comf$e.medium;
+var _tokens$colors$ui$6 = edsTokens.tokens.colors.ui,
+    lighter = _tokens$colors$ui$6.background__default.rgba,
+    light = _tokens$colors$ui$6.background__light.rgba,
+    mediumColor = _tokens$colors$ui$6.background__medium.rgba,
+    _tokens$spacings$comf$f = edsTokens.tokens.spacings.comfortable,
+    spacingSmall$5 = _tokens$spacings$comf$f.small,
+    spacingMedium$9 = _tokens$spacings$comf$f.medium;
 var divider$1 = {
   lighter: {
     background: lighter
@@ -1623,13 +1623,13 @@ var divider$1 = {
     background: mediumColor
   }
 };
-var small$6 = {
+var small$7 = {
   spacings: {
     top: spacingSmall$5,
     bottom: spacingSmall$5
   }
 };
-var medium$3 = {
+var medium$4 = {
   spacings: {
     top: spacingMedium$9,
     bottom: spacingMedium$9
@@ -1639,11 +1639,11 @@ var medium$3 = {
 var tokens$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   divider: divider$1,
-  small: small$6,
-  medium: medium$3
+  small: small$7,
+  medium: medium$4
 });
 
-var _excluded$1e = ["color", "variant", "size"];
+var _excluded$1j = ["color", "variant", "size"];
 var divider = divider$1;
 var StyledDivider$3 = styled__default["default"].hr.withConfig({
   displayName: "Divider__StyledDivider",
@@ -1662,7 +1662,7 @@ var Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
       variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? '1' : _ref2$size,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1e);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1j);
 
   var colorValue = color === 'medium' ? 'mediumColor' : color;
 
@@ -1701,7 +1701,7 @@ var label = {
   }
 };
 
-var _excluded$1d = ["label", "meta", "disabled"];
+var _excluded$1i = ["label", "meta", "disabled"];
 var LabelBase = styled__default["default"].label.withConfig({
   displayName: "Label__LabelBase",
   componentId: "sc-1gi2bcn-0"
@@ -1719,7 +1719,7 @@ var Label$2 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
       meta = props.meta,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      other = _objectWithoutProperties__default["default"](props, _excluded$1d);
+      other = _objectWithoutProperties__default["default"](props, _excluded$1i);
 
   return (
     /*#__PURE__*/
@@ -1762,8 +1762,8 @@ var helperText = {
   }
 };
 
-var _excluded$1c = ["text", "icon", "color"];
-var Container$5 = styled__default["default"].div.withConfig({
+var _excluded$1h = ["text", "icon", "color"];
+var Container$6 = styled__default["default"].div.withConfig({
   displayName: "HelperText__Container",
   componentId: "sc-189ug61-0"
 })(function (_ref) {
@@ -1786,13 +1786,13 @@ var TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelper
       icon = _ref2.icon,
       _ref2$color = _ref2.color,
       color = _ref2$color === void 0 ? helperText.typography.color : _ref2$color,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1c);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1h);
 
   if (!text) {
     return null;
   }
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, _objectSpread__default["default"](_objectSpread__default["default"]({}, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$6, _objectSpread__default["default"](_objectSpread__default["default"]({}, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     color: color,
     ref: ref
   })), {}, {
@@ -1802,31 +1802,31 @@ var TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelper
   }));
 });
 
-var _tokens$colors$f = edsTokens.tokens.colors,
-    background$d = _tokens$colors$f.ui.background__light.rgba,
-    _tokens$colors$text$1 = _tokens$colors$f.text,
-    static_icons__default$1 = _tokens$colors$text$1.static_icons__default,
-    static_icons__tertiary$1 = _tokens$colors$text$1.static_icons__tertiary,
-    _tokens$colors$intera$c = _tokens$colors$f.interactive,
-    disabled__text$1 = _tokens$colors$intera$c.disabled__text,
-    primary__resting$1 = _tokens$colors$intera$c.primary__resting,
-    danger__resting$1 = _tokens$colors$intera$c.danger__resting,
-    danger__hover$1 = _tokens$colors$intera$c.danger__hover,
-    warning__resting$1 = _tokens$colors$intera$c.warning__resting,
-    warning__hover$1 = _tokens$colors$intera$c.warning__hover,
-    success__resting$1 = _tokens$colors$intera$c.success__resting,
-    success__hover$1 = _tokens$colors$intera$c.success__hover,
-    _tokens$spacings$comf$d = edsTokens.tokens.spacings.comfortable,
-    small$5 = _tokens$spacings$comf$d.small,
-    x_small$5 = _tokens$spacings$comf$d.x_small,
+var _tokens$colors$g = edsTokens.tokens.colors,
+    background$e = _tokens$colors$g.ui.background__light.rgba,
+    _tokens$colors$text$2 = _tokens$colors$g.text,
+    static_icons__default$1 = _tokens$colors$text$2.static_icons__default,
+    static_icons__tertiary$1 = _tokens$colors$text$2.static_icons__tertiary,
+    _tokens$colors$intera$d = _tokens$colors$g.interactive,
+    disabled__text$1 = _tokens$colors$intera$d.disabled__text,
+    primary__resting$2 = _tokens$colors$intera$d.primary__resting,
+    danger__resting$1 = _tokens$colors$intera$d.danger__resting,
+    danger__hover$1 = _tokens$colors$intera$d.danger__hover,
+    warning__resting$1 = _tokens$colors$intera$d.warning__resting,
+    warning__hover$1 = _tokens$colors$intera$d.warning__hover,
+    success__resting$1 = _tokens$colors$intera$d.success__resting,
+    success__hover$1 = _tokens$colors$intera$d.success__hover,
+    _tokens$spacings$comf$e = edsTokens.tokens.spacings.comfortable,
+    small$6 = _tokens$spacings$comf$e.small,
+    x_small$5 = _tokens$spacings$comf$e.x_small,
     typography$e = edsTokens.tokens.typography,
     shape$2 = edsTokens.tokens.shape;
 var input$2 = {
   minHeight: shape$2.straight.minHeight,
-  background: background$d,
+  background: background$e,
   spacings: {
-    left: small$5,
-    right: small$5,
+    left: small$6,
+    right: small$6,
     top: '6px',
     bottom: '6px'
   },
@@ -1875,7 +1875,7 @@ var input$2 = {
       outline: {
         type: 'outline',
         width: '2px',
-        color: primary__resting$1.rgba,
+        color: primary__resting$2.rgba,
         style: 'solid',
         offset: '0px'
       }
@@ -1961,8 +1961,8 @@ var inputToken$1 = {
   success: success$1
 };
 
-var _excluded$1b = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
-var Container$4 = styled__default["default"].div.withConfig({
+var _excluded$1g = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
+var Container$5 = styled__default["default"].div.withConfig({
   displayName: "InputWrapper__Container",
   componentId: "sc-v6o9z1-0"
 })([""]);
@@ -1985,7 +1985,7 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
       _ref$helperProps = _ref.helperProps,
       helperProps = _ref$helperProps === void 0 ? {} : _ref$helperProps,
       helperIcon = _ref.helperIcon,
-      other = _objectWithoutProperties__default["default"](_ref, _excluded$1b);
+      other = _objectWithoutProperties__default["default"](_ref, _excluded$1g);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -2004,7 +2004,7 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
   var hasLabel = Boolean(label || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.label));
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, other), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$5, _objectSpread__default["default"](_objectSpread__default["default"]({}, other), {}, {
       ref: ref,
       children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, _objectSpread__default["default"]({}, _objectSpread__default["default"]({
         label: label
@@ -2017,32 +2017,32 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
   });
 });
 
-var _tokens$colors$e = edsTokens.tokens.colors,
-    background$c = _tokens$colors$e.ui.background__light.rgba,
-    _tokens$colors$text = _tokens$colors$e.text,
-    static_icons__default = _tokens$colors$text.static_icons__default,
-    static_icons__tertiary = _tokens$colors$text.static_icons__tertiary,
-    _tokens$colors$intera$b = _tokens$colors$e.interactive,
-    disabled__text = _tokens$colors$intera$b.disabled__text,
-    primary__resting = _tokens$colors$intera$b.primary__resting,
-    danger__resting = _tokens$colors$intera$b.danger__resting,
-    danger__hover = _tokens$colors$intera$b.danger__hover,
-    warning__resting = _tokens$colors$intera$b.warning__resting,
-    warning__hover = _tokens$colors$intera$b.warning__hover,
-    success__resting = _tokens$colors$intera$b.success__resting,
-    success__hover = _tokens$colors$intera$b.success__hover,
-    _tokens$spacings$comf$c = edsTokens.tokens.spacings.comfortable,
-    small$4 = _tokens$spacings$comf$c.small,
-    x_small$4 = _tokens$spacings$comf$c.x_small,
+var _tokens$colors$f = edsTokens.tokens.colors,
+    background$d = _tokens$colors$f.ui.background__light.rgba,
+    _tokens$colors$text$1 = _tokens$colors$f.text,
+    static_icons__default = _tokens$colors$text$1.static_icons__default,
+    static_icons__tertiary = _tokens$colors$text$1.static_icons__tertiary,
+    _tokens$colors$intera$c = _tokens$colors$f.interactive,
+    disabled__text = _tokens$colors$intera$c.disabled__text,
+    primary__resting$1 = _tokens$colors$intera$c.primary__resting,
+    danger__resting = _tokens$colors$intera$c.danger__resting,
+    danger__hover = _tokens$colors$intera$c.danger__hover,
+    warning__resting = _tokens$colors$intera$c.warning__resting,
+    warning__hover = _tokens$colors$intera$c.warning__hover,
+    success__resting = _tokens$colors$intera$c.success__resting,
+    success__hover = _tokens$colors$intera$c.success__hover,
+    _tokens$spacings$comf$d = edsTokens.tokens.spacings.comfortable,
+    small$5 = _tokens$spacings$comf$d.small,
+    x_small$4 = _tokens$spacings$comf$d.x_small,
     typography$d = edsTokens.tokens.typography,
     shape$1 = edsTokens.tokens.shape;
 var input$1 = {
   height: shape$1.straight.minHeight,
   width: '100%',
-  background: background$c,
+  background: background$d,
   spacings: {
-    left: small$4,
-    right: small$4,
+    left: small$5,
+    right: small$5,
     top: '6px',
     bottom: '6px'
   },
@@ -2067,8 +2067,8 @@ var input$1 = {
         color: static_icons__tertiary.rgba
       }),
       spacings: {
-        left: small$4,
-        right: small$4
+        left: small$5,
+        right: small$5
       },
       states: {
         disabled: {
@@ -2094,7 +2094,7 @@ var input$1 = {
       outline: {
         type: 'outline',
         width: '2px',
-        color: primary__resting.rgba,
+        color: primary__resting$1.rgba,
         style: 'solid',
         offset: '0px'
       }
@@ -2210,8 +2210,8 @@ var tokens$3 = /*#__PURE__*/Object.freeze({
   inputToken: inputToken
 });
 
-var _excluded$1a = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
-var Container$3 = styled__default["default"].div.withConfig({
+var _excluded$1f = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
+var Container$4 = styled__default["default"].div.withConfig({
   displayName: "Input__Container",
   componentId: "sc-1ykv024-0"
 })(function (_ref) {
@@ -2272,7 +2272,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
       rightAdornmentsProps = _ref6.rightAdornmentsProps,
       leftAdornmentsWidth = _ref6.leftAdornmentsWidth,
       rightAdornmentsWidth = _ref6.rightAdornmentsWidth,
-      other = _objectWithoutProperties__default["default"](_ref6, _excluded$1a);
+      other = _objectWithoutProperties__default["default"](_ref6, _excluded$1f);
 
   var inputVariant = inputToken[variant] ? inputToken[variant] : inputToken.input;
 
@@ -2338,7 +2338,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
   return (
     /*#__PURE__*/
     // Not using <ThemeProvider> because of cascading styling messing with adornments
-    jsxRuntime.jsxs(Container$3, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
+    jsxRuntime.jsxs(Container$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
       children: [leftAdornments ? /*#__PURE__*/jsxRuntime.jsx(LeftAdornments, _objectSpread__default["default"](_objectSpread__default["default"]({}, _leftAdornmentProps), {}, {
         children: leftAdornments
       })) : null, /*#__PURE__*/jsxRuntime.jsx(StyledInput, _objectSpread__default["default"]({
@@ -2351,7 +2351,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
   );
 });
 
-var _excluded$19 = ["variant", "disabled", "type", "rowsMax"];
+var _excluded$1e = ["variant", "disabled", "type", "rowsMax"];
 var input = input$1;
 var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
   var variant = _ref.variant,
@@ -2360,7 +2360,7 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
       rowsMax = _ref.rowsMax,
-      other = _objectWithoutProperties__default["default"](_ref, _excluded$19);
+      other = _objectWithoutProperties__default["default"](_ref, _excluded$1e);
 
   var inputVariant = tokens$3[variant] ? tokens$3[variant] : input$1;
 
@@ -2413,7 +2413,7 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
   }, inputProps));
 });
 
-var _excluded$18 = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
+var _excluded$1d = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
 
 /** Proxy component for working around typescript and element type switching */
 var Field = /*#__PURE__*/react.forwardRef(function Field(props, ref) {
@@ -2441,7 +2441,7 @@ var TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
       rowsMax = _ref.rowsMax,
       textareaRef = _ref.textareaRef,
       inputRef = _ref.inputRef,
-      other = _objectWithoutProperties__default["default"](_ref, _excluded$18);
+      other = _objectWithoutProperties__default["default"](_ref, _excluded$1d);
 
   var helperTextId = edsUtils.useId(null, 'helpertext');
 
@@ -2486,9 +2486,9 @@ var TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
     fieldProps = _objectSpread__default["default"]({
       'aria-describedby': helperTextId
     }, fieldProps);
-    helperProps = _objectSpread__default["default"]({
+    helperProps = _objectSpread__default["default"](_objectSpread__default["default"]({}, helperProps), {}, {
       id: helperTextId
-    }, helperProps);
+    });
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, _objectSpread__default["default"](_objectSpread__default["default"]({
@@ -2515,7 +2515,7 @@ var get = function get(name) {
   };
 };
 
-var _excluded$17 = ["size", "color", "name", "rotation", "title", "data"];
+var _excluded$1c = ["size", "color", "name", "rotation", "title", "data"];
 
 var transform = function transform(_ref) {
   var rotation = _ref.rotation;
@@ -2585,7 +2585,7 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
       rotation = _ref5.rotation,
       title = _ref5.title,
       data = _ref5.data,
-      rest = _objectWithoutProperties__default["default"](_ref5, _excluded$17);
+      rest = _objectWithoutProperties__default["default"](_ref5, _excluded$1c);
 
   // eslint-disable-next-line prefer-const
   var _findIcon = findIcon(name, data, size),
@@ -2644,7 +2644,7 @@ var list = {
   typography: paragraph$1.body_short
 };
 
-var _excluded$16 = ["children", "variant"];
+var _excluded$1b = ["children", "variant"];
 var typography$c = list.typography;
 var StyledList$2 = styled__default["default"].ul.withConfig({
   displayName: "List__StyledList",
@@ -2657,7 +2657,7 @@ var List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   var children = _ref2.children,
       _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? 'bullet' : _ref2$variant,
-      props = _objectWithoutProperties__default["default"](_ref2, _excluded$16);
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded$1b);
 
   var as = variant === 'numbered' ? 'ol' : 'ul';
   return /*#__PURE__*/jsxRuntime.jsx(StyledList$2, _objectSpread__default["default"](_objectSpread__default["default"]({
@@ -2668,10 +2668,10 @@ var List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   }));
 }); // List.displayName = 'List'
 
-var _excluded$15 = ["children"];
+var _excluded$1a = ["children"];
 var ListItem$2 = /*#__PURE__*/react.forwardRef(function ListItem(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$15);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1a);
 
   return /*#__PURE__*/jsxRuntime.jsx("li", _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
@@ -2684,17 +2684,17 @@ List$1.Item = ListItem$2;
 List$1.Item.displayName = 'List.Item';
 
 var typography$b = edsTokens.tokens.typography.ui.accordion_header,
-    _tokens$colors$d = edsTokens.tokens.colors,
-    _tokens$colors$ui$4 = _tokens$colors$d.ui,
-    backgroundDefault = _tokens$colors$ui$4.background__default.rgba,
-    borderColor$1 = _tokens$colors$ui$4.background__medium.rgba,
-    backgroundHover = _tokens$colors$ui$4.background__light.rgba,
-    _tokens$colors$intera$a = _tokens$colors$d.interactive,
-    activatedColor = _tokens$colors$intera$a.primary__resting.rgba,
-    disabledIconColor$1 = _tokens$colors$intera$a.disabled__fill.rgba,
-    disabledColor$2 = _tokens$colors$intera$a.disabled__text.rgba,
-    focusOutlineColor$7 = _tokens$colors$intera$a.focus.rgba,
-    defaultIconColor = _tokens$colors$d.text.static_icons__default.rgba,
+    _tokens$colors$e = edsTokens.tokens.colors,
+    _tokens$colors$ui$5 = _tokens$colors$e.ui,
+    backgroundDefault = _tokens$colors$ui$5.background__default.rgba,
+    borderColor$1 = _tokens$colors$ui$5.background__medium.rgba,
+    backgroundHover = _tokens$colors$ui$5.background__light.rgba,
+    _tokens$colors$intera$b = _tokens$colors$e.interactive,
+    activatedColor = _tokens$colors$intera$b.primary__resting.rgba,
+    disabledIconColor$1 = _tokens$colors$intera$b.disabled__fill.rgba,
+    disabledColor$2 = _tokens$colors$intera$b.disabled__text.rgba,
+    focusOutlineColor$7 = _tokens$colors$intera$b.focus.rgba,
+    defaultIconColor = _tokens$colors$e.text.static_icons__default.rgba,
     mediumSpacing = edsTokens.tokens.spacings.comfortable.medium,
     focusOutlineWidth$7 = edsTokens.tokens.interactions.focused.width,
     text = edsTokens.tokens.typography.input.text;
@@ -2767,7 +2767,7 @@ var accordion = {
   }
 };
 
-var _excluded$14 = ["headerLevel", "chevronPosition", "children", "id"];
+var _excluded$19 = ["headerLevel", "chevronPosition", "children", "id"];
 var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
   var _ref$headerLevel = _ref.headerLevel,
       headerLevel = _ref$headerLevel === void 0 ? 'h2' : _ref$headerLevel,
@@ -2775,7 +2775,7 @@ var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
       chevronPosition = _ref$chevronPosition === void 0 ? 'left' : _ref$chevronPosition,
       children = _ref.children,
       id = _ref.id,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$14);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$19);
 
   var accordionId = edsUtils.useId(id, 'accordion');
 
@@ -2803,7 +2803,7 @@ var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
   });
 }); // Accordion.displayName = 'Accordion'
 
-var _excluded$13 = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
+var _excluded$18 = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
 var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, ref) {
   var headerLevel = _ref.headerLevel,
       chevronPosition = _ref.chevronPosition,
@@ -2813,7 +2813,7 @@ var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, r
       isExpanded = _ref.isExpanded,
       children = _ref.children,
       disabled = _ref.disabled,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$13);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$18);
 
   var _useState = react.useState(isExpanded),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -2851,7 +2851,7 @@ var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, r
   }));
 }); // AccordionItem.displayName = 'AccordionItem'
 
-var _excluded$12 = ["isExpanded", "disabled", "children"];
+var _excluded$17 = ["isExpanded", "disabled", "children"];
 var StyledAccordionHeaderTitle = styled__default["default"].span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
@@ -2868,7 +2868,7 @@ var AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeade
   var isExpanded = _ref2.isExpanded,
       disabled = _ref2.disabled,
       children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$12);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$17);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderTitle, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
@@ -2879,7 +2879,7 @@ var AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeade
   }));
 }); // AccordionHeaderTitle.displayName = 'AccordionHeaderTitle'
 
-var _excluded$11 = ["isExpanded", "disabled", "children"];
+var _excluded$16 = ["isExpanded", "disabled", "children"];
 var StyledAccordionHeaderActions = styled__default["default"].span.withConfig({
   displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
   componentId: "sc-klu9el-0"
@@ -2902,7 +2902,7 @@ var AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHea
   var isExpanded = _ref2.isExpanded,
       disabled = _ref2.disabled,
       children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$11);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$16);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
@@ -2913,7 +2913,7 @@ var AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHea
   }));
 });
 
-var _excluded$10 = ["parentIndex", "headerLevel", "chevronPosition", "panelId", "id", "isExpanded", "children", "toggleExpanded", "disabled", "className", "style"];
+var _excluded$15 = ["parentIndex", "headerLevel", "chevronPosition", "panelId", "id", "isExpanded", "children", "toggleExpanded", "disabled", "className", "style"];
 var chevronToken = accordion.entities.chevron;
 var StyledAccordionHeader = styled__default["default"].div.withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
@@ -2989,7 +2989,7 @@ var AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_re
       disabled = _ref5.disabled,
       className = _ref5.className,
       style = _ref5.style,
-      props = _objectWithoutProperties__default["default"](_ref5, _excluded$10);
+      props = _objectWithoutProperties__default["default"](_ref5, _excluded$15);
 
   var handleClick = function handleClick(e) {
     e.preventDefault();
@@ -3077,7 +3077,7 @@ var AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_re
   });
 });
 
-var _excluded$$ = ["id", "headerId", "hidden", "children"];
+var _excluded$14 = ["id", "headerId", "hidden", "children"];
 var StyledAccordionPanel = styled__default["default"].div.attrs(function (_ref) {
   var headerId = _ref.headerId;
   return {
@@ -3100,7 +3100,7 @@ var AccordionPanel = /*#__PURE__*/react.forwardRef(function AccordionPanel(_ref3
       headerId = _ref3.headerId,
       hidden = _ref3.hidden,
       children = _ref3.children,
-      props = _objectWithoutProperties__default["default"](_ref3, _excluded$$);
+      props = _objectWithoutProperties__default["default"](_ref3, _excluded$14);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionPanel, _objectSpread__default["default"](_objectSpread__default["default"]({
     headerId: headerId,
@@ -3137,14 +3137,14 @@ var TabsContext = /*#__PURE__*/react.createContext({
 var TabsProvider = TabsContext.Provider;
 TabsContext.Consumer;
 
-var _tokens$colors$c = edsTokens.tokens.colors,
-    defaultColor = _tokens$colors$c.text.static_icons__tertiary.rgba,
-    defaultBorderColor = _tokens$colors$c.ui.background__medium.rgba,
-    _tokens$colors$intera$9 = _tokens$colors$c.interactive,
-    focusOutlineColor$6 = _tokens$colors$intera$9.focus.rgba,
-    hoverBackgroundColor = _tokens$colors$intera$9.primary__hover_alt.rgba,
-    activeColor$2 = _tokens$colors$intera$9.primary__resting.rgba,
-    activeHoverColor = _tokens$colors$intera$9.primary__hover.rgba,
+var _tokens$colors$d = edsTokens.tokens.colors,
+    defaultColor = _tokens$colors$d.text.static_icons__tertiary.rgba,
+    defaultBorderColor = _tokens$colors$d.ui.background__medium.rgba,
+    _tokens$colors$intera$a = _tokens$colors$d.interactive,
+    focusOutlineColor$6 = _tokens$colors$intera$a.focus.rgba,
+    hoverBackgroundColor = _tokens$colors$intera$a.primary__hover_alt.rgba,
+    activeColor$2 = _tokens$colors$intera$a.primary__resting.rgba,
+    activeHoverColor = _tokens$colors$intera$a.primary__hover.rgba,
     clickboundsHeight = edsTokens.tokens.clickbounds.default__base,
     spacingMedium$8 = edsTokens.tokens.spacings.comfortable.medium,
     focusOutlineWidth$6 = edsTokens.tokens.interactions.focused.width,
@@ -3244,7 +3244,7 @@ var token$1 = {
   }
 };
 
-var _excluded$_ = ["activeTab", "onChange", "onBlur", "onFocus", "variant", "scrollable", "id"];
+var _excluded$13 = ["activeTab", "onChange", "onBlur", "onFocus", "variant", "scrollable", "id"];
 var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
   var _ref$activeTab = _ref.activeTab,
       activeTab = _ref$activeTab === void 0 ? 0 : _ref$activeTab,
@@ -3259,7 +3259,7 @@ var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
       _ref$scrollable = _ref.scrollable,
       scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
       id = _ref.id,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$_);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$13);
 
   var tabsId = edsUtils.useId(id, 'tabs');
   var tabsRef = react.useRef(null);
@@ -3355,7 +3355,7 @@ var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
   });
 });
 
-var _excluded$Z = ["children"];
+var _excluded$12 = ["children"];
 var variants$1 = {
   fullWidth: 'minmax(1%, 360px)',
   minWidth: 'max-content'
@@ -3377,7 +3377,7 @@ var StyledTabList = styled__default["default"].div.attrs(function () {
 var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   var _ref3$children = _ref3.children,
       children = _ref3$children === void 0 ? [] : _ref3$children,
-      props = _objectWithoutProperties__default["default"](_ref3, _excluded$Z);
+      props = _objectWithoutProperties__default["default"](_ref3, _excluded$12);
 
   var _useContext = react.useContext(TabsContext),
       activeTab = _useContext.activeTab,
@@ -3459,7 +3459,7 @@ var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   }));
 });
 
-var _excluded$Y = ["active"];
+var _excluded$11 = ["active"];
 var StyledTab = styled__default["default"].button.attrs(function (_ref) {
   var _ref$$active = _ref.$active,
       $active = _ref$$active === void 0 ? false : _ref$$active,
@@ -3484,7 +3484,7 @@ var StyledTab = styled__default["default"].button.attrs(function (_ref) {
 });
 var Tab = /*#__PURE__*/react.forwardRef(function Tab(_ref3, ref) {
   var active = _ref3.active,
-      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$Y);
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$11);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledTab, _objectSpread__default["default"]({
     ref: ref,
@@ -3492,10 +3492,10 @@ var Tab = /*#__PURE__*/react.forwardRef(function Tab(_ref3, ref) {
   }, rest));
 });
 
-var _excluded$X = ["children"];
+var _excluded$10 = ["children"];
 var TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$X);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$10);
 
   var _useContext = react.useContext(TabsContext),
       activeTab = _useContext.activeTab,
@@ -3549,12 +3549,12 @@ Tabs.Panel.displayName = 'Tabs.Panel';
 Tabs.List.displayName = 'Tabs.List';
 
 var elevation = edsTokens.tokens.elevation,
-    background$b = edsTokens.tokens.colors.ui.background__default.rgba;
+    background$c = edsTokens.tokens.colors.ui.background__default.rgba;
 var paper = {
-  background: background$b
+  background: background$c
 };
 
-var _excluded$W = ["elevation"];
+var _excluded$$ = ["elevation"];
 var StyledPaper = styled__default["default"].div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
@@ -3564,7 +3564,7 @@ var StyledPaper = styled__default["default"].div.withConfig({
 });
 var Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
   var elevation$1 = _ref2.elevation,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$W);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$$);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     elevation: elevation[elevation$1] || 'none'
@@ -3575,15 +3575,15 @@ var Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
   }));
 });
 
-var _tokens$colors$ui$3 = edsTokens.tokens.colors.ui,
-    background$a = _tokens$colors$ui$3.background__default.rgba,
-    backgroundInfo = _tokens$colors$ui$3.background__info.rgba,
-    backgroundWarning = _tokens$colors$ui$3.background__warning.rgba,
-    backgroundDanger = _tokens$colors$ui$3.background__danger.rgba,
+var _tokens$colors$ui$4 = edsTokens.tokens.colors.ui,
+    background$b = _tokens$colors$ui$4.background__default.rgba,
+    backgroundInfo = _tokens$colors$ui$4.background__info.rgba,
+    backgroundWarning = _tokens$colors$ui$4.background__warning.rgba,
+    backgroundDanger = _tokens$colors$ui$4.background__danger.rgba,
     spacingMedium$7 = edsTokens.tokens.spacings.comfortable.medium,
     borderRadius$8 = edsTokens.tokens.shape.corners.borderRadius;
 var primary$4 = {
-  background: background$a,
+  background: background$b,
   border: {
     type: 'border',
     radius: borderRadius$8
@@ -3613,7 +3613,7 @@ var tokens$2 = /*#__PURE__*/Object.freeze({
   warning: warning$2
 });
 
-var _excluded$V = ["children", "variant", "elevation"];
+var _excluded$_ = ["children", "variant", "elevation"];
 var primary$3 = primary$4;
 var StyledCard = styled__default["default"](Paper).withConfig({
   displayName: "Card__StyledCard",
@@ -3628,7 +3628,7 @@ var Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
       variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
       _ref2$elevation = _ref2.elevation,
       elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$V);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$_);
 
   var cardVariant = variant === 'default' ? 'primary' : variant;
   var token = tokens$2[cardVariant];
@@ -3645,7 +3645,7 @@ var Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
   }));
 });
 
-var _excluded$U = ["children", "alignRight", "meta"];
+var _excluded$Z = ["children", "alignRight", "meta"];
 var spacings$6 = primary$4.spacings;
 var StyledCardActions = styled__default["default"].div.withConfig({
   displayName: "CardActions__StyledCardActions",
@@ -3660,7 +3660,7 @@ var CardActions = /*#__PURE__*/react.forwardRef(function CardActions(_ref2, ref)
       alignRight = _ref2$alignRight === void 0 ? false : _ref2$alignRight,
       _ref2$meta = _ref2.meta,
       meta = _ref2$meta === void 0 ? '' : _ref2$meta,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$U);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$Z);
 
   var justifyContent = alignRight ? 'flex-end' : 'flex-start';
 
@@ -3677,7 +3677,7 @@ var CardActions = /*#__PURE__*/react.forwardRef(function CardActions(_ref2, ref)
   }));
 });
 
-var _excluded$T = ["children"];
+var _excluded$Y = ["children"];
 var spacings$5 = primary$4.spacings;
 var StyledCardContent = styled__default["default"].div.withConfig({
   displayName: "CardContent__StyledCardContent",
@@ -3685,7 +3685,7 @@ var StyledCardContent = styled__default["default"].div.withConfig({
 })(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings$5.right, spacings$5.left, spacings$5.bottom);
 var CardContent = /*#__PURE__*/react.forwardRef(function CardContent(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$T);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$Y);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledCardContent, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
@@ -3694,7 +3694,7 @@ var CardContent = /*#__PURE__*/react.forwardRef(function CardContent(_ref, ref)
   }));
 });
 
-var _excluded$S = ["children", "fullWidth"];
+var _excluded$X = ["children", "fullWidth"];
 var spacings$4 = primary$4.spacings,
     border$3 = primary$4.border;
 var StyledCardMedia = styled__default["default"].div.withConfig({
@@ -3708,7 +3708,7 @@ var CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia(_ref2, ref) {
   var children = _ref2.children,
       _ref2$fullWidth = _ref2.fullWidth,
       fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$S);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$X);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref,
@@ -3720,7 +3720,7 @@ var CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia(_ref2, ref) {
   }));
 });
 
-var _excluded$R = ["children"];
+var _excluded$W = ["children"];
 var spacings$3 = primary$4.spacings;
 var StyledCardHeader = styled__default["default"].div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
@@ -3728,7 +3728,7 @@ var StyledCardHeader = styled__default["default"].div.withConfig({
 })(["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);
 var CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader(_ref, ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$R);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$W);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -3739,14 +3739,14 @@ var CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader(_ref, ref) {
   }));
 });
 
-var _excluded$Q = ["children"];
+var _excluded$V = ["children"];
 var StyledCardHeaderTitle = styled__default["default"].div.withConfig({
   displayName: "CardHeaderTitle__StyledCardHeaderTitle",
   componentId: "sc-11m80r3-0"
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
 var CardHeaderTitle = /*#__PURE__*/react.forwardRef(function CardHeaderTitle(_ref, ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$Q);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$V);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -3795,7 +3795,7 @@ var topbar = {
   }
 };
 
-var _excluded$P = ["children", "elevation", "sticky"];
+var _excluded$U = ["children", "elevation", "sticky"];
 var StyledTopBar = styled__default["default"](Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
@@ -3810,7 +3810,7 @@ var TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
       elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
       _ref2$sticky = _ref2.sticky,
       sticky = _ref2$sticky === void 0 ? true : _ref2$sticky,
-      props = _objectWithoutProperties__default["default"](_ref2, _excluded$P);
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded$U);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -3835,14 +3835,14 @@ var TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   });
 }); // TopBar.displayName = 'eds-topbar'
 
-var _excluded$O = ["children"];
+var _excluded$T = ["children"];
 var StyledActions = styled__default["default"].div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
 })(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
 var Actions = /*#__PURE__*/react.forwardRef(function Actions(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$O);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$T);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
@@ -3851,14 +3851,14 @@ var Actions = /*#__PURE__*/react.forwardRef(function Actions(_ref, ref) {
   }));
 }); // Actions.displayName = 'eds-topbar-actions'
 
-var _excluded$N = ["children"];
+var _excluded$S = ["children"];
 var 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;"]);
+})(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:12px;align-items:center;"]);
 var Header$2 = /*#__PURE__*/react.forwardRef(function Header(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$N);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$S);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledHeader, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
@@ -3867,14 +3867,14 @@ var Header$2 = /*#__PURE__*/react.forwardRef(function Header(_ref, ref) {
   }));
 }); // Header.displayName = 'eds-topbar-header'
 
-var _excluded$M = ["children"];
+var _excluded$R = ["children"];
 var StyledCustomContent = styled__default["default"].div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
 var CustomContent = /*#__PURE__*/react.forwardRef(function CustomContent(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$M);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$R);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledCustomContent, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
@@ -3891,17 +3891,17 @@ TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
 TopBar.CustomContent.displayName = 'Topbar.CustomContent';
 
-var background$9 = edsTokens.tokens.colors.ui.background__scrim.rgba;
+var background$a = edsTokens.tokens.colors.ui.background__scrim.rgba;
 var scrim = {
-  background: background$9
+  background: background$a
 };
 
-var _excluded$L = ["children", "onClose", "open", "isDismissable"];
-var background$8 = scrim.background;
+var _excluded$Q = ["children", "onClose", "open", "isDismissable"];
+var background$9 = scrim.background;
 var StyledScrim = styled__default["default"](reactDomInteractions.FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$8);
+})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$9);
 var ScrimContent = styled__default["default"].div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
@@ -3912,7 +3912,7 @@ var Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
       open = _ref.open,
       _ref$isDismissable = _ref.isDismissable,
       isDismissable = _ref$isDismissable === void 0 ? false : _ref$isDismissable,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$L);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$Q);
 
   var scrimRef = react.useRef(null);
   var combinedScrimRef = react.useMemo(function () {
@@ -3951,11 +3951,11 @@ var spacingMedium$6 = edsTokens.tokens.spacings.comfortable.medium,
     _tokens$typography = edsTokens.tokens.typography,
     accordion_header = _tokens$typography.ui.accordion_header,
     body_long = _tokens$typography.paragraph.body_long,
-    background$7 = edsTokens.tokens.colors.ui.background__default.rgba,
+    background$8 = edsTokens.tokens.colors.ui.background__default.rgba,
     borderRadius$7 = edsTokens.tokens.shape.corners.borderRadius;
 var dialog = {
   width: '252px',
-  background: background$7,
+  background: background$8,
   typography: accordion_header,
   border: {
     type: 'border',
@@ -3991,7 +3991,7 @@ var dialog = {
   }
 };
 
-var _excluded$K = ["children", "open", "onClose", "isDismissable"];
+var _excluded$P = ["children", "open", "onClose", "isDismissable"];
 var StyledDialog = styled__default["default"](Paper).attrs({
   tabIndex: 0,
   role: 'dialog',
@@ -4011,7 +4011,7 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
       onClose = _ref2.onClose,
       _ref2$isDismissable = _ref2.isDismissable,
       isDismissable = _ref2$isDismissable === void 0 ? false : _ref2$isDismissable,
-      props = _objectWithoutProperties__default["default"](_ref2, _excluded$K);
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded$P);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -4060,7 +4060,7 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
   });
 }); // Dialog.displayName = 'EdsDialog'
 
-var _excluded$J = ["children"];
+var _excluded$O = ["children"];
 var StyledDialogActions = styled__default["default"].div.withConfig({
   displayName: "DialogActions__StyledDialogActions",
   componentId: "sc-16ydtxd-0"
@@ -4071,7 +4071,7 @@ var StyledDialogActions = styled__default["default"].div.withConfig({
 });
 var DialogActions = /*#__PURE__*/react.forwardRef(function DialogActions(_ref2, ref) {
   var children = _ref2.children,
-      props = _objectWithoutProperties__default["default"](_ref2, _excluded$J);
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded$O);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledDialogActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
@@ -4080,7 +4080,7 @@ var DialogActions = /*#__PURE__*/react.forwardRef(function DialogActions(_ref2,
   }));
 }); // Actions.displayName = 'EdsDialogActions'
 
-var _excluded$I = ["children"];
+var _excluded$N = ["children"];
 var StyledDialogTitle = styled__default["default"].div.withConfig({
   displayName: "DialogTitle__StyledDialogTitle",
   componentId: "sc-1t3jljt-0"
@@ -4091,7 +4091,7 @@ var StyledDialogTitle = styled__default["default"].div.withConfig({
 });
 var DialogTitle = /*#__PURE__*/react.forwardRef(function DialogTitle(_ref2, ref) {
   var children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$I);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$N);
 
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledDialogTitle, _objectSpread__default["default"](_objectSpread__default["default"]({
@@ -4103,7 +4103,7 @@ var DialogTitle = /*#__PURE__*/react.forwardRef(function DialogTitle(_ref2, ref)
   });
 });
 
-var _excluded$H = ["children", "scrollable"];
+var _excluded$M = ["children", "scrollable"];
 var StyledDialogContent = styled__default["default"].div.withConfig({
   displayName: "DialogContent__StyledDialogContent",
   componentId: "sc-1tze18k-0"
@@ -4120,7 +4120,7 @@ var DialogContent = /*#__PURE__*/react.forwardRef(function DialogContent(_ref2,
   var children = _ref2.children,
       _ref2$scrollable = _ref2.scrollable,
       scrollable = _ref2$scrollable === void 0 ? false : _ref2$scrollable,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$H);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$M);
 
   var props = _objectSpread__default["default"]({
     scrollable: scrollable,
@@ -4139,7 +4139,7 @@ var DialogContent = /*#__PURE__*/react.forwardRef(function DialogContent(_ref2,
   });
 });
 
-var _excluded$G = ["children"];
+var _excluded$L = ["children"];
 var StyledDialogHeader = styled__default["default"].div.withConfig({
   displayName: "DialogHeader__StyledDialogHeader",
   componentId: "sc-mbwcos-0"
@@ -4153,7 +4153,7 @@ var StyledDivider$1 = styled__default["default"](Divider).withConfig({
 })(["margin-bottom:0;"]);
 var DialogHeader = /*#__PURE__*/react.forwardRef(function DialogHeader(_ref2, ref) {
   var children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$G);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$L);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -4180,18 +4180,18 @@ Dialog.Title.displayName = 'Dialog.Title';
 Dialog.Content.displayName = 'Dialog.Content';
 Dialog.Header.displayName = 'Dialog.Header';
 
-var _tokens$colors$b = edsTokens.tokens.colors,
-    _tokens$colors$intera$8 = _tokens$colors$b.interactive,
-    primaryColor$3 = _tokens$colors$intera$8.primary__resting.rgba,
-    primaryHoverAlt$5 = _tokens$colors$intera$8.primary__hover_alt.rgba,
-    primaryHover$3 = _tokens$colors$intera$8.primary__hover.rgba,
-    focusColor$1 = _tokens$colors$intera$8.focus.rgba,
-    labelColor = _tokens$colors$b.text.static_icons__tertiary.rgba,
+var _tokens$colors$c = edsTokens.tokens.colors,
+    _tokens$colors$intera$9 = _tokens$colors$c.interactive,
+    primaryColor$3 = _tokens$colors$intera$9.primary__resting.rgba,
+    primaryHoverAlt$5 = _tokens$colors$intera$9.primary__hover_alt.rgba,
+    primaryHover$3 = _tokens$colors$intera$9.primary__hover.rgba,
+    focusColor$2 = _tokens$colors$intera$9.focus.rgba,
+    labelColor = _tokens$colors$c.text.static_icons__tertiary.rgba,
     borderRadius$6 = edsTokens.tokens.shape.corners.borderRadius,
-    _tokens$spacings$comf$b = edsTokens.tokens.spacings.comfortable,
-    small$3 = _tokens$spacings$comf$b.small,
-    x_large = _tokens$spacings$comf$b.x_large,
-    xxx_large = _tokens$spacings$comf$b.xxx_large,
+    _tokens$spacings$comf$c = edsTokens.tokens.spacings.comfortable,
+    small$4 = _tokens$spacings$comf$c.small,
+    x_large = _tokens$spacings$comf$c.x_large,
+    xxx_large = _tokens$spacings$comf$c.xxx_large,
     typography$a = edsTokens.tokens.typography;
 var tableOfContents = {
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$a.navigation.button), {}, {
@@ -4205,7 +4205,7 @@ var tableOfContents = {
     icon: {
       background: primaryColor$3,
       spacings: {
-        right: small$3
+        right: small$4
       }
     },
     links: {
@@ -4234,7 +4234,7 @@ var tableOfContents = {
     focus: {
       outline: {
         type: 'outline',
-        color: focusColor$1,
+        color: focusColor$2,
         width: '1px',
         style: 'dashed',
         offset: '2px'
@@ -4260,7 +4260,7 @@ var tableOfContents = {
   }
 };
 
-var _excluded$F = ["children", "sticky", "label"];
+var _excluded$K = ["children", "sticky", "label"];
 var StyledTableOfContents = styled__default["default"].nav.withConfig({
   displayName: "TableOfContents__StyledTableOfContents",
   componentId: "sc-q23s6y-0"
@@ -4286,7 +4286,7 @@ var TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents(_
       sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
       _ref3$label = _ref3.label,
       label = _ref3$label === void 0 ? '' : _ref3$label,
-      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$F);
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$K);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -4311,7 +4311,7 @@ var TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents(_
   });
 });
 
-var _excluded$E = ["children"];
+var _excluded$J = ["children"];
 var StyledLinkItem = styled__default["default"].li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
@@ -4321,7 +4321,7 @@ var StyledLinkItem = styled__default["default"].li.withConfig({
 });
 var LinkItem = /*#__PURE__*/react.forwardRef(function LinkItem(_ref2, ref) {
   var children = _ref2.children,
-      props = _objectWithoutProperties__default["default"](_ref2, _excluded$E);
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded$J);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledLinkItem, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
@@ -4333,15 +4333,15 @@ var TableOfContents = TableOfContents$1;
 TableOfContents.LinkItem = LinkItem;
 TableOfContents.LinkItem.displayName = 'TableOfContents.LinkItem';
 
-var _tokens$colors$ui$2 = edsTokens.tokens.colors.ui,
-    background$6 = _tokens$colors$ui$2.background__default.rgba,
-    borderColor = _tokens$colors$ui$2.background__light.rgba,
-    _tokens$spacings$comf$a = edsTokens.tokens.spacings.comfortable,
-    spacingXXS = _tokens$spacings$comf$a.xx_small,
-    spacingMedium$5 = _tokens$spacings$comf$a.medium,
+var _tokens$colors$ui$3 = edsTokens.tokens.colors.ui,
+    background$7 = _tokens$colors$ui$3.background__default.rgba,
+    borderColor = _tokens$colors$ui$3.background__light.rgba,
+    _tokens$spacings$comf$b = edsTokens.tokens.spacings.comfortable,
+    spacingXXS = _tokens$spacings$comf$b.xx_small,
+    spacingMedium$5 = _tokens$spacings$comf$b.medium,
     body_short = edsTokens.tokens.typography.paragraph.body_short;
 var comfortable$2 = {
-  background: background$6,
+  background: background$7,
   spacings: {
     left: '14px',
     // padding left is 14px, because of border-left 'steals' 2px of the padding
@@ -4365,15 +4365,15 @@ var variants = {
   xlarge: '640px'
 };
 
-var _excluded$D = ["variant", "width", "title", "children", "open", "onClose"];
-var background$5 = comfortable$2.background,
+var _excluded$I = ["variant", "width", "title", "children", "open", "onClose"];
+var background$6 = comfortable$2.background,
     spacings$2 = comfortable$2.spacings,
     border$2 = comfortable$2.border,
     typography$9 = comfortable$2.typography;
 var StyledSideSheet = styled__default["default"].div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$5, function (_ref) {
+})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$6, function (_ref) {
   var width = _ref.width;
   return width;
 }, edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$2), edsUtils.typographyTemplate(typography$9));
@@ -4391,7 +4391,7 @@ var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
       _ref2$open = _ref2.open,
       open = _ref2$open === void 0 ? true : _ref2$open,
       onClose = _ref2.onClose,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$D);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$I);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref,
@@ -4418,25 +4418,25 @@ var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
   }));
 });
 
-var _tokens$spacings$comf$9 = edsTokens.tokens.spacings.comfortable,
-    x_small$3 = _tokens$spacings$comf$9.x_small,
-    small$2 = _tokens$spacings$comf$9.small,
-    medium$2 = _tokens$spacings$comf$9.medium,
+var _tokens$spacings$comf$a = edsTokens.tokens.spacings.comfortable,
+    x_small$3 = _tokens$spacings$comf$a.x_small,
+    small$3 = _tokens$spacings$comf$a.small,
+    medium$3 = _tokens$spacings$comf$a.medium,
     chipTypography = edsTokens.tokens.typography.ui.chip__badge,
-    _tokens$colors$a = edsTokens.tokens.colors,
-    _tokens$colors$ui$1 = _tokens$colors$a.ui,
-    backgroundColorDefault$1 = _tokens$colors$ui$1.background__default.rgba,
-    backgroundColor$2 = _tokens$colors$ui$1.background__light.rgba,
-    _tokens$colors$intera$7 = _tokens$colors$a.interactive,
-    primaryColor$2 = _tokens$colors$intera$7.primary__resting.rgba,
-    primaryHoverAlt$4 = _tokens$colors$intera$7.primary__hover_alt.rgba,
-    primaryHover$2 = _tokens$colors$intera$7.primary__hover.rgba,
-    disabledColor$1 = _tokens$colors$intera$7.disabled__text.rgba,
-    focusOutlineColor$5 = _tokens$colors$intera$7.focus.rgba,
-    activeColor$1 = _tokens$colors$intera$7.primary__selected_highlight.rgba,
-    errorColor = _tokens$colors$intera$7.danger__resting.rgba,
-    errorColorHover = _tokens$colors$intera$7.danger__hover.rgba,
-    errorBackgroundHover = _tokens$colors$intera$7.danger__highlight.rgba,
+    _tokens$colors$b = edsTokens.tokens.colors,
+    _tokens$colors$ui$2 = _tokens$colors$b.ui,
+    backgroundColorDefault$1 = _tokens$colors$ui$2.background__default.rgba,
+    backgroundColor$2 = _tokens$colors$ui$2.background__light.rgba,
+    _tokens$colors$intera$8 = _tokens$colors$b.interactive,
+    primaryColor$2 = _tokens$colors$intera$8.primary__resting.rgba,
+    primaryHoverAlt$4 = _tokens$colors$intera$8.primary__hover_alt.rgba,
+    primaryHover$2 = _tokens$colors$intera$8.primary__hover.rgba,
+    disabledColor$1 = _tokens$colors$intera$8.disabled__text.rgba,
+    focusOutlineColor$5 = _tokens$colors$intera$8.focus.rgba,
+    activeColor$1 = _tokens$colors$intera$8.primary__selected_highlight.rgba,
+    errorColor = _tokens$colors$intera$8.danger__resting.rgba,
+    errorColorHover = _tokens$colors$intera$8.danger__hover.rgba,
+    errorBackgroundHover = _tokens$colors$intera$8.danger__highlight.rgba,
     borderRadius$5 = edsTokens.tokens.shape.rounded.borderRadius,
     focusOutlineWidth$5 = edsTokens.tokens.interactions.focused.width;
 var enabled$3 = {
@@ -4451,7 +4451,7 @@ var enabled$3 = {
   },
   spacings: {
     left: x_small$3,
-    right: small$2
+    right: small$3
   },
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, chipTypography), {}, {
     color: primaryColor$2
@@ -4482,8 +4482,8 @@ var enabled$3 = {
   },
   entities: {
     icon: {
-      height: medium$2,
-      width: medium$2,
+      height: medium$3,
+      width: medium$3,
       border: {
         radius: borderRadius$5,
         type: 'border',
@@ -4549,10 +4549,10 @@ var Icon = styled__default["default"](Icon$1).withConfig({
   return disabled && styled.css(["cursor:not-allowed;&:hover{background:transparent;}"]);
 });
 
-var _excluded$C = ["children", "onDelete", "disabled", "onClick", "variant"];
+var _excluded$H = ["children", "onDelete", "disabled", "onClick", "variant"];
 var enabled$1 = enabled$3,
     error = error$2;
-var background$4 = enabled$1.background,
+var background$5 = enabled$1.background,
     height = enabled$1.height,
     typography$8 = enabled$1.typography,
     spacings$1 = enabled$1.spacings,
@@ -4568,7 +4568,7 @@ var StyledChips = styled__default["default"].div.attrs(function (_ref) {
 }).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;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$8.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$1), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$8), function (_ref2) {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;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, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$1), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$8), function (_ref2) {
   var clickable = _ref2.clickable;
   return clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
 }, function (_ref3) {
@@ -4586,7 +4586,7 @@ var StyledChips = styled__default["default"].div.attrs(function (_ref) {
   }
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$4, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color);
+  return 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);
 }, function (_ref5) {
   var deletable = _ref5.deletable;
   return deletable && styled.css(["padding-right:4px;"]);
@@ -4602,7 +4602,7 @@ var Chip = /*#__PURE__*/react.forwardRef(function Chip(_ref7, ref) {
       onClick = _ref7.onClick,
       _ref7$variant = _ref7.variant,
       variant = _ref7$variant === void 0 ? 'default' : _ref7$variant,
-      other = _objectWithoutProperties__default["default"](_ref7, _excluded$C);
+      other = _objectWithoutProperties__default["default"](_ref7, _excluded$H);
 
   var handleDelete = disabled ? undefined : onDelete;
   var handleClick = disabled ? undefined : onClick;
@@ -4683,7 +4683,7 @@ var avatar = {
   }
 };
 
-var _excluded$B = ["src", "alt", "size", "disabled"];
+var _excluded$G = ["src", "alt", "size", "disabled"];
 var StyledAvatar = styled__default["default"].div.withConfig({
   displayName: "Avatar__StyledAvatar",
   componentId: "sc-r7n7on-0"
@@ -4706,7 +4706,7 @@ var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
       size = _ref3$size === void 0 ? 24 : _ref3$size,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$B);
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$G);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, _objectSpread__default["default"](_objectSpread__default["default"]({
     size: size,
@@ -4722,7 +4722,7 @@ var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$A = ["onChange", "style", "className"];
+var _excluded$F = ["onChange", "style", "className"];
 var SearchInput = styled__default["default"](Input$4).withConfig({
   displayName: "Search__SearchInput",
   componentId: "sc-v8l23u-0"
@@ -4735,7 +4735,7 @@ var Search = /*#__PURE__*/react.forwardRef(function Search(_ref, ref) {
   var _onChange = _ref.onChange,
       style = _ref.style,
       className = _ref.className,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$A);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$F);
 
   var inputRef = react.useRef(null);
 
@@ -4802,19 +4802,19 @@ var Search = /*#__PURE__*/react.forwardRef(function Search(_ref, ref) {
   });
 });
 
-var _tokens$colors$9 = edsTokens.tokens.colors,
-    _tokens$colors$ui = _tokens$colors$9.ui,
-    backgroundColor$1 = _tokens$colors$ui.background__light.rgba,
-    backgroundColorDefault = _tokens$colors$ui.background__default.rgba,
-    backgroundColorMedium$1 = _tokens$colors$ui.background__medium.rgba,
-    _tokens$colors$intera$6 = _tokens$colors$9.interactive,
-    indicatorColor = _tokens$colors$intera$6.primary__resting.rgba,
-    primaryHoverAlt$3 = _tokens$colors$intera$6.primary__hover_alt.rgba,
-    primaryHover$1 = _tokens$colors$intera$6.primary__hover.rgba,
-    focusOutlineColor$4 = _tokens$colors$intera$6.focus.rgba,
-    backgroundColorDisabled = _tokens$colors$intera$6.disabled__fill.rgba,
-    backgroundBorderDisabled = _tokens$colors$intera$6.disabled__border.rgba,
-    textColor$1 = _tokens$colors$9.text.static_icons__tertiary.rgba,
+var _tokens$colors$a = edsTokens.tokens.colors,
+    _tokens$colors$ui$1 = _tokens$colors$a.ui,
+    backgroundColor$1 = _tokens$colors$ui$1.background__light.rgba,
+    backgroundColorDefault = _tokens$colors$ui$1.background__default.rgba,
+    backgroundColorMedium$1 = _tokens$colors$ui$1.background__medium.rgba,
+    _tokens$colors$intera$7 = _tokens$colors$a.interactive,
+    indicatorColor = _tokens$colors$intera$7.primary__resting.rgba,
+    primaryHoverAlt$3 = _tokens$colors$intera$7.primary__hover_alt.rgba,
+    primaryHover$1 = _tokens$colors$intera$7.primary__hover.rgba,
+    focusOutlineColor$4 = _tokens$colors$intera$7.focus.rgba,
+    backgroundColorDisabled = _tokens$colors$intera$7.disabled__fill.rgba,
+    backgroundBorderDisabled = _tokens$colors$intera$7.disabled__border.rgba,
+    textColor$1 = _tokens$colors$a.text.static_icons__tertiary.rgba,
     paragraph = edsTokens.tokens.typography.paragraph,
     focusOutlineWidth$4 = edsTokens.tokens.interactions.focused.width;
 var slider = {
@@ -4944,7 +4944,7 @@ var Output = /*#__PURE__*/react.forwardRef(function Output(_ref2, ref) {
   });
 });
 
-var _excluded$z = ["value", "min", "max", "id", "step", "onChange", "onMouseUp", "onKeyUp", "disabled"];
+var _excluded$E = ["value", "min", "max", "id", "step", "onChange", "onMouseUp", "onKeyUp", "disabled"];
 var handle$1 = slider.entities.handle,
     _disabled = slider.states.disabled;
 var track$1 = styled.css(["width:100%;height:100%;cursor:pointer;background:none;"]);
@@ -4970,7 +4970,7 @@ var SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput(_ref, ref)
       _onMouseUp = _ref.onMouseUp,
       _onKeyUp = _ref.onKeyUp,
       disabled = _ref.disabled,
-      restProps = _objectWithoutProperties__default["default"](_ref, _excluded$z);
+      restProps = _objectWithoutProperties__default["default"](_ref, _excluded$E);
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledSliderInput, _objectSpread__default["default"](_objectSpread__default["default"]({}, restProps), {}, {
     value: value,
@@ -4993,7 +4993,7 @@ var SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput(_ref, ref)
 });
 SliderInput.displayName = 'SliderInput';
 
-var _excluded$y = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
+var _excluded$D = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
 var _tokens$entities$1 = slider.entities,
     track = _tokens$entities$1.track,
     handle = _tokens$entities$1.handle,
@@ -5070,7 +5070,7 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
       disabled = _ref10.disabled,
       ariaLabelledby = _ref10.ariaLabelledby,
       ariaLabelledbyNative = _ref10['aria-labelledby'],
-      rest = _objectWithoutProperties__default["default"](_ref10, _excluded$y);
+      rest = _objectWithoutProperties__default["default"](_ref10, _excluded$D);
 
   var isRangeSlider = Array.isArray(value);
   var parsedValue = isRangeSlider ? value : [value];
@@ -5301,19 +5301,19 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   });
 });
 
-var _tokens$colors$8 = edsTokens.tokens.colors,
-    white = _tokens$colors$8.text.static_icons__primary_white.rgba,
-    background$3 = _tokens$colors$8.ui.background__overlay.rgba,
+var _tokens$colors$9 = edsTokens.tokens.colors,
+    white = _tokens$colors$9.text.static_icons__primary_white.rgba,
+    background$4 = _tokens$colors$9.ui.background__overlay.rgba,
     ui = edsTokens.tokens.typography.ui,
-    _tokens$spacings$comf$8 = edsTokens.tokens.spacings.comfortable,
-    spacingXlarge = _tokens$spacings$comf$8.x_large,
-    spacingSmall$4 = _tokens$spacings$comf$8.small,
+    _tokens$spacings$comf$9 = edsTokens.tokens.spacings.comfortable,
+    spacingXlarge = _tokens$spacings$comf$9.x_large,
+    spacingSmall$4 = _tokens$spacings$comf$9.small,
     borderRadius$4 = edsTokens.tokens.shape.corners.borderRadius;
 var tooltip = {
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, ui.tooltip), {}, {
     color: white
   }),
-  background: background$3,
+  background: background$4,
   border: {
     type: 'border',
     radius: borderRadius$4
@@ -5341,11 +5341,11 @@ var tooltip = {
   }
 };
 
-var _excluded$x = ["title", "placement", "children", "style", "enterDelay"];
+var _excluded$C = ["title", "placement", "children", "style", "enterDelay"];
 var StyledTooltip = styled__default["default"].div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
-})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
+})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
 var ArrowWrapper$1 = styled__default["default"].div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
@@ -5354,7 +5354,7 @@ var 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);
-var Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
+var Tooltip$1 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   var title = _ref.title,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
@@ -5362,7 +5362,7 @@ var Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
       style = _ref.style,
       _ref$enterDelay = _ref.enterDelay,
       enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$x);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$C);
 
   var arrowRef = react.useRef(null);
 
@@ -5479,7 +5479,7 @@ var Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   });
 });
 
-var _excluded$w = ["children"];
+var _excluded$B = ["children"];
 var StyledSnackbarAction = styled__default["default"].div.withConfig({
   displayName: "SnackbarAction__StyledSnackbarAction",
   componentId: "sc-1v5mjvd-0"
@@ -5489,7 +5489,7 @@ var StyledSnackbarAction = styled__default["default"].div.withConfig({
 });
 var SnackbarAction = /*#__PURE__*/react.forwardRef(function SnackbarAction(_ref2, ref) {
   var children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$w);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$B);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -5501,17 +5501,17 @@ var SnackbarAction = /*#__PURE__*/react.forwardRef(function SnackbarAction(_ref2
 });
 
 var typography$7 = edsTokens.tokens.typography.ui.snackbar,
-    _tokens$colors$7 = edsTokens.tokens.colors,
-    background$2 = _tokens$colors$7.ui.background__overlay.rgba,
-    color = _tokens$colors$7.text.static_icons__primary_white.rgba,
-    buttonColor = _tokens$colors$7.interactive.link_in_snackbars.rgba,
-    _tokens$spacings$comf$7 = edsTokens.tokens.spacings.comfortable,
-    spacingMedium$4 = _tokens$spacings$comf$7.medium,
-    spacingXLarge = _tokens$spacings$comf$7.x_large,
+    _tokens$colors$8 = edsTokens.tokens.colors,
+    background$3 = _tokens$colors$8.ui.background__overlay.rgba,
+    color = _tokens$colors$8.text.static_icons__primary_white.rgba,
+    buttonColor = _tokens$colors$8.interactive.link_in_snackbars.rgba,
+    _tokens$spacings$comf$8 = edsTokens.tokens.spacings.comfortable,
+    spacingMedium$4 = _tokens$spacings$comf$8.medium,
+    spacingXLarge = _tokens$spacings$comf$8.x_large,
     clickbounds$1 = edsTokens.tokens.clickbounds.default__base,
     radius = edsTokens.tokens.shape.button.borderRadius;
 var snackbar = {
-  background: background$2,
+  background: background$3,
   minHeight: clickbounds$1,
   border: {
     type: 'border',
@@ -5546,7 +5546,7 @@ var snackbar = {
   }
 };
 
-var _excluded$v = ["open", "autoHideDuration", "onClose", "placement", "children"];
+var _excluded$A = ["open", "autoHideDuration", "onClose", "placement", "children"];
 var StyledSnackbar = styled__default["default"](Paper).withConfig({
   displayName: "Snackbar__StyledSnackbar",
   componentId: "sc-ac6no8-0"
@@ -5570,7 +5570,7 @@ var Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar(_ref2, ref) {
       _ref2$placement = _ref2.placement,
       placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
       children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$v);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$A);
 
   var _useState = react.useState(open),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -5618,16 +5618,16 @@ var Snackbar = Snackbar$1;
 Snackbar.Action = SnackbarAction;
 
 var header = edsTokens.tokens.typography.ui.accordion_header,
-    _tokens$colors$6 = edsTokens.tokens.colors,
-    background$1 = _tokens$colors$6.ui.background__default.rgba,
-    focusOutlineColor$3 = _tokens$colors$6.interactive.focus.rgba,
-    _tokens$spacings$comf$6 = edsTokens.tokens.spacings.comfortable,
-    spacingMedium$3 = _tokens$spacings$comf$6.medium,
-    spacingSmall$3 = _tokens$spacings$comf$6.small,
+    _tokens$colors$7 = edsTokens.tokens.colors,
+    background$2 = _tokens$colors$7.ui.background__default.rgba,
+    focusOutlineColor$3 = _tokens$colors$7.interactive.focus.rgba,
+    _tokens$spacings$comf$7 = edsTokens.tokens.spacings.comfortable,
+    spacingMedium$3 = _tokens$spacings$comf$7.medium,
+    spacingSmall$3 = _tokens$spacings$comf$7.small,
     borderRadius$3 = edsTokens.tokens.shape.corners.borderRadius,
     focusOutlineWidth$3 = edsTokens.tokens.interactions.focused.width;
 var popover = {
-  background: background$1,
+  background: background$2,
   typography: header,
   maxWidth: '560px',
   maxHeight: '80vh',
@@ -5676,7 +5676,7 @@ var popover = {
   }
 };
 
-var _excluded$u = ["children", "placement", "anchorEl", "style", "open", "onClose", "withinPortal", "trapFocus"];
+var _excluded$z = ["children", "placement", "anchorEl", "style", "open", "onClose", "withinPortal", "trapFocus"];
 var PopoverPaper = styled__default["default"](Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
@@ -5716,7 +5716,7 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
       onClose = _ref5.onClose,
       withinPortal = _ref5.withinPortal,
       trapFocus = _ref5.trapFocus,
-      rest = _objectWithoutProperties__default["default"](_ref5, _excluded$u);
+      rest = _objectWithoutProperties__default["default"](_ref5, _excluded$z);
 
   var arrowRef = react.useRef(null);
 
@@ -5743,7 +5743,7 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   var arrowX = _useFloating$middlewa.x,
       arrowY = _useFloating$middlewa.y,
       finalPlacement = _useFloating.placement;
-  react.useLayoutEffect(function () {
+  react.useEffect(function () {
     reference(anchorEl);
   }, [anchorEl, reference]);
   var popoverRef = react.useMemo(function () {
@@ -5849,7 +5849,7 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   });
 });
 
-var _excluded$t = ["children"];
+var _excluded$y = ["children"];
 var StyledPopoverTitle = styled__default["default"].div.withConfig({
   displayName: "PopoverTitle__StyledPopoverTitle",
   componentId: "sc-1ben8su-0"
@@ -5859,7 +5859,7 @@ var StyledPopoverTitle = styled__default["default"].div.withConfig({
 });
 var PopoverTitle = /*#__PURE__*/react.forwardRef(function PopoverTitle(_ref2, ref) {
   var children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$t);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$y);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -5870,7 +5870,7 @@ var PopoverTitle = /*#__PURE__*/react.forwardRef(function PopoverTitle(_ref2, re
   }));
 });
 
-var _excluded$s = ["children"];
+var _excluded$x = ["children"];
 var ContentWrapper = styled__default["default"].div.withConfig({
   displayName: "PopoverContent__ContentWrapper",
   componentId: "sc-vwww9h-0"
@@ -5880,7 +5880,7 @@ var ContentWrapper = styled__default["default"].div.withConfig({
 });
 var PopoverContent = /*#__PURE__*/react.forwardRef(function PopoverContent(_ref2, ref) {
   var children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$s);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$x);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -5891,7 +5891,7 @@ var PopoverContent = /*#__PURE__*/react.forwardRef(function PopoverContent(_ref2
   }));
 }); // PopoverContent.displayName = 'eds-popover-content'
 
-var _excluded$r = ["children"];
+var _excluded$w = ["children"];
 var StyledPopoverHeader = styled__default["default"].div.withConfig({
   displayName: "PopoverHeader__StyledPopoverHeader",
   componentId: "sc-ibcx7p-0"
@@ -5905,7 +5905,7 @@ var StyledDivider = styled__default["default"](Divider).withConfig({
 })(["margin-bottom:0;"]);
 var PopoverHeader = /*#__PURE__*/react.forwardRef(function PopoverHeader(_ref2, ref) {
   var children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$r);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$w);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -5920,7 +5920,7 @@ var PopoverHeader = /*#__PURE__*/react.forwardRef(function PopoverHeader(_ref2,
   }));
 });
 
-var _excluded$q = ["children"];
+var _excluded$v = ["children"];
 var StyledPopoverActions = styled__default["default"].div.withConfig({
   displayName: "PopoverActions__StyledPopoverActions",
   componentId: "sc-1dkrhw6-0"
@@ -5930,7 +5930,7 @@ var StyledPopoverActions = styled__default["default"].div.withConfig({
 });
 var PopoverActions = /*#__PURE__*/react.forwardRef(function PopoverActions(_ref2, ref) {
   var children = _ref2.children,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$q);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$v);
 
   var props = _objectSpread__default["default"]({
     ref: ref
@@ -5952,14 +5952,14 @@ Popover.Header.displayName = 'Popover.Header';
 Popover.Actions.displayName = 'Popover.Actions';
 
 var messageTypography = edsTokens.tokens.typography.paragraph.body_long,
-    medium$1 = edsTokens.tokens.spacings.comfortable.medium,
-    _tokens$colors$5 = edsTokens.tokens.colors,
-    _tokens$colors$infogr$2 = _tokens$colors$5.infographic,
+    medium$2 = edsTokens.tokens.spacings.comfortable.medium,
+    _tokens$colors$6 = edsTokens.tokens.colors,
+    _tokens$colors$infogr$2 = _tokens$colors$6.infographic,
     infoBackground = _tokens$colors$infogr$2.primary__moss_green_13.rgba,
     warningBackground = _tokens$colors$infogr$2.primary__energy_red_13.rgba,
     infoColor = _tokens$colors$infogr$2.primary__moss_green_100.rgba,
     warningColor = _tokens$colors$infogr$2.primary__energy_red_100.rgba,
-    backgroundColor = _tokens$colors$5.ui.background__default.rgba,
+    backgroundColor = _tokens$colors$6.ui.background__default.rgba,
     _tokens$shape$circle = edsTokens.tokens.shape.circle,
     minHeight = _tokens$shape$circle.minHeight,
     minWidth = _tokens$shape$circle.minWidth,
@@ -5968,10 +5968,10 @@ var enabled = {
   typography: _objectSpread__default["default"]({}, messageTypography),
   background: backgroundColor,
   spacings: {
-    left: medium$1,
-    right: medium$1,
-    top: medium$1,
-    bottom: medium$1
+    left: medium$2,
+    right: medium$2,
+    top: medium$2,
+    bottom: medium$2
   },
   entities: {
     icon: {
@@ -6014,7 +6014,7 @@ var warning$1 = {
   }
 };
 
-var _excluded$p = ["children", "variant"];
+var _excluded$u = ["children", "variant"];
 var info = info$1,
     warning = warning$1;
 var StyledBannerIcon = styled__default["default"].span.withConfig({
@@ -6029,7 +6029,7 @@ var BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref) {
   var children = _ref2.children,
       _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? 'info' : _ref2$variant,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$p);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$u);
 
   var childrenWithColor = react.Children.map(children, function (child) {
     var color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
@@ -6049,7 +6049,7 @@ var BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref) {
   }));
 });
 
-var _excluded$o = ["children", "className", "elevation"];
+var _excluded$t = ["children", "className", "elevation"];
 var Content$1 = styled__default["default"].div.withConfig({
   displayName: "Banner__Content",
   componentId: "sc-1ju451i-0"
@@ -6067,7 +6067,7 @@ var Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
       className = _ref2.className,
       _ref2$elevation = _ref2.elevation,
       elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$o);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$t);
 
   var childrenWhereBannerIcon = react.Children.map(children, function (child) {
     return /*#__PURE__*/react.isValidElement(child) && child.type === BannerIcon;
@@ -6102,14 +6102,14 @@ var Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
   });
 });
 
-var _excluded$n = ["children"];
+var _excluded$s = ["children"];
 var StyledBannerMessage = styled__default["default"](Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
 var BannerMessage = /*#__PURE__*/react.forwardRef(function BannerMessage(_ref, ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$n);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$s);
 
   var props = _objectSpread__default["default"]({
     ref: ref
@@ -6122,7 +6122,7 @@ var BannerMessage = /*#__PURE__*/react.forwardRef(function BannerMessage(_ref, r
   }));
 });
 
-var _excluded$m = ["children", "placement"];
+var _excluded$r = ["children", "placement"];
 var StyledBannerActions = styled__default["default"].div.withConfig({
   displayName: "BannerActions__StyledBannerActions",
   componentId: "sc-1o38ds2-0"
@@ -6138,7 +6138,7 @@ var BannerActions = /*#__PURE__*/react.forwardRef(function BannerActions(_ref2,
   var children = _ref2.children,
       _ref2$placement = _ref2.placement,
       placement = _ref2$placement === void 0 ? 'left' : _ref2$placement,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$m);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$r);
 
   var props = _objectSpread__default["default"]({
     ref: ref
@@ -6171,7 +6171,7 @@ var primary$2 = {
   }
 };
 
-var _excluded$l = ["variant", "value"];
+var _excluded$q = ["variant", "value"];
 var indeterminate$2 = styled.keyframes(["0%{left:-200%;right:100%;}60%{left:107%;right:-8%;}100%{left:107%;right:-8%;}"]);
 var Track$2 = styled__default["default"].div.withConfig({
   displayName: "LinearProgress__Track",
@@ -6194,7 +6194,7 @@ var LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_ref,
       variant = _ref$variant === void 0 ? 'indeterminate' : _ref$variant,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? null : _ref$value,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$l);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$q);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -6250,12 +6250,12 @@ var LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_ref,
   });
 }); // LinearProgress.displayName = 'eds-linear-progress'
 
-var _tokens$colors$4 = edsTokens.tokens.colors,
-    _tokens$colors$infogr = _tokens$colors$4.infographic,
+var _tokens$colors$5 = edsTokens.tokens.colors,
+    _tokens$colors$infogr = _tokens$colors$5.infographic,
     primary13 = _tokens$colors$infogr.primary__moss_green_13.rgba,
     primary100$1 = _tokens$colors$infogr.primary__moss_green_100.rgba,
-    icon_on_interactive_colors$1 = _tokens$colors$4.interactive.icon_on_interactive_colors.rgba,
-    background__semitransparent = _tokens$colors$4.ui.background__semitransparent.rgba;
+    icon_on_interactive_colors$1 = _tokens$colors$5.interactive.icon_on_interactive_colors.rgba,
+    background__semitransparent = _tokens$colors$5.ui.background__semitransparent.rgba;
 var primary$1 = {
   background: primary13,
   entities: {
@@ -6279,7 +6279,7 @@ var tokens$1 = /*#__PURE__*/Object.freeze({
   neutral: neutral$1
 });
 
-var _excluded$k = ["variant", "value", "size", "color"];
+var _excluded$p = ["variant", "value", "size", "color"];
 var indeterminate$1 = styled.keyframes(["100%{transform:rotate(360deg);}"]);
 var Svg$4 = styled__default["default"].svg.withConfig({
   displayName: "CircularProgress__Svg",
@@ -6325,7 +6325,7 @@ var CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress(_
       size = _ref2$size === void 0 ? 48 : _ref2$size,
       _ref2$color = _ref2.color,
       color = _ref2$color === void 0 ? 'primary' : _ref2$color,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$k);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$p);
 
   var thickness = 4;
   var progress = Math.round(value);
@@ -6412,7 +6412,7 @@ var token = {
   background: logoFillPositive
 };
 
-var _excluded$j = ["variant", "value", "size"];
+var _excluded$o = ["variant", "value", "size"];
 var indeterminate = styled.keyframes(["0%{opacity:1;}20%{opacity:0.8;}40%{opacity:0.6;}60%{opacity:0.4;}80%{opacity:0.2;}100%{opacity:0.05;}"]);
 var determinate = styled.keyframes(["0%{opacity:0;}10%{opacity:0.05;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}"]);
 var Svg$3 = styled__default["default"].svg.withConfig({
@@ -6430,7 +6430,7 @@ var StarProgress = /*#__PURE__*/react.forwardRef(function StarProgress(_ref2, re
       value = _ref2$value === void 0 ? null : _ref2$value,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 48 : _ref2$size,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$j);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$o);
 
   var progress = Math.round(value);
   var height = size * 1.2;
@@ -6474,11 +6474,11 @@ var StarProgress = /*#__PURE__*/react.forwardRef(function StarProgress(_ref2, re
   }));
 }); // StarProgress.displayName = 'eds-star-progress'
 
-var _tokens$colors$3 = edsTokens.tokens.colors,
-    primary100 = _tokens$colors$3.infographic.primary__moss_green_100.rgba,
-    _tokens$colors$intera$5 = _tokens$colors$3.interactive,
-    icon_on_interactive_colors = _tokens$colors$intera$5.icon_on_interactive_colors.rgba,
-    danger_resting = _tokens$colors$intera$5.danger__resting.rgba;
+var _tokens$colors$4 = edsTokens.tokens.colors,
+    primary100 = _tokens$colors$4.infographic.primary__moss_green_100.rgba,
+    _tokens$colors$intera$6 = _tokens$colors$4.interactive,
+    icon_on_interactive_colors = _tokens$colors$intera$6.icon_on_interactive_colors.rgba,
+    danger_resting = _tokens$colors$intera$6.danger__resting.rgba;
 var primary = {
   background: primary100
 };
@@ -6496,7 +6496,7 @@ var tokens = /*#__PURE__*/Object.freeze({
   tertiary: tertiary
 });
 
-var _excluded$i = ["color", "size"];
+var _excluded$n = ["color", "size"];
 var opacity = styled.keyframes(["0%{opacity:1;}100%{opacity:0.5;}"]);
 var Svg$2 = styled__default["default"].svg.withConfig({
   displayName: "DotProgress__Svg",
@@ -6519,7 +6519,7 @@ var DotProgress = /*#__PURE__*/react.forwardRef(function DotProgress(_ref2, ref)
       color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 32 : _ref2$size,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$i);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$n);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     color: getColor(color),
@@ -6557,9 +6557,9 @@ var Progress = {
   Dots: DotProgress
 };
 
-var _tokens$colors$2 = edsTokens.tokens.colors,
-    enabledColor = _tokens$colors$2.text.static_icons__tertiary.rgba,
-    hoverColor = _tokens$colors$2.interactive.primary__resting.rgba,
+var _tokens$colors$3 = edsTokens.tokens.colors,
+    enabledColor = _tokens$colors$3.text.static_icons__tertiary.rgba,
+    hoverColor = _tokens$colors$3.interactive.primary__resting.rgba,
     spacingMedium$2 = edsTokens.tokens.spacings.comfortable.medium;
 var breadcrumbs = {
   spacings: {
@@ -6578,7 +6578,7 @@ var breadcrumbs = {
   }
 };
 
-var _excluded$h = ["children", "collapse"];
+var _excluded$m = ["children", "collapse"];
 var spacings = breadcrumbs.spacings,
     typography$6 = breadcrumbs.typography,
     states$1 = breadcrumbs.states;
@@ -6601,7 +6601,7 @@ var Collapsed = styled__default["default"](Typography).withConfig({
 var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref) {
   var children = _ref.children,
       collapse = _ref.collapse,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$h);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$m);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
@@ -6673,7 +6673,7 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
   }));
 }); // Breadcrumbs.displayName = 'eds-breadcrumbs'
 
-var _excluded$g = ["children", "maxWidth", "href", "as"];
+var _excluded$l = ["children", "maxWidth", "href", "as"];
 var states = breadcrumbs.states,
     typography$5 = breadcrumbs.typography;
 var StyledTypography = styled__default["default"](Typography).withConfig({
@@ -6690,7 +6690,7 @@ var Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref) {
       maxWidth = _ref2.maxWidth,
       href = _ref2.href,
       as = _ref2.as,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$g);
+      other = _objectWithoutProperties__default["default"](_ref2, _excluded$l);
 
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, other), {}, {
     href: href,
@@ -6712,7 +6712,7 @@ var Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref) {
     children: children
   }));
 
-  return showTooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+  return showTooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
     title: children,
     placement: "top",
     children: crumb
@@ -6723,16 +6723,16 @@ var Breadcrumbs = Breadcrumbs$1;
 Breadcrumbs.Breadcrumb = Breadcrumb;
 Breadcrumbs.Breadcrumb.displayName = 'Breadcrumbs.Breadcrumb';
 
-var initalState = {
+var initalState$1 = {
   focusedIndex: -1,
   initialFocus: null,
   onClose: null
 };
-var MenuContext = /*#__PURE__*/react.createContext(initalState);
+var MenuContext = /*#__PURE__*/react.createContext(initalState$1);
 var MenuProvider = function MenuProvider(_ref) {
   var children = _ref.children;
 
-  var _useState = react.useState(initalState),
+  var _useState = react.useState(initalState$1),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
@@ -6788,26 +6788,26 @@ var useMenu = function useMenu() {
   return react.useContext(MenuContext);
 };
 
-var _tokens$colors$1 = edsTokens.tokens.colors,
-    background = _tokens$colors$1.ui.background__default.rgba,
-    _tokens$colors$intera$4 = _tokens$colors$1.interactive,
-    activeBackground = _tokens$colors$intera$4.primary__selected_highlight.rgba,
-    activeTextColor = _tokens$colors$intera$4.primary__resting.rgba,
-    focusColor = _tokens$colors$intera$4.focus.rgba,
-    disabledIconColor = _tokens$colors$intera$4.disabled__fill.rgba,
-    disabledTextColor = _tokens$colors$intera$4.disabled__text.rgba,
-    hoverBackground = _tokens$colors$intera$4.table__header__fill_hover.rgba,
-    textColor = _tokens$colors$1.text.static_icons__default.rgba,
-    _tokens$spacings$comf$5 = edsTokens.tokens.spacings.comfortable,
-    medium = _tokens$spacings$comf$5.medium,
-    large = _tokens$spacings$comf$5.large,
-    small$1 = _tokens$spacings$comf$5.small,
+var _tokens$colors$2 = edsTokens.tokens.colors,
+    background$1 = _tokens$colors$2.ui.background__default.rgba,
+    _tokens$colors$intera$5 = _tokens$colors$2.interactive,
+    activeBackground = _tokens$colors$intera$5.primary__selected_highlight.rgba,
+    activeTextColor = _tokens$colors$intera$5.primary__resting.rgba,
+    focusColor$1 = _tokens$colors$intera$5.focus.rgba,
+    disabledIconColor = _tokens$colors$intera$5.disabled__fill.rgba,
+    disabledTextColor = _tokens$colors$intera$5.disabled__text.rgba,
+    hoverBackground = _tokens$colors$intera$5.table__header__fill_hover.rgba,
+    textColor = _tokens$colors$2.text.static_icons__default.rgba,
+    _tokens$spacings$comf$6 = edsTokens.tokens.spacings.comfortable,
+    medium$1 = _tokens$spacings$comf$6.medium,
+    large$1 = _tokens$spacings$comf$6.large,
+    small$2 = _tokens$spacings$comf$6.small,
     typography$4 = edsTokens.tokens.typography.navigation.menu_title;
 var menu = {
-  background: background,
+  background: background$1,
   spacings: {
-    top: small$1,
-    bottom: small$1,
+    top: small$2,
+    bottom: small$2,
     left: '0px',
     right: '0px'
   },
@@ -6830,10 +6830,10 @@ var menu = {
     },
     item: {
       spacings: {
-        left: large,
-        right: large,
-        top: medium,
-        bottom: medium
+        left: large$1,
+        right: large$1,
+        top: medium$1,
+        bottom: medium$1
       },
       states: {
         active: {
@@ -6844,7 +6844,7 @@ var menu = {
         },
         focus: {
           outline: {
-            color: focusColor,
+            color: focusColor$1,
             style: 'dashed',
             type: 'outline',
             width: '2px',
@@ -6863,10 +6863,10 @@ var menu = {
     },
     title: {
       spacings: {
-        left: large,
-        right: large,
-        top: small$1,
-        bottom: small$1
+        left: large$1,
+        right: large$1,
+        top: small$2,
+        bottom: small$2
       }
     }
   },
@@ -6875,10 +6875,10 @@ var menu = {
       entities: {
         item: {
           spacings: {
-            left: large,
-            right: large,
-            top: small$1,
-            bottom: small$1
+            left: large$1,
+            right: large$1,
+            top: small$2,
+            bottom: small$2
           }
         }
       }
@@ -6886,7 +6886,7 @@ var menu = {
   }
 };
 
-var _excluded$f = ["children", "disabled", "index", "onClick"];
+var _excluded$k = ["children", "disabled", "index", "onClick"];
 var typography$3 = menu.typography,
     _tokens$entities = menu.entities,
     _tokens$entities$item = _tokens$entities.item.states,
@@ -6924,7 +6924,7 @@ var MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
       _ref5$index = _ref5.index,
       index = _ref5$index === void 0 ? 0 : _ref5$index,
       _onClick = _ref5.onClick,
-      rest = _objectWithoutProperties__default["default"](_ref5, _excluded$f);
+      rest = _objectWithoutProperties__default["default"](_ref5, _excluded$k);
 
   var _useMenu = useMenu(),
       focusedIndex = _useMenu.focusedIndex,
@@ -6998,7 +6998,7 @@ var MenuSection = /*#__PURE__*/react.memo(function MenuSection(props) {
   });
 }); // MenuSection.displayName = 'EdsMenuSection'
 
-var _excluded$e = ["children"];
+var _excluded$j = ["children"];
 var List = styled__default["default"].div.withConfig({
   displayName: "MenuList__List",
   componentId: "sc-104rzof-0"
@@ -7011,7 +7011,7 @@ function isIndexable(item) {
 
 var MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$e);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$j);
 
   var _useMenu = useMenu(),
       focusedIndex = _useMenu.focusedIndex,
@@ -7093,8 +7093,8 @@ var MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
   }));
 }); // MenuList.displayName = 'EdsMenuList'
 
-var _excluded$d = ["children", "anchorEl", "onClose", "open"],
-    _excluded2 = ["anchorEl", "open", "placement", "onClose", "style", "className"];
+var _excluded$i = ["children", "anchorEl", "onClose", "open"],
+    _excluded2$1 = ["anchorEl", "open", "placement", "onClose", "style", "className"];
 var border = menu.border;
 var MenuPaper = styled__default["default"](Paper).withConfig({
   displayName: "Menu__MenuPaper",
@@ -7110,7 +7110,7 @@ var MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2,
       anchorEl = _ref2.anchorEl,
       onCloseCallback = _ref2.onClose,
       open = _ref2.open,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$d);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$i);
 
   var _useMenu = useMenu(),
       setOnClose = _useMenu.setOnClose,
@@ -7179,7 +7179,7 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
       onClose = _ref3.onClose,
       style = _ref3.style,
       className = _ref3.className,
-      rest = _objectWithoutProperties__default["default"](_ref3, _excluded2);
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded2$1);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -7205,7 +7205,7 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
       strategy = _useFloating.strategy,
       context = _useFloating.context;
 
-  react.useLayoutEffect(function () {
+  react.useEffect(function () {
     reference(anchorEl);
   }, [anchorEl, reference]);
   var popoverRef = react.useMemo(function () {
@@ -7265,9 +7265,9 @@ Menu.Section = MenuSection;
 Menu.Item.displayName = 'Menu.Item';
 Menu.Section.displayName = 'Menu.Section';
 
-var _tokens$colors$intera$3 = edsTokens.tokens.colors.interactive,
-    selectedColor = _tokens$colors$intera$3.primary__selected_highlight.rgba,
-    disabledColor = _tokens$colors$intera$3.disabled__text.rgba,
+var _tokens$colors$intera$4 = edsTokens.tokens.colors.interactive,
+    selectedColor = _tokens$colors$intera$4.primary__selected_highlight.rgba,
+    disabledColor = _tokens$colors$intera$4.disabled__text.rgba,
     spacingSmall$2 = edsTokens.tokens.spacings.comfortable.small;
 var pagination = {
   entities: {
@@ -7289,12 +7289,12 @@ var pagination = {
   }
 };
 
-var _excluded$c = ["page", "selected", "onClick"];
+var _excluded$h = ["page", "selected", "onClick"];
 var PaginationItem = /*#__PURE__*/react.forwardRef(function PaginationItem(_ref, ref) {
   var page = _ref.page,
       selected = _ref.selected,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$c);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$h);
 
   var props = _objectSpread__default["default"]({
     ref: ref,
@@ -7361,7 +7361,7 @@ function PaginationControl(pages, activePage) {
   return range(1, pages);
 }
 
-var _excluded$b = ["totalItems", "defaultPage", "withItemIndicator", "itemsPerPage", "onChange"];
+var _excluded$g = ["totalItems", "defaultPage", "withItemIndicator", "itemsPerPage", "onChange"];
 var icons = {
   chevron_left: edsIcons.chevron_left,
   chevron_right: edsIcons.chevron_right,
@@ -7408,7 +7408,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
       _ref2$itemsPerPage = _ref2.itemsPerPage,
       itemsPerPage = _ref2$itemsPerPage === void 0 ? 10 : _ref2$itemsPerPage,
       onChange = _ref2.onChange,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$b);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$g);
 
   var pages = Math.ceil(totalItems / itemsPerPage); // Total page numbers
 
@@ -7436,7 +7436,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
 
   var isMounted = edsUtils.useIsMounted();
   var items = PaginationControl(pages, activePage);
-  react.useLayoutEffect(function () {
+  edsUtils.useIsomorphicLayoutEffect(function () {
     if (isMounted) {
       setActivePage(1);
       onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
@@ -7513,9 +7513,9 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
 });
 
 var colors$2 = edsTokens.tokens.colors,
-    _tokens$spacings$comf$4 = edsTokens.tokens.spacings.comfortable,
-    small = _tokens$spacings$comf$4.small,
-    x_small$2 = _tokens$spacings$comf$4.x_small,
+    _tokens$spacings$comf$5 = edsTokens.tokens.spacings.comfortable,
+    small$1 = _tokens$spacings$comf$5.small,
+    x_small$2 = _tokens$spacings$comf$5.x_small,
     typography$2 = edsTokens.tokens.typography,
     shape = edsTokens.tokens.shape;
 var nativeselect = {
@@ -7526,8 +7526,8 @@ var nativeselect = {
   entities: {
     input: {
       spacings: {
-        left: small,
-        right: small,
+        left: small$1,
+        right: small$1,
         top: '6px',
         bottom: '6px'
       }
@@ -7570,8 +7570,8 @@ var nativeselect = {
   }
 };
 
-var _excluded$a = ["label", "children", "className", "style", "selectRef", "id", "meta", "disabled", "multiple"];
-var Container$2 = styled__default["default"].div.withConfig({
+var _excluded$f = ["label", "children", "className", "style", "selectRef", "id", "meta", "disabled", "multiple"];
+var Container$3 = styled__default["default"].div.withConfig({
   displayName: "NativeSelect__Container",
   componentId: "sc-1c1ogya-0"
 })(["min-width:100px;width:100%;"]);
@@ -7594,7 +7594,7 @@ var NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2, re
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
       _ref2$multiple = _ref2.multiple,
       multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$a);
+      other = _objectWithoutProperties__default["default"](_ref2, _excluded$f);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -7623,7 +7623,7 @@ var NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2, re
   var showLabel = label || meta;
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$3, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
       children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"]({}, labelProps)), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, _objectSpread__default["default"](_objectSpread__default["default"]({}, selectProps), {}, {
         children: children
       }))]
@@ -7636,12 +7636,12 @@ var typography$1 = edsTokens.tokens.typography,
     _tokens$shape$2 = edsTokens.tokens.shape,
     straight$1 = _tokens$shape$2.straight,
     borderRadius$1 = _tokens$shape$2.corners.borderRadius,
-    _tokens$spacings$comf$3 = edsTokens.tokens.spacings.comfortable,
-    spacingSmall$1 = _tokens$spacings$comf$3.small,
-    spacingMediumSmall$1 = _tokens$spacings$comf$3.medium_small,
-    spacingMedium$1 = _tokens$spacings$comf$3.medium,
-    spacingLarge$1 = _tokens$spacings$comf$3.large,
-    xx_small$1 = _tokens$spacings$comf$3.xx_small,
+    _tokens$spacings$comf$4 = edsTokens.tokens.spacings.comfortable,
+    spacingSmall$1 = _tokens$spacings$comf$4.small,
+    spacingMediumSmall$1 = _tokens$spacings$comf$4.medium_small,
+    spacingMedium$1 = _tokens$spacings$comf$4.medium,
+    spacingLarge$1 = _tokens$spacings$comf$4.large,
+    xx_small$1 = _tokens$spacings$comf$4.xx_small,
     boxShadow$2 = edsTokens.tokens.elevation.temporary_nav;
 var select = {
   background: colors$1.ui.background__default.rgba,
@@ -7719,7 +7719,7 @@ var multiSelect$1 = mergeDeepRight$1(select, {
 });
 
 var buttonToken = select.entities.button;
-var Container$1 = styled__default["default"].div.withConfig({
+var Container$2 = styled__default["default"].div.withConfig({
   displayName: "commonStyles__Container",
   componentId: "sc-v98ajk-0"
 })(["position:relative;"]);
@@ -7753,7 +7753,7 @@ var StyledInputWrapper = styled__default["default"].div.withConfig({
   componentId: "sc-v98ajk-5"
 })(["position:relative;"]);
 
-var _excluded$9 = ["items", "label", "meta", "className", "disabled", "readOnly", "initialSelectedItem", "selectedOption", "handleSelectedItemChange"];
+var _excluded$e = ["items", "label", "meta", "className", "disabled", "readOnly", "initialSelectedItem", "selectedOption", "handleSelectedItemChange"];
 var PaddedStyledListItem$1 = styled__default["default"](StyledListItem$1).withConfig({
   displayName: "SingleSelect__PaddedStyledListItem",
   componentId: "sc-rh1yw2-0"
@@ -7776,7 +7776,7 @@ var SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2, re
       initialSelectedItem = _ref2.initialSelectedItem,
       selectedOption = _ref2.selectedOption,
       handleSelectedItemChange = _ref2.handleSelectedItemChange,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$9);
+      other = _objectWithoutProperties__default["default"](_ref2, _excluded$e);
 
   var _useState = react.useState(items),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -7841,7 +7841,7 @@ var SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2, re
 
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
       className: className,
       ref: ref,
       children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
@@ -7897,15 +7897,15 @@ var SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2, re
   });
 });
 
-var _tokens$colors$intera$2 = edsTokens.tokens.colors.interactive,
-    primaryColor$1 = _tokens$colors$intera$2.primary__resting.rgba,
-    primaryHoverAlt$2 = _tokens$colors$intera$2.primary__hover_alt.rgba,
-    focusOutlineColor$2 = _tokens$colors$intera$2.focus.rgba,
-    disabledText$1 = _tokens$colors$intera$2.disabled__text.rgba,
+var _tokens$colors$intera$3 = edsTokens.tokens.colors.interactive,
+    primaryColor$1 = _tokens$colors$intera$3.primary__resting.rgba,
+    primaryHoverAlt$2 = _tokens$colors$intera$3.primary__hover_alt.rgba,
+    focusOutlineColor$2 = _tokens$colors$intera$3.focus.rgba,
+    disabledText$1 = _tokens$colors$intera$3.disabled__text.rgba,
     labelTypography$2 = edsTokens.tokens.typography.navigation.menu_title,
-    _tokens$spacings$comf$2 = edsTokens.tokens.spacings.comfortable,
-    medium_small$2 = _tokens$spacings$comf$2.medium_small,
-    x_small$1 = _tokens$spacings$comf$2.x_small,
+    _tokens$spacings$comf$3 = edsTokens.tokens.spacings.comfortable,
+    medium_small$2 = _tokens$spacings$comf$3.medium_small,
+    x_small$1 = _tokens$spacings$comf$3.x_small,
     _tokens$clickbounds$1 = edsTokens.tokens.clickbounds,
     clicboundSize$1 = _tokens$clickbounds$1.default__base,
     compactClickboundSize$1 = _tokens$clickbounds$1.compact__standard,
@@ -7965,7 +7965,7 @@ var checkbox = {
   }
 };
 
-var _excluded$8 = ["disabled", "indeterminate", "style", "className"];
+var _excluded$d = ["disabled", "indeterminate", "style", "className"];
 var StyledPath$1 = styled__default["default"].path.attrs(function (_ref) {
   var icon = _ref.icon;
   return {
@@ -8031,7 +8031,7 @@ var CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref10,
       indeterminate = _ref10.indeterminate,
       style = _ref10.style,
       className = _ref10.className,
-      rest = _objectWithoutProperties__default["default"](_ref10, _excluded$8);
+      rest = _objectWithoutProperties__default["default"](_ref10, _excluded$d);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -8085,7 +8085,7 @@ var CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref10,
   });
 });
 
-var _excluded$7 = ["items", "initialSelectedItems", "label", "meta", "className", "disabled", "readOnly", "selectedOptions", "handleSelectedItemsChange"];
+var _excluded$c = ["items", "initialSelectedItems", "label", "meta", "className", "disabled", "readOnly", "selectedOptions", "handleSelectedItemsChange"];
 var PaddedStyledListItem = styled__default["default"](StyledListItem$1).withConfig({
   displayName: "MultiSelect__PaddedStyledListItem",
   componentId: "sc-69ntfg-0"
@@ -8109,7 +8109,7 @@ var MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, ref)
       readOnly = _ref2$readOnly === void 0 ? false : _ref2$readOnly,
       selectedOptions = _ref2.selectedOptions,
       handleSelectedItemsChange = _ref2.handleSelectedItemsChange,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$7);
+      other = _objectWithoutProperties__default["default"](_ref2, _excluded$c);
 
   var isControlled = selectedOptions ? true : false;
 
@@ -8229,7 +8229,7 @@ var MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, ref)
 
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
       className: className,
       ref: ref,
       children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
@@ -8294,7 +8294,7 @@ var MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, ref)
   });
 });
 
-var _excluded$6 = ["label", "disabled", "indeterminate", "className", "style"];
+var _excluded$b = ["label", "disabled", "indeterminate", "className", "style"];
 var StyledLabel$2 = styled__default["default"].label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
@@ -8313,7 +8313,7 @@ var Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox(_ref2, ref) {
       indeterminate = _ref2.indeterminate,
       className = _ref2.className,
       style = _ref2.style,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$6);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$b);
 
   return label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$2, {
     disabled: disabled,
@@ -8336,15 +8336,15 @@ var Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox(_ref2, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _tokens$colors$intera$1 = edsTokens.tokens.colors.interactive,
-    primaryColor = _tokens$colors$intera$1.primary__resting.rgba,
-    primaryHoverAlt$1 = _tokens$colors$intera$1.primary__hover_alt.rgba,
-    focusOutlineColor$1 = _tokens$colors$intera$1.focus.rgba,
-    disabledText = _tokens$colors$intera$1.disabled__text.rgba,
+var _tokens$colors$intera$2 = edsTokens.tokens.colors.interactive,
+    primaryColor = _tokens$colors$intera$2.primary__resting.rgba,
+    primaryHoverAlt$1 = _tokens$colors$intera$2.primary__hover_alt.rgba,
+    focusOutlineColor$1 = _tokens$colors$intera$2.focus.rgba,
+    disabledText = _tokens$colors$intera$2.disabled__text.rgba,
     labelTypography$1 = edsTokens.tokens.typography.navigation.menu_title,
-    _tokens$spacings$comf$1 = edsTokens.tokens.spacings.comfortable,
-    medium_small$1 = _tokens$spacings$comf$1.medium_small,
-    x_small = _tokens$spacings$comf$1.x_small,
+    _tokens$spacings$comf$2 = edsTokens.tokens.spacings.comfortable,
+    medium_small$1 = _tokens$spacings$comf$2.medium_small,
+    x_small = _tokens$spacings$comf$2.x_small,
     _tokens$clickbounds = edsTokens.tokens.clickbounds,
     clicboundSize = _tokens$clickbounds.default__base,
     compactClickboundSize = _tokens$clickbounds.compact__standard,
@@ -8404,7 +8404,7 @@ var comfortable$1 = {
   }
 };
 
-var _excluded$5 = ["label", "disabled", "className", "style"];
+var _excluded$a = ["label", "disabled", "className", "style"];
 var Input$2 = styled__default["default"].input.attrs(function (_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'radio' : _ref$type;
@@ -8484,7 +8484,7 @@ var Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref12, ref) {
       disabled = _ref12$disabled === void 0 ? false : _ref12$disabled,
       className = _ref12.className,
       style = _ref12.style,
-      rest = _objectWithoutProperties__default["default"](_ref12, _excluded$5);
+      rest = _objectWithoutProperties__default["default"](_ref12, _excluded$a);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -8571,7 +8571,7 @@ var GridWrapper = styled__default["default"].span.withConfig({
   componentId: "sc-x39lde-2"
 })(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;"]);
 
-var _excluded$4 = ["disabled", "className", "style"];
+var _excluded$9 = ["disabled", "className", "style"];
 var Input$1 = styled__default["default"](BaseInput).withConfig({
   displayName: "SwitchSmall__Input",
   componentId: "sc-1a99mis-0"
@@ -8605,7 +8605,7 @@ var SwitchSmall = /*#__PURE__*/react.forwardRef(function SwitchSmall(_ref4, ref)
   var disabled = _ref4.disabled,
       className = _ref4.className,
       style = _ref4.style,
-      rest = _objectWithoutProperties__default["default"](_ref4, _excluded$4);
+      rest = _objectWithoutProperties__default["default"](_ref4, _excluded$9);
 
   return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
     className: className,
@@ -8622,7 +8622,7 @@ var SwitchSmall = /*#__PURE__*/react.forwardRef(function SwitchSmall(_ref4, ref)
 });
 SwitchSmall.displayName = 'SwitchSmall';
 
-var _excluded$3 = ["disabled", "className", "style"];
+var _excluded$8 = ["disabled", "className", "style"];
 var Input = styled__default["default"](BaseInput).withConfig({
   displayName: "SwitchDefault__Input",
   componentId: "sc-16ym5pn-0"
@@ -8659,7 +8659,7 @@ var SwitchDefault = /*#__PURE__*/react.forwardRef(function SwitchDefault(_ref4,
   var disabled = _ref4.disabled,
       className = _ref4.className,
       style = _ref4.style,
-      rest = _objectWithoutProperties__default["default"](_ref4, _excluded$3);
+      rest = _objectWithoutProperties__default["default"](_ref4, _excluded$8);
 
   return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
     className: className,
@@ -8678,17 +8678,17 @@ var SwitchDefault = /*#__PURE__*/react.forwardRef(function SwitchDefault(_ref4,
 });
 SwitchDefault.displayName = 'SwitchDefault';
 
-var _tokens$colors = edsTokens.tokens.colors,
-    backgroundColorMedium = _tokens$colors.ui.background__medium.rgba,
-    _tokens$colors$intera = _tokens$colors.interactive,
-    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
-    primaryHover = _tokens$colors$intera.primary__hover.rgba,
-    activeColor = _tokens$colors$intera.primary__selected_highlight.rgba,
-    primaryResting = _tokens$colors$intera.primary__resting.rgba,
-    backgroundDisabled = _tokens$colors$intera.disabled__fill.rgba,
-    focusOutlineColor = _tokens$colors$intera.focus.rgba,
-    iconInteractive = _tokens$colors$intera.icon_on_interactive_colors.rgba,
-    iconTertiary = _tokens$colors.text.static_icons__tertiary.rgba,
+var _tokens$colors$1 = edsTokens.tokens.colors,
+    backgroundColorMedium = _tokens$colors$1.ui.background__medium.rgba,
+    _tokens$colors$intera$1 = _tokens$colors$1.interactive,
+    primaryHoverAlt = _tokens$colors$intera$1.primary__hover_alt.rgba,
+    primaryHover = _tokens$colors$intera$1.primary__hover.rgba,
+    activeColor = _tokens$colors$intera$1.primary__selected_highlight.rgba,
+    primaryResting = _tokens$colors$intera$1.primary__resting.rgba,
+    backgroundDisabled = _tokens$colors$intera$1.disabled__fill.rgba,
+    focusOutlineColor = _tokens$colors$intera$1.focus.rgba,
+    iconInteractive = _tokens$colors$intera$1.icon_on_interactive_colors.rgba,
+    iconTertiary = _tokens$colors$1.text.static_icons__tertiary.rgba,
     labelTypography = edsTokens.tokens.typography.navigation.menu_title,
     clickbounds = edsTokens.tokens.clickbounds,
     boxShadow$1 = edsTokens.tokens.elevation.raised,
@@ -8803,7 +8803,7 @@ var comfortable = {
   }
 };
 
-var _excluded$2 = ["size", "disabled", "label", "className", "style"];
+var _excluded$7 = ["size", "disabled", "label", "className", "style"];
 var StyledLabel = styled__default["default"].label.withConfig({
   displayName: "Switch__StyledLabel",
   componentId: "sc-sdaahx-0"
@@ -8825,7 +8825,7 @@ var Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref3, ref) {
       label = _ref3.label,
       className = _ref3.className,
       style = _ref3.style,
-      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$2);
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$7);
 
   var _useEds = useEds(),
       density = _useEds.density; // TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future)
@@ -8874,12 +8874,12 @@ var typography = edsTokens.tokens.typography,
     _tokens$shape = edsTokens.tokens.shape,
     straight = _tokens$shape.straight,
     borderRadius = _tokens$shape.corners.borderRadius,
-    _tokens$spacings$comf = edsTokens.tokens.spacings.comfortable,
-    spacingSmall = _tokens$spacings$comf.small,
-    spacingMediumSmall = _tokens$spacings$comf.medium_small,
-    spacingMedium = _tokens$spacings$comf.medium,
-    spacingLarge = _tokens$spacings$comf.large,
-    xx_small = _tokens$spacings$comf.xx_small,
+    _tokens$spacings$comf$1 = edsTokens.tokens.spacings.comfortable,
+    spacingSmall = _tokens$spacings$comf$1.small,
+    spacingMediumSmall = _tokens$spacings$comf$1.medium_small,
+    spacingMedium = _tokens$spacings$comf$1.medium,
+    spacingLarge = _tokens$spacings$comf$1.large,
+    xx_small = _tokens$spacings$comf$1.xx_small,
     boxShadow = edsTokens.tokens.elevation.temporary_nav;
 var selectTokens = {
   background: colors.ui.background__default.rgba,
@@ -8959,7 +8959,7 @@ var multiSelect = mergeDeepRight$1(selectTokens, {
   }
 });
 
-var _excluded$1 = ["value", "multiple", "isSelected", "isDisabled", "onClick", "aria-selected"];
+var _excluded$6 = ["value", "multiple", "isSelected", "isDisabled", "onClick", "aria-selected"];
 var StyledListItem = styled__default["default"](List$1.Item).withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
@@ -8978,7 +8978,7 @@ var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOpti
       isDisabled = _ref2.isDisabled,
       _onClick = _ref2.onClick,
       ariaSelected = _ref2['aria-selected'],
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$1);
+      other = _objectWithoutProperties__default["default"](_ref2, _excluded$6);
 
   return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
@@ -9003,8 +9003,8 @@ var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOpti
   }));
 });
 
-var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange"];
-var Container = styled__default["default"].div.withConfig({
+var _excluded$5 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange"];
+var Container$1 = styled__default["default"].div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
@@ -9120,7 +9120,7 @@ function AutocompleteInner(props, ref) {
       optionLabel = props.optionLabel,
       _props$clearSearchOnC = props.clearSearchOnChange,
       clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
-      other = _objectWithoutProperties__default["default"](props, _excluded);
+      other = _objectWithoutProperties__default["default"](props, _excluded$5);
 
   var anchorRef = react.useRef(null);
   var isControlled = Boolean(selectedOptions);
@@ -9419,10 +9419,10 @@ function AutocompleteInner(props, ref) {
   var _useInteractions = reactDomInteractions.useInteractions([]),
       getFloatingProps = _useInteractions.getFloatingProps;
 
-  react.useLayoutEffect(function () {
+  react.useEffect(function () {
     reference(anchorRef.current);
   }, [anchorRef, reference]);
-  react.useLayoutEffect(function () {
+  react.useEffect(function () {
     if (refs.reference.current && refs.floating.current && isOpen) {
       return reactDomInteractions.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
@@ -9474,7 +9474,7 @@ function AutocompleteInner(props, ref) {
 
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
       className: className,
       style: style,
       ref: ref,
@@ -9482,7 +9482,7 @@ function AutocompleteInner(props, ref) {
         label: label,
         meta: meta,
         disabled: disabled
-      })), /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread__default["default"](_objectSpread__default["default"]({}, getComboboxProps()), {}, {
+      })), /*#__PURE__*/jsxRuntime.jsx(Container$1, _objectSpread__default["default"](_objectSpread__default["default"]({}, getComboboxProps()), {}, {
         children: /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         getDropdownProps({
           preventKeyAction: multiple ? isOpen : undefined,
@@ -9533,6 +9533,491 @@ function AutocompleteInner(props, ref) {
 
 var Autocomplete = /*#__PURE__*/react.forwardRef(AutocompleteInner);
 
+var _tokens$colors = edsTokens.tokens.colors,
+    _tokens$colors$ui = _tokens$colors.ui,
+    background__light = _tokens$colors$ui.background__light.rgba,
+    background__medium = _tokens$colors$ui.background__medium.rgba,
+    background = _tokens$colors$ui.background__default.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    focusColor = _tokens$colors$intera.focus.rgba,
+    primary__resting = _tokens$colors$intera.primary__resting.rgba,
+    menuActive = _tokens$colors$intera.primary__selected_highlight.rgba,
+    menuDisabledBackground = _tokens$colors$intera.disabled__fill.rgba,
+    menuDisabledText = _tokens$colors$intera.disabled__text.rgba,
+    _tokens$colors$text = _tokens$colors.text,
+    expandTextColor = _tokens$colors$text.static_icons__default.rgba,
+    primaryWhite$1 = _tokens$colors$text.static_icons__primary_white.rgba,
+    _tokens$spacings$comf = edsTokens.tokens.spacings.comfortable,
+    medium = _tokens$spacings$comf.medium,
+    large = _tokens$spacings$comf.large,
+    small = _tokens$spacings$comf.small;
+var sidebar = {
+  background: background,
+  minWidth: '72px',
+  maxWidth: '256px',
+  spacings: {
+    top: large,
+    bottom: large
+  },
+  border: {
+    type: 'bordergroup',
+    right: {
+      color: background__light,
+      width: '2px',
+      style: 'solid'
+    }
+  },
+  entities: {
+    actionButton: {
+      typography: {
+        color: primaryWhite$1
+      },
+      spacings: {
+        top: medium,
+        bottom: medium,
+        right: large,
+        left: large
+      }
+    },
+    sidebarItem: {
+      minHeight: '48px',
+      spacings: {
+        top: '0',
+        bottom: '0'
+      },
+      typography: {
+        color: expandTextColor
+      },
+      border: {
+        type: 'bordergroup',
+        bottom: {
+          color: background__light,
+          width: '2px',
+          style: 'solid'
+        }
+      },
+      states: {
+        active: {
+          background: menuActive,
+          typography: {
+            color: primary__resting
+          }
+        },
+        hover: {
+          background: background__medium
+        },
+        focus: {
+          outline: {
+            color: focusColor,
+            style: 'dashed',
+            type: 'outline',
+            width: '2px',
+            offset: '-2px'
+          }
+        },
+        disabled: {
+          background: menuDisabledBackground,
+          typography: {
+            color: menuDisabledText
+          }
+        }
+      }
+    },
+    toggleOpen: {
+      spacings: {
+        top: small,
+        bottom: small
+      },
+      typography: {
+        color: expandTextColor
+      }
+    }
+  },
+  modes: {
+    compact: {
+      entities: {}
+    }
+  }
+};
+
+var initalState = {
+  isOpen: false,
+  onToggle: null
+};
+var SideBarContext = /*#__PURE__*/react.createContext(initalState);
+var SideBarProvider = function SideBarProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = react.useState(initalState),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var isOpen = state.isOpen,
+      onToggle = state.onToggle;
+  var setIsOpen = react.useCallback(function (open) {
+    setState(function (prevState) {
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
+        isOpen: open
+      });
+    });
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);
+  }, [onToggle]);
+
+  var setOnToggle = function setOnToggle(onToggle) {
+    setState(function (prevState) {
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
+        onToggle: onToggle
+      });
+    });
+  };
+
+  var value = {
+    setIsOpen: setIsOpen,
+    setOnToggle: setOnToggle,
+    onToggle: onToggle,
+    isOpen: isOpen
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(SideBarContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+var useSideBar = function useSideBar() {
+  return react.useContext(SideBarContext);
+};
+
+var _excluded$4 = ["onToggle", "open", "children"],
+    _excluded2 = ["onToggle", "open", "children"];
+var SideBarContainer = /*#__PURE__*/react.forwardRef(function SideBarContainer(_ref, ref) {
+  var onToggleCallback = _ref.onToggle,
+      _ref$open = _ref.open,
+      open = _ref$open === void 0 ? false : _ref$open,
+      children = _ref.children,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+
+  var _useSideBar = useSideBar(),
+      isOpen = _useSideBar.isOpen,
+      setIsOpen = _useSideBar.setIsOpen,
+      onToggle = _useSideBar.onToggle,
+      setOnToggle = _useSideBar.setOnToggle;
+
+  react.useEffect(function () {
+    if (onToggle === null && onToggleCallback) {
+      setOnToggle(onToggleCallback);
+    }
+  }, [onToggle, onToggleCallback, setOnToggle]);
+  react.useEffect(function () {
+    setIsOpen(open); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return /*#__PURE__*/jsxRuntime.jsx(GridContainer, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+    open: isOpen,
+    ref: ref,
+    children: children
+  }));
+});
+var GridContainer = styled__default["default"].div.withConfig({
+  displayName: "SideBar__GridContainer",
+  componentId: "sc-a84pkc-0"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      open = _ref2.open;
+  return styled.css(["box-sizing:content-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:hidden;width:", ";min-width:", ";"], edsUtils.bordersTemplate(theme.border), theme.background, open ? theme.maxWidth : theme.minWidth, open ? theme.maxWidth : theme.minWidth);
+});
+var SideBar$1 = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
+  var onToggle = _ref3.onToggle,
+      _ref3$open = _ref3.open,
+      open = _ref3$open === void 0 ? false : _ref3$open,
+      children = _ref3.children,
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded2);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = edsUtils.useToken({
+    density: density
+  }, sidebar);
+
+  var props = _objectSpread__default["default"]({
+    onToggle: onToggle,
+    open: open,
+    children: children
+  }, rest);
+
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(SideBarProvider, {
+      children: /*#__PURE__*/jsxRuntime.jsx(SideBarContainer, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
+        ref: ref
+      }))
+    })
+  });
+});
+SideBar$1.displayName = 'SideBar';
+
+var _excluded$3 = ["icon", "label", "active", "onClick", "as"];
+var _tokens$entities$side = sidebar.entities.sidebarItem,
+    itemTextColor = _tokens$entities$side.typography.color,
+    iconActive = _tokens$entities$side.states.active.typography.color;
+var Container = styled__default["default"].a.withConfig({
+  displayName: "SidebarLink__Container",
+  componentId: "sc-gbehcj-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+      $active = _ref.$active;
+  var minWidth = theme.minWidth,
+      _theme$entities$sideb = theme.entities.sidebarItem,
+      minHeight = _theme$entities$sideb.minHeight,
+      border = _theme$entities$sideb.border,
+      _theme$entities$sideb2 = _theme$entities$sideb.states,
+      menuActiveBackground = _theme$entities$sideb2.active.background,
+      menuHoverBackground = _theme$entities$sideb2.hover.background,
+      focus = _theme$entities$sideb2.focus,
+      _theme$entities$sideb3 = _theme$entities$sideb2.disabled,
+      menuDisabledBackground = _theme$entities$sideb3.background,
+      menuDisabledText = _theme$entities$sideb3.typography.color;
+  return styled.css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;place-items:center;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'none', minWidth, edsUtils.bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, edsUtils.outlineTemplate(focus.outline));
+});
+var ItemText = styled__default["default"](Typography).withConfig({
+  displayName: "SidebarLink__ItemText",
+  componentId: "sc-gbehcj-1"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      $active = _ref2.$active;
+  var _theme$entities$sideb4 = theme.entities.sidebarItem,
+      itemTextColor = _theme$entities$sideb4.typography.color,
+      itemActiveTextColor = _theme$entities$sideb4.states.active.typography.color;
+  return styled.css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $active ? itemActiveTextColor : itemTextColor);
+});
+var Tooltip = styled__default["default"](Tooltip$1).withConfig({
+  displayName: "SidebarLink__Tooltip",
+  componentId: "sc-gbehcj-2"
+})(["text-transform:capitalize;"]);
+var SidebarLink = /*#__PURE__*/react.forwardRef(function SidebarLink(_ref3, ref) {
+  var icon = _ref3.icon,
+      label = _ref3.label,
+      active = _ref3.active,
+      onClick = _ref3.onClick,
+      _ref3$as = _ref3.as,
+      as = _ref3$as === void 0 ? 'a' : _ref3$as,
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$3);
+
+  var _useSideBar = useSideBar(),
+      isOpen = _useSideBar.isOpen;
+
+  var getIconColor = function getIconColor() {
+    return active ? iconActive : itemTextColor;
+  };
+
+  if (isOpen) {
+    return /*#__PURE__*/jsxRuntime.jsxs(Container, _objectSpread__default["default"](_objectSpread__default["default"]({
+      as: as,
+      tabIndex: 0,
+      $active: active,
+      onClick: onClick,
+      ref: ref
+    }, rest), {}, {
+      children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        data: icon,
+        color: getIconColor()
+      }), /*#__PURE__*/jsxRuntime.jsx(ItemText, {
+        variant: "cell_text",
+        group: "table",
+        $active: active,
+        children: label
+      })]
+    }));
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+    title: label,
+    placement: "right",
+    children: /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread__default["default"](_objectSpread__default["default"]({
+      tabIndex: 0,
+      as: as,
+      $active: active,
+      onClick: onClick,
+      ref: ref
+    }, rest), {}, {
+      children: icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        data: icon,
+        color: getIconColor()
+      })
+    }))
+  });
+});
+SidebarLink.displayName = 'SidebarLink';
+
+var _excluded$2 = ["children"];
+var StyledSideBarContent = styled__default["default"].div.withConfig({
+  displayName: "SideBarContent__StyledSideBarContent",
+  componentId: "sc-kq9ra8-0"
+})(function () {
+  return styled.css(["grid-area:content;"]);
+});
+var SideBarContent = /*#__PURE__*/react.forwardRef(function SideBarContent(_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$2);
+
+  var props = _objectSpread__default["default"]({
+    ref: ref
+  }, rest);
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSideBarContent, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
+    children: children
+  }));
+});
+
+var _excluded$1 = ["children"];
+var StyledSideBarFooter = styled__default["default"].div.withConfig({
+  displayName: "SideBarFooter__StyledSideBarFooter",
+  componentId: "sc-1hsu72u-0"
+})(function () {
+  return styled.css(["grid-area:footer;"]);
+});
+var SideBarFooter = /*#__PURE__*/react.forwardRef(function SideBarFooter(_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+
+  var props = _objectSpread__default["default"]({
+    ref: ref
+  }, rest);
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSideBarFooter, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
+    children: children
+  }));
+});
+
+var iconColor = sidebar.entities.toggleOpen.typography.color;
+var ToggleContainer = styled__default["default"].div.withConfig({
+  displayName: "SideBarToggle__ToggleContainer",
+  componentId: "sc-1w5e44y-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  var minWidth = theme.minWidth,
+      _theme$entities$toggl = theme.entities.toggleOpen.spacings,
+      top = _theme$entities$toggl.top,
+      bottom = _theme$entities$toggl.bottom;
+  return styled.css(["width:", ";display:grid;place-items:center;margin-block-start:", ";margin-block-end:", ";"], minWidth, top, bottom);
+});
+var SideBarToggle = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2, ref) {
+  var rest = _extends__default["default"]({}, _ref2);
+
+  var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+    ref: ref
+  });
+
+  var _useSideBar = useSideBar(),
+      isOpen = _useSideBar.isOpen,
+      setIsOpen = _useSideBar.setIsOpen;
+
+  return /*#__PURE__*/jsxRuntime.jsx(ToggleContainer, _objectSpread__default["default"](_objectSpread__default["default"]({
+    open: isOpen
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
+      title: isOpen ? 'Collapse' : 'Expand',
+      placement: "right",
+      children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+        variant: "ghost_icon",
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          size: 24,
+          data: isOpen ? edsIcons.collapse : edsIcons.expand,
+          color: iconColor
+        })
+      })
+    })
+  }));
+});
+
+var _excluded = ["label", "icon", "style", "className"];
+var primaryWhite = sidebar.entities.actionButton.typography.color;
+var MenuButtonContainer = styled__default["default"].div.withConfig({
+  displayName: "SideBarButton__MenuButtonContainer",
+  componentId: "sc-15xlkyo-0"
+})(function (_ref) {
+  var open = _ref.open,
+      theme = _ref.theme;
+  var _theme$entities$actio = theme.entities.actionButton.spacings,
+      right = _theme$entities$actio.right,
+      left = _theme$entities$actio.left,
+      top = _theme$entities$actio.top,
+      bottom = _theme$entities$actio.bottom;
+  return styled.css(["display:", ";grid-template-columns:", " 1fr ", ";justify-content:center;align-items:center;margin-block-start:", ";margin-block-end:", ";box-sizing:border-box;"], open ? 'grid' : 'flex', left, right, top, bottom);
+});
+var ExtendedButton = styled__default["default"](Button).withConfig({
+  displayName: "SideBarButton__ExtendedButton",
+  componentId: "sc-15xlkyo-1"
+})(function () {
+  return styled.css(["height:40px;grid-column:2;width:fit-content;"]);
+});
+var SideBarButton = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2, ref) {
+  var label = _ref2.label,
+      icon = _ref2.icon,
+      style = _ref2.style,
+      className = _ref2.className,
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded);
+
+  var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+    ref: ref
+  });
+
+  var styleProps = {
+    style: style,
+    className: className
+  };
+
+  var _useSideBar = useSideBar(),
+      isOpen = _useSideBar.isOpen;
+
+  if (isOpen) {
+    return /*#__PURE__*/jsxRuntime.jsx(MenuButtonContainer, _objectSpread__default["default"](_objectSpread__default["default"]({
+      open: isOpen
+    }, styleProps), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(ExtendedButton, _objectSpread__default["default"](_objectSpread__default["default"]({
+        open: true,
+        variant: "contained"
+      }, props), {}, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          data: icon,
+          color: primaryWhite
+        }), " ", label]
+      }))
+    }));
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
+    title: label,
+    placement: "right",
+    children: /*#__PURE__*/jsxRuntime.jsx(MenuButtonContainer, _objectSpread__default["default"](_objectSpread__default["default"]({
+      open: isOpen
+    }, styleProps), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread__default["default"](_objectSpread__default["default"]({
+        variant: "contained_icon"
+      }, props), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          data: icon,
+          color: primaryWhite
+        })
+      }))
+    }))
+  });
+});
+
+var SideBar = SideBar$1;
+SideBar.Link = SidebarLink;
+SideBar.Content = SideBarContent;
+SideBar.Footer = SideBarFooter;
+SideBar.Toggle = SideBarToggle;
+SideBar.Button = SideBarButton;
+SideBar.Link.displayName = 'SideBar.Link';
+SideBar.Content.displayName = 'SideBar.Content';
+SideBar.Footer.displayName = 'SideBar.Footer';
+SideBar.Toggle.displayName = 'SideBar.Toggle';
+SideBar.Button.displayName = 'SideBar.Button';
+
 exports.Accordion = Accordion;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
@@ -9563,6 +10048,7 @@ exports.Progress = Progress;
 exports.Radio = Radio;
 exports.Scrim = Scrim;
 exports.Search = Search;
+exports.SideBar = SideBar;
 exports.SideSheet = SideSheet;
 exports.SingleSelect = SingleSelect;
 exports.Slider = Slider;
@@ -9573,7 +10059,8 @@ exports.Table = Table;
 exports.TableOfContents = TableOfContents;
 exports.Tabs = Tabs;
 exports.TextField = TextField;
-exports.Tooltip = Tooltip;
+exports.Tooltip = Tooltip$1;
 exports.TopBar = TopBar;
 exports.Typography = Typography;
 exports.useEds = useEds;
+exports.useSideBar = useSideBar;