@equinor/eds-core-react 0.33.1 → 0.35.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
@@ -2751,7 +2753,6 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
     'aria-hidden': true
   };
   var pathProps = {
-    d: icon.svgPathData,
     $height: icon.height ? parseInt(icon.height) : size,
     $size: size || parseInt(icon.height)
   };
@@ -2772,9 +2773,15 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
     children: [title && /*#__PURE__*/jsxRuntime.jsx("title", {
       id: titleId,
       children: title
-    }), /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, _objectSpread__default.default({
+    }), Array.isArray(icon.svgPathData) ? icon.svgPathData.map(function (pathData) {
+      return /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, _objectSpread__default.default(_objectSpread__default.default({}, pathProps), {}, {
+        d: pathData
+      }), pathData);
+    }) : /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, _objectSpread__default.default(_objectSpread__default.default({
       "data-testid": "eds-icon-path"
-    }, pathProps))]
+    }, pathProps), {}, {
+      d: icon.svgPathData
+    }))]
   }));
 });
 
@@ -4465,30 +4472,26 @@ var StyledSideSheet = styled__default.default.div.withConfig({
 var Header$1 = styled__default.default.div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
-})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;"]);
+})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;}"]);
 var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
   var _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
     width = _ref2.width,
-    _ref2$title = _ref2.title,
-    title = _ref2$title === void 0 ? '' : _ref2$title,
+    title = _ref2.title,
     children = _ref2.children,
-    _ref2$open = _ref2.open,
-    open = _ref2$open === void 0 ? true : _ref2$open,
+    open = _ref2.open,
     onClose = _ref2.onClose,
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$H);
   var props = _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
     ref: ref,
     width: width || variants[variant]
   });
-
-  // Controller must set open={false} when pressing the close button
   return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(Header$1, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+    children: [(title || onClose) && /*#__PURE__*/jsxRuntime.jsxs(Header$1, {
+      children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
         variant: "h2",
         children: title
-      }), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
+      }), onClose && /*#__PURE__*/jsxRuntime.jsx(Button$1, {
         variant: "ghost_icon",
         onClick: onClose,
         title: "Close",
@@ -4912,7 +4915,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 +4975,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 +4990,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 +5065,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 +5082,50 @@ var RangeWrapper = styled__default.default.div.attrs(function (_ref) {
     $valA = _ref.$valA,
     $valB = _ref.$valB,
     $disabled = _ref.$disabled,
+    $hideActiveTrack = _ref.$hideActiveTrack,
+    $labelAlwaysOn = _ref.$labelAlwaysOn,
     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
+      '--showTooltip': $labelAlwaysOn ? 1 : 0,
+      '--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));}&:where(:hover,:has(:focus-visible)){> output{--showTooltip:1;}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, function (_ref2) {
+  var $touchNavigation = _ref2.$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 (_ref3) {
+  var $min = _ref3.$min,
+    $max = _ref3.$max,
+    value = _ref3.value,
+    disabled = _ref3.disabled,
+    $hideActiveTrack = _ref3.$hideActiveTrack,
+    $labelAlwaysOn = _ref3.$labelAlwaysOn,
+    style = _ref3.style;
   return {
     style: _objectSpread__default.default({
       '--min': $min,
       '--max': $max,
       '--value': value,
-      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+      '--showTooltip': $labelAlwaysOn ? 1 : 0,
+      '--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;}&:where(:hover,:has(:focus-visible)){> output{--showTooltip:1;}}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:var(--background-hover);}}}"], wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover);
 var WrapperGroupLabel = styled__default.default.div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
@@ -5112,31 +5133,33 @@ var WrapperGroupLabel = styled__default.default.div.withConfig({
 var WrapperGroupLabelDots = styled__default.default(WrapperGroupLabel).withConfig({
   displayName: "Slider__WrapperGroupLabelDots",
   componentId: "sc-n1grrg-3"
-})(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", " bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, edsUtils.bordersTemplate(dot.border), dot.spacings.bottom);
+})(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", ";bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, edsUtils.bordersTemplate(dot.border), dot.spacings.bottom);
 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(_ref4, ref) {
+  var _ref4$min = _ref4.min,
+    min = _ref4$min === void 0 ? 0 : _ref4$min,
+    _ref4$max = _ref4.max,
+    max = _ref4$max === void 0 ? 100 : _ref4$max,
+    _ref4$value = _ref4.value,
+    value = _ref4$value === void 0 ? [40, 60] : _ref4$value,
+    outputFunction = _ref4.outputFunction,
+    onChange = _ref4.onChange,
+    onChangeCommitted = _ref4.onChangeCommitted,
+    _ref4$minMaxDots = _ref4.minMaxDots,
+    minMaxDots = _ref4$minMaxDots === void 0 ? true : _ref4$minMaxDots,
+    _ref4$minMaxValues = _ref4.minMaxValues,
+    minMaxValues = _ref4$minMaxValues === void 0 ? true : _ref4$minMaxValues,
+    labelAlwaysOn = _ref4.labelAlwaysOn,
+    _ref4$step = _ref4.step,
+    step = _ref4$step === void 0 ? 1 : _ref4$step,
+    disabled = _ref4.disabled,
+    hideActiveTrack = _ref4.hideActiveTrack,
+    ariaLabelledby = _ref4.ariaLabelledby,
+    ariaLabelledbyNative = _ref4['aria-labelledby'],
+    rest = _objectWithoutProperties__default.default(_ref4, _excluded$C);
   var isNumber = !Array.isArray(value);
   var isRangeSlider = !isNumber && value.length === 2;
   var parsedValue = isNumber ? [value] : value;
@@ -5152,6 +5175,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 +5243,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 +5277,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 +5308,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 +5394,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 +6468,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 +6486,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 +6496,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 +6536,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 +6552,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 +7352,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 +8309,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',
@@ -8336,7 +8411,7 @@ var Label = styled__default.default.span.withConfig({
 })(function (_ref2) {
   var theme = _ref2.theme,
     $multiline = _ref2.$multiline;
-  return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], edsUtils.spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden');
+  return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;@supports (-moz-appearance:none){overflow:", ";}"], edsUtils.spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden', $multiline ? 'initial' : 'clip');
 });
 function AutocompleteOptionInner(props, ref) {
   var value = props.value,
@@ -8377,7 +8452,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"
@@ -8387,11 +8462,15 @@ var StyledList = styled__default.default(List$1).withConfig({
   componentId: "sc-yvif0e-1"
 })(function (_ref) {
   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));
+  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], 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 +8584,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 +8619,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 +8967,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 +8997,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"
@@ -32,11 +33,15 @@ var StyledList = styled(List).withConfig({
   componentId: "sc-yvif0e-1"
 })(function (_ref) {
   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));
+  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], 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