@equinor/eds-core-react 0.19.0-dev.202205096 → 0.20.1-dev.20220609

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

@@ -946,7 +946,7 @@ const Button = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
 });
 
 const {
-  typography: typography$g,
+  typography: typography$h,
   colors: colorsToken,
   interactions: {
     focused: {
@@ -957,7 +957,7 @@ const {
 const {
   heading,
   paragraph: paragraph$2
-} = typography$g;
+} = typography$h;
 const {
   interactive: {
     primary__resting: {
@@ -983,7 +983,7 @@ const {
     }
   }
 } = colorsToken;
-const colors$7 = {
+const colors$8 = {
   primary: primary$5,
   secondary,
   danger: danger$1,
@@ -1039,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) {
@@ -1330,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) {
@@ -1506,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",
@@ -1713,8 +1713,8 @@ const {
   },
   spacings: {
     comfortable: {
-      small: spacingSmall$4,
-      medium: spacingMedium$8
+      small: spacingSmall$5,
+      medium: spacingMedium$9
     }
   }
 } = edsTokens.tokens;
@@ -1742,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)
   }
 };
 
@@ -1850,7 +1850,7 @@ const {
       x_small: x_small$5
     }
   },
-  typography: typography$f,
+  typography: typography$g,
   shape: shape$2
 } = edsTokens.tokens;
 const input$2 = {
@@ -1862,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: {
@@ -1999,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 => {
@@ -2044,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
   }
@@ -2071,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
   }
 };
 
@@ -2150,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,
@@ -2160,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,
@@ -2176,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'
@@ -2189,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
           }
         }
       }
@@ -2217,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'
@@ -2236,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'
@@ -2255,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'
@@ -2508,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,
@@ -2528,7 +2528,7 @@ const label = {
   states: {
     disabled: {
       typography: {
-        color: colors$4.interactive.disabled__text.rgba
+        color: colors$5.interactive.disabled__text.rgba
       }
     }
   }
@@ -2572,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,
@@ -2596,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
   }
 };
 
@@ -2645,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 => {
@@ -2681,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,
@@ -2700,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%;"]);
@@ -2764,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
@@ -2933,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 => {
@@ -2943,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,
@@ -2951,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,
@@ -2977,7 +2977,7 @@ List$1.Item.displayName = 'List.Item';
 const {
   typography: {
     ui: {
-      accordion_header: typography$a
+      accordion_header: typography$b
     }
   },
   colors: {
@@ -3042,7 +3042,7 @@ const accordion = {
     header: {
       height: '48px',
       background: backgroundDefault,
-      typography: typography$a,
+      typography: typography$b,
       spacings: {
         left: mediumSpacing,
         right: mediumSpacing
@@ -3058,12 +3058,12 @@ const accordion = {
           }
         },
         disabled: {
-          typography: { ...typography$a,
+          typography: { ...typography$b,
             color: disabledColor$2
           }
         },
         active: {
-          typography: { ...typography$a,
+          typography: { ...typography$b,
             color: activatedColor
           }
         },
@@ -3436,7 +3436,7 @@ const {
   },
   spacings: {
     comfortable: {
-      medium: spacingMedium$7
+      medium: spacingMedium$8
     }
   },
   interactions: {
@@ -3449,8 +3449,8 @@ const token$1 = {
   entities: {
     panel: {
       spacings: {
-        top: spacingMedium$7,
-        bottom: spacingMedium$7
+        top: spacingMedium$8,
+        bottom: spacingMedium$8
       },
       states: {
         focus: {
@@ -3473,8 +3473,8 @@ const token$1 = {
         }
       },
       spacings: {
-        left: spacingMedium$7,
-        right: spacingMedium$7
+        left: spacingMedium$8,
+        right: spacingMedium$8
       },
       typography: {
         color: defaultColor,
@@ -3540,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;
@@ -3841,12 +3841,12 @@ const {
   },
   spacings: {
     comfortable: {
-      medium: spacingMedium$6
+      medium: spacingMedium$7
     }
   },
   shape: {
     corners: {
-      borderRadius: borderRadius$7
+      borderRadius: borderRadius$8
     }
   }
 } = edsTokens.tokens;
@@ -3854,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 = {
@@ -3887,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;
@@ -3926,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;
@@ -4050,7 +4050,7 @@ Card.Media.displayName = 'Card.Media';
 Card.HeaderTitle.displayName = 'Card.HeaderTitle';
 
 const {
-  colors: colors$2,
+  colors: colors$3,
   spacings: {
     comfortable: comfortable$3
   },
@@ -4060,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,
@@ -4072,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'
     }
   },
@@ -4278,7 +4278,7 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
 const {
   spacings: {
     comfortable: {
-      medium: spacingMedium$5
+      medium: spacingMedium$6
     }
   },
   typography: {
@@ -4298,7 +4298,7 @@ const {
   },
   shape: {
     corners: {
-      borderRadius: borderRadius$6
+      borderRadius: borderRadius$7
     }
   }
 } = edsTokens.tokens;
@@ -4308,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: {
@@ -4549,7 +4549,7 @@ const {
   },
   shape: {
     corners: {
-      borderRadius: borderRadius$5
+      borderRadius: borderRadius$6
     }
   },
   spacings: {
@@ -4559,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: {
@@ -4578,7 +4578,7 @@ const tableOfContents = {
     },
     links: {
       width: 'calc(189px - 36px)',
-      typography: { ...typography$9.navigation.button,
+      typography: { ...typography$a.navigation.button,
         color: primaryColor$4
       },
       spacings: {
@@ -4611,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
       }
     }
@@ -4719,7 +4719,7 @@ const {
   spacings: {
     comfortable: {
       xx_small: spacingXXS,
-      medium: spacingMedium$4
+      medium: spacingMedium$5
     }
   }
 } = edsTokens.tokens;
@@ -4728,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',
@@ -4852,7 +4852,7 @@ const {
   },
   shape: {
     rounded: {
-      borderRadius: borderRadius$4
+      borderRadius: borderRadius$5
     }
   },
   interactions: {
@@ -4865,7 +4865,7 @@ const enabled$3 = {
   background: backgroundColor$2,
   height: '22px',
   border: {
-    radius: borderRadius$4,
+    radius: borderRadius$5,
     color: 'transparent',
     type: 'border',
     width: '1px',
@@ -4907,7 +4907,7 @@ const enabled$3 = {
       height: medium$2,
       width: medium$2,
       border: {
-        radius: borderRadius$4,
+        radius: borderRadius$5,
         type: 'border',
         width: 0
       },
@@ -4926,7 +4926,7 @@ const error$2 = {
     color: errorColor,
     width: '1px',
     style: 'solid',
-    radius: borderRadius$4
+    radius: borderRadius$5
   },
   typography: {
     color: errorColor
@@ -4990,7 +4990,7 @@ const {
 const {
   background: background$5,
   height,
-  typography: typography$8,
+  typography: typography$9,
   spacings: spacings$1,
   border: border$1,
   states: states$2
@@ -5007,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;
@@ -5197,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: {
@@ -5273,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 => {
@@ -5447,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,
@@ -5897,17 +5897,11 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     inputId = "".concat(overrideId, "-thumb");
   }
 
-  const getAriaLabelledby = () => {
+  const getAriaLabelledby = react.useCallback(() => {
     if (ariaLabelledbyNative) return ariaLabelledbyNative;
-
-    if (ariaLabelledby) {
-      console.warn('Slider: The "ariaLabelledby" prop is deprecated and will be removed in a future version of EDS, please use the native "aria-labelledby" instead');
-      return ariaLabelledby;
-    }
-
+    if (ariaLabelledby) return ariaLabelledby;
     return null;
-  };
-
+  }, [ariaLabelledbyNative, ariaLabelledby]);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: isRangeSlider ? /*#__PURE__*/jsxRuntime.jsxs(RangeWrapper, { ...rest,
       ref: ref,
@@ -6032,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;
@@ -6048,7 +6042,7 @@ const tooltip = {
   background: background$3,
   border: {
     type: 'border',
-    radius: borderRadius$3
+    radius: borderRadius$4
   },
   entities: {
     tooltip: {
@@ -6056,7 +6050,7 @@ const tooltip = {
     },
     arrow: {
       width: '6px',
-      height: spacingSmall$3,
+      height: spacingSmall$4,
       spacings: {
         bottom: '-6px',
         top: '-6px',
@@ -6066,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
   }
 };
 
@@ -6208,7 +6202,7 @@ const SnackbarAction = /*#__PURE__*/react.forwardRef(function SnackbarAction(_re
 const {
   typography: {
     ui: {
-      snackbar: typography$6
+      snackbar: typography$7
     }
   },
   colors: {
@@ -6230,7 +6224,7 @@ const {
   },
   spacings: {
     comfortable: {
-      medium: spacingMedium$3,
+      medium: spacingMedium$4,
       x_large: spacingXLarge
     }
   },
@@ -6266,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: {
@@ -6357,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;
@@ -6375,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
@@ -6391,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: {}
@@ -6458,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();
     }
   });
@@ -6659,7 +6653,7 @@ const {
     circle: {
       minHeight,
       minWidth,
-      borderRadius: borderRadius$1
+      borderRadius: borderRadius$2
     }
   }
 } = edsTokens.tokens;
@@ -6679,7 +6673,7 @@ const enabled = {
       width: minWidth,
       border: {
         type: 'border',
-        radius: borderRadius$1
+        radius: borderRadius$2
       }
     }
   },
@@ -6903,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',
@@ -6912,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') {
@@ -6927,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'
 
@@ -6990,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 => {
@@ -7030,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') {
@@ -7044,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'
@@ -7254,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
@@ -7277,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({
@@ -7291,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,
@@ -7368,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;
@@ -7513,7 +7561,7 @@ const {
   },
   typography: {
     navigation: {
-      menu_title: typography$3
+      menu_title: typography$4
     }
   }
 } = edsTokens.tokens;
@@ -7529,7 +7577,7 @@ const menu = {
     type: 'border',
     radius: '4px'
   },
-  typography: { ...typography$3,
+  typography: { ...typography$4,
     color: textColor
   },
   entities: {
@@ -7551,7 +7599,7 @@ const menu = {
       },
       states: {
         active: {
-          typography: { ...typography$3,
+          typography: { ...typography$4,
             color: activeTextColor
           },
           background: activeBackground
@@ -7569,7 +7617,7 @@ const menu = {
           background: hoverBackground
         },
         disabled: {
-          typography: { ...typography$3,
+          typography: { ...typography$4,
             color: disabledTextColor
           }
         }
@@ -7601,7 +7649,7 @@ const menu = {
 };
 
 const {
-  typography: typography$2,
+  typography: typography$3,
   entities: {
     item: {
       states: {
@@ -7625,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;
@@ -7984,7 +8032,7 @@ const {
   },
   spacings: {
     comfortable: {
-      small: spacingSmall$1
+      small: spacingSmall$2
     }
   }
 } = edsTokens.tokens;
@@ -8004,7 +8052,7 @@ const pagination = {
     }
   },
   spacings: {
-    left: spacingSmall$1
+    left: spacingSmall$2
   }
 };
 
@@ -8224,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: {
@@ -8252,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
       }
     }
   },
@@ -8286,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%;"]);
@@ -8336,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
@@ -8346,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'
           }
         }
@@ -8425,17 +8473,17 @@ const select = {
     }
   }
 };
-const multiSelect = mergeDeepRight(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'
       }
     }
@@ -8447,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;"]);
@@ -8455,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 => {
@@ -8471,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 => {
@@ -8489,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 => {
@@ -8498,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 = [],
@@ -8572,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(),
@@ -8587,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',
@@ -8600,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
@@ -8611,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',
@@ -8854,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 => {
@@ -8863,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 = [],
@@ -8883,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 => {
@@ -8990,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(),
@@ -9007,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',
@@ -9020,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
@@ -9031,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({
@@ -9546,7 +9598,7 @@ const {
   },
   clickbounds,
   elevation: {
-    raised: boxShadow
+    raised: boxShadow$1
   },
   spacings: {
     comfortable: {
@@ -9605,7 +9657,7 @@ const comfortable = {
     handle: {
       height: '16px',
       width: '16px',
-      boxShadow,
+      boxShadow: boxShadow$1,
       background: iconTertiary,
       states: {
         active: {
@@ -9736,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;