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

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

@@ -9,7 +9,7 @@ const FullWidthCenterContent = styled.span.withConfig({
 const FullWidthInner = styled.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__*/forwardRef(function InnerFullWidth(_ref, ref) {
   let {
     children

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.27.2/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {

package/dist/esm/components/Card/CardActions.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { Typography } from '../Typography/Typography.js';
 import { primary } from './Card.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
 
 const {
   spacings

package/dist/esm/components/Card/CardHeader.js

@@ -9,7 +9,7 @@ const {
 const StyledCardHeader = styled.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.right, spacings.left, spacings.left, spacings.top, spacings.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.right, spacings.left, spacings.left, spacings.top, spacings.bottom);
 const CardHeader = /*#__PURE__*/forwardRef(function CardHeader(_ref, ref) {
   let {
     children,

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

@@ -3,8 +3,8 @@ import styled, { ThemeProvider } from 'styled-components';
 import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
 import { checkbox } from './Checkbox.tokens.js';
 import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 /* eslint camelcase: "off" */
 const StyledPath = styled.path.attrs(_ref => {

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

@@ -2,11 +2,11 @@ import { forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
-import { dialog } from './Dialog.tokens.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { Scrim } from '../Scrim/Scrim.js';
+import { dialog } from './Dialog.tokens.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 const StyledDialog = styled(Paper).attrs({
   tabIndex: 0,

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

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { Divider } from '../Divider/Divider.js';
 import { typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.js';
 
 const StyledDialogContent = styled.div.withConfig({
   displayName: "DialogContent__StyledDialogContent",

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const StyledDialogHeader = styled.div.withConfig({
   displayName: "DialogHeader__StyledDialogHeader",

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

@@ -2,8 +2,8 @@ import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { inputToken } from './Input.tokens.js';
 import { outlineTemplate, typographyTemplate, spacingsTemplate, 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 StyledInput = styled.input.withConfig({
   displayName: "Input__StyledInput",

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

@@ -1,5 +1,5 @@
 import { tokens as tokens$1 } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

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

@@ -1,4 +1,4 @@
-import { useState, useContext, createContext } from 'react';
+import { useContext, createContext, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {

package/dist/esm/components/Menu/Menu.js

@@ -2,12 +2,12 @@ import { forwardRef, useState, useEffect } from 'react';
 import * as ReactDom from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { MenuProvider, useMenu } from './Menu.context.js';
+import { Paper } from '../Paper/Paper.js';
 import { MenuList } from './MenuList.js';
 import { bordersTemplate, useIsMounted, useToken, usePopper, useOutsideClick, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 const {
   border

package/dist/esm/components/Menu/MenuItem.js

@@ -1,4 +1,4 @@
-import { memo, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { menu } from './Menu.tokens.js';
 import { typographyTemplate, spacingsTemplate, outlineTemplate, useCombinedRefs } from '@equinor/eds-utils';
@@ -50,7 +50,7 @@ const Content = styled.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__*/memo( /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
+const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
   let {
     children,
     disabled,
@@ -97,7 +97,7 @@ const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem(_r
       children: children
     })
   });
-}));
+});
 MenuItem.displayName = 'MenuItem';
 
 export { MenuItem };

package/dist/esm/components/Menu/MenuSection.js

@@ -2,9 +2,9 @@ import { memo } from 'react';
 import styled from 'styled-components';
 import { menu } from './Menu.tokens.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 import { Typography } from '../Typography/Typography.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 const Header = styled.div.attrs(() => ({
   tabIndex: 0

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

@@ -1,14 +1,14 @@
 import { forwardRef, useState, useLayoutEffect } from 'react';
 import styled from 'styled-components';
 import { useIsMounted } from '@equinor/eds-utils';
+import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/index.js';
+import { Typography } from '../Typography/Typography.js';
 import { PaginationItem } from './PaginationItem.js';
 import { pagination } from './Pagination.tokens.js';
 import { chevron_left, chevron_right, more_horizontal } from '@equinor/eds-icons';
 import { PaginationControl } from './paginationControl.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
-import { Button } from '../Button/Button.js';
 
 const icons = {
   chevron_left,

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
+import { Button } from '../Button/Button.js';
 import { pagination } from './Pagination.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { Button } from '../Button/Button.js';
 
 const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem(_ref, ref) {
   let {

package/dist/esm/components/Popover/Popover.js

@@ -1,10 +1,10 @@
 import { forwardRef, useState, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { Paper } from '../Paper/Paper.js';
 import { typographyTemplate, bordersTemplate, useCombinedRefs, useOutsideClick, useGlobalKeyPress, usePopper, useToken } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const PopoverPaper = styled(Paper).withConfig({
   displayName: "Popover__PopoverPaper",
@@ -98,7 +98,6 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
       ref: popoverRef,
       elevation: "overlay",
       style: styles.popper,
-      "data-testid": "popover",
       ...props,
       children: [/*#__PURE__*/jsx(ArrowWrapper, {
         ref: setArrowRef,

package/dist/esm/components/Popover/PopoverHeader.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const StyledPopoverHeader = styled.div.withConfig({
   displayName: "PopoverHeader__StyledPopoverHeader",

package/dist/esm/components/Radio/Radio.js

@@ -3,8 +3,8 @@ import styled, { ThemeProvider } from 'styled-components';
 import { radio_button_selected, radio_button_unselected } from '@equinor/eds-icons';
 import { comfortable } from './Radio.tokens.js';
 import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 /* eslint camelcase: "off" */
 const Input = styled.input.attrs(_ref => {

package/dist/esm/components/Search/Search.js

@@ -2,12 +2,12 @@ import { forwardRef, useRef, useState, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { search as search$1, close } from '@equinor/eds-icons';
 import { search } from './Search.tokens.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/index.js';
+import { Input } from '../Input/Input.js';
 import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken, useCombinedRefs, setReactInputValue } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Input } from '../Input/Input.js';
-import { Button } from '../Button/Button.js';
-import { useEds } from '../EdsProvider/eds.context.js';
 
 const Container = styled.span.withConfig({
   displayName: "Search__Container",
@@ -40,7 +40,7 @@ const SearchInput = styled(Input).withConfig({
     theme,
     disabled
   } = _ref2;
-  return 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, typographyTemplate(theme.typography), disabled && css(["cursor:not-allowed;"]));
+  return 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, typographyTemplate(theme.typography), theme.background, theme.background, disabled && css(["cursor:not-allowed;"]));
 });
 const InsideButton = styled(Button).withConfig({
   displayName: "Search__InsideButton",

package/dist/esm/components/Select/MultiSelect/MultiSelect.js

@@ -1,5 +1,6 @@
 import { forwardRef, useState } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
+import { Label } from '../../Label/Label.js';
 import { Icon } from '../../Icon/index.js';
 import { CheckboxInput } from '../../Checkbox/Input.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
@@ -7,9 +8,8 @@ import styled, { ThemeProvider } from 'styled-components';
 import { multiSelect } from '../Select.tokens.js';
 import { StyledListItem, Container, StyledInputWrapper, PaddedInput, StyledButton, StyledList } from '../commonStyles.js';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { Label } from '../../Label/Label.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "MultiSelect__PaddedStyledListItem",
@@ -155,7 +155,8 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
         meta: meta,
         disabled: disabled
       }), /*#__PURE__*/jsxs(StyledInputWrapper, { ...getComboboxProps(),
-        children: [/*#__PURE__*/jsx(PaddedInput, { ...getInputProps(getDropdownProps({
+        children: [/*#__PURE__*/jsx(PaddedInput, { ...getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          getDropdownProps({
             preventKeyAction: isOpen,
             disabled: disabled
           })),

package/dist/esm/components/Select/NativeSelect/NativeSelect.js

@@ -1,10 +1,10 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { Label } from '../../Label/Label.js';
 import { nativeselect } from './NativeSelect.tokens.js';
 import { typographyTemplate, spacingsTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { Label } from '../../Label/Label.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const Container = styled.div.withConfig({
   displayName: "NativeSelect__Container",

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   typography,

package/dist/esm/components/Select/SingleSelect/SingleSelect.js

@@ -1,14 +1,14 @@
 import { forwardRef, useState, useEffect } from 'react';
 import { useCombobox } from 'downshift';
 import styled, { ThemeProvider } from 'styled-components';
+import { Label } from '../../Label/Label.js';
 import { Icon } from '../../Icon/index.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { select } from '../Select.tokens.js';
 import { StyledListItem, Container, StyledInputWrapper, PaddedInput, StyledButton, StyledList } from '../commonStyles.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { Label } from '../../Label/Label.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "SingleSelect__PaddedStyledListItem",

package/dist/esm/components/Select/commonStyles.js

@@ -1,9 +1,9 @@
+import { Input } from '../Input/Input.js';
 import { List } from '../List/index.js';
+import { Button } from '../Button/Button.js';
 import styled, { css } from 'styled-components';
 import { select } from './Select.tokens.js';
 import { bordersTemplate, typographyTemplate } from '@equinor/eds-utils';
-import { Input } from '../Input/Input.js';
-import { Button } from '../Button/Button.js';
 
 const {
   entities: {

package/dist/esm/components/SideSheet/SideSheet.js

@@ -2,11 +2,11 @@ import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { clear } from '@equinor/eds-icons';
 import { bordersTemplate, spacingsTemplate } from '@equinor/eds-utils';
+import { Typography } from '../Typography/Typography.js';
+import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/index.js';
 import { comfortable, variants } from './SideSheet.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Button } from '../Button/Button.js';
-import { Typography } from '../Typography/Typography.js';
 
 const {
   background,
@@ -41,7 +41,6 @@ const SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
   }; // Controller must set open={false} when pressing the close button
 
   return open && /*#__PURE__*/jsxs(StyledSideSheet, { ...props,
-    id: "side-sheet",
     children: [/*#__PURE__*/jsxs(Header, {
       children: [/*#__PURE__*/jsx(Typography, {
         variant: "h2",

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

@@ -4,7 +4,7 @@ import { slider } from './Slider.tokens.js';
 import { MinMax } from './MinMax.js';
 import { Output } from './Output.js';
 import { SliderInput } from './SliderInput.js';
-import { bordersTemplate } from '@equinor/eds-utils';
+import { bordersTemplate, useId } from '@equinor/eds-utils';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 const {
@@ -98,6 +98,7 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     step = 1,
     disabled,
     ariaLabelledby,
+    'aria-labelledby': ariaLabelledbyNative,
     ...rest
   } = _ref10;
   const isRangeSlider = Array.isArray(value);
@@ -121,8 +122,7 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
   const maxRange = 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();
@@ -187,14 +187,33 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     }
   };
 
-  const inputIdA = "".concat(ariaLabelledby, "-thumb-a");
-  const inputIdB = "".concat(ariaLabelledby, "-thumb-b");
-  const inputId = "".concat(ariaLabelledby, "-thumb");
+  let inputIdA = useId(null, 'inputA');
+  let inputIdB = useId(null, 'inputB');
+  let inputId = 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__*/jsx(Fragment, {
     children: isRangeSlider ? /*#__PURE__*/jsxs(RangeWrapper, { ...rest,
       ref: ref,
       role: "group",
-      "aria-labelledby": ariaLabelledby,
+      "aria-labelledby": getAriaLabelledby(),
       valA: sliderValue[0],
       valB: sliderValue[1],
       max: max,
@@ -210,6 +229,10 @@ const Slider = /*#__PURE__*/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 => {
@@ -232,6 +255,10 @@ const Slider = /*#__PURE__*/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,
@@ -259,13 +286,17 @@ const Slider = /*#__PURE__*/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__*/jsx(Output, {

package/dist/esm/components/Snackbar/Snackbar.js

@@ -3,9 +3,9 @@ import * as ReactDom from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { snackbar } from './Snackbar.tokens.js';
 import { spacingsTemplate, bordersTemplate, typographyTemplate, useToken } from '@equinor/eds-utils';
-import { jsx } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx } from 'react/jsx-runtime';
 
 const StyledSnackbar = styled(Paper).withConfig({
   displayName: "Snackbar__StyledSnackbar",

package/dist/esm/components/Switch/Switch.js

@@ -4,8 +4,8 @@ import { SwitchSmall } from './SwitchSmall.js';
 import { SwitchDefault } from './SwitchDefault.js';
 import { comfortable } from './Switch.tokens.js';
 import { typographyTemplate, useToken } from '@equinor/eds-utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const StyledLabel = styled.label.withConfig({
   displayName: "Switch__StyledLabel",

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

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
-import { InnerContext } from './Inner.context.js';
-import { jsx } from 'react/jsx-runtime';
 import { TableDataCell } from './DataCell/DataCell.js';
 import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
+import { InnerContext } from './Inner.context.js';
+import { jsx } from 'react/jsx-runtime';
 
 const Cell = /*#__PURE__*/forwardRef(function Cell(_ref, ref) {
   let { ...rest

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

@@ -2,8 +2,8 @@ import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { applyVariant, tableCell } from './DataCell.tokens.js';
-import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
+import { jsx } from 'react/jsx-runtime';
 
 const StyledTableCell = styled.td.withConfig({
   displayName: "DataCell__StyledTableCell",

package/dist/esm/components/Table/DataCell/DataCell.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   typography: {

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

@@ -2,8 +2,8 @@ import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { token } from './HeaderCell.tokens.js';
-import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
+import { jsx } from 'react/jsx-runtime';
 
 const StyledTableCell = styled.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",

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

@@ -1,9 +1,9 @@
 import { Table as Table$1 } from './Table.js';
 import { Body } from './Body.js';
 import { Cell } from './Cell.js';
-import { Caption } from './Caption.js';
 import { Head } from './Head/Head.js';
 import { Row } from './Row/Row.js';
+import { Caption } from './Caption.js';
 
 const Table = Table$1;
 Table.Body = Body;

package/dist/esm/components/TableOfContents/TableOfContents.js

@@ -1,11 +1,11 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { List } from '../List/index.js';
+import { Typography } from '../Typography/Typography.js';
 import { typographyTemplate, useToken } from '@equinor/eds-utils';
 import { tableOfContents } from './TableOfContents.tokens.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const StyledTableOfContents = styled.nav.withConfig({
   displayName: "TableOfContents__StyledTableOfContents",

package/dist/esm/components/Tabs/TabList.js

@@ -13,7 +13,7 @@ const StyledTabList = styled.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;

package/dist/esm/components/Tabs/Tabs.js

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