@equinor/eds-core-react 0.33.1 → 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);
 });
@@ -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);
@@ -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"
@@ -2164,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;"]);
@@ -2204,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
@@ -4912,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
       })
     },
@@ -4972,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, {
@@ -4987,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"
+      })
+    })]
   });
 });
 
@@ -5056,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,
@@ -5073,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"
@@ -5117,26 +5143,28 @@ 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 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;
@@ -5152,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]) {
@@ -5216,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);
@@ -5242,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);
@@ -5273,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"
@@ -5345,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],
@@ -6411,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;
@@ -6429,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"
@@ -6439,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
@@ -6477,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]];
@@ -6493,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))
@@ -7293,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,
@@ -8251,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',
@@ -8377,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"
@@ -8389,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);
@@ -8505,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),
@@ -8537,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]] : []
@@ -8884,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,
@@ -8913,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

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -16,13 +16,14 @@ import { bordersTemplate, useToken, useIsomorphicLayoutEffect, useIsInDialog } f
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import pickBy from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/pickBy.js';
-import mergeWith from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeWith.js';
+import pickBy from '../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/pickBy.js';
+import mergeWith from '../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeWith.js';
+import { HelperText as TextfieldHelperText } from '../InputWrapper/HelperText/HelperText.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';
 
-var _excluded = ["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 = ["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 = styled.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -34,9 +35,13 @@ var StyledList = styled(List).withConfig({
   var theme = _ref.theme;
   return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
+var HelperText = styled(TextfieldHelperText).withConfig({
+  displayName: "Autocomplete__HelperText",
+  componentId: "sc-yvif0e-2"
+})(["margin-top:8px;margin-left:8px;"]);
 var StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
-  componentId: "sc-yvif0e-2"
+  componentId: "sc-yvif0e-3"
 })(function (_ref2) {
   var button = _ref2.theme.entities.button;
   return css(["height:", ";width:", ";"], button.height, button.height);
@@ -150,6 +155,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(props, _excluded);
   var isControlled = Boolean(selectedOptions);
   var _useState = useState(options),
@@ -182,6 +190,7 @@ function AutocompleteInner(props, ref) {
   var token = useToken({
     density: density
   }, multiple ? multiSelect : selectTokens);
+  var tokens = token();
   var placeholderText = placeholder;
   var multipleSelectionProps = {
     initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
@@ -529,6 +538,7 @@ function AutocompleteInner(props, ref) {
       })), /*#__PURE__*/jsx(Container, {
         ref: refs.setReference,
         children: /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread(_objectSpread({}, inputProps), {}, {
+          variant: variant,
           placeholder: placeholderText,
           readOnly: readOnly,
           rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
@@ -558,6 +568,10 @@ function AutocompleteInner(props, ref) {
             }))]
           })
         }, other), consolidatedEvents))
+      }), helperText && /*#__PURE__*/jsx(HelperText, {
+        color: variant ? tokens.variants[variant].typography.color : undefined,
+        text: helperText,
+        icon: helperIcon
       }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList

package/dist/esm/components/Autocomplete/Autocomplete.tokens.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
 var typography = tokens.typography,
   colors = tokens.colors,
@@ -42,6 +42,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',

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -8,7 +8,7 @@ import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-var _excluded = ["children", "collapse", "wrap"];
+var _excluded = ["children", "collapse", "wrap", "separator"];
 var spacings = breadcrumbs.spacings,
   typography = breadcrumbs.typography,
   states = breadcrumbs.states;
@@ -26,7 +26,7 @@ var ListItem = styled.li.withConfig({
 var Separator = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
-})(["color:", ";", " display:block;line-height:1;"], typography.color, spacingsTemplate(spacings));
+})(["color:", ";", " display:block;line-height:1;display:flex;& > svg{margin-inline:-9px;}"], typography.color, spacingsTemplate(spacings));
 var Collapsed = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
@@ -36,6 +36,8 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref2, ref) {
     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(_ref2, _excluded);
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref
@@ -74,7 +76,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref2, ref) {
         "aria-hidden": true,
         children: /*#__PURE__*/jsx(Separator, {
           variant: "body_short",
-          children: "/"
+          children: separator
         })
       })]
     }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
@@ -90,7 +92,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref2, ref) {
           "aria-hidden": true,
           children: /*#__PURE__*/jsx(Separator, {
             variant: "body_short",
-            children: "/"
+            children: separator
           })
         })]
       }, "breadcrumb-".concat(index))

package/dist/esm/components/Button/tokens/contained.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors = tokens.colors,
   primaryWhite = _tokens$colors.text.static_icons__primary_white.rgba,

package/dist/esm/components/Button/tokens/contained_icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$clickbounds = tokens.clickbounds,
   clicboundHeight = _tokens$clickbounds.default__base,