@equinor/eds-core-react 0.21.0 → 0.23.0-dev.20221003

package/dist/esm/components/EdsProvider/eds.context.js

@@ -2,16 +2,17 @@ import { useState, useEffect, useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {
+  /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
 const EdsContext = /*#__PURE__*/createContext(initalState);
 const EdsProvider = _ref => {
   let {
     children,
-    density = 'comfortable'
+    density
   } = _ref;
   const [state, setState] = useState({ ...initalState,
-    density
+    density: density || 'comfortable'
   });
 
   const setDensity = density => setState(prevState => ({ ...prevState,
@@ -24,7 +25,8 @@ const EdsProvider = _ref => {
     }
   }, [density, state.density]);
   const value = {
-    density: state.density
+    density: state.density,
+    setDensity
   };
   return /*#__PURE__*/jsx(EdsContext.Provider, {
     value: value,

package/dist/esm/components/Icon/Icon.js

@@ -7,7 +7,7 @@ const transform = _ref => {
   let {
     rotation
   } = _ref;
-  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
+  return rotation ? `transform: rotate(${rotation}deg)` : '';
 };
 
 const StyledSvg = styled.svg.attrs(_ref2 => {
@@ -19,8 +19,8 @@ const StyledSvg = styled.svg.attrs(_ref2 => {
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
-    height: "".concat(height, "px"),
-    width: "".concat(width, "px"),
+    height: `${height}px`,
+    width: `${width}px`,
     fill
   };
 }).withConfig({
@@ -36,7 +36,7 @@ const StyledPath = styled.path.attrs(_ref3 => {
     size: null,
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+    transform: size / height !== 1 ? `scale(${size / height})` : null
   };
 }).withConfig({
   displayName: "Icon__StyledPath",
@@ -85,7 +85,7 @@ const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
   } = findIcon(name, data, size);
 
   if (typeof icon === 'undefined') {
-    throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
+    throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
   }
 
   const height = size ? size : parseInt(icon.width);
@@ -94,7 +94,7 @@ const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
     height,
     width,
     fill: color,
-    viewBox: "0 0 ".concat(width, " ").concat(height),
+    viewBox: `0 0 ${width} ${height}`,
     rotation,
     name,
     'aria-hidden': true
@@ -108,7 +108,7 @@ const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
   let titleId = '';
 
   if (title) {
-    titleId = "".concat(icon.prefix, "-").concat(icon.name, "-").concat(count);
+    titleId = `${icon.prefix}-${icon.name}-${count}`;
     svgProps = { ...svgProps,
       title,
       role: 'img',

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 { useEds } from '../EdsProvider/eds.context.js';
 import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const StyledInput = styled.input.withConfig({
   displayName: "Input__StyledInput",

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

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

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

@@ -1,13 +1,13 @@
 import { forwardRef, useLayoutEffect, useMemo, useEffect } from 'react';
 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, useToken, mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
-import { useEds } from '../EdsProvider/eds.context.js';
 import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { jsx, Fragment } from 'react/jsx-runtime';
+import { Paper } from '../Paper/Paper.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const {
   border
@@ -15,12 +15,12 @@ const {
 const MenuPaper = styled(Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ""], bordersTemplate(border), _ref => {
+})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], bordersTemplate(border), _ref => {
   let {
     open
   } = _ref;
   return css({
-    visibility: open ? null : 'hidden'
+    display: open ? 'block' : 'none'
   });
 });
 const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
@@ -160,8 +160,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
             ref: popoverRef,
             style: { ...style,
               position: strategy,
-              top: y !== null && y !== void 0 ? y : 0,
-              left: x !== null && x !== void 0 ? x : 0
+              top: y || 0,
+              left: x || 0
             }
           }),
           children: /*#__PURE__*/jsx(MenuProvider, {

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

@@ -3,12 +3,12 @@ import styled from 'styled-components';
 import { useIsMounted } from '@equinor/eds-utils';
 import { Button } from '../Button/index.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';
 
 const icons = {
   chevron_left,
@@ -47,7 +47,7 @@ const Text = styled(Typography).withConfig({
 })(["white-space:nowrap;"]);
 
 function getAriaLabel(page, selected) {
-  return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
+  return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`;
 }
 
 const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
@@ -99,7 +99,7 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
     ...props,
     children: /*#__PURE__*/jsxs(OrderedList, {
       style: {
-        gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
+        gridTemplateColumns: `repeat(${columns}, 48px)`
       },
       children: [/*#__PURE__*/jsx(ListItem, {
         children: /*#__PURE__*/jsx(Button, {
@@ -117,7 +117,7 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
       jsx(ListItem, {
-        children: /*#__PURE__*/jsx(PaginationItem, { ...page,
+        children: /*#__PURE__*/jsx(PaginationItem, {
           "aria-label": getAriaLabel(page, activePage),
           "aria-current": activePage,
           page: page,
@@ -126,13 +126,13 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
             onPageChange(event, page);
           }
         })
-      }, "list-item ".concat(index)) : /*#__PURE__*/jsx(ListItem // eslint-disable-next-line react/no-array-index-key
+      }, `list-item ${index}`) : /*#__PURE__*/jsx(ListItem // eslint-disable-next-line react/no-array-index-key
       , {
         children: /*#__PURE__*/jsx(StyledIcon, {
           name: "more_horizontal",
           "aria-label": "Ellipsis of pages"
         })
-      }, "ellipsis-".concat(index))) : undefined, /*#__PURE__*/jsx(ListItem, {
+      }, `ellipsis-${index}`)) : undefined, /*#__PURE__*/jsx(ListItem, {
         children: /*#__PURE__*/jsx(Button, {
           variant: "ghost_icon",
           onClick: activePage < pages ? event => {
@@ -150,7 +150,12 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
 
   return withItemIndicator ? /*#__PURE__*/jsxs(FlexContainer, {
     children: [/*#__PURE__*/jsx(Text, {
-      children: currentItemFirst !== currentItemLast ? "".concat(currentItemFirst, "\n              ", ' - ', "\n              ").concat(currentItemLast, "\n              ", ' of ', "\n              ").concat(totalItems, "\n              ", ' items') : "".concat(currentItemFirst, " ", ' of ', " ").concat(totalItems, " ", ' items')
+      children: currentItemFirst !== currentItemLast ? `${currentItemFirst}
+              ${' - '}
+              ${currentItemLast}
+              ${' of '}
+              ${totalItems}
+              ${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`
     }), pagination]
   }) : pagination;
 });

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

@@ -1,11 +1,11 @@
 import { forwardRef, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { Paper } from '../Paper/Paper.js';
 import { typographyTemplate, bordersTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
-import { useEds } from '../EdsProvider/eds.context.js';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss } from '@floating-ui/react-dom-interactions';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Paper } from '../Paper/Paper.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const PopoverPaper = styled(Paper).withConfig({
   displayName: "Popover__PopoverPaper",
@@ -15,9 +15,9 @@ const PopoverPaper = styled(Paper).withConfig({
     theme,
     open
   } = _ref;
-  return css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:1400;overflow:auto;"], {
-    visibility: open ? null : 'hidden'
-  }, typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, bordersTemplate(theme.border));
+  return css(["", " ", " background:", ";", " z-index:1400;"], {
+    display: open ? 'block' : 'none'
+  }, typographyTemplate(theme.typography), theme.background, bordersTemplate(theme.border));
 });
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
@@ -35,7 +35,7 @@ const InnerWrapper = styled.div.withConfig({
   let {
     theme
   } = _ref3;
-  return css(["display:grid;grid-gap:", ";"], theme.spacings.bottom);
+  return css(["display:grid;grid-gap:", ";max-height:", ";width:max-content;max-width:", ";overflow:auto;"], theme.spacings.bottom, theme.maxHeight, theme.maxWidth);
 });
 const PopoverArrow = styled.svg.withConfig({
   displayName: "Popover__PopoverArrow",
@@ -123,8 +123,8 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
 
   if (arrowRef.current) {
     Object.assign(arrowRef.current.style, {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
       [staticSide]: '-6px',
@@ -151,8 +151,8 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
         ref: popoverRef,
         style: { ...style,
           position: strategy,
-          top: y !== null && y !== void 0 ? y : 0,
-          left: x !== null && x !== void 0 ? x : 0
+          top: y || 0,
+          left: x || 0
         }
       }),
       children: [/*#__PURE__*/jsx(ArrowWrapper, {

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

@@ -9,7 +9,7 @@ const StyledPopoverActions = styled.div.withConfig({
   let {
     theme
   } = _ref;
-  return css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+  return css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
 const PopoverActions = /*#__PURE__*/forwardRef(function PopoverActions(_ref2, ref) {
   let {

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

@@ -9,7 +9,7 @@ const ContentWrapper = styled.div.withConfig({
   let {
     theme
   } = _ref;
-  return css(["overflow:hidden;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+  return css(["padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
 const PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref2, ref) {
   let {

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

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

package/dist/esm/components/Progress/Circular/CircularProgress.js

@@ -62,7 +62,7 @@ const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2
 
   if (variant === 'determinate') {
     trackStyle.stroke = circumference.toFixed(3);
-    trackStyle.strokeDashoffset = "".concat(((100 - progress) / 100 * circumference).toFixed(3), "px");
+    trackStyle.strokeDashoffset = `${((100 - progress) / 100 * circumference).toFixed(3)}px`;
     props['aria-valuenow'] = progress;
 
     if (value !== undefined) {
@@ -87,7 +87,7 @@ const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2
   }, [progress, variant]);
 
   const getProgressFormatted = () => {
-    return "Loading ".concat(srProgress, "%");
+    return `Loading ${srProgress}%`;
   };
 
   return /*#__PURE__*/jsxs(Fragment, {

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

@@ -38,7 +38,7 @@ const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress(_ref, ref
       props['aria-valuemin'] = 0;
       props['aria-valuemax'] = 100;
       const transform = value - 100;
-      barStyle = "translateX(".concat(transform, "%)");
+      barStyle = `translateX(${transform}%)`;
     }
   }
 
@@ -60,7 +60,7 @@ const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress(_ref, ref
   }, [value, variant]);
 
   const getProgressFormatted = () => {
-    return "Loading ".concat(srProgress, "%");
+    return `Loading ${srProgress}%`;
   };
 
   return /*#__PURE__*/jsxs(Fragment, {

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 { useEds } from '../EdsProvider/eds.context.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 /* eslint camelcase: "off" */
 const Input = styled.input.attrs(_ref => {
@@ -121,7 +121,7 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
     return /*#__PURE__*/jsxs(Svg, {
       width: iconSize,
       height: iconSize,
-      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+      viewBox: `0 0 ${iconSize} ${iconSize}`,
       fill: fill,
       "aria-hidden": true,
       children: [/*#__PURE__*/jsx(StyledPath, {

package/dist/esm/components/Scrim/Scrim.js

@@ -1,18 +1,17 @@
 import { forwardRef, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
-import { mergeRefs, useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
+import { mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
+import { FloatingOverlay } from '@floating-ui/react-dom-interactions';
 import { jsx } from 'react/jsx-runtime';
 
 const {
-  height,
-  width,
   background
 } = scrim;
-const StyledScrim = styled.div.withConfig({
+const StyledScrim = styled(FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["width:", ";height:", ";background:", ";position:fixed;z-index:1300;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height, background);
+})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background);
 const ScrimContent = styled.div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
@@ -27,11 +26,6 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
   } = _ref;
   const scrimRef = useRef(null);
   const combinedScrimRef = useMemo(() => mergeRefs(scrimRef, ref), [scrimRef, ref]);
-  const props = { ...rest,
-    open,
-    isDismissable
-  };
-  useHideBodyScroll(open);
   useGlobalKeyPress('Escape', () => {
     if (isDismissable && onClose && open) {
       onClose();
@@ -51,9 +45,10 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
   }
 
   return /*#__PURE__*/jsx(StyledScrim, {
+    lockScroll: true,
     onClick: handleMouseClose,
     ref: combinedScrimRef,
-    ...props,
+    ...rest,
     children: /*#__PURE__*/jsx(ScrimContent, {
       children: children
     })

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

@@ -10,8 +10,6 @@ const {
   }
 } = tokens;
 const scrim = {
-  width: '100%',
-  height: '100%',
   background
 };
 

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

@@ -2,12 +2,12 @@ import { forwardRef, useRef, useState, useEffect, useMemo } 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/index.js';
 import { Icon } from '../Icon/index.js';
-import { Input } from '../Input/Input.js';
 import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken, mergeRefs, setReactInputValue } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Input } from '../Input/Input.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const Container = styled.span.withConfig({
   displayName: "Search__Container",

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

@@ -1,6 +1,5 @@
 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';
@@ -8,8 +7,9 @@ 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 { useEds } from '../../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEds } from '../../EdsProvider/eds.context.js';
+import { Label } from '../../Label/Label.js';
 
 const PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "MultiSelect__PaddedStyledListItem",
@@ -134,7 +134,7 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
       }
     }
   });
-  const placeholderText = items.length > 0 ? "".concat(selectedItems.length, "/").concat(items.length, " selected") : '';
+  const placeholderText = items.length > 0 ? `${selectedItems.length}/${items.length} selected` : '';
 
   const openSelect = () => {
     if (!isOpen && !(disabled || readOnly)) {
@@ -207,7 +207,7 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
           }), /*#__PURE__*/jsx("span", {
             children: item
           })]
-        }, "".concat(item)))
+        }, `${item}`))
       })]
     })
   });

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 { useEds } from '../../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEds } from '../../EdsProvider/eds.context.js';
+import { Label } from '../../Label/Label.js';
 
 const Container = styled.div.withConfig({
   displayName: "NativeSelect__Container",

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 { useEds } from '../../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEds } from '../../EdsProvider/eds.context.js';
+import { Label } from '../../Label/Label.js';
 
 const PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "SingleSelect__PaddedStyledListItem",
@@ -144,7 +144,7 @@ const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect(_ref2, ref) {
             disabled: disabled
           }),
           children: item
-        }, "".concat(item)))
+        }, `${item}`))
       })]
     })
   });

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/index.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';
 
 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, typographyTemplate } from '@equinor/eds-utils';
-import { Typography } from '../Typography/Typography.js';
 import { Button } from '../Button/index.js';
 import { Icon } from '../Icon/index.js';
 import { comfortable, variants } from './SideSheet.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
 
 const {
   background,

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

@@ -16,7 +16,7 @@ const {
 } = slider;
 const fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
 const fakeTrackBgHover = css({
-  backgroundImage: "url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='".concat(track.states.hover.background, "' width='100%' height='4' rx='2' /></svg>\")")
+  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
 });
 const trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 const wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
@@ -193,9 +193,9 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
 
   if (rest['id']) {
     const overrideId = rest['id'];
-    inputIdA = "".concat(overrideId, "-thumb-a");
-    inputIdB = "".concat(overrideId, "-thumb-b");
-    inputId = "".concat(overrideId, "-thumb");
+    inputIdA = `${overrideId}-thumb-a`;
+    inputIdB = `${overrideId}-thumb-b`;
+    inputId = `${overrideId}-thumb`;
   }
 
   const getAriaLabelledby = useCallback(() => {

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 { useEds } from '../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const StyledLabel = styled.label.withConfig({
   displayName: "Switch__StyledLabel",

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

@@ -72,8 +72,8 @@ const comfortable = {
     height: clickbounds.default__base,
     width: clickbounds.default__base,
     offset: {
-      top: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2, "px"),
-      left: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2, "px")
+      top: `${(parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2}px`,
+      left: `${(parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2}px`
     }
   },
   entities: {
@@ -122,8 +122,8 @@ const comfortable = {
         height: clickbounds.compact__standard,
         width: clickbounds.compact__standard,
         offset: {
-          top: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2, "px"),
-          left: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2, "px")
+          top: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2}px`,
+          left: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2}px`
         }
       },
       entities: {

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

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