@equinor/eds-core-react 0.13.1 → 0.14.1

package/dist/core-react.umd.js

@@ -360,6 +360,17 @@
 	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)
@@ -2179,6 +2190,11 @@
 	        minHeight: '24px',
 	        minWidth: '2px',
 	        borderRadius: ''
+	      },
+	      circle: {
+	        minHeight: '24px',
+	        minWidth: '24px',
+	        borderRadius: '100px'
 	      }
 	    }
 	  },
@@ -2251,7 +2267,7 @@
 	    xx_small: '2px'
 	  }
 	};
-	var typography$i = {
+	var typography$j = {
 	  heading: {
 	    h1_bold: {
 	      color: 'rgba(61, 61, 61, 1)',
@@ -2386,7 +2402,7 @@
 	      color: 'rgba(61, 61, 61, 1)',
 	      fontFamily: 'Equinor',
 	      fontSize: '1.000rem',
-	      fontWeight: 700,
+	      fontWeight: 400,
 	      letterSpacing: '0.013em',
 	      lineHeight: '1.000em',
 	      textAlign: 'left'
@@ -2596,6 +2612,54 @@
 	      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)',
@@ -2646,7 +2710,7 @@
 	  interactions: interactions,
 	  shape: shape$3,
 	  spacings: spacings$7,
-	  typography: typography$i
+	  typography: typography$j
 	};
 
 	var buttonTypography = tokens$6.typography.navigation.button,
@@ -2661,9 +2725,9 @@
 	    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,
@@ -3170,9 +3234,9 @@
 	    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,
@@ -3209,6 +3273,11 @@
 	      border: {
 	        color: 'transparent'
 	      }
+	    },
+	    focus: {
+	      outline: {
+	        offset: '0px'
+	      }
 	    }
 	  },
 	  modes: {
@@ -3252,7 +3321,7 @@
 	  }
 	});
 
-	var token$7 = {
+	var token$6 = {
 	  primary: {
 	    contained: primary$9,
 	    outlined: primary$8,
@@ -3397,6 +3466,15 @@
 	  });
 	};
 
+	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;
@@ -5747,7 +5825,7 @@
 	    if (defaultId == null) {
 	      setDefaultId("eds-".concat(type ? type + "-" : '').concat(Math.round(Math.random() * 1e5)));
 	    }
-	  }, [defaultId]);
+	  }, [defaultId, type]);
 	  return id;
 	};
 
@@ -5814,6 +5892,15 @@
 	  }, [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"
@@ -5899,14 +5986,14 @@
 	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);
 	  }
 	};
 
@@ -5927,7 +6014,7 @@
 	  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,
@@ -5949,7 +6036,7 @@
 
 	  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;
@@ -5974,10 +6061,10 @@
 	  }), 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,
@@ -6040,7 +6127,7 @@
 	    return quickVariants[variantName];
 	  }
 
-	  return typography$h[group][variantName];
+	  return typography$i[group][variantName];
 	};
 
 	var findColor = function findColor() {
@@ -6106,9 +6193,11 @@
 	  }), 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,
@@ -6180,33 +6269,45 @@
 	  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"]);
@@ -6244,18 +6345,6 @@
 	  }), 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"
@@ -6284,7 +6373,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, applyMutations(variant, token$6))();
+	  }, applyVariant(variant, tableCell));
 	  return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
 	    theme: token
 	  }, {
@@ -6296,7 +6385,9 @@
 	  }), 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,
@@ -6369,9 +6460,7 @@
 	  modes: {
 	    compact: {
 	      height: '32px',
-	      typography: {
-	        lineHeight: '1rem'
-	      }
+	      typography: compactTypography.table.cell_header
 	    }
 	  }
 	};
@@ -6415,7 +6504,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, token$5)();
+	  }, token$5);
 	  return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
 	    theme: token
 	  }, {
@@ -6519,8 +6608,10 @@
 
 	  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
+	      }
 	    }
 	  };
 	});
@@ -6567,9 +6658,9 @@
 	    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) {
@@ -6596,7 +6687,7 @@
 	    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)
@@ -6613,7 +6704,7 @@
 		__proto__: null,
 		baseDivider: baseDivider$1,
 		divider: divider$1,
-		small: small$8,
+		small: small$7,
 		medium: medium$3
 	});
 
@@ -6707,21 +6798,21 @@
 	    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: {
@@ -6737,6 +6828,10 @@
 	        color: disabled__text.rgba
 	      }
 	    },
+	    readOnly: {
+	      background: 'transparent',
+	      boxShadow: 'none'
+	    },
 	    active: {
 	      outline: {
 	        type: 'outline',
@@ -6761,10 +6856,10 @@
 	    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
 	      }
 	    }
 	  }
@@ -6863,8 +6958,9 @@
 	      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,
@@ -6883,7 +6979,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, inputVariant)();
+	  }, inputVariant);
 	  var inputProps = Object.assign({
 	    ref: ref,
 	    type: type,
@@ -6935,36 +7031,36 @@
 	  }
 	};
 
-	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,
@@ -6972,18 +7068,18 @@
 	    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
@@ -6991,10 +7087,10 @@
 	});
 
 	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: {
@@ -7004,9 +7100,9 @@
 	    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: {
@@ -7017,11 +7113,15 @@
 	        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: {
@@ -7036,10 +7136,10 @@
 	  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
 	      }
 	    }
 	  }
@@ -7137,7 +7237,7 @@
 	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,
@@ -7214,9 +7314,10 @@
 	  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",
@@ -7242,22 +7343,41 @@
 	  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,
@@ -7268,20 +7388,17 @@
 	    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({
@@ -7290,7 +7407,8 @@
 	        children: unit
 	      }), void 0), inputIcon && jsxRuntime.exports.jsx(InputIcon, Object.assign({
 	        isDisabled: disabled,
-	        variant: variant
+	        variant: variant,
+	        size: iconSize
 	      }, {
 	        children: inputIcon
 	      }), void 0)]
@@ -7300,10 +7418,10 @@
 
 	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: {
@@ -7357,10 +7475,10 @@
 
 	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,
@@ -7435,10 +7553,6 @@
 	  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,
@@ -7463,11 +7577,10 @@
 	  }, 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({
@@ -7539,7 +7652,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, textfield$1)();
+	  }, textfield$1);
 	  return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
 	    theme: token
 	  }, {
@@ -7677,14 +7790,14 @@
 	  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,
@@ -8133,28 +8246,28 @@
 	  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',
@@ -8175,7 +8288,7 @@
 	  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',
@@ -8189,45 +8302,45 @@
 	  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,
@@ -8238,6 +8351,7 @@
 	    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: {
@@ -8258,7 +8372,7 @@
 	    header: {
 	      height: '48px',
 	      background: backgroundDefault,
-	      typography: typography$b,
+	      typography: typography$c,
 	      spacings: {
 	        left: mediumSpacing,
 	        right: mediumSpacing
@@ -8274,12 +8388,12 @@
 	          }
 	        },
 	        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
 	          })
 	        },
@@ -8295,6 +8409,11 @@
 	        right: mediumSpacing,
 	        top: mediumSpacing
 	      }
+	    },
+	    icon: {
+	      typography: {
+	        color: defaultIconColor
+	      }
 	    }
 	  }
 	};
@@ -8323,13 +8442,10 @@
 	  }), 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,
@@ -8345,7 +8461,7 @@
 	}).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) {
@@ -8356,11 +8472,13 @@
 	  }) : 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"
@@ -8410,8 +8528,8 @@
 	  };
 
 	  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"));
@@ -8769,7 +8887,7 @@
 	}).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) {
@@ -8894,21 +9012,19 @@
 	}, 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
 	  }, {
@@ -8919,26 +9035,23 @@
 	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"
@@ -8959,14 +9072,11 @@
 	});
 	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
 	  });
@@ -8982,12 +9092,9 @@
 	})(["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, {
@@ -9001,12 +9108,9 @@
 	})(["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, {
@@ -9051,11 +9155,11 @@
 	    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"]);
@@ -9252,16 +9356,13 @@
 	})(["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",
@@ -9283,19 +9384,18 @@
 	})(["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",
@@ -9314,8 +9414,8 @@
 
 	var background$a = tokens$6.colors.ui.background__scrim.rgba;
 	var scrim = {
-	  width: '100vw',
-	  height: '100vh',
+	  width: '100%',
+	  height: '100%',
 	  background: background$a
 	};
 
@@ -9341,6 +9441,8 @@
 	    isDismissable: isDismissable,
 	    ref: ref
 	  });
+	  var overflowState = document.body.style.overflow;
+	  useHideBodyScroll(overflowState);
 	  useGlobalKeyPress('Escape', function (e) {
 	    if (isDismissable && onClose) {
 	      onClose(e, false);
@@ -9379,27 +9481,31 @@
 	    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',
@@ -9437,17 +9543,10 @@
 	          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
 	  }
 	};
 
@@ -9472,11 +9571,9 @@
 	      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
@@ -9489,12 +9586,12 @@
 	      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"]);
@@ -9513,9 +9610,9 @@
 	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: {
@@ -9559,15 +9656,12 @@
 	      _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
@@ -9595,10 +9689,10 @@
 	  }), 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,
@@ -9626,8 +9720,8 @@
 	    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
@@ -9743,9 +9837,9 @@
 	}).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;
 
@@ -9754,14 +9848,14 @@
 	      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;"]);
@@ -9901,7 +9995,7 @@
 	    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,
@@ -9914,8 +10008,8 @@
 	    height: '48px'
 	  },
 	  spacings: {
-	    left: small$3,
-	    right: small$3,
+	    left: small$2,
+	    right: small$2,
 	    top: '6px',
 	    bottom: '6px'
 	  },
@@ -9964,11 +10058,6 @@
 	  }
 	};
 
-	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,
@@ -9987,7 +10076,7 @@
 	  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",
@@ -10001,7 +10090,7 @@
 	  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,
@@ -10095,7 +10184,7 @@
 	  };
 
 	  var isFocused = state.isFocused;
-	  var size = 16;
+	  var size = 24;
 	  var containerProps = {
 	    isFocused: isFocused,
 	    className: className,
@@ -10146,14 +10235,14 @@
 	  };
 	  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)]
@@ -10307,8 +10396,8 @@
 	    _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 {
@@ -10364,7 +10453,7 @@
 	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) {
@@ -10383,7 +10472,7 @@
 	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) {
@@ -10624,9 +10713,9 @@
 	    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), {
@@ -10699,9 +10788,10 @@
 	      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 !== '';
@@ -10718,7 +10808,7 @@
 	    return function () {
 	      clearTimeout(openTimer.current);
 	    };
-	  }, []);
+	  }, [clearTimeout]);
 
 	  var openTooltip = function openTooltip() {
 	    if (shouldOpen) {
@@ -10745,15 +10835,16 @@
 	  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({
@@ -10784,9 +10875,9 @@
 	    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 = {
@@ -10826,12 +10917,17 @@
 	  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 {
@@ -10840,9 +10936,15 @@
 	}).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,
@@ -10850,11 +10952,10 @@
 	      _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),
@@ -10877,14 +10978,15 @@
 	    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);
@@ -10895,11 +10997,11 @@
 
 	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,
@@ -10985,12 +11087,12 @@
 
 	  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();
 	    }
 	  });
@@ -11045,11 +11147,9 @@
 	})(["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, {
@@ -11148,11 +11248,11 @@
 	  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;
@@ -11160,12 +11260,15 @@
 	      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",
@@ -11183,10 +11286,10 @@
 	  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;
@@ -11194,7 +11297,10 @@
 	  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"
 	  }, {
@@ -11206,22 +11312,25 @@
 	      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({
@@ -11237,20 +11346,21 @@
 	    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;
@@ -11629,7 +11739,7 @@
 	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,
@@ -11713,7 +11823,7 @@
 	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
@@ -11722,29 +11832,30 @@
 	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;
@@ -11809,16 +11920,16 @@
 	    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'
 	  },
@@ -11876,8 +11987,8 @@
 	      spacings: {
 	        left: large,
 	        right: large,
-	        top: small$2,
-	        bottom: small$2
+	        top: small$1,
+	        bottom: small$1
 	      }
 	    }
 	  },
@@ -11888,8 +11999,8 @@
 	          spacings: {
 	            left: large,
 	            right: large,
-	            top: small$2,
-	            bottom: small$2
+	            top: small$1,
+	            bottom: small$1
 	          }
 	        }
 	      }
@@ -11922,7 +12033,7 @@
 	  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",
@@ -12049,8 +12160,9 @@
 
 	    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;
@@ -12145,7 +12257,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, menu)();
+	  }, menu);
 
 	  var _usePopper = usePopper(anchorEl, containerEl, null, placement, 4),
 	      styles = _usePopper.styles,
@@ -12212,13 +12324,13 @@
 	  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: {
@@ -12324,8 +12436,7 @@
 	      _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
 
@@ -12351,12 +12462,19 @@
 	    }
 	  };
 
+	  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"
@@ -12423,21 +12541,21 @@
 	});
 
 	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'
 	      }
@@ -12469,8 +12587,8 @@
 	      entities: {
 	        input: {
 	          spacings: {
-	            left: x_small$1,
-	            right: x_small$1,
+	            left: x_small$2,
+	            right: x_small$2,
 	            top: '0',
 	            bottom: '0'
 	          }
@@ -12509,7 +12627,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, nativeselect)();
+	  }, nativeselect);
 	  var containerProps = {
 	    ref: ref,
 	    className: className
@@ -13977,7 +14095,7 @@
 	}
 	/**
 	 * 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
@@ -14356,6 +14474,12 @@
 	  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);
@@ -14475,6 +14599,8 @@
 	          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
 
@@ -14500,7 +14626,7 @@
 	              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];
@@ -14549,7 +14675,7 @@
 	            _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,
@@ -14733,7 +14859,7 @@
 	            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;
@@ -14801,10 +14927,10 @@
 	        _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
+	            });
+	          }
 	        });
 	      };
 
@@ -14822,7 +14948,7 @@
 	            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 = {};
@@ -14897,7 +15023,7 @@
 	            _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,
@@ -14922,7 +15048,7 @@
 	            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);
@@ -15430,9 +15556,9 @@
 	    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;
 	    },
@@ -15518,6 +15644,7 @@
 	  }
 	}
 
+	var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
 	var dropdownDefaultStateValues = {
 	  highlightedIndex: -1,
 	  isOpen: false,
@@ -15711,9 +15838,9 @@
 	  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) {
@@ -15927,11 +16054,11 @@
 	      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;
 	    }
 
@@ -16060,41 +16187,40 @@
 
 	  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.
@@ -16104,32 +16230,21 @@
 	 * @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;
@@ -16422,6 +16537,11 @@
 	}
 	/* 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) {
@@ -16592,8 +16712,8 @@
 
 	        if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
 	        ) {
-	            return;
-	          }
+	          return;
+	        }
 
 	        event.preventDefault();
 	        dispatch({
@@ -16618,7 +16738,7 @@
 	        _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,
@@ -16645,7 +16765,7 @@
 	        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,
@@ -16699,7 +16819,7 @@
 	        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({
@@ -16729,7 +16849,7 @@
 	        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,
@@ -16793,7 +16913,7 @@
 	        _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,
@@ -16933,9 +17053,7 @@
 	  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;
 	  }
 
@@ -17152,6 +17270,8 @@
 	  return _extends({}, state, changes);
 	}
 
+	var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
+	    _excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
 	useMultipleSelection.stateChangeTypes = stateChangeTypes;
 
 	function useMultipleSelection(userProps) {
@@ -17281,7 +17401,7 @@
 	        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);
@@ -17322,7 +17442,7 @@
 	        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,
@@ -17401,12 +17521,12 @@
 	    _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,
@@ -17419,7 +17539,7 @@
 	    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',
@@ -17427,7 +17547,10 @@
 	  },
 	  states: {
 	    hover: {
-	      background: colors.ui.background__light.rgba
+	      background: colors.ui.background__medium.rgba
+	    },
+	    active: {
+	      background: colors.interactive.primary__selected_highlight.rgba
 	    }
 	  },
 	  entities: {
@@ -17493,23 +17616,19 @@
 	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",
@@ -17550,7 +17669,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, select)();
+	  }, select);
 	  React.useEffect(function () {
 	    setInputItems(items);
 	  }, [items]);
@@ -17563,6 +17682,13 @@
 	        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
 	  };
 
@@ -17580,7 +17706,17 @@
 	      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
@@ -17597,14 +17733,30 @@
 	        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
@@ -17613,14 +17765,13 @@
 	      }), 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));
 	        })
@@ -17635,17 +17786,23 @@
 	    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: {
@@ -17667,17 +17824,20 @@
 	  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: {
@@ -17714,14 +17874,21 @@
 	}).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',
@@ -17732,15 +17899,15 @@
 	}).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) {
@@ -17754,7 +17921,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, checkbox)();
+	  }, checkbox);
 	  var iconSize = 24;
 	  var fill = disabled ? checkbox.states.disabled.background : checkbox.background;
 	  var inputWrapperProps = {
@@ -17768,7 +17935,9 @@
 	    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),
@@ -17833,7 +18002,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, multiSelect)();
+	  }, multiSelect);
 	  var multipleSelectionProps = {
 	    initialSelectedItems: initialSelectedItems,
 	    onSelectedItemsChange: function onSelectedItemsChange(changes) {
@@ -17853,7 +18022,8 @@
 	      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) {
@@ -17916,9 +18086,17 @@
 	      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
 	  }, {
@@ -17936,14 +18114,29 @@
 	          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
@@ -17958,8 +18151,6 @@
 	            index: index,
 	            disabled: disabled
 	          }), {
-	            density: density
-	          }, {
 	            children: [jsxRuntime.exports.jsx(CheckboxInput, {
 	              checked: selectedItems.includes(item),
 	              value: item,
@@ -17976,8 +18167,8 @@
 	  }), 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;
@@ -17995,7 +18186,7 @@
 	      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
 	  }, {
@@ -18003,9 +18194,13 @@
 	      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';
@@ -18016,15 +18211,23 @@
 	    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: {
@@ -18039,7 +18242,38 @@
 	        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'
+	          }
+	        }
 	      }
 	    }
 	  }
@@ -18054,16 +18288,26 @@
 	}).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',
@@ -18073,10 +18317,10 @@
 	  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',
@@ -18087,16 +18331,22 @@
 	}).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) {
@@ -18106,36 +18356,58 @@
 	      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';
@@ -18151,7 +18423,7 @@
 
 	  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,
@@ -18163,9 +18435,14 @@
 	  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",
@@ -18208,7 +18485,7 @@
 	  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
@@ -18267,7 +18544,7 @@
 	  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
@@ -18298,7 +18575,7 @@
 	    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;
@@ -18317,7 +18594,7 @@
 	  entities: {
 	    label: {
 	      spacings: {
-	        left: small
+	        left: medium_small
 	      }
 	    },
 	    track: {
@@ -18394,8 +18671,7 @@
 	        width: '1px',
 	        type: 'outline',
 	        style: 'dashed',
-	        color: focusOutlineColor,
-	        offset: '2px'
+	        color: focusOutlineColor
 	      }
 	    },
 	    hover: {
@@ -18409,8 +18685,8 @@
 	  }
 	};
 
-	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;
@@ -18438,11 +18714,11 @@
 	  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
 	    }, {
@@ -18457,6 +18733,14 @@
 	      }), 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);
 	});