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

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 { useEds } from '../EdsProvider/eds.context.js';
 import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
   let {

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

@@ -136,7 +136,7 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5,
     size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  }, "".concat(id, "-icon"));
+  }, `${id}-icon`);
 
   const headerChildren = Children.map(children, child => {
     if (typeof child === 'string') {

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

@@ -19,8 +19,8 @@ const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref)
   };
 
   const Children$1 = Children.map(children, (child, childIndex) => {
-    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
-    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
+    const headerId = `${accordionId}-header-${index + 1}`;
+    const panelId = `${accordionId}-panel-${index + 1}`;
     return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
       isExpanded: expanded,
       toggleExpanded,

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -3,16 +3,16 @@ import { useMultipleSelection, useCombobox } from 'downshift';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { Button } from '../Button/index.js';
 import { List } from '../List/index.js';
-import { useEds } from '../EdsProvider/eds.context.js';
-import { Label } from '../Label/Label.js';
 import { Icon } from '../Icon/index.js';
-import { Input } from '../Input/Input.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
 import { bordersTemplate, useToken } from '@equinor/eds-utils';
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Input } from '../Input/Input.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Label } from '../Label/Label.js';
 
 const Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",
@@ -332,7 +332,7 @@ function AutocompleteInner(props, ref) {
   }
 
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : "".concat(selectedItems.length, "/").concat(options.length - disabledItems.length, " selected");
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${options.length - disabledItems.length} selected`;
     comboBoxProps = { ...comboBoxProps,
       selectedItem: null,
       stateReducer: (state, actionAndChanges) => {
@@ -429,10 +429,10 @@ function AutocompleteInner(props, ref) {
           availableHeight,
           elements
         } = _ref10;
-        const anchorWidth = "".concat(rects.reference.width, "px");
+        const anchorWidth = `${rects.reference.width}px`;
         Object.assign(elements.floating.style, {
-          width: "".concat(autoWidth ? anchorWidth : 'auto'),
-          maxHeight: "".concat(availableHeight, "px")
+          width: `${autoWidth ? anchorWidth : 'auto'}`,
+          maxHeight: `${availableHeight}px`
         });
       },
 

package/dist/esm/components/Autocomplete/Option.js

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { List } from '../List/index.js';
-import { Checkbox } from '../Checkbox/Checkbox.js';
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../Checkbox/Checkbox.js';
 
 const StyledListItem = styled(List.Item).withConfig({
   displayName: "Option__StyledListItem",

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

@@ -1,12 +1,12 @@
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
-import { Paper } from '../Paper/Paper.js';
 import { enabled } from './Banner.tokens.js';
-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';
+import { Divider } from '../Divider/Divider.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Paper } from '../Paper/Paper.js';
 
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",

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

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

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

@@ -1,9 +1,9 @@
 import { forwardRef, useMemo } 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,
@@ -87,7 +87,7 @@ const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
         children: "/"
       })
     })]
-  }, "breadcrumb-".concat(index)));
+  }, `breadcrumb-${index}`));
   return /*#__PURE__*/jsx("nav", { ...props,
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsx(OrderedList, {

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 { useEds } from '../EdsProvider/eds.context.js';
 import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const getVariant = (tokenSet, variant) => {
   switch (variant) {

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

@@ -1,7 +1,7 @@
 import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { Button } from '../Button.js';
-import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 import { jsx } from 'react/jsx-runtime';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 
 const ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
   let {

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

@@ -47,29 +47,29 @@ const {
 } = tokens;
 const button = {
   background: 'transparent',
-  height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
+  height: `var(--eds_button__height, ${buttonHeight})`,
   typography: { ...buttonTypography,
     textAlign: 'center',
-    fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
+    fontSize: `var(--eds_button__font_size, ${buttonTypography.fontSize})`
   },
   border: {
     type: 'border',
-    width: "var(--eds_button__border_width, 1px)",
+    width: `var(--eds_button__border_width, 1px)`,
     color: 'transparent',
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`,
     style: 'solid'
   },
   spacings: {
     top: 'var(--eds_button__padding_y, 0)',
     bottom: 'var(--eds_button__padding_y, 0)',
-    left: "var(--eds_button__padding_x, ".concat(medium, ")"),
-    right: "var(--eds_button__padding_x, ".concat(medium, ")")
+    left: `var(--eds_button__padding_x, ${medium})`,
+    right: `var(--eds_button__padding_x, ${medium})`
   },
   clickbound: {
     height: clicboundHeight,
     width: '100%',
     offset: {
-      top: "".concat((parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1, "px"),
+      top: `${(parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1}px`,
       left: '0'
     }
   },
@@ -85,7 +85,7 @@ const button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
+        radius: `var(--eds_button__radius, ${buttonBorderRadius})`,
         style: 'solid'
       }
     },
@@ -114,7 +114,7 @@ const button = {
   },
   modes: {
     compact: {
-      height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
+      height: `var(--eds_button__height_compact, ${compactButtonHeight})`,
       spacings: {
         top: 'var(--eds_button__padding_y_compact, 0)',
         bottom: 'var(--eds_button__padding_y_compact, 0)'
@@ -123,7 +123,7 @@ const button = {
         height: compactClickboundHeight,
         width: '100%',
         offset: {
-          top: "".concat((parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
+          top: `${(parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1}px`,
           left: '0'
         }
       }

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

@@ -46,7 +46,7 @@ const primary = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
   },
   states: {
     hover: {

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   clickbounds: {
@@ -24,7 +24,7 @@ const contained_icon = {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+      left: `${(parseInt(clicboundHeight) - parseInt('40px')) / 2}px`
     }
   },
   states: {
@@ -43,7 +43,7 @@ const contained_icon = {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.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/icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {
@@ -61,7 +61,7 @@ const primary = mergeDeepRight(button, {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2, "px")
+      left: `${(parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2}px`
     }
   },
   states: {
@@ -80,7 +80,7 @@ const primary = mergeDeepRight(button, {
     },
     focus: {
       outline: {
-        offset: "-".concat(parseInt(focusOutlineWidth), "px")
+        offset: `-${parseInt(focusOutlineWidth)}px`
       }
     }
   },
@@ -92,7 +92,7 @@ const primary = mergeDeepRight(button, {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {
@@ -49,7 +49,7 @@ const primary = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
   },
   states: {
     hover: {

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

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { Paper } from '../Paper/Paper.js';
 import * as Card_tokens from './Card.tokens.js';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
+import { Paper } from '../Paper/Paper.js';
 
 const {
   primary

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/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 { useEds } from '../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 /* eslint camelcase: "off" */
 const StyledPath = styled.path.attrs(_ref => {
@@ -119,7 +119,7 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref
       }), indeterminate ? /*#__PURE__*/jsx(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, {
@@ -129,7 +129,7 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref
       }) : /*#__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/Dialog/Dialog.js

@@ -1,12 +1,12 @@
 import { forwardRef, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { typographyTemplate, bordersTemplate, useToken, mergeRefs } from '@equinor/eds-utils';
-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 { useFloating, FloatingPortal, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import { jsx } from 'react/jsx-runtime';
+import { Scrim } from '../Scrim/Scrim.js';
+import { Paper } from '../Paper/Paper.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 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 { Divider } from '../Divider/Divider.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
 
 const StyledDialogHeader = styled.div.withConfig({
   displayName: "DialogHeader__StyledDialogHeader",

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

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",
@@ -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',

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",