@equinor/eds-core-react 0.33.0 → 0.34.0

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]] : []
@@ -247,7 +256,7 @@ function AutocompleteInner(props, ref) {
   //https://github.com/TanStack/virtual/discussions/379#discussioncomment-3501037
   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,
@@ -512,7 +521,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);
@@ -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/Button.js

@@ -50,7 +50,7 @@ var ButtonBase = styled.button.withConfig({
   var focus = states.focus,
     hover = states.hover,
     disabled = states.disabled;
-  return 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, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), 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, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
+  return 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, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), 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, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
 var Button = /*#__PURE__*/forwardRef(function Button(_ref2, ref) {
   var _ref2$color = _ref2.color,

package/dist/esm/components/Button/ToggleButton/ToggleButton.js

@@ -32,7 +32,7 @@ var ToggleButton = /*#__PURE__*/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) {

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,

package/dist/esm/components/Button/tokens/ghost.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$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

package/dist/esm/components/Button/tokens/icon.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$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

package/dist/esm/components/Button/tokens/outlined.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$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

package/dist/esm/components/Chip/Chip.js

@@ -30,12 +30,13 @@ var StyledChips = styled.div.attrs(function (_ref) {
   var $clickable = _ref2.$clickable;
   return $clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states.hover.typography.color, states.hover.typography.color);
 }, function (_ref3) {
-  var $variant = _ref3.$variant;
+  var $variant = _ref3.$variant,
+    $clickable = _ref3.$clickable;
   switch ($variant) {
     case 'active':
       return css(["background:", ";"], states.active.background);
     case 'error':
-      return 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, bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
+      return 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, bordersTemplate(error.border), $clickable && error.states.hover.typography.color, $clickable && error.states.hover.typography.color, $clickable && error.states.hover.typography.color);
     default:
       return '';
   }

package/dist/esm/components/Dialog/Dialog.js

@@ -47,10 +47,10 @@ var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref3, ref) {
   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]);
 

package/dist/esm/components/Input/Input.js

@@ -13,13 +13,13 @@ var Container = styled.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 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, 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, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
+  return 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, 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, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));

package/dist/esm/components/Input/Input.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 _tokens$colors = tokens.colors,
   background = _tokens$colors.ui.background__light.rgba,

package/dist/esm/components/InputWrapper/InputWrapper.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 _tokens$colors = tokens.colors,
   background = _tokens$colors.ui.background__light.rgba,

package/dist/esm/components/Pagination/Pagination.js

@@ -83,7 +83,7 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
   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]);
@@ -111,10 +111,9 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
           })
         })
       }, "previous"), items.length > 0 ? items.map(function (page, index) {
-        return page !== 'ELLIPSIS' ?
-        /*#__PURE__*/
+        return page !== 'ELLIPSIS' ? /*#__PURE__*/jsx(ListItem
         // eslint-disable-next-line react/no-array-index-key
-        jsx(ListItem, {
+        , {
           children: /*#__PURE__*/jsx(PaginationItem, {
             "aria-label": getAriaLabel(page, activePage),
             "aria-current": activePage,

package/dist/esm/components/SideBar/SideBar.context.js

@@ -22,7 +22,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) {

package/dist/esm/components/Slider/Output.js

@@ -2,26 +2,32 @@ import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _tokens$entities = slider.entities,
-  track = _tokens$entities.track,
-  output = _tokens$entities.output;
+var output = slider.entities.output;
 var StyledOutput = styled.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;"], typographyTemplate(output.typography), slider.background, track.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);"], typographyTemplate(output.typography));
+var TooltipArrow = styled.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__*/forwardRef(function Output(_ref, ref) {
   var children = _ref.children,
     value = _ref.value,
     htmlFor = _ref.htmlFor;
-  return /*#__PURE__*/jsx(StyledOutput, {
+  return /*#__PURE__*/jsxs(StyledOutput, {
     ref: ref,
     style: {
       '--val': value
     },
     htmlFor: htmlFor,
-    children: children
+    children: [children, /*#__PURE__*/jsx(TooltipArrow, {
+      children: /*#__PURE__*/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"
+      })
+    })]
   });
 });
 

package/dist/esm/components/Slider/Slider.js

@@ -10,7 +10,7 @@ import { SliderInput } from './SliderInput.js';
 import { bordersTemplate, useId } from '@equinor/eds-utils';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
+var _excluded = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "labelAlwaysOn", "step", "disabled", "hideActiveTrack", "ariaLabelledby", "aria-labelledby"];
 var _tokens$entities = slider.entities,
   track = _tokens$entities.track,
   handle = _tokens$entities.handle,
@@ -27,38 +27,56 @@ var RangeWrapper = styled.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({
       '--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.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 css({
+    '--showTooltip': $labelAlwaysOn ? 1 : 0
+  });
+}, wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, function (_ref3) {
+  var $touchNavigation = _ref3.$touchNavigation;
+  return $touchNavigation && 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.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({
       '--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 css({
+    '--showTooltip': $labelAlwaysOn ? 1 : 0
+  });
+}, wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover);
 var WrapperGroupLabel = styled.div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
@@ -71,28 +89,31 @@ var SrOnlyLabel = styled.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__*/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(_ref3, _excluded);
-  var isRangeSlider = Array.isArray(value);
-  var parsedValue = isRangeSlider ? value : [value];
+var Slider = /*#__PURE__*/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(_ref6, _excluded);
+  var isNumber = !Array.isArray(value);
+  var isRangeSlider = !isNumber && value.length === 2;
+  var parsedValue = isNumber ? [value] : value;
   var _useState = useState(parsedValue),
     _useState2 = _slicedToArray(_useState, 2),
     initalValue = _useState2[0],
@@ -105,6 +126,10 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref3, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     mousePressed = _useState6[0],
     setMousePressed = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    touchNavigation = _useState8[0],
+    setTouchNavigation = _useState8[1];
   useEffect(function () {
     if (isRangeSlider) {
       if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
@@ -112,9 +137,10 @@ var Slider = /*#__PURE__*/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]);
@@ -130,12 +156,12 @@ var Slider = /*#__PURE__*/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) {
@@ -168,8 +194,16 @@ var Slider = /*#__PURE__*/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);
@@ -194,8 +228,8 @@ var Slider = /*#__PURE__*/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);
@@ -225,9 +259,23 @@ var Slider = /*#__PURE__*/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__*/jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsx(SrOnlyLabel, {
         htmlFor: inputIdA,
         children: "Value A"
@@ -297,6 +345,14 @@ var Slider = /*#__PURE__*/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__*/jsx(SliderInput, {
         type: "range",
         value: sliderValue[0],