@equinor/eds-core-react 0.33.0 → 0.34.0

package/dist/eds-core-react.cjs

@@ -298,6 +298,7 @@ _curry3(function mergeWithKey(fn, l, r) {
   }
   return result;
 });
+var mergeWithKey$1 = mergeWithKey;
 
 /**
  * Creates a new object with the own properties of the two provided objects.
@@ -330,7 +331,7 @@ _curry3(function mergeWithKey(fn, l, r) {
 
 var mergeDeepWithKey = /*#__PURE__*/
 _curry3(function mergeDeepWithKey(fn, lObj, rObj) {
-  return mergeWithKey(function (k, lVal, rVal) {
+  return mergeWithKey$1(function (k, lVal, rVal) {
     if (_isObject(lVal) && _isObject(rVal)) {
       return mergeDeepWithKey(fn, lVal, rVal);
     } else {
@@ -338,6 +339,7 @@ _curry3(function mergeDeepWithKey(fn, lObj, rObj) {
     }
   }, lObj, rObj);
 });
+var mergeDeepWithKey$1 = mergeDeepWithKey;
 
 /**
  * Creates a new object with the own properties of the first object merged with
@@ -363,7 +365,7 @@ _curry3(function mergeDeepWithKey(fn, lObj, rObj) {
 
 var mergeDeepRight = /*#__PURE__*/
 _curry2(function mergeDeepRight(lObj, rObj) {
-  return mergeDeepWithKey(function (k, lVal, rVal) {
+  return mergeDeepWithKey$1(function (k, lVal, rVal) {
     return rVal;
   }, lObj, rObj);
 });
@@ -395,7 +397,7 @@ var mergeDeepRight$1 = mergeDeepRight;
 
 var mergeWith = /*#__PURE__*/
 _curry3(function mergeWith(fn, l, r) {
-  return mergeWithKey(function (_, _l, _r) {
+  return mergeWithKey$1(function (_, _l, _r) {
     return fn(_l, _r);
   }, l, r);
 });
@@ -856,7 +858,7 @@ var useEds = function useEds() {
   return react.useContext(EdsContext);
 };
 
-var _excluded$1t = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
+var _excluded$1u = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
 var getVariant = function getVariant(tokenSet, variant) {
   switch (variant) {
     case 'ghost':
@@ -898,7 +900,7 @@ var ButtonBase = styled__default.default.button.withConfig({
   var focus = states.focus,
     hover = states.hover,
     disabled = states.disabled;
-  return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
+  return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 || (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 || (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
 });
 var Button$2 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
   var _ref2$color = _ref2.color,
@@ -913,7 +915,7 @@ var Button$2 = /*#__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$1t);
+    other = _objectWithoutProperties__default.default(_ref2, _excluded$1u);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -950,7 +952,7 @@ var group = {
   }
 };
 
-var _excluded$1s = ["children", "vertical"];
+var _excluded$1t = ["children", "vertical"];
 var border$5 = group.border;
 var radius$1 = border$5.radius;
 var ButtonGroupBase = styled__default.default.div.withConfig({
@@ -963,7 +965,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$1s);
+    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1t);
   var props = _objectSpread__default.default({
     ref: ref,
     $vertical: vertical
@@ -1015,7 +1017,7 @@ var tooltip = {
   }
 };
 
-var _excluded$1r = ["title", "placement", "children", "style", "enterDelay"];
+var _excluded$1s = ["title", "placement", "children", "style", "enterDelay"];
 var StyledTooltip = styled__default.default.div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
@@ -1024,7 +1026,7 @@ var ArrowWrapper$1 = styled__default.default.div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
 })(["position:absolute;width:", ";height:", ";z-index:-1;"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
-var TooltipArrow = styled__default.default.svg.withConfig({
+var TooltipArrow$1 = styled__default.default.svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
 })(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
@@ -1036,7 +1038,7 @@ var Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
     style = _ref.style,
     _ref$enterDelay = _ref.enterDelay,
     enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-    rest = _objectWithoutProperties__default.default(_ref, _excluded$1r);
+    rest = _objectWithoutProperties__default.default(_ref, _excluded$1s);
   var arrowRef = react.useRef(null);
   var _useState = react.useState(false),
     _useState2 = _slicedToArray__default.default(_useState, 2),
@@ -1127,7 +1129,7 @@ var Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   })), {}, {
     children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
       ref: arrowRef,
-      children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
+      children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow$1, {
         className: "arrowSvg",
         children: /*#__PURE__*/jsxRuntime.jsx("path", {
           d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
@@ -1145,13 +1147,13 @@ var Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   });
 });
 
-var _excluded$1q = ["children", "multiple", "selectedIndexes", "onChange"];
+var _excluded$1r = ["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$1q);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1r);
   var _useState = react.useState(selectedIndexes || []),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     pickedIndexes = _useState2[0],
@@ -1169,7 +1171,7 @@ var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref
         variant: isSelected ? 'contained' : 'outlined',
         onClick: function onClick(e) {
           var _childElement$props, _childElement$props$o;
-          (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
+          (_childElement$props = childElement.props) === null || _childElement$props === void 0 || (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props, e);
           var updatedSelection = [index];
           if (multiple) {
             updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(function (i) {
@@ -1246,7 +1248,7 @@ var link = {
   }
 };
 
-var _excluded$1p = ["variant", "children", "bold", "italic", "link", "lines", "color", "group", "token", "as"];
+var _excluded$1q = ["variant", "children", "bold", "italic", "link", "lines", "color", "group", "token", "as"];
 var getElementType = function getElementType(variant, link) {
   if (link) {
     return 'a';
@@ -1323,7 +1325,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$1p);
+    other = _objectWithoutProperties__default.default(_ref5, _excluded$1q);
   var as = providedAs ? providedAs : getElementType(variant, link);
   var variantName = toVariantName(variant, bold, italic, link);
   var typography = findTypography(variantName, group);
@@ -1464,14 +1466,14 @@ var applyVariant = function applyVariant(variant, token) {
   }
 };
 
-var _excluded$1o = ["children"];
+var _excluded$1p = ["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$1o);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1p);
   return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
     ref: ref,
     children: children
@@ -1485,14 +1487,14 @@ var initalState$2 = {
 };
 var InnerContext = /*#__PURE__*/react.createContext(initalState$2);
 
-var _excluded$1n = ["children"];
+var _excluded$1o = ["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$1n);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1o);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'body'
@@ -1504,7 +1506,7 @@ var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   });
 });
 
-var _excluded$1m = ["children", "variant"];
+var _excluded$1n = ["children", "variant"];
 var StyledTableCell$1 = styled__default.default.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
@@ -1525,7 +1527,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$1m);
+    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1n);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1630,7 +1632,7 @@ var token$4 = {
   }
 };
 
-var _excluded$1l = ["children", "sort", "sticky"];
+var _excluded$1m = ["children", "sort", "sticky"];
 var StyledTableCell = styled__default.default.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
@@ -1661,7 +1663,7 @@ var TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell(_re
   var children = _ref.children,
     sort = _ref.sort,
     sticky = _ref.sticky,
-    rest = _objectWithoutProperties__default.default(_ref, _excluded$1l);
+    rest = _objectWithoutProperties__default.default(_ref, _excluded$1m);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1721,7 +1723,7 @@ var token$3 = {
   }
 };
 
-var _excluded$1k = ["children", "sticky"];
+var _excluded$1l = ["children", "sticky"];
 var StyledTableHead = styled__default.default.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
@@ -1729,7 +1731,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$1k);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1l);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'head',
@@ -1756,6 +1758,7 @@ var token$2 = {
   }
 };
 
+var _excluded$1k = ["children", "active"];
 var _token$states$hover;
 var StyledRow = styled__default.default.tr.withConfig({
   displayName: "Row__StyledRow",
@@ -1766,9 +1769,9 @@ var StyledRow = styled__default.default.tr.withConfig({
   return $active ? (_token$states$active = token$2.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null;
 }, (_token$states$hover = token$2.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background);
 var Row = /*#__PURE__*/react.forwardRef(function Row(_ref2, ref) {
-  var props = _extends__default.default({}, (_objectDestructuringEmpty__default.default(_ref2), _ref2));
-  var children = props.children,
-    active = props.active;
+  var children = _ref2.children,
+    active = _ref2.active,
+    props = _objectWithoutProperties__default.default(_ref2, _excluded$1k);
   return /*#__PURE__*/jsxRuntime.jsx(StyledRow, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
     $active: active,
     ref: ref,
@@ -2163,7 +2166,7 @@ var Container$5 = styled__default.default.div.withConfig({
   displayName: "InputWrapper__Container",
   componentId: "sc-v6o9z1-0"
 })([""]);
-var HelperText = styled__default.default(TextfieldHelperText).withConfig({
+var HelperText$1 = styled__default.default(TextfieldHelperText).withConfig({
   displayName: "InputWrapper__HelperText",
   componentId: "sc-v6o9z1-1"
 })(["margin-top:8px;margin-left:8px;"]);
@@ -2203,7 +2206,7 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
       ref: ref,
       children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default.default({}, _objectSpread__default.default({
         label: label
-      }, labelProps))), children, hasHelperText && /*#__PURE__*/jsxRuntime.jsx(HelperText, _objectSpread__default.default({
+      }, labelProps))), children, hasHelperText && /*#__PURE__*/jsxRuntime.jsx(HelperText$1, _objectSpread__default.default({
         color: helperTextColor
       }, _objectSpread__default.default({
         icon: helperIcon
@@ -2401,13 +2404,13 @@ var Container$4 = styled__default.default.div.withConfig({
   displayName: "Input__Container",
   componentId: "sc-1ykv024-0"
 })(function (_ref) {
-  var _entities$adornment, _entities$adornment$s;
+  var _entities$adornment;
   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:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], 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({
+  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:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], 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 || (_entities$adornment = _entities$adornment.states.focus) === null || _entities$adornment === void 0 ? void 0 : _entities$adornment.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
   }));
@@ -4064,10 +4067,10 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref3, ref) {
   react.useEffect(function () {
     if (open) {
       var _localRef$current;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.showModal();
+      localRef === null || localRef === void 0 || (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _localRef$current.showModal();
     } else {
       var _localRef$current2;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.close();
+      localRef === null || localRef === void 0 || (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 || _localRef$current2.close();
     }
   }, [open]);
 
@@ -4653,12 +4656,13 @@ var StyledChips = styled__default.default.div.attrs(function (_ref) {
   var $clickable = _ref2.$clickable;
   return $clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states$2.hover.typography.color, states$2.hover.typography.color);
 }, function (_ref3) {
-  var $variant = _ref3.$variant;
+  var $variant = _ref3.$variant,
+    $clickable = _ref3.$clickable;
   switch ($variant) {
     case 'active':
       return styled.css(["background:", ";"], states$2.active.background);
     case 'error':
-      return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, edsUtils.bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
+      return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, edsUtils.bordersTemplate(error.border), $clickable && error.states.hover.typography.color, $clickable && error.states.hover.typography.color, $clickable && error.states.hover.typography.color);
     default:
       return '';
   }
@@ -4910,7 +4914,7 @@ var slider = {
       }
     },
     output: {
-      typography: _objectSpread__default.default(_objectSpread__default.default({}, paragraph.overline), {}, {
+      typography: _objectSpread__default.default(_objectSpread__default.default({}, paragraph.caption), {}, {
         color: textColor$1
       })
     },
@@ -4970,13 +4974,13 @@ var slider = {
   }
 };
 
-var _tokens$entities$3 = slider.entities,
-  track$3 = _tokens$entities$3.track,
-  output$1 = _tokens$entities$3.output;
+var _tokens$entities$2 = slider.entities,
+  track$2 = _tokens$entities$2.track,
+  output$1 = _tokens$entities$2.output;
 var StyledMinMax = styled__default.default.span.withConfig({
   displayName: "MinMax__StyledMinMax",
   componentId: "sc-lxmlid-0"
-})(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], edsUtils.typographyTemplate(output$1.typography), track$3.spacings.top);
+})(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], edsUtils.typographyTemplate(output$1.typography), track$2.spacings.top);
 var MinMax = /*#__PURE__*/react.forwardRef(function MinMax(_ref, ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsxRuntime.jsx(StyledMinMax, {
@@ -4985,24 +4989,30 @@ var MinMax = /*#__PURE__*/react.forwardRef(function MinMax(_ref, ref) {
   });
 });
 
-var _tokens$entities$2 = slider.entities,
-  track$2 = _tokens$entities$2.track,
-  output = _tokens$entities$2.output;
+var output = slider.entities.output;
 var StyledOutput = styled__default.default.output.withConfig({
   displayName: "Output__StyledOutput",
   componentId: "sc-1dy945x-0"
-})(["--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], edsUtils.typographyTemplate(output.typography), slider.background, track$2.spacings.top);
+})(["--realWidth:calc(100% - 12px);--background:rgb(0 0 0 / 0.8);width:fit-content;position:absolute;display:flex;align-items:center;border-radius:4px;z-index:1;", ";color:white;background:var(--background);padding:4px 8px;bottom:calc(100% + 8px);pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;opacity:var(--showTooltip);"], edsUtils.typographyTemplate(output.typography));
+var TooltipArrow = styled__default.default.svg.withConfig({
+  displayName: "Output__TooltipArrow",
+  componentId: "sc-1dy945x-1"
+})(["width:6px;height:8px;position:absolute;fill:var(--background);top:calc(100% - 1px);rotate:-90deg;translate:-50%;left:50%;"]);
 var Output = /*#__PURE__*/react.forwardRef(function Output(_ref, ref) {
   var children = _ref.children,
     value = _ref.value,
     htmlFor = _ref.htmlFor;
-  return /*#__PURE__*/jsxRuntime.jsx(StyledOutput, {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledOutput, {
     ref: ref,
     style: {
       '--val': value
     },
     htmlFor: htmlFor,
-    children: children
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+      })
+    })]
   });
 });
 
@@ -5054,7 +5064,7 @@ var SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput(_ref, ref)
 });
 SliderInput.displayName = 'SliderInput';
 
-var _excluded$C = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
+var _excluded$C = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "labelAlwaysOn", "step", "disabled", "hideActiveTrack", "ariaLabelledby", "aria-labelledby"];
 var _tokens$entities$1 = slider.entities,
   track = _tokens$entities$1.track,
   handle = _tokens$entities$1.handle,
@@ -5071,38 +5081,56 @@ var RangeWrapper = styled__default.default.div.attrs(function (_ref) {
     $valA = _ref.$valA,
     $valB = _ref.$valB,
     $disabled = _ref.$disabled,
+    $hideActiveTrack = _ref.$hideActiveTrack,
     style = _ref.style;
   return {
+    'data-disabled': $disabled ? true : null,
     style: _objectSpread__default.default({
       '--a': $valA,
       '--b': $valB,
       '--min': $min,
       '--max': $max,
-      '--background': $disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+      '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
+      '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background
     }, style)
   };
 }).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
-var Wrapper = styled__default.default.div.attrs(function (_ref2) {
-  var $min = _ref2.$min,
-    $max = _ref2.$max,
-    value = _ref2.value,
-    disabled = _ref2.disabled,
-    style = _ref2.style;
+})(["", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}&:where(:hover,:has(:focus-visible)){--showTooltip:1;}", ";"], function (_ref2) {
+  var $labelAlwaysOn = _ref2.$labelAlwaysOn;
+  return styled.css({
+    '--showTooltip': $labelAlwaysOn ? 1 : 0
+  });
+}, wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, function (_ref3) {
+  var $touchNavigation = _ref3.$touchNavigation;
+  return $touchNavigation && styled.css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]);
+});
+var Wrapper = styled__default.default.div.attrs(function (_ref4) {
+  var $min = _ref4.$min,
+    $max = _ref4.$max,
+    value = _ref4.value,
+    disabled = _ref4.disabled,
+    $hideActiveTrack = _ref4.$hideActiveTrack,
+    style = _ref4.style;
   return {
     style: _objectSpread__default.default({
       '--min': $min,
       '--max': $max,
       '--value': value,
-      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+      '--background': disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
+      '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background
     }, style)
   };
 }).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+})(["", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:var(--background-hover);}}}&:where(:hover,:has(:focus-visible)){--showTooltip:1;}"], function (_ref5) {
+  var $labelAlwaysOn = _ref5.$labelAlwaysOn;
+  return styled.css({
+    '--showTooltip': $labelAlwaysOn ? 1 : 0
+  });
+}, wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover);
 var WrapperGroupLabel = styled__default.default.div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
@@ -5115,28 +5143,31 @@ var SrOnlyLabel = styled__default.default.label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
-  var _ref3$min = _ref3.min,
-    min = _ref3$min === void 0 ? 0 : _ref3$min,
-    _ref3$max = _ref3.max,
-    max = _ref3$max === void 0 ? 100 : _ref3$max,
-    _ref3$value = _ref3.value,
-    value = _ref3$value === void 0 ? [40, 60] : _ref3$value,
-    outputFunction = _ref3.outputFunction,
-    onChange = _ref3.onChange,
-    onChangeCommitted = _ref3.onChangeCommitted,
-    _ref3$minMaxDots = _ref3.minMaxDots,
-    minMaxDots = _ref3$minMaxDots === void 0 ? true : _ref3$minMaxDots,
-    _ref3$minMaxValues = _ref3.minMaxValues,
-    minMaxValues = _ref3$minMaxValues === void 0 ? true : _ref3$minMaxValues,
-    _ref3$step = _ref3.step,
-    step = _ref3$step === void 0 ? 1 : _ref3$step,
-    disabled = _ref3.disabled,
-    ariaLabelledby = _ref3.ariaLabelledby,
-    ariaLabelledbyNative = _ref3['aria-labelledby'],
-    rest = _objectWithoutProperties__default.default(_ref3, _excluded$C);
-  var isRangeSlider = Array.isArray(value);
-  var parsedValue = isRangeSlider ? value : [value];
+var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref6, ref) {
+  var _ref6$min = _ref6.min,
+    min = _ref6$min === void 0 ? 0 : _ref6$min,
+    _ref6$max = _ref6.max,
+    max = _ref6$max === void 0 ? 100 : _ref6$max,
+    _ref6$value = _ref6.value,
+    value = _ref6$value === void 0 ? [40, 60] : _ref6$value,
+    outputFunction = _ref6.outputFunction,
+    onChange = _ref6.onChange,
+    onChangeCommitted = _ref6.onChangeCommitted,
+    _ref6$minMaxDots = _ref6.minMaxDots,
+    minMaxDots = _ref6$minMaxDots === void 0 ? true : _ref6$minMaxDots,
+    _ref6$minMaxValues = _ref6.minMaxValues,
+    minMaxValues = _ref6$minMaxValues === void 0 ? true : _ref6$minMaxValues,
+    labelAlwaysOn = _ref6.labelAlwaysOn,
+    _ref6$step = _ref6.step,
+    step = _ref6$step === void 0 ? 1 : _ref6$step,
+    disabled = _ref6.disabled,
+    hideActiveTrack = _ref6.hideActiveTrack,
+    ariaLabelledby = _ref6.ariaLabelledby,
+    ariaLabelledbyNative = _ref6['aria-labelledby'],
+    rest = _objectWithoutProperties__default.default(_ref6, _excluded$C);
+  var isNumber = !Array.isArray(value);
+  var isRangeSlider = !isNumber && value.length === 2;
+  var parsedValue = isNumber ? [value] : value;
   var _useState = react.useState(parsedValue),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     initalValue = _useState2[0],
@@ -5149,6 +5180,10 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
     _useState6 = _slicedToArray__default.default(_useState5, 2),
     mousePressed = _useState6[0],
     setMousePressed = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = _slicedToArray__default.default(_useState7, 2),
+    touchNavigation = _useState8[0],
+    setTouchNavigation = _useState8[1];
   react.useEffect(function () {
     if (isRangeSlider) {
       if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
@@ -5156,9 +5191,10 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
         setSliderValue(value);
       }
     } else {
-      if (value !== initalValue[0]) {
-        setInitalValue([value]);
-        setSliderValue([value]);
+      var numberValue = Number(value);
+      if (numberValue !== initalValue[0]) {
+        setInitalValue([numberValue]);
+        setSliderValue([numberValue]);
       }
     }
   }, [value, initalValue, isRangeSlider]);
@@ -5174,12 +5210,12 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
       if (valueArrIdx === 0 && _newValue[0] >= _newValue[1]) {
         var _maxRange$current;
         _newValue[0] = _newValue[1];
-        (_maxRange$current = maxRange.current) === null || _maxRange$current === void 0 ? void 0 : _maxRange$current.focus();
+        (_maxRange$current = maxRange.current) === null || _maxRange$current === void 0 || _maxRange$current.focus();
       }
       if (valueArrIdx === 1 && _newValue[1] <= _newValue[0]) {
         var _minRange$current;
         _newValue[1] = _newValue[0];
-        (_minRange$current = minRange.current) === null || _minRange$current === void 0 ? void 0 : _minRange$current.focus();
+        (_minRange$current = minRange.current) === null || _minRange$current === void 0 || _minRange$current.focus();
       }
       setSliderValue(_newValue);
       if (onChange) {
@@ -5212,8 +5248,16 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
     if (target.type === 'output' || mousePressed) {
       return;
     }
+    var clientX;
+    if (event.type === 'touchstart') {
+      clientX = event.targetTouches[0].clientX;
+      setTouchNavigation(true);
+    } else if (event.type === 'mousemove') {
+      clientX = event.clientX;
+      setTouchNavigation(false);
+    }
     var bounds = target.getBoundingClientRect();
-    var x = event.clientX - bounds.left;
+    var x = clientX - bounds.left;
     var inputWidth = minRange.current.offsetWidth;
     var minValue = parseFloat(minRange.current.value);
     var maxValue = parseFloat(maxRange.current.value);
@@ -5238,8 +5282,8 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
       maxRange.current.style.zIndex = '10';
     }
   };
-  var handleDragging = function handleDragging(e) {
-    if (e.type === 'mousedown') {
+  var handleDragging = function handleDragging(type) {
+    if (type === 'mousedown' || type === 'touchmove') {
       setMousePressed(true);
     } else {
       setMousePressed(false);
@@ -5269,9 +5313,23 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
       $max: max,
       $min: min,
       $disabled: disabled,
+      $hideActiveTrack: hideActiveTrack,
+      $labelAlwaysOn: labelAlwaysOn || touchNavigation,
+      $touchNavigation: touchNavigation,
       onMouseMove: findClosestRange,
-      onMouseDown: handleDragging,
-      onMouseUp: handleDragging,
+      onTouchStartCapture: findClosestRange,
+      onTouchEnd: function onTouchEnd(e) {
+        return handleDragging(e.type);
+      },
+      onTouchMove: function onTouchMove(e) {
+        return handleDragging(e.type);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return handleDragging(e.type);
+      },
+      onMouseUp: function onMouseUp(e) {
+        return handleDragging(e.type);
+      },
       children: [minMaxDots && /*#__PURE__*/jsxRuntime.jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsxRuntime.jsx(SrOnlyLabel, {
         htmlFor: inputIdA,
         children: "Value A"
@@ -5341,6 +5399,14 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
       $min: min,
       value: sliderValue[0],
       disabled: disabled,
+      $hideActiveTrack: hideActiveTrack,
+      $labelAlwaysOn: labelAlwaysOn || touchNavigation,
+      onTouchStartCapture: function onTouchStartCapture() {
+        return setTouchNavigation(true);
+      },
+      onMouseDownCapture: function onMouseDownCapture() {
+        return setTouchNavigation(false);
+      },
       children: [/*#__PURE__*/jsxRuntime.jsx(SliderInput, {
         type: "range",
         value: sliderValue[0],
@@ -6407,7 +6473,7 @@ var breadcrumbs = {
   }
 };
 
-var _excluded$m = ["children", "collapse", "wrap"];
+var _excluded$m = ["children", "collapse", "wrap", "separator"];
 var spacings = breadcrumbs.spacings,
   typography$5 = breadcrumbs.typography,
   states$1 = breadcrumbs.states;
@@ -6425,7 +6491,7 @@ var ListItem$1 = styled__default.default.li.withConfig({
 var Separator = styled__default.default(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
-})(["color:", ";", " display:block;line-height:1;"], typography$5.color, edsUtils.spacingsTemplate(spacings));
+})(["color:", ";", " display:block;line-height:1;display:flex;& > svg{margin-inline:-9px;}"], typography$5.color, edsUtils.spacingsTemplate(spacings));
 var Collapsed = styled__default.default(Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
@@ -6435,6 +6501,8 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref2, re
     collapse = _ref2.collapse,
     _ref2$wrap = _ref2.wrap,
     wrap = _ref2$wrap === void 0 ? true : _ref2$wrap,
+    _ref2$separator = _ref2.separator,
+    separator = _ref2$separator === void 0 ? '/' : _ref2$separator,
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$m);
   var props = _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
     ref: ref
@@ -6473,7 +6541,7 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref2, re
         "aria-hidden": true,
         children: /*#__PURE__*/jsxRuntime.jsx(Separator, {
           variant: "body_short",
-          children: "/"
+          children: separator
         })
       })]
     }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
@@ -6489,7 +6557,7 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref2, re
           "aria-hidden": true,
           children: /*#__PURE__*/jsxRuntime.jsx(Separator, {
             variant: "body_short",
-            children: "/"
+            children: separator
           })
         })]
       }, "breadcrumb-".concat(index))
@@ -7261,7 +7329,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
   edsUtils.useIsomorphicLayoutEffect(function () {
     if (isMounted) {
       setActivePage(1);
-      onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
+      onChange === null || onChange === void 0 || onChange(null, 1);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemsPerPage]);
@@ -7289,10 +7357,9 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
           })
         })
       }, "previous"), items.length > 0 ? items.map(function (page, index) {
-        return page !== 'ELLIPSIS' ?
-        /*#__PURE__*/
+        return page !== 'ELLIPSIS' ? /*#__PURE__*/jsxRuntime.jsx(ListItem
         // eslint-disable-next-line react/no-array-index-key
-        jsxRuntime.jsx(ListItem, {
+        , {
           children: /*#__PURE__*/jsxRuntime.jsx(PaginationItem, {
             "aria-label": getAriaLabel(page, activePage),
             "aria-current": activePage,
@@ -8247,6 +8314,23 @@ var selectTokens = {
       }
     }
   },
+  variants: {
+    error: {
+      typography: {
+        color: colors.interactive.danger__text.rgba
+      }
+    },
+    warning: {
+      typography: {
+        color: colors.interactive.warning__text.rgba
+      }
+    },
+    success: {
+      typography: {
+        color: colors.interactive.success__text.rgba
+      }
+    }
+  },
   entities: {
     button: {
       height: '24px',
@@ -8373,7 +8457,7 @@ function AutocompleteOptionInner(props, ref) {
 }
 var AutocompleteOption = /*#__PURE__*/react.forwardRef(AutocompleteOptionInner);
 
-var _excluded$7 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "loading", "hideClearButton", "onOptionsChange", "onInputChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline", "dropdownHeight", "optionComponent"];
+var _excluded$7 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "loading", "hideClearButton", "onOptionsChange", "onInputChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline", "dropdownHeight", "optionComponent", "helperText", "helperIcon", "variant"];
 var Container$2 = styled__default.default.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -8385,9 +8469,13 @@ var StyledList = styled__default.default(List$1).withConfig({
   var theme = _ref.theme;
   return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
 });
+var HelperText = styled__default.default(TextfieldHelperText).withConfig({
+  displayName: "Autocomplete__HelperText",
+  componentId: "sc-yvif0e-2"
+})(["margin-top:8px;margin-left:8px;"]);
 var StyledButton = styled__default.default(Button$1).withConfig({
   displayName: "Autocomplete__StyledButton",
-  componentId: "sc-yvif0e-2"
+  componentId: "sc-yvif0e-3"
 })(function (_ref2) {
   var button = _ref2.theme.entities.button;
   return styled.css(["height:", ";width:", ";"], button.height, button.height);
@@ -8501,6 +8589,9 @@ function AutocompleteInner(props, ref) {
     _props$dropdownHeight = props.dropdownHeight,
     dropdownHeight = _props$dropdownHeight === void 0 ? 300 : _props$dropdownHeight,
     optionComponent = props.optionComponent,
+    helperText = props.helperText,
+    helperIcon = props.helperIcon,
+    variant = props.variant,
     other = _objectWithoutProperties__default.default(props, _excluded$7);
   var isControlled = Boolean(selectedOptions);
   var _useState = react.useState(options),
@@ -8533,6 +8624,7 @@ function AutocompleteInner(props, ref) {
   var token = edsUtils.useToken({
     density: density
   }, multiple ? multiSelect : selectTokens);
+  var tokens = token();
   var placeholderText = placeholder;
   var multipleSelectionProps = {
     initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
@@ -8598,7 +8690,7 @@ function AutocompleteInner(props, ref) {
   //https://github.com/TanStack/virtual/discussions/379#discussioncomment-3501037
   edsUtils.useIsomorphicLayoutEffect(function () {
     var _rowVirtualizer$measu;
-    rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : (_rowVirtualizer$measu = rowVirtualizer.measure) === null || _rowVirtualizer$measu === void 0 ? void 0 : _rowVirtualizer$measu.call(rowVirtualizer);
+    rowVirtualizer === null || rowVirtualizer === void 0 || (_rowVirtualizer$measu = rowVirtualizer.measure) === null || _rowVirtualizer$measu === void 0 || _rowVirtualizer$measu.call(rowVirtualizer);
   }, [rowVirtualizer, density]);
   var comboBoxProps = {
     items: availableItems,
@@ -8863,7 +8955,7 @@ function AutocompleteInner(props, ref) {
     disabled: disabled,
     onChange: function onChange(e) {
       var _e$currentTarget;
-      return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
+      return setTypedInputValue(e === null || e === void 0 || (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
     }
   }));
   var consolidatedEvents = mergeEventsFromRight(other, inputProps);
@@ -8880,6 +8972,7 @@ function AutocompleteInner(props, ref) {
       })), /*#__PURE__*/jsxRuntime.jsx(Container$2, {
         ref: refs.setReference,
         children: /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default.default(_objectSpread__default.default(_objectSpread__default.default({}, inputProps), {}, {
+          variant: variant,
           placeholder: placeholderText,
           readOnly: readOnly,
           rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
@@ -8909,6 +9002,10 @@ function AutocompleteInner(props, ref) {
             }))]
           })
         }, other), consolidatedEvents))
+      }), helperText && /*#__PURE__*/jsxRuntime.jsx(HelperText, {
+        color: variant ? tokens.variants[variant].typography.color : undefined,
+        text: helperText,
+        icon: helperIcon
       }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList
@@ -9044,7 +9141,7 @@ var SideBarProvider = function SideBarProvider(_ref) {
         isOpen: open
       });
     });
-    onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);
+    onToggle === null || onToggle === void 0 || onToggle(open);
   }, [onToggle]);
   var setOnToggle = function setOnToggle(onToggle) {
     setState(function (prevState) {