@equinor/eds-core-react 0.31.0 → 0.32.0-dev07072023

package/dist/esm/components/Dialog/Dialog.mjs

@@ -0,0 +1,88 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef, useRef, useMemo, useEffect } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { typographyTemplate, bordersTemplate, useToken, mergeRefs, useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
+import { dialog } from './Dialog.tokens.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Paper } from '../Paper/Paper.mjs';
+import { useEds } from '../EdsProvider/eds.context.mjs';
+
+var _excluded = ["children", "open", "onClose", "isDismissable", "dialogRef"];
+var StyledDialog = styled(Paper).attrs({
+  'aria-labelledby': 'eds-dialog-title',
+  'aria-describedby': 'eds-dialog-customcontent'
+}).withConfig({
+  displayName: "Dialog__StyledDialog",
+  componentId: "sc-1mewo3f-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", ";", ";grid-gap:", ";overflow:hidden;"], theme.width, theme.background, typographyTemplate(theme.typography), bordersTemplate(theme.border), theme.spacings.bottom);
+});
+var StyledNativeDialog = styled.dialog.withConfig({
+  displayName: "Dialog__StyledNativeDialog",
+  componentId: "sc-1mewo3f-1"
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return css(["padding:0;border:0;overflow:visible;overscroll-behavior:contain;", ";&::backdrop{background-color:", ";}"], bordersTemplate(theme.border), theme.entities.scrim.background);
+});
+var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref3, ref) {
+  var children = _ref3.children,
+    open = _ref3.open,
+    onClose = _ref3.onClose,
+    _ref3$isDismissable = _ref3.isDismissable,
+    isDismissable = _ref3$isDismissable === void 0 ? false : _ref3$isDismissable,
+    dialogRef = _ref3.dialogRef,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  var _useEds = useEds(),
+    density = _useEds.density;
+  var localRef = useRef(null);
+  var token = useToken({
+    density: density
+  }, dialog);
+  var combinedDialogRef = useMemo(function () {
+    return mergeRefs(localRef, dialogRef);
+  }, [localRef, dialogRef]);
+  useEffect(function () {
+    var _localRef$current;
+    if (open && !(localRef !== null && localRef !== void 0 && (_localRef$current = localRef.current) !== null && _localRef$current !== void 0 && _localRef$current.hasAttribute('open'))) {
+      var _localRef$current2;
+      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.showModal();
+    } else {
+      var _localRef$current3;
+      localRef === null || localRef === void 0 ? void 0 : (_localRef$current3 = localRef.current) === null || _localRef$current3 === void 0 ? void 0 : _localRef$current3.close();
+    }
+  }, [open]);
+
+  //This might become redundant in the future, see https://github.com/whatwg/html/issues/7732
+  useHideBodyScroll(open);
+  var handleDismiss = function handleDismiss(e) {
+    var target = e.target;
+    if (target instanceof HTMLElement) if (isDismissable && target.nodeName === 'DIALOG') {
+      onClose && onClose();
+    }
+  };
+  useGlobalKeyPress('Escape', function (e) {
+    e.preventDefault();
+    if (isDismissable && onClose && open) {
+      onClose && onClose();
+    }
+  });
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx(StyledNativeDialog, {
+      ref: combinedDialogRef,
+      onMouseDown: handleDismiss,
+      children: open && /*#__PURE__*/jsx(StyledDialog, _objectSpread(_objectSpread({
+        elevation: "above_scrim"
+      }, props), {}, {
+        ref: ref,
+        children: children
+      }))
+    })
+  });
+});
+
+// Dialog.displayName = 'EdsDialog'
+
+export { Dialog };

package/dist/esm/components/Dialog/{Dialog.tokens.js → Dialog.tokens.mjs}

@@ -4,7 +4,9 @@ var spacingMedium = tokens.spacings.comfortable.medium,
   _tokens$typography = tokens.typography,
   accordion_header = _tokens$typography.ui.accordion_header,
   body_long = _tokens$typography.paragraph.body_long,
-  background = tokens.colors.ui.background__default.rgba,
+  _tokens$colors$ui = tokens.colors.ui,
+  background = _tokens$colors$ui.background__default.rgba,
+  backdrop = _tokens$colors$ui.background__scrim.rgba,
   borderRadius = tokens.shape.corners.borderRadius;
 var dialog = {
   width: '252px',
@@ -37,6 +39,9 @@ var dialog = {
     },
     actions: {
       minHeight: '48px'
+    },
+    scrim: {
+      background: backdrop
     }
   },
   modes: {

package/dist/esm/components/Dialog/{DialogContent.js → DialogContent.mjs}

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.js';
+import { Divider } from '../Divider/Divider.mjs';
 
 var _excluded = ["children", "scrollable"];
 var StyledDialogContent = styled.div.withConfig({

package/dist/esm/components/Dialog/{DialogHeader.js → DialogHeader.mjs}

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.js';
+import { Divider } from '../Divider/Divider.mjs';
 
 var _excluded = ["children"];
 var StyledDialogHeader = styled.div.withConfig({

package/dist/esm/components/Dialog/{index.js → index.mjs}

@@ -1,8 +1,8 @@
-import { Dialog as Dialog$1 } from './Dialog.js';
-import { DialogActions } from './DialogActions.js';
-import { DialogTitle } from './DialogTitle.js';
-import { DialogContent } from './DialogContent.js';
-import { DialogHeader } from './DialogHeader.js';
+import { Dialog as Dialog$1 } from './Dialog.mjs';
+import { DialogActions } from './DialogActions.mjs';
+import { DialogTitle } from './DialogTitle.mjs';
+import { DialogContent } from './DialogContent.mjs';
+import { DialogHeader } from './DialogHeader.mjs';
 
 var Dialog = Dialog$1;
 Dialog.Actions = DialogActions;

package/dist/esm/components/Divider/{Divider.js → Divider.mjs}

@@ -2,8 +2,8 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import * as Divider_tokens from './Divider.tokens.js';
-import { divider as divider$1 } from './Divider.tokens.js';
+import * as Divider_tokens from './Divider.tokens.mjs';
+import { divider as divider$1 } from './Divider.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["color", "variant", "size"];

package/dist/esm/components/Divider/{Divider.tokens.js → Divider.tokens.mjs}

@@ -1,10 +1,10 @@
-import { tokens as tokens$1 } from '@equinor/eds-tokens';
+import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors$ui = tokens$1.colors.ui,
+var _tokens$colors$ui = tokens.colors.ui,
   lighter = _tokens$colors$ui.background__default.rgba,
   light = _tokens$colors$ui.background__light.rgba,
   mediumColor = _tokens$colors$ui.background__medium.rgba,
-  _tokens$spacings$comf = tokens$1.spacings.comfortable,
+  _tokens$spacings$comf = tokens.spacings.comfortable,
   spacingSmall = _tokens$spacings$comf.small,
   spacingMedium = _tokens$spacings$comf.medium;
 var divider = {

package/dist/esm/components/Icon/{Icon.js → Icon.mjs}

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { get } from './library.js';
+import { get } from './library.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["size", "color", "name", "rotation", "title", "data"];

package/dist/esm/components/Icon/index.mjs

@@ -0,0 +1,7 @@
+import { Icon as Icon$1 } from './Icon.mjs';
+import { add } from './library.mjs';
+
+var Icon = Icon$1;
+Icon.add = add;
+
+export { Icon };

package/dist/esm/components/Input/{Input.js → Input.mjs}

@@ -4,9 +4,9 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef, useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { outlineTemplate, spacingsTemplate, typographyMixin, useToken } from '@equinor/eds-utils';
-import { inputToken } from './Input.tokens.js';
+import { inputToken } from './Input.tokens.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 
 var _excluded = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
 var Container = styled.div.withConfig({

package/dist/esm/components/Input/{Input.tokens.js → Input.tokens.mjs}

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { tokens as tokens$1 } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import { tokens } from '@equinor/eds-tokens';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
-var _tokens$colors = tokens$1.colors,
+var _tokens$colors = tokens.colors,
   background = _tokens$colors.ui.background__light.rgba,
   _tokens$colors$text = _tokens$colors.text,
   static_icons__default = _tokens$colors$text.static_icons__default,
@@ -16,11 +16,11 @@ var _tokens$colors = tokens$1.colors,
   warning__hover = _tokens$colors$intera.warning__hover,
   success__resting = _tokens$colors$intera.success__resting,
   success__hover = _tokens$colors$intera.success__hover,
-  _tokens$spacings$comf = tokens$1.spacings.comfortable,
+  _tokens$spacings$comf = tokens.spacings.comfortable,
   small = _tokens$spacings$comf.small,
   x_small = _tokens$spacings$comf.x_small,
-  typography = tokens$1.typography,
-  shape = tokens$1.shape;
+  typography = tokens.typography,
+  shape = tokens.shape;
 var input = {
   height: shape.straight.minHeight,
   width: '100%',

package/dist/esm/components/InputWrapper/HelperText/{HelperText.js → HelperText.mjs}

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyMixin } from '@equinor/eds-utils';
-import { helperText } from './HelperText.token.js';
+import { helperText } from './HelperText.token.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["text", "icon", "color"];

package/dist/esm/components/InputWrapper/{InputWrapper.js → InputWrapper.mjs}

@@ -3,11 +3,11 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef, useCallback } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { useToken } from '@equinor/eds-utils';
-import { inputToken } from './InputWrapper.tokens.js';
+import { inputToken } from './InputWrapper.tokens.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
-import { Label as Label$1 } from '../Label/Label.js';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { HelperText as TextfieldHelperText } from './HelperText/HelperText.mjs';
+import { Label as Label$1 } from '../Label/Label.mjs';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 
 var _excluded = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
 var Container = styled.div.withConfig({

package/dist/esm/components/InputWrapper/{InputWrapper.tokens.js → InputWrapper.tokens.mjs}

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 var _tokens$colors = tokens.colors,
   background = _tokens$colors.ui.background__light.rgba,

package/dist/esm/components/Label/{Label.js → Label.mjs}

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { typographyTemplate } from '@equinor/eds-utils';
-import { label } from './Label.tokens.js';
+import { label } from './Label.tokens.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["label", "meta", "disabled"];

package/dist/esm/components/List/{List.js → List.mjs}

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { list } from './List.tokens.js';
+import { list } from './List.tokens.mjs';
 import { typographyTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/esm/components/List/{index.js → index.mjs}

@@ -1,5 +1,5 @@
-import { List as List$1 } from './List.js';
-import { ListItem } from './ListItem.js';
+import { List as List$1 } from './List.mjs';
+import { ListItem } from './ListItem.mjs';
 
 var List = List$1;
 List.Item = ListItem;

package/dist/esm/components/Menu/{Menu.js → Menu.mjs}

@@ -1,16 +1,16 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef, useEffect, useMemo } from 'react';
+import { forwardRef, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { MenuProvider, useMenu } from './Menu.context.js';
-import { MenuList } from './MenuList.js';
+import { MenuProvider, useMenu } from './Menu.context.mjs';
+import { MenuList } from './MenuList.mjs';
 import { bordersTemplate, useToken, mergeRefs, useIsomorphicLayoutEffect, useGlobalKeyPress } from '@equinor/eds-utils';
-import { menu } from './Menu.tokens.js';
+import { menu } from './Menu.tokens.mjs';
 import { offset, flip, shift, size, useFloating, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { Paper } from '../Paper/Paper.js';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { Paper } from '../Paper/Paper.mjs';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 
 var _excluded = ["children", "anchorEl", "onClose", "open"],
   _excluded2 = ["anchorEl", "open", "placement", "matchAnchorWidth", "onClose", "style", "className"];
@@ -128,6 +128,9 @@ var Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
     })]);
   }
   var _useFloating = useFloating({
+      elements: {
+        reference: anchorEl
+      },
       placement: placement,
       open: open,
       onOpenChange: onClose,
@@ -135,18 +138,13 @@ var Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
     }),
     x = _useFloating.x,
     y = _useFloating.y,
-    reference = _useFloating.reference,
-    floating = _useFloating.floating,
     refs = _useFloating.refs,
     update = _useFloating.update,
     strategy = _useFloating.strategy,
     context = _useFloating.context;
-  useEffect(function () {
-    reference(anchorEl);
-  }, [anchorEl, reference]);
   var popoverRef = useMemo(function () {
-    return mergeRefs(floating, ref);
-  }, [floating, ref]);
+    return mergeRefs(refs.setFloating, ref);
+  }, [refs.setFloating, ref]);
   useIsomorphicLayoutEffect(function () {
     if (refs.reference.current && refs.floating.current && open) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);

package/dist/esm/components/Menu/{MenuItem.js → MenuItem.mjs}

@@ -2,12 +2,12 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { menu } from './Menu.tokens.js';
+import { menu } from './Menu.tokens.mjs';
 import { typographyTemplate, spacingsTemplate, outlineTemplate, mergeRefs } from '@equinor/eds-utils';
-import { useMenu } from './Menu.context.js';
+import { useMenu } from './Menu.context.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "disabled", "index", "as", "onClick", "closeMenuOnClick"];
+var _excluded = ["children", "disabled", "active", "index", "as", "onClick", "closeMenuOnClick"];
 var typography = menu.typography,
   _tokens$entities = menu.entities,
   _tokens$entities$item = _tokens$entities.item.states,
@@ -29,8 +29,8 @@ var Item = styled.button.attrs(function (_ref) {
   var theme = _ref2.theme;
   return spacingsTemplate(theme.entities.item.spacings);
 }, function (_ref3) {
-  var active = _ref3.active;
-  return active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
+  var $active = _ref3.$active;
+  return $active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
 }, function (_ref4) {
   var disabled = _ref4.disabled;
   return disabled ? css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline));
@@ -42,6 +42,7 @@ var Content = styled.div.withConfig({
 var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
   var children = _ref5.children,
     disabled = _ref5.disabled,
+    active = _ref5.active,
     _ref5$index = _ref5.index,
     index = _ref5$index === void 0 ? 0 : _ref5$index,
     _ref5$as = _ref5.as,
@@ -66,6 +67,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
     $isFocused: isFocused
   });
   return /*#__PURE__*/jsx(Item, _objectSpread(_objectSpread({}, props), {}, {
+    $active: active,
     ref: mergeRefs(ref, function (el) {
       if (isFocused) {
         requestAnimationFrame(function () {

package/dist/esm/components/Menu/{MenuList.js → MenuList.mjs}

@@ -2,10 +2,10 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useMemo, Children, cloneElement, useEffect, isValidElement } from 'react';
 import styled from 'styled-components';
-import { useMenu } from './Menu.context.js';
-import { MenuItem } from './MenuItem.js';
-import { MenuSection } from './MenuSection.js';
-import { menu } from './Menu.tokens.js';
+import { useMenu } from './Menu.context.mjs';
+import { MenuItem } from './MenuItem.mjs';
+import { MenuSection } from './MenuSection.mjs';
+import { menu } from './Menu.tokens.mjs';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/esm/components/Menu/{MenuSection.js → MenuSection.mjs}

@@ -1,10 +1,10 @@
 import { memo } from 'react';
 import styled from 'styled-components';
-import { menu } from './Menu.tokens.js';
+import { menu } from './Menu.tokens.mjs';
 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 { Divider } from '../Divider/Divider.mjs';
+import { Typography } from '../Typography/Typography.mjs';
 
 var Header = styled.div.attrs(function () {
   return {

package/dist/esm/components/Menu/{index.js → index.mjs}

@@ -1,6 +1,6 @@
-import { Menu as Menu$1 } from './Menu.js';
-import { MenuItem } from './MenuItem.js';
-import { MenuSection } from './MenuSection.js';
+import { Menu as Menu$1 } from './Menu.mjs';
+import { MenuItem } from './MenuItem.mjs';
+import { MenuSection } from './MenuSection.mjs';
 
 var Menu = Menu$1;
 Menu.Item = MenuItem;

package/dist/esm/components/Pagination/{Pagination.js → Pagination.mjs}

@@ -4,14 +4,14 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef, useState } from 'react';
 import styled from 'styled-components';
 import { useIsMounted, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
-import { Button } from '../Button/index.js';
-import { Icon } from '../Icon/index.js';
-import { PaginationItem } from './PaginationItem.js';
-import { pagination } from './Pagination.tokens.js';
+import { Button } from '../Button/index.mjs';
+import { Icon } from '../Icon/index.mjs';
+import { PaginationItem } from './PaginationItem.mjs';
+import { pagination } from './Pagination.tokens.mjs';
 import { chevron_left, chevron_right, more_horizontal } from '@equinor/eds-icons';
-import { PaginationControl } from './paginationControl.js';
+import { PaginationControl } from './paginationControl.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/Typography.mjs';
 
 var _excluded = ["totalItems", "defaultPage", "withItemIndicator", "itemsPerPage", "onChange"];
 var icons = {

package/dist/esm/components/Pagination/{PaginationItem.js → PaginationItem.mjs}

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
-import { Button } from '../Button/index.js';
-import { pagination } from './Pagination.tokens.js';
+import { Button } from '../Button/index.mjs';
+import { pagination } from './Pagination.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["page", "selected", "onClick"];

package/dist/esm/components/Paper/{Paper.js → Paper.mjs}

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { paper, elevation } from './Paper.tokens.js';
+import { paper, elevation } from './Paper.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["elevation"];

package/dist/esm/components/Popover/{Popover.js → Popover.mjs}

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef, useRef, useEffect, useMemo } from 'react';
+import { forwardRef, useRef, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
-import { popover } from './Popover.tokens.js';
+import { popover } from './Popover.tokens.mjs';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Paper } from '../Paper/Paper.js';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { Paper } from '../Paper/Paper.mjs';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 
 var _excluded = ["children", "placement", "anchorEl", "style", "open", "onClose", "withinPortal", "trapFocus"];
 var PopoverPaper = styled(Paper).withConfig({
@@ -53,6 +53,9 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
     rest = _objectWithoutProperties(_ref5, _excluded);
   var arrowRef = useRef(null);
   var _useFloating = useFloating({
+      elements: {
+        reference: anchorEl
+      },
       placement: placement,
       open: open,
       onOpenChange: onClose,
@@ -65,8 +68,7 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
     }),
     x = _useFloating.x,
     y = _useFloating.y,
-    reference = _useFloating.reference,
-    floating = _useFloating.floating,
+    refs = _useFloating.refs,
     strategy = _useFloating.strategy,
     context = _useFloating.context,
     _useFloating$middlewa = _useFloating.middlewareData.arrow,
@@ -74,12 +76,9 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
     arrowX = _useFloating$middlewa2.x,
     arrowY = _useFloating$middlewa2.y,
     finalPlacement = _useFloating.placement;
-  useEffect(function () {
-    reference(anchorEl);
-  }, [anchorEl, reference]);
   var popoverRef = useMemo(function () {
-    return mergeRefs(floating, ref);
-  }, [floating, ref]);
+    return mergeRefs(refs.setFloating, ref);
+  }, [refs.setFloating, ref]);
   var _useInteractions = useInteractions([useDismiss(context)]),
     getFloatingProps = _useInteractions.getFloatingProps;
   useEffect(function () {

package/dist/esm/components/Popover/{PopoverActions.js → PopoverActions.mjs}

@@ -10,7 +10,7 @@ var StyledPopoverActions = styled.div.withConfig({
   componentId: "sc-1dkrhw6-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  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);
+  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);
 });
 var PopoverActions = /*#__PURE__*/forwardRef(function PopoverActions(_ref2, ref) {
   var children = _ref2.children,

package/dist/esm/components/Popover/{PopoverContent.js → PopoverContent.mjs}

@@ -10,7 +10,7 @@ var ContentWrapper = styled.div.withConfig({
   componentId: "sc-vwww9h-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  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);
+  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);
 });
 var PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref2, ref) {
   var children = _ref2.children,

package/dist/esm/components/Popover/{PopoverHeader.js → PopoverHeader.mjs}

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.js';
+import { Divider } from '../Divider/Divider.mjs';
 
 var _excluded = ["children"];
 var StyledPopoverHeader = styled.div.withConfig({

package/dist/esm/components/Popover/{index.js → index.mjs}

@@ -1,8 +1,8 @@
-import { Popover as Popover$1 } from './Popover.js';
-import { PopoverTitle } from './PopoverTitle.js';
-import { PopoverContent } from './PopoverContent.js';
-import { PopoverHeader } from './PopoverHeader.js';
-import { PopoverActions } from './PopoverActions.js';
+import { Popover as Popover$1 } from './Popover.mjs';
+import { PopoverTitle } from './PopoverTitle.mjs';
+import { PopoverContent } from './PopoverContent.mjs';
+import { PopoverHeader } from './PopoverHeader.mjs';
+import { PopoverActions } from './PopoverActions.mjs';
 
 var Popover = Popover$1;
 Popover.Title = PopoverTitle;

package/dist/esm/components/Progress/Circular/{CircularProgress.js → CircularProgress.mjs}

@@ -3,7 +3,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useEffect } from 'react';
 import styled, { keyframes, css } from 'styled-components';
-import * as CircularProgress_tokens from './CircularProgress.tokens.js';
+import * as CircularProgress_tokens from './CircularProgress.tokens.mjs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["variant", "value", "size", "color"];

package/dist/esm/components/Progress/Circular/{CircularProgress.tokens.js → CircularProgress.tokens.mjs}

@@ -1,6 +1,6 @@
-import { tokens as tokens$1 } from '@equinor/eds-tokens';
+import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens$1.colors,
+var _tokens$colors = tokens.colors,
   _tokens$colors$infogr = _tokens$colors.infographic,
   primary13 = _tokens$colors$infogr.primary__moss_green_13.rgba,
   primary100 = _tokens$colors$infogr.primary__moss_green_100.rgba,

package/dist/esm/components/Progress/Dots/{DotProgress.js → DotProgress.mjs}

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { keyframes } from 'styled-components';
-import * as DotProgress_tokens from './DotProgress.tokens.js';
+import * as DotProgress_tokens from './DotProgress.tokens.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["color", "size"];

package/dist/esm/components/Progress/Dots/{DotProgress.tokens.js → DotProgress.tokens.mjs}

@@ -1,6 +1,6 @@
-import { tokens as tokens$1 } from '@equinor/eds-tokens';
+import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens$1.colors,
+var _tokens$colors = tokens.colors,
   primary100 = _tokens$colors.infographic.primary__moss_green_100.rgba,
   _tokens$colors$intera = _tokens$colors.interactive,
   icon_on_interactive_colors = _tokens$colors$intera.icon_on_interactive_colors.rgba,