@equinor/eds-core-react 0.19.0 → 0.20.1

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var styled = require('styled-components');
 var edsTokens = require('@equinor/eds-tokens');
-var jsxRuntime = require('react/jsx-runtime');
 var edsUtils = require('@equinor/eds-utils');
+var jsxRuntime = require('react/jsx-runtime');
 var edsIcons = require('@equinor/eds-icons');
 var ReactDom = require('react-dom');
 var downshift = require('downshift');
@@ -165,13 +165,10 @@ const button = {
   }
 };
 
-function _isPlaceholder$3(a) {
+function _isPlaceholder(a) {
   return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
 }
 
-var _isPlaceholder_1 = _isPlaceholder$3;
-
-var _isPlaceholder$2 = _isPlaceholder_1;
 /**
  * Optimized internal one-arity curry function.
  *
@@ -181,9 +178,9 @@ var _isPlaceholder$2 = _isPlaceholder_1;
  * @return {Function} The curried function.
  */
 
-function _curry1$2(fn) {
+function _curry1(fn) {
   return function f1(a) {
-    if (arguments.length === 0 || _isPlaceholder$2(a)) {
+    if (arguments.length === 0 || _isPlaceholder(a)) {
       return f1;
     } else {
       return fn.apply(this, arguments);
@@ -191,10 +188,6 @@ function _curry1$2(fn) {
   };
 }
 
-var _curry1_1 = _curry1$2;
-
-var _curry1$1 = _curry1_1;
-var _isPlaceholder$1 = _isPlaceholder_1;
 /**
  * Optimized internal two-arity curry function.
  *
@@ -204,32 +197,27 @@ var _isPlaceholder$1 = _isPlaceholder_1;
  * @return {Function} The curried function.
  */
 
-function _curry2$2(fn) {
+function _curry2(fn) {
   return function f2(a, b) {
     switch (arguments.length) {
       case 0:
         return f2;
 
       case 1:
-        return _isPlaceholder$1(a) ? f2 : _curry1$1(function (_b) {
+        return _isPlaceholder(a) ? f2 : _curry1(function (_b) {
           return fn(a, _b);
         });
 
       default:
-        return _isPlaceholder$1(a) && _isPlaceholder$1(b) ? f2 : _isPlaceholder$1(a) ? _curry1$1(function (_a) {
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f2 : _isPlaceholder(a) ? _curry1(function (_a) {
           return fn(_a, b);
-        }) : _isPlaceholder$1(b) ? _curry1$1(function (_b) {
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
           return fn(a, _b);
         }) : fn(a, b);
     }
   };
 }
 
-var _curry2_1 = _curry2$2;
-
-var _curry1 = _curry1_1;
-var _curry2$1 = _curry2_1;
-var _isPlaceholder = _isPlaceholder_1;
 /**
  * Optimized internal three-arity curry function.
  *
@@ -239,32 +227,32 @@ var _isPlaceholder = _isPlaceholder_1;
  * @return {Function} The curried function.
  */
 
-function _curry3$2(fn) {
+function _curry3(fn) {
   return function f3(a, b, c) {
     switch (arguments.length) {
       case 0:
         return f3;
 
       case 1:
-        return _isPlaceholder(a) ? f3 : _curry2$1(function (_b, _c) {
+        return _isPlaceholder(a) ? f3 : _curry2(function (_b, _c) {
           return fn(a, _b, _c);
         });
 
       case 2:
-        return _isPlaceholder(a) && _isPlaceholder(b) ? f3 : _isPlaceholder(a) ? _curry2$1(function (_a, _c) {
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f3 : _isPlaceholder(a) ? _curry2(function (_a, _c) {
           return fn(_a, b, _c);
-        }) : _isPlaceholder(b) ? _curry2$1(function (_b, _c) {
+        }) : _isPlaceholder(b) ? _curry2(function (_b, _c) {
           return fn(a, _b, _c);
         }) : _curry1(function (_c) {
           return fn(a, b, _c);
         });
 
       default:
-        return _isPlaceholder(a) && _isPlaceholder(b) && _isPlaceholder(c) ? f3 : _isPlaceholder(a) && _isPlaceholder(b) ? _curry2$1(function (_a, _b) {
+        return _isPlaceholder(a) && _isPlaceholder(b) && _isPlaceholder(c) ? f3 : _isPlaceholder(a) && _isPlaceholder(b) ? _curry2(function (_a, _b) {
           return fn(_a, _b, c);
-        }) : _isPlaceholder(a) && _isPlaceholder(c) ? _curry2$1(function (_a, _c) {
+        }) : _isPlaceholder(a) && _isPlaceholder(c) ? _curry2(function (_a, _c) {
           return fn(_a, b, _c);
-        }) : _isPlaceholder(b) && _isPlaceholder(c) ? _curry2$1(function (_b, _c) {
+        }) : _isPlaceholder(b) && _isPlaceholder(c) ? _curry2(function (_b, _c) {
           return fn(a, _b, _c);
         }) : _isPlaceholder(a) ? _curry1(function (_a) {
           return fn(_a, b, c);
@@ -277,22 +265,14 @@ function _curry3$2(fn) {
   };
 }
 
-var _curry3_1 = _curry3$2;
-
-function _isObject$1(x) {
-  return Object.prototype.toString.call(x) === '[object Object]';
-}
-
-var _isObject_1 = _isObject$1;
-
-function _has$1(prop, obj) {
+function _has(prop, obj) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
 }
 
-var _has_1 = _has$1;
+function _isObject(x) {
+  return Object.prototype.toString.call(x) === '[object Object]';
+}
 
-var _curry3$1 = _curry3_1;
-var _has = _has_1;
 /**
  * Creates a new object with the own properties of the two provided objects. If
  * a key exists in both objects, the provided function is applied to the key
@@ -319,7 +299,7 @@ var _has = _has_1;
  * @symb R.mergeWithKey(f, { x: 1, y: 2 }, { y: 5, z: 3 }) = { x: 1, y: f('y', 2, 5), z: 3 }
  */
 
-var mergeWithKey$1 = /*#__PURE__*/_curry3$1(function mergeWithKey(fn, l, r) {
+var mergeWithKey = /*#__PURE__*/_curry3(function mergeWithKey(fn, l, r) {
   var result = {};
   var k;
 
@@ -338,11 +318,6 @@ var mergeWithKey$1 = /*#__PURE__*/_curry3$1(function mergeWithKey(fn, l, r) {
   return result;
 });
 
-var mergeWithKey_1 = mergeWithKey$1;
-
-var _curry3 = _curry3_1;
-var _isObject = _isObject_1;
-var mergeWithKey = mergeWithKey_1;
 /**
  * Creates a new object with the own properties of the two provided objects.
  * If a key exists in both objects:
@@ -372,7 +347,7 @@ var mergeWithKey = mergeWithKey_1;
  *      //=> { a: true, b: true, c: { thing: 'bar', values: [10, 20, 15, 35] }}
  */
 
-var mergeDeepWithKey$1 = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
+var mergeDeepWithKey = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
   return mergeWithKey(function (k, lVal, rVal) {
     if (_isObject(lVal) && _isObject(rVal)) {
       return mergeDeepWithKey(fn, lVal, rVal);
@@ -382,10 +357,6 @@ var mergeDeepWithKey$1 = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj
   }, lObj, rObj);
 });
 
-var mergeDeepWithKey_1 = mergeDeepWithKey$1;
-
-var _curry2 = _curry2_1;
-var mergeDeepWithKey = mergeDeepWithKey_1;
 /**
  * Creates a new object with the own properties of the first object merged with
  * the own properties of the second object. If a key exists in both objects:
@@ -414,9 +385,6 @@ var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
   }, lObj, rObj);
 });
 
-var mergeDeepRight_1 = mergeDeepRight;
-var mergeDeepRight$1 = mergeDeepRight_1;
-
 const {
   colors: {
     text: {
@@ -451,7 +419,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight$1(button, {
+const primary$9 = mergeDeepRight(button, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -469,7 +437,7 @@ const primary$9 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$4 = mergeDeepRight$1(primary$9, {
+const secondary$4 = mergeDeepRight(primary$9, {
   background: secondaryColor$3,
   border: {
     color: secondaryColor$3
@@ -483,7 +451,7 @@ const secondary$4 = mergeDeepRight$1(primary$9, {
     }
   }
 });
-const danger$5 = mergeDeepRight$1(primary$9, {
+const danger$5 = mergeDeepRight(primary$9, {
   background: dangerColor$3,
   border: {
     color: dangerColor$3
@@ -536,7 +504,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight$1(button, {
+const primary$8 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$7
   },
@@ -565,7 +533,7 @@ const primary$8 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$3 = mergeDeepRight$1(primary$8, {
+const secondary$3 = mergeDeepRight(primary$8, {
   typography: {
     color: secondaryColor$2
   },
@@ -584,7 +552,7 @@ const secondary$3 = mergeDeepRight$1(primary$8, {
     }
   }
 });
-const danger$4 = mergeDeepRight$1(primary$8, {
+const danger$4 = mergeDeepRight(primary$8, {
   typography: {
     color: dangerColor$2
   },
@@ -637,7 +605,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight$1(button, {
+const primary$7 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$6
   },
@@ -656,7 +624,7 @@ const primary$7 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$2 = mergeDeepRight$1(primary$7, {
+const secondary$2 = mergeDeepRight(primary$7, {
   typography: {
     color: secondaryColor$1
   },
@@ -669,7 +637,7 @@ const secondary$2 = mergeDeepRight$1(primary$7, {
     }
   }
 });
-const danger$3 = mergeDeepRight$1(primary$7, {
+const danger$3 = mergeDeepRight(primary$7, {
   typography: {
     color: dangerColor$1
   },
@@ -723,7 +691,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$6 = mergeDeepRight$1(button, {
+const primary$6 = mergeDeepRight(button, {
   height: shape$3.icon_button.minHeight,
   width: shape$3.icon_button.minWidth,
   typography: {
@@ -779,7 +747,7 @@ const primary$6 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$1 = mergeDeepRight$1(primary$6, {
+const secondary$1 = mergeDeepRight(primary$6, {
   typography: {
     color: secondaryColor
   },
@@ -792,7 +760,7 @@ const secondary$1 = mergeDeepRight$1(primary$6, {
     }
   }
 });
-const danger$2 = mergeDeepRight$1(primary$6, {
+const danger$2 = mergeDeepRight(primary$6, {
   typography: {
     color: dangerColor
   },
@@ -834,7 +802,7 @@ const FullWidthCenterContent = styled__default["default"].span.withConfig({
 const FullWidthInner = styled__default["default"].span.withConfig({
   displayName: "InnerFullWidth__FullWidthInner",
   componentId: "sc-qeawkb-1"
-})(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}>:is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
+})(["height:100%;display:flex;align-items:center;> :is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}> :is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
 const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth(_ref, ref) {
   let {
     children
@@ -915,7 +883,7 @@ const getToken$1 = (variant, color) => {
 const Inner = styled__default["default"].span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
-})(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
+})(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& > :is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
 const ButtonBase = styled__default["default"].button.withConfig({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"
@@ -978,7 +946,7 @@ const Button = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
 });
 
 const {
-  typography: typography$g,
+  typography: typography$h,
   colors: colorsToken,
   interactions: {
     focused: {
@@ -989,7 +957,7 @@ const {
 const {
   heading,
   paragraph: paragraph$2
-} = typography$g;
+} = typography$h;
 const {
   interactive: {
     primary__resting: {
@@ -1015,7 +983,7 @@ const {
     }
   }
 } = colorsToken;
-const colors$7 = {
+const colors$8 = {
   primary: primary$5,
   secondary,
   danger: danger$1,
@@ -1071,12 +1039,12 @@ const findTypography = (variantName, group) => {
     return quickVariants[variantName];
   }
 
-  return typography$g[group][variantName];
+  return typography$h[group][variantName];
 };
 
 const findColor = function () {
   let inputColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  return typeof colors$7[inputColor] === 'undefined' ? inputColor : colors$7[inputColor];
+  return typeof colors$8[inputColor] === 'undefined' ? inputColor : colors$8[inputColor];
 };
 
 const toVariantName = function (variant) {
@@ -1297,7 +1265,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return mergeDeepRight$1(token, token.variants.numeric);
+      return mergeDeepRight(token, token.variants.numeric);
 
     default:
       return token;
@@ -1362,7 +1330,7 @@ const StyledTableCell$1 = styled__default["default"].td.withConfig({
     align
   } = theme;
   const backgroundColor = color === 'error' ? (_theme$validation$err = theme.validation.error) === null || _theme$validation$err === void 0 ? void 0 : _theme$validation$err.background : '';
-  const base = styled.css(["min-height:", ";height:", ";background:", ";vertical-align:", ";", " ", " ", ""], height, height, backgroundColor, align.vertical, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(border));
+  const base = styled.css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(border));
   return base;
 });
 const TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2, ref) {
@@ -1538,7 +1506,7 @@ const StyledTableCell = styled__default["default"].th.withConfig({
     sortStylingActive = styled.css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? styled.css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
   }
 
-  return styled.css(["min-height:", ";height:", ";background:", ";", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
+  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
 });
 const CellInner = styled__default["default"].div.withConfig({
   displayName: "HeaderCell__CellInner",
@@ -1745,8 +1713,8 @@ const {
   },
   spacings: {
     comfortable: {
-      small: spacingSmall$4,
-      medium: spacingMedium$8
+      small: spacingSmall$5,
+      medium: spacingMedium$9
     }
   }
 } = edsTokens.tokens;
@@ -1774,14 +1742,14 @@ const divider$1 = {
 };
 const small$7 = { ...baseDivider$1,
   spacings: {
-    top: spacingSmall$4,
-    bottom: reduceValueByDividerHeight(spacingSmall$4)
+    top: spacingSmall$5,
+    bottom: reduceValueByDividerHeight(spacingSmall$5)
   }
 };
 const medium$3 = { ...baseDivider$1,
   spacings: {
-    top: spacingMedium$8,
-    bottom: reduceValueByDividerHeight(spacingMedium$8)
+    top: spacingMedium$9,
+    bottom: reduceValueByDividerHeight(spacingMedium$9)
   }
 };
 
@@ -1882,7 +1850,7 @@ const {
       x_small: x_small$5
     }
   },
-  typography: typography$f,
+  typography: typography$g,
   shape: shape$2
 } = edsTokens.tokens;
 const input$2 = {
@@ -1894,7 +1862,7 @@ const input$2 = {
     top: '6px',
     bottom: '6px'
   },
-  typography: { ...typography$f.input.text,
+  typography: { ...typography$g.input.text,
     color: static_icons__default.rgba
   },
   entities: {
@@ -1946,7 +1914,7 @@ const input$2 = {
     }
   }
 };
-const error$4 = mergeDeepRight$1(input$2, {
+const error$4 = mergeDeepRight(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -1969,7 +1937,7 @@ const error$4 = mergeDeepRight$1(input$2, {
     }
   }
 });
-const warning$4 = mergeDeepRight$1(input$2, {
+const warning$4 = mergeDeepRight(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -1992,7 +1960,7 @@ const warning$4 = mergeDeepRight$1(input$2, {
     }
   }
 });
-const success$1 = mergeDeepRight$1(input$2, {
+const success$1 = mergeDeepRight(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -2031,7 +1999,7 @@ var tokens$6 = /*#__PURE__*/Object.freeze({
   inputToken: inputToken
 });
 
-const StyledInput = styled__default["default"].input.withConfig({
+const StyledInput$1 = styled__default["default"].input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "sc-1ykv024-0"
 })(_ref => {
@@ -2076,13 +2044,13 @@ const Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref2, ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledInput, { ...inputProps
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledInput$1, { ...inputProps
     })
   });
 });
 
 const {
-  colors: colors$6,
+  colors: colors$7,
   spacings: {
     comfortable: comfortable$6
   }
@@ -2103,24 +2071,24 @@ const input$1 = {
     }
   },
   default: {
-    color: colors$6.text.static_icons__tertiary.hex,
-    disabledColor: colors$6.interactive.disabled__fill.hex,
-    focusColor: colors$6.interactive.primary__resting.hex
+    color: colors$7.text.static_icons__tertiary.hex,
+    disabledColor: colors$7.interactive.disabled__fill.hex,
+    focusColor: colors$7.interactive.primary__resting.hex
   },
   error: {
-    color: colors$6.interactive.danger__resting.hex,
-    disabledColor: colors$6.interactive.disabled__fill.hex,
-    focusColor: colors$6.interactive.danger__hover.hex
+    color: colors$7.interactive.danger__resting.hex,
+    disabledColor: colors$7.interactive.disabled__fill.hex,
+    focusColor: colors$7.interactive.danger__hover.hex
   },
   warning: {
-    color: colors$6.interactive.warning__resting.hex,
-    disabledColor: colors$6.interactive.disabled__fill.hex,
-    focusColor: colors$6.interactive.warning__hover.hex
+    color: colors$7.interactive.warning__resting.hex,
+    disabledColor: colors$7.interactive.disabled__fill.hex,
+    focusColor: colors$7.interactive.warning__hover.hex
   },
   success: {
-    color: colors$6.interactive.success__resting.hex,
-    disabledColor: colors$6.interactive.disabled__fill.hex,
-    focusColor: colors$6.interactive.success__hover.hex
+    color: colors$7.interactive.success__resting.hex,
+    disabledColor: colors$7.interactive.disabled__fill.hex,
+    focusColor: colors$7.interactive.success__hover.hex
   }
 };
 
@@ -2182,8 +2150,8 @@ const InputIcon = /*#__PURE__*/react.forwardRef(function InputIcon(_ref2, ref) {
 });
 
 const {
-  colors: colors$5,
-  typography: typography$e,
+  colors: colors$6,
+  typography: typography$f,
   spacings: {
     comfortable: {
       small: small$5,
@@ -2192,12 +2160,12 @@ const {
   }
 } = edsTokens.tokens;
 const textfield$1 = {
-  background: colors$5.ui.background__light.hex,
+  background: colors$6.ui.background__light.hex,
   border: {
     type: 'border',
     radius: 0,
     width: '1px',
-    color: colors$5.text.static_icons__tertiary.hex
+    color: colors$6.text.static_icons__tertiary.hex
   },
   spacings: {
     left: small$5,
@@ -2208,7 +2176,7 @@ const textfield$1 = {
     focus: {
       outline: {
         width: '2px',
-        color: colors$5.interactive.primary__resting.hex,
+        color: colors$6.interactive.primary__resting.hex,
         style: 'solid',
         type: 'outline',
         offset: '0px'
@@ -2221,13 +2189,13 @@ const textfield$1 = {
   },
   entities: {
     unit: {
-      typography: { ...typography$e.input.label,
-        color: colors$5.text.static_icons__tertiary.hex
+      typography: { ...typography$f.input.label,
+        color: colors$6.text.static_icons__tertiary.hex
       },
       states: {
         disabled: {
           typography: {
-            color: colors$5.interactive.disabled__text.hex
+            color: colors$6.interactive.disabled__text.hex
           }
         }
       }
@@ -2249,13 +2217,13 @@ const error$3 = {
     type: 'border',
     radius: 0,
     width: '1px',
-    color: colors$5.interactive.danger__resting.hex
+    color: colors$6.interactive.danger__resting.hex
   },
   states: {
     focus: {
       outline: {
         width: '2px',
-        color: colors$5.interactive.danger__hover.hex,
+        color: colors$6.interactive.danger__hover.hex,
         style: 'solid',
         type: 'outline',
         offset: '0px'
@@ -2268,13 +2236,13 @@ const warning$3 = {
     type: 'border',
     radius: 0,
     width: '1px',
-    color: colors$5.interactive.warning__resting.hex
+    color: colors$6.interactive.warning__resting.hex
   },
   states: {
     focus: {
       outline: {
         width: '2px',
-        color: colors$5.interactive.warning__hover.hex,
+        color: colors$6.interactive.warning__hover.hex,
         style: 'solid',
         type: 'outline',
         offset: '0px'
@@ -2287,13 +2255,13 @@ const success = {
     type: 'border',
     radius: 0,
     width: '1px',
-    color: colors$5.interactive.success__resting.hex
+    color: colors$6.interactive.success__resting.hex
   },
   states: {
     focus: {
       outline: {
         width: '2px',
-        color: colors$5.interactive.success__hover.hex,
+        color: colors$6.interactive.success__hover.hex,
         style: 'solid',
         type: 'outline',
         offset: '0px'
@@ -2540,16 +2508,16 @@ const Field = /*#__PURE__*/react.forwardRef(function Field(_ref5, ref) {
 });
 
 const {
-  colors: colors$4,
+  colors: colors$5,
   spacings: {
     comfortable: comfortable$5
   },
-  typography: typography$d
+  typography: typography$e
 } = edsTokens.tokens;
 const label = {
-  background: colors$4.ui.background__light.rgba,
-  typography: { ...typography$d.input.label,
-    color: colors$4.text.static_icons__tertiary.rgba
+  background: colors$5.ui.background__light.rgba,
+  typography: { ...typography$e.input.label,
+    color: colors$5.text.static_icons__tertiary.rgba
   },
   spacings: {
     left: comfortable$5.small,
@@ -2560,7 +2528,7 @@ const label = {
   states: {
     disabled: {
       typography: {
-        color: colors$4.interactive.disabled__text.rgba
+        color: colors$5.interactive.disabled__text.rgba
       }
     }
   }
@@ -2604,15 +2572,15 @@ const Label$1 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
 }); // Label.displayName = 'eds-text-field-label'
 
 const {
-  colors: colors$3,
+  colors: colors$4,
   spacings: {
     comfortable: comfortable$4
   },
-  typography: typography$c
+  typography: typography$d
 } = edsTokens.tokens;
 const helperText = {
-  background: colors$3.ui.background__light.hex,
-  typography: typography$c.input.helper,
+  background: colors$4.ui.background__light.hex,
+  typography: typography$d.input.helper,
   spacings: {
     comfortable: {
       left: comfortable$4.small,
@@ -2628,24 +2596,24 @@ const helperText = {
     }
   },
   default: {
-    color: colors$3.text.static_icons__tertiary.hex,
-    disabledColor: colors$3.interactive.disabled__text.hex,
-    focusColor: colors$3.text.static_icons__tertiary.hex
+    color: colors$4.text.static_icons__tertiary.hex,
+    disabledColor: colors$4.interactive.disabled__text.hex,
+    focusColor: colors$4.text.static_icons__tertiary.hex
   },
   error: {
-    color: colors$3.interactive.danger__text.hex,
-    disabledColor: colors$3.interactive.disabled__text.hex,
-    focusColor: colors$3.interactive.danger__hover.hex
+    color: colors$4.interactive.danger__text.hex,
+    disabledColor: colors$4.interactive.disabled__text.hex,
+    focusColor: colors$4.interactive.danger__hover.hex
   },
   warning: {
-    color: colors$3.interactive.warning__text.hex,
-    disabledColor: colors$3.interactive.disabled__text.hex,
-    focusColor: colors$3.interactive.warning__hover.hex
+    color: colors$4.interactive.warning__text.hex,
+    disabledColor: colors$4.interactive.disabled__text.hex,
+    focusColor: colors$4.interactive.warning__hover.hex
   },
   success: {
-    color: colors$3.interactive.success__text.hex,
-    disabledColor: colors$3.interactive.disabled__text.hex,
-    focusColor: colors$3.interactive.success__hover.hex
+    color: colors$4.interactive.success__text.hex,
+    disabledColor: colors$4.interactive.disabled__text.hex,
+    focusColor: colors$4.interactive.success__hover.hex
   }
 };
 
@@ -2677,7 +2645,7 @@ const Variation = _ref => {
   return styled.css(["color:", ";"], color);
 };
 
-const Container$4 = styled__default["default"].div.withConfig({
+const Container$5 = styled__default["default"].div.withConfig({
   displayName: "HelperText__Container",
   componentId: "sc-1kfkyxg-0"
 })(["display:flex;align-items:flex-start;margin-top:", ";"], _ref2 => {
@@ -2713,7 +2681,7 @@ const TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelp
     disabledColor: helperVariant.disabledColor,
     focusColor: helperVariant.focusColor
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$4, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
     ref: ref,
     ...rest,
     spacings: spacings,
@@ -2732,7 +2700,7 @@ const TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelp
   });
 });
 
-const Container$3 = styled__default["default"].div.withConfig({
+const Container$4 = styled__default["default"].div.withConfig({
   displayName: "TextField__Container",
   componentId: "sc-o1nc07-0"
 })(["min-width:100px;width:100%;"]);
@@ -2796,7 +2764,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
   }, textfield$1);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(Container$3, { ...containerProps,
+    children: /*#__PURE__*/jsxRuntime.jsx(Container$4, { ...containerProps,
       children: /*#__PURE__*/jsxRuntime.jsxs(TextFieldProvider, {
         children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, { ...labelProps
         }), /*#__PURE__*/jsxRuntime.jsx(Field, { ...inputProps
@@ -2965,9 +2933,9 @@ const list = {
 };
 
 const {
-  typography: typography$b
+  typography: typography$c
 } = list;
-const StyledList$1 = styled__default["default"].ul.withConfig({
+const StyledList$2 = styled__default["default"].ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-v9d2hy-0"
 })(["", " ", ""], _ref => {
@@ -2975,7 +2943,7 @@ const StyledList$1 = styled__default["default"].ul.withConfig({
     as
   } = _ref;
   return as === 'ol' ? styled.css(["& ol{list-style-type:lower-alpha;}"]) : '';
-}, edsUtils.typographyTemplate(typography$b));
+}, edsUtils.typographyTemplate(typography$c));
 const List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   let {
     children,
@@ -2983,7 +2951,7 @@ const List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
     ...props
   } = _ref2;
   const as = variant === 'numbered' ? 'ol' : 'ul';
-  return /*#__PURE__*/jsxRuntime.jsx(StyledList$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledList$2, {
     as: as,
     ref: ref,
     ...props,
@@ -3009,7 +2977,7 @@ List$1.Item.displayName = 'List.Item';
 const {
   typography: {
     ui: {
-      accordion_header: typography$a
+      accordion_header: typography$b
     }
   },
   colors: {
@@ -3074,7 +3042,7 @@ const accordion = {
     header: {
       height: '48px',
       background: backgroundDefault,
-      typography: typography$a,
+      typography: typography$b,
       spacings: {
         left: mediumSpacing,
         right: mediumSpacing
@@ -3090,12 +3058,12 @@ const accordion = {
           }
         },
         disabled: {
-          typography: { ...typography$a,
+          typography: { ...typography$b,
             color: disabledColor$2
           }
         },
         active: {
-          typography: { ...typography$a,
+          typography: { ...typography$b,
             color: activatedColor
           }
         },
@@ -3468,7 +3436,7 @@ const {
   },
   spacings: {
     comfortable: {
-      medium: spacingMedium$7
+      medium: spacingMedium$8
     }
   },
   interactions: {
@@ -3481,8 +3449,8 @@ const token$1 = {
   entities: {
     panel: {
       spacings: {
-        top: spacingMedium$7,
-        bottom: spacingMedium$7
+        top: spacingMedium$8,
+        bottom: spacingMedium$8
       },
       states: {
         focus: {
@@ -3505,8 +3473,8 @@ const token$1 = {
         }
       },
       spacings: {
-        left: spacingMedium$7,
-        right: spacingMedium$7
+        left: spacingMedium$8,
+        right: spacingMedium$8
       },
       typography: {
         color: defaultColor,
@@ -3572,11 +3540,11 @@ const token$1 = {
 const Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
   let {
     activeTab = 0,
-    onChange,
+    onChange = () => null,
     onBlur,
     onFocus,
     variant = 'minWidth',
-    scrollable,
+    scrollable = false,
     id,
     ...props
   } = _ref;
@@ -3671,7 +3639,7 @@ const StyledTabList = styled__default["default"].div.attrs(() => ({
 })).withConfig({
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
-})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;&::-webkit-scrollbar{width:0;height:0;}}"], _ref => {
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;& ::-webkit-scrollbar{width:0;height:0;}}"], _ref => {
   let {
     variant
   } = _ref;
@@ -3873,12 +3841,12 @@ const {
   },
   spacings: {
     comfortable: {
-      medium: spacingMedium$6
+      medium: spacingMedium$7
     }
   },
   shape: {
     corners: {
-      borderRadius: borderRadius$7
+      borderRadius: borderRadius$8
     }
   }
 } = edsTokens.tokens;
@@ -3886,13 +3854,13 @@ const primary$4 = {
   background: background$c,
   border: {
     type: 'border',
-    radius: borderRadius$7
+    radius: borderRadius$8
   },
   spacings: {
-    left: spacingMedium$6,
-    bottom: spacingMedium$6,
-    right: spacingMedium$6,
-    top: spacingMedium$6
+    left: spacingMedium$7,
+    bottom: spacingMedium$7,
+    right: spacingMedium$7,
+    top: spacingMedium$7
   }
 };
 const info$2 = {
@@ -3919,7 +3887,7 @@ const {
 const StyledCard = styled__default["default"].div.withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], _ref => {
+})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;cursor:", ";", ";"], _ref => {
   let {
     background
   } = _ref;
@@ -3958,7 +3926,7 @@ const {
 const StyledCardActions = styled__default["default"].div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
   let {
     justifyContent
   } = _ref;
@@ -4038,7 +4006,7 @@ const {
 const StyledCardHeader = styled__default["default"].div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
-})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$3.right, spacings$3.left, spacings$3.left, spacings$3.top, spacings$3.bottom);
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";> :not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$3.right, spacings$3.left, spacings$3.left, spacings$3.top, spacings$3.bottom);
 const CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader(_ref, ref) {
   let {
     children,
@@ -4082,7 +4050,7 @@ Card.Media.displayName = 'Card.Media';
 Card.HeaderTitle.displayName = 'Card.HeaderTitle';
 
 const {
-  colors: colors$2,
+  colors: colors$3,
   spacings: {
     comfortable: comfortable$3
   },
@@ -4092,7 +4060,7 @@ const {
 } = edsTokens.tokens;
 const topbar = {
   height: '64px',
-  background: colors$2.ui.background__default.rgba,
+  background: colors$3.ui.background__default.rgba,
   typography: navigation.menu_title,
   spacings: {
     left: comfortable$3.xx_large,
@@ -4104,7 +4072,7 @@ const topbar = {
     type: 'bordergroup',
     bottom: {
       style: 'solid',
-      color: colors$2.ui.background__light.rgba,
+      color: colors$3.ui.background__light.rgba,
       width: '2px'
     }
   },
@@ -4310,7 +4278,7 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
 const {
   spacings: {
     comfortable: {
-      medium: spacingMedium$5
+      medium: spacingMedium$6
     }
   },
   typography: {
@@ -4330,7 +4298,7 @@ const {
   },
   shape: {
     corners: {
-      borderRadius: borderRadius$6
+      borderRadius: borderRadius$7
     }
   }
 } = edsTokens.tokens;
@@ -4340,18 +4308,18 @@ const dialog = {
   typography: accordion_header,
   border: {
     type: 'border',
-    radius: borderRadius$6
+    radius: borderRadius$7
   },
   spacings: {
-    bottom: spacingMedium$5
+    bottom: spacingMedium$6
   },
   entities: {
     children: {
       spacings: {
-        top: spacingMedium$5,
-        bottom: spacingMedium$5,
-        left: spacingMedium$5,
-        right: spacingMedium$5
+        top: spacingMedium$6,
+        bottom: spacingMedium$6,
+        left: spacingMedium$6,
+        right: spacingMedium$6
       }
     },
     title: {
@@ -4581,7 +4549,7 @@ const {
   },
   shape: {
     corners: {
-      borderRadius: borderRadius$5
+      borderRadius: borderRadius$6
     }
   },
   spacings: {
@@ -4591,10 +4559,10 @@ const {
       xxx_large
     }
   },
-  typography: typography$9
+  typography: typography$a
 } = edsTokens.tokens;
 const tableOfContents = {
-  typography: { ...typography$9.navigation.button,
+  typography: { ...typography$a.navigation.button,
     color: labelColor
   },
   spacings: {
@@ -4610,7 +4578,7 @@ const tableOfContents = {
     },
     links: {
       width: 'calc(189px - 36px)',
-      typography: { ...typography$9.navigation.button,
+      typography: { ...typography$a.navigation.button,
         color: primaryColor$4
       },
       spacings: {
@@ -4643,14 +4611,14 @@ const tableOfContents = {
     hover: {
       background: primaryHoverAlt$6,
       border: {
-        radius: borderRadius$5
+        radius: borderRadius$6
       },
       entities: {
         icon: {
           background: primaryHover$3
         }
       },
-      typography: { ...typography$9.navigation.button,
+      typography: { ...typography$a.navigation.button,
         color: primaryHover$3
       }
     }
@@ -4751,7 +4719,7 @@ const {
   spacings: {
     comfortable: {
       xx_small: spacingXXS,
-      medium: spacingMedium$4
+      medium: spacingMedium$5
     }
   }
 } = edsTokens.tokens;
@@ -4760,8 +4728,8 @@ const comfortable$2 = {
   spacings: {
     left: '14px',
     // padding left is 14px, because of border-left 'steals' 2px of the padding
-    right: spacingMedium$4,
-    top: spacingMedium$4
+    right: spacingMedium$5,
+    top: spacingMedium$5
   },
   border: {
     type: 'bordergroup',
@@ -4812,7 +4780,6 @@ const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
   }; // Controller must set open={false} when pressing the close button
 
   return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, { ...props,
-    id: "side-sheet",
     children: [/*#__PURE__*/jsxRuntime.jsxs(Header$1, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
         variant: "h2",
@@ -4885,7 +4852,7 @@ const {
   },
   shape: {
     rounded: {
-      borderRadius: borderRadius$4
+      borderRadius: borderRadius$5
     }
   },
   interactions: {
@@ -4898,7 +4865,7 @@ const enabled$3 = {
   background: backgroundColor$2,
   height: '22px',
   border: {
-    radius: borderRadius$4,
+    radius: borderRadius$5,
     color: 'transparent',
     type: 'border',
     width: '1px',
@@ -4940,7 +4907,7 @@ const enabled$3 = {
       height: medium$2,
       width: medium$2,
       border: {
-        radius: borderRadius$4,
+        radius: borderRadius$5,
         type: 'border',
         width: 0
       },
@@ -4959,7 +4926,7 @@ const error$2 = {
     color: errorColor,
     width: '1px',
     style: 'solid',
-    radius: borderRadius$4
+    radius: borderRadius$5
   },
   typography: {
     color: errorColor
@@ -5023,7 +4990,7 @@ const {
 const {
   background: background$5,
   height,
-  typography: typography$8,
+  typography: typography$9,
   spacings: spacings$1,
   border: border$1,
   states: states$2
@@ -5040,7 +5007,7 @@ const StyledChips = styled__default["default"].div.attrs(_ref => {
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$5, height, typography$8.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$1), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$8), _ref2 => {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$5, height, typography$9.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$1), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$9), _ref2 => {
   let {
     clickable
   } = _ref2;
@@ -5230,14 +5197,14 @@ const {
   },
   typography: {
     input: {
-      text: typography$7
+      text: typography$8
     }
   },
   shape: shape$1
 } = edsTokens.tokens;
 const search = {
   background: background$4,
-  typography: typography$7,
+  typography: typography$8,
   height: '36px',
   clickbound: {
     offset: {
@@ -5306,7 +5273,7 @@ const search = {
   }
 };
 
-const Container$2 = styled__default["default"].span.withConfig({
+const Container$3 = styled__default["default"].span.withConfig({
   displayName: "Search__Container",
   componentId: "sc-v8l23u-0"
 })(_ref => {
@@ -5337,7 +5304,7 @@ const SearchInput = styled__default["default"](Input$4).withConfig({
     theme,
     disabled
   } = _ref2;
-  return styled.css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], theme.height, edsUtils.typographyTemplate(theme.typography), disabled && styled.css(["cursor:not-allowed;"]));
+  return styled.css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}&:-webkit-autofill{box-shadow:0 0 0px 1000px ", " inset;}&:autofill{box-shadow:0 0 0px 1000px ", " inset;}", ""], theme.height, edsUtils.typographyTemplate(theme.typography), theme.background, theme.background, disabled && styled.css(["cursor:not-allowed;"]));
 });
 const InsideButton = styled__default["default"](Button).withConfig({
   displayName: "Search__InsideButton",
@@ -5480,7 +5447,7 @@ const Search = /*#__PURE__*/react.forwardRef(function Search(_ref4, ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, { ...containerProps,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$3, { ...containerProps,
       children: [/*#__PURE__*/jsxRuntime.jsx(Icon$1, {
         data: edsIcons.search,
         "aria-hidden": true,
@@ -5830,6 +5797,7 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     step = 1,
     disabled,
     ariaLabelledby,
+    'aria-labelledby': ariaLabelledbyNative,
     ...rest
   } = _ref10;
   const isRangeSlider = Array.isArray(value);
@@ -5853,8 +5821,7 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   const maxRange = react.useRef(null);
 
   const onValueChange = (event, valueArrIdx) => {
-    const target = event.target;
-    const changedValue = parseFloat(target.value);
+    const changedValue = parseFloat(event.target.value);
 
     if (isRangeSlider) {
       const newValue = sliderValue.slice();
@@ -5919,14 +5886,27 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     }
   };
 
-  const inputIdA = "".concat(ariaLabelledby, "-thumb-a");
-  const inputIdB = "".concat(ariaLabelledby, "-thumb-b");
-  const inputId = "".concat(ariaLabelledby, "-thumb");
+  let inputIdA = edsUtils.useId(null, 'inputA');
+  let inputIdB = edsUtils.useId(null, 'inputB');
+  let inputId = edsUtils.useId(null, 'thumb');
+
+  if (rest['id']) {
+    const overrideId = rest['id'];
+    inputIdA = "".concat(overrideId, "-thumb-a");
+    inputIdB = "".concat(overrideId, "-thumb-b");
+    inputId = "".concat(overrideId, "-thumb");
+  }
+
+  const getAriaLabelledby = react.useCallback(() => {
+    if (ariaLabelledbyNative) return ariaLabelledbyNative;
+    if (ariaLabelledby) return ariaLabelledby;
+    return null;
+  }, [ariaLabelledbyNative, ariaLabelledby]);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: isRangeSlider ? /*#__PURE__*/jsxRuntime.jsxs(RangeWrapper, { ...rest,
       ref: ref,
       role: "group",
-      "aria-labelledby": ariaLabelledby,
+      "aria-labelledby": getAriaLabelledby(),
       valA: sliderValue[0],
       valB: sliderValue[1],
       max: max,
@@ -5942,6 +5922,10 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
         value: sliderValue[0],
         max: max,
         min: min,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuenow": sliderValue[0],
+        "aria-valuetext": getFormattedText(sliderValue[0]).toString(),
         id: inputIdA,
         step: step,
         onChange: event => {
@@ -5964,6 +5948,10 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
         value: sliderValue[1],
         min: min,
         max: max,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuenow": sliderValue[1],
+        "aria-valuetext": getFormattedText(sliderValue[1]).toString(),
         id: inputIdB,
         step: step,
         ref: maxRange,
@@ -5991,13 +5979,17 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
         value: sliderValue[0],
         min: min,
         max: max,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuenow": sliderValue[0],
+        "aria-valuetext": getFormattedText(sliderValue[0]).toString(),
         step: step,
         id: inputId,
         onChange: event => {
           onValueChange(event);
         },
         disabled: disabled,
-        "aria-labelledby": ariaLabelledby,
+        "aria-labelledby": getAriaLabelledby(),
         onMouseUp: event => handleCommitedValue(event),
         onKeyUp: event => handleKeyUp(event)
       }), /*#__PURE__*/jsxRuntime.jsx(Output, {
@@ -6034,12 +6026,12 @@ const {
   spacings: {
     comfortable: {
       x_large: spacingXlarge,
-      small: spacingSmall$3
+      small: spacingSmall$4
     }
   },
   shape: {
     corners: {
-      borderRadius: borderRadius$3
+      borderRadius: borderRadius$4
     }
   }
 } = edsTokens.tokens;
@@ -6050,7 +6042,7 @@ const tooltip = {
   background: background$3,
   border: {
     type: 'border',
-    radius: borderRadius$3
+    radius: borderRadius$4
   },
   entities: {
     tooltip: {
@@ -6058,7 +6050,7 @@ const tooltip = {
     },
     arrow: {
       width: '6px',
-      height: spacingSmall$3,
+      height: spacingSmall$4,
       spacings: {
         bottom: '-6px',
         top: '-6px',
@@ -6068,10 +6060,10 @@ const tooltip = {
     }
   },
   spacings: {
-    left: spacingSmall$3,
-    right: spacingSmall$3,
-    top: spacingSmall$3,
-    bottom: spacingSmall$3
+    left: spacingSmall$4,
+    right: spacingSmall$4,
+    top: spacingSmall$4,
+    bottom: spacingSmall$4
   }
 };
 
@@ -6210,7 +6202,7 @@ const SnackbarAction = /*#__PURE__*/react.forwardRef(function SnackbarAction(_re
 const {
   typography: {
     ui: {
-      snackbar: typography$6
+      snackbar: typography$7
     }
   },
   colors: {
@@ -6232,7 +6224,7 @@ const {
   },
   spacings: {
     comfortable: {
-      medium: spacingMedium$3,
+      medium: spacingMedium$4,
       x_large: spacingXLarge
     }
   },
@@ -6268,12 +6260,12 @@ const snackbar = {
     }
   },
   spacings: {
-    left: spacingMedium$3,
-    bottom: spacingMedium$3,
-    right: spacingMedium$3,
-    top: spacingMedium$3
+    left: spacingMedium$4,
+    bottom: spacingMedium$4,
+    right: spacingMedium$4,
+    top: spacingMedium$4
   },
-  typography: { ...typography$6,
+  typography: { ...typography$7,
     color
   },
   modes: {
@@ -6359,13 +6351,13 @@ const {
   },
   spacings: {
     comfortable: {
-      medium: spacingMedium$2,
-      small: spacingSmall$2
+      medium: spacingMedium$3,
+      small: spacingSmall$3
     }
   },
   shape: {
     corners: {
-      borderRadius: borderRadius$2
+      borderRadius: borderRadius$3
     }
   }
 } = edsTokens.tokens;
@@ -6377,7 +6369,7 @@ const popover = {
   entities: {
     arrow: {
       width: '6px',
-      height: spacingSmall$2,
+      height: spacingSmall$3,
       spacings: {
         top: '-5px',
         // 1px less than arrow width, if not the shadow would show between arrow and popover
@@ -6393,14 +6385,14 @@ const popover = {
     }
   },
   spacings: {
-    top: spacingMedium$2,
-    left: spacingMedium$2,
-    right: spacingMedium$2,
-    bottom: spacingMedium$2
+    top: spacingMedium$3,
+    left: spacingMedium$3,
+    right: spacingMedium$3,
+    bottom: spacingMedium$3
   },
   border: {
     type: 'border',
-    radius: borderRadius$2
+    radius: borderRadius$3
   },
   modes: {
     compact: {}
@@ -6460,12 +6452,12 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   const [arrowRef, setArrowRef] = react.useState(null);
   const popoverRef = edsUtils.useCombinedRefs(ref, setPopperEl);
   edsUtils.useOutsideClick(popperEl, e => {
-    if (open && onClose !== null && anchorEl && !anchorEl.contains(e.target)) {
+    if (open && onClose && anchorEl && !anchorEl.contains(e.target)) {
       onClose();
     }
   });
   edsUtils.useGlobalKeyPress('Escape', () => {
-    if (onClose !== null && open) {
+    if (onClose && open) {
       onClose();
     }
   });
@@ -6499,7 +6491,6 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
       ref: popoverRef,
       elevation: "overlay",
       style: styles.popper,
-      "data-testid": "popover",
       ...props,
       children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
         ref: setArrowRef,
@@ -6662,7 +6653,7 @@ const {
     circle: {
       minHeight,
       minWidth,
-      borderRadius: borderRadius$1
+      borderRadius: borderRadius$2
     }
   }
 } = edsTokens.tokens;
@@ -6682,7 +6673,7 @@ const enabled = {
       width: minWidth,
       border: {
         type: 'border',
-        radius: borderRadius$1
+        radius: borderRadius$2
       }
     }
   },
@@ -6906,6 +6897,10 @@ const IndeterminateProgressBar = styled__default["default"].div.withConfig({
   displayName: "LinearProgress__IndeterminateProgressBar",
   componentId: "sc-5orxpi-2"
 })(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary$2.entities.progress.background, indeterminate$2);
+const SrOnlyOutput$1 = styled__default["default"].output.withConfig({
+  displayName: "LinearProgress__SrOnlyOutput",
+  componentId: "sc-5orxpi-3"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
 const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_ref, ref) {
   let {
     variant = 'indeterminate',
@@ -6915,6 +6910,7 @@ const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_re
   const props = { ...rest,
     ref
   };
+  const [srProgress, setSrProgress] = react.useState(0);
   let barStyle;
 
   if (variant === 'determinate') {
@@ -6930,11 +6926,33 @@ const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_re
   const transformStyle = {
     transform: barStyle
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Track$2, { ...props,
-    role: "progressbar",
-    children: variant === 'indeterminate' ? /*#__PURE__*/jsxRuntime.jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
-      style: transformStyle
-    })
+  react.useEffect(() => {
+    if (variant === 'indeterminate') return;
+
+    if (value >= 25 && value < 50) {
+      setSrProgress(25);
+    } else if (value >= 50 && value < 75) {
+      setSrProgress(50);
+    } else if (value >= 75 && value < 100) {
+      setSrProgress(75);
+    } else if (value === 100) {
+      setSrProgress(100);
+    }
+  }, [value, variant]);
+
+  const getProgressFormatted = () => {
+    return "Loading ".concat(srProgress, "%");
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Track$2, { ...props,
+      role: "progressbar",
+      children: variant === 'indeterminate' ? /*#__PURE__*/jsxRuntime.jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
+        style: transformStyle
+      })
+    }), variant === 'determinate' && /*#__PURE__*/jsxRuntime.jsx(SrOnlyOutput$1, {
+      children: getProgressFormatted()
+    })]
   });
 }); // LinearProgress.displayName = 'eds-linear-progress'
 
@@ -6993,13 +7011,17 @@ const Svg$4 = styled__default["default"].svg.withConfig({
   } = _ref;
   return variant === 'indeterminate' ? styled.css(["animation:", " 1.4s linear infinite;"], indeterminate$1) : styled.css(["transform:rotate(-90deg);"]);
 });
+const SrOnlyOutput = styled__default["default"].output.withConfig({
+  displayName: "CircularProgress__SrOnlyOutput",
+  componentId: "sc-hib054-1"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
 const TrackCircle = styled__default["default"].circle.withConfig({
   displayName: "CircularProgress__TrackCircle",
-  componentId: "sc-hib054-1"
+  componentId: "sc-hib054-2"
 })([""]);
 const ProgressCircle = styled__default["default"].circle.withConfig({
   displayName: "CircularProgress__ProgressCircle",
-  componentId: "sc-hib054-2"
+  componentId: "sc-hib054-3"
 })([""]);
 
 const getToken = color => {
@@ -7033,6 +7055,7 @@ const CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress
     variant
   };
   const token = getToken(color);
+  const [srProgress, setSrProgress] = react.useState(0);
   const circumference = 2 * Math.PI * ((48 - thickness) / 2);
 
   if (variant === 'determinate') {
@@ -7047,30 +7070,52 @@ const CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress
     }
   }
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Svg$4, { ...props,
-    viewBox: "24 24 48 48",
-    role: "progressbar",
-    height: size,
-    width: size,
-    preserveAspectRatio: "xMidYMid meet",
-    children: [/*#__PURE__*/jsxRuntime.jsx(TrackCircle, {
-      style: trackStyle,
-      cx: 48,
-      cy: 48,
-      r: (48 - thickness) / 2,
-      fill: "none",
-      strokeWidth: thickness,
-      stroke: token.background
-    }), /*#__PURE__*/jsxRuntime.jsx(ProgressCircle, {
-      style: trackStyle,
-      cx: 48,
-      cy: 48,
-      r: (48 - thickness) / 2,
-      fill: "none",
-      strokeLinecap: "round",
-      strokeWidth: thickness,
-      strokeDasharray: variant === 'determinate' ? circumference : 48,
-      stroke: token.entities.progress.background
+  react.useEffect(() => {
+    if (variant === 'indeterminate') return;
+
+    if (progress >= 25 && progress < 50) {
+      setSrProgress(25);
+    } else if (progress >= 50 && progress < 75) {
+      setSrProgress(50);
+    } else if (progress >= 75 && progress < 100) {
+      setSrProgress(75);
+    } else if (progress === 100) {
+      setSrProgress(100);
+    }
+  }, [progress, variant]);
+
+  const getProgressFormatted = () => {
+    return "Loading ".concat(srProgress, "%");
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Svg$4, { ...props,
+      viewBox: "24 24 48 48",
+      role: "progressbar",
+      height: size,
+      width: size,
+      preserveAspectRatio: "xMidYMid meet",
+      children: [/*#__PURE__*/jsxRuntime.jsx(TrackCircle, {
+        style: trackStyle,
+        cx: 48,
+        cy: 48,
+        r: (48 - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness,
+        stroke: token.background
+      }), /*#__PURE__*/jsxRuntime.jsx(ProgressCircle, {
+        style: trackStyle,
+        cx: 48,
+        cy: 48,
+        r: (48 - thickness) / 2,
+        fill: "none",
+        strokeLinecap: "round",
+        strokeWidth: thickness,
+        strokeDasharray: variant === 'determinate' ? circumference : 48,
+        stroke: token.entities.progress.background
+      })]
+    }), variant === 'determinate' && /*#__PURE__*/jsxRuntime.jsx(SrOnlyOutput, {
+      children: getProgressFormatted()
     })]
   });
 }); // CircularProgress.displayName = 'eds-circular-progress'
@@ -7257,14 +7302,14 @@ const {
   },
   spacings: {
     comfortable: {
-      medium: spacingMedium$1
+      medium: spacingMedium$2
     }
   }
 } = edsTokens.tokens;
 const breadcrumbs = {
   spacings: {
-    left: spacingMedium$1,
-    right: spacingMedium$1
+    left: spacingMedium$2,
+    right: spacingMedium$2
   },
   typography: {
     color: enabledColor
@@ -7280,7 +7325,7 @@ const breadcrumbs = {
 
 const {
   spacings,
-  typography: typography$5,
+  typography: typography$6,
   states: states$1
 } = breadcrumbs;
 const OrderedList$1 = styled__default["default"].ol.withConfig({
@@ -7294,11 +7339,11 @@ const ListItem$1 = styled__default["default"].li.withConfig({
 const Separator = styled__default["default"](Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
-})(["color:", ";", ""], typography$5.color, edsUtils.spacingsTemplate(spacings));
+})(["color:", ";", ""], typography$6.color, edsUtils.spacingsTemplate(spacings));
 const Collapsed = styled__default["default"](Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
-})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$6.color);
 const Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref) {
   let {
     children,
@@ -7371,12 +7416,12 @@ const Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, r
 
 const {
   states,
-  typography: typography$4
+  typography: typography$5
 } = breadcrumbs;
 const StyledTypography = styled__default["default"](Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
-})(["@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, _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$5.color, _ref => {
   let {
     maxWidth
   } = _ref;
@@ -7516,7 +7561,7 @@ const {
   },
   typography: {
     navigation: {
-      menu_title: typography$3
+      menu_title: typography$4
     }
   }
 } = edsTokens.tokens;
@@ -7532,7 +7577,7 @@ const menu = {
     type: 'border',
     radius: '4px'
   },
-  typography: { ...typography$3,
+  typography: { ...typography$4,
     color: textColor
   },
   entities: {
@@ -7554,7 +7599,7 @@ const menu = {
       },
       states: {
         active: {
-          typography: { ...typography$3,
+          typography: { ...typography$4,
             color: activeTextColor
           },
           background: activeBackground
@@ -7572,7 +7617,7 @@ const menu = {
           background: hoverBackground
         },
         disabled: {
-          typography: { ...typography$3,
+          typography: { ...typography$4,
             color: disabledTextColor
           }
         }
@@ -7604,7 +7649,7 @@ const menu = {
 };
 
 const {
-  typography: typography$2,
+  typography: typography$3,
   entities: {
     item: {
       states: {
@@ -7628,7 +7673,7 @@ const Item = styled__default["default"].button.attrs(_ref => {
 }).withConfig({
   displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], edsUtils.typographyTemplate(typography$2), _ref2 => {
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], edsUtils.typographyTemplate(typography$3), _ref2 => {
   let {
     theme
   } = _ref2;
@@ -7648,7 +7693,7 @@ const Content = styled__default["default"].div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
 })(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
-const MenuItem = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
+const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
   let {
     children,
     disabled,
@@ -7695,7 +7740,7 @@ const MenuItem = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function
       children: children
     })
   });
-}));
+});
 MenuItem.displayName = 'MenuItem';
 
 const Header = styled__default["default"].div.attrs(() => ({
@@ -7987,7 +8032,7 @@ const {
   },
   spacings: {
     comfortable: {
-      small: spacingSmall$1
+      small: spacingSmall$2
     }
   }
 } = edsTokens.tokens;
@@ -8007,7 +8052,7 @@ const pagination = {
     }
   },
   spacings: {
-    left: spacingSmall$1
+    left: spacingSmall$2
   }
 };
 
@@ -8227,20 +8272,20 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
 });
 
 const {
-  colors: colors$1,
+  colors: colors$2,
   spacings: {
     comfortable: {
       small,
       x_small: x_small$2
     }
   },
-  typography: typography$1,
+  typography: typography$2,
   shape
 } = edsTokens.tokens;
 const nativeselect = {
-  background: colors$1.ui.background__light.rgba,
-  typography: { ...typography$1.input.text,
-    color: colors$1.text.static_icons__default.rgba
+  background: colors$2.ui.background__light.rgba,
+  typography: { ...typography$2.input.text,
+    color: colors$2.text.static_icons__default.rgba
   },
   entities: {
     input: {
@@ -8255,20 +8300,20 @@ const nativeselect = {
       width: '24px'
     }
   },
-  boxShadow: 'inset 0 -1px 0 0 ' + colors$1.text.static_icons__tertiary.rgba,
+  boxShadow: 'inset 0 -1px 0 0 ' + colors$2.text.static_icons__tertiary.rgba,
   states: {
     focus: {
       outline: {
         type: 'outline',
         width: '2px',
-        color: colors$1.interactive.primary__resting.rgba,
+        color: colors$2.interactive.primary__resting.rgba,
         style: 'solid',
         offset: '0px'
       }
     },
     disabled: {
       typography: {
-        color: colors$1.interactive.disabled__text.rgba
+        color: colors$2.interactive.disabled__text.rgba
       }
     }
   },
@@ -8289,7 +8334,7 @@ const nativeselect = {
   }
 };
 
-const Container$1 = styled__default["default"].div.withConfig({
+const Container$2 = styled__default["default"].div.withConfig({
   displayName: "NativeSelect__Container",
   componentId: "sc-1c1ogya-0"
 })(["min-width:100px;width:100%;"]);
@@ -8339,7 +8384,7 @@ const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2,
   const showLabel = label || meta;
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, { ...containerProps,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, { ...containerProps,
       children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, { ...labelProps
       }), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, { ...selectProps,
         children: children
@@ -8349,78 +8394,78 @@ const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2,
 });
 
 const {
-  typography,
-  colors,
+  typography: typography$1,
+  colors: colors$1,
   shape: {
-    straight,
+    straight: straight$1,
     corners: {
-      borderRadius
+      borderRadius: borderRadius$1
     }
   },
   spacings: {
     comfortable: {
-      small: spacingSmall,
-      medium_small: spacingMediumSmall,
-      medium: spacingMedium,
-      large: spacingLarge,
-      xx_small
+      small: spacingSmall$1,
+      medium_small: spacingMediumSmall$1,
+      medium: spacingMedium$1,
+      large: spacingLarge$1,
+      xx_small: xx_small$1
     }
   },
   elevation: {
-    temporary_nav: boxShadow$1
+    temporary_nav: boxShadow$2
   }
 } = edsTokens.tokens;
 const select = {
-  background: colors.ui.background__default.rgba,
-  boxShadow: boxShadow$1,
-  minHeight: straight.minHeight,
+  background: colors$1.ui.background__default.rgba,
+  boxShadow: boxShadow$2,
+  minHeight: straight$1.minHeight,
   spacings: {
-    top: spacingMedium,
-    right: spacingLarge,
-    bottom: spacingMedium,
-    left: spacingLarge
+    top: spacingMedium$1,
+    right: spacingLarge$1,
+    bottom: spacingMedium$1,
+    left: spacingLarge$1
   },
-  typography: { ...typography.navigation.menu_title,
-    color: colors.text.static_icons__default.rgba
+  typography: { ...typography$1.navigation.menu_title,
+    color: colors$1.text.static_icons__default.rgba
   },
   border: {
     type: 'border',
-    radius: borderRadius
+    radius: borderRadius$1
   },
   states: {
     hover: {
-      background: colors.ui.background__medium.rgba
+      background: colors$1.ui.background__medium.rgba
     },
     active: {
-      background: colors.interactive.primary__selected_highlight.rgba
+      background: colors$1.interactive.primary__selected_highlight.rgba
     }
   },
   entities: {
     button: {
       height: '24px',
       spacings: {
-        left: spacingSmall,
-        right: spacingSmall,
+        left: spacingSmall$1,
+        right: spacingSmall$1,
         top: '6px'
       },
       typography: {
-        color: colors.text.static_icons__tertiary.rgba
+        color: colors$1.text.static_icons__tertiary.rgba
       }
     }
   },
   modes: {
     compact: {
       spacings: {
-        left: spacingSmall,
-        right: spacingSmall,
-        top: spacingSmall,
-        bottom: spacingSmall
+        left: spacingSmall$1,
+        right: spacingSmall$1,
+        top: spacingSmall$1,
+        bottom: spacingSmall$1
       },
       entities: {
         button: {
           spacings: {
-            left: spacingSmall,
-            right: spacingSmall,
+            left: spacingSmall$1,
+            right: spacingSmall$1,
             top: '0'
           }
         }
@@ -8428,17 +8473,17 @@ const select = {
     }
   }
 };
-const multiSelect = mergeDeepRight$1(select, {
+const multiSelect$1 = mergeDeepRight(select, {
   spacings: {
     top: '0',
     bottom: '0',
-    left: spacingMediumSmall,
-    right: spacingLarge
+    left: spacingMediumSmall$1,
+    right: spacingLarge$1
   },
   modes: {
     compact: {
       spacings: {
-        top: xx_small,
+        top: xx_small$1,
         bottom: '0'
       }
     }
@@ -8450,7 +8495,7 @@ const {
     button: buttonToken
   }
 } = select;
-const Container = styled__default["default"].div.withConfig({
+const Container$1 = styled__default["default"].div.withConfig({
   displayName: "commonStyles__Container",
   componentId: "sc-v98ajk-0"
 })(["position:relative;"]);
@@ -8458,11 +8503,11 @@ const PaddedInput = styled__default["default"](Input$4).withConfig({
   displayName: "commonStyles__PaddedInput",
   componentId: "sc-v98ajk-1"
 })(["padding-right:calc( ", " + ", " + ", " + 0px );"], buttonToken.height, buttonToken.spacings.left, buttonToken.spacings.right);
-const StyledList = styled__default["default"](List$1).withConfig({
+const StyledList$1 = styled__default["default"](List$1).withConfig({
   displayName: "commonStyles__StyledList",
   componentId: "sc-v98ajk-2"
 })(["background-color:", ";box-shadow:", ";overflow-y:scroll;max-height:300px;padding:0;", " margin-top:4px;position:absolute;right:0;left:0;z-index:50;"], select.background, select.boxShadow, edsUtils.bordersTemplate(select.border));
-const StyledListItem = styled__default["default"](List$1.Item).withConfig({
+const StyledListItem$1 = styled__default["default"](List$1.Item).withConfig({
   displayName: "commonStyles__StyledListItem",
   componentId: "sc-v98ajk-3"
 })(_ref => {
@@ -8474,7 +8519,7 @@ const StyledListItem = styled__default["default"](List$1.Item).withConfig({
   const 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, edsUtils.typographyTemplate(theme.typography), highlighted === 'true' ? 'pointer' : 'default');
 });
-const StyledButton = styled__default["default"](Button).withConfig({
+const StyledButton$1 = styled__default["default"](Button).withConfig({
   displayName: "commonStyles__StyledButton",
   componentId: "sc-v98ajk-4"
 })(_ref2 => {
@@ -8492,7 +8537,7 @@ const StyledInputWrapper = styled__default["default"].div.withConfig({
   componentId: "sc-v98ajk-5"
 })(["position:relative;"]);
 
-const PaddedStyledListItem$1 = styled__default["default"](StyledListItem).withConfig({
+const PaddedStyledListItem$1 = styled__default["default"](StyledListItem$1).withConfig({
   displayName: "SingleSelect__PaddedStyledListItem",
   componentId: "sc-rh1yw2-0"
 })(["", ""], _ref => {
@@ -8501,6 +8546,8 @@ const PaddedStyledListItem$1 = styled__default["default"](StyledListItem).withCo
   } = _ref;
   return edsUtils.spacingsTemplate(theme.spacings);
 });
+/** @deprecated Use `<Autocomplete />` instead */
+
 const SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2, ref) {
   let {
     items = [],
@@ -8575,7 +8622,7 @@ const SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2,
 
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
       className: className,
       ref: ref,
       children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, { ...getLabelProps(),
@@ -8590,7 +8637,7 @@ const SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2,
           onFocus: openSelect,
           onClick: openSelect,
           ...other
-        }), Boolean(inputValue) && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+        }), Boolean(inputValue) && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
           variant: "ghost_icon",
           disabled: disabled || readOnly,
           "aria-label": 'clear options',
@@ -8603,7 +8650,7 @@ const SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2,
             data: edsIcons.close,
             size: 16
           })
-        }), /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+        }), /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
           variant: "ghost_icon",
           ...getToggleButtonProps({
             disabled: disabled || readOnly
@@ -8614,7 +8661,7 @@ const SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2,
             data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps(),
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledList$1, { ...getMenuProps(),
         children: isOpen && inputItems.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(PaddedStyledListItem$1, {
           highlighted: highlightedIndex === index ? 'true' : 'false',
           active: selectedItem === item ? 'true' : 'false',
@@ -8857,7 +8904,7 @@ const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref1
   });
 });
 
-const PaddedStyledListItem = styled__default["default"](StyledListItem).withConfig({
+const PaddedStyledListItem = styled__default["default"](StyledListItem$1).withConfig({
   displayName: "MultiSelect__PaddedStyledListItem",
   componentId: "sc-69ntfg-0"
 })(["display:flex;align-items:center;", ""], _ref => {
@@ -8866,6 +8913,8 @@ const PaddedStyledListItem = styled__default["default"](StyledListItem).withConf
   } = _ref;
   return edsUtils.spacingsTemplate(theme.spacings);
 });
+
+/** @deprecated Use `<Autocomplete multiple />` instead. */
 const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, ref) {
   let {
     items = [],
@@ -8886,7 +8935,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
   } = useEds();
   const token = edsUtils.useToken({
     density
-  }, multiSelect);
+  }, multiSelect$1);
   let multipleSelectionProps = {
     initialSelectedItems: initialSelectedItems,
     onSelectedItemsChange: changes => {
@@ -8993,7 +9042,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
 
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
       className: className,
       ref: ref,
       children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, { ...getLabelProps(),
@@ -9001,7 +9050,8 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
         meta: meta,
         disabled: disabled
       }), /*#__PURE__*/jsxRuntime.jsxs(StyledInputWrapper, { ...getComboboxProps(),
-        children: [/*#__PURE__*/jsxRuntime.jsx(PaddedInput, { ...getInputProps(getDropdownProps({
+        children: [/*#__PURE__*/jsxRuntime.jsx(PaddedInput, { ...getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          getDropdownProps({
             preventKeyAction: isOpen,
             disabled: disabled
           })),
@@ -9009,7 +9059,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
           readOnly: readOnly,
           onFocus: openSelect,
           ...other
-        }), Boolean(selectedItems.length || inputValue) && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+        }), Boolean(selectedItems.length || inputValue) && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
           variant: "ghost_icon",
           disabled: disabled || readOnly,
           "aria-label": 'clear options',
@@ -9022,7 +9072,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
             data: edsIcons.close,
             size: 16
           })
-        }), /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+        }), /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
           variant: "ghost_icon",
           ...getToggleButtonProps({
             disabled: disabled || readOnly
@@ -9033,7 +9083,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
             data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps(),
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledList$1, { ...getMenuProps(),
         children: isOpen && getFilteredItems(items).map((item, index) => /*#__PURE__*/jsxRuntime.jsxs(PaddedStyledListItem, {
           highlighted: highlightedIndex === index ? 'true' : 'false',
           ...getItemProps({
@@ -9548,7 +9598,7 @@ const {
   },
   clickbounds,
   elevation: {
-    raised: boxShadow
+    raised: boxShadow$1
   },
   spacings: {
     comfortable: {
@@ -9607,7 +9657,7 @@ const comfortable = {
     handle: {
       height: '16px',
       width: '16px',
-      boxShadow,
+      boxShadow: boxShadow$1,
       background: iconTertiary,
       states: {
         active: {
@@ -9738,7 +9788,615 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref3, ref) {
 });
 Switch.displayName = 'Switch';
 
+const {
+  typography,
+  colors,
+  shape: {
+    straight,
+    corners: {
+      borderRadius
+    }
+  },
+  spacings: {
+    comfortable: {
+      small: spacingSmall,
+      medium_small: spacingMediumSmall,
+      medium: spacingMedium,
+      large: spacingLarge,
+      xx_small
+    }
+  },
+  elevation: {
+    temporary_nav: boxShadow
+  }
+} = edsTokens.tokens;
+const selectTokens = {
+  background: colors.ui.background__default.rgba,
+  boxShadow,
+  minHeight: straight.minHeight,
+  spacings: {
+    top: spacingMedium,
+    right: spacingLarge,
+    bottom: spacingMedium,
+    left: spacingLarge
+  },
+  typography: { ...typography.navigation.menu_title,
+    color: colors.text.static_icons__default.rgba
+  },
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  states: {
+    hover: {
+      background: colors.ui.background__medium.rgba
+    },
+    active: {
+      background: colors.interactive.primary__selected_highlight.rgba
+    },
+    disabled: {
+      typography: {
+        color: colors.interactive.disabled__text.rgba
+      }
+    }
+  },
+  entities: {
+    button: {
+      height: '24px',
+      spacings: {
+        left: spacingSmall,
+        right: spacingSmall,
+        top: '6px'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        left: spacingSmall,
+        right: spacingSmall,
+        top: spacingSmall,
+        bottom: spacingSmall
+      },
+      entities: {
+        button: {
+          spacings: {
+            left: spacingSmall,
+            right: spacingSmall,
+            top: '0'
+          }
+        }
+      }
+    }
+  }
+};
+const multiSelect = mergeDeepRight(selectTokens, {
+  spacings: {
+    top: '0',
+    bottom: '0',
+    left: spacingMediumSmall,
+    right: spacingLarge
+  },
+  modes: {
+    compact: {
+      spacings: {
+        top: xx_small,
+        bottom: '0'
+      }
+    }
+  }
+});
+
+const StyledListItem = styled__default["default"](List$1.Item).withConfig({
+  displayName: "Option__StyledListItem",
+  componentId: "sc-1ly11zu-0"
+})(_ref => {
+  let {
+    theme,
+    highlighted,
+    active,
+    isdisabled
+  } = _ref;
+  const backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
+  return styled.css(["display:flex;align-items:center;margin:0;list-style:none;background-color:", ";user-select:none;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
+});
+const AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOption(_ref2, ref) {
+  let {
+    value,
+    multiple,
+    isSelected,
+    isDisabled,
+    onClick,
+    'aria-selected': ariaSelected,
+    ...other
+  } = _ref2;
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
+    ref: ref,
+    isdisabled: isDisabled ? 'true' : 'false',
+    "aria-hidden": isDisabled,
+    active: !multiple && isSelected ? 'true' : 'false',
+    onClick: e => !isDisabled && onClick(e),
+    "aria-selected": multiple ? isSelected : ariaSelected,
+    ...other,
+    children: [multiple && /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
+      disabled: isDisabled,
+      checked: isSelected,
+      value: value,
+      onChange: () => {
+        return null;
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      children: value
+    })]
+  });
+});
+
+const Container = styled__default["default"].div.withConfig({
+  displayName: "Autocomplete__Container",
+  componentId: "sc-yvif0e-0"
+})(["position:relative;"]);
+const StyledInput = styled__default["default"](Input$4).withConfig({
+  displayName: "Autocomplete__StyledInput",
+  componentId: "sc-yvif0e-1"
+})(_ref => {
+  let {
+    theme: {
+      entities: {
+        button
+      }
+    }
+  } = _ref;
+  return styled.css(["padding-right:calc( ", " + ", " + (", " * 2) );"], button.spacings.left, button.spacings.right, button.height);
+});
+const StyledList = styled__default["default"](List$1).withConfig({
+  displayName: "Autocomplete__StyledList",
+  componentId: "sc-yvif0e-2"
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:50;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
+});
+const StyledButton = styled__default["default"](Button).withConfig({
+  displayName: "Autocomplete__StyledButton",
+  componentId: "sc-yvif0e-3"
+})(_ref3 => {
+  let {
+    theme: {
+      entities: {
+        button
+      }
+    }
+  } = _ref3;
+  return styled.css(["position:absolute;height:", ";width:", ";right:", ";top:", ";"], button.height, button.height, button.spacings.right, button.spacings.top);
+});
+
+const findIndex = _ref4 => {
+  let {
+    calc,
+    index,
+    optionDisabled,
+    availableItems
+  } = _ref4;
+  const nextItem = availableItems[index];
+
+  if (optionDisabled(nextItem)) {
+    const nextIndex = calc(index);
+    return findIndex({
+      calc,
+      index: nextIndex,
+      availableItems,
+      optionDisabled
+    });
+  }
+
+  return index;
+};
+
+const findNextIndex = _ref5 => {
+  let {
+    index,
+    optionDisabled,
+    availableItems
+  } = _ref5;
+  const options = {
+    index,
+    optionDisabled,
+    availableItems,
+    calc: num => num + 1
+  };
+  const nextIndex = findIndex(options);
+
+  if (nextIndex > availableItems.length - 1) {
+    // jump to start of list
+    return findIndex({ ...options,
+      index: 0
+    });
+  }
+
+  return nextIndex;
+};
+
+const findPrevIndex = _ref6 => {
+  let {
+    index,
+    optionDisabled,
+    availableItems
+  } = _ref6;
+  const options = {
+    index,
+    optionDisabled,
+    availableItems,
+    calc: num => num - 1
+  };
+  const prevIndex = findIndex(options);
+
+  if (prevIndex < 0) {
+    // jump to end of list
+    return findIndex({ ...options,
+      index: availableItems.length - 1
+    });
+  }
+
+  return prevIndex;
+};
+
+function AutocompleteInner(props, ref) {
+  const {
+    options = [],
+    label,
+    meta,
+    className,
+    disabled = false,
+    readOnly = false,
+    onOptionsChange,
+    selectedOptions,
+    multiple,
+    initialSelectedOptions = [],
+    disablePortal,
+    optionDisabled = () => false,
+    optionsFilter,
+    autoWidth,
+    placeholder,
+    optionLabel,
+    ...other
+  } = props;
+  const anchorRef = react.useRef();
+  const [anchorEl, setAnchorEl] = react.useState();
+  const [containerEl, setContainerEl] = react.useState();
+  const isMounted = edsUtils.useIsMounted();
+  const isControlled = Boolean(selectedOptions);
+  const [availableItems, setAvailableItems] = react.useState(options);
+  const disabledItems = react.useMemo(() => options.filter(optionDisabled), [options, optionDisabled]);
+  const {
+    density
+  } = useEds();
+  const token = edsUtils.useToken({
+    density
+  }, multiple ? multiSelect : selectTokens);
+  let placeholderText = placeholder;
+  let multipleSelectionProps = {
+    initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : [],
+    onSelectedItemsChange: changes => {
+      if (onOptionsChange) {
+        onOptionsChange(changes);
+      }
+    }
+  };
+
+  if (isControlled) {
+    multipleSelectionProps = { ...multipleSelectionProps,
+      selectedItems: selectedOptions
+    };
+  }
+
+  const {
+    getDropdownProps,
+    addSelectedItem,
+    removeSelectedItem,
+    selectedItems,
+    reset: resetSelection,
+    setSelectedItems
+  } = downshift.useMultipleSelection(multipleSelectionProps);
+  const getLabel = react.useCallback(item => {
+    if (!item) {
+      return '';
+    }
+
+    if (typeof item === 'object') {
+      if (optionLabel) {
+        return optionLabel(item);
+      } else {
+        throw new Error('Missing label. When using objects for options make sure to define the `optionLabel` property');
+      }
+    }
+
+    if (typeof item === 'string') {
+      return item;
+    }
+
+    try {
+      return item === null || item === void 0 ? void 0 : item.toString();
+    } catch (error) {
+      throw new Error('Unable to find label, make sure your are using options as documented');
+    }
+  }, [optionLabel]);
+  let comboBoxProps = {
+    items: availableItems,
+    initialSelectedItem: initialSelectedOptions[0],
+    itemToString: getLabel,
+    onInputValueChange: _ref7 => {
+      let {
+        inputValue
+      } = _ref7;
+      setAvailableItems(options.filter(item => {
+        if (optionsFilter) {
+          return optionsFilter(item, inputValue);
+        }
+
+        return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
+      }));
+    },
+    onIsOpenChange: _ref8 => {
+      let {
+        selectedItem
+      } = _ref8;
+
+      // Show all options when single select is reopened with a selected item
+      if (availableItems.length === 1 && selectedItem === availableItems[0]) {
+        setAvailableItems(options);
+      }
+    },
+    onStateChange: _ref9 => {
+      let {
+        type,
+        selectedItem
+      } = _ref9;
+
+      switch (type) {
+        case downshift.useCombobox.stateChangeTypes.InputChange:
+          break;
+
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case downshift.useCombobox.stateChangeTypes.ItemClick:
+        case downshift.useCombobox.stateChangeTypes.InputBlur:
+          if (selectedItem && !optionDisabled(selectedItem)) {
+            if (multiple) {
+              selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
+            } else {
+              setSelectedItems([selectedItem]);
+            }
+          }
+
+          break;
+      }
+    },
+    stateReducer: (_, actionAndChanges) => {
+      const {
+        changes,
+        type
+      } = actionAndChanges;
+
+      switch (type) {
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
+          return { ...changes,
+            highlightedIndex: findNextIndex({
+              index: changes.highlightedIndex,
+              availableItems,
+              optionDisabled
+            })
+          };
+
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownEnd:
+          return { ...changes,
+            highlightedIndex: findPrevIndex({
+              index: changes.highlightedIndex,
+              availableItems,
+              optionDisabled
+            })
+          };
+
+        default:
+          return changes;
+      }
+    }
+  };
+
+  if (isControlled && !multiple) {
+    comboBoxProps = { ...comboBoxProps,
+      selectedItem: selectedOptions[0]
+    };
+  }
+
+  if (multiple) {
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : "".concat(selectedItems.length, "/").concat(options.length - disabledItems.length, " selected");
+    comboBoxProps = { ...comboBoxProps,
+      selectedItem: null,
+      stateReducer: (state, actionAndChanges) => {
+        const {
+          changes,
+          type
+        } = actionAndChanges;
+
+        switch (type) {
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
+            return { ...changes,
+              highlightedIndex: findNextIndex({
+                index: changes.highlightedIndex,
+                availableItems,
+                optionDisabled
+              })
+            };
+
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnd:
+            return { ...changes,
+              highlightedIndex: findPrevIndex({
+                index: changes.highlightedIndex,
+                availableItems,
+                optionDisabled
+              })
+            };
+
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case downshift.useCombobox.stateChangeTypes.ItemClick:
+            return { ...changes,
+              isOpen: true,
+              // keep menu open after selection.
+              highlightedIndex: state.highlightedIndex,
+              inputValue: '' // don't add the item string as input value at selection.
+
+            };
+
+          case downshift.useCombobox.stateChangeTypes.InputBlur:
+            return { ...changes,
+              inputValue: '' // don't add the item string as input value at selection.
+
+            };
+
+          default:
+            return changes;
+        }
+      }
+    };
+  }
+
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps,
+    openMenu,
+    inputValue,
+    reset: resetCombobox
+  } = downshift.useCombobox(comboBoxProps);
+  react.useEffect(() => {
+    if (anchorRef.current) {
+      setAnchorEl(anchorRef.current);
+    }
+
+    if (isControlled) {
+      setSelectedItems(selectedOptions);
+    }
+
+    return () => {
+      setAnchorEl(null);
+      setContainerEl(null);
+    };
+  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]);
+  const {
+    styles,
+    attributes
+  } = edsUtils.usePopper({
+    anchorEl,
+    popperEl: containerEl,
+    placement: 'bottom-start',
+    offset: 4,
+    autoWidth
+  });
+
+  const openSelect = () => {
+    if (!isOpen && !(disabled || readOnly)) {
+      openMenu();
+    }
+  };
+
+  const clear = () => {
+    resetCombobox();
+    resetSelection();
+  };
+
+  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly;
+  const selectedItemsLabels = react.useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
+
+  const optionsList = /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps({
+      ref: setContainerEl,
+      style: styles.popper,
+      'aria-multiselectable': multiple ? 'true' : null,
+      ...attributes.popper
+    }, {
+      suppressRefError: true
+    }),
+    children: !isOpen ? null : availableItems.map((item, index) => {
+      const label = getLabel(item);
+      const isDisabled = optionDisabled(item);
+      const isSelected = selectedItemsLabels.includes(label);
+      return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
+        value: label,
+        multiple: multiple,
+        highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
+        isSelected: isSelected,
+        isDisabled: isDisabled,
+        ...getItemProps({
+          item,
+          index,
+          disabled
+        })
+      }, label);
+    })
+  });
+
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
+      className: className,
+      ref: ref,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, { ...getLabelProps(),
+        label: label,
+        meta: meta,
+        disabled: disabled
+      }), /*#__PURE__*/jsxRuntime.jsxs(Container, { ...getComboboxProps(),
+        children: [/*#__PURE__*/jsxRuntime.jsx(StyledInput, { ...getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          getDropdownProps({
+            preventKeyAction: multiple ? isOpen : undefined,
+            disabled,
+            ref: anchorRef
+          })),
+          placeholder: placeholderText,
+          readOnly: readOnly,
+          onFocus: openSelect,
+          onClick: openSelect,
+          ...other
+        }), showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+          variant: "ghost_icon",
+          disabled: disabled || readOnly,
+          "aria-label": 'clear options',
+          title: "clear",
+          onClick: clear,
+          style: {
+            right: 32
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: edsIcons.close,
+            size: 16
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+          variant: "ghost_icon",
+          ...getToggleButtonProps({
+            disabled: disabled || readOnly
+          }),
+          "aria-label": 'toggle options',
+          title: "open",
+          children: !readOnly && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
+          })
+        })]
+      }), disablePortal ? optionsList : !isMounted ? null : /*#__PURE__*/ReactDom.createPortal(optionsList, document.body)]
+    })
+  });
+}
+
+const Autocomplete = /*#__PURE__*/react.forwardRef(AutocompleteInner);
+
 exports.Accordion = Accordion;
+exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Banner = Banner;
 exports.Breadcrumbs = Breadcrumbs;