@equinor/eds-core-react 0.24.0 → 0.25.0

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

@@ -372,10 +372,10 @@ var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
 
 var mergeDeepRight$1 = mergeDeepRight;
 
-var _tokens$colors$i = edsTokens.tokens.colors,
-    primaryWhite = _tokens$colors$i.text.static_icons__primary_white.rgba,
-    _tokens$colors$intera$j = _tokens$colors$i.interactive,
-    primaryColor$8 = _tokens$colors$intera$j.primary__resting.rgba,
+var _tokens$colors$j = edsTokens.tokens.colors,
+    primaryWhite = _tokens$colors$j.text.static_icons__primary_white.rgba,
+    _tokens$colors$intera$j = _tokens$colors$j.interactive,
+    primaryColor$7 = _tokens$colors$intera$j.primary__resting.rgba,
     primaryHoverColor$2 = _tokens$colors$intera$j.primary__hover.rgba,
     secondaryColor$3 = _tokens$colors$intera$j.secondary__resting.rgba,
     secondaryHoverColor$3 = _tokens$colors$intera$j.secondary__link_hover.rgba,
@@ -383,7 +383,7 @@ var _tokens$colors$i = edsTokens.tokens.colors,
     dangerHoverColor$3 = _tokens$colors$intera$j.danger__hover.rgba,
     buttonBorderRadius$1 = edsTokens.tokens.shape.button.borderRadius;
 var primary$a = mergeDeepRight$1(button, {
-  background: primaryColor$8,
+  background: primaryColor$7,
   typography: {
     color: primaryWhite
   },
@@ -391,7 +391,7 @@ var primary$a = mergeDeepRight$1(button, {
     type: 'border',
     style: 'solid',
     width: '1px',
-    color: primaryColor$8,
+    color: primaryColor$7,
     radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$1, ")")
   },
   states: {
@@ -430,7 +430,7 @@ var danger$6 = mergeDeepRight$1(primary$a, {
 });
 
 var _tokens$colors$intera$i = edsTokens.tokens.colors.interactive,
-    primaryColor$7 = _tokens$colors$intera$i.primary__resting.rgba,
+    primaryColor$6 = _tokens$colors$intera$i.primary__resting.rgba,
     primaryHoverColor$1 = _tokens$colors$intera$i.primary__hover.rgba,
     primaryHoverAltColor$2 = _tokens$colors$intera$i.primary__hover_alt.rgba,
     secondaryColor$2 = _tokens$colors$intera$i.secondary__resting.rgba,
@@ -442,13 +442,13 @@ var _tokens$colors$intera$i = edsTokens.tokens.colors.interactive,
     buttonBorderRadius = edsTokens.tokens.shape.button.borderRadius;
 var primary$9 = mergeDeepRight$1(button, {
   typography: {
-    color: primaryColor$7
+    color: primaryColor$6
   },
   border: {
     type: 'border',
     style: 'solid',
     width: '1px',
-    color: primaryColor$7,
+    color: primaryColor$6,
     radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
   },
   states: {
@@ -509,7 +509,7 @@ var danger$5 = mergeDeepRight$1(primary$9, {
 });
 
 var _tokens$colors$intera$h = edsTokens.tokens.colors.interactive,
-    primaryColor$6 = _tokens$colors$intera$h.primary__resting.rgba,
+    primaryColor$5 = _tokens$colors$intera$h.primary__resting.rgba,
     primaryHoverColor = _tokens$colors$intera$h.primary__hover.rgba,
     primaryHoverAltColor$1 = _tokens$colors$intera$h.primary__hover_alt.rgba,
     secondaryColor$1 = _tokens$colors$intera$h.secondary__resting.rgba,
@@ -520,7 +520,7 @@ var _tokens$colors$intera$h = edsTokens.tokens.colors.interactive,
     dangerHoverAltColor$1 = _tokens$colors$intera$h.danger__highlight.rgba;
 var primary$8 = mergeDeepRight$1(button, {
   typography: {
-    color: primaryColor$6
+    color: primaryColor$5
   },
   states: {
     hover: {
@@ -565,7 +565,7 @@ var danger$4 = mergeDeepRight$1(primary$8, {
 });
 
 var _tokens$colors$intera$g = edsTokens.tokens.colors.interactive,
-    primaryColor$5 = _tokens$colors$intera$g.primary__resting.rgba,
+    primaryColor$4 = _tokens$colors$intera$g.primary__resting.rgba,
     primaryHoverAltColor = _tokens$colors$intera$g.primary__hover_alt.rgba,
     secondaryColor = _tokens$colors$intera$g.secondary__resting.rgba,
     secondaryHoverColor = _tokens$colors$intera$g.secondary__link_hover.rgba,
@@ -577,12 +577,12 @@ var _tokens$colors$intera$g = edsTokens.tokens.colors.interactive,
     clicboundHeight$1 = _tokens$clickbounds$3.default__base,
     compactClickboundHeight$1 = _tokens$clickbounds$3.compact__standard,
     shape$4 = edsTokens.tokens.shape,
-    focusOutlineWidth$8 = edsTokens.tokens.interactions.focused.width;
+    focusOutlineWidth$9 = edsTokens.tokens.interactions.focused.width;
 var primary$7 = mergeDeepRight$1(button, {
   height: shape$4.icon_button.minHeight,
   width: shape$4.icon_button.minWidth,
   typography: {
-    color: primaryColor$5
+    color: primaryColor$4
   },
   border: {
     width: '0px',
@@ -616,7 +616,7 @@ var primary$7 = mergeDeepRight$1(button, {
     },
     focus: {
       outline: {
-        offset: "-".concat(parseInt(focusOutlineWidth$8), "px")
+        offset: "-".concat(parseInt(focusOutlineWidth$9), "px")
       }
     }
   },
@@ -755,16 +755,16 @@ var InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth(_ref,
   });
 });
 
-var initalState$3 = {
+var initalState$2 = {
   /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
-var EdsContext = /*#__PURE__*/react.createContext(initalState$3);
+var EdsContext = /*#__PURE__*/react.createContext(initalState$2);
 var EdsProvider = function EdsProvider(_ref) {
   var children = _ref.children,
       density = _ref.density;
 
-  var _useState = react.useState(_objectSpread__default["default"](_objectSpread__default["default"]({}, initalState$3), {}, {
+  var _useState = react.useState(_objectSpread__default["default"](_objectSpread__default["default"]({}, initalState$2), {}, {
     density: density || 'comfortable'
   })),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -797,7 +797,7 @@ var useEds = function useEds() {
   return react.useContext(EdsContext);
 };
 
-var _excluded$1o = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
+var _excluded$1n = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
 
 var getVariant = function getVariant(tokenSet, variant) {
   switch (variant) {
@@ -864,7 +864,7 @@ var Button$1 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
       tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
       _ref2$fullWidth = _ref2.fullWidth,
       fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$1o);
+      other = _objectWithoutProperties__default["default"](_ref2, _excluded$1n);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -905,7 +905,7 @@ var group = {
   }
 };
 
-var _excluded$1n = ["children", "vertical"];
+var _excluded$1m = ["children", "vertical"];
 var border$4 = group.border;
 var radius$1 = border$4.type === 'border' && border$4.radius;
 var ButtonGroupBase = styled__default["default"].div.withConfig({
@@ -918,7 +918,7 @@ var ButtonGroupBase = styled__default["default"].div.withConfig({
 var ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref) {
   var children = _ref2.children,
       vertical = _ref2.vertical,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1n);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1m);
 
   var props = _objectSpread__default["default"]({
     ref: ref,
@@ -932,13 +932,13 @@ var ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref)
   }));
 });
 
-var _excluded$1m = ["children", "multiple", "selectedIndexes", "onChange"];
+var _excluded$1l = ["children", "multiple", "selectedIndexes", "onChange"];
 var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref) {
   var children = _ref.children,
       multiple = _ref.multiple,
       selectedIndexes = _ref.selectedIndexes,
       onChange = _ref.onChange,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1m);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1l);
 
   var _useState = react.useState(selectedIndexes || []),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -993,11 +993,11 @@ Button.Toggle = ToggleButton;
 Button.Group.displayName = 'Button.Group';
 Button.Toggle.displayName = 'Button.Toggle';
 
-var typography$i = edsTokens.tokens.typography,
+var typography$h = edsTokens.tokens.typography,
     colorsToken = edsTokens.tokens.colors,
-    focusOutlineWidth$7 = edsTokens.tokens.interactions.focused.width;
-var heading = typography$i.heading,
-    paragraph$2 = typography$i.paragraph;
+    focusOutlineWidth$8 = edsTokens.tokens.interactions.focused.width;
+var heading = typography$h.heading,
+    paragraph$2 = typography$h.paragraph;
 var _colorsToken$interact = colorsToken.interactive,
     primary$5 = _colorsToken$interact.primary__resting.rgba,
     secondary = _colorsToken$interact.secondary__resting.rgba,
@@ -1006,7 +1006,7 @@ var _colorsToken$interact = colorsToken.interactive,
     success$2 = _colorsToken$interact.success__resting.rgba,
     disabled = _colorsToken$interact.disabled__text.rgba,
     focus$1 = _colorsToken$interact.focus.rgba;
-var colors$8 = {
+var colors$6 = {
   primary: primary$5,
   secondary: secondary,
   danger: danger$1,
@@ -1021,7 +1021,7 @@ var link = {
   states: {
     focus: {
       outline: {
-        width: focusOutlineWidth$7,
+        width: focusOutlineWidth$8,
         color: focus$1,
         style: 'dashed',
         type: 'outline',
@@ -1031,7 +1031,7 @@ var link = {
   }
 };
 
-var _excluded$1l = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
+var _excluded$1k = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
 
 var getElementType = function getElementType(variant, link) {
   if (link) {
@@ -1064,12 +1064,12 @@ var findTypography = function findTypography(variantName, group) {
     return quickVariants[variantName];
   }
 
-  return typography$i[group][variantName];
+  return typography$h[group][variantName];
 };
 
 var findColor = function findColor() {
   var inputColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  return typeof colors$8[inputColor] === 'undefined' ? inputColor : colors$8[inputColor];
+  return typeof colors$6[inputColor] === 'undefined' ? inputColor : colors$6[inputColor];
 };
 
 var toVariantName = function toVariantName(variant) {
@@ -1110,7 +1110,7 @@ var Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref) {
       group = _ref5.group,
       token = _ref5.token,
       providedAs = _ref5.as,
-      other = _objectWithoutProperties__default["default"](_ref5, _excluded$1l);
+      other = _objectWithoutProperties__default["default"](_ref5, _excluded$1k);
 
   var as = providedAs ? providedAs : getElementType(variant, link);
   var variantName = toVariantName(variant, bold, italic, link);
@@ -1135,10 +1135,10 @@ var _tokens$typography$2 = edsTokens.tokens.typography,
     cellTypography$1 = _tokens$typography$ta.cell_text,
     cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
     compactTypography$1 = _tokens$typography$2._modes.compact,
-    _tokens$colors$h = edsTokens.tokens.colors,
-    typographyColor$1 = _tokens$colors$h.text.static_icons__default.rgba,
-    borderColor$4 = _tokens$colors$h.ui.background__medium.rgba,
-    _tokens$colors$intera$f = _tokens$colors$h.interactive,
+    _tokens$colors$i = edsTokens.tokens.colors,
+    typographyColor$1 = _tokens$colors$i.text.static_icons__default.rgba,
+    borderColor$4 = _tokens$colors$i.ui.background__medium.rgba,
+    _tokens$colors$intera$f = _tokens$colors$i.interactive,
     backgroundColor$5 = _tokens$colors$intera$f.table__cell__fill_resting.rgba,
     hoverBackgroundColor$3 = _tokens$colors$intera$f.table__cell__fill_hover.rgba,
     activeBackgroundColor$2 = _tokens$colors$intera$f.table__cell__fill_activated.rgba,
@@ -1251,14 +1251,14 @@ var applyVariant = function applyVariant(variant, token) {
   }
 };
 
-var _excluded$1k = ["children"];
+var _excluded$1j = ["children"];
 var TableBase$1 = styled__default["default"].table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
 var Table$1 = /*#__PURE__*/react.forwardRef(function Table(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1k);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1j);
 
   return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
@@ -1266,19 +1266,19 @@ var Table$1 = /*#__PURE__*/react.forwardRef(function Table(_ref, ref) {
   }));
 }); // Table.displayName = 'EdsTable'
 
-var initalState$2 = {
+var initalState$1 = {
   variant: 'body'
 };
-var InnerContext = /*#__PURE__*/react.createContext(initalState$2);
+var InnerContext = /*#__PURE__*/react.createContext(initalState$1);
 
-var _excluded$1j = ["children"];
+var _excluded$1i = ["children"];
 var TableBase = styled__default["default"].tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
 var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1j);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1i);
 
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
@@ -1291,7 +1291,7 @@ var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   });
 });
 
-var _excluded$1i = ["children", "variant"];
+var _excluded$1h = ["children", "variant"];
 var StyledTableCell$1 = styled__default["default"].td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
@@ -1313,7 +1313,7 @@ var TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2,
   var children = _ref2.children,
       _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1i);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1h);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -1333,10 +1333,10 @@ var TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2,
 var _tokens$typography$1 = edsTokens.tokens.typography,
     cellTypography = _tokens$typography$1.table.cell_header,
     compactTypography = _tokens$typography$1._modes.compact,
-    _tokens$colors$g = edsTokens.tokens.colors,
-    typographyColor = _tokens$colors$g.text.static_icons__default.rgba,
-    borderColor$3 = _tokens$colors$g.ui.background__medium.rgba,
-    _tokens$colors$intera$e = _tokens$colors$g.interactive,
+    _tokens$colors$h = edsTokens.tokens.colors,
+    typographyColor = _tokens$colors$h.text.static_icons__default.rgba,
+    borderColor$3 = _tokens$colors$h.ui.background__medium.rgba,
+    _tokens$colors$intera$e = _tokens$colors$h.interactive,
     backgroundColor$4 = _tokens$colors$intera$e.table__header__fill_resting.rgba,
     hoverBackgroundColor$2 = _tokens$colors$intera$e.table__header__fill_hover.rgba,
     activeBackgroundColor$1 = _tokens$colors$intera$e.table__header__fill_activated.rgba,
@@ -1420,7 +1420,7 @@ var token$4 = {
   }
 };
 
-var _excluded$1h = ["children", "sort"];
+var _excluded$1g = ["children", "sort"];
 var StyledTableCell = styled__default["default"].th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
@@ -1453,7 +1453,7 @@ var CellInner = styled__default["default"].div.withConfig({
 var TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell(_ref, ref) {
   var children = _ref.children,
       sort = _ref.sort,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$1h);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$1g);
 
   var _useEds = useEds(),
       density = _useEds.density;
@@ -1499,9 +1499,9 @@ var Cell = /*#__PURE__*/react.forwardRef(function Cell(_ref, ref) {
   });
 });
 
-var _tokens$colors$f = edsTokens.tokens.colors,
-    borderColor$2 = _tokens$colors$f.ui.background__medium.rgba,
-    backgroundColor$3 = _tokens$colors$f.interactive.table__header__fill_resting.rgba;
+var _tokens$colors$g = edsTokens.tokens.colors,
+    borderColor$2 = _tokens$colors$g.ui.background__medium.rgba,
+    backgroundColor$3 = _tokens$colors$g.interactive.table__header__fill_resting.rgba;
 var token$3 = {
   background: backgroundColor$3,
   border: {
@@ -1515,7 +1515,7 @@ var token$3 = {
   }
 };
 
-var _excluded$1g = ["children", "sticky"];
+var _excluded$1f = ["children", "sticky"];
 var StyledTableHead = styled__default["default"].thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
@@ -1523,7 +1523,7 @@ var StyledTableHead = styled__default["default"].thead.withConfig({
 var Head = /*#__PURE__*/react.forwardRef(function Head(_ref, ref) {
   var children = _ref.children,
       sticky = _ref.sticky,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1g);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1f);
 
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
@@ -1623,7 +1623,7 @@ var divider$1 = {
     background: mediumColor
   }
 };
-var small$7 = {
+var small$6 = {
   spacings: {
     top: spacingSmall$5,
     bottom: spacingSmall$5
@@ -1636,14 +1636,14 @@ var medium$3 = {
   }
 };
 
-var tokens$5 = /*#__PURE__*/Object.freeze({
+var tokens$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   divider: divider$1,
-  small: small$7,
+  small: small$6,
   medium: medium$3
 });
 
-var _excluded$1f = ["color", "variant", "size"];
+var _excluded$1e = ["color", "variant", "size"];
 var divider = divider$1;
 var StyledDivider$3 = styled__default["default"].hr.withConfig({
   displayName: "Divider__StyledDivider",
@@ -1662,14 +1662,14 @@ var Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
       variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? '1' : _ref2$size,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1f);
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1e);
 
   var colorValue = color === 'medium' ? 'mediumColor' : color;
 
   var props = _objectSpread__default["default"]({
     backgroundColor: divider[colorValue].background,
-    marginTop: tokens$5[variant].spacings.top,
-    marginBottom: tokens$5[variant].spacings.bottom,
+    marginTop: tokens$4[variant].spacings.top,
+    marginBottom: tokens$4[variant].spacings.bottom,
     dividerHeight: parseInt(size)
   }, rest);
 
@@ -1678,90 +1678,184 @@ var Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
   }));
 });
 
-var initalState$1 = {
-  isFocused: false
+var colors$5 = edsTokens.tokens.colors,
+    comfortable$5 = edsTokens.tokens.spacings.comfortable,
+    typography$g = edsTokens.tokens.typography;
+var label = {
+  background: colors$5.ui.background__light.rgba,
+  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$g.input.label), {}, {
+    color: colors$5.text.static_icons__tertiary.rgba
+  }),
+  spacings: {
+    left: comfortable$5.small,
+    right: comfortable$5.small,
+    top: '6px',
+    bottom: '6px'
+  },
+  states: {
+    disabled: {
+      typography: {
+        color: colors$5.interactive.disabled__text.rgba
+      }
+    }
+  }
 };
-var TextFieldContext = /*#__PURE__*/react.createContext(initalState$1);
-var TextFieldProvider = function TextFieldProvider(_ref) {
-  var children = _ref.children;
 
-  var _useState = react.useState(initalState$1),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+var _excluded$1d = ["label", "meta", "disabled"];
+var LabelBase = styled__default["default"].label.withConfig({
+  displayName: "Label__LabelBase",
+  componentId: "sc-1gi2bcn-0"
+})(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], edsUtils.typographyTemplate(label.typography), label.spacings.left, label.spacings.right, function (_ref) {
+  var disabledText = _ref.disabledText;
+  return disabledText ? label.states.disabled.typography.color : label.typography.color;
+});
+var Text$2 = styled__default["default"].span.withConfig({
+  displayName: "Label__Text",
+  componentId: "sc-1gi2bcn-1"
+})(["margin:0;"]);
+var Label$2 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
+  var _props$label = props.label,
+      label = _props$label === void 0 ? '' : _props$label,
+      meta = props.meta,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      other = _objectWithoutProperties__default["default"](props, _excluded$1d);
 
-  var handleFocus = function handleFocus() {
-    setState(function (prevState) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
-        isFocused: true
-      });
-    });
-  };
+  return (
+    /*#__PURE__*/
 
-  var handleBlur = function handleBlur() {
-    setState(function (prevState) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
-        isFocused: false
-      });
-    });
-  };
+    /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
+    jsxRuntime.jsxs(LabelBase, _objectSpread__default["default"](_objectSpread__default["default"]({
+      ref: ref,
+      disabledText: disabled
+    }, other), {}, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Text$2, {
+        children: label
+      }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$2, {
+        children: meta
+      })]
+    }))
+  );
+}); // Label.displayName = 'eds-text-field-label'
 
-  var value = {
-    handleFocus: handleFocus,
-    handleBlur: handleBlur,
-    isFocused: state.isFocused
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(TextFieldContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-var useTextField = function useTextField() {
-  return react.useContext(TextFieldContext);
+var colors$4 = edsTokens.tokens.colors,
+    comfortable$4 = edsTokens.tokens.spacings.comfortable,
+    typography$f = edsTokens.tokens.typography;
+var helperText = {
+  background: colors$4.ui.background__light.hex,
+  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$f.input.helper), {}, {
+    color: colors$4.text.static_icons__tertiary.rgba
+  }),
+  spacings: {
+    comfortable: {
+      left: comfortable$4.small,
+      right: comfortable$4.small,
+      top: comfortable$4.small,
+      bottom: '6px'
+    },
+    compact: {
+      left: comfortable$4.small,
+      right: comfortable$4.small,
+      top: comfortable$4.xx_small,
+      bottom: '6px'
+    }
+  }
 };
 
-var _tokens$colors$e = edsTokens.tokens.colors,
-    background$d = _tokens$colors$e.ui.background__light.rgba,
-    _tokens$colors$text = _tokens$colors$e.text,
-    static_icons__default = _tokens$colors$text.static_icons__default,
-    static_icons__tertiary = _tokens$colors$text.static_icons__tertiary,
-    _tokens$colors$intera$c = _tokens$colors$e.interactive,
-    disabled__text = _tokens$colors$intera$c.disabled__text,
-    primary__resting = _tokens$colors$intera$c.primary__resting,
-    danger__resting = _tokens$colors$intera$c.danger__resting,
-    danger__hover = _tokens$colors$intera$c.danger__hover,
-    warning__resting = _tokens$colors$intera$c.warning__resting,
-    warning__hover = _tokens$colors$intera$c.warning__hover,
-    success__resting = _tokens$colors$intera$c.success__resting,
-    success__hover = _tokens$colors$intera$c.success__hover,
+var _excluded$1c = ["text", "icon", "color"];
+var Container$5 = styled__default["default"].div.withConfig({
+  displayName: "HelperText__Container",
+  componentId: "sc-189ug61-0"
+})(function (_ref) {
+  var color = _ref.color;
+  return styled.css({
+    display: 'grid',
+    gap: '8px',
+    gridAutoFlow: 'column',
+    alignItems: 'start',
+    justifyContent: 'start',
+    color: color
+  });
+});
+var Text$1 = styled__default["default"].p.withConfig({
+  displayName: "HelperText__Text",
+  componentId: "sc-189ug61-1"
+})(["margin:0;", ";"], edsUtils.typographyMixin(helperText.typography));
+var TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelperText(_ref2, ref) {
+  var text = _ref2.text,
+      icon = _ref2.icon,
+      _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? helperText.typography.color : _ref2$color,
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1c);
+
+  if (!text) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, _objectSpread__default["default"](_objectSpread__default["default"]({}, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+    color: color,
+    ref: ref
+  })), {}, {
+    children: [icon, /*#__PURE__*/jsxRuntime.jsx(Text$1, {
+      children: text
+    })]
+  }));
+});
+
+var _tokens$colors$f = edsTokens.tokens.colors,
+    background$d = _tokens$colors$f.ui.background__light.rgba,
+    _tokens$colors$text$1 = _tokens$colors$f.text,
+    static_icons__default$1 = _tokens$colors$text$1.static_icons__default,
+    static_icons__tertiary$1 = _tokens$colors$text$1.static_icons__tertiary,
+    _tokens$colors$intera$c = _tokens$colors$f.interactive,
+    disabled__text$1 = _tokens$colors$intera$c.disabled__text,
+    primary__resting$1 = _tokens$colors$intera$c.primary__resting,
+    danger__resting$1 = _tokens$colors$intera$c.danger__resting,
+    danger__hover$1 = _tokens$colors$intera$c.danger__hover,
+    warning__resting$1 = _tokens$colors$intera$c.warning__resting,
+    warning__hover$1 = _tokens$colors$intera$c.warning__hover,
+    success__resting$1 = _tokens$colors$intera$c.success__resting,
+    success__hover$1 = _tokens$colors$intera$c.success__hover,
     _tokens$spacings$comf$d = edsTokens.tokens.spacings.comfortable,
-    small$6 = _tokens$spacings$comf$d.small,
+    small$5 = _tokens$spacings$comf$d.small,
     x_small$5 = _tokens$spacings$comf$d.x_small,
-    typography$h = edsTokens.tokens.typography,
+    typography$e = edsTokens.tokens.typography,
     shape$2 = edsTokens.tokens.shape;
 var input$2 = {
   minHeight: shape$2.straight.minHeight,
   background: background$d,
   spacings: {
-    left: small$6,
-    right: small$6,
+    left: small$5,
+    right: small$5,
     top: '6px',
     bottom: '6px'
   },
-  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$h.input.text), {}, {
-    color: static_icons__default.rgba
+  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$e.input.text), {}, {
+    color: static_icons__default$1.rgba
   }),
   entities: {
     placeholder: {
       typography: {
-        color: static_icons__tertiary.rgba
+        color: static_icons__tertiary$1.rgba
+      }
+    },
+    helperText: {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$e.input.label), {}, {
+        color: static_icons__tertiary$1.rgba
+      }),
+      states: {
+        disabled: {
+          typography: {
+            color: disabled__text$1.rgba
+          }
+        }
       }
     }
   },
   states: {
     disabled: {
       typography: {
-        color: disabled__text.rgba
+        color: disabled__text$1.rgba
       }
     },
     readOnly: {
@@ -1781,13 +1875,13 @@ var input$2 = {
       outline: {
         type: 'outline',
         width: '2px',
-        color: primary__resting.rgba,
+        color: primary__resting$1.rgba,
         style: 'solid',
         offset: '0px'
       }
     }
   },
-  boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
+  boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary$1.rgba,
   modes: {
     compact: {
       minHeight: shape$2._modes.compact.straight.minHeight,
@@ -1801,279 +1895,215 @@ var input$2 = {
   }
 };
 var error$4 = mergeDeepRight$1(input$2, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: danger__resting$1.rgba
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: danger__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px'
-      }
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
-        color: danger__hover.rgba,
-        style: 'solid',
-        offset: '0px'
+        color: danger__hover$1.rgba
       }
     }
+  },
+  entities: {
+    helperText: {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$e.input.label), {}, {
+        color: danger__hover$1.rgba
+      })
+    }
   }
 });
 var warning$4 = mergeDeepRight$1(input$2, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: warning__resting$1.rgba
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: warning__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px'
-      }
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
-        color: warning__hover.rgba,
-        style: 'solid',
-        offset: '0px'
+        color: warning__hover$1.rgba
       }
     }
+  },
+  entities: {
+    helperText: {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$e.input.label), {}, {
+        color: warning__hover$1.rgba
+      })
+    }
   }
 });
 var success$1 = mergeDeepRight$1(input$2, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: success__resting$1.rgba
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: success__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px'
-      }
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
-        color: success__hover.rgba,
-        style: 'solid',
-        offset: '0px'
+        color: success__hover$1.rgba
       }
     }
+  },
+  entities: {
+    helperText: {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$e.input.label), {}, {
+        color: success__hover$1.rgba
+      })
+    }
   }
 });
-var inputToken = {
+var inputToken$1 = {
   input: input$2,
   error: error$4,
   warning: warning$4,
   success: success$1
 };
 
-var tokens$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  input: input$2,
-  error: error$4,
-  warning: warning$4,
-  success: success$1,
-  inputToken: inputToken
-});
-
-var _excluded$1e = ["variant", "disabled", "type"];
-var StyledInput$1 = styled__default["default"].input.withConfig({
-  displayName: "Input__StyledInput",
-  componentId: "sc-1ykv024-0"
-})(function (_ref) {
-  var theme = _ref.theme;
-  var _theme$states = theme.states,
-      focusOutline = _theme$states.focus.outline,
-      activeOutline = _theme$states.active.outline,
-      disabled = _theme$states.disabled,
-      readOnly = _theme$states.readOnly,
-      boxShadow = theme.boxShadow;
-  return styled.css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, edsUtils.outlineTemplate(activeOutline), edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, edsUtils.outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
-});
-var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref2, ref) {
-  var _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? 'text' : _ref2$type,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$1e);
-
-  var actualVariant = variant === 'default' ? 'input' : variant;
-  var inputVariant = inputToken[actualVariant];
+var _excluded$1b = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
+var Container$4 = styled__default["default"].div.withConfig({
+  displayName: "InputWrapper__Container",
+  componentId: "sc-v6o9z1-0"
+})([""]);
+var HelperText = styled__default["default"](TextfieldHelperText).withConfig({
+  displayName: "InputWrapper__HelperText",
+  componentId: "sc-v6o9z1-1"
+})(["margin-top:8px;margin-left:8px;"]);
+var Label$1 = styled__default["default"](Label$2).withConfig({
+  displayName: "InputWrapper__Label",
+  componentId: "sc-v6o9z1-2"
+})(["margin-left:8px;margin-right:8px;"]);
+
+/** InputWrapper is a internal skeleton component for structuring input elements  */
+var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, ref) {
+  var children = _ref.children,
+      color = _ref.color,
+      label = _ref.label,
+      _ref$labelProps = _ref.labelProps,
+      labelProps = _ref$labelProps === void 0 ? {} : _ref$labelProps,
+      _ref$helperProps = _ref.helperProps,
+      helperProps = _ref$helperProps === void 0 ? {} : _ref$helperProps,
+      helperIcon = _ref.helperIcon,
+      other = _objectWithoutProperties__default["default"](_ref, _excluded$1b);
 
   var _useEds = useEds(),
       density = _useEds.density;
 
+  var actualVariant = color || 'input';
+  var inputToken = inputToken$1[actualVariant];
   var token = edsUtils.useToken({
     density: density
-  }, inputVariant);
-
-  var inputProps = _objectSpread__default["default"]({
-    ref: ref,
-    type: type,
-    disabled: disabled
-  }, other);
-
+  }, inputToken);
+  var helperTextColor = react.useCallback(function () {
+    var _token = token();
+
+    return other.disabled ? _token.entities.helperText.states.disabled.typography.color : _token.entities.helperText.typography.color;
+  }, [token, other.disabled])();
+  var hasHelperText = Boolean(helperProps === null || helperProps === void 0 ? void 0 : helperProps.text);
+  var hasLabel = Boolean(label || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.label));
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledInput$1, _objectSpread__default["default"]({}, inputProps))
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, other), {}, {
+      ref: ref,
+      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, _objectSpread__default["default"]({}, _objectSpread__default["default"]({
+        label: label
+      }, labelProps))), children, hasHelperText && /*#__PURE__*/jsxRuntime.jsx(HelperText, _objectSpread__default["default"]({
+        color: helperTextColor
+      }, _objectSpread__default["default"]({
+        icon: helperIcon
+      }, helperProps)))]
+    }))
   });
 });
 
-var colors$7 = edsTokens.tokens.colors,
-    comfortable$6 = edsTokens.tokens.spacings.comfortable;
+var _tokens$colors$e = edsTokens.tokens.colors,
+    background$c = _tokens$colors$e.ui.background__light.rgba,
+    _tokens$colors$text = _tokens$colors$e.text,
+    static_icons__default = _tokens$colors$text.static_icons__default,
+    static_icons__tertiary = _tokens$colors$text.static_icons__tertiary,
+    _tokens$colors$intera$b = _tokens$colors$e.interactive,
+    disabled__text = _tokens$colors$intera$b.disabled__text,
+    primary__resting = _tokens$colors$intera$b.primary__resting,
+    danger__resting = _tokens$colors$intera$b.danger__resting,
+    danger__hover = _tokens$colors$intera$b.danger__hover,
+    warning__resting = _tokens$colors$intera$b.warning__resting,
+    warning__hover = _tokens$colors$intera$b.warning__hover,
+    success__resting = _tokens$colors$intera$b.success__resting,
+    success__hover = _tokens$colors$intera$b.success__hover,
+    _tokens$spacings$comf$c = edsTokens.tokens.spacings.comfortable,
+    small$4 = _tokens$spacings$comf$c.small,
+    x_small$4 = _tokens$spacings$comf$c.x_small,
+    typography$d = edsTokens.tokens.typography,
+    shape$1 = edsTokens.tokens.shape;
 var input$1 = {
+  height: shape$1.straight.minHeight,
+  width: '100%',
+  background: background$c,
   spacings: {
-    comfortable: {
-      left: comfortable$6.small,
-      right: comfortable$6.small,
-      top: '10px',
-      bottom: '10px'
-    },
-    compact: {
-      left: comfortable$6.small,
-      right: comfortable$6.small,
-      top: '10px',
-      bottom: '10px'
-    }
-  },
-  "default": {
-    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$7.interactive.danger__resting.hex,
-    disabledColor: colors$7.interactive.disabled__fill.hex,
-    focusColor: colors$7.interactive.danger__hover.hex
-  },
-  warning: {
-    color: colors$7.interactive.warning__resting.hex,
-    disabledColor: colors$7.interactive.disabled__fill.hex,
-    focusColor: colors$7.interactive.warning__hover.hex
+    left: small$4,
+    right: small$4,
+    top: '6px',
+    bottom: '6px'
   },
-  success: {
-    color: colors$7.interactive.success__resting.hex,
-    disabledColor: colors$7.interactive.disabled__fill.hex,
-    focusColor: colors$7.interactive.success__hover.hex
-  }
-};
-
-var _excluded$1d = ["size", "variant", "isDisabled", "colors", "children"];
-var StyledIcon$2 = styled__default["default"].div.withConfig({
-  displayName: "Icon__StyledIcon",
-  componentId: "sc-jr0rqa-0"
-})(function (_ref) {
-  var colors = _ref.colors,
-      isDisabled = _ref.isDisabled,
-      isFocused = _ref.isFocused,
-      size = _ref.size;
-  var focusColor = colors.focusColor,
-      color = colors.color,
-      disabledColor = colors.disabledColor;
-  var fill = color;
-
-  if (isDisabled) {
-    fill = disabledColor;
-  }
-
-  if (isFocused) {
-    fill = focusColor;
-  }
-
-  return styled.css(["&,svg{fill:", ";width:", "px;height:", "px;}"], fill, size, size);
-});
-var InputIcon = /*#__PURE__*/react.forwardRef(function InputIcon(_ref2, ref) {
-  var _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 24 : _ref2$size,
-      _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-      _ref2$isDisabled = _ref2.isDisabled,
-      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
-      _ref2$colors = _ref2.colors,
-      colors = _ref2$colors === void 0 ? {
-    color: input$1[variant].color,
-    disabledColor: input$1[variant].disabledColor,
-    focusColor: input$1[variant].focusColor
-  } : _ref2$colors,
-      children = _ref2.children,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$1d);
-
-  var _useTextField = useTextField(),
-      isFocused = _useTextField.isFocused;
-
-  var iconProps = {
-    isDisabled: isDisabled,
-    colors: colors,
-    isFocused: isFocused,
-    size: size
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledIcon$2, _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({
-    ref: ref
-  }, iconProps), other), {}, {
-    children: children
-  }));
-});
-
-var colors$6 = edsTokens.tokens.colors,
-    typography$g = edsTokens.tokens.typography,
-    _tokens$spacings$comf$c = edsTokens.tokens.spacings.comfortable,
-    small$5 = _tokens$spacings$comf$c.small,
-    x_small$4 = _tokens$spacings$comf$c.x_small;
-var textfield$1 = {
-  background: colors$6.ui.background__light.hex,
-  border: {
-    type: 'border',
-    radius: 0,
+  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$d.input.text), {}, {
+    color: static_icons__default.rgba
+  }),
+  outline: {
+    type: 'outline',
+    color: 'transparent',
     width: '1px',
-    color: colors$6.text.static_icons__tertiary.hex
-  },
-  spacings: {
-    left: small$5,
-    right: small$5,
-    top: small$5
+    style: 'solid',
+    offset: '0px'
   },
-  states: {
-    focus: {
-      outline: {
-        width: '2px',
-        color: colors$6.interactive.primary__resting.hex,
-        style: 'solid',
-        type: 'outline',
-        offset: '0px'
+  entities: {
+    placeholder: {
+      typography: {
+        color: static_icons__tertiary.rgba
       }
     },
-    readOnly: {
-      background: 'transparent',
-      boxShadow: 'none'
-    }
-  },
-  entities: {
-    unit: {
-      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$g.input.label), {}, {
-        color: colors$6.text.static_icons__tertiary.hex
+    adornment: {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$d.input.label), {}, {
+        color: static_icons__tertiary.rgba
       }),
+      spacings: {
+        left: small$4,
+        right: small$4
+      },
       states: {
         disabled: {
           typography: {
-            color: colors$6.interactive.disabled__text.hex
+            color: disabled__text.rgba
           }
         }
       }
     }
   },
+  states: {
+    disabled: {
+      typography: {
+        color: disabled__text.rgba
+      }
+    },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none'
+    },
+    active: {},
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: primary__resting.rgba,
+        style: 'solid',
+        offset: '0px'
+      }
+    }
+  },
+  boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
   modes: {
     compact: {
+      height: shape$1._modes.compact.straight.minHeight,
       spacings: {
         left: x_small$4,
         right: x_small$4,
@@ -2083,472 +2113,316 @@ var textfield$1 = {
     }
   }
 };
-var error$3 = {
-  border: {
-    type: 'border',
-    radius: 0,
-    width: '1px',
-    color: colors$6.interactive.danger__resting.hex
+var error$3 = mergeDeepRight$1(input$1, {
+  boxShadow: 'none',
+  outline: {
+    color: danger__resting.rgba
   },
   states: {
     focus: {
       outline: {
-        width: '2px',
-        color: colors$6.interactive.danger__hover.hex,
-        style: 'solid',
-        type: 'outline',
-        offset: '0px'
+        color: danger__hover.rgba
+      }
+    }
+  },
+  entities: {
+    adornment: {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$d.input.label), {}, {
+        color: danger__resting.rgba
+      }),
+      states: {
+        focus: {
+          outline: {
+            color: danger__hover.rgba
+          }
+        }
       }
     }
   }
-};
-var warning$3 = {
-  border: {
-    type: 'border',
-    radius: 0,
-    width: '1px',
-    color: colors$6.interactive.warning__resting.hex
+});
+var warning$3 = mergeDeepRight$1(input$1, {
+  boxShadow: 'none',
+  outline: {
+    color: warning__resting.rgba
   },
   states: {
     focus: {
       outline: {
-        width: '2px',
-        color: colors$6.interactive.warning__hover.hex,
-        style: 'solid',
-        type: 'outline',
-        offset: '0px'
+        color: warning__hover.rgba
+      }
+    }
+  },
+  entities: {
+    adornment: {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$d.input.label), {}, {
+        color: warning__resting.rgba
+      }),
+      states: {
+        focus: {
+          outline: {
+            color: warning__hover.rgba
+          }
+        }
       }
     }
   }
-};
-var success = {
-  border: {
-    type: 'border',
-    radius: 0,
-    width: '1px',
-    color: colors$6.interactive.success__resting.hex
+});
+var success = mergeDeepRight$1(input$1, {
+  boxShadow: 'none',
+  outline: {
+    color: success__resting.rgba
   },
   states: {
     focus: {
       outline: {
-        width: '2px',
-        color: colors$6.interactive.success__hover.hex,
-        style: 'solid',
-        type: 'outline',
-        offset: '0px'
+        color: success__hover.rgba
+      }
+    }
+  },
+  entities: {
+    adornment: {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$d.input.label), {}, {
+        color: success__resting.rgba
+      }),
+      states: {
+        focus: {
+          outline: {
+            color: success__hover.rgba
+          }
+        }
       }
     }
   }
+});
+var inputToken = {
+  input: input$1,
+  error: error$3,
+  warning: warning$3,
+  success: success
 };
 
 var tokens$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  textfield: textfield$1,
+  input: input$1,
   error: error$3,
   warning: warning$3,
-  success: success
+  success: success,
+  inputToken: inputToken
 });
 
-var _excluded$1c = ["variant", "disabled", "type", "rowsMax"];
-var input = input$2;
-
-var Variation$2 = function Variation(_ref) {
-  var variant = _ref.variant,
-      token = _ref.token,
-      density = _ref.density;
-
-  if (!variant) {
-    return "";
-  }
-
-  var _token$states = token.states,
-      focusOutline = _token$states.focus.outline,
-      activeOutline = _token$states.active.outline,
-      boxShadow = token.boxShadow;
-  var spacings = input.spacings;
-
-  if (density === 'compact') {
-    spacings = input.modes.compact.spacings;
-  }
-
-  return styled.css(["border:none;", " ", " box-shadow:", ";&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}"], edsUtils.spacingsTemplate(spacings), edsUtils.outlineTemplate(activeOutline), boxShadow, edsUtils.outlineTemplate(focusOutline));
-};
-
-var StyledTextarea = styled__default["default"].textarea.withConfig({
-  displayName: "Textarea__StyledTextarea",
-  componentId: "sc-2yjdcc-0"
-})(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, edsUtils.typographyTemplate(input.typography), Variation$2, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
-var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref2, ref) {
-  var _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? 'text' : _ref2$type,
-      rowsMax = _ref2.rowsMax,
-      other = _objectWithoutProperties__default["default"](_ref2, _excluded$1c);
-
-  var actualVariant = variant === 'default' ? 'input' : variant;
-  var inputVariant = tokens$4[actualVariant];
-
-  var _useState = react.useState(null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      textareaEl = _useState2[0],
-      setTextareaEl = _useState2[1];
-
-  var _useEds = useEds(),
-      density = _useEds.density;
-
-  var spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
-  var lineHeight = input$2.typography.lineHeight;
-  var top = spacings.top,
-      bottom = spacings.bottom;
-  var fontSize = 16;
-
-  if (textareaEl) {
-    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
-  }
-
-  var padding = parseInt(top) + parseInt(bottom);
-  var maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
-  edsUtils.useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  var combinedRef = react.useMemo(function () {
-    return edsUtils.mergeRefs(ref, setTextareaEl);
-  }, [setTextareaEl, ref]);
-
-  var inputProps = _objectSpread__default["default"]({
-    ref: combinedRef,
-    type: type,
-    disabled: disabled,
-    variant: variant,
-    token: inputVariant,
-    density: density
-  }, other);
+var _excluded$1a = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
+var Container$3 = styled__default["default"].div.withConfig({
+  displayName: "Input__Container",
+  componentId: "sc-1ykv024-0"
+})(function (_ref) {
+  var _entities$adornment, _entities$adornment$s;
 
-  return /*#__PURE__*/jsxRuntime.jsx(StyledTextarea, _objectSpread__default["default"]({}, inputProps));
+  var token = _ref.token,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly;
+  var states = token.states,
+      entities = token.entities;
+  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:", ";", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, edsUtils.outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
+    background: states.readOnly.background,
+    boxShadow: states.readOnly.boxShadow
+  }));
 });
-
-var _excluded$1b = ["multiline", "variant", "disabled", "readOnly", "type", "unit", "inputIcon", "rowsMax", "onBlur", "onFocus"];
-var textfield = textfield$1;
-
-var Variation$1 = function Variation(_ref) {
-  var _token$border, _token$border2, _token$border3, _token$border4;
-
-  var variant = _ref.variant,
-      isFocused = _ref.isFocused,
-      token = _ref.token;
-
-  if (!variant) {
-    return "";
-  }
-
-  return styled.css(["box-shadow:", ";", ""], isFocused ? "none" : variant === 'default' ? "inset 0 -1px 0 0 ".concat(((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)) : "0 0 0 1px ".concat(((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)), isFocused && edsUtils.outlineTemplate(token.states.focus.outline));
-};
-
-var StrippedInput = styled__default["default"](Input$4).withConfig({
-  displayName: "Field__StrippedInput",
-  componentId: "sc-455b88-0"
-})(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
-var StrippedTextarea = styled__default["default"](Textarea).withConfig({
-  displayName: "Field__StrippedTextarea",
-  componentId: "sc-455b88-1"
-})(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
-var InputWrapper$2 = styled__default["default"].div.withConfig({
-  displayName: "Field__InputWrapper",
-  componentId: "sc-455b88-2"
+var StyledInput = styled__default["default"].input.withConfig({
+  displayName: "Input__StyledInput",
+  componentId: "sc-1ykv024-1"
 })(function (_ref2) {
-  var inputIcon = _ref2.inputIcon,
-      unit = _ref2.unit,
-      isDisabled = _ref2.isDisabled,
-      isReadOnly = _ref2.isReadOnly,
-      multiline = _ref2.multiline,
-      variant = _ref2.variant;
-  return styled.css(["", " ", " ", " ", " ", ""], Variation$1, (inputIcon || unit) && styled.css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && styled.css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && styled.css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && styled.css(["box-shadow:none;"]));
-});
-var Unit = styled__default["default"].span.withConfig({
-  displayName: "Field__Unit",
-  componentId: "sc-455b88-3"
-})(["", ";display:inline-block;margin-top:3px;", ""], edsUtils.typographyTemplate(textfield.entities.unit.typography), function (_ref3) {
-  var isDisabled = _ref3.isDisabled;
-  return isDisabled && {
-    color: textfield.entities.unit.states.disabled.typography.color
-  };
+  var token = _ref2.token,
+      paddingLeft = _ref2.paddingLeft,
+      paddingRight = _ref2.paddingRight;
+  return styled.css(["width:100%;border:none;background:transparent;", " ", " outline:none;padding-left:", ";padding-right:", ";&::placeholder{color:", ";}&:disabled{color:var(--eds-input-color);cursor:not-allowed;}"], edsUtils.spacingsTemplate(token.spacings), edsUtils.typographyMixin(token.typography), paddingLeft, paddingRight, token.entities.placeholder.typography.color);
 });
 var Adornments = styled__default["default"].div.withConfig({
-  displayName: "Field__Adornments",
-  componentId: "sc-455b88-4"
-})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, function (_ref4) {
-  var multiline = _ref4.multiline,
-      theme = _ref4.theme;
-  return multiline && {
-    marginTop: theme.spacings.top,
-    alignSelf: 'start'
-  };
+  displayName: "Input__Adornments",
+  componentId: "sc-1ykv024-2"
+})(function (_ref3) {
+  var token = _ref3.token;
+  return styled.css(["position:absolute;top:", ";bottom:", ";display:flex;align-items:center;", " color:var(--eds-input-adornment-color);"], token.spacings.top, token.spacings.bottom, edsUtils.typographyMixin(token.entities.adornment.typography));
 });
-var Field = /*#__PURE__*/react.forwardRef(function Field(_ref5, ref) {
-  var multiline = _ref5.multiline,
-      variant = _ref5.variant,
-      disabled = _ref5.disabled,
-      readOnly = _ref5.readOnly,
-      type = _ref5.type,
-      unit = _ref5.unit,
-      inputIcon = _ref5.inputIcon,
-      rowsMax = _ref5.rowsMax,
-      onBlur = _ref5.onBlur,
-      onFocus = _ref5.onFocus,
-      other = _objectWithoutProperties__default["default"](_ref5, _excluded$1b);
-
-  var _useTextField = useTextField(),
-      handleFocus = _useTextField.handleFocus,
-      handleBlur = _useTextField.handleBlur,
-      isFocused = _useTextField.isFocused;
+var LeftAdornments = styled__default["default"](Adornments).withConfig({
+  displayName: "Input__LeftAdornments",
+  componentId: "sc-1ykv024-3"
+})(function (_ref4) {
+  var token = _ref4.token;
+  return styled.css(["left:0;padding-left:", ";"], token.entities.adornment.spacings.left);
+});
+var RightAdornments = styled__default["default"](Adornments).withConfig({
+  displayName: "Input__RightAdornments",
+  componentId: "sc-1ykv024-4"
+})(function (_ref5) {
+  var token = _ref5.token;
+  return styled.css(["right:0;padding-right:", ";"], token.entities.adornment.spacings.right);
+});
+var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
+  var variant = _ref6.variant,
+      _ref6$disabled = _ref6.disabled,
+      disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+      _ref6$type = _ref6.type,
+      type = _ref6$type === void 0 ? 'text' : _ref6$type,
+      leftAdornments = _ref6.leftAdornments,
+      rightAdornments = _ref6.rightAdornments,
+      readOnly = _ref6.readOnly,
+      className = _ref6.className,
+      style = _ref6.style,
+      leftAdornmentsProps = _ref6.leftAdornmentsProps,
+      rightAdornmentsProps = _ref6.rightAdornmentsProps,
+      leftAdornmentsWidth = _ref6.leftAdornmentsWidth,
+      rightAdornmentsWidth = _ref6.rightAdornmentsWidth,
+      other = _objectWithoutProperties__default["default"](_ref6, _excluded$1a);
+
+  var inputVariant = inputToken[variant] ? inputToken[variant] : inputToken.input;
 
   var _useEds = useEds(),
       density = _useEds.density;
 
-  var iconSize = density === 'compact' ? 16 : 24;
-  var actualVariant = variant === 'default' ? 'textfield' : variant;
-  var inputVariant = tokens$3[actualVariant];
-  var isError = actualVariant === 'error';
+  var _token = edsUtils.useToken({
+    density: density
+  }, inputVariant)();
 
-  var focusHandler = function focusHandler(e) {
-    handleFocus();
-    onFocus && onFocus(e);
-  };
+  var _useState = react.useState(),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      rightAdornmentsRef = _useState2[0],
+      setRightAdornmentsRef = _useState2[1];
 
-  var blurHandler = function blurHandler(e) {
-    handleBlur();
-    onBlur && onBlur(e);
-  };
+  var _useState3 = react.useState(),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      leftAdornmentsRef = _useState4[0],
+      setLeftAdornmentsRef = _useState4[1];
 
-  var inputWrapperProps = {
-    isFocused: isFocused,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    variant: variant,
-    token: inputVariant,
-    inputIcon: inputIcon,
-    unit: unit,
-    multiline: multiline
-  };
+  var token = react.useCallback(function () {
+    var _leftAdornmentsWidth = leftAdornmentsWidth || (leftAdornmentsRef ? leftAdornmentsRef.clientWidth : 0);
+
+    var _rightAdornmentsWidth = rightAdornmentsWidth || (rightAdornmentsRef ? rightAdornmentsRef.clientWidth : 0);
+
+    return _objectSpread__default["default"](_objectSpread__default["default"]({}, _token), {}, {
+      spacings: _objectSpread__default["default"](_objectSpread__default["default"]({}, _token.spacings), {}, {
+        left: "".concat(_leftAdornmentsWidth + parseInt(_token.spacings.left), "px"),
+        right: "".concat(_rightAdornmentsWidth + parseInt(_token.spacings.right), "px")
+      })
+    });
+  }, [leftAdornmentsWidth, leftAdornmentsRef, rightAdornmentsWidth, rightAdornmentsRef, _token])();
 
   var inputProps = _objectSpread__default["default"]({
     ref: ref,
-    'aria-invalid': isError,
     type: type,
     disabled: disabled,
     readOnly: readOnly,
-    variant: variant,
-    onBlur: blurHandler,
-    onFocus: focusHandler
+    token: token,
+    style: {
+      resize: 'none'
+    }
   }, other);
 
-  var textareaProps = _objectSpread__default["default"](_objectSpread__default["default"]({}, inputProps), {}, {
-    rowsMax: rowsMax,
-    ref: ref
-  });
-
-  return /*#__PURE__*/jsxRuntime.jsxs(InputWrapper$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, inputWrapperProps), {}, {
-    children: [multiline ? /*#__PURE__*/jsxRuntime.jsx(StrippedTextarea, _objectSpread__default["default"]({}, textareaProps)) : /*#__PURE__*/jsxRuntime.jsx(StrippedInput, _objectSpread__default["default"]({}, inputProps)), (inputIcon || unit) && /*#__PURE__*/jsxRuntime.jsxs(Adornments, {
-      multiline: multiline,
-      children: [unit && /*#__PURE__*/jsxRuntime.jsx(Unit, {
-        isDisabled: disabled,
-        children: unit
-      }), inputIcon && /*#__PURE__*/jsxRuntime.jsx(InputIcon, {
-        isDisabled: disabled,
-        variant: variant,
-        size: iconSize,
-        children: inputIcon
-      })]
-    })]
-  }));
-});
-
-var colors$5 = edsTokens.tokens.colors,
-    comfortable$5 = edsTokens.tokens.spacings.comfortable,
-    typography$f = edsTokens.tokens.typography;
-var label = {
-  background: colors$5.ui.background__light.rgba,
-  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$f.input.label), {}, {
-    color: colors$5.text.static_icons__tertiary.rgba
-  }),
-  spacings: {
-    left: comfortable$5.small,
-    right: comfortable$5.small,
-    top: '6px',
-    bottom: '6px'
-  },
-  states: {
-    disabled: {
-      typography: {
-        color: colors$5.interactive.disabled__text.rgba
-      }
-    }
-  }
-};
+  var containerProps = {
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style,
+    token: token
+  };
 
-var _excluded$1a = ["label", "meta", "disabled"];
-var LabelBase = styled__default["default"].label.withConfig({
-  displayName: "Label__LabelBase",
-  componentId: "sc-1gi2bcn-0"
-})(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], edsUtils.typographyTemplate(label.typography), label.spacings.left, label.spacings.right, function (_ref) {
-  var disabledText = _ref.disabledText;
-  return disabledText ? label.states.disabled.typography.color : label.typography.color;
-});
-var Text$2 = styled__default["default"].span.withConfig({
-  displayName: "Label__Text",
-  componentId: "sc-1gi2bcn-1"
-})(["margin:0;"]);
-var Label$1 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
-  var _props$label = props.label,
-      label = _props$label === void 0 ? '' : _props$label,
-      meta = props.meta,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      other = _objectWithoutProperties__default["default"](props, _excluded$1a);
+  var _leftAdornmentProps = _objectSpread__default["default"](_objectSpread__default["default"]({}, leftAdornmentsProps), {}, {
+    ref: setLeftAdornmentsRef,
+    token: token
+  });
+
+  var _rightAdornmentProps = _objectSpread__default["default"](_objectSpread__default["default"]({}, rightAdornmentsProps), {}, {
+    ref: setRightAdornmentsRef,
+    token: token
+  });
 
   return (
     /*#__PURE__*/
-
-    /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
-    jsxRuntime.jsxs(LabelBase, _objectSpread__default["default"](_objectSpread__default["default"]({
-      ref: ref,
-      disabledText: disabled
-    }, other), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(Text$2, {
-        children: label
-      }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$2, {
-        children: meta
-      })]
+    // Not using <ThemeProvider> because of cascading styling messing with adornments
+    jsxRuntime.jsxs(Container$3, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
+      children: [leftAdornments ? /*#__PURE__*/jsxRuntime.jsx(LeftAdornments, _objectSpread__default["default"](_objectSpread__default["default"]({}, _leftAdornmentProps), {}, {
+        children: leftAdornments
+      })) : null, /*#__PURE__*/jsxRuntime.jsx(StyledInput, _objectSpread__default["default"]({
+        paddingLeft: token.spacings.left,
+        paddingRight: token.spacings.right
+      }, inputProps)), rightAdornments ? /*#__PURE__*/jsxRuntime.jsx(RightAdornments, _objectSpread__default["default"](_objectSpread__default["default"]({}, _rightAdornmentProps), {}, {
+        children: rightAdornments
+      })) : null]
     }))
   );
-}); // Label.displayName = 'eds-text-field-label'
+});
 
-var colors$4 = edsTokens.tokens.colors,
-    comfortable$4 = edsTokens.tokens.spacings.comfortable,
-    typography$e = edsTokens.tokens.typography;
-var helperText = {
-  background: colors$4.ui.background__light.hex,
-  typography: typography$e.input.helper,
-  spacings: {
-    comfortable: {
-      left: comfortable$4.small,
-      right: comfortable$4.small,
-      top: comfortable$4.small,
-      bottom: '6px'
-    },
-    compact: {
-      left: comfortable$4.small,
-      right: comfortable$4.small,
-      top: comfortable$4.xx_small,
-      bottom: '6px'
-    }
-  },
-  "default": {
-    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$4.interactive.danger__text.hex,
-    disabledColor: colors$4.interactive.disabled__text.hex,
-    focusColor: colors$4.interactive.danger__hover.hex
-  },
-  warning: {
-    color: colors$4.interactive.warning__text.hex,
-    disabledColor: colors$4.interactive.disabled__text.hex,
-    focusColor: colors$4.interactive.warning__hover.hex
-  },
-  success: {
-    color: colors$4.interactive.success__text.hex,
-    disabledColor: colors$4.interactive.disabled__text.hex,
-    focusColor: colors$4.interactive.success__hover.hex
-  }
-};
+var _excluded$19 = ["variant", "disabled", "type", "rowsMax"];
+var input = input$1;
+var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
+  var variant = _ref.variant,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      rowsMax = _ref.rowsMax,
+      other = _objectWithoutProperties__default["default"](_ref, _excluded$19);
 
-var _excluded$19 = ["helperText", "icon", "variant", "disabled"];
+  var inputVariant = tokens$3[variant] ? tokens$3[variant] : input$1;
 
-var Variation = function Variation(_ref) {
-  var variant = _ref.variant,
-      isFocused = _ref.isFocused,
-      isDisabled = _ref.isDisabled;
+  var _useState = react.useState(null),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      textareaEl = _useState2[0],
+      setTextareaEl = _useState2[1];
 
-  if (!variant) {
-    return "";
-  }
+  var _useEds = useEds(),
+      density = _useEds.density;
 
-  var focusColor = variant.focusColor,
-      color = variant.color,
-      disabledColor = variant.disabledColor;
+  var spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
+  var lineHeight = input$1.typography.lineHeight;
+  var top = spacings.top,
+      bottom = spacings.bottom;
+  var fontSize = 16;
 
-  if (isDisabled) {
-    return styled.css(["color:", ";"], disabledColor);
+  if (textareaEl) {
+    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
   }
 
-  if (isFocused) {
-    return styled.css(["color:", ";"], focusColor);
-  }
+  var padding = parseInt(top) + parseInt(bottom);
+  var maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
+  edsUtils.useAutoResize(textareaEl, rowsMax ? maxHeight : null);
+  var combinedRef = react.useCallback(function () {
+    return edsUtils.mergeRefs(ref, setTextareaEl);
+  }, [setTextareaEl, ref])();
 
-  return styled.css(["color:", ";"], color);
-};
+  var inputProps = _objectSpread__default["default"]({
+    ref: combinedRef,
+    type: type,
+    disabled: disabled,
+    variant: variant,
+    token: inputVariant,
+    density: density
+  }, other);
 
-var Container$5 = styled__default["default"].div.withConfig({
-  displayName: "HelperText__Container",
-  componentId: "sc-1kfkyxg-0"
-})(["display:flex;align-items:flex-start;margin-top:", ";"], function (_ref2) {
-  var spacings = _ref2.spacings;
-  return spacings.top;
+  var adornmentsToTop = {
+    style: {
+      alignItems: 'flex-start'
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default["default"]({
+    as: "textarea",
+    rightAdornmentsProps: adornmentsToTop,
+    leftAdornmentsProps: adornmentsToTop,
+    style: {
+      height: 'auto'
+    }
+  }, inputProps));
 });
-var Text$1 = styled__default["default"].p.withConfig({
-  displayName: "HelperText__Text",
-  componentId: "sc-1kfkyxg-1"
-})(["", " margin:0 0 0 ", ";", ""], edsUtils.typographyTemplate(helperText.typography), function (_ref3) {
-  var spacings = _ref3.spacings;
-  return spacings.left;
-}, Variation);
-var TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelperText(_ref4, ref) {
-  var helperText$1 = _ref4.helperText,
-      icon = _ref4.icon,
-      _ref4$variant = _ref4.variant,
-      variant = _ref4$variant === void 0 ? 'default' : _ref4$variant,
-      isDisabled = _ref4.disabled,
-      rest = _objectWithoutProperties__default["default"](_ref4, _excluded$19);
-
-  var helperVariant = helperText[variant];
-  var spacings = helperText.spacings.comfortable;
 
-  var _useTextField = useTextField(),
-      isFocused = _useTextField.isFocused;
+var _excluded$18 = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
 
-  var colors = {
-    color: helperVariant.color,
-    disabledColor: helperVariant.disabledColor,
-    focusColor: helperVariant.focusColor
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, _objectSpread__default["default"](_objectSpread__default["default"]({
+/** Proxy component for working around typescript and element type switching */
+var Field = /*#__PURE__*/react.forwardRef(function Field(props, ref) {
+  return props.multiline ? /*#__PURE__*/jsxRuntime.jsx(Textarea, _objectSpread__default["default"]({
     ref: ref
-  }, rest), {}, {
-    spacings: spacings,
-    children: [icon && /*#__PURE__*/jsxRuntime.jsx(InputIcon, {
-      isDisabled: isDisabled,
-      colors: colors,
-      size: 16,
-      children: icon
-    }), /*#__PURE__*/jsxRuntime.jsx(Text$1, {
-      variant: helperVariant,
-      isFocused: isFocused,
-      isDisabled: isDisabled,
-      spacings: spacings,
-      children: helperText$1
-    })]
-  }));
+  }, props)) : /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default["default"]({
+    ref: ref
+  }, props));
 });
-
-var _excluded$18 = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputRef", "inputIcon", "helperIcon", "rowsMax", "style"];
-var Container$4 = styled__default["default"].div.withConfig({
-  displayName: "TextField__Container",
-  componentId: "sc-o1nc07-0"
-})(["min-width:100px;width:100%;"]);
 var TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
   var id = _ref.id,
       label = _ref.label,
@@ -2557,43 +2431,49 @@ var TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
       helperText = _ref.helperText,
       placeholder = _ref.placeholder,
       disabled = _ref.disabled,
-      multiline = _ref.multiline,
+      _ref$multiline = _ref.multiline,
+      multiline = _ref$multiline === void 0 ? false : _ref$multiline,
       className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-      inputRef = _ref.inputRef,
+      variant = _ref.variant,
       inputIcon = _ref.inputIcon,
       helperIcon = _ref.helperIcon,
-      rowsMax = _ref.rowsMax,
       style = _ref.style,
+      rowsMax = _ref.rowsMax,
+      textareaRef = _ref.textareaRef,
+      inputRef = _ref.inputRef,
       other = _objectWithoutProperties__default["default"](_ref, _excluded$18);
 
   var helperTextId = edsUtils.useId(null, 'helpertext');
 
-  var inputProps = _objectSpread__default["default"]({
-    'aria-describedby': helperTextId,
-    multiline: multiline,
+  var fieldProps = _objectSpread__default["default"]({
+    'aria-invalid': variant === 'error' || undefined,
     disabled: disabled,
     placeholder: placeholder,
     id: id,
     variant: variant,
-    ref: inputRef,
-    inputIcon: inputIcon,
-    unit: unit,
-    rowsMax: rowsMax
+    rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [inputIcon, /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: unit
+      })]
+    }),
+    rowsMax: rowsMax,
+    ref: inputRef || textareaRef,
+    multiline: multiline
   }, other);
 
   var helperProps = {
-    id: helperTextId,
-    variant: variant,
-    helperText: helperText,
+    id: null,
+    text: helperText,
     icon: helperIcon,
     disabled: disabled
   };
   var containerProps = {
     ref: ref,
     className: className,
-    style: style
+    style: _objectSpread__default["default"]({
+      width: '100%'
+    }, style),
+    color: variant
   };
   var labelProps = {
     htmlFor: id,
@@ -2601,23 +2481,22 @@ var TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
     meta: meta,
     disabled: disabled
   };
-  var showLabel = label || meta;
-  var showHelperText = helperText;
 
-  var _useEds = useEds(),
-      density = _useEds.density;
+  if (helperText) {
+    fieldProps = _objectSpread__default["default"]({
+      'aria-describedby': helperTextId
+    }, fieldProps);
+    helperProps = _objectSpread__default["default"]({
+      id: helperTextId
+    }, helperProps);
+  }
 
-  var token = edsUtils.useToken({
-    density: density
-  }, textfield$1);
-  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(Container$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
-      children: /*#__PURE__*/jsxRuntime.jsxs(TextFieldProvider, {
-        children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, _objectSpread__default["default"]({}, labelProps)), /*#__PURE__*/jsxRuntime.jsx(Field, _objectSpread__default["default"]({}, inputProps)), showHelperText && /*#__PURE__*/jsxRuntime.jsx(TextfieldHelperText, _objectSpread__default["default"]({}, helperProps))]
-      })
-    }))
-  });
+  return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, _objectSpread__default["default"](_objectSpread__default["default"]({
+    helperProps: helperProps,
+    labelProps: labelProps
+  }, containerProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Field, _objectSpread__default["default"]({}, fieldProps))
+  }));
 });
 
 var _icons = {};
@@ -2766,14 +2645,14 @@ var list = {
 };
 
 var _excluded$16 = ["children", "variant"];
-var typography$d = list.typography;
+var typography$c = list.typography;
 var StyledList$2 = styled__default["default"].ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-v9d2hy-0"
 })(["", " ", ""], function (_ref) {
   var as = _ref.as;
   return as === 'ol' ? styled.css(["& ol{list-style-type:lower-alpha;}"]) : '';
-}, edsUtils.typographyTemplate(typography$d));
+}, edsUtils.typographyTemplate(typography$c));
 var List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   var children = _ref2.children,
       _ref2$variant = _ref2.variant,
@@ -2804,20 +2683,20 @@ var List$1 = List$2;
 List$1.Item = ListItem$2;
 List$1.Item.displayName = 'List.Item';
 
-var typography$c = edsTokens.tokens.typography.ui.accordion_header,
+var typography$b = edsTokens.tokens.typography.ui.accordion_header,
     _tokens$colors$d = edsTokens.tokens.colors,
     _tokens$colors$ui$4 = _tokens$colors$d.ui,
     backgroundDefault = _tokens$colors$ui$4.background__default.rgba,
     borderColor$1 = _tokens$colors$ui$4.background__medium.rgba,
     backgroundHover = _tokens$colors$ui$4.background__light.rgba,
-    _tokens$colors$intera$b = _tokens$colors$d.interactive,
-    activatedColor = _tokens$colors$intera$b.primary__resting.rgba,
-    disabledIconColor$1 = _tokens$colors$intera$b.disabled__fill.rgba,
-    disabledColor$2 = _tokens$colors$intera$b.disabled__text.rgba,
-    focusOutlineColor$6 = _tokens$colors$intera$b.focus.rgba,
+    _tokens$colors$intera$a = _tokens$colors$d.interactive,
+    activatedColor = _tokens$colors$intera$a.primary__resting.rgba,
+    disabledIconColor$1 = _tokens$colors$intera$a.disabled__fill.rgba,
+    disabledColor$2 = _tokens$colors$intera$a.disabled__text.rgba,
+    focusOutlineColor$7 = _tokens$colors$intera$a.focus.rgba,
     defaultIconColor = _tokens$colors$d.text.static_icons__default.rgba,
     mediumSpacing = edsTokens.tokens.spacings.comfortable.medium,
-    focusOutlineWidth$6 = edsTokens.tokens.interactions.focused.width,
+    focusOutlineWidth$7 = edsTokens.tokens.interactions.focused.width,
     text = edsTokens.tokens.typography.input.text;
 var accordion = {
   border: {
@@ -2838,7 +2717,7 @@ var accordion = {
     header: {
       height: '48px',
       background: backgroundDefault,
-      typography: typography$c,
+      typography: typography$b,
       spacings: {
         left: mediumSpacing,
         right: mediumSpacing
@@ -2847,19 +2726,19 @@ var accordion = {
         focus: {
           outline: {
             type: 'outline',
-            color: focusOutlineColor$6,
+            color: focusOutlineColor$7,
             style: 'dashed',
-            width: focusOutlineWidth$6,
+            width: focusOutlineWidth$7,
             offset: '2px'
           }
         },
         disabled: {
-          typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$c), {}, {
+          typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$b), {}, {
             color: disabledColor$2
           })
         },
         active: {
-          typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$c), {}, {
+          typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$b), {}, {
             color: activatedColor
           })
         },
@@ -3261,14 +3140,14 @@ TabsContext.Consumer;
 var _tokens$colors$c = edsTokens.tokens.colors,
     defaultColor = _tokens$colors$c.text.static_icons__tertiary.rgba,
     defaultBorderColor = _tokens$colors$c.ui.background__medium.rgba,
-    _tokens$colors$intera$a = _tokens$colors$c.interactive,
-    focusOutlineColor$5 = _tokens$colors$intera$a.focus.rgba,
-    hoverBackgroundColor = _tokens$colors$intera$a.primary__hover_alt.rgba,
-    activeColor$2 = _tokens$colors$intera$a.primary__resting.rgba,
-    activeHoverColor = _tokens$colors$intera$a.primary__hover.rgba,
+    _tokens$colors$intera$9 = _tokens$colors$c.interactive,
+    focusOutlineColor$6 = _tokens$colors$intera$9.focus.rgba,
+    hoverBackgroundColor = _tokens$colors$intera$9.primary__hover_alt.rgba,
+    activeColor$2 = _tokens$colors$intera$9.primary__resting.rgba,
+    activeHoverColor = _tokens$colors$intera$9.primary__hover.rgba,
     clickboundsHeight = edsTokens.tokens.clickbounds.default__base,
     spacingMedium$8 = edsTokens.tokens.spacings.comfortable.medium,
-    focusOutlineWidth$5 = edsTokens.tokens.interactions.focused.width,
+    focusOutlineWidth$6 = edsTokens.tokens.interactions.focused.width,
     _tokens$typography$na = edsTokens.tokens.typography.navigation,
     menu_tabs = _tokens$typography$na.menu_tabs,
     menu_title = _tokens$typography$na.menu_title;
@@ -3283,9 +3162,9 @@ var token$1 = {
         focus: {
           outline: {
             type: 'outline',
-            width: focusOutlineWidth$5,
+            width: focusOutlineWidth$6,
             style: 'dashed',
-            color: focusOutlineColor$5
+            color: focusOutlineColor$6
           }
         }
       },
@@ -3331,10 +3210,10 @@ var token$1 = {
         focus: {
           outline: {
             type: 'outline',
-            width: focusOutlineWidth$5,
-            offset: "-".concat(parseInt(focusOutlineWidth$5), "px"),
+            width: focusOutlineWidth$6,
+            offset: "-".concat(parseInt(focusOutlineWidth$6), "px"),
             style: 'dashed',
-            color: focusOutlineColor$5
+            color: focusOutlineColor$6
           }
         },
         active: {
@@ -3670,9 +3549,9 @@ Tabs.Panel.displayName = 'Tabs.Panel';
 Tabs.List.displayName = 'Tabs.List';
 
 var elevation = edsTokens.tokens.elevation,
-    background$c = edsTokens.tokens.colors.ui.background__default.rgba;
+    background$b = edsTokens.tokens.colors.ui.background__default.rgba;
 var paper = {
-  background: background$c
+  background: background$b
 };
 
 var _excluded$W = ["elevation"];
@@ -3697,14 +3576,14 @@ var Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
 });
 
 var _tokens$colors$ui$3 = edsTokens.tokens.colors.ui,
-    background$b = _tokens$colors$ui$3.background__default.rgba,
+    background$a = _tokens$colors$ui$3.background__default.rgba,
     backgroundInfo = _tokens$colors$ui$3.background__info.rgba,
     backgroundWarning = _tokens$colors$ui$3.background__warning.rgba,
     backgroundDanger = _tokens$colors$ui$3.background__danger.rgba,
     spacingMedium$7 = edsTokens.tokens.spacings.comfortable.medium,
     borderRadius$8 = edsTokens.tokens.shape.corners.borderRadius;
 var primary$4 = {
-  background: background$b,
+  background: background$a,
   border: {
     type: 'border',
     radius: borderRadius$8
@@ -4012,17 +3891,17 @@ TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
 TopBar.CustomContent.displayName = 'Topbar.CustomContent';
 
-var background$a = edsTokens.tokens.colors.ui.background__scrim.rgba;
+var background$9 = edsTokens.tokens.colors.ui.background__scrim.rgba;
 var scrim = {
-  background: background$a
+  background: background$9
 };
 
 var _excluded$L = ["children", "onClose", "open", "isDismissable"];
-var background$9 = scrim.background;
+var background$8 = scrim.background;
 var StyledScrim = styled__default["default"](reactDomInteractions.FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$9);
+})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$8);
 var ScrimContent = styled__default["default"].div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
@@ -4072,11 +3951,11 @@ var spacingMedium$6 = edsTokens.tokens.spacings.comfortable.medium,
     _tokens$typography = edsTokens.tokens.typography,
     accordion_header = _tokens$typography.ui.accordion_header,
     body_long = _tokens$typography.paragraph.body_long,
-    background$8 = edsTokens.tokens.colors.ui.background__default.rgba,
+    background$7 = edsTokens.tokens.colors.ui.background__default.rgba,
     borderRadius$7 = edsTokens.tokens.shape.corners.borderRadius;
 var dialog = {
   width: '252px',
-  background: background$8,
+  background: background$7,
   typography: accordion_header,
   border: {
     type: 'border',
@@ -4302,20 +4181,20 @@ Dialog.Content.displayName = 'Dialog.Content';
 Dialog.Header.displayName = 'Dialog.Header';
 
 var _tokens$colors$b = edsTokens.tokens.colors,
-    _tokens$colors$intera$9 = _tokens$colors$b.interactive,
-    primaryColor$4 = _tokens$colors$intera$9.primary__resting.rgba,
-    primaryHoverAlt$6 = _tokens$colors$intera$9.primary__hover_alt.rgba,
-    primaryHover$3 = _tokens$colors$intera$9.primary__hover.rgba,
-    focusColor$1 = _tokens$colors$intera$9.focus.rgba,
+    _tokens$colors$intera$8 = _tokens$colors$b.interactive,
+    primaryColor$3 = _tokens$colors$intera$8.primary__resting.rgba,
+    primaryHoverAlt$5 = _tokens$colors$intera$8.primary__hover_alt.rgba,
+    primaryHover$3 = _tokens$colors$intera$8.primary__hover.rgba,
+    focusColor$1 = _tokens$colors$intera$8.focus.rgba,
     labelColor = _tokens$colors$b.text.static_icons__tertiary.rgba,
     borderRadius$6 = edsTokens.tokens.shape.corners.borderRadius,
     _tokens$spacings$comf$b = edsTokens.tokens.spacings.comfortable,
-    small$4 = _tokens$spacings$comf$b.small,
+    small$3 = _tokens$spacings$comf$b.small,
     x_large = _tokens$spacings$comf$b.x_large,
     xxx_large = _tokens$spacings$comf$b.xxx_large,
-    typography$b = edsTokens.tokens.typography;
+    typography$a = edsTokens.tokens.typography;
 var tableOfContents = {
-  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$b.navigation.button), {}, {
+  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$a.navigation.button), {}, {
     color: labelColor
   }),
   spacings: {
@@ -4324,15 +4203,15 @@ var tableOfContents = {
   },
   entities: {
     icon: {
-      background: primaryColor$4,
+      background: primaryColor$3,
       spacings: {
-        right: small$4
+        right: small$3
       }
     },
     links: {
       width: 'calc(189px - 36px)',
-      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$b.navigation.button), {}, {
-        color: primaryColor$4
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$a.navigation.button), {}, {
+        color: primaryColor$3
       }),
       spacings: {
         top: '10px',
@@ -4362,7 +4241,7 @@ var tableOfContents = {
       }
     },
     hover: {
-      background: primaryHoverAlt$6,
+      background: primaryHoverAlt$5,
       border: {
         radius: borderRadius$6
       },
@@ -4371,7 +4250,7 @@ var tableOfContents = {
           background: primaryHover$3
         }
       },
-      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$b.navigation.button), {}, {
+      typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$a.navigation.button), {}, {
         color: primaryHover$3
       })
     }
@@ -4455,14 +4334,14 @@ TableOfContents.LinkItem = LinkItem;
 TableOfContents.LinkItem.displayName = 'TableOfContents.LinkItem';
 
 var _tokens$colors$ui$2 = edsTokens.tokens.colors.ui,
-    background$7 = _tokens$colors$ui$2.background__default.rgba,
+    background$6 = _tokens$colors$ui$2.background__default.rgba,
     borderColor = _tokens$colors$ui$2.background__light.rgba,
     _tokens$spacings$comf$a = edsTokens.tokens.spacings.comfortable,
     spacingXXS = _tokens$spacings$comf$a.xx_small,
     spacingMedium$5 = _tokens$spacings$comf$a.medium,
     body_short = edsTokens.tokens.typography.paragraph.body_short;
 var comfortable$2 = {
-  background: background$7,
+  background: background$6,
   spacings: {
     left: '14px',
     // padding left is 14px, because of border-left 'steals' 2px of the padding
@@ -4487,17 +4366,17 @@ var variants = {
 };
 
 var _excluded$D = ["variant", "width", "title", "children", "open", "onClose"];
-var background$6 = comfortable$2.background,
+var background$5 = comfortable$2.background,
     spacings$2 = comfortable$2.spacings,
     border$2 = comfortable$2.border,
-    typography$a = comfortable$2.typography;
+    typography$9 = comfortable$2.typography;
 var StyledSideSheet = styled__default["default"].div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$6, function (_ref) {
+})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$5, function (_ref) {
   var width = _ref.width;
   return width;
-}, edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$2), edsUtils.typographyTemplate(typography$a));
+}, edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$2), edsUtils.typographyTemplate(typography$9));
 var Header$1 = styled__default["default"].div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
@@ -4541,25 +4420,25 @@ var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
 
 var _tokens$spacings$comf$9 = edsTokens.tokens.spacings.comfortable,
     x_small$3 = _tokens$spacings$comf$9.x_small,
-    small$3 = _tokens$spacings$comf$9.small,
+    small$2 = _tokens$spacings$comf$9.small,
     medium$2 = _tokens$spacings$comf$9.medium,
     chipTypography = edsTokens.tokens.typography.ui.chip__badge,
     _tokens$colors$a = edsTokens.tokens.colors,
     _tokens$colors$ui$1 = _tokens$colors$a.ui,
     backgroundColorDefault$1 = _tokens$colors$ui$1.background__default.rgba,
     backgroundColor$2 = _tokens$colors$ui$1.background__light.rgba,
-    _tokens$colors$intera$8 = _tokens$colors$a.interactive,
-    primaryColor$3 = _tokens$colors$intera$8.primary__resting.rgba,
-    primaryHoverAlt$5 = _tokens$colors$intera$8.primary__hover_alt.rgba,
-    primaryHover$2 = _tokens$colors$intera$8.primary__hover.rgba,
-    disabledColor$1 = _tokens$colors$intera$8.disabled__text.rgba,
-    focusOutlineColor$4 = _tokens$colors$intera$8.focus.rgba,
-    activeColor$1 = _tokens$colors$intera$8.primary__selected_highlight.rgba,
-    errorColor = _tokens$colors$intera$8.danger__resting.rgba,
-    errorColorHover = _tokens$colors$intera$8.danger__hover.rgba,
-    errorBackgroundHover = _tokens$colors$intera$8.danger__highlight.rgba,
+    _tokens$colors$intera$7 = _tokens$colors$a.interactive,
+    primaryColor$2 = _tokens$colors$intera$7.primary__resting.rgba,
+    primaryHoverAlt$4 = _tokens$colors$intera$7.primary__hover_alt.rgba,
+    primaryHover$2 = _tokens$colors$intera$7.primary__hover.rgba,
+    disabledColor$1 = _tokens$colors$intera$7.disabled__text.rgba,
+    focusOutlineColor$5 = _tokens$colors$intera$7.focus.rgba,
+    activeColor$1 = _tokens$colors$intera$7.primary__selected_highlight.rgba,
+    errorColor = _tokens$colors$intera$7.danger__resting.rgba,
+    errorColorHover = _tokens$colors$intera$7.danger__hover.rgba,
+    errorBackgroundHover = _tokens$colors$intera$7.danger__highlight.rgba,
     borderRadius$5 = edsTokens.tokens.shape.rounded.borderRadius,
-    focusOutlineWidth$4 = edsTokens.tokens.interactions.focused.width;
+    focusOutlineWidth$5 = edsTokens.tokens.interactions.focused.width;
 var enabled$3 = {
   background: backgroundColor$2,
   height: '22px',
@@ -4572,10 +4451,10 @@ var enabled$3 = {
   },
   spacings: {
     left: x_small$3,
-    right: small$3
+    right: small$2
   },
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, chipTypography), {}, {
-    color: primaryColor$3
+    color: primaryColor$2
   }),
   states: {
     hover: {
@@ -4590,8 +4469,8 @@ var enabled$3 = {
     },
     focus: {
       outline: {
-        width: focusOutlineWidth$4,
-        color: focusOutlineColor$4,
+        width: focusOutlineWidth$5,
+        color: focusOutlineColor$5,
         style: 'dashed',
         type: 'outline',
         offset: '3px'
@@ -4612,7 +4491,7 @@ var enabled$3 = {
       },
       states: {
         hover: {
-          background: primaryHoverAlt$5
+          background: primaryHoverAlt$4
         }
       }
     }
@@ -4673,9 +4552,9 @@ var Icon = styled__default["default"](Icon$1).withConfig({
 var _excluded$C = ["children", "onDelete", "disabled", "onClick", "variant"];
 var enabled$1 = enabled$3,
     error = error$2;
-var background$5 = enabled$1.background,
+var background$4 = enabled$1.background,
     height = enabled$1.height,
-    typography$9 = enabled$1.typography,
+    typography$8 = enabled$1.typography,
     spacings$1 = enabled$1.spacings,
     border$1 = enabled$1.border,
     states$2 = enabled$1.states;
@@ -4689,7 +4568,7 @@ var StyledChips = styled__default["default"].div.attrs(function (_ref) {
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$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), function (_ref2) {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$8.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$1), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$8), function (_ref2) {
   var clickable = _ref2.clickable;
   return clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
 }, function (_ref3) {
@@ -4707,7 +4586,7 @@ var StyledChips = styled__default["default"].div.attrs(function (_ref) {
   }
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$5, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color);
+  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$4, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color);
 }, function (_ref5) {
   var deletable = _ref5.deletable;
   return deletable && styled.css(["padding-right:4px;"]);
@@ -4792,358 +4671,152 @@ var Chip = /*#__PURE__*/react.forwardRef(function Chip(_ref7, ref) {
   }));
 }); // Chip.displayName = 'eds-chip'
 
-var avatar = {
-  border: {
-    type: 'border',
-    radius: '50%'
-  },
-  states: {
-    disabled: {
-      opacity: '0.5'
-    }
-  }
-};
-
-var _excluded$B = ["src", "alt", "size", "disabled"];
-var StyledAvatar = styled__default["default"].div.withConfig({
-  displayName: "Avatar__StyledAvatar",
-  componentId: "sc-r7n7on-0"
-})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], edsUtils.bordersTemplate(avatar.border), function (_ref) {
-  var size = _ref.size;
-  return styled.css(["height:", "px;width:", "px;"], size, size);
-});
-var StyledImage = styled__default["default"].img.withConfig({
-  displayName: "Avatar__StyledImage",
-  componentId: "sc-r7n7on-1"
-})(["height:100%;text-align:center;color:transparent;", ";"], function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled && styled.css(["opacity:", ";"], avatar.states.disabled.opacity);
-});
-var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
-  var _ref3$src = _ref3.src,
-      src = _ref3$src === void 0 ? null : _ref3$src,
-      alt = _ref3.alt,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? 24 : _ref3$size,
-      _ref3$disabled = _ref3.disabled,
-      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$B);
-
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, _objectSpread__default["default"](_objectSpread__default["default"]({
-    size: size,
-    disabled: disabled,
-    ref: ref
-  }, rest), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledImage, {
-      src: src,
-      alt: alt,
-      disabled: disabled
-    })
-  }));
-});
-Avatar.displayName = 'Avatar';
-
-var _tokens$colors$9 = edsTokens.tokens.colors,
-    background$4 = _tokens$colors$9.ui.background__light.rgba,
-    _tokens$colors$intera$7 = _tokens$colors$9.interactive,
-    primaryHoverAlt$4 = _tokens$colors$intera$7.primary__hover_alt.rgba,
-    primaryColor$2 = _tokens$colors$intera$7.primary__resting.rgba,
-    placeholderColor = _tokens$colors$9.text.static_icons__tertiary.rgba,
-    small$2 = edsTokens.tokens.spacings.comfortable.small,
-    typography$8 = edsTokens.tokens.typography.input.text,
-    shape$1 = edsTokens.tokens.shape;
-var search = {
-  background: background$4,
-  typography: typography$8,
-  height: '36px',
-  clickbound: {
-    offset: {
-      top: '6px'
-    },
-    height: '48px'
-  },
-  spacings: {
-    left: small$2,
-    right: small$2
-  },
-  border: {
-    type: 'border',
-    width: '1px',
-    style: 'solid',
-    color: 'transparent'
-  },
-  states: {
-    focus: {
-      border: {
-        type: 'border',
-        width: '1px',
-        style: 'solid',
-        color: primaryColor$2
-      }
-    }
-  },
-  entities: {
-    placeholder: {
-      typography: {
-        color: placeholderColor
-      }
-    },
-    icon: {
-      typography: {
-        color: placeholderColor
-      },
-      border: {
-        type: 'border',
-        radius: '50%'
-      },
-      states: {
-        hover: {
-          background: primaryHoverAlt$4
-        }
-      },
-      clickbound: {
-        offset: {
-          top: '6px'
-        },
-        height: '36px'
-      }
-    },
-    button: {
-      height: '24px',
-      width: '24px',
-      spacings: {
-        right: small$2
-      }
-    }
+var avatar = {
+  border: {
+    type: 'border',
+    radius: '50%'
   },
-  modes: {
-    compact: {
-      height: shape$1._modes.compact.straight.minHeight
+  states: {
+    disabled: {
+      opacity: '0.5'
     }
   }
 };
 
-var _excluded$A = ["onChange", "defaultValue", "value", "className", "style", "disabled", "onBlur", "onFocus"];
-var Container$3 = styled__default["default"].span.withConfig({
-  displayName: "Search__Container",
-  componentId: "sc-v8l23u-0"
-})(function (_ref) {
-  var disabled = _ref.disabled,
-      isFocused = _ref.isFocused,
-      theme = _ref.theme;
-  var height = theme.height,
-      spacings = theme.spacings,
-      background = theme.background,
-      border = theme.border,
-      clickbound = theme.clickbound,
-      _theme$entities = theme.entities,
-      icon = _theme$entities.icon,
-      placeholder = _theme$entities.placeholder,
-      states = theme.states;
-  return styled.css(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, edsUtils.bordersTemplate(border), icon.typography.color, edsUtils.spacingsTemplate(spacings), isFocused && edsUtils.bordersTemplate(states.focus.border), placeholder.typography.color, disabled ? styled.css(["cursor:not-allowed;"]) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], edsUtils.bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
+var _excluded$B = ["src", "alt", "size", "disabled"];
+var StyledAvatar = styled__default["default"].div.withConfig({
+  displayName: "Avatar__StyledAvatar",
+  componentId: "sc-r7n7on-0"
+})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], edsUtils.bordersTemplate(avatar.border), function (_ref) {
+  var size = _ref.size;
+  return styled.css(["height:", "px;width:", "px;"], size, size);
+});
+var StyledImage = styled__default["default"].img.withConfig({
+  displayName: "Avatar__StyledImage",
+  componentId: "sc-r7n7on-1"
+})(["height:100%;text-align:center;color:transparent;", ";"], function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled && styled.css(["opacity:", ";"], avatar.states.disabled.opacity);
+});
+var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
+  var _ref3$src = _ref3.src,
+      src = _ref3$src === void 0 ? null : _ref3$src,
+      alt = _ref3.alt,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? 24 : _ref3$size,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded$B);
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, _objectSpread__default["default"](_objectSpread__default["default"]({
+    size: size,
+    disabled: disabled,
+    ref: ref
+  }, rest), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledImage, {
+      src: src,
+      alt: alt,
+      disabled: disabled
+    })
+  }));
 });
+Avatar.displayName = 'Avatar';
+
+var _excluded$A = ["onChange", "style", "className"];
 var SearchInput = styled__default["default"](Input$4).withConfig({
   displayName: "Search__SearchInput",
-  componentId: "sc-v8l23u-1"
-})(function (_ref2) {
-  var theme = _ref2.theme,
-      disabled = _ref2.disabled;
-  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;"]));
-});
+  componentId: "sc-v8l23u-0"
+})(["input{&[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;}}"]);
 var InsideButton = styled__default["default"](Button).withConfig({
   displayName: "Search__InsideButton",
-  componentId: "sc-v8l23u-2"
-})(function (_ref3) {
-  var theme = _ref3.theme,
-      isActive = _ref3.isActive;
-  var button = theme.entities.button;
-  return styled.css(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, isActive && styled.css(["visibility:visible;"]));
-});
-var Search = /*#__PURE__*/react.forwardRef(function Search(_ref4, ref) {
-  var _onChange = _ref4.onChange,
-      _ref4$defaultValue = _ref4.defaultValue,
-      defaultValue = _ref4$defaultValue === void 0 ? '' : _ref4$defaultValue,
-      value = _ref4.value,
-      _ref4$className = _ref4.className,
-      className = _ref4$className === void 0 ? '' : _ref4$className,
-      style = _ref4.style,
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      _onBlur = _ref4.onBlur,
-      _onFocus = _ref4.onFocus,
-      rest = _objectWithoutProperties__default["default"](_ref4, _excluded$A);
-
-  var _useEds = useEds(),
-      density = _useEds.density;
+  componentId: "sc-v8l23u-1"
+})(["height:24px;width:24px;"]);
+var Search = /*#__PURE__*/react.forwardRef(function Search(_ref, ref) {
+  var _onChange = _ref.onChange,
+      style = _ref.style,
+      className = _ref.className,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$A);
 
-  var token = edsUtils.useToken({
-    density: density
-  }, search);
-  var isControlled = typeof value !== 'undefined';
-  var isActive = isControlled && value !== '' || defaultValue !== '';
   var inputRef = react.useRef(null);
 
-  var _useState = react.useState({
-    isActive: isActive,
-    isFocused: false
-  }),
+  var _useState = react.useState(Boolean(rest.defaultValue)),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+      showClear = _useState2[0],
+      setShowClear = _useState2[1];
 
   react.useEffect(function () {
-    setState(function (prevState) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
-        isActive: isActive
-      });
-    });
-  }, [value, defaultValue, isActive]);
-
-  var handleOnClick = function handleOnClick() {
-    var inputEl = inputRef.current;
-    inputEl.focus();
-  };
-
-  var handleFocus = function handleFocus() {
-    return setState(function (prevState) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
-        isFocused: true
-      });
-    });
-  };
-
-  var handleBlur = function handleBlur() {
-    return setState(function (prevState) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
-        isFocused: false
-      });
-    });
-  };
-
-  var handleOnChange = function handleOnChange(event) {
-    setIsActive(event.target.value);
-  };
+    if (rest.value) {
+      setShowClear(Boolean(rest.value));
+    }
+  }, [rest.value]);
 
-  var handleOnDelete = function handleOnDelete() {
+  var clearInputValue = function clearInputValue() {
     var input = inputRef.current;
     var clearedValue = '';
     edsUtils.setReactInputValue(input, clearedValue);
-    setState(function (prevState) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
-        isActive: false
-      });
-    });
-  };
-
-  var setIsActive = function setIsActive(newValue) {
-    return setState(function (prevState) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, prevState), {}, {
-        isActive: newValue !== ''
-      });
-    });
   };
-  /** Applying props for controlled vs. uncontrolled scnarios */
-
-
-  var applyControllingProps = function applyControllingProps(props, value, defaultValue) {
-    if (isControlled) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
-        value: value
-      });
-    }
 
-    return _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
-      defaultValue: defaultValue
-    });
+  var handleOnChange = function handleOnChange(e) {
+    setShowClear(Boolean(e.currentTarget.value));
   };
 
-  var isFocused = state.isFocused;
-  var size = 24;
-  var containerProps = {
-    isFocused: isFocused,
-    className: className,
-    style: style,
-    disabled: disabled,
-    role: 'search',
-    'aria-label': rest['aria-label'],
-    onClick: handleOnClick
-  };
   var combinedRef = react.useMemo(function () {
     return edsUtils.mergeRefs(inputRef, ref);
   }, [inputRef, ref]);
-  var inputProps = applyControllingProps(_objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
-    disabled: disabled,
-    ref: combinedRef,
-    type: 'search',
-    role: 'searchbox',
-    'aria-label': 'search input',
-    onBlur: function onBlur(e) {
-      handleBlur();
-
-      if (_onBlur) {
-        _onBlur(e);
-      }
-    },
-    onFocus: function onFocus(e) {
-      handleFocus();
-
-      if (_onFocus) {
-        _onFocus(e);
-      }
-    },
-    onChange: function onChange(e) {
-      handleOnChange(e);
-
-      if (_onChange) {
-        _onChange(e);
-      }
-    }
-  }), value, defaultValue);
-  var clearButtonProps = {
-    isActive: state.isActive,
-    onClick: function onClick(e) {
-      e.stopPropagation();
+  return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
+    role: "search",
+    style: style,
+    className: className,
+    children: /*#__PURE__*/jsxRuntime.jsx(SearchInput, _objectSpread__default["default"]({
+      onChange: function onChange(e) {
+        handleOnChange(e);
 
-      if (state.isActive) {
-        handleOnDelete();
-      }
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$3, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        if (_onChange) {
+          _onChange(e);
+        }
+      },
+      ref: combinedRef,
+      leftAdornmentsWidth: 24 + 8,
+      leftAdornments: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
         data: edsIcons.search,
         "aria-hidden": true,
-        size: size
-      }), /*#__PURE__*/jsxRuntime.jsx(SearchInput, _objectSpread__default["default"]({}, inputProps)), /*#__PURE__*/jsxRuntime.jsx(InsideButton, _objectSpread__default["default"](_objectSpread__default["default"]({}, clearButtonProps), {}, {
-        "aria-label": 'clear search',
-        title: "clear",
-        variant: "ghost_icon",
-        children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
-          data: edsIcons.close,
-          size: 16
+        size: 18
+      }),
+      rightAdornmentsWidth: 24 + 8,
+      rightAdornments: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: showClear && /*#__PURE__*/jsxRuntime.jsx(InsideButton, {
+          "aria-label": 'clear search',
+          title: "clear",
+          variant: "ghost_icon",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            clearInputValue();
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: edsIcons.close,
+            size: 16
+          })
         })
-      }))]
-    }))
+      })
+    }, rest))
   });
-}); // Search.displayName = 'eds-search'
+});
 
-var _tokens$colors$8 = edsTokens.tokens.colors,
-    _tokens$colors$ui = _tokens$colors$8.ui,
+var _tokens$colors$9 = edsTokens.tokens.colors,
+    _tokens$colors$ui = _tokens$colors$9.ui,
     backgroundColor$1 = _tokens$colors$ui.background__light.rgba,
     backgroundColorDefault = _tokens$colors$ui.background__default.rgba,
     backgroundColorMedium$1 = _tokens$colors$ui.background__medium.rgba,
-    _tokens$colors$intera$6 = _tokens$colors$8.interactive,
+    _tokens$colors$intera$6 = _tokens$colors$9.interactive,
     indicatorColor = _tokens$colors$intera$6.primary__resting.rgba,
     primaryHoverAlt$3 = _tokens$colors$intera$6.primary__hover_alt.rgba,
     primaryHover$1 = _tokens$colors$intera$6.primary__hover.rgba,
-    focusOutlineColor$3 = _tokens$colors$intera$6.focus.rgba,
+    focusOutlineColor$4 = _tokens$colors$intera$6.focus.rgba,
     backgroundColorDisabled = _tokens$colors$intera$6.disabled__fill.rgba,
     backgroundBorderDisabled = _tokens$colors$intera$6.disabled__border.rgba,
-    textColor$1 = _tokens$colors$8.text.static_icons__tertiary.rgba,
+    textColor$1 = _tokens$colors$9.text.static_icons__tertiary.rgba,
     paragraph = edsTokens.tokens.typography.paragraph,
-    focusOutlineWidth$3 = edsTokens.tokens.interactions.focused.width;
+    focusOutlineWidth$4 = edsTokens.tokens.interactions.focused.width;
 var slider = {
   background: backgroundColorDefault,
   entities: {
@@ -5193,8 +4866,8 @@ var slider = {
         focus: {
           outline: {
             type: 'outline',
-            color: focusOutlineColor$3,
-            width: focusOutlineWidth$3,
+            color: focusOutlineColor$4,
+            width: focusOutlineWidth$4,
             style: 'dashed',
             offset: '3px'
           }
@@ -5628,9 +5301,9 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   });
 });
 
-var _tokens$colors$7 = edsTokens.tokens.colors,
-    white = _tokens$colors$7.text.static_icons__primary_white.rgba,
-    background$3 = _tokens$colors$7.ui.background__overlay.rgba,
+var _tokens$colors$8 = edsTokens.tokens.colors,
+    white = _tokens$colors$8.text.static_icons__primary_white.rgba,
+    background$3 = _tokens$colors$8.ui.background__overlay.rgba,
     ui = edsTokens.tokens.typography.ui,
     _tokens$spacings$comf$8 = edsTokens.tokens.spacings.comfortable,
     spacingXlarge = _tokens$spacings$comf$8.x_large,
@@ -5740,43 +5413,44 @@ var Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
       getReferenceProps = _useInteractions.getReferenceProps,
       getFloatingProps = _useInteractions.getFloatingProps;
 
-  var staticSide = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right'
-  }[finalPlacement.split('-')[0]];
-  var arrowTransform = 'none';
-
-  switch (staticSide) {
-    case 'right':
-      arrowTransform = 'rotateY(180deg)';
-      break;
-
-    case 'left':
-      arrowTransform = 'none';
-      break;
-
-    case 'top':
-      arrowTransform = 'rotate(90deg)';
-      break;
-
-    case 'bottom':
-      arrowTransform = 'rotate(-90deg)';
-      break;
-  }
-
-  if (arrowRef.current) {
-    var _Object$assign;
-
-    Object.assign(arrowRef.current.style, (_Object$assign = {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
-      right: '',
-      bottom: ''
-    }, _defineProperty__default["default"](_Object$assign, staticSide, '-6px'), _defineProperty__default["default"](_Object$assign, "transform", arrowTransform), _Object$assign));
-  }
-
+  react.useEffect(function () {
+    var staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right'
+    }[finalPlacement.split('-')[0]];
+    var arrowTransform = 'none';
+
+    switch (staticSide) {
+      case 'right':
+        arrowTransform = 'rotateY(180deg)';
+        break;
+
+      case 'left':
+        arrowTransform = 'none';
+        break;
+
+      case 'top':
+        arrowTransform = 'rotate(90deg)';
+        break;
+
+      case 'bottom':
+        arrowTransform = 'rotate(-90deg)';
+        break;
+    }
+
+    if (arrowRef.current) {
+      var _Object$assign;
+
+      Object.assign(arrowRef.current.style, (_Object$assign = {
+        left: arrowX != null ? "".concat(arrowX, "px") : '',
+        top: arrowY != null ? "".concat(arrowY, "px") : '',
+        right: '',
+        bottom: ''
+      }, _defineProperty__default["default"](_Object$assign, staticSide, '-6px'), _defineProperty__default["default"](_Object$assign, "transform", arrowTransform), _Object$assign));
+    }
+  });
   var updatedChildren = /*#__PURE__*/react.cloneElement(children, _objectSpread__default["default"]({}, getReferenceProps(_objectSpread__default["default"]({
     ref: anchorRef
   }, children.props))));
@@ -5827,10 +5501,10 @@ var SnackbarAction = /*#__PURE__*/react.forwardRef(function SnackbarAction(_ref2
 });
 
 var typography$7 = edsTokens.tokens.typography.ui.snackbar,
-    _tokens$colors$6 = edsTokens.tokens.colors,
-    background$2 = _tokens$colors$6.ui.background__overlay.rgba,
-    color = _tokens$colors$6.text.static_icons__primary_white.rgba,
-    buttonColor = _tokens$colors$6.interactive.link_in_snackbars.rgba,
+    _tokens$colors$7 = edsTokens.tokens.colors,
+    background$2 = _tokens$colors$7.ui.background__overlay.rgba,
+    color = _tokens$colors$7.text.static_icons__primary_white.rgba,
+    buttonColor = _tokens$colors$7.interactive.link_in_snackbars.rgba,
     _tokens$spacings$comf$7 = edsTokens.tokens.spacings.comfortable,
     spacingMedium$4 = _tokens$spacings$comf$7.medium,
     spacingXLarge = _tokens$spacings$comf$7.x_large,
@@ -5944,11 +5618,14 @@ var Snackbar = Snackbar$1;
 Snackbar.Action = SnackbarAction;
 
 var header = edsTokens.tokens.typography.ui.accordion_header,
-    background$1 = edsTokens.tokens.colors.ui.background__default.rgba,
+    _tokens$colors$6 = edsTokens.tokens.colors,
+    background$1 = _tokens$colors$6.ui.background__default.rgba,
+    focusOutlineColor$3 = _tokens$colors$6.interactive.focus.rgba,
     _tokens$spacings$comf$6 = edsTokens.tokens.spacings.comfortable,
     spacingMedium$3 = _tokens$spacings$comf$6.medium,
     spacingSmall$3 = _tokens$spacings$comf$6.small,
-    borderRadius$3 = edsTokens.tokens.shape.corners.borderRadius;
+    borderRadius$3 = edsTokens.tokens.shape.corners.borderRadius,
+    focusOutlineWidth$3 = edsTokens.tokens.interactions.focused.width;
 var popover = {
   background: background$1,
   typography: header,
@@ -5970,6 +5647,18 @@ var popover = {
       spacings: {
         top: '12px'
       }
+    },
+    paper: {
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            width: focusOutlineWidth$3,
+            style: 'dashed',
+            color: focusOutlineColor$3
+          }
+        }
+      }
     }
   },
   spacings: {
@@ -5987,16 +5676,14 @@ var popover = {
   }
 };
 
-var _excluded$u = ["children", "placement", "anchorEl", "style", "open", "onClose"];
+var _excluded$u = ["children", "placement", "anchorEl", "style", "open", "onClose", "withinPortal", "trapFocus"];
 var PopoverPaper = styled__default["default"](Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
 })(function (_ref) {
-  var theme = _ref.theme,
-      open = _ref.open;
-  return styled.css(["", " ", " background:", ";", " z-index:1400;"], {
-    display: open ? 'block' : 'none'
-  }, edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border));
+  var theme = _ref.theme;
+  var paper = theme.entities.paper;
+  return styled.css(["", " background:", ";", " z-index:1400;&:focus-visible{", "}"], edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border), edsUtils.outlineTemplate(paper.states.focus.outline));
 });
 var ArrowWrapper = styled__default["default"].div.withConfig({
   displayName: "Popover__ArrowWrapper",
@@ -6027,6 +5714,8 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
       style = _ref5.style,
       open = _ref5.open,
       onClose = _ref5.onClose,
+      withinPortal = _ref5.withinPortal,
+      trapFocus = _ref5.trapFocus,
       rest = _objectWithoutProperties__default["default"](_ref5, _excluded$u);
 
   var arrowRef = react.useRef(null);
@@ -6039,14 +5728,13 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
       padding: 8
     }), reactDomInteractions.arrow({
       element: arrowRef
-    })]
+    })],
+    whileElementsMounted: reactDomInteractions.autoUpdate
   }),
       x = _useFloating.x,
       y = _useFloating.y,
       reference = _useFloating.reference,
       floating = _useFloating.floating,
-      refs = _useFloating.refs,
-      update = _useFloating.update,
       strategy = _useFloating.strategy,
       context = _useFloating.context,
       _useFloating$middlewa = _useFloating.middlewareData.arrow;
@@ -6061,51 +5749,49 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   var popoverRef = react.useMemo(function () {
     return edsUtils.mergeRefs(floating, ref);
   }, [floating, ref]);
-  react.useEffect(function () {
-    if (refs.reference.current && refs.floating.current && open) {
-      return reactDomInteractions.autoUpdate(refs.reference.current, refs.floating.current, update);
-    }
-  }, [refs.reference, refs.floating, update, open]);
 
   var _useInteractions = reactDomInteractions.useInteractions([reactDomInteractions.useDismiss(context)]),
       getFloatingProps = _useInteractions.getFloatingProps;
 
-  var staticSide = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right'
-  }[finalPlacement.split('-')[0]];
-  var arrowTransform = 'none';
-
-  switch (staticSide) {
-    case 'right':
-      arrowTransform = 'rotateY(180deg)';
-      break;
-
-    case 'left':
-      arrowTransform = 'none';
-      break;
-
-    case 'top':
-      arrowTransform = 'rotate(90deg)';
-      break;
-
-    case 'bottom':
-      arrowTransform = 'rotate(-90deg)';
-      break;
-  }
+  react.useEffect(function () {
+    if (arrowRef.current) {
+      var _Object$assign;
+
+      var staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[finalPlacement.split('-')[0]];
+      var arrowTransform = 'none';
+
+      switch (staticSide) {
+        case 'right':
+          arrowTransform = 'rotateY(180deg)';
+          break;
+
+        case 'left':
+          arrowTransform = 'none';
+          break;
 
-  if (arrowRef.current) {
-    var _Object$assign;
+        case 'top':
+          arrowTransform = 'rotate(90deg)';
+          break;
 
-    Object.assign(arrowRef.current.style, (_Object$assign = {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
-      right: '',
-      bottom: ''
-    }, _defineProperty__default["default"](_Object$assign, staticSide, '-6px'), _defineProperty__default["default"](_Object$assign, "transform", arrowTransform), _Object$assign));
-  }
+        case 'bottom':
+          arrowTransform = 'rotate(-90deg)';
+          break;
+      }
+
+      Object.assign(arrowRef.current.style, (_Object$assign = {
+        left: arrowX != null ? "".concat(arrowX, "px") : '',
+        top: arrowY != null ? "".concat(arrowY, "px") : '',
+        right: '',
+        bottom: ''
+      }, _defineProperty__default["default"](_Object$assign, staticSide, '-6px'), _defineProperty__default["default"](_Object$assign, "transform", arrowTransform), _Object$assign));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [arrowRef.current, arrowX, arrowY, finalPlacement]);
 
   var props = _objectSpread__default["default"]({
     open: open
@@ -6117,7 +5803,8 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   var token = edsUtils.useToken({
     density: density
   }, popover);
-  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+
+  var popover$1 = /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({
       elevation: "overlay"
@@ -6143,6 +5830,23 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
       })]
     }))
   });
+
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: withinPortal ? /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+      id: "eds-popover-container",
+      children: open && trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingFocusManager, {
+        context: context,
+        modal: true,
+        children: popover$1
+      }) : open && popover$1
+    }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingFocusManager, {
+        context: context,
+        modal: true,
+        children: popover$1
+      }) : open && popover$1
+    })
+  });
 });
 
 var _excluded$t = ["children"];
@@ -7920,7 +7624,7 @@ var NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2, re
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
-      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, _objectSpread__default["default"]({}, labelProps)), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, _objectSpread__default["default"](_objectSpread__default["default"]({}, selectProps), {}, {
+      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"]({}, labelProps)), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, _objectSpread__default["default"](_objectSpread__default["default"]({}, selectProps), {}, {
         children: children
       }))]
     }))
@@ -8140,7 +7844,7 @@ var SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2, re
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
       className: className,
       ref: ref,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
         label: label,
         meta: meta,
         disabled: disabled
@@ -8528,7 +8232,7 @@ var MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, ref)
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
       className: className,
       ref: ref,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
         label: label,
         meta: meta,
         disabled: disabled
@@ -9210,6 +8914,7 @@ var selectTokens = {
   entities: {
     button: {
       height: '24px',
+      width: '24px',
       spacings: {
         left: spacingSmall,
         right: spacingSmall,
@@ -9303,33 +9008,26 @@ var Container = styled__default["default"].div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
-var StyledInput = styled__default["default"](Input$4).withConfig({
-  displayName: "Autocomplete__StyledInput",
-  componentId: "sc-yvif0e-1"
-})(function (_ref) {
-  var button = _ref.theme.entities.button;
-  return styled.css(["padding-right:calc( ", " + ", " + (", " * 2) );"], button.spacings.left, button.spacings.right, button.height);
-});
 var StyledList = styled__default["default"](List$1).withConfig({
   displayName: "Autocomplete__StyledList",
-  componentId: "sc-yvif0e-2"
-})(function (_ref2) {
-  var theme = _ref2.theme;
+  componentId: "sc-yvif0e-1"
+})(function (_ref) {
+  var theme = _ref.theme;
   return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
 });
 var StyledButton = styled__default["default"](Button).withConfig({
   displayName: "Autocomplete__StyledButton",
-  componentId: "sc-yvif0e-3"
-})(function (_ref3) {
-  var button = _ref3.theme.entities.button;
-  return styled.css(["position:absolute;height:", ";width:", ";right:", ";top:", ";"], button.height, button.height, button.spacings.right, button.spacings.top);
+  componentId: "sc-yvif0e-2"
+})(function (_ref2) {
+  var button = _ref2.theme.entities.button;
+  return styled.css(["height:", ";width:", ";"], button.height, button.height);
 });
 
-var findIndex = function findIndex(_ref4) {
-  var calc = _ref4.calc,
-      index = _ref4.index,
-      optionDisabled = _ref4.optionDisabled,
-      availableItems = _ref4.availableItems;
+var findIndex = function findIndex(_ref3) {
+  var calc = _ref3.calc,
+      index = _ref3.index,
+      optionDisabled = _ref3.optionDisabled,
+      availableItems = _ref3.availableItems;
   var nextItem = availableItems[index];
 
   if (optionDisabled(nextItem)) {
@@ -9345,10 +9043,10 @@ var findIndex = function findIndex(_ref4) {
   return index;
 };
 
-var findNextIndex = function findNextIndex(_ref5) {
-  var index = _ref5.index,
-      optionDisabled = _ref5.optionDisabled,
-      availableItems = _ref5.availableItems;
+var findNextIndex = function findNextIndex(_ref4) {
+  var index = _ref4.index,
+      optionDisabled = _ref4.optionDisabled,
+      availableItems = _ref4.availableItems;
   var options = {
     index: index,
     optionDisabled: optionDisabled,
@@ -9369,10 +9067,10 @@ var findNextIndex = function findNextIndex(_ref5) {
   return nextIndex;
 };
 
-var findPrevIndex = function findPrevIndex(_ref6) {
-  var index = _ref6.index,
-      optionDisabled = _ref6.optionDisabled,
-      availableItems = _ref6.availableItems;
+var findPrevIndex = function findPrevIndex(_ref5) {
+  var index = _ref5.index,
+      optionDisabled = _ref5.optionDisabled,
+      availableItems = _ref5.availableItems;
   var options = {
     index: index,
     optionDisabled: optionDisabled,
@@ -9522,8 +9220,8 @@ function AutocompleteInner(props, ref) {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
     itemToString: getLabel,
-    onInputValueChange: function onInputValueChange(_ref7) {
-      var inputValue = _ref7.inputValue;
+    onInputValueChange: function onInputValueChange(_ref6) {
+      var inputValue = _ref6.inputValue;
       setAvailableItems(options.filter(function (item) {
         if (optionsFilter) {
           return optionsFilter(item, inputValue);
@@ -9532,16 +9230,16 @@ function AutocompleteInner(props, ref) {
         return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
       }));
     },
-    onIsOpenChange: function onIsOpenChange(_ref8) {
-      var selectedItem = _ref8.selectedItem;
+    onIsOpenChange: function onIsOpenChange(_ref7) {
+      var selectedItem = _ref7.selectedItem;
 
       if (!multiple && selectedItem !== null) {
         setAvailableItems(options);
       }
     },
-    onStateChange: function onStateChange(_ref9) {
-      var type = _ref9.type,
-          selectedItem = _ref9.selectedItem;
+    onStateChange: function onStateChange(_ref8) {
+      var type = _ref8.type,
+          selectedItem = _ref8.selectedItem;
 
       switch (type) {
         case downshift.useCombobox.stateChangeTypes.InputChange:
@@ -9697,10 +9395,10 @@ function AutocompleteInner(props, ref) {
     middleware: [reactDomInteractions.offset(4), reactDomInteractions.flip(), reactDomInteractions.shift({
       padding: 8
     }), reactDomInteractions.size({
-      apply: function apply(_ref10) {
-        var rects = _ref10.rects,
-            availableHeight = _ref10.availableHeight,
-            elements = _ref10.elements;
+      apply: function apply(_ref9) {
+        var rects = _ref9.rects,
+            availableHeight = _ref9.availableHeight,
+            elements = _ref9.elements;
         var anchorWidth = "".concat(rects.reference.width, "px");
         Object.assign(elements.floating.style, {
           width: "".concat(autoWidth ? anchorWidth : 'auto'),
@@ -9747,7 +9445,7 @@ function AutocompleteInner(props, ref) {
       position: strategy,
       top: y || 0,
       left: x || 0,
-      zIndex: 1400
+      zIndex: 1500
     }
   })), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledList, _objectSpread__default["default"](_objectSpread__default["default"]({}, getMenuProps({
@@ -9780,12 +9478,12 @@ function AutocompleteInner(props, ref) {
       className: className,
       style: style,
       ref: ref,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
         label: label,
         meta: meta,
         disabled: disabled
-      })), /*#__PURE__*/jsxRuntime.jsxs(Container, _objectSpread__default["default"](_objectSpread__default["default"]({}, getComboboxProps()), {}, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(StyledInput, _objectSpread__default["default"](_objectSpread__default["default"]({}, getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      })), /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread__default["default"](_objectSpread__default["default"]({}, getComboboxProps()), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         getDropdownProps({
           preventKeyAction: multiple ? isOpen : undefined,
           disabled: disabled,
@@ -9799,31 +9497,32 @@ function AutocompleteInner(props, ref) {
           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, _objectSpread__default["default"](_objectSpread__default["default"]({
-          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
+          onClick: openSelect,
+          rightAdornmentsWidth: 24 * 2 + 8 + 8,
+          rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+              variant: "ghost_icon",
+              disabled: disabled || readOnly,
+              "aria-label": 'clear options',
+              title: "clear",
+              onClick: clear,
+              children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+                data: edsIcons.close,
+                size: 16
+              })
+            }), !readOnly && /*#__PURE__*/jsxRuntime.jsx(StyledButton, _objectSpread__default["default"](_objectSpread__default["default"]({
+              variant: "ghost_icon"
+            }, getToggleButtonProps({
+              disabled: disabled || readOnly
+            })), {}, {
+              "aria-label": 'toggle options',
+              title: "open",
+              children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+                data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
+              })
+            }))]
           })
-        }))]
+        }, other))
       })), disablePortal ? optionsList : /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList
@@ -9850,7 +9549,8 @@ exports.DotProgress = DotProgress;
 exports.EdsProvider = EdsProvider;
 exports.Icon = Icon$1;
 exports.Input = Input$4;
-exports.Label = Label$1;
+exports.InputWrapper = InputWrapper$2;
+exports.Label = Label$2;
 exports.LinearProgress = LinearProgress;
 exports.List = List$1;
 exports.Menu = Menu;