@equinor/eds-core-react 0.19.0 → 0.20.0

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"

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

@@ -10,7 +10,7 @@ const {
 const StyledCard = styled.div.withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], _ref => {
+})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;cursor:", ";", ";"], _ref => {
   let {
     background
   } = _ref;

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
@@ -10,7 +10,7 @@ const {
 const StyledCardActions = styled.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
   let {
     justifyContent
   } = _ref;

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",
@@ -59,12 +59,12 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
   const [arrowRef, setArrowRef] = useState(null);
   const popoverRef = useCombinedRefs(ref, setPopperEl);
   useOutsideClick(popperEl, e => {
-    if (open && onClose !== null && anchorEl && !anchorEl.contains(e.target)) {
+    if (open && onClose && anchorEl && !anchorEl.contains(e.target)) {
       onClose();
     }
   });
   useGlobalKeyPress('Escape', () => {
-    if (onClose !== null && open) {
+    if (onClose && open) {
       onClose();
     }
   });
@@ -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/Progress/Circular/CircularProgress.js

@@ -1,7 +1,7 @@
-import { forwardRef } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import * as CircularProgress_tokens from './CircularProgress.tokens.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 const indeterminate = keyframes(["100%{transform:rotate(360deg);}"]);
 const Svg = styled.svg.withConfig({
@@ -13,13 +13,17 @@ const Svg = styled.svg.withConfig({
   } = _ref;
   return variant === 'indeterminate' ? css(["animation:", " 1.4s linear infinite;"], indeterminate) : css(["transform:rotate(-90deg);"]);
 });
+const SrOnlyOutput = styled.output.withConfig({
+  displayName: "CircularProgress__SrOnlyOutput",
+  componentId: "sc-hib054-1"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
 const TrackCircle = styled.circle.withConfig({
   displayName: "CircularProgress__TrackCircle",
-  componentId: "sc-hib054-1"
+  componentId: "sc-hib054-2"
 })([""]);
 const ProgressCircle = styled.circle.withConfig({
   displayName: "CircularProgress__ProgressCircle",
-  componentId: "sc-hib054-2"
+  componentId: "sc-hib054-3"
 })([""]);
 
 const getToken = color => {
@@ -53,6 +57,7 @@ const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2
     variant
   };
   const token = getToken(color);
+  const [srProgress, setSrProgress] = useState(0);
   const circumference = 2 * Math.PI * ((48 - thickness) / 2);
 
   if (variant === 'determinate') {
@@ -67,30 +72,52 @@ const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2
     }
   }
 
-  return /*#__PURE__*/jsxs(Svg, { ...props,
-    viewBox: "24 24 48 48",
-    role: "progressbar",
-    height: size,
-    width: size,
-    preserveAspectRatio: "xMidYMid meet",
-    children: [/*#__PURE__*/jsx(TrackCircle, {
-      style: trackStyle,
-      cx: 48,
-      cy: 48,
-      r: (48 - thickness) / 2,
-      fill: "none",
-      strokeWidth: thickness,
-      stroke: token.background
-    }), /*#__PURE__*/jsx(ProgressCircle, {
-      style: trackStyle,
-      cx: 48,
-      cy: 48,
-      r: (48 - thickness) / 2,
-      fill: "none",
-      strokeLinecap: "round",
-      strokeWidth: thickness,
-      strokeDasharray: variant === 'determinate' ? circumference : 48,
-      stroke: token.entities.progress.background
+  useEffect(() => {
+    if (variant === 'indeterminate') return;
+
+    if (progress >= 25 && progress < 50) {
+      setSrProgress(25);
+    } else if (progress >= 50 && progress < 75) {
+      setSrProgress(50);
+    } else if (progress >= 75 && progress < 100) {
+      setSrProgress(75);
+    } else if (progress === 100) {
+      setSrProgress(100);
+    }
+  }, [progress, variant]);
+
+  const getProgressFormatted = () => {
+    return "Loading ".concat(srProgress, "%");
+  };
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Svg, { ...props,
+      viewBox: "24 24 48 48",
+      role: "progressbar",
+      height: size,
+      width: size,
+      preserveAspectRatio: "xMidYMid meet",
+      children: [/*#__PURE__*/jsx(TrackCircle, {
+        style: trackStyle,
+        cx: 48,
+        cy: 48,
+        r: (48 - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness,
+        stroke: token.background
+      }), /*#__PURE__*/jsx(ProgressCircle, {
+        style: trackStyle,
+        cx: 48,
+        cy: 48,
+        r: (48 - thickness) / 2,
+        fill: "none",
+        strokeLinecap: "round",
+        strokeWidth: thickness,
+        strokeDasharray: variant === 'determinate' ? circumference : 48,
+        stroke: token.entities.progress.background
+      })]
+    }), variant === 'determinate' && /*#__PURE__*/jsx(SrOnlyOutput, {
+      children: getProgressFormatted()
     })]
   });
 }); // CircularProgress.displayName = 'eds-circular-progress'

package/dist/esm/components/Progress/Linear/LinearProgress.js

@@ -1,7 +1,7 @@
-import { forwardRef } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { primary } from './LinearProgress.tokens.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 const indeterminate = keyframes(["0%{left:-200%;right:100%;}60%{left:107%;right:-8%;}100%{left:107%;right:-8%;}"]);
 const Track = styled.div.withConfig({
@@ -16,6 +16,10 @@ const IndeterminateProgressBar = styled.div.withConfig({
   displayName: "LinearProgress__IndeterminateProgressBar",
   componentId: "sc-5orxpi-2"
 })(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary.entities.progress.background, indeterminate);
+const SrOnlyOutput = styled.output.withConfig({
+  displayName: "LinearProgress__SrOnlyOutput",
+  componentId: "sc-5orxpi-3"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
 const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress(_ref, ref) {
   let {
     variant = 'indeterminate',
@@ -25,6 +29,7 @@ const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress(_ref, ref
   const props = { ...rest,
     ref
   };
+  const [srProgress, setSrProgress] = useState(0);
   let barStyle;
 
   if (variant === 'determinate') {
@@ -40,11 +45,33 @@ const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress(_ref, ref
   const transformStyle = {
     transform: barStyle
   };
-  return /*#__PURE__*/jsx(Track, { ...props,
-    role: "progressbar",
-    children: variant === 'indeterminate' ? /*#__PURE__*/jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsx(ProgressBar, {
-      style: transformStyle
-    })
+  useEffect(() => {
+    if (variant === 'indeterminate') return;
+
+    if (value >= 25 && value < 50) {
+      setSrProgress(25);
+    } else if (value >= 50 && value < 75) {
+      setSrProgress(50);
+    } else if (value >= 75 && value < 100) {
+      setSrProgress(75);
+    } else if (value === 100) {
+      setSrProgress(100);
+    }
+  }, [value, variant]);
+
+  const getProgressFormatted = () => {
+    return "Loading ".concat(srProgress, "%");
+  };
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Track, { ...props,
+      role: "progressbar",
+      children: variant === 'indeterminate' ? /*#__PURE__*/jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsx(ProgressBar, {
+        style: transformStyle
+      })
+    }), variant === 'determinate' && /*#__PURE__*/jsx(SrOnlyOutput, {
+      children: getProgressFormatted()
+    })]
   });
 }); // LinearProgress.displayName = 'eds-linear-progress'
 

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",
@@ -20,6 +20,8 @@ const PaddedStyledListItem = styled(StyledListItem).withConfig({
   } = _ref;
   return spacingsTemplate(theme.spacings);
 });
+
+/** @deprecated Use `<Autocomplete multiple />` instead. */
 const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
   let {
     items = [],
@@ -155,7 +157,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",
@@ -19,6 +19,8 @@ const PaddedStyledListItem = styled(StyledListItem).withConfig({
   } = _ref;
   return spacingsTemplate(theme.spacings);
 });
+/** @deprecated Use `<Autocomplete />` instead */
+
 const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect(_ref2, ref) {
   let {
     items = [],

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: {