@equinor/eds-core-react 0.33.0 → 0.33.1

package/dist/eds-core-react.cjs

@@ -856,7 +856,7 @@ var useEds = function useEds() {
   return react.useContext(EdsContext);
 };
 
-var _excluded$1t = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
+var _excluded$1u = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
 var getVariant = function getVariant(tokenSet, variant) {
   switch (variant) {
     case 'ghost':
@@ -898,7 +898,7 @@ var ButtonBase = styled__default.default.button.withConfig({
   var focus = states.focus,
     hover = states.hover,
     disabled = states.disabled;
-  return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
+  return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 || (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 || (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
 });
 var Button$2 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
   var _ref2$color = _ref2.color,
@@ -913,7 +913,7 @@ var Button$2 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
     tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
     _ref2$fullWidth = _ref2.fullWidth,
     fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-    other = _objectWithoutProperties__default.default(_ref2, _excluded$1t);
+    other = _objectWithoutProperties__default.default(_ref2, _excluded$1u);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -950,7 +950,7 @@ var group = {
   }
 };
 
-var _excluded$1s = ["children", "vertical"];
+var _excluded$1t = ["children", "vertical"];
 var border$5 = group.border;
 var radius$1 = border$5.radius;
 var ButtonGroupBase = styled__default.default.div.withConfig({
@@ -963,7 +963,7 @@ var ButtonGroupBase = styled__default.default.div.withConfig({
 var ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref) {
   var children = _ref2.children,
     vertical = _ref2.vertical,
-    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1s);
+    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1t);
   var props = _objectSpread__default.default({
     ref: ref,
     $vertical: vertical
@@ -1015,7 +1015,7 @@ var tooltip = {
   }
 };
 
-var _excluded$1r = ["title", "placement", "children", "style", "enterDelay"];
+var _excluded$1s = ["title", "placement", "children", "style", "enterDelay"];
 var StyledTooltip = styled__default.default.div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
@@ -1036,7 +1036,7 @@ var Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
     style = _ref.style,
     _ref$enterDelay = _ref.enterDelay,
     enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-    rest = _objectWithoutProperties__default.default(_ref, _excluded$1r);
+    rest = _objectWithoutProperties__default.default(_ref, _excluded$1s);
   var arrowRef = react.useRef(null);
   var _useState = react.useState(false),
     _useState2 = _slicedToArray__default.default(_useState, 2),
@@ -1145,13 +1145,13 @@ var Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   });
 });
 
-var _excluded$1q = ["children", "multiple", "selectedIndexes", "onChange"];
+var _excluded$1r = ["children", "multiple", "selectedIndexes", "onChange"];
 var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref) {
   var children = _ref.children,
     multiple = _ref.multiple,
     selectedIndexes = _ref.selectedIndexes,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties__default.default(_ref, _excluded$1q);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1r);
   var _useState = react.useState(selectedIndexes || []),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     pickedIndexes = _useState2[0],
@@ -1169,7 +1169,7 @@ var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref
         variant: isSelected ? 'contained' : 'outlined',
         onClick: function onClick(e) {
           var _childElement$props, _childElement$props$o;
-          (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
+          (_childElement$props = childElement.props) === null || _childElement$props === void 0 || (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props, e);
           var updatedSelection = [index];
           if (multiple) {
             updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(function (i) {
@@ -1246,7 +1246,7 @@ var link = {
   }
 };
 
-var _excluded$1p = ["variant", "children", "bold", "italic", "link", "lines", "color", "group", "token", "as"];
+var _excluded$1q = ["variant", "children", "bold", "italic", "link", "lines", "color", "group", "token", "as"];
 var getElementType = function getElementType(variant, link) {
   if (link) {
     return 'a';
@@ -1323,7 +1323,7 @@ var Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref) {
     group = _ref5.group,
     token = _ref5.token,
     providedAs = _ref5.as,
-    other = _objectWithoutProperties__default.default(_ref5, _excluded$1p);
+    other = _objectWithoutProperties__default.default(_ref5, _excluded$1q);
   var as = providedAs ? providedAs : getElementType(variant, link);
   var variantName = toVariantName(variant, bold, italic, link);
   var typography = findTypography(variantName, group);
@@ -1464,14 +1464,14 @@ var applyVariant = function applyVariant(variant, token) {
   }
 };
 
-var _excluded$1o = ["children"];
+var _excluded$1p = ["children"];
 var TableBase$1 = styled__default.default.table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
 var Table$1 = /*#__PURE__*/react.forwardRef(function Table(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default.default(_ref, _excluded$1o);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1p);
   return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
     ref: ref,
     children: children
@@ -1485,14 +1485,14 @@ var initalState$2 = {
 };
 var InnerContext = /*#__PURE__*/react.createContext(initalState$2);
 
-var _excluded$1n = ["children"];
+var _excluded$1o = ["children"];
 var TableBase = styled__default.default.tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
 var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default.default(_ref, _excluded$1n);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1o);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'body'
@@ -1504,7 +1504,7 @@ var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   });
 });
 
-var _excluded$1m = ["children", "variant"];
+var _excluded$1n = ["children", "variant"];
 var StyledTableCell$1 = styled__default.default.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
@@ -1525,7 +1525,7 @@ var TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2,
   var children = _ref2.children,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1m);
+    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1n);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1630,7 +1630,7 @@ var token$4 = {
   }
 };
 
-var _excluded$1l = ["children", "sort", "sticky"];
+var _excluded$1m = ["children", "sort", "sticky"];
 var StyledTableCell = styled__default.default.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
@@ -1661,7 +1661,7 @@ var TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell(_re
   var children = _ref.children,
     sort = _ref.sort,
     sticky = _ref.sticky,
-    rest = _objectWithoutProperties__default.default(_ref, _excluded$1l);
+    rest = _objectWithoutProperties__default.default(_ref, _excluded$1m);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1721,7 +1721,7 @@ var token$3 = {
   }
 };
 
-var _excluded$1k = ["children", "sticky"];
+var _excluded$1l = ["children", "sticky"];
 var StyledTableHead = styled__default.default.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
@@ -1729,7 +1729,7 @@ var StyledTableHead = styled__default.default.thead.withConfig({
 var Head = /*#__PURE__*/react.forwardRef(function Head(_ref, ref) {
   var children = _ref.children,
     sticky = _ref.sticky,
-    props = _objectWithoutProperties__default.default(_ref, _excluded$1k);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1l);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'head',
@@ -1756,6 +1756,7 @@ var token$2 = {
   }
 };
 
+var _excluded$1k = ["children", "active"];
 var _token$states$hover;
 var StyledRow = styled__default.default.tr.withConfig({
   displayName: "Row__StyledRow",
@@ -1766,9 +1767,9 @@ var StyledRow = styled__default.default.tr.withConfig({
   return $active ? (_token$states$active = token$2.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null;
 }, (_token$states$hover = token$2.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background);
 var Row = /*#__PURE__*/react.forwardRef(function Row(_ref2, ref) {
-  var props = _extends__default.default({}, (_objectDestructuringEmpty__default.default(_ref2), _ref2));
-  var children = props.children,
-    active = props.active;
+  var children = _ref2.children,
+    active = _ref2.active,
+    props = _objectWithoutProperties__default.default(_ref2, _excluded$1k);
   return /*#__PURE__*/jsxRuntime.jsx(StyledRow, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
     $active: active,
     ref: ref,
@@ -2401,13 +2402,13 @@ var Container$4 = styled__default.default.div.withConfig({
   displayName: "Input__Container",
   componentId: "sc-1ykv024-0"
 })(function (_ref) {
-  var _entities$adornment, _entities$adornment$s;
+  var _entities$adornment;
   var $token = _ref.$token,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly;
   var states = $token.states,
     entities = $token.entities;
-  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, $token.typography.color, $token.height, $token.width, $token.boxShadow, $token.background, edsUtils.outlineTemplate($token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
+  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, $token.typography.color, $token.height, $token.width, $token.boxShadow, $token.background, edsUtils.outlineTemplate($token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 || (_entities$adornment = _entities$adornment.states.focus) === null || _entities$adornment === void 0 ? void 0 : _entities$adornment.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));
@@ -4064,10 +4065,10 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref3, ref) {
   react.useEffect(function () {
     if (open) {
       var _localRef$current;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.showModal();
+      localRef === null || localRef === void 0 || (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _localRef$current.showModal();
     } else {
       var _localRef$current2;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.close();
+      localRef === null || localRef === void 0 || (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 || _localRef$current2.close();
     }
   }, [open]);
 
@@ -4653,12 +4654,13 @@ var StyledChips = styled__default.default.div.attrs(function (_ref) {
   var $clickable = _ref2.$clickable;
   return $clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states$2.hover.typography.color, states$2.hover.typography.color);
 }, function (_ref3) {
-  var $variant = _ref3.$variant;
+  var $variant = _ref3.$variant,
+    $clickable = _ref3.$clickable;
   switch ($variant) {
     case 'active':
       return styled.css(["background:", ";"], states$2.active.background);
     case 'error':
-      return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, edsUtils.bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
+      return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, edsUtils.bordersTemplate(error.border), $clickable && error.states.hover.typography.color, $clickable && error.states.hover.typography.color, $clickable && error.states.hover.typography.color);
     default:
       return '';
   }
@@ -5135,8 +5137,9 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
     ariaLabelledby = _ref3.ariaLabelledby,
     ariaLabelledbyNative = _ref3['aria-labelledby'],
     rest = _objectWithoutProperties__default.default(_ref3, _excluded$C);
-  var isRangeSlider = Array.isArray(value);
-  var parsedValue = isRangeSlider ? value : [value];
+  var isNumber = !Array.isArray(value);
+  var isRangeSlider = !isNumber && value.length === 2;
+  var parsedValue = isNumber ? [value] : value;
   var _useState = react.useState(parsedValue),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     initalValue = _useState2[0],
@@ -5156,9 +5159,10 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
         setSliderValue(value);
       }
     } else {
-      if (value !== initalValue[0]) {
-        setInitalValue([value]);
-        setSliderValue([value]);
+      var numberValue = Number(value);
+      if (numberValue !== initalValue[0]) {
+        setInitalValue([numberValue]);
+        setSliderValue([numberValue]);
       }
     }
   }, [value, initalValue, isRangeSlider]);
@@ -5174,12 +5178,12 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
       if (valueArrIdx === 0 && _newValue[0] >= _newValue[1]) {
         var _maxRange$current;
         _newValue[0] = _newValue[1];
-        (_maxRange$current = maxRange.current) === null || _maxRange$current === void 0 ? void 0 : _maxRange$current.focus();
+        (_maxRange$current = maxRange.current) === null || _maxRange$current === void 0 || _maxRange$current.focus();
       }
       if (valueArrIdx === 1 && _newValue[1] <= _newValue[0]) {
         var _minRange$current;
         _newValue[1] = _newValue[0];
-        (_minRange$current = minRange.current) === null || _minRange$current === void 0 ? void 0 : _minRange$current.focus();
+        (_minRange$current = minRange.current) === null || _minRange$current === void 0 || _minRange$current.focus();
       }
       setSliderValue(_newValue);
       if (onChange) {
@@ -7261,7 +7265,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
   edsUtils.useIsomorphicLayoutEffect(function () {
     if (isMounted) {
       setActivePage(1);
-      onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
+      onChange === null || onChange === void 0 || onChange(null, 1);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemsPerPage]);
@@ -8598,7 +8602,7 @@ function AutocompleteInner(props, ref) {
   //https://github.com/TanStack/virtual/discussions/379#discussioncomment-3501037
   edsUtils.useIsomorphicLayoutEffect(function () {
     var _rowVirtualizer$measu;
-    rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : (_rowVirtualizer$measu = rowVirtualizer.measure) === null || _rowVirtualizer$measu === void 0 ? void 0 : _rowVirtualizer$measu.call(rowVirtualizer);
+    rowVirtualizer === null || rowVirtualizer === void 0 || (_rowVirtualizer$measu = rowVirtualizer.measure) === null || _rowVirtualizer$measu === void 0 || _rowVirtualizer$measu.call(rowVirtualizer);
   }, [rowVirtualizer, density]);
   var comboBoxProps = {
     items: availableItems,
@@ -8863,7 +8867,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);
@@ -9044,7 +9048,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/Autocomplete/Autocomplete.js

@@ -247,7 +247,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 +512,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);

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/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/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]);

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/Slider.js

@@ -91,8 +91,9 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref3, ref) {
     ariaLabelledby = _ref3.ariaLabelledby,
     ariaLabelledbyNative = _ref3['aria-labelledby'],
     rest = _objectWithoutProperties(_ref3, _excluded);
-  var isRangeSlider = Array.isArray(value);
-  var parsedValue = isRangeSlider ? value : [value];
+  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],
@@ -112,9 +113,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 +132,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) {

package/dist/esm/components/Table/Row/Row.js

@@ -1,11 +1,11 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { token } from './Row.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
+var _excluded = ["children", "active"];
 var _token$states$hover;
 var StyledRow = styled.tr.withConfig({
   displayName: "Row__StyledRow",
@@ -16,9 +16,9 @@ var StyledRow = styled.tr.withConfig({
   return $active ? (_token$states$active = token.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null;
 }, (_token$states$hover = token.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background);
 var Row = /*#__PURE__*/forwardRef(function Row(_ref2, ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  var children = props.children,
-    active = props.active;
+  var children = _ref2.children,
+    active = _ref2.active,
+    props = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/jsx(StyledRow, _objectSpread(_objectSpread({}, props), {}, {
     $active: active,
     ref: ref,

package/dist/types/components/Button/Button.d.ts

@@ -18,7 +18,7 @@ export type ButtonProps = {
      * @default 'button'
      */
     type?: string;
-    /** FullWidth (stretched) button  */
+    /** Floats icon to the side if button is stretched beyond its intrinsic width  */
     fullWidth?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const Button: OverridableComponent<ButtonProps, HTMLButtonElement>;

package/dist/types/components/Slider/Slider.d.ts

@@ -8,9 +8,9 @@ export type SliderProps = {
     /** Components value, range of numbers */
     value: number[] | number;
     /** Function to be called when value change */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, newValue: number[] | number) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, newValue: number[]) => void;
     /** Function to be called when value is committed by mouseup event */
-    onChangeCommitted?: (event: MouseEvent | KeyboardEvent, newValue: number[] | number) => void;
+    onChangeCommitted?: (event: MouseEvent | KeyboardEvent, newValue: number[]) => void;
     /** Function for formatting the displayed value. E.g. formatting dates, or adding a unit suffix */
     outputFunction?: (value: number) => string;
     /** Max value */
@@ -35,9 +35,9 @@ export declare const Slider: import("react").ForwardRefExoticComponent<{
     /** Components value, range of numbers */
     value: number[] | number;
     /** Function to be called when value change */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, newValue: number[] | number) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, newValue: number[]) => void;
     /** Function to be called when value is committed by mouseup event */
-    onChangeCommitted?: (event: MouseEvent | KeyboardEvent, newValue: number[] | number) => void;
+    onChangeCommitted?: (event: MouseEvent | KeyboardEvent, newValue: number[]) => void;
     /** Function for formatting the displayed value. E.g. formatting dates, or adding a unit suffix */
     outputFunction?: (value: number) => string;
     /** Max value */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.33.0",
+  "version": "0.33.1",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -82,13 +82,13 @@
     "styled-components": ">=4.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.5",
+    "@babel/runtime": "^7.23.2",
     "@floating-ui/react": "^0.25.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "downshift": "^8.2.1",
     "@equinor/eds-icons": "^0.19.3",
-    "@equinor/eds-utils": "0.8.2",
-    "@equinor/eds-tokens": "0.9.2"
+    "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-utils": "0.8.3"
   },
   "engines": {
     "pnpm": ">=4",