@equinor/eds-core-react 0.19.0-dev.20220404 → 0.19.0-dev.202205096

package/README.md

@@ -55,31 +55,40 @@ render(<App />, document.getElementById('root'))
 
 ## Components
 
-### Available ✅
-
 - Accordion
+- Avatar
 - Banner
 - Breadcrumbs
 - Button
-- Cards
-- Chips
+- Card
+- Checkbox
+- Chip
 - Dialog
 - Divider
+- EdsProvider
 - Icon
+- Input
+- Label
 - List
 - Menu
 - Pagination
 - Popover
-- Progress indicators
+- Progress
+  - Circular
+  - Dots
+  - Linear
+  - Star
+- Radio
 - Scrim
 - Search
-- Select (Native Select)
-- Single Select
-- Multi Select
-- Selection Controls
+- Select
+  - Native Select
+  - Single Select
+  - Multi Select
 - Side Sheet
 - Slider
 - Snackbar
+- Switch
 - Table
 - Table of contents
 - Tabs
@@ -87,13 +96,3 @@ render(<App />, document.getElementById('root'))
 - Tooltip
 - TopBar
 - Typography
-
-### In progress 👷‍♀️
-
-- Navigation Drawer
-
-### TODO 🛠️
-
-- App launcher
-- Stepper
-

package/dist/eds-core-react.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var styled = require('styled-components');
 var edsTokens = require('@equinor/eds-tokens');
-var jsxRuntime = require('react/jsx-runtime');
 var edsUtils = require('@equinor/eds-utils');
+var jsxRuntime = require('react/jsx-runtime');
 var edsIcons = require('@equinor/eds-icons');
 var ReactDom = require('react-dom');
 var downshift = require('downshift');
@@ -165,13 +165,10 @@ const button = {
   }
 };
 
-function _isPlaceholder$3(a) {
+function _isPlaceholder(a) {
   return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
 }
 
-var _isPlaceholder_1 = _isPlaceholder$3;
-
-var _isPlaceholder$2 = _isPlaceholder_1;
 /**
  * Optimized internal one-arity curry function.
  *
@@ -181,9 +178,9 @@ var _isPlaceholder$2 = _isPlaceholder_1;
  * @return {Function} The curried function.
  */
 
-function _curry1$2(fn) {
+function _curry1(fn) {
   return function f1(a) {
-    if (arguments.length === 0 || _isPlaceholder$2(a)) {
+    if (arguments.length === 0 || _isPlaceholder(a)) {
       return f1;
     } else {
       return fn.apply(this, arguments);
@@ -191,10 +188,6 @@ function _curry1$2(fn) {
   };
 }
 
-var _curry1_1 = _curry1$2;
-
-var _curry1$1 = _curry1_1;
-var _isPlaceholder$1 = _isPlaceholder_1;
 /**
  * Optimized internal two-arity curry function.
  *
@@ -204,32 +197,27 @@ var _isPlaceholder$1 = _isPlaceholder_1;
  * @return {Function} The curried function.
  */
 
-function _curry2$2(fn) {
+function _curry2(fn) {
   return function f2(a, b) {
     switch (arguments.length) {
       case 0:
         return f2;
 
       case 1:
-        return _isPlaceholder$1(a) ? f2 : _curry1$1(function (_b) {
+        return _isPlaceholder(a) ? f2 : _curry1(function (_b) {
           return fn(a, _b);
         });
 
       default:
-        return _isPlaceholder$1(a) && _isPlaceholder$1(b) ? f2 : _isPlaceholder$1(a) ? _curry1$1(function (_a) {
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f2 : _isPlaceholder(a) ? _curry1(function (_a) {
           return fn(_a, b);
-        }) : _isPlaceholder$1(b) ? _curry1$1(function (_b) {
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
           return fn(a, _b);
         }) : fn(a, b);
     }
   };
 }
 
-var _curry2_1 = _curry2$2;
-
-var _curry1 = _curry1_1;
-var _curry2$1 = _curry2_1;
-var _isPlaceholder = _isPlaceholder_1;
 /**
  * Optimized internal three-arity curry function.
  *
@@ -239,32 +227,32 @@ var _isPlaceholder = _isPlaceholder_1;
  * @return {Function} The curried function.
  */
 
-function _curry3$2(fn) {
+function _curry3(fn) {
   return function f3(a, b, c) {
     switch (arguments.length) {
       case 0:
         return f3;
 
       case 1:
-        return _isPlaceholder(a) ? f3 : _curry2$1(function (_b, _c) {
+        return _isPlaceholder(a) ? f3 : _curry2(function (_b, _c) {
           return fn(a, _b, _c);
         });
 
       case 2:
-        return _isPlaceholder(a) && _isPlaceholder(b) ? f3 : _isPlaceholder(a) ? _curry2$1(function (_a, _c) {
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f3 : _isPlaceholder(a) ? _curry2(function (_a, _c) {
           return fn(_a, b, _c);
-        }) : _isPlaceholder(b) ? _curry2$1(function (_b, _c) {
+        }) : _isPlaceholder(b) ? _curry2(function (_b, _c) {
           return fn(a, _b, _c);
         }) : _curry1(function (_c) {
           return fn(a, b, _c);
         });
 
       default:
-        return _isPlaceholder(a) && _isPlaceholder(b) && _isPlaceholder(c) ? f3 : _isPlaceholder(a) && _isPlaceholder(b) ? _curry2$1(function (_a, _b) {
+        return _isPlaceholder(a) && _isPlaceholder(b) && _isPlaceholder(c) ? f3 : _isPlaceholder(a) && _isPlaceholder(b) ? _curry2(function (_a, _b) {
           return fn(_a, _b, c);
-        }) : _isPlaceholder(a) && _isPlaceholder(c) ? _curry2$1(function (_a, _c) {
+        }) : _isPlaceholder(a) && _isPlaceholder(c) ? _curry2(function (_a, _c) {
           return fn(_a, b, _c);
-        }) : _isPlaceholder(b) && _isPlaceholder(c) ? _curry2$1(function (_b, _c) {
+        }) : _isPlaceholder(b) && _isPlaceholder(c) ? _curry2(function (_b, _c) {
           return fn(a, _b, _c);
         }) : _isPlaceholder(a) ? _curry1(function (_a) {
           return fn(_a, b, c);
@@ -277,22 +265,14 @@ function _curry3$2(fn) {
   };
 }
 
-var _curry3_1 = _curry3$2;
-
-function _isObject$1(x) {
-  return Object.prototype.toString.call(x) === '[object Object]';
-}
-
-var _isObject_1 = _isObject$1;
-
-function _has$1(prop, obj) {
+function _has(prop, obj) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
 }
 
-var _has_1 = _has$1;
+function _isObject(x) {
+  return Object.prototype.toString.call(x) === '[object Object]';
+}
 
-var _curry3$1 = _curry3_1;
-var _has = _has_1;
 /**
  * Creates a new object with the own properties of the two provided objects. If
  * a key exists in both objects, the provided function is applied to the key
@@ -319,7 +299,7 @@ var _has = _has_1;
  * @symb R.mergeWithKey(f, { x: 1, y: 2 }, { y: 5, z: 3 }) = { x: 1, y: f('y', 2, 5), z: 3 }
  */
 
-var mergeWithKey$1 = /*#__PURE__*/_curry3$1(function mergeWithKey(fn, l, r) {
+var mergeWithKey = /*#__PURE__*/_curry3(function mergeWithKey(fn, l, r) {
   var result = {};
   var k;
 
@@ -338,11 +318,6 @@ var mergeWithKey$1 = /*#__PURE__*/_curry3$1(function mergeWithKey(fn, l, r) {
   return result;
 });
 
-var mergeWithKey_1 = mergeWithKey$1;
-
-var _curry3 = _curry3_1;
-var _isObject = _isObject_1;
-var mergeWithKey = mergeWithKey_1;
 /**
  * Creates a new object with the own properties of the two provided objects.
  * If a key exists in both objects:
@@ -372,7 +347,7 @@ var mergeWithKey = mergeWithKey_1;
  *      //=> { a: true, b: true, c: { thing: 'bar', values: [10, 20, 15, 35] }}
  */
 
-var mergeDeepWithKey$1 = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
+var mergeDeepWithKey = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
   return mergeWithKey(function (k, lVal, rVal) {
     if (_isObject(lVal) && _isObject(rVal)) {
       return mergeDeepWithKey(fn, lVal, rVal);
@@ -382,10 +357,6 @@ var mergeDeepWithKey$1 = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj
   }, lObj, rObj);
 });
 
-var mergeDeepWithKey_1 = mergeDeepWithKey$1;
-
-var _curry2 = _curry2_1;
-var mergeDeepWithKey = mergeDeepWithKey_1;
 /**
  * Creates a new object with the own properties of the first object merged with
  * the own properties of the second object. If a key exists in both objects:
@@ -414,9 +385,6 @@ var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
   }, lObj, rObj);
 });
 
-var mergeDeepRight_1 = mergeDeepRight;
-var mergeDeepRight$1 = mergeDeepRight_1;
-
 const {
   colors: {
     text: {
@@ -451,7 +419,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight$1(button, {
+const primary$9 = mergeDeepRight(button, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -469,7 +437,7 @@ const primary$9 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$4 = mergeDeepRight$1(primary$9, {
+const secondary$4 = mergeDeepRight(primary$9, {
   background: secondaryColor$3,
   border: {
     color: secondaryColor$3
@@ -483,7 +451,7 @@ const secondary$4 = mergeDeepRight$1(primary$9, {
     }
   }
 });
-const danger$5 = mergeDeepRight$1(primary$9, {
+const danger$5 = mergeDeepRight(primary$9, {
   background: dangerColor$3,
   border: {
     color: dangerColor$3
@@ -536,7 +504,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight$1(button, {
+const primary$8 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$7
   },
@@ -565,7 +533,7 @@ const primary$8 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$3 = mergeDeepRight$1(primary$8, {
+const secondary$3 = mergeDeepRight(primary$8, {
   typography: {
     color: secondaryColor$2
   },
@@ -584,7 +552,7 @@ const secondary$3 = mergeDeepRight$1(primary$8, {
     }
   }
 });
-const danger$4 = mergeDeepRight$1(primary$8, {
+const danger$4 = mergeDeepRight(primary$8, {
   typography: {
     color: dangerColor$2
   },
@@ -637,7 +605,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight$1(button, {
+const primary$7 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$6
   },
@@ -656,7 +624,7 @@ const primary$7 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$2 = mergeDeepRight$1(primary$7, {
+const secondary$2 = mergeDeepRight(primary$7, {
   typography: {
     color: secondaryColor$1
   },
@@ -669,7 +637,7 @@ const secondary$2 = mergeDeepRight$1(primary$7, {
     }
   }
 });
-const danger$3 = mergeDeepRight$1(primary$7, {
+const danger$3 = mergeDeepRight(primary$7, {
   typography: {
     color: dangerColor$1
   },
@@ -723,7 +691,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$6 = mergeDeepRight$1(button, {
+const primary$6 = mergeDeepRight(button, {
   height: shape$3.icon_button.minHeight,
   width: shape$3.icon_button.minWidth,
   typography: {
@@ -779,7 +747,7 @@ const primary$6 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$1 = mergeDeepRight$1(primary$6, {
+const secondary$1 = mergeDeepRight(primary$6, {
   typography: {
     color: secondaryColor
   },
@@ -792,7 +760,7 @@ const secondary$1 = mergeDeepRight$1(primary$6, {
     }
   }
 });
-const danger$2 = mergeDeepRight$1(primary$6, {
+const danger$2 = mergeDeepRight(primary$6, {
   typography: {
     color: dangerColor
   },
@@ -834,7 +802,7 @@ const FullWidthCenterContent = styled__default["default"].span.withConfig({
 const FullWidthInner = styled__default["default"].span.withConfig({
   displayName: "InnerFullWidth__FullWidthInner",
   componentId: "sc-qeawkb-1"
-})(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}>:is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
+})(["height:100%;display:flex;align-items:center;> :is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}> :is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
 const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth(_ref, ref) {
   let {
     children
@@ -915,7 +883,7 @@ const getToken$1 = (variant, color) => {
 const Inner = styled__default["default"].span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
-})(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
+})(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& > :is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
 const ButtonBase = styled__default["default"].button.withConfig({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"
@@ -1297,7 +1265,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return mergeDeepRight$1(token, token.variants.numeric);
+      return mergeDeepRight(token, token.variants.numeric);
 
     default:
       return token;
@@ -1946,7 +1914,7 @@ const input$2 = {
     }
   }
 };
-const error$4 = mergeDeepRight$1(input$2, {
+const error$4 = mergeDeepRight(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -1969,7 +1937,7 @@ const error$4 = mergeDeepRight$1(input$2, {
     }
   }
 });
-const warning$4 = mergeDeepRight$1(input$2, {
+const warning$4 = mergeDeepRight(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -1992,7 +1960,7 @@ const warning$4 = mergeDeepRight$1(input$2, {
     }
   }
 });
-const success$1 = mergeDeepRight$1(input$2, {
+const success$1 = mergeDeepRight(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -3671,7 +3639,7 @@ const StyledTabList = styled__default["default"].div.attrs(() => ({
 })).withConfig({
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
-})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;&::-webkit-scrollbar{width:0;height:0;}}"], _ref => {
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;& ::-webkit-scrollbar{width:0;height:0;}}"], _ref => {
   let {
     variant
   } = _ref;
@@ -4038,7 +4006,7 @@ const {
 const StyledCardHeader = styled__default["default"].div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
-})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$3.right, spacings$3.left, spacings$3.left, spacings$3.top, spacings$3.bottom);
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";> :not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$3.right, spacings$3.left, spacings$3.left, spacings$3.top, spacings$3.bottom);
 const CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader(_ref, ref) {
   let {
     children,
@@ -4812,7 +4780,6 @@ const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
   }; // Controller must set open={false} when pressing the close button
 
   return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, { ...props,
-    id: "side-sheet",
     children: [/*#__PURE__*/jsxRuntime.jsxs(Header$1, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
         variant: "h2",
@@ -5337,7 +5304,7 @@ const SearchInput = styled__default["default"](Input$4).withConfig({
     theme,
     disabled
   } = _ref2;
-  return styled.css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], theme.height, edsUtils.typographyTemplate(theme.typography), disabled && styled.css(["cursor:not-allowed;"]));
+  return styled.css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}&:-webkit-autofill{box-shadow:0 0 0px 1000px ", " inset;}&:autofill{box-shadow:0 0 0px 1000px ", " inset;}", ""], theme.height, edsUtils.typographyTemplate(theme.typography), theme.background, theme.background, disabled && styled.css(["cursor:not-allowed;"]));
 });
 const InsideButton = styled__default["default"](Button).withConfig({
   displayName: "Search__InsideButton",
@@ -5830,6 +5797,7 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     step = 1,
     disabled,
     ariaLabelledby,
+    'aria-labelledby': ariaLabelledbyNative,
     ...rest
   } = _ref10;
   const isRangeSlider = Array.isArray(value);
@@ -5853,8 +5821,7 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   const maxRange = react.useRef(null);
 
   const onValueChange = (event, valueArrIdx) => {
-    const target = event.target;
-    const changedValue = parseFloat(target.value);
+    const changedValue = parseFloat(event.target.value);
 
     if (isRangeSlider) {
       const newValue = sliderValue.slice();
@@ -5919,14 +5886,33 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     }
   };
 
-  const inputIdA = "".concat(ariaLabelledby, "-thumb-a");
-  const inputIdB = "".concat(ariaLabelledby, "-thumb-b");
-  const inputId = "".concat(ariaLabelledby, "-thumb");
+  let inputIdA = edsUtils.useId(null, 'inputA');
+  let inputIdB = edsUtils.useId(null, 'inputB');
+  let inputId = edsUtils.useId(null, 'thumb');
+
+  if (rest['id']) {
+    const overrideId = rest['id'];
+    inputIdA = "".concat(overrideId, "-thumb-a");
+    inputIdB = "".concat(overrideId, "-thumb-b");
+    inputId = "".concat(overrideId, "-thumb");
+  }
+
+  const getAriaLabelledby = () => {
+    if (ariaLabelledbyNative) return ariaLabelledbyNative;
+
+    if (ariaLabelledby) {
+      console.warn('Slider: The "ariaLabelledby" prop is deprecated and will be removed in a future version of EDS, please use the native "aria-labelledby" instead');
+      return ariaLabelledby;
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: isRangeSlider ? /*#__PURE__*/jsxRuntime.jsxs(RangeWrapper, { ...rest,
       ref: ref,
       role: "group",
-      "aria-labelledby": ariaLabelledby,
+      "aria-labelledby": getAriaLabelledby(),
       valA: sliderValue[0],
       valB: sliderValue[1],
       max: max,
@@ -5942,6 +5928,10 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
         value: sliderValue[0],
         max: max,
         min: min,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuenow": sliderValue[0],
+        "aria-valuetext": getFormattedText(sliderValue[0]).toString(),
         id: inputIdA,
         step: step,
         onChange: event => {
@@ -5964,6 +5954,10 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
         value: sliderValue[1],
         min: min,
         max: max,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuenow": sliderValue[1],
+        "aria-valuetext": getFormattedText(sliderValue[1]).toString(),
         id: inputIdB,
         step: step,
         ref: maxRange,
@@ -5991,13 +5985,17 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
         value: sliderValue[0],
         min: min,
         max: max,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuenow": sliderValue[0],
+        "aria-valuetext": getFormattedText(sliderValue[0]).toString(),
         step: step,
         id: inputId,
         onChange: event => {
           onValueChange(event);
         },
         disabled: disabled,
-        "aria-labelledby": ariaLabelledby,
+        "aria-labelledby": getAriaLabelledby(),
         onMouseUp: event => handleCommitedValue(event),
         onKeyUp: event => handleKeyUp(event)
       }), /*#__PURE__*/jsxRuntime.jsx(Output, {
@@ -6499,7 +6497,6 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
       ref: popoverRef,
       elevation: "overlay",
       style: styles.popper,
-      "data-testid": "popover",
       ...props,
       children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
         ref: setArrowRef,
@@ -7648,7 +7645,7 @@ const Content = styled__default["default"].div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
 })(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
-const MenuItem = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
+const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
   let {
     children,
     disabled,
@@ -7695,7 +7692,7 @@ const MenuItem = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function
       children: children
     })
   });
-}));
+});
 MenuItem.displayName = 'MenuItem';
 
 const Header = styled__default["default"].div.attrs(() => ({
@@ -8428,7 +8425,7 @@ const select = {
     }
   }
 };
-const multiSelect = mergeDeepRight$1(select, {
+const multiSelect = mergeDeepRight(select, {
   spacings: {
     top: '0',
     bottom: '0',
@@ -9001,7 +8998,8 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
         meta: meta,
         disabled: disabled
       }), /*#__PURE__*/jsxRuntime.jsxs(StyledInputWrapper, { ...getComboboxProps(),
-        children: [/*#__PURE__*/jsxRuntime.jsx(PaddedInput, { ...getInputProps(getDropdownProps({
+        children: [/*#__PURE__*/jsxRuntime.jsx(PaddedInput, { ...getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          getDropdownProps({
             preventKeyAction: isOpen,
             disabled: disabled
           })),

package/dist/esm/components/Accordion/Accordion.js

@@ -2,8 +2,8 @@ import { forwardRef, Children, cloneElement } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { accordion } from './Accordion.tokens.js';
 import { useId, useToken } from '@equinor/eds-utils';
-import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx } from 'react/jsx-runtime';
 
 const Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
   let {

package/dist/esm/components/Banner/Banner.js

@@ -2,10 +2,10 @@ import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { enabled } from './Banner.tokens.js';
-import { BannerIcon } from './BannerIcon.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
+import { BannerIcon } from './BannerIcon.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const StyledBanner = styled.div.withConfig({
   displayName: "Banner__StyledBanner",

package/dist/esm/components/Banner/BannerMessage.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
+import { jsx } from 'react/jsx-runtime';
 
 const StyledBannerMessage = styled(Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",

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

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { Typography } from '../Typography/Typography.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { Tooltip } from '../Tooltip/Tooltip.js';
-import { Typography } from '../Typography/Typography.js';
 
 const {
   states,

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

@@ -1,9 +1,9 @@
 import { forwardRef, useState, Children, Fragment } from 'react';
 import styled from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
+import { Typography } from '../Typography/Typography.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
 
 const {
   spacings,

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

@@ -3,8 +3,8 @@ import styled, { css, ThemeProvider } from 'styled-components';
 import { token } from './tokens/index.js';
 import { spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
 import { InnerFullWidth } from './InnerFullWidth.js';
-import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx } from 'react/jsx-runtime';
 
 const getVariant = (tokenSet, variant) => {
   switch (variant) {
@@ -40,7 +40,7 @@ const getToken = (variant, color) => {
 const Inner = styled.span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
-})(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
+})(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& > :is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
 const ButtonBase = styled.button.withConfig({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"