@equinor/eds-core-react 0.13.1 → 0.14.1

package/dist/core-react.cjs.js

@@ -362,6 +362,17 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 function __rest(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -2181,6 +2192,11 @@ var shape$3 = {
         minHeight: '24px',
         minWidth: '2px',
         borderRadius: ''
+      },
+      circle: {
+        minHeight: '24px',
+        minWidth: '24px',
+        borderRadius: '100px'
       }
     }
   },
@@ -2253,7 +2269,7 @@ var spacings$7 = {
     xx_small: '2px'
   }
 };
-var typography$i = {
+var typography$j = {
   heading: {
     h1_bold: {
       color: 'rgba(61, 61, 61, 1)',
@@ -2388,7 +2404,7 @@ var typography$i = {
       color: 'rgba(61, 61, 61, 1)',
       fontFamily: 'Equinor',
       fontSize: '1.000rem',
-      fontWeight: 700,
+      fontWeight: 400,
       letterSpacing: '0.013em',
       lineHeight: '1.000em',
       textAlign: 'left'
@@ -2598,6 +2614,54 @@ var typography$i = {
       textAlign: 'left'
     }
   },
+  _modes: {
+    compact: {
+      table: {
+        cell_header: {
+          color: 'rgba(0, 0, 0, 1)',
+          fontFamily: 'Equinor',
+          fontSize: '0.875rem',
+          fontWeight: 700,
+          lineHeight: '1.143em',
+          textAlign: 'left'
+        },
+        cell_text: {
+          color: 'rgba(0, 0, 0, 1)',
+          fontFamily: 'Equinor',
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          lineHeight: '1.143em',
+          textAlign: 'left'
+        },
+        cell_text_bold: {
+          color: 'rgba(0, 0, 0, 1)',
+          fontFamily: 'Equinor',
+          fontSize: '0.875rem',
+          fontWeight: 700,
+          lineHeight: '1.143em',
+          textAlign: 'left'
+        },
+        cell_text_link: {
+          color: 'rgba(0, 0, 0, 1)',
+          fontFamily: 'Equinor',
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          lineHeight: '1.143em',
+          textDecoration: 'underline',
+          textAlign: 'left'
+        },
+        cell_numeric_monospaced: {
+          fontFeature: "'tnum' on,'lnum' on",
+          color: 'rgba(0, 0, 0, 1)',
+          fontFamily: 'Equinor',
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          lineHeight: '1.143em',
+          textAlign: 'left'
+        }
+      }
+    }
+  },
   ui: {
     tooltip: {
       color: 'rgba(61, 61, 61, 1)',
@@ -2648,7 +2712,7 @@ var tokens$6 = {
   interactions: interactions,
   shape: shape$3,
   spacings: spacings$7,
-  typography: typography$i
+  typography: typography$j
 };
 
 var buttonTypography = tokens$6.typography.navigation.button,
@@ -2663,9 +2727,9 @@ var buttonTypography = tokens$6.typography.navigation.button,
     buttonBorderRadius$2 = _tokens$shape$button.borderRadius,
     compactButtonHeight = _tokens$shape$2._modes.compact.button.minHeight,
     outline = tokens$6.interactions.focused,
-    _tokens$clickbounds$1 = tokens$6.clickbounds,
-    clicboundHeight$1 = _tokens$clickbounds$1.default__base,
-    compactClickboundHeight$1 = _tokens$clickbounds$1.compact__standard;
+    _tokens$clickbounds$3 = tokens$6.clickbounds,
+    clicboundHeight$1 = _tokens$clickbounds$3.default__base,
+    compactClickboundHeight$1 = _tokens$clickbounds$3.compact__standard;
 var button = {
   background: 'transparent',
   height: buttonHeight,
@@ -3172,9 +3236,9 @@ var _tokens$colors$intera$g = tokens$6.colors.interactive,
     dangerColor = _tokens$colors$intera$g.danger__resting.rgba,
     dangerHoverColor = _tokens$colors$intera$g.danger__hover.rgba,
     dangerHoverAltColor = _tokens$colors$intera$g.danger__highlight.rgba,
-    _tokens$clickbounds = tokens$6.clickbounds,
-    clicboundHeight = _tokens$clickbounds.default__base,
-    compactClickboundHeight = _tokens$clickbounds.compact__standard,
+    _tokens$clickbounds$2 = tokens$6.clickbounds,
+    clicboundHeight = _tokens$clickbounds$2.default__base,
+    compactClickboundHeight = _tokens$clickbounds$2.compact__standard,
     shape$2 = tokens$6.shape;
 var primary$6 = mergeDeepRight(button, {
   height: shape$2.icon_button.minHeight,
@@ -3211,6 +3275,11 @@ var primary$6 = mergeDeepRight(button, {
       border: {
         color: 'transparent'
       }
+    },
+    focus: {
+      outline: {
+        offset: '0px'
+      }
     }
   },
   modes: {
@@ -3254,7 +3323,7 @@ var danger$2 = mergeDeepRight(primary$6, {
   }
 });
 
-var token$7 = {
+var token$6 = {
   primary: {
     contained: primary$9,
     outlined: primary$8,
@@ -3399,6 +3468,15 @@ var spacingsTemplate = function spacingsTemplate(_ref) {
   });
 };
 
+var joinHandlers = function joinHandlers(handler1, handler2) {
+  var callback = function callback(event) {
+    handler1 && handler1(event);
+    handler2 && handler2(event);
+  };
+
+  return callback;
+};
+
 var setReactInputValue = function setReactInputValue(input, value) {
   var previousValue = input.value;
   input.value = value;
@@ -5749,7 +5827,7 @@ var useId = function useId(idOverride, type) {
     if (defaultId == null) {
       setDefaultId("eds-".concat(type ? type + "-" : '').concat(Math.round(Math.random() * 1e5)));
     }
-  }, [defaultId]);
+  }, [defaultId, type]);
   return id;
 };
 
@@ -5816,6 +5894,15 @@ var useToken = function useToken(options, token) {
   }, [options, token]);
 };
 
+var useHideBodyScroll = function useHideBodyScroll(overflowState) {
+  React.useEffect(function () {
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = overflowState;
+    };
+  }, []);
+};
+
 var FullWidthCenterContent = styled__default['default'].span.withConfig({
   displayName: "InnerFullWidth__FullWidthCenterContent",
   componentId: "sc-qeawkb-0"
@@ -5901,14 +5988,14 @@ var getVariant = function getVariant(tokenSet, variant) {
 var getToken$1 = function getToken(variant, color) {
   switch (color) {
     case 'danger':
-      return getVariant(token$7.danger, variant);
+      return getVariant(token$6.danger, variant);
 
     case 'secondary':
-      return getVariant(token$7.secondary, variant);
+      return getVariant(token$6.secondary, variant);
 
     case 'primary':
     default:
-      return getVariant(token$7.primary, variant);
+      return getVariant(token$6.primary, variant);
   }
 };
 
@@ -5929,7 +6016,7 @@ var ButtonBase = styled__default['default'].button.withConfig({
   var focus = states.focus,
       hover = states.hover,
       disabled = states.disabled;
-  return styled.css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}&:hover{background:", ";color:", ";", "}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", " ", " &:hover{background:", ";}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), (_a = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _a === void 0 ? void 0 : _a.top, (_b = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _b === void 0 ? void 0 : _b.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_c = hover.typography) === null || _c === void 0 ? void 0 : _c.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
+  return styled.css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), (_a = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _a === void 0 ? void 0 : _a.top, (_b = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _b === void 0 ? void 0 : _b.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_c = hover.typography) === null || _c === void 0 ? void 0 : _c.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
 var Button = /*#__PURE__*/React.forwardRef(function Button(_a, ref) {
   var _a$color = _a.color,
@@ -5951,7 +6038,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_a, ref) {
 
   var token = useToken({
     density: density
-  }, getToken$1(variant, color))();
+  }, getToken$1(variant, color));
   var as = href && !disabled ? 'a' : other.as ? other.as : 'button';
   var type = href || other.as ? undefined : 'button';
   tabIndex = disabled ? -1 : tabIndex;
@@ -5976,10 +6063,10 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_a, ref) {
   }), void 0);
 });
 
-var typography$h = tokens$6.typography,
+var typography$i = tokens$6.typography,
     colorsToken = tokens$6.colors;
-var heading = typography$h.heading,
-    paragraph$2 = typography$h.paragraph;
+var heading = typography$i.heading,
+    paragraph$2 = typography$i.paragraph;
 var _colorsToken$interact = colorsToken.interactive,
     primary$5 = _colorsToken$interact.primary__resting.rgba,
     secondary = _colorsToken$interact.secondary__resting.rgba,
@@ -6042,7 +6129,7 @@ var findTypography = function findTypography(variantName, group) {
     return quickVariants[variantName];
   }
 
-  return typography$h[group][variantName];
+  return typography$i[group][variantName];
 };
 
 var findColor = function findColor() {
@@ -6108,9 +6195,11 @@ var Typography = /*#__PURE__*/React.forwardRef(function Typography(_a, ref) {
   }), void 0);
 });
 
-var _tokens$typography$ta = tokens$6.typography.table,
+var _tokens$typography$2 = tokens$6.typography,
+    _tokens$typography$ta = _tokens$typography$2.table,
     cellTypography$1 = _tokens$typography$ta.cell_text,
     cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
+    compactTypography$1 = _tokens$typography$2._modes.compact,
     _tokens$colors$h = tokens$6.colors,
     typographyColor$1 = _tokens$colors$h.text.static_icons__default.rgba,
     borderColor$4 = _tokens$colors$h.ui.background__medium.rgba,
@@ -6182,33 +6271,45 @@ var tableCell = {
   modes: {
     compact: {
       height: '32px',
-      typography: {
-        lineHeight: '1rem'
+      typography: Object.assign(Object.assign({}, compactTypography$1.table.cell_text), {
+        color: typographyColor$1
+      })
+    }
+  },
+  validation: {
+    error: {
+      background: errorColor$1
+    }
+  },
+  variants: {
+    numeric: {
+      typography: Object.assign(Object.assign({}, cellNumericTypography), {
+        color: typographyColor$1
+      }),
+      modes: {
+        compact: {
+          typography: Object.assign(Object.assign({}, compactTypography$1.table.cell_numeric_monospaced), {
+            color: typographyColor$1
+          })
+        }
       }
     }
   }
 };
-var validation = {
-  error: {
-    background: errorColor$1
-  }
-};
-var variants$2 = {
-  numeric: {
-    typography: Object.assign(Object.assign({}, cellNumericTypography), {
-      color: typographyColor$1
-    })
+var applyVariant = function applyVariant(variant, token) {
+  switch (variant) {
+    case 'numeric':
+      return mergeDeepRight(token, token.variants.numeric);
+
+    default:
+      return token;
   }
 };
-var token$6 = Object.assign(Object.assign({}, tableCell), {
-  validation: validation,
-  variants: variants$2
-});
 
 var TableBase$1 = styled__default['default'].table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
-})(["border-spacing:0;background:", ";"], token$6.background);
+})(["border-spacing:0;background:", ";"], tableCell.background);
 var Table$1 = /*#__PURE__*/React.forwardRef(function Table(_a, ref) {
   var children = _a.children,
       props = __rest(_a, ["children"]);
@@ -6246,18 +6347,6 @@ var Body = /*#__PURE__*/React.forwardRef(function Body(_a, ref) {
   }), void 0);
 });
 
-var applyMutations = function applyMutations(variant, token) {
-  switch (variant) {
-    case 'numeric':
-      return Object.assign(Object.assign({}, token), {
-        typography: Object.assign(Object.assign({}, token.typography), token.variants.numeric.typography)
-      });
-
-    default:
-      return token;
-  }
-};
-
 var StyledTableCell$1 = styled__default['default'].td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
@@ -6286,7 +6375,7 @@ var TableDataCell = /*#__PURE__*/React.forwardRef(function TableDataCell(_a, ref
 
   var token = useToken({
     density: density
-  }, applyMutations(variant, token$6))();
+  }, applyVariant(variant, tableCell));
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
@@ -6298,7 +6387,9 @@ var TableDataCell = /*#__PURE__*/React.forwardRef(function TableDataCell(_a, ref
   }), void 0);
 });
 
-var cellTypography = tokens$6.typography.table.cell_header,
+var _tokens$typography$1 = tokens$6.typography,
+    cellTypography = _tokens$typography$1.table.cell_header,
+    compactTypography = _tokens$typography$1._modes.compact,
     _tokens$colors$g = tokens$6.colors,
     typographyColor = _tokens$colors$g.text.static_icons__default.rgba,
     borderColor$3 = _tokens$colors$g.ui.background__medium.rgba,
@@ -6371,9 +6462,7 @@ var token$5 = {
   modes: {
     compact: {
       height: '32px',
-      typography: {
-        lineHeight: '1rem'
-      }
+      typography: compactTypography.table.cell_header
     }
   }
 };
@@ -6417,7 +6506,7 @@ var TableHeaderCell = /*#__PURE__*/React.forwardRef(function TableHeaderCell(_a,
 
   var token = useToken({
     density: density
-  }, token$5)();
+  }, token$5);
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
@@ -6521,8 +6610,10 @@ var StyledRow = styled__default['default'].tr.withConfig({
 
   return {
     background: active ? (_a = token$3.states.active) === null || _a === void 0 ? void 0 : _a.background : null,
-    ':hover': {
-      background: (_b = token$3.states.hover) === null || _b === void 0 ? void 0 : _b.background
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: (_b = token$3.states.hover) === null || _b === void 0 ? void 0 : _b.background
+      }
     }
   };
 });
@@ -6569,9 +6660,9 @@ var _tokens$colors$ui$5 = tokens$6.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$c = tokens$6.spacings.comfortable,
-    spacingSmall$4 = _tokens$spacings$comf$c.small,
-    spacingMedium$8 = _tokens$spacings$comf$c.medium;
+    _tokens$spacings$comf$d = tokens$6.spacings.comfortable,
+    spacingSmall$4 = _tokens$spacings$comf$d.small,
+    spacingMedium$8 = _tokens$spacings$comf$d.medium;
 var dividerHeight = 1;
 
 var reduceByValue = function reduceByValue(subtractValue) {
@@ -6598,7 +6689,7 @@ var divider$1 = {
     background: mediumColor
   }
 };
-var small$8 = Object.assign(Object.assign({}, baseDivider$1), {
+var small$7 = Object.assign(Object.assign({}, baseDivider$1), {
   spacings: {
     top: spacingSmall$4,
     bottom: reduceValueByDividerHeight(spacingSmall$4)
@@ -6615,7 +6706,7 @@ var tokens$5 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	baseDivider: baseDivider$1,
 	divider: divider$1,
-	small: small$8,
+	small: small$7,
 	medium: medium$3
 });
 
@@ -6709,21 +6800,21 @@ var _tokens$colors$e = tokens$6.colors,
     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$b = tokens$6.spacings.comfortable,
-    small$7 = _tokens$spacings$comf$b.small,
-    x_small$4 = _tokens$spacings$comf$b.x_small,
-    typography$g = tokens$6.typography,
+    _tokens$spacings$comf$c = tokens$6.spacings.comfortable,
+    small$6 = _tokens$spacings$comf$c.small,
+    x_small$5 = _tokens$spacings$comf$c.x_small,
+    typography$h = tokens$6.typography,
     shape$1 = tokens$6.shape;
 var input$2 = {
   minHeight: shape$1.straight.minHeight,
   background: background$f,
   spacings: {
-    left: small$7,
-    right: small$7,
+    left: small$6,
+    right: small$6,
     top: '6px',
     bottom: '6px'
   },
-  typography: Object.assign(Object.assign({}, typography$g.input.text), {
+  typography: Object.assign(Object.assign({}, typography$h.input.text), {
     color: static_icons__default.rgba
   }),
   entities: {
@@ -6739,6 +6830,10 @@ var input$2 = {
         color: disabled__text.rgba
       }
     },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none'
+    },
     active: {
       outline: {
         type: 'outline',
@@ -6763,10 +6858,10 @@ var input$2 = {
     compact: {
       minHeight: shape$1._modes.compact.straight.minHeight,
       spacings: {
-        left: x_small$4,
-        right: x_small$4,
-        top: x_small$4,
-        bottom: x_small$4
+        left: x_small$5,
+        right: x_small$5,
+        top: x_small$5,
+        bottom: x_small$5
       }
     }
   }
@@ -6865,8 +6960,9 @@ var StyledInput = styled__default['default'].input.withConfig({
       focusOutline = _theme$states.focus.outline,
       activeOutline = _theme$states.active.outline,
       disabled = _theme$states.disabled,
+      readOnly = _theme$states.readOnly,
       boxShadow = theme.boxShadow;
-  return styled.css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color);
+  return styled.css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
 });
 var Input$5 = /*#__PURE__*/React.forwardRef(function Input(_a, ref) {
   var _a$variant = _a.variant,
@@ -6885,7 +6981,7 @@ var Input$5 = /*#__PURE__*/React.forwardRef(function Input(_a, ref) {
 
   var token = useToken({
     density: density
-  }, inputVariant)();
+  }, inputVariant);
   var inputProps = Object.assign({
     ref: ref,
     type: type,
@@ -6937,36 +7033,36 @@ var input$1 = {
   }
 };
 
-var Variation$3 = function Variation(_ref) {
+var StyledIcon$2 = styled__default['default'].div.withConfig({
+  displayName: "Icon__StyledIcon",
+  componentId: "sc-jr0rqa-0"
+})(function (_ref) {
   var colors = _ref.colors,
       isDisabled = _ref.isDisabled,
-      isFocused = _ref.isFocused;
+      isFocused = _ref.isFocused,
+      size = _ref.size;
   var focusColor = colors.focusColor,
       color = colors.color,
       disabledColor = colors.disabledColor;
+  var fill = color;
 
   if (isDisabled) {
-    return styled.css(["&,svg{fill:", ";}"], disabledColor);
+    fill = disabledColor;
   }
 
   if (isFocused) {
-    return styled.css(["&,svg{fill:", ";}"], focusColor);
+    fill = focusColor;
   }
 
-  return styled.css(["&,svg{fill:", ";}"], color);
-};
-
-var StyledIcon$3 = styled__default['default'].div.withConfig({
-  displayName: "Icon__StyledIcon",
-  componentId: "sc-jr0rqa-0"
-})(["&,svg{width:16px;height:16px;}", ""], Variation$3);
+  return styled.css(["&,svg{fill:", ";width:", "px;height:", "px;}"], fill, size, size);
+});
 var InputIcon = /*#__PURE__*/React.forwardRef(function InputIcon(_a, ref) {
-  var _a$variant = _a.variant,
+  var _a$size = _a.size,
+      size = _a$size === void 0 ? 24 : _a$size,
+      _a$variant = _a.variant,
       variant = _a$variant === void 0 ? 'default' : _a$variant,
       _a$isDisabled = _a.isDisabled,
       isDisabled = _a$isDisabled === void 0 ? false : _a$isDisabled,
-      _a$spacings = _a.spacings,
-      spacings = _a$spacings === void 0 ? input$1.spacings.comfortable : _a$spacings,
       _a$colors = _a.colors,
       colors = _a$colors === void 0 ? {
     color: input$1[variant].color,
@@ -6974,18 +7070,18 @@ var InputIcon = /*#__PURE__*/React.forwardRef(function InputIcon(_a, ref) {
     focusColor: input$1[variant].focusColor
   } : _a$colors,
       children = _a.children,
-      other = __rest(_a, ["variant", "isDisabled", "spacings", "colors", "children"]);
+      other = __rest(_a, ["size", "variant", "isDisabled", "colors", "children"]);
 
   var _useTextField = useTextField(),
       isFocused = _useTextField.isFocused;
 
   var iconProps = {
-    spacings: spacings,
     isDisabled: isDisabled,
     colors: colors,
-    isFocused: isFocused
+    isFocused: isFocused,
+    size: size
   };
-  return jsxRuntime.exports.jsx(StyledIcon$3, Object.assign({
+  return jsxRuntime.exports.jsx(StyledIcon$2, Object.assign({
     ref: ref
   }, iconProps, other, {
     children: children
@@ -6993,10 +7089,10 @@ var InputIcon = /*#__PURE__*/React.forwardRef(function InputIcon(_a, ref) {
 });
 
 var colors$5 = tokens$6.colors,
-    typography$f = tokens$6.typography,
-    _tokens$spacings$comf$a = tokens$6.spacings.comfortable,
-    small$6 = _tokens$spacings$comf$a.small,
-    x_small$3 = _tokens$spacings$comf$a.x_small;
+    typography$g = tokens$6.typography,
+    _tokens$spacings$comf$b = tokens$6.spacings.comfortable,
+    small$5 = _tokens$spacings$comf$b.small,
+    x_small$4 = _tokens$spacings$comf$b.x_small;
 var textfield$1 = {
   background: colors$5.ui.background__light.hex,
   border: {
@@ -7006,9 +7102,9 @@ var textfield$1 = {
     color: colors$5.text.static_icons__tertiary.hex
   },
   spacings: {
-    left: small$6,
-    right: small$6,
-    top: small$6
+    left: small$5,
+    right: small$5,
+    top: small$5
   },
   states: {
     focus: {
@@ -7019,11 +7115,15 @@ var textfield$1 = {
         type: 'outline',
         offset: '0px'
       }
+    },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none'
     }
   },
   entities: {
     unit: {
-      typography: Object.assign(Object.assign({}, typography$f.input.label), {
+      typography: Object.assign(Object.assign({}, typography$g.input.label), {
         color: colors$5.text.static_icons__tertiary.hex
       }),
       states: {
@@ -7038,10 +7138,10 @@ var textfield$1 = {
   modes: {
     compact: {
       spacings: {
-        left: x_small$3,
-        right: x_small$3,
-        top: x_small$3,
-        bottom: x_small$3
+        left: x_small$4,
+        right: x_small$4,
+        top: x_small$4,
+        bottom: x_small$4
       }
     }
   }
@@ -7139,7 +7239,7 @@ var Variation$2 = function Variation(_ref) {
 var StyledTextarea = styled__default['default'].textarea.withConfig({
   displayName: "Textarea__StyledTextarea",
   componentId: "sc-2yjdcc-0"
-})(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}"], input.background, typographyTemplate(input.typography), Variation$2, input.entities.placeholder.typography.color, input.states.disabled.typography.color);
+})(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, typographyTemplate(input.typography), Variation$2, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
 var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(_a, ref) {
   var _a$variant = _a.variant,
       variant = _a$variant === void 0 ? 'default' : _a$variant,
@@ -7216,9 +7316,10 @@ var InputWrapper$2 = styled__default['default'].div.withConfig({
   var inputIcon = _ref2.inputIcon,
       unit = _ref2.unit,
       isDisabled = _ref2.isDisabled,
+      isReadOnly = _ref2.isReadOnly,
       multiline = _ref2.multiline,
       variant = _ref2.variant;
-  return styled.css(["", " ", " ", "  ", ""], Variation$1, (inputIcon || unit) && styled.css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isDisabled && styled.css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && styled.css(["box-shadow:none;"]));
+  return styled.css(["", " ", " ", " ", " ", ""], Variation$1, (inputIcon || unit) && styled.css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && styled.css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && styled.css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && styled.css(["box-shadow:none;"]));
 });
 var Unit = styled__default['default'].span.withConfig({
   displayName: "Field__Unit",
@@ -7244,22 +7345,41 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(_a, ref) {
   var multiline = _a.multiline,
       variant = _a.variant,
       disabled = _a.disabled,
+      readOnly = _a.readOnly,
       type = _a.type,
       unit = _a.unit,
       inputIcon = _a.inputIcon,
       rowsMax = _a.rowsMax,
-      other = __rest(_a, ["multiline", "variant", "disabled", "type", "unit", "inputIcon", "rowsMax"]);
+      onBlur = _a.onBlur,
+      onFocus = _a.onFocus,
+      other = __rest(_a, ["multiline", "variant", "disabled", "readOnly", "type", "unit", "inputIcon", "rowsMax", "onBlur", "onFocus"]);
 
   var _useTextField = useTextField(),
       handleFocus = _useTextField.handleFocus,
       handleBlur = _useTextField.handleBlur,
       isFocused = _useTextField.isFocused;
 
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var iconSize = density === 'compact' ? 16 : 24;
   var actualVariant = variant === 'default' ? 'textfield' : variant;
   var inputVariant = tokens$3[actualVariant];
+
+  var focusHandler = function focusHandler(e) {
+    handleFocus();
+    onFocus && onFocus(e);
+  };
+
+  var blurHandler = function blurHandler(e) {
+    handleBlur();
+    onBlur && onBlur(e);
+  };
+
   var inputWrapperProps = {
     isFocused: isFocused,
     isDisabled: disabled,
+    isReadOnly: readOnly,
     variant: variant,
     token: inputVariant,
     inputIcon: inputIcon,
@@ -7270,20 +7390,17 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(_a, ref) {
     ref: ref,
     type: type,
     disabled: disabled,
-    variant: variant
+    readOnly: readOnly,
+    variant: variant,
+    onBlur: blurHandler,
+    onFocus: focusHandler
   }, other);
   var textareaProps = Object.assign(Object.assign({}, inputProps), {
     rowsMax: rowsMax,
     ref: ref
   });
   return jsxRuntime.exports.jsxs(InputWrapper$2, Object.assign({}, inputWrapperProps, {
-    children: [multiline ? jsxRuntime.exports.jsx(StrippedTextarea, Object.assign({
-      onBlur: handleBlur,
-      onFocus: handleFocus
-    }, textareaProps), void 0) : jsxRuntime.exports.jsx(StrippedInput, Object.assign({
-      onBlur: handleBlur,
-      onFocus: handleFocus
-    }, inputProps), void 0), (inputIcon || unit) && jsxRuntime.exports.jsxs(Adornments, Object.assign({
+    children: [multiline ? jsxRuntime.exports.jsx(StrippedTextarea, Object.assign({}, textareaProps), void 0) : jsxRuntime.exports.jsx(StrippedInput, Object.assign({}, inputProps), void 0), (inputIcon || unit) && jsxRuntime.exports.jsxs(Adornments, Object.assign({
       multiline: multiline
     }, {
       children: [unit && jsxRuntime.exports.jsx(Unit, Object.assign({
@@ -7292,7 +7409,8 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(_a, ref) {
         children: unit
       }), void 0), inputIcon && jsxRuntime.exports.jsx(InputIcon, Object.assign({
         isDisabled: disabled,
-        variant: variant
+        variant: variant,
+        size: iconSize
       }, {
         children: inputIcon
       }), void 0)]
@@ -7302,10 +7420,10 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(_a, ref) {
 
 var colors$4 = tokens$6.colors,
     comfortable$5 = tokens$6.spacings.comfortable,
-    typography$e = tokens$6.typography;
+    typography$f = tokens$6.typography;
 var label = {
   background: colors$4.ui.background__light.rgba,
-  typography: Object.assign(Object.assign({}, typography$e.input.label), {
+  typography: Object.assign(Object.assign({}, typography$f.input.label), {
     color: colors$4.text.static_icons__tertiary.rgba
   }),
   spacings: {
@@ -7359,10 +7477,10 @@ var Label$1 = /*#__PURE__*/React.forwardRef(function Label(props, ref) {
 
 var colors$3 = tokens$6.colors,
     comfortable$4 = tokens$6.spacings.comfortable,
-    typography$d = tokens$6.typography;
+    typography$e = tokens$6.typography;
 var helperText = {
   background: colors$3.ui.background__light.hex,
-  typography: typography$d.input.helper,
+  typography: typography$e.input.helper,
   spacings: {
     comfortable: {
       left: comfortable$4.small,
@@ -7437,10 +7555,6 @@ var Text$1 = styled__default['default'].p.withConfig({
   var spacings = _ref3.spacings;
   return spacings.left;
 }, Variation);
-var StyledIcon$2 = styled__default['default'](InputIcon).withConfig({
-  displayName: "HelperText__StyledIcon",
-  componentId: "sc-1kfkyxg-2"
-})([""]);
 var TextfieldHelperText = /*#__PURE__*/React.forwardRef(function TextfieldHelperText(_a, ref) {
   var helperText$1 = _a.helperText,
       icon = _a.icon,
@@ -7465,11 +7579,10 @@ var TextfieldHelperText = /*#__PURE__*/React.forwardRef(function TextfieldHelper
   }, rest, {
     spacings: spacings
   }, {
-    children: [icon && jsxRuntime.exports.jsx(StyledIcon$2, Object.assign({
+    children: [icon && jsxRuntime.exports.jsx(InputIcon, Object.assign({
       isDisabled: isDisabled,
-      spacings: spacings,
       colors: colors,
-      isInputIcon: false
+      size: 16
     }, {
       children: icon
     }), void 0), jsxRuntime.exports.jsx(Text$1, Object.assign({
@@ -7541,7 +7654,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(_a, ref) {
 
   var token = useToken({
     density: density
-  }, textfield$1)();
+  }, textfield$1);
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
@@ -7679,14 +7792,14 @@ var list = {
   typography: paragraph$1.body_short
 };
 
-var typography$c = list.typography;
+var typography$d = list.typography;
 var StyledList$1 = styled__default['default'].ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-v9d2hy-0"
 })(["", " ", ""], function (_ref) {
   var as = _ref.as;
   return as === 'ol' ? styled.css(["& ol{list-style-type:lower-alpha;}"]) : '';
-}, typographyTemplate(typography$c));
+}, typographyTemplate(typography$d));
 var List$2 = /*#__PURE__*/React.forwardRef(function List(_a, ref) {
   var children = _a.children,
       _a$variant = _a.variant,
@@ -8135,28 +8248,28 @@ var clear = {
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'
+  svgPathData: 'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'
 };
 var search$1 = {
   name: 'search',
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M14.966 14.255h.79l4.99 5-1.49 1.49-5-4.99v-.79l-.27-.28a6.471 6.471 0 01-4.23 1.57 6.5 6.5 0 116.5-6.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5z'
+  svgPathData: 'M14.966 14.255h.79l4.99 5-1.49 1.49-5-4.99v-.79l-.27-.28a6.471 6.471 0 0 1-4.23 1.57 6.5 6.5 0 1 1 6.5-6.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5z'
 };
 var close = {
   name: 'close',
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'
+  svgPathData: 'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'
 };
 var checkbox$1 = {
   name: 'checkbox',
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M5 3h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2zm4.3 13.29c.39.39 1.02.39 1.41 0l7.58-7.59a.996.996 0 10-1.41-1.41L10 14.17l-2.88-2.88a.996.996 0 10-1.41 1.41l3.59 3.59z'
+  svgPathData: 'M5 3h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2zm4.3 13.29c.39.39 1.02.39 1.41 0l7.58-7.59a.996.996 0 1 0-1.41-1.41L10 14.17l-2.88-2.88a.996.996 0 1 0-1.41 1.41l3.59 3.59z'
 };
 var checkbox_outline = {
   name: 'checkbox_outline',
@@ -8177,7 +8290,7 @@ var radio_button_selected = {
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-5-8a5 5 0 1110 0 5 5 0 01-10 0z'
+  svgPathData: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-5-8a5 5 0 1 1 10 0 5 5 0 0 1-10 0z'
 };
 var radio_button_unselected = {
   name: 'radio_button_unselected',
@@ -8191,45 +8304,45 @@ var arrow_drop_up = {
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M7 14.5l5-5 5 5H7z'
+  svgPathData: 'm7 14.5 5-5 5 5H7z'
 };
 var arrow_drop_down = {
   name: 'arrow_drop_down',
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M7 9.5l5 5 5-5H7z'
+  svgPathData: 'm7 9.5 5 5 5-5H7z'
 };
 var chevron_down = {
   name: 'chevron_down',
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M7.41 8.295l4.59 4.58 4.59-4.58L18 9.705l-6 6-6-6 1.41-1.41z'
+  svgPathData: 'm7.41 8.295 4.59 4.58 4.59-4.58L18 9.705l-6 6-6-6 1.41-1.41z'
 };
 var chevron_left = {
   name: 'chevron_left',
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M15.705 16.59L11.125 12l4.58-4.59L14.295 6l-6 6 6 6 1.41-1.41z'
+  svgPathData: 'M15.705 16.59 11.125 12l4.58-4.59L14.295 6l-6 6 6 6 1.41-1.41z'
 };
 var chevron_right = {
   name: 'chevron_right',
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M8.295 16.59l4.58-4.59-4.58-4.59L9.705 6l6 6-6 6-1.41-1.41z'
+  svgPathData: 'm8.295 16.59 4.58-4.59-4.58-4.59L9.705 6l6 6-6 6-1.41-1.41z'
 };
 var chevron_up = {
   name: 'chevron_up',
   prefix: 'eds',
   height: '24',
   width: '24',
-  svgPathData: 'M7.41 15.705l4.59-4.58 4.59 4.58 1.41-1.41-6-6-6 6 1.41 1.41z'
+  svgPathData: 'm7.41 15.705 4.59-4.58 4.59 4.58 1.41-1.41-6-6-6 6 1.41 1.41z'
 };
 
-var typography$b = tokens$6.typography.ui.accordion_header,
+var typography$c = tokens$6.typography.ui.accordion_header,
     _tokens$colors$d = tokens$6.colors,
     _tokens$colors$ui$4 = _tokens$colors$d.ui,
     backgroundDefault = _tokens$colors$ui$4.background__default.rgba,
@@ -8240,6 +8353,7 @@ var typography$b = tokens$6.typography.ui.accordion_header,
     disabledIconColor$1 = _tokens$colors$intera$b.disabled__fill.rgba,
     disabledColor$2 = _tokens$colors$intera$b.disabled__text.rgba,
     focusOutlineColor$6 = _tokens$colors$intera$b.focus.rgba,
+    defaultIconColor = _tokens$colors$d.text.static_icons__default.rgba,
     mediumSpacing = tokens$6.spacings.comfortable.medium;
 var accordion = {
   border: {
@@ -8260,7 +8374,7 @@ var accordion = {
     header: {
       height: '48px',
       background: backgroundDefault,
-      typography: typography$b,
+      typography: typography$c,
       spacings: {
         left: mediumSpacing,
         right: mediumSpacing
@@ -8276,12 +8390,12 @@ var accordion = {
           }
         },
         disabled: {
-          typography: Object.assign(Object.assign({}, typography$b), {
+          typography: Object.assign(Object.assign({}, typography$c), {
             color: disabledColor$2
           })
         },
         active: {
-          typography: Object.assign(Object.assign({}, typography$b), {
+          typography: Object.assign(Object.assign({}, typography$c), {
             color: activatedColor
           })
         },
@@ -8297,6 +8411,11 @@ var accordion = {
         right: mediumSpacing,
         top: mediumSpacing
       }
+    },
+    icon: {
+      typography: {
+        color: defaultIconColor
+      }
     }
   }
 };
@@ -8325,13 +8444,10 @@ var AccordionHeaderTitle = /*#__PURE__*/React.forwardRef(function AccordionHeade
   }), void 0);
 }); // AccordionHeaderTitle.displayName = 'AccordionHeaderTitle'
 
-Icon$1.add({
-  chevron_down: chevron_down,
-  chevron_up: chevron_up
-});
 var _tokens$entities$6 = accordion.entities,
     header$2 = _tokens$entities$6.header,
-    chevronToken = _tokens$entities$6.chevron;
+    chevronToken = _tokens$entities$6.chevron,
+    iconToken = _tokens$entities$6.icon;
 var StyledAccordionHeader = styled__default['default'].div.attrs(function (_ref) {
   var panelId = _ref.panelId,
       isExpanded = _ref.isExpanded,
@@ -8347,7 +8463,7 @@ var StyledAccordionHeader = styled__default['default'].div.attrs(function (_ref)
 }).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", ""], typographyTemplate(header$2.typography), bordersTemplate(accordion.border), spacingsTemplate(header$2.spacings), outlineTemplate(header$2.states.focus.outline), function (_ref2) {
+})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header$2.typography), bordersTemplate(accordion.border), spacingsTemplate(header$2.spacings), outlineTemplate(header$2.states.focus.outline), function (_ref2) {
   var parentIndex = _ref2.parentIndex;
   return parentIndex === 0 ? null : 'none';
 }, header$2.background, header$2.height, function (_ref3) {
@@ -8358,11 +8474,13 @@ var StyledAccordionHeader = styled__default['default'].div.attrs(function (_ref)
   }) : styled.css({
     color: header$2.typography.color,
     cursor: 'pointer',
-    ':hover': {
-      background: header$2.states.hover.background
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: header$2.states.hover.background
+      }
     }
   });
-});
+}, iconToken.typography.color);
 var StyledIcon$1 = styled__default['default'](Icon$1).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-1"
@@ -8412,8 +8530,8 @@ var AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionHeader(_a,
   };
 
   var chevron = jsxRuntime.exports.jsx(StyledIcon$1, {
-    name: isExpanded ? 'chevron_up' : 'chevron_down',
-    size: 16,
+    data: isExpanded ? chevron_up : chevron_down,
+    size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
   }, "".concat(id, "-icon"));
@@ -8771,7 +8889,7 @@ var StyledTab = styled__default['default'].button.attrs(function (_ref) {
 }).withConfig({
   displayName: "Tab__StyledTab",
   componentId: "sc-scjkct-0"
-})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}&[data-hover],&:hover{color:", ";", "}", " ", ""], tab.height, spacingsTemplate(tab.spacings), function (_ref2) {
+})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), function (_ref2) {
   var active = _ref2.active;
   return active ? tab.states.active.typography.color : tab.typography.color;
 }, tab.background, outlineTemplate(tab.states.focus.outline), function (_ref3) {
@@ -8896,21 +9014,19 @@ var StyledCard = styled__default['default'].div.withConfig({
 }, bordersTemplate(primary$3.border), spacingsTemplate(primary$3.spacings));
 var Card$1 = /*#__PURE__*/React.forwardRef(function Card(_a, ref) {
   var children = _a.children,
-      className = _a.className,
       _a$variant = _a.variant,
       variant = _a$variant === void 0 ? 'default' : _a$variant,
       onClick = _a.onClick,
-      rest = __rest(_a, ["children", "className", "variant", "onClick"]);
+      rest = __rest(_a, ["children", "variant", "onClick"]);
 
   var cursor = onClick ? 'pointer' : 'default';
   var cardVariant = variant === 'default' ? 'primary' : variant;
   var token = tokens$2[cardVariant];
-  var props = Object.assign(Object.assign({}, rest), {
-    className: className,
+  var props = Object.assign({
     ref: ref,
     background: token.background,
     cursor: cursor
-  });
+  }, rest);
   return jsxRuntime.exports.jsx(StyledCard, Object.assign({}, props, {
     onClick: onClick
   }, {
@@ -8921,26 +9037,23 @@ var Card$1 = /*#__PURE__*/React.forwardRef(function Card(_a, ref) {
 var StyledCardActions = styled__default['default'].div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;justify-content:", ";"], function (_ref) {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";"], function (_ref) {
   var justifyContent = _ref.justifyContent;
   return justifyContent;
 });
 var CardActions = /*#__PURE__*/React.forwardRef(function CardActions(_a, ref) {
   var children = _a.children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
       _a$alignRight = _a.alignRight,
       alignRight = _a$alignRight === void 0 ? false : _a$alignRight,
       _a$meta = _a.meta,
       meta = _a$meta === void 0 ? '' : _a$meta,
-      rest = __rest(_a, ["children", "className", "alignRight", "meta"]);
+      rest = __rest(_a, ["children", "alignRight", "meta"]);
 
   var justifyContent = alignRight ? 'flex-end' : 'flex-start';
-  var props = Object.assign(Object.assign({}, rest), {
-    className: className,
+  var props = Object.assign({
     ref: ref,
     justifyContent: justifyContent
-  });
+  }, rest);
   return jsxRuntime.exports.jsxs(StyledCardActions, Object.assign({}, props, {
     children: [children, meta !== '' && jsxRuntime.exports.jsx(Typography, Object.assign({
       variant: "caption"
@@ -8961,14 +9074,11 @@ var StyledCardMedia = styled__default['default'].div.withConfig({
 });
 var CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(_a, ref) {
   var children = _a.children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
       _a$fullWidth = _a.fullWidth,
       fullWidth = _a$fullWidth === void 0 ? false : _a$fullWidth,
-      rest = __rest(_a, ["children", "className", "fullWidth"]);
+      rest = __rest(_a, ["children", "fullWidth"]);
 
   var props = Object.assign(Object.assign({}, rest), {
-    className: className,
     ref: ref,
     fullWidth: fullWidth
   });
@@ -8984,12 +9094,9 @@ var StyledCardHeader = styled__default['default'].div.withConfig({
 })(["display:flex;justify-content:space-between;align-items:center;>:not(:first-child){margin-left:", ";}"], spacings$5.left);
 var CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(_a, ref) {
   var children = _a.children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      rest = __rest(_a, ["children", "className"]);
+      rest = __rest(_a, ["children"]);
 
   var props = Object.assign(Object.assign({}, rest), {
-    className: className,
     ref: ref
   });
   return jsxRuntime.exports.jsx(StyledCardHeader, Object.assign({}, props, {
@@ -9003,12 +9110,9 @@ var StyledCardHeaderTitle = styled__default['default'].div.withConfig({
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
 var CardHeaderTitle = /*#__PURE__*/React.forwardRef(function CardHeaderTitle(_a, ref) {
   var children = _a.children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      rest = __rest(_a, ["children", "className"]);
+      rest = __rest(_a, ["children"]);
 
   var props = Object.assign(Object.assign({}, rest), {
-    className: className,
     ref: ref
   });
   return jsxRuntime.exports.jsx(StyledCardHeaderTitle, Object.assign({}, props, {
@@ -9053,11 +9157,11 @@ var background$d = token$1.background,
     height$3 = token$1.height,
     spacings$4 = token$1.spacings,
     border$4 = token$1.border,
-    typography$a = token$1.typography;
+    typography$b = token$1.typography;
 var StyledTopBar = styled__default['default'].header.withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
-})(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:250;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], height$3, background$d, spacings$4.left, bordersTemplate(border$4), spacingsTemplate(spacings$4), typographyTemplate(typography$a));
+})(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:250;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], height$3, background$d, spacings$4.left, bordersTemplate(border$4), spacingsTemplate(spacings$4), typographyTemplate(typography$b));
 var TopBar$1 = /*#__PURE__*/React.forwardRef(function TopBar(_a, ref) {
   var children = _a.children,
       props = __rest(_a, ["children"]);
@@ -9254,16 +9358,13 @@ var StyledDivider$2 = styled__default['default'](Divider).withConfig({
 })(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
 var Title = /*#__PURE__*/React.forwardRef(function Title(_a, ref) {
   var children = _a.children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      props = __rest(_a, ["children", "className"]);
+      rest = __rest(_a, ["children"]);
 
-  return jsxRuntime.exports.jsxs(React.Fragment, {
+  return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
     children: [jsxRuntime.exports.jsx(StyledTitle, Object.assign({
-      className: className,
       id: "eds-dialog-title",
       ref: ref
-    }, props, {
+    }, rest, {
       children: children
     }), void 0), children && jsxRuntime.exports.jsx(StyledDivider$2, {
       color: "medium",
@@ -9285,19 +9386,18 @@ var StyledDivider$1 = styled__default['default'](Divider).withConfig({
 })(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
 var CustomContent = /*#__PURE__*/React.forwardRef(function CustomContent(_a, ref) {
   var children = _a.children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
       _a$scrollable = _a.scrollable,
       scrollable = _a$scrollable === void 0 ? false : _a$scrollable,
-      rest = __rest(_a, ["children", "className", "scrollable"]);
+      rest = __rest(_a, ["children", "scrollable"]);
 
-  return jsxRuntime.exports.jsxs(React.Fragment, {
+  var props = Object.assign({
+    scrollable: scrollable,
+    ref: ref
+  }, rest);
+  return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
     children: [jsxRuntime.exports.jsx(StyledCustomContent, Object.assign({
-      className: className,
-      scrollable: scrollable,
-      id: "eds-dialog-customcontent",
-      ref: ref
-    }, rest, {
+      id: "eds-dialog-customcontent"
+    }, props, {
       children: children
     }), void 0), children && scrollable && jsxRuntime.exports.jsx(StyledDivider$1, {
       color: "medium",
@@ -9316,8 +9416,8 @@ Dialog.CustomContent.displayName = 'Dialog.CustomContent';
 
 var background$a = tokens$6.colors.ui.background__scrim.rgba;
 var scrim = {
-  width: '100vw',
-  height: '100vh',
+  width: '100%',
+  height: '100%',
   background: background$a
 };
 
@@ -9343,6 +9443,8 @@ var Scrim = /*#__PURE__*/React.forwardRef(function Scrim(_a, ref) {
     isDismissable: isDismissable,
     ref: ref
   });
+  var overflowState = document.body.style.overflow;
+  useHideBodyScroll(overflowState);
   useGlobalKeyPress('Escape', function (e) {
     if (isDismissable && onClose) {
       onClose(e, false);
@@ -9381,27 +9483,31 @@ var _tokens$colors$b = tokens$6.colors,
     focusColor$1 = _tokens$colors$intera$9.focus.rgba,
     labelColor = _tokens$colors$b.text.static_icons__tertiary.rgba,
     borderRadius$5 = tokens$6.shape.corners.borderRadius,
-    _tokens$spacings$comf$9 = tokens$6.spacings.comfortable,
-    small$5 = _tokens$spacings$comf$9.small,
-    x_large = _tokens$spacings$comf$9.x_large,
-    xxx_large = _tokens$spacings$comf$9.xxx_large,
-    _tokens$typography$pa = tokens$6.typography.paragraph.caption,
-    fontSize = _tokens$typography$pa.fontSize,
-    lineHeight = _tokens$typography$pa.lineHeight;
+    _tokens$spacings$comf$a = tokens$6.spacings.comfortable,
+    small$4 = _tokens$spacings$comf$a.small,
+    x_large = _tokens$spacings$comf$a.x_large,
+    xxx_large = _tokens$spacings$comf$a.xxx_large,
+    typography$a = tokens$6.typography;
 var tableOfContents = {
+  typography: Object.assign(Object.assign({}, typography$a.navigation.button), {
+    color: labelColor
+  }),
+  spacings: {
+    top: xxx_large,
+    bottom: x_large
+  },
   entities: {
     icon: {
       background: primaryColor$4,
       spacings: {
-        right: small$5
+        right: small$4
       }
     },
     links: {
       width: 'calc(189px - 36px)',
-      typography: {
-        fontSize: fontSize,
-        lineHeight: lineHeight
-      },
+      typography: Object.assign(Object.assign({}, typography$a.navigation.button), {
+        color: primaryColor$4
+      }),
       spacings: {
         top: '10px',
         bottom: '10px',
@@ -9439,17 +9545,10 @@ var tableOfContents = {
           background: primaryHover$3
         }
       },
-      typography: {
+      typography: Object.assign(Object.assign({}, typography$a.navigation.button), {
         color: primaryHover$3
-      }
+      })
     }
-  },
-  typography: {
-    color: labelColor
-  },
-  spacings: {
-    top: xxx_large,
-    bottom: x_large
   }
 };
 
@@ -9474,11 +9573,9 @@ var TableOfContents$1 = /*#__PURE__*/React.forwardRef(function TableOfContents(_
       sticky = _a$sticky === void 0 ? false : _a$sticky,
       _a$label = _a.label,
       label = _a$label === void 0 ? '' : _a$label,
-      className = _a.className,
-      rest = __rest(_a, ["children", "sticky", "label", "className"]);
+      rest = __rest(_a, ["children", "sticky", "label"]);
 
   return jsxRuntime.exports.jsxs(StyledTableOfContents, Object.assign({
-    className: className,
     ref: ref,
     label: label,
     sticky: sticky
@@ -9491,12 +9588,12 @@ var TableOfContents$1 = /*#__PURE__*/React.forwardRef(function TableOfContents(_
       children: children
     }, void 0)]
   }), void 0);
-}); // TableOfContents.displayName = 'eds-toc'
+});
 
 var StyledLinkItem = styled__default['default'].li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
-})(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}&:hover{", " background:", ";", " svg{fill:", ";}}&:active{outline:none;}}"], typographyTemplate(tableOfContents.entities.links.typography), spacingsTemplate(tableOfContents.entities.links.spacings), tableOfContents.entities.links.typography.lineHeight, tableOfContents.entities.links.width, tableOfContents.entities.icon.background, tableOfContents.entities.icon.spacings.right, tableOfContents.entities.span.maxWidth, outlineTemplate(tableOfContents.states.focus.outline), typographyTemplate(tableOfContents.states.hover.typography), tableOfContents.states.hover.background, bordersTemplate(tableOfContents.states.hover.border), tableOfContents.states.hover.entities.icon.background);
+})(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(tableOfContents.entities.links.typography), spacingsTemplate(tableOfContents.entities.links.spacings), tableOfContents.entities.links.typography.lineHeight, tableOfContents.entities.links.width, tableOfContents.entities.icon.background, tableOfContents.entities.icon.spacings.right, tableOfContents.entities.span.maxWidth, outlineTemplate(tableOfContents.states.focus.outline), typographyTemplate(tableOfContents.states.hover.typography), tableOfContents.states.hover.background, bordersTemplate(tableOfContents.states.hover.border), tableOfContents.states.hover.entities.icon.background);
 var LinkItem = /*#__PURE__*/React.forwardRef(function LinkItem(_a, ref) {
   var children = _a.children,
       props = __rest(_a, ["children"]);
@@ -9515,9 +9612,9 @@ TableOfContents.LinkItem.displayName = 'TableOfContents.LinkItem';
 var _tokens$colors$ui$2 = tokens$6.colors.ui,
     background$8 = _tokens$colors$ui$2.background__default.rgba,
     borderColor = _tokens$colors$ui$2.background__light.rgba,
-    _tokens$spacings$comf$8 = tokens$6.spacings.comfortable,
-    spacingXXS = _tokens$spacings$comf$8.xx_small,
-    spacingMedium$4 = _tokens$spacings$comf$8.medium;
+    _tokens$spacings$comf$9 = tokens$6.spacings.comfortable,
+    spacingXXS = _tokens$spacings$comf$9.xx_small,
+    spacingMedium$4 = _tokens$spacings$comf$9.medium;
 var comfortable$2 = {
   background: background$8,
   spacings: {
@@ -9561,15 +9658,12 @@ var SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet(_a, ref) {
       _a$title = _a.title,
       title = _a$title === void 0 ? '' : _a$title,
       children = _a.children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
       _a$open = _a.open,
       open = _a$open === void 0 ? true : _a$open,
       onClose = _a.onClose,
-      rest = __rest(_a, ["variant", "title", "children", "className", "open", "onClose"]);
+      rest = __rest(_a, ["variant", "title", "children", "open", "onClose"]);
 
   var props = Object.assign(Object.assign({}, rest), {
-    className: className,
     ref: ref,
     width: variants[variant]
   }); // Controller must set open={false} when pressing the close button
@@ -9597,10 +9691,10 @@ var SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet(_a, ref) {
   }), void 0);
 });
 
-var _tokens$spacings$comf$7 = tokens$6.spacings.comfortable,
-    x_small$2 = _tokens$spacings$comf$7.x_small,
-    small$4 = _tokens$spacings$comf$7.small,
-    medium$2 = _tokens$spacings$comf$7.medium,
+var _tokens$spacings$comf$8 = tokens$6.spacings.comfortable,
+    x_small$3 = _tokens$spacings$comf$8.x_small,
+    small$3 = _tokens$spacings$comf$8.small,
+    medium$2 = _tokens$spacings$comf$8.medium,
     chipTypography = tokens$6.typography.ui.chip__badge,
     _tokens$colors$a = tokens$6.colors,
     _tokens$colors$ui$1 = _tokens$colors$a.ui,
@@ -9628,8 +9722,8 @@ var enabled$6 = {
     style: 'solid'
   },
   spacings: {
-    left: x_small$2,
-    right: small$4
+    left: x_small$3,
+    right: small$3
   },
   typography: Object.assign(Object.assign({}, chipTypography), {
     color: primaryColor$3
@@ -9745,9 +9839,9 @@ 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;z-index:10;svg{fill:", ";}&:hover{color:", ";svg{fill:", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$6, height$1, typography$9.color, states$3.hover.typography.color, states$3.hover.typography.color, outlineTemplate(states$3.focus.outline), bordersTemplate(border$2), spacingsTemplate(spacings$2), typographyTemplate(typography$9), function (_ref2) {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$6, height$1, typography$9.color, states$3.hover.typography.color, states$3.hover.typography.color, outlineTemplate(states$3.focus.outline), bordersTemplate(border$2), spacingsTemplate(spacings$2), typographyTemplate(typography$9), function (_ref2) {
   var clickable = _ref2.clickable;
-  return clickable && styled.css(["&:hover{cursor:pointer;}"]);
+  return clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
 }, function (_ref3) {
   var variant = _ref3.variant;
 
@@ -9756,14 +9850,14 @@ var StyledChips = styled__default['default'].div.attrs(function (_ref) {
       return styled.css(["background:", ";"], states$3.active.background);
 
     case 'error':
-      return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";&:hover{border-color:", ";color:", ";svg{fill:", ";}}"], error.background, error.typography.color, error.entities.icon.typography.color, bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
+      return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
 
     default:
       return '';
   }
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}"], background$6, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color);
+  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$6, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color);
 }, function (_ref5) {
   var deletable = _ref5.deletable;
   return deletable && styled.css(["padding-right:4px;"]);
@@ -9903,7 +9997,7 @@ var _tokens$colors$9 = tokens$6.colors,
     primaryHoverAlt$4 = _tokens$colors$intera$7.primary__hover_alt.rgba,
     primaryColor$2 = _tokens$colors$intera$7.primary__resting.rgba,
     placeholderColor = _tokens$colors$9.text.static_icons__tertiary.rgba,
-    small$3 = tokens$6.spacings.comfortable.small,
+    small$2 = tokens$6.spacings.comfortable.small,
     typography$8 = tokens$6.typography.input.text;
 var search = {
   background: background$5,
@@ -9916,8 +10010,8 @@ var search = {
     height: '48px'
   },
   spacings: {
-    left: small$3,
-    right: small$3,
+    left: small$2,
+    right: small$2,
     top: '6px',
     bottom: '6px'
   },
@@ -9966,11 +10060,6 @@ var search = {
   }
 };
 
-var icons$1 = {
-  search: search$1,
-  close: close
-};
-Icon$1.add(icons$1);
 var height = search.height,
     spacings$1 = search.spacings,
     background$4 = search.background,
@@ -9989,7 +10078,7 @@ var Container$2 = styled__default['default'].span.withConfig({
   return isFocused && styled.css(["", ""], bordersTemplate(states$2.focus.border));
 }, placeholder.typography.color, function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled ? styled.css(["cursor:not-allowed;"]) : styled.css(["&:hover{", " cursor:text;}"], bordersTemplate(states$2.focus.border));
+  return disabled ? styled.css(["cursor:not-allowed;"]) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states$2.focus.border));
 }, clickbound.offset, clickbound.height);
 var Input$4 = styled__default['default'].input.withConfig({
   displayName: "Search__Input",
@@ -10003,7 +10092,7 @@ var InsideButton = styled__default['default'].div.withConfig({
   componentId: "sc-v8l23u-2"
 })(["", " display:flex;align-items:center;visibility:hidden;z-index:1;padding:4px;height:16px;width:16px;position:relative;&::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}", ""], bordersTemplate(icon$1.border), icon$1.clickbound.offset.top, icon$1.clickbound.height, function (_ref4) {
   var isActive = _ref4.isActive;
-  return isActive && styled.css(["visibility:visible;&:hover{cursor:pointer;background:", ";}"], icon$1.states.hover.background);
+  return isActive && styled.css(["visibility:visible;@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], icon$1.states.hover.background);
 });
 var Search = /*#__PURE__*/React.forwardRef(function Search(_a, ref) {
   var _onChange = _a.onChange,
@@ -10097,7 +10186,7 @@ var Search = /*#__PURE__*/React.forwardRef(function Search(_a, ref) {
   };
 
   var isFocused = state.isFocused;
-  var size = 16;
+  var size = 24;
   var containerProps = {
     isFocused: isFocused,
     className: className,
@@ -10148,14 +10237,14 @@ var Search = /*#__PURE__*/React.forwardRef(function Search(_a, ref) {
   };
   return jsxRuntime.exports.jsxs(Container$2, Object.assign({}, containerProps, {
     children: [jsxRuntime.exports.jsx(Icon$1, {
-      name: "search",
+      data: search$1,
       "aria-hidden": true,
       size: size
     }, void 0), jsxRuntime.exports.jsx(Input$4, Object.assign({}, inputProps), void 0), jsxRuntime.exports.jsx(InsideButton, Object.assign({}, clearButtonProps, {
       "aria-label": "Clear search"
     }, {
       children: jsxRuntime.exports.jsx(Icon$1, {
-        name: "close",
+        data: close,
         size: size
       }, void 0)
     }), void 0)]
@@ -10309,8 +10398,8 @@ var handle$1 = slider.entities.handle,
     _disabled = slider.states.disabled;
 var track$1 = styled.css(["width:100%;height:100%;cursor:pointer;background:none;"]);
 var thumb = styled.css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], bordersTemplate(handle$1.border), handle$1.height, handle$1.width, handle$1.background);
-var thumbHover = styled.css(["box-shadow:0px 0px 0px 6px ", ";border-color:", ";"], handle$1.states.hover.background, handle$1.states.hover.border.color);
-var thumbHoverAndDisabled = styled.css(["cursor:not-allowed;box-shadow:none;"]);
+var thumbHover = styled.css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle$1.states.hover.background, handle$1.states.hover.border.color);
+var thumbHoverAndDisabled = styled.css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
 var thumbDisabled = styled.css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.color);
 var StyledSliderInput = styled__default['default'].input.attrs(function () {
   return {
@@ -10366,7 +10455,7 @@ var wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;
 var RangeWrapper = styled__default['default'].div.withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:hover:not([disabled]){", " &::before,&::after{background:", ";}}"], function (_ref) {
+})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], function (_ref) {
   var valA = _ref.valA;
   return valA;
 }, function (_ref2) {
@@ -10385,7 +10474,7 @@ var RangeWrapper = styled__default['default'].div.withConfig({
 var Wrapper$2 = styled__default['default'].div.withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:hover:not([disabled]){", " &::after{background:", ";}}"], function (_ref6) {
+})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], function (_ref6) {
   var min = _ref6.min;
   return min;
 }, function (_ref7) {
@@ -10626,9 +10715,9 @@ var _tokens$colors$7 = tokens$6.colors,
     white = _tokens$colors$7.text.static_icons__primary_white.rgba,
     background$3 = _tokens$colors$7.ui.background__overlay.rgba,
     ui = tokens$6.typography.ui,
-    _tokens$spacings$comf$6 = tokens$6.spacings.comfortable,
-    spacingXlarge$1 = _tokens$spacings$comf$6.x_large,
-    spacingSmall$3 = _tokens$spacings$comf$6.small,
+    _tokens$spacings$comf$7 = tokens$6.spacings.comfortable,
+    spacingXlarge$1 = _tokens$spacings$comf$7.x_large,
+    spacingSmall$3 = _tokens$spacings$comf$7.small,
     borderRadius$3 = tokens$6.shape.corners.borderRadius;
 var tooltip = {
   typography: Object.assign(Object.assign({}, ui.tooltip), {
@@ -10701,9 +10790,10 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_a, ref) {
       open = _useState6[0],
       setOpen = _useState6[1];
 
-  var anchorRef = React.useRef();
   var openTimer = React.useRef();
   var tooltipRef = useCombinedRefs(setPopperEl, ref);
+  var anchorRef = React.useRef();
+  var combinedChilddRef = useCombinedRefs(anchorRef, children === null || children === void 0 ? void 0 : children.ref);
   var tooltipId = useId(id, 'tooltip');
   var containerId = 'eds-tooltip-container';
   var shouldOpen = isMounted && title !== '';
@@ -10720,7 +10810,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_a, ref) {
     return function () {
       clearTimeout(openTimer.current);
     };
-  }, []);
+  }, [clearTimeout]);
 
   var openTooltip = function openTooltip() {
     if (shouldOpen) {
@@ -10747,15 +10837,16 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_a, ref) {
   var props = Object.assign(Object.assign({
     open: open
   }, rest), attributes.popper);
+  var childProps = children.props;
   var updatedChildren = /*#__PURE__*/React.cloneElement(children, {
-    ref: anchorRef,
+    ref: combinedChilddRef,
     'aria-describedby': open ? tooltipId : null,
-    onMouseOver: openTooltip,
-    onMouseLeave: closeTooltip,
-    onPointerEnter: openTooltip,
-    onPointerLeave: closeTooltip,
-    onBlur: closeTooltip,
-    onFocus: openTooltip
+    onMouseOver: joinHandlers(openTooltip, childProps.onMouseOver),
+    onMouseLeave: joinHandlers(closeTooltip, childProps.onMouseLeave),
+    onPointerEnter: joinHandlers(openTooltip, childProps.onPointerEnter),
+    onPointerLeave: joinHandlers(closeTooltip, childProps.onPointerLeave),
+    onBlur: joinHandlers(closeTooltip, childProps.onBlur),
+    onFocus: joinHandlers(openTooltip, childProps.onFocus)
   });
   return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
     children: [shouldOpen && open && /*#__PURE__*/ReactDom__namespace.createPortal(jsxRuntime.exports.jsxs(StyledTooltip, Object.assign({
@@ -10786,9 +10877,9 @@ var typography$6 = tokens$6.typography.ui.snackbar,
     background$2 = _tokens$colors$6.ui.background__overlay.rgba,
     color = _tokens$colors$6.text.static_icons__primary_white.rgba,
     buttonColor = _tokens$colors$6.interactive.link_in_snackbars.rgba,
-    _tokens$spacings$comf$5 = tokens$6.spacings.comfortable,
-    spacingMedium$3 = _tokens$spacings$comf$5.medium,
-    spacingXLarge = _tokens$spacings$comf$5.x_large,
+    _tokens$spacings$comf$6 = tokens$6.spacings.comfortable,
+    spacingMedium$3 = _tokens$spacings$comf$6.medium,
+    spacingXLarge = _tokens$spacings$comf$6.x_large,
     clickbounds$1 = tokens$6.clickbounds.default__base,
     radius = tokens$6.shape.button.borderRadius;
 var snackbar = {
@@ -10828,12 +10919,17 @@ var StyledSnackbarAction = styled__default['default'].div.withConfig({
   displayName: "SnackbarAction__StyledSnackbarAction",
   componentId: "sc-1v5mjvd-0"
 })(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], snackbar.entities.actions.spacings.left, snackbar.entities.actions.spacings.top, snackbar.entities.actions.spacings.bottom);
-var SnackbarAction = function SnackbarAction(_ref) {
-  var children = _ref.children;
-  return jsxRuntime.exports.jsx(StyledSnackbarAction, {
+var SnackbarAction = /*#__PURE__*/React.forwardRef(function SnackbarAction(_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var props = Object.assign(Object.assign({}, rest), {
+    ref: ref
+  });
+  return jsxRuntime.exports.jsx(StyledSnackbarAction, Object.assign({}, props, {
     children: React.Children.only(children)
-  }, void 0);
-};
+  }), void 0);
+});
 
 var StyledSnackbar = styled__default['default'](Paper).attrs(function () {
   return {
@@ -10842,9 +10938,15 @@ var StyledSnackbar = styled__default['default'](Paper).attrs(function () {
 }).withConfig({
   displayName: "Snackbar__StyledSnackbar",
   componentId: "sc-ac6no8-0"
-})(["position:fixed;left:", ";bottom:", ";background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;left:50%;transform:translateX(-50%);z-index:300;@media (min-width:", "){left:auto;transform:none;}a,button{color:", ";}"], snackbar.spacings.left, snackbar.spacings.bottom, snackbar.background, spacingsTemplate(snackbar.spacings), bordersTemplate(snackbar.border), typographyTemplate(snackbar.typography), snackbar.minHeight, function (_ref) {
-  var leftAlignFrom = _ref.leftAlignFrom;
-  return leftAlignFrom;
+})(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:300;", " a,button{color:", ";}"], snackbar.background, spacingsTemplate(snackbar.spacings), bordersTemplate(snackbar.border), typographyTemplate(snackbar.typography), snackbar.minHeight, function (_ref) {
+  var placement = _ref.placement;
+  return styled.css({
+    top: placement.includes('top') ? snackbar.spacings.top : placement === 'left' || placement === 'right' ? '50%' : undefined,
+    bottom: placement.includes('bottom') ? snackbar.spacings.bottom : undefined,
+    right: placement.includes('right') ? snackbar.spacings.right : undefined,
+    left: placement.includes('left') ? snackbar.spacings.left : placement === 'top' || placement === 'bottom' ? '50%' : undefined,
+    transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
+  });
 }, snackbar.entities.button.typography.color);
 var Snackbar$1 = /*#__PURE__*/React.forwardRef(function Snackbar(_a, ref) {
   var _a$open = _a.open,
@@ -10852,11 +10954,10 @@ var Snackbar$1 = /*#__PURE__*/React.forwardRef(function Snackbar(_a, ref) {
       _a$autoHideDuration = _a.autoHideDuration,
       autoHideDuration = _a$autoHideDuration === void 0 ? 7000 : _a$autoHideDuration,
       onClose = _a.onClose,
-      _a$leftAlignFrom = _a.leftAlignFrom,
-      leftAlignFrom = _a$leftAlignFrom === void 0 ? '1200px' : _a$leftAlignFrom,
+      _a$placement = _a.placement,
+      placement = _a$placement === void 0 ? 'bottom' : _a$placement,
       children = _a.children,
-      className = _a.className,
-      rest = __rest(_a, ["open", "autoHideDuration", "onClose", "leftAlignFrom", "children", "className"]);
+      rest = __rest(_a, ["open", "autoHideDuration", "onClose", "placement", "children"]);
 
   var _useState = React.useState(open),
       _useState2 = _slicedToArray(_useState, 2),
@@ -10879,14 +10980,15 @@ var Snackbar$1 = /*#__PURE__*/React.forwardRef(function Snackbar(_a, ref) {
     return function () {
       return clearTimeout(timer.current);
     };
-  }, [open]);
+  }, [open, autoHideDuration, setVisible, onClose, clearTimeout, setTimeout]);
+  var props = Object.assign({
+    ref: ref,
+    placement: placement
+  }, rest);
   return jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, {
     children: visible && /*#__PURE__*/ReactDom__namespace.createPortal(jsxRuntime.exports.jsx(StyledSnackbar, Object.assign({
-      elevation: "overlay",
-      leftAlignFrom: leftAlignFrom,
-      className: className,
-      ref: ref
-    }, rest, {
+      elevation: "overlay"
+    }, props, {
       children: children
     }), void 0), document.body)
   }, void 0);
@@ -10897,11 +10999,11 @@ Snackbar.Action = SnackbarAction;
 
 var header = tokens$6.typography.ui.accordion_header,
     background$1 = tokens$6.colors.ui.background__default.rgba,
-    _tokens$spacings$comf$4 = tokens$6.spacings.comfortable,
-    spacingXlarge = _tokens$spacings$comf$4.x_large,
-    spacingMedium$2 = _tokens$spacings$comf$4.medium,
-    spacingSmall$2 = _tokens$spacings$comf$4.small,
-    spacingXsmall = _tokens$spacings$comf$4.x_small,
+    _tokens$spacings$comf$5 = tokens$6.spacings.comfortable,
+    spacingXlarge = _tokens$spacings$comf$5.x_large,
+    spacingMedium$2 = _tokens$spacings$comf$5.medium,
+    spacingSmall$2 = _tokens$spacings$comf$5.small,
+    spacingXsmall = _tokens$spacings$comf$5.x_small,
     borderRadius$2 = tokens$6.shape.corners.borderRadius;
 var popover = {
   background: background$1,
@@ -10987,12 +11089,12 @@ var Popover$1 = /*#__PURE__*/React.forwardRef(function Popover(_a, ref) {
 
   var popoverRef = useCombinedRefs(ref, setPopperEl);
   useOutsideClick(popperEl, function (e) {
-    if (open && onClose !== null && !anchorEl.contains(e.target)) {
+    if (open && onClose !== null && anchorEl && !anchorEl.contains(e.target)) {
       onClose();
     }
   });
   useGlobalKeyPress('Escape', function () {
-    if (onClose !== null) {
+    if (onClose !== null && open) {
       onClose();
     }
   });
@@ -11047,11 +11149,9 @@ var StyledDivider = styled__default['default'](Divider).withConfig({
 })(["margin-left:-", ";margin-right:-", ";margin-bottom:0;width:auto;max-width:", ";"], popover.spacings.left, popover.spacings.right, popover.maxWidth);
 var PopoverTitle = /*#__PURE__*/React.forwardRef(function PopoverTitle(_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      rest = __rest(_a, ["children", "className"]);
+      rest = __rest(_a, ["children"]);
 
   var props = Object.assign(Object.assign({}, rest), {
-    className: className,
     ref: ref
   });
   return jsxRuntime.exports.jsxs("div", Object.assign({}, props, {
@@ -11150,11 +11250,11 @@ var StyledBannerIcon = styled__default['default'].span.withConfig({
   var variant = _ref.variant;
   return variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background;
 }, enabled$2.entities.icon.width, enabled$2.entities.icon.height, enabled$2.spacings.right);
-var BannerIcon = function BannerIcon(_a) {
+var BannerIcon = /*#__PURE__*/React.forwardRef(function BannerIcon(_a, ref) {
   var children = _a.children,
       _a$variant = _a.variant,
       variant = _a$variant === void 0 ? 'info' : _a$variant,
-      props = __rest(_a, ["children", "variant"]);
+      rest = __rest(_a, ["children", "variant"]);
 
   var childrenWithColor = React.Children.map(children, function (child) {
     var color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
@@ -11162,12 +11262,15 @@ var BannerIcon = function BannerIcon(_a) {
       color: color
     }) || child;
   });
+  var props = Object.assign({
+    ref: ref
+  }, rest);
   return jsxRuntime.exports.jsx(StyledBannerIcon, Object.assign({
     variant: variant
   }, props, {
     children: childrenWithColor
   }), void 0);
-};
+});
 
 var StyledBanner = styled__default['default'].div.withConfig({
   displayName: "Banner__StyledBanner",
@@ -11185,10 +11288,10 @@ var NonMarginDivider = styled__default['default'](Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
   componentId: "sc-1ju451i-2"
 })(["margin:0;height:2px;"]);
-var Banner$1 = function Banner(_a) {
+var Banner$1 = /*#__PURE__*/React.forwardRef(function Banner(_a, ref) {
   var children = _a.children,
       className = _a.className,
-      props = __rest(_a, ["children", "className"]);
+      rest = __rest(_a, ["children", "className"]);
 
   var childrenWhereBannerIcon = React.Children.map(children, function (child) {
     return /*#__PURE__*/React.isValidElement(child) && child.type === BannerIcon;
@@ -11196,7 +11299,10 @@ var Banner$1 = function Banner(_a) {
   var hasIcon = childrenWhereBannerIcon.some(function (bool) {
     return bool;
   });
-  return jsxRuntime.exports.jsxs(StyledBanner, Object.assign({}, props, {
+  var props = Object.assign({
+    ref: ref
+  }, rest);
+  return jsxRuntime.exports.jsxs(StyledBanner, Object.assign({}, props, {
     className: className,
     role: "alert"
   }, {
@@ -11208,22 +11314,25 @@ var Banner$1 = function Banner(_a) {
       color: "light"
     }, void 0)]
   }), void 0);
-};
+});
 
 var StyledBannerMessage = styled__default['default'](Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
-var BannerMessage = function BannerMessage(_a) {
+var BannerMessage = /*#__PURE__*/React.forwardRef(function BannerMessage(_a, ref) {
   var children = _a.children,
-      props = __rest(_a, ["children"]);
+      rest = __rest(_a, ["children"]);
 
+  var props = Object.assign({
+    ref: ref
+  }, rest);
   return jsxRuntime.exports.jsx(StyledBannerMessage, Object.assign({
     variant: "body_long"
   }, props, {
     children: children
   }), void 0);
-};
+});
 
 var enabled = enabled$3;
 var StyledBannerActions = styled__default['default'].div.withConfig({
@@ -11239,20 +11348,21 @@ var StyledBannerActions = styled__default['default'].div.withConfig({
     marginLeft: '0'
   };
 });
-var BannerActions = function BannerActions(_a) {
+var BannerActions = /*#__PURE__*/React.forwardRef(function BannerActions(_a, ref) {
   var children = _a.children,
       _a$placement = _a.placement,
       placement = _a$placement === void 0 ? 'left' : _a$placement,
-      className = _a.className,
-      props = __rest(_a, ["children", "placement", "className"]);
+      rest = __rest(_a, ["children", "placement"]);
 
-  return jsxRuntime.exports.jsx(StyledBannerActions, Object.assign({}, props, {
-    placement: placement,
-    className: className
-  }, {
+  var props = Object.assign({
+    ref: ref
+  }, rest);
+  return jsxRuntime.exports.jsx(StyledBannerActions, Object.assign({
+    placement: placement
+  }, props, {
     children: children
   }), void 0);
-};
+});
 
 var Banner = Banner$1;
 Banner.Icon = BannerIcon;
@@ -11631,7 +11741,7 @@ var Separator = styled__default['default'](Typography).withConfig({
 var Collapsed = styled__default['default'](Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
-})(["&:hover{text-decoration:underline;color:", ";}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
 var Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs(_a, ref) {
   var children = _a.children,
       collapse = _a.collapse,
@@ -11715,7 +11825,7 @@ var states = breadcrumbs.states,
 var StyledTypography = styled__default['default'](Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
-})(["&:hover{text-decoration:underline;color:", ";}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography$4.color, function (_ref) {
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography$4.color, function (_ref) {
   var maxWidth = _ref.maxWidth;
   return styled.css({
     maxWidth: maxWidth
@@ -11724,29 +11834,30 @@ var StyledTypography = styled__default['default'](Typography).withConfig({
 var Breadcrumb = /*#__PURE__*/React.forwardRef(function Breadcrumb(_a, ref) {
   var children = _a.children,
       maxWidth = _a.maxWidth,
-      other = __rest(_a, ["children", "maxWidth"]);
+      href = _a.href,
+      other = __rest(_a, ["children", "maxWidth", "href"]);
 
   var props = Object.assign(Object.assign({}, other), {
     ref: ref,
     maxWidth: maxWidth
   });
   var showTooltip = maxWidth > 0;
-  return showTooltip ? jsxRuntime.exports.jsx(Tooltip, Object.assign({
-    title: children,
-    placement: "top"
-  }, {
-    children: jsxRuntime.exports.jsx(StyledTypography, Object.assign({
-      link: true,
-      variant: "body_short"
-    }, props, {
-      children: children
-    }), void 0)
-  }), void 0) : jsxRuntime.exports.jsx(StyledTypography, Object.assign({
-    link: true,
+  var isHrefDefined = href !== undefined;
+
+  var crumb = jsxRuntime.exports.jsx(StyledTypography, Object.assign({
+    link: isHrefDefined,
+    as: isHrefDefined ? null : 'span',
     variant: "body_short"
   }, props, {
     children: children
   }), void 0);
+
+  return showTooltip ? jsxRuntime.exports.jsx(Tooltip, Object.assign({
+    title: children,
+    placement: "top"
+  }, {
+    children: crumb
+  }), void 0) : crumb;
 });
 
 var Breadcrumbs = Breadcrumbs$1;
@@ -11811,16 +11922,16 @@ var _tokens$colors$1 = tokens$6.colors,
     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$3 = tokens$6.spacings.comfortable,
-    medium = _tokens$spacings$comf$3.medium,
-    large = _tokens$spacings$comf$3.large,
-    small$2 = _tokens$spacings$comf$3.small,
+    _tokens$spacings$comf$4 = tokens$6.spacings.comfortable,
+    medium = _tokens$spacings$comf$4.medium,
+    large = _tokens$spacings$comf$4.large,
+    small$1 = _tokens$spacings$comf$4.small,
     typography$3 = tokens$6.typography.navigation.menu_title;
 var menu = {
   background: background,
   spacings: {
-    top: small$2,
-    bottom: small$2,
+    top: small$1,
+    bottom: small$1,
     left: '0px',
     right: '0px'
   },
@@ -11878,8 +11989,8 @@ var menu = {
       spacings: {
         left: large,
         right: large,
-        top: small$2,
-        bottom: small$2
+        top: small$1,
+        bottom: small$1
       }
     }
   },
@@ -11890,8 +12001,8 @@ var menu = {
           spacings: {
             left: large,
             right: large,
-            top: small$2,
-            bottom: small$2
+            top: small$1,
+            bottom: small$1
           }
         }
       }
@@ -11924,7 +12035,7 @@ var ListItem$2 = styled__default['default'].li.attrs(function (_ref) {
   return active && styled.css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}&:hover{cursor:not-allowed;}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["&:hover{z-index:1;cursor:pointer;background:", ";}&:focus{", "}"], hover.background, outlineTemplate(focus.outline));
+  return disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{", "}"], hover.background, outlineTemplate(focus.outline));
 });
 var Content = styled__default['default'].div.withConfig({
   displayName: "MenuItem__Content",
@@ -12051,8 +12162,9 @@ var MenuList = /*#__PURE__*/React.forwardRef(function MenuList(_a, ref) {
 
     if (focus === 'last') {
       setFocusedIndex(lastFocusIndex);
-    }
-  }, [focus]);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [focus, firstFocusIndex, lastFocusIndex]);
 
   var handleMenuItemChange = function handleMenuItemChange(direction, fallbackIndex) {
     var i = direction === 'down' ? 1 : -1;
@@ -12147,7 +12259,7 @@ var Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(_a, ref) {
 
   var token = useToken({
     density: density
-  }, menu)();
+  }, menu);
 
   var _usePopper = usePopper(anchorEl, containerEl, null, placement, 4),
       styles = _usePopper.styles,
@@ -12214,13 +12326,13 @@ var PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(_a, r
   var page = _a.page,
       selected = _a.selected,
       onClick = _a.onClick,
-      other = __rest(_a, ["page", "selected", "onClick"]);
+      rest = __rest(_a, ["page", "selected", "onClick"]);
 
   var props = Object.assign({
     ref: ref,
     page: page,
     selected: selected
-  }, other);
+  }, rest);
   var background = selected ? pagination.entities.item.states.active.background : null;
   return jsxRuntime.exports.jsx(Button, Object.assign({
     style: {
@@ -12326,8 +12438,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_a, ref) {
       _a$itemsPerPage = _a.itemsPerPage,
       itemsPerPage = _a$itemsPerPage === void 0 ? 10 : _a$itemsPerPage,
       onChange = _a.onChange,
-      className = _a.className,
-      other = __rest(_a, ["totalItems", "defaultPage", "withItemIndicator", "itemsPerPage", "onChange", "className"]);
+      rest = __rest(_a, ["totalItems", "defaultPage", "withItemIndicator", "itemsPerPage", "onChange"]);
 
   var pages = Math.ceil(totalItems / itemsPerPage); // Total page numbers
 
@@ -12353,12 +12464,19 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_a, ref) {
     }
   };
 
+  var isMounted = useIsMounted();
   var items = PaginationControl(pages, activePage);
+  React.useLayoutEffect(function () {
+    if (isMounted) {
+      setActivePage(1);
+      onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [itemsPerPage]);
   var props = Object.assign({
     ref: ref,
-    withItemIndicator: withItemIndicator,
-    className: className
-  }, other);
+    withItemIndicator: withItemIndicator
+  }, rest);
 
   var pagination = jsxRuntime.exports.jsx(Navigation, Object.assign({
     "aria-label": "pagination"
@@ -12425,21 +12543,21 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_a, ref) {
 });
 
 var colors$1 = tokens$6.colors,
-    _tokens$spacings$comf$2 = tokens$6.spacings.comfortable,
-    small$1 = _tokens$spacings$comf$2.small,
-    x_small$1 = _tokens$spacings$comf$2.x_small,
+    _tokens$spacings$comf$3 = tokens$6.spacings.comfortable,
+    small = _tokens$spacings$comf$3.small,
+    x_small$2 = _tokens$spacings$comf$3.x_small,
     typography$1 = tokens$6.typography,
     shape = tokens$6.shape;
 var nativeselect = {
   background: colors$1.ui.background__light.rgba,
   typography: Object.assign(Object.assign({}, typography$1.input.text), {
-    color: colors$1.text.static_icons__tertiary.rgba
+    color: colors$1.text.static_icons__default.rgba
   }),
   entities: {
     input: {
       spacings: {
-        left: small$1,
-        right: small$1,
+        left: small,
+        right: small,
         top: '6px',
         bottom: '6px'
       }
@@ -12471,8 +12589,8 @@ var nativeselect = {
       entities: {
         input: {
           spacings: {
-            left: x_small$1,
-            right: x_small$1,
+            left: x_small$2,
+            right: x_small$2,
             top: '0',
             bottom: '0'
           }
@@ -12511,7 +12629,7 @@ var NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(_a, ref)
 
   var token = useToken({
     density: density
-  }, nativeselect)();
+  }, nativeselect);
   var containerProps = {
     ref: ref,
     className: className
@@ -13979,7 +14097,7 @@ function generateId() {
 }
 /**
  * Default implementation for status message. Only added when menu is open.
- * Will specift if there are results in the list, and if so, how many,
+ * Will specify if there are results in the list, and if so, how many,
  * and what keys are relevant.
  *
  * @param {Object} param the downshift state and other relevant properties
@@ -14358,6 +14476,12 @@ var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
   touchEnd: touchEnd
 });
 
+var _excluded$4 = ["refKey", "ref"],
+    _excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
+    _excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
+    _excluded4$1 = ["refKey", "ref"],
+    _excluded5$1 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
+
 var Downshift = /*#__PURE__*/function () {
   var Downshift = /*#__PURE__*/function (_Component) {
     _inheritsLoose(Downshift, _Component);
@@ -14477,6 +14601,8 @@ var Downshift = /*#__PURE__*/function () {
           isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
 
           var nextState = {}; // this is just used to tell whether the state changed
+
+          var nextFullState = {}; // we need to call on change if the outside world is controlling any of our state
           // and we're trying to update that state. OR if the selection has changed and we're
           // trying to update the selection
 
@@ -14502,7 +14628,7 @@ var Downshift = /*#__PURE__*/function () {
               return;
             }
 
-            newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
+            nextFullState[key] = newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
 
             if (!isControlledProp(_this.props, key)) {
               nextState[key] = newStateToSet[key];
@@ -14551,7 +14677,7 @@ var Downshift = /*#__PURE__*/function () {
             _ref$refKey = _ref.refKey,
             refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
             ref = _ref.ref,
-            rest = _objectWithoutPropertiesLoose(_ref, ["refKey", "ref"]);
+            rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
         var _ref2 = _temp2 === void 0 ? {} : _temp2,
             _ref2$suppressRefErro = _ref2.suppressRefError,
@@ -14735,7 +14861,7 @@ var Downshift = /*#__PURE__*/function () {
             var onKeyDown = _ref3.onKeyDown,
             onKeyUp = _ref3.onKeyUp,
             onBlur = _ref3.onBlur,
-            rest = _objectWithoutPropertiesLoose(_ref3, ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"]);
+            rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
 
         var _this$getState5 = _this.getState(),
             isOpen = _this$getState5.isOpen;
@@ -14803,10 +14929,10 @@ var Downshift = /*#__PURE__*/function () {
         _this.internalSetTimeout(function () {
           if (!_this.isMouseDown && (_this.props.environment.document.activeElement == null || _this.props.environment.document.activeElement.id !== _this.inputId) && _this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
           ) {
-              _this.reset({
-                type: blurButton
-              });
-            }
+            _this.reset({
+              type: blurButton
+            });
+          }
         });
       };
 
@@ -14824,7 +14950,7 @@ var Downshift = /*#__PURE__*/function () {
             onChange = _ref4.onChange,
             onInput = _ref4.onInput;
             _ref4.onChangeText;
-            var rest = _objectWithoutPropertiesLoose(_ref4, ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"]);
+            var rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
 
         var onChangeKey;
         var eventHandlers = {};
@@ -14899,7 +15025,7 @@ var Downshift = /*#__PURE__*/function () {
             _ref5$refKey = _ref5.refKey,
             refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
             ref = _ref5.ref,
-            props = _objectWithoutPropertiesLoose(_ref5, ["refKey", "ref"]);
+            props = _objectWithoutPropertiesLoose(_ref5, _excluded4$1);
 
         var _ref6 = _temp6 === void 0 ? {} : _temp6,
             _ref6$suppressRefErro = _ref6.suppressRefError,
@@ -14924,7 +15050,7 @@ var Downshift = /*#__PURE__*/function () {
             item = _ref7$item === void 0 ? process.env.NODE_ENV === 'production' ?
         /* istanbul ignore next */
         undefined : requiredProp('getItemProps', 'item') : _ref7$item,
-            rest = _objectWithoutPropertiesLoose(_ref7, ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"]);
+            rest = _objectWithoutPropertiesLoose(_ref7, _excluded5$1);
 
         if (index === undefined) {
           _this.items.push(item);
@@ -15432,9 +15558,9 @@ var Downshift = /*#__PURE__*/function () {
     selectedItemChanged: function selectedItemChanged(prevItem, item) {
       return prevItem !== item;
     },
-    environment: typeof window === 'undefined'
+    environment:
     /* istanbul ignore next (ssr) */
-    ? {} : window,
+    typeof window === 'undefined' ? {} : window,
     stateReducer: function stateReducer(state, stateToSet) {
       return stateToSet;
     },
@@ -15520,6 +15646,7 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
+var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -15713,9 +15840,9 @@ var defaultProps$3 = {
   getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
   circularNavigation: false,
-  environment: typeof window === 'undefined'
+  environment:
   /* istanbul ignore next (ssr) */
-  ? {} : window
+  typeof window === 'undefined' ? {} : window
 };
 
 function getDefaultValue$1(props, propKey, defaultStateValues) {
@@ -15929,11 +16056,11 @@ function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
       highlightedIndex = _ref2.highlightedIndex,
       items = _ref2.items,
       environment = _ref2.environment,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["isInitialMount", "highlightedIndex", "items", "environment"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
 
   // Sets a11y status message on changes in state.
   React.useEffect(function () {
-    if (isInitialMount) {
+    if (isInitialMount || false) {
       return;
     }
 
@@ -16062,41 +16189,40 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
 
   return _extends({}, state, changes);
 }
-
 ({
-  items: PropTypes.array.isRequired,
-  itemToString: PropTypes.func,
-  getA11yStatusMessage: PropTypes.func,
-  getA11ySelectionMessage: PropTypes.func,
-  circularNavigation: PropTypes.bool,
-  highlightedIndex: PropTypes.number,
-  defaultHighlightedIndex: PropTypes.number,
-  initialHighlightedIndex: PropTypes.number,
-  isOpen: PropTypes.bool,
-  defaultIsOpen: PropTypes.bool,
-  initialIsOpen: PropTypes.bool,
-  selectedItem: PropTypes.any,
-  initialSelectedItem: PropTypes.any,
-  defaultSelectedItem: PropTypes.any,
-  id: PropTypes.string,
-  labelId: PropTypes.string,
-  menuId: PropTypes.string,
-  getItemId: PropTypes.func,
-  toggleButtonId: PropTypes.string,
-  stateReducer: PropTypes.func,
-  onSelectedItemChange: PropTypes.func,
-  onHighlightedIndexChange: PropTypes.func,
-  onStateChange: PropTypes.func,
-  onIsOpenChange: PropTypes.func,
-  environment: PropTypes.shape({
-    addEventListener: PropTypes.func,
-    removeEventListener: PropTypes.func,
-    document: PropTypes.shape({
-      getElementById: PropTypes.func,
-      activeElement: PropTypes.any,
-      body: PropTypes.any
+    items: PropTypes.array.isRequired,
+    itemToString: PropTypes.func,
+    getA11yStatusMessage: PropTypes.func,
+    getA11ySelectionMessage: PropTypes.func,
+    circularNavigation: PropTypes.bool,
+    highlightedIndex: PropTypes.number,
+    defaultHighlightedIndex: PropTypes.number,
+    initialHighlightedIndex: PropTypes.number,
+    isOpen: PropTypes.bool,
+    defaultIsOpen: PropTypes.bool,
+    initialIsOpen: PropTypes.bool,
+    selectedItem: PropTypes.any,
+    initialSelectedItem: PropTypes.any,
+    defaultSelectedItem: PropTypes.any,
+    id: PropTypes.string,
+    labelId: PropTypes.string,
+    menuId: PropTypes.string,
+    getItemId: PropTypes.func,
+    toggleButtonId: PropTypes.string,
+    stateReducer: PropTypes.func,
+    onSelectedItemChange: PropTypes.func,
+    onHighlightedIndexChange: PropTypes.func,
+    onStateChange: PropTypes.func,
+    onIsOpenChange: PropTypes.func,
+    environment: PropTypes.shape({
+        addEventListener: PropTypes.func,
+        removeEventListener: PropTypes.func,
+        document: PropTypes.shape({
+            getElementById: PropTypes.func,
+            activeElement: PropTypes.any,
+            body: PropTypes.any
+        })
     })
-  })
 });
 /**
  * Default implementation for status message. Only added when menu is open.
@@ -16106,32 +16232,21 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
  * @param {Object} param the downshift state and other relevant properties
  * @return {String} the a11y status message
  */
-
-function getA11yStatusMessage(_ref) {
-  var isOpen = _ref.isOpen,
-      resultCount = _ref.resultCount,
-      previousResultCount = _ref.previousResultCount;
-
-  if (!isOpen) {
+function getA11yStatusMessage(_a) {
+    var isOpen = _a.isOpen, resultCount = _a.resultCount, previousResultCount = _a.previousResultCount;
+    if (!isOpen) {
+        return '';
+    }
+    if (!resultCount) {
+        return 'No results are available.';
+    }
+    if (resultCount !== previousResultCount) {
+        return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.";
+    }
     return '';
-  }
-
-  if (!resultCount) {
-    return 'No results are available.';
-  }
-
-  if (resultCount !== previousResultCount) {
-    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.";
-  }
-
-  return '';
 }
-
-_extends({}, defaultProps$3, {
-  getA11yStatusMessage: getA11yStatusMessage
-}); // eslint-disable-next-line import/no-mutable-exports
+__assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage });
 /* istanbul ignore next */
-
 if (process.env.NODE_ENV !== 'production') ;
 
 process.env.NODE_ENV !== "production" ? '__menu_keydown_arrow_down__' : 0;
@@ -16424,6 +16539,11 @@ function downshiftUseComboboxReducer(state, action) {
 }
 /* eslint-enable complexity */
 
+var _excluded$1 = ["onMouseLeave", "refKey", "ref"],
+    _excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"],
+    _excluded3 = ["onClick", "onPress", "refKey", "ref"],
+    _excluded4 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"],
+    _excluded5 = ["refKey", "ref"];
 useCombobox.stateChangeTypes = stateChangeTypes$1;
 
 function useCombobox(userProps) {
@@ -16594,8 +16714,8 @@ function useCombobox(userProps) {
 
         if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
         ) {
-            return;
-          }
+          return;
+        }
 
         event.preventDefault();
         dispatch({
@@ -16620,7 +16740,7 @@ function useCombobox(userProps) {
         _ref$refKey = _ref.refKey,
         refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
         ref = _ref.ref,
-        rest = _objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "ref"]);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
     var _ref2 = _temp2 === void 0 ? {} : _temp2,
         _ref2$suppressRefErro = _ref2.suppressRefError,
@@ -16647,7 +16767,7 @@ function useCombobox(userProps) {
         onMouseMove = _ref3.onMouseMove,
         onClick = _ref3.onClick;
         _ref3.onPress;
-        var rest = _objectWithoutPropertiesLoose(_ref3, ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"]);
+        var rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
 
     var _latest$current = latest.current,
         latestProps = _latest$current.props,
@@ -16701,7 +16821,7 @@ function useCombobox(userProps) {
         var _ref5$refKey = _ref5.refKey,
         refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
         ref = _ref5.ref,
-        rest = _objectWithoutPropertiesLoose(_ref5, ["onClick", "onPress", "refKey", "ref"]);
+        rest = _objectWithoutPropertiesLoose(_ref5, _excluded3);
 
     var toggleButtonHandleClick = function toggleButtonHandleClick() {
       dispatch({
@@ -16731,7 +16851,7 @@ function useCombobox(userProps) {
         var _ref6$refKey = _ref6.refKey,
         refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
         ref = _ref6.ref,
-        rest = _objectWithoutPropertiesLoose(_ref6, ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"]);
+        rest = _objectWithoutPropertiesLoose(_ref6, _excluded4);
 
     var _ref7 = _temp6 === void 0 ? {} : _temp6,
         _ref7$suppressRefErro = _ref7.suppressRefError,
@@ -16795,7 +16915,7 @@ function useCombobox(userProps) {
         _ref8$refKey = _ref8.refKey,
         refKey = _ref8$refKey === void 0 ? 'ref' : _ref8$refKey,
         ref = _ref8.ref,
-        rest = _objectWithoutPropertiesLoose(_ref8, ["refKey", "ref"]);
+        rest = _objectWithoutPropertiesLoose(_ref8, _excluded5);
 
     var _ref9 = _temp8 === void 0 ? {} : _temp8,
         _ref9$suppressRefErro = _ref9.suppressRefError,
@@ -16935,9 +17055,7 @@ function isKeyDownOperationPermitted(event) {
   var element = event.target;
 
   if (element instanceof HTMLInputElement && // if element is a text input
-  element.value !== '' && ( // and we have text in it
-  // and cursor is either not at the start or is currently highlighting text.
-  element.selectionStart !== 0 || element.selectionEnd !== 0)) {
+  element.value !== '' && (element.selectionStart !== 0 || element.selectionEnd !== 0)) {
     return false;
   }
 
@@ -17154,6 +17272,8 @@ function downshiftMultipleSelectionReducer(state, action) {
   return _extends({}, state, changes);
 }
 
+var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
+    _excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
 useMultipleSelection.stateChangeTypes = stateChangeTypes;
 
 function useMultipleSelection(userProps) {
@@ -17283,7 +17403,7 @@ function useMultipleSelection(userProps) {
         onKeyDown = _ref3.onKeyDown,
         selectedItem = _ref3.selectedItem,
         index = _ref3.index,
-        rest = _objectWithoutPropertiesLoose(_ref3, ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"]);
+        rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
     var latestState = latest.current.state;
     var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
@@ -17324,7 +17444,7 @@ function useMultipleSelection(userProps) {
         onClick = _ref4.onClick,
         _ref4$preventKeyActio = _ref4.preventKeyAction,
         preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
-        rest = _objectWithoutPropertiesLoose(_ref4, ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"]);
+        rest = _objectWithoutPropertiesLoose(_ref4, _excluded2);
 
     var _ref5 = _temp3 === void 0 ? {} : _temp3,
         _ref5$suppressRefErro = _ref5.suppressRefError,
@@ -17403,12 +17523,12 @@ var typography = tokens$6.typography,
     _tokens$shape$1 = tokens$6.shape,
     straight = _tokens$shape$1.straight,
     borderRadius = _tokens$shape$1.corners.borderRadius,
-    _tokens$spacings$comf$1 = tokens$6.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,
+    _tokens$spacings$comf$2 = tokens$6.spacings.comfortable,
+    spacingSmall = _tokens$spacings$comf$2.small,
+    spacingMediumSmall = _tokens$spacings$comf$2.medium_small,
+    spacingMedium = _tokens$spacings$comf$2.medium,
+    spacingLarge = _tokens$spacings$comf$2.large,
+    xx_small = _tokens$spacings$comf$2.xx_small,
     boxShadow$1 = tokens$6.elevation.temporary_nav;
 var select = {
   background: colors.ui.background__default.rgba,
@@ -17421,7 +17541,7 @@ var select = {
     left: spacingLarge
   },
   typography: Object.assign(Object.assign({}, typography.navigation.menu_title), {
-    color: colors.text.static_icons__tertiary.rgba
+    color: colors.text.static_icons__default.rgba
   }),
   border: {
     type: 'border',
@@ -17429,7 +17549,10 @@ var select = {
   },
   states: {
     hover: {
-      background: colors.ui.background__light.rgba
+      background: colors.ui.background__medium.rgba
+    },
+    active: {
+      background: colors.interactive.primary__selected_highlight.rgba
     }
   },
   entities: {
@@ -17495,23 +17618,19 @@ var StyledList = styled__default['default'](List$1).withConfig({
 var StyledListItem = styled__default['default'](List$1.Item).withConfig({
   displayName: "commonStyles__StyledListItem",
   componentId: "sc-v98ajk-3"
-})(["list-style:none;", ";margin:0;background-color:", ";cursor:", ";"], typographyTemplate(select.typography), function (_ref) {
-  var highlighted = _ref.highlighted;
-  return highlighted === 'true' ? select.states.hover.background : select.background;
-}, function (_ref2) {
-  var highlighted = _ref2.highlighted;
-  return highlighted === 'true' ? 'pointer' : 'default';
+})(function (_ref) {
+  var theme = _ref.theme,
+      highlighted = _ref.highlighted,
+      active = _ref.active;
+  var backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
+  return styled.css(["margin:0;list-style:none;background-color:", ";", ";cursor:", ";"], backgroundColor, typographyTemplate(theme.typography), highlighted === 'true' ? 'pointer' : 'default');
 });
 var StyledButton = styled__default['default'](Button).withConfig({
   displayName: "commonStyles__StyledButton",
   componentId: "sc-v98ajk-4"
-})(["position:absolute;right:", ";height:", ";width:", ";", ""], buttonToken.spacings.right, buttonToken.height, buttonToken.height, function (_ref3) {
-  var density = _ref3.density;
-  return density === 'compact' ? styled.css({
-    top: select.modes.compact.entities.button.spacings.top
-  }) : styled.css({
-    top: buttonToken.spacings.top
-  });
+})(function (_ref2) {
+  var button = _ref2.theme.entities.button;
+  return styled.css(["position:absolute;right:", ";height:", ";width:", ";top:", ";"], button.spacings.right, button.height, button.height, button.spacings.top);
 });
 var StyledInputWrapper = styled__default['default'].div.withConfig({
   displayName: "commonStyles__StyledInputWrapper",
@@ -17552,7 +17671,7 @@ var SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect(_a, ref)
 
   var token = useToken({
     density: density
-  }, select)();
+  }, select);
   React.useEffect(function () {
     setInputItems(items);
   }, [items]);
@@ -17565,6 +17684,13 @@ var SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect(_a, ref)
         return item.toLowerCase().includes(inputValue.toLowerCase());
       }));
     },
+    onIsOpenChange: function onIsOpenChange(_ref3) {
+      var selectedItem = _ref3.selectedItem;
+
+      if (inputItems.length === 1 && selectedItem === inputItems[0]) {
+        setInputItems(items);
+      }
+    },
     initialSelectedItem: initialSelectedItem
   };
 
@@ -17582,7 +17708,17 @@ var SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect(_a, ref)
       getInputProps = _useCombobox.getInputProps,
       getComboboxProps = _useCombobox.getComboboxProps,
       highlightedIndex = _useCombobox.highlightedIndex,
-      getItemProps = _useCombobox.getItemProps;
+      getItemProps = _useCombobox.getItemProps,
+      openMenu = _useCombobox.openMenu,
+      selectedItem = _useCombobox.selectedItem,
+      reset = _useCombobox.reset,
+      inputValue = _useCombobox.inputValue;
+
+  var openSelect = function openSelect() {
+    if (!isOpen && !(disabled || readOnly)) {
+      openMenu();
+    }
+  };
 
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
@@ -17599,14 +17735,30 @@ var SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect(_a, ref)
         children: [jsxRuntime.exports.jsx(PaddedInput, Object.assign({}, getInputProps({
           disabled: disabled
         }), {
-          readOnly: readOnly
-        }, other), void 0), jsxRuntime.exports.jsx(StyledButton, Object.assign({
+          readOnly: readOnly,
+          onFocus: openSelect,
+          onClick: openSelect
+        }, other), void 0), Boolean(inputValue) && jsxRuntime.exports.jsx(StyledButton, Object.assign({
+          variant: "ghost_icon",
+          disabled: disabled || readOnly,
+          "aria-label": 'clear options',
+          title: "clear",
+          onClick: reset,
+          style: {
+            right: 32
+          }
+        }, {
+          children: jsxRuntime.exports.jsx(Icon$1, {
+            data: close,
+            size: 16
+          }, void 0)
+        }), void 0), jsxRuntime.exports.jsx(StyledButton, Object.assign({
           variant: "ghost_icon"
         }, getToggleButtonProps({
           disabled: disabled || readOnly
         }), {
           "aria-label": 'toggle options',
-          density: density
+          title: "open"
         }, {
           children: jsxRuntime.exports.jsx(Icon$1, {
             data: isOpen ? arrow_drop_up : arrow_drop_down
@@ -17615,14 +17767,13 @@ var SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect(_a, ref)
       }), void 0), jsxRuntime.exports.jsx(StyledList, Object.assign({}, getMenuProps(), {
         children: isOpen && inputItems.map(function (item, index) {
           return jsxRuntime.exports.jsx(PaddedStyledListItem$1, Object.assign({
-            highlighted: highlightedIndex === index ? 'true' : 'false'
+            highlighted: highlightedIndex === index ? 'true' : 'false',
+            active: selectedItem === item ? 'true' : 'false'
           }, getItemProps({
             item: item,
             index: index,
             disabled: disabled
           }), {
-            density: density
-          }, {
             children: item
           }), "".concat(item));
         })
@@ -17637,17 +17788,23 @@ var _tokens$colors$intera$2 = tokens$6.colors.interactive,
     focusOutlineColor$2 = _tokens$colors$intera$2.focus.rgba,
     disabledText$1 = _tokens$colors$intera$2.disabled__text.rgba,
     labelTypography$2 = tokens$6.typography.navigation.menu_title,
-    _tokens$spacings$comf = tokens$6.spacings.comfortable,
-    medium_small$1 = _tokens$spacings$comf.medium_small,
-    x_small = _tokens$spacings$comf.x_small;
+    _tokens$spacings$comf$1 = tokens$6.spacings.comfortable,
+    medium_small$2 = _tokens$spacings$comf$1.medium_small,
+    x_small$1 = _tokens$spacings$comf$1.x_small,
+    _tokens$clickbounds$1 = tokens$6.clickbounds,
+    clicboundSize$1 = _tokens$clickbounds$1.default__base,
+    compactClickboundSize$1 = _tokens$clickbounds$1.compact__standard;
 var checkbox = {
   background: primaryColor$1,
   typography: labelTypography$2,
   spacings: {
-    bottom: medium_small$1,
-    top: medium_small$1,
-    left: medium_small$1,
-    right: medium_small$1
+    bottom: medium_small$2,
+    top: medium_small$2,
+    left: medium_small$2,
+    right: medium_small$2
+  },
+  clickbound: {
+    height: clicboundSize$1
   },
   states: {
     hover: {
@@ -17669,17 +17826,20 @@ var checkbox = {
   entities: {
     label: {
       spacings: {
-        left: medium_small$1
+        left: medium_small$2
       }
     }
   },
   modes: {
     compact: {
       spacings: {
-        bottom: x_small,
-        top: x_small,
-        left: x_small,
-        right: x_small
+        bottom: x_small$1,
+        top: x_small$1,
+        left: x_small$1,
+        right: x_small$1
+      },
+      clickbound: {
+        height: compactClickboundSize$1
       },
       states: {
         focus: {
@@ -17716,14 +17876,21 @@ var Input$3 = styled__default['default'].input.attrs(function (_ref2) {
 }).withConfig({
   displayName: "Input",
   componentId: "sc-rqj7qf-1"
-})(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], function (_ref3) {
-  var theme = _ref3.theme;
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], function (_ref3) {
+  var theme = _ref3.theme,
+      iconSize = _ref3.iconSize;
+  return parseFloat(theme.clickbound.height) / iconSize;
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return outlineTemplate(theme.states.focus.outline);
 });
-var Svg$1 = styled__default['default'].svg.attrs(function (_ref4) {
-  var height = _ref4.height,
-      width = _ref4.width,
-      fill = _ref4.fill;
+var Svg$1 = styled__default['default'].svg.attrs(function (_ref6) {
+  var height = _ref6.height,
+      width = _ref6.width,
+      fill = _ref6.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
@@ -17734,15 +17901,15 @@ var Svg$1 = styled__default['default'].svg.attrs(function (_ref4) {
 }).withConfig({
   displayName: "Input__Svg",
   componentId: "sc-rqj7qf-2"
-})([""]);
+})(["grid-area:input;pointer-events:none;"]);
 var InputWrapper$1 = styled__default['default'].span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-flex;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref5) {
-  var theme = _ref5.theme;
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref7) {
+  var theme = _ref7.theme;
   return spacingsTemplate(theme.spacings);
-}, function (_ref6) {
-  var disabled = _ref6.disabled;
+}, function (_ref8) {
+  var disabled = _ref8.disabled;
   return disabled ? 'transparent' : checkbox.states.hover.background;
 });
 var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_a, ref) {
@@ -17756,7 +17923,7 @@ var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_a, ref
 
   var token = useToken({
     density: density
-  }, checkbox)();
+  }, checkbox);
   var iconSize = 24;
   var fill = disabled ? checkbox.states.disabled.background : checkbox.background;
   var inputWrapperProps = {
@@ -17770,7 +17937,9 @@ var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_a, ref
     theme: token
   }, {
     children: jsxRuntime.exports.jsxs(InputWrapper$1, Object.assign({}, inputWrapperProps, {
-      children: [jsxRuntime.exports.jsx(Input$3, Object.assign({}, inputProps), void 0), indeterminate ? jsxRuntime.exports.jsx(Svg$1, Object.assign({
+      children: [jsxRuntime.exports.jsx(Input$3, Object.assign({
+        iconSize: iconSize
+      }, inputProps), void 0), indeterminate ? jsxRuntime.exports.jsx(Svg$1, Object.assign({
         width: iconSize,
         height: iconSize,
         viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
@@ -17835,7 +18004,7 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect(_a, ref) {
 
   var token = useToken({
     density: density
-  }, multiSelect)();
+  }, multiSelect);
   var multipleSelectionProps = {
     initialSelectedItems: initialSelectedItems,
     onSelectedItemsChange: function onSelectedItemsChange(changes) {
@@ -17855,7 +18024,8 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect(_a, ref) {
       getDropdownProps = _useMultipleSelection.getDropdownProps,
       addSelectedItem = _useMultipleSelection.addSelectedItem,
       removeSelectedItem = _useMultipleSelection.removeSelectedItem,
-      selectedItems = _useMultipleSelection.selectedItems;
+      selectedItems = _useMultipleSelection.selectedItems,
+      reset = _useMultipleSelection.reset;
 
   var getFilteredItems = function getFilteredItems(items) {
     return items.filter(function (item) {
@@ -17918,9 +18088,17 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect(_a, ref) {
       getInputProps = _useCombobox.getInputProps,
       getComboboxProps = _useCombobox.getComboboxProps,
       highlightedIndex = _useCombobox.highlightedIndex,
-      getItemProps = _useCombobox.getItemProps;
+      getItemProps = _useCombobox.getItemProps,
+      openMenu = _useCombobox.openMenu;
 
   var placeholderText = items.length > 0 ? "".concat(selectedItems.length, "/").concat(items.length, " selected") : '';
+
+  var openSelect = function openSelect() {
+    if (!isOpen && !(disabled || readOnly)) {
+      openMenu();
+    }
+  };
+
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
@@ -17938,14 +18116,29 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect(_a, ref) {
           disabled: disabled
         })), {
           placeholder: placeholderText,
-          readOnly: readOnly
-        }, other), void 0), jsxRuntime.exports.jsx(StyledButton, Object.assign({
+          readOnly: readOnly,
+          onFocus: openSelect
+        }, other), void 0), Boolean(selectedItems.length || inputValue) && jsxRuntime.exports.jsx(StyledButton, Object.assign({
+          variant: "ghost_icon",
+          disabled: disabled || readOnly,
+          "aria-label": 'clear options',
+          title: "clear",
+          onClick: reset,
+          style: {
+            right: 32
+          }
+        }, {
+          children: jsxRuntime.exports.jsx(Icon$1, {
+            data: close,
+            size: 16
+          }, void 0)
+        }), void 0), jsxRuntime.exports.jsx(StyledButton, Object.assign({
           variant: "ghost_icon"
         }, getToggleButtonProps({
           disabled: disabled || readOnly
         }), {
           "aria-label": 'toggle options',
-          density: density
+          title: "open"
         }, {
           children: jsxRuntime.exports.jsx(Icon$1, {
             data: isOpen ? arrow_drop_up : arrow_drop_down
@@ -17960,8 +18153,6 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect(_a, ref) {
             index: index,
             disabled: disabled
           }), {
-            density: density
-          }, {
             children: [jsxRuntime.exports.jsx(CheckboxInput, {
               checked: selectedItems.includes(item),
               value: item,
@@ -17978,8 +18169,8 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect(_a, ref) {
   }), void 0);
 });
 
-var StyledCheckbox = styled__default['default'].label.withConfig({
-  displayName: "Checkbox__StyledCheckbox",
+var StyledLabel$2 = styled__default['default'].label.withConfig({
+  displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
 })(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref) {
   var disabled = _ref.disabled;
@@ -17997,7 +18188,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_a, ref) {
       className = _a.className,
       rest = __rest(_a, ["label", "disabled", "indeterminate", "className"]);
 
-  return jsxRuntime.exports.jsxs(StyledCheckbox, Object.assign({
+  return label ? jsxRuntime.exports.jsxs(StyledLabel$2, Object.assign({
     disabled: disabled,
     className: className
   }, {
@@ -18005,9 +18196,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_a, ref) {
       disabled: disabled,
       ref: ref,
       indeterminate: indeterminate
-    }), void 0), label && jsxRuntime.exports.jsx(LabelText$1, {
+    }), void 0), jsxRuntime.exports.jsx(LabelText$1, {
       children: label
     }, void 0)]
+  }), void 0) : jsxRuntime.exports.jsx(CheckboxInput, Object.assign({}, rest, {
+    disabled: disabled,
+    ref: ref,
+    indeterminate: indeterminate
   }), void 0);
 });
 Checkbox.displayName = 'Checkbox';
@@ -18018,15 +18213,23 @@ var _tokens$colors$intera$1 = tokens$6.colors.interactive,
     focusOutlineColor$1 = _tokens$colors$intera$1.focus.rgba,
     disabledText = _tokens$colors$intera$1.disabled__text.rgba,
     labelTypography$1 = tokens$6.typography.navigation.menu_title,
-    medium_small = tokens$6.spacings.comfortable.medium_small;
+    _tokens$spacings$comf = tokens$6.spacings.comfortable,
+    medium_small$1 = _tokens$spacings$comf.medium_small,
+    x_small = _tokens$spacings$comf.x_small,
+    _tokens$clickbounds = tokens$6.clickbounds,
+    clicboundSize = _tokens$clickbounds.default__base,
+    compactClickboundSize = _tokens$clickbounds.compact__standard;
 var comfortable$1 = {
   background: primaryColor,
   typography: labelTypography$1,
   spacings: {
-    bottom: medium_small,
-    top: medium_small,
-    left: medium_small,
-    right: medium_small
+    bottom: medium_small$1,
+    top: medium_small$1,
+    left: medium_small$1,
+    right: medium_small$1
+  },
+  clickbound: {
+    height: clicboundSize
   },
   states: {
     hover: {
@@ -18041,7 +18244,38 @@ var comfortable$1 = {
         style: 'dashed',
         width: '1px',
         color: focusOutlineColor$1,
-        offset: '4px'
+        offset: '11px'
+      }
+    }
+  },
+  entities: {
+    label: {
+      spacings: {
+        left: medium_small$1
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        bottom: x_small,
+        top: x_small,
+        left: x_small,
+        right: x_small
+      },
+      clickbound: {
+        height: compactClickboundSize
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            style: 'dashed',
+            width: '1px',
+            color: focusOutlineColor$1,
+            offset: '3px'
+          }
+        }
       }
     }
   }
@@ -18056,16 +18290,26 @@ var Input$2 = styled__default['default'].input.attrs(function (_ref) {
 }).withConfig({
   displayName: "Radio__Input",
   componentId: "sc-we59oz-0"
-})(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], outlineTemplate(comfortable$1.states.focus.outline));
-var StyledRadio = styled__default['default'].label.withConfig({
-  displayName: "Radio__StyledRadio",
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], function (_ref2) {
+  var theme = _ref2.theme,
+      iconSize = _ref2.iconSize;
+  return parseFloat(theme.clickbound.height) / iconSize;
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return outlineTemplate(theme.states.focus.outline);
+});
+var StyledLabel$1 = styled__default['default'].label.withConfig({
+  displayName: "Radio__StyledLabel",
   componentId: "sc-we59oz-1"
-})(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref2) {
-  var disabled = _ref2.disabled;
+})(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 });
-var StyledPath = styled__default['default'].path.attrs(function (_ref3) {
-  var icon = _ref3.icon;
+var StyledPath = styled__default['default'].path.attrs(function (_ref6) {
+  var icon = _ref6.icon;
   return {
     fillRule: 'evenodd',
     clipRule: 'evenodd',
@@ -18075,10 +18319,10 @@ var StyledPath = styled__default['default'].path.attrs(function (_ref3) {
   displayName: "Radio__StyledPath",
   componentId: "sc-we59oz-2"
 })([""]);
-var Svg = styled__default['default'].svg.attrs(function (_ref4) {
-  var height = _ref4.height,
-      width = _ref4.width,
-      fill = _ref4.fill;
+var Svg = styled__default['default'].svg.attrs(function (_ref7) {
+  var height = _ref7.height,
+      width = _ref7.width,
+      fill = _ref7.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
@@ -18089,16 +18333,22 @@ var Svg = styled__default['default'].svg.attrs(function (_ref4) {
 }).withConfig({
   displayName: "Radio__Svg",
   componentId: "sc-we59oz-3"
-})([""]);
+})(["grid-area:input;pointer-events:none;"]);
 var LabelText = styled__default['default'].span.withConfig({
   displayName: "Radio__LabelText",
   componentId: "sc-we59oz-4"
-})(["", ""], typographyTemplate(comfortable$1.typography));
+})(["", " ", ""], typographyTemplate(comfortable$1.typography), spacingsTemplate(comfortable$1.entities.label.spacings));
 var InputWrapper = styled__default['default'].span.withConfig({
   displayName: "Radio__InputWrapper",
   componentId: "sc-we59oz-5"
-})(["", " display:inline-flex;border-radius:50%;@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], spacingsTemplate(comfortable$1.spacings), function (_ref5) {
-  var disabled = _ref5.disabled;
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref8) {
+  var theme = _ref8.theme;
+  return spacingsTemplate(theme.spacings);
+}, function (_ref9) {
+  var disabled = _ref9.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
   return disabled ? 'transparent' : comfortable$1.states.hover.background;
 });
 var Radio = /*#__PURE__*/React.forwardRef(function Radio(_a, ref) {
@@ -18108,36 +18358,58 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(_a, ref) {
       className = _a.className,
       rest = __rest(_a, ["label", "disabled", "className"]);
 
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
+  }, comfortable$1);
   var iconSize = 24;
   var fill = disabled ? comfortable$1.states.disabled.background : comfortable$1.background;
-  return jsxRuntime.exports.jsxs(StyledRadio, Object.assign({
-    disabled: disabled,
-    className: className
+  var renderSVG = React.useMemo(function () {
+    return jsxRuntime.exports.jsxs(Svg, Object.assign({
+      width: iconSize,
+      height: iconSize,
+      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+      fill: fill,
+      "aria-hidden": true
+    }, {
+      children: [jsxRuntime.exports.jsx(StyledPath, {
+        icon: radio_button_selected,
+        name: "selected"
+      }, void 0), jsxRuntime.exports.jsx(StyledPath, {
+        icon: radio_button_unselected,
+        name: "unselected"
+      }, void 0)]
+    }), void 0);
+  }, [fill]);
+  return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
+    theme: token
   }, {
-    children: [jsxRuntime.exports.jsxs(InputWrapper, Object.assign({
+    children: label ? jsxRuntime.exports.jsxs(StyledLabel$1, Object.assign({
+      disabled: disabled,
+      className: className
+    }, {
+      children: [jsxRuntime.exports.jsxs(InputWrapper, Object.assign({
+        disabled: disabled
+      }, {
+        children: [jsxRuntime.exports.jsx(Input$2, Object.assign({}, rest, {
+          ref: ref,
+          disabled: disabled,
+          iconSize: iconSize
+        }), void 0), renderSVG]
+      }), void 0), jsxRuntime.exports.jsx(LabelText, {
+        children: label
+      }, void 0)]
+    }), void 0) : jsxRuntime.exports.jsxs(InputWrapper, Object.assign({
       disabled: disabled
     }, {
       children: [jsxRuntime.exports.jsx(Input$2, Object.assign({}, rest, {
         ref: ref,
-        disabled: disabled
-      }), void 0), jsxRuntime.exports.jsxs(Svg, Object.assign({
-        width: iconSize,
-        height: iconSize,
-        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
-        fill: fill,
-        "aria-hidden": true
-      }, {
-        children: [jsxRuntime.exports.jsx(StyledPath, {
-          icon: radio_button_selected,
-          name: "selected"
-        }, void 0), jsxRuntime.exports.jsx(StyledPath, {
-          icon: radio_button_unselected,
-          name: "unselected"
-        }, void 0)]
-      }), void 0)]
-    }), void 0), label && jsxRuntime.exports.jsx(LabelText, {
-      children: label
-    }, void 0)]
+        disabled: disabled,
+        iconSize: iconSize
+      }), void 0), renderSVG]
+    }), void 0)
   }), void 0);
 });
 Radio.displayName = 'Radio';
@@ -18153,7 +18425,7 @@ var BaseInputWrapper = styled__default['default'].span.withConfig({
 
   var _a, _b;
 
-  return styled.css(["width:", ";height:", ";border-radius:50%;position:relative;&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}"], width, height, (_a = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _a === void 0 ? void 0 : _a.top, (_b = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _b === void 0 ? void 0 : _b.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height);
+  return styled.css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;pointer-events:none;&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}"], width, height, (_a = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _a === void 0 ? void 0 : _a.top, (_b = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _b === void 0 ? void 0 : _b.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height);
 });
 var BaseInput = styled__default['default'].input.attrs(function (_ref2) {
   var _ref2$type = _ref2.type,
@@ -18165,9 +18437,14 @@ var BaseInput = styled__default['default'].input.attrs(function (_ref2) {
   displayName: "Switchstyles__BaseInput",
   componentId: "sc-x39lde-1"
 })(function (_ref3) {
-  var theme = _ref3.theme;
-  return styled.css(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}"], outlineTemplate(theme.states.focus.outline));
+  var disabled = _ref3.disabled,
+      theme = _ref3.theme;
+  return styled.css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline));
 });
+var GridWrapper = styled__default['default'].span.withConfig({
+  displayName: "Switchstyles__GridWrapper",
+  componentId: "sc-x39lde-2"
+})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;"]);
 
 var Wrapper$1 = styled__default['default'](BaseInputWrapper).withConfig({
   displayName: "SwitchSmall__Wrapper",
@@ -18210,7 +18487,7 @@ var SwitchSmall = /*#__PURE__*/React.forwardRef(function SwitchSmall(_a, ref) {
   var disabled = _a.disabled,
       rest = __rest(_a, ["disabled"]);
 
-  return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
+  return jsxRuntime.exports.jsxs(GridWrapper, {
     children: [jsxRuntime.exports.jsx(Input$1, Object.assign({}, rest, {
       ref: ref,
       disabled: disabled
@@ -18269,7 +18546,7 @@ var SwitchDefault = /*#__PURE__*/React.forwardRef(function SwitchDefault(_a, ref
   var disabled = _a.disabled,
       rest = __rest(_a, ["disabled"]);
 
-  return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
+  return jsxRuntime.exports.jsxs(GridWrapper, {
     children: [jsxRuntime.exports.jsx(Input, Object.assign({}, rest, {
       ref: ref,
       disabled: disabled
@@ -18300,7 +18577,7 @@ var _tokens$colors = tokens$6.colors,
     labelTypography = tokens$6.typography.navigation.menu_title,
     clickbounds = tokens$6.clickbounds,
     boxShadow = tokens$6.elevation.raised,
-    small = tokens$6.spacings.comfortable.small,
+    medium_small = tokens$6.spacings.comfortable.medium_small,
     _tokens$shape = tokens$6.shape,
     circle = _tokens$shape.circle,
     compactIconButton = _tokens$shape._modes.compact.icon_button;
@@ -18319,7 +18596,7 @@ var comfortable = {
   entities: {
     label: {
       spacings: {
-        left: small
+        left: medium_small
       }
     },
     track: {
@@ -18396,8 +18673,7 @@ var comfortable = {
         width: '1px',
         type: 'outline',
         style: 'dashed',
-        color: focusOutlineColor,
-        offset: '2px'
+        color: focusOutlineColor
       }
     },
     hover: {
@@ -18411,8 +18687,8 @@ var comfortable = {
   }
 };
 
-var StyledSwitch = styled__default['default'].label.withConfig({
-  displayName: "Switch__StyledSwitch",
+var StyledLabel = styled__default['default'].label.withConfig({
+  displayName: "Switch__StyledLabel",
   componentId: "sc-sdaahx-0"
 })(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;"], function (_ref) {
   var isDisabled = _ref.isDisabled;
@@ -18440,11 +18716,11 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(_a, ref) {
   var overrideDensity = size === 'small' ? 'compact' : density;
   var token = useToken({
     density: overrideDensity
-  }, comfortable)();
+  }, comfortable);
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
-    children: jsxRuntime.exports.jsxs(StyledSwitch, Object.assign({
+    children: label ? jsxRuntime.exports.jsxs(StyledLabel, Object.assign({
       isDisabled: disabled,
       className: className
     }, {
@@ -18459,6 +18735,14 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(_a, ref) {
       }), void 0), label && jsxRuntime.exports.jsx(Label, {
         children: label
       }, void 0)]
+    }), void 0) : size === 'small' ? jsxRuntime.exports.jsx(SwitchSmall, Object.assign({
+      disabled: disabled
+    }, rest, {
+      ref: ref
+    }), void 0) : jsxRuntime.exports.jsx(SwitchDefault, Object.assign({
+      disabled: disabled
+    }, rest, {
+      ref: ref
     }), void 0)
   }), void 0);
 });