@equinor/eds-core-react 2.3.2 → 2.3.4

package/README.md

@@ -27,11 +27,26 @@ npm install @equinor/eds-core-react@beta
 
 ```typescript
 import { Button, Typography } from '@equinor/eds-core-react/next'
+```
+
+#### CSS Setup
+
+Beta components require CSS to be imported **once** in your app's entry point:
 
-// Import CSS separately (required for SSR compatibility)
+```typescript
+// main.tsx or App.tsx (import once at app root)
 import '@equinor/eds-core-react/next/index.css'
 ```
 
+Or in a global CSS file:
+
+```css
+/* styles/global.css */
+@import '@equinor/eds-core-react/next/index.css';
+```
+
+> **Note:** Import the CSS only once, not in each component file. The stylesheet contains styles for all beta components.
+
 **Learn more:**
 - [Complete Beta Release Guide](../../documentation/how-to/BETA_RELEASE_GUIDE.md)
 - [Preview EDS 2.0 components in Storybook](https://storybook.eds.equinor.com)

package/dist/eds-core-react.cjs

@@ -9566,8 +9566,15 @@ const UnstyledInput = styled__default.default.input.withConfig({
 const ChipContainer = styled__default.default.div.withConfig({
   displayName: "MultipleInput__ChipContainer",
   componentId: "sc-1evc1aa-1"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;height:100%;"]);
+})(["display:flex;flex-wrap:wrap;align-items:center;align-content:center;min-height:100%;gap:", ";margin:", ";"], ({
+  $density
+}) => $density === 'compact' ? '2px' : '0.5rem', ({
+  $density
+}) => $density === 'compact' ? '-2px 0' : '0');
 const MultipleInput = () => {
+  const {
+    density
+  } = useEds();
   const {
     selectedItems,
     selectionDisplay,
@@ -9602,23 +9609,31 @@ const MultipleInput = () => {
     e.stopPropagation();
     handleChipRemove(item, index, false);
   };
+  const minHeight = density === 'compact' ? '24px' : '36px';
   return /*#__PURE__*/jsxRuntime.jsx(Input$4, {
     as: 'div',
     variant: variant,
     rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
     rightAdornments: /*#__PURE__*/jsxRuntime.jsx(RightAdornments, {}),
     readOnly: readOnly,
-    style: {
+    style: selectionDisplay === 'chips' ? {
       height: 'auto',
-      minHeight: '36px'
-    },
+      minHeight
+    } : undefined,
+    "data-density": density,
     children: /*#__PURE__*/jsxRuntime.jsxs(ChipContainer, {
+      $density: density,
       children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(Chip, {
         ref: el => {
           if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
         style: {
-          outline: '1px solid var(--eds-color-accent-12)'
+          outline: '1px solid var(--eds-color-accent-12)',
+          ...(density === 'compact' && {
+            height: '16px',
+            fontSize: '12px',
+            gridGap: '0px'
+          })
         },
         onDelete: handleChipDelete(item, index),
         onClick: handleChipClick(item, index),

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

@@ -1,9 +1,9 @@
 import { forwardRef, useId, Children, cloneElement } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { accordion } from './Accordion.tokens.js';
+import { accordion } from './Accordion.tokens.mjs';
 import { useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 
 const Accordion = /*#__PURE__*/forwardRef(function Accordion({
   headerLevel = 'h2',

package/dist/esm/components/Accordion/{AccordionHeader.js → AccordionHeader.mjs}

@@ -1,10 +1,10 @@
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
 import { chevron_up, chevron_down } from '@equinor/eds-icons';
-import { Icon } from '../Icon/index.js';
-import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
-import { AccordionHeaderActions } from './AccordionHeaderActions.js';
-import { accordion } from './Accordion.tokens.js';
+import { Icon } from '../Icon/index.mjs';
+import { AccordionHeaderTitle } from './AccordionHeaderTitle.mjs';
+import { AccordionHeaderActions } from './AccordionHeaderActions.mjs';
+import { accordion } from './Accordion.tokens.mjs';
 import { bordersTemplate, typographyTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

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

@@ -1,9 +1,9 @@
-import { Accordion as Accordion$1 } from './Accordion.js';
-import { AccordionItem } from './AccordionItem.js';
-import { AccordionHeader } from './AccordionHeader.js';
-import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
-import { AccordionHeaderActions } from './AccordionHeaderActions.js';
-import { AccordionPanel } from './AccordionPanel.js';
+import { Accordion as Accordion$1 } from './Accordion.mjs';
+import { AccordionItem } from './AccordionItem.mjs';
+import { AccordionHeader } from './AccordionHeader.mjs';
+import { AccordionHeaderTitle } from './AccordionHeaderTitle.mjs';
+import { AccordionHeaderActions } from './AccordionHeaderActions.mjs';
+import { AccordionPanel } from './AccordionPanel.mjs';
 
 const Accordion = Accordion$1;
 Accordion.Item = AccordionItem;

package/dist/esm/components/Autocomplete/{AddNewOption.js → AddNewOption.mjs}

@@ -1,10 +1,10 @@
 import { add_box } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
 import styled, { css } from 'styled-components';
-import { Icon } from '../Icon/index.js';
-import { input } from '../Input/Input.tokens.js';
-import { useAutocompleteContext } from './AutocompleteContext.js';
-import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
+import { Icon } from '../Icon/index.mjs';
+import { input } from '../Input/Input.tokens.mjs';
+import { useAutocompleteContext } from './AutocompleteContext.mjs';
+import { StyledListItem, AutocompleteOptionLabel } from './Option.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const StyledAddItemIcon = styled(Icon).withConfig({

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

@@ -1,14 +1,14 @@
 import { useFloating, offset, flip, size } from '@floating-ui/react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { Button } from '../Button/index.js';
-import { AutocompleteContext } from './AutocompleteContext.js';
-import { MultipleInput } from './MultipleInput.js';
-import { OptionList } from './OptionList.js';
-import { SingleInput } from './SingleInput.js';
-import { useAutocomplete } from './useAutocomplete.js';
+import { Button } from '../Button/index.mjs';
+import { AutocompleteContext } from './AutocompleteContext.mjs';
+import { MultipleInput } from './MultipleInput.mjs';
+import { OptionList } from './OptionList.mjs';
+import { SingleInput } from './SingleInput.mjs';
+import { useAutocomplete } from './useAutocomplete.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Label } from '../Label/Label.js';
-import { HelperText as TextfieldHelperText } from '../InputWrapper/HelperText/HelperText.js';
+import { Label } from '../Label/Label.mjs';
+import { HelperText as TextfieldHelperText } from '../InputWrapper/HelperText/HelperText.mjs';
 
 const Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",

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

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

package/dist/esm/components/Autocomplete/{EmptyOption.js → EmptyOption.mjs}

@@ -1,5 +1,5 @@
-import { useAutocompleteContext } from './AutocompleteContext.js';
-import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
+import { useAutocompleteContext } from './AutocompleteContext.mjs';
+import { StyledListItem, AutocompleteOptionLabel } from './Option.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 function EmptyOption() {

package/dist/esm/components/Autocomplete/{MultipleInput.js → MultipleInput.mjs}

@@ -1,10 +1,11 @@
 import { useRef } from 'react';
 import styled from 'styled-components';
-import { useAutocompleteContext } from './AutocompleteContext.js';
-import { RightAdornments } from './RightAdornments.js';
+import { useAutocompleteContext } from './AutocompleteContext.mjs';
+import { RightAdornments } from './RightAdornments.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Chip } from '../Chip/Chip.js';
-import { Input } from '../Input/Input.js';
+import { Chip } from '../Chip/Chip.mjs';
+import { useEds } from '../EdsProvider/eds.context.mjs';
+import { Input } from '../Input/Input.mjs';
 
 const UnstyledInput = styled.input.withConfig({
   displayName: "MultipleInput__UnstyledInput",
@@ -13,8 +14,15 @@ const UnstyledInput = styled.input.withConfig({
 const ChipContainer = styled.div.withConfig({
   displayName: "MultipleInput__ChipContainer",
   componentId: "sc-1evc1aa-1"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;height:100%;"]);
+})(["display:flex;flex-wrap:wrap;align-items:center;align-content:center;min-height:100%;gap:", ";margin:", ";"], ({
+  $density
+}) => $density === 'compact' ? '2px' : '0.5rem', ({
+  $density
+}) => $density === 'compact' ? '-2px 0' : '0');
 const MultipleInput = () => {
+  const {
+    density
+  } = useEds();
   const {
     selectedItems,
     selectionDisplay,
@@ -49,23 +57,31 @@ const MultipleInput = () => {
     e.stopPropagation();
     handleChipRemove(item, index, false);
   };
+  const minHeight = density === 'compact' ? '24px' : '36px';
   return /*#__PURE__*/jsx(Input, {
     as: 'div',
     variant: variant,
     rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
     rightAdornments: /*#__PURE__*/jsx(RightAdornments, {}),
     readOnly: readOnly,
-    style: {
+    style: selectionDisplay === 'chips' ? {
       height: 'auto',
-      minHeight: '36px'
-    },
+      minHeight
+    } : undefined,
+    "data-density": density,
     children: /*#__PURE__*/jsxs(ChipContainer, {
+      $density: density,
       children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsx(Chip, {
         ref: el => {
           if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
         style: {
-          outline: '1px solid var(--eds-color-accent-12)'
+          outline: '1px solid var(--eds-color-accent-12)',
+          ...(density === 'compact' && {
+            height: '16px',
+            fontSize: '12px',
+            gridGap: '0px'
+          })
         },
         onDelete: handleChipDelete(item, index),
         onClick: handleChipClick(item, index),

package/dist/esm/components/Autocomplete/{Option.js → Option.mjs}

@@ -1,8 +1,8 @@
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import styled, { css } from 'styled-components';
-import { useAutocompleteContext } from './AutocompleteContext.js';
+import { useAutocompleteContext } from './AutocompleteContext.mjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Checkbox } from '../Checkbox/Checkbox.mjs';
 
 const StyledListItem = styled.li.withConfig({
   displayName: "Option__StyledListItem",

package/dist/esm/components/Autocomplete/{OptionList.js → OptionList.mjs}

@@ -2,14 +2,14 @@ import { useIsomorphicLayoutEffect, bordersTemplate } from '@equinor/eds-utils';
 import { useInteractions, autoUpdate } from '@floating-ui/react';
 import { useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { List } from '../List/index.js';
-import { AddNewOption } from './AddNewOption.js';
-import { AllSymbol, AddSymbol } from './Autocomplete.js';
-import { useAutocompleteContext } from './AutocompleteContext.js';
-import { Option } from './Option.js';
-import { SelectAllOption } from './SelectAllOption.js';
-import { handleListFocus } from './utils.js';
-import { EmptyOption } from './EmptyOption.js';
+import { List } from '../List/index.mjs';
+import { AddNewOption } from './AddNewOption.mjs';
+import { AllSymbol, AddSymbol } from './Autocomplete.mjs';
+import { useAutocompleteContext } from './AutocompleteContext.mjs';
+import { Option } from './Option.mjs';
+import { SelectAllOption } from './SelectAllOption.mjs';
+import { handleListFocus } from './utils.mjs';
+import { EmptyOption } from './EmptyOption.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const OptionList = ({

package/dist/esm/components/Autocomplete/{RightAdornments.js → RightAdornments.mjs}

@@ -1,8 +1,8 @@
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
-import { Icon } from '../Icon/index.js';
-import { Progress } from '../Progress/index.js';
-import { useAutocompleteContext } from './AutocompleteContext.js';
-import { StyledButton } from './Autocomplete.js';
+import { Icon } from '../Icon/index.mjs';
+import { Progress } from '../Progress/index.mjs';
+import { useAutocompleteContext } from './AutocompleteContext.mjs';
+import { StyledButton } from './Autocomplete.mjs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 const RightAdornments = () => {

package/dist/esm/components/Autocomplete/{SelectAllOption.js → SelectAllOption.mjs}

@@ -1,7 +1,7 @@
-import { useAutocompleteContext } from './AutocompleteContext.js';
-import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
+import { useAutocompleteContext } from './AutocompleteContext.mjs';
+import { StyledListItem, AutocompleteOptionLabel } from './Option.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Checkbox } from '../Checkbox/Checkbox.mjs';
 
 function SelectAllOption({
   item,

package/dist/esm/components/Autocomplete/{SingleInput.js → SingleInput.mjs}

@@ -1,7 +1,7 @@
-import { useAutocompleteContext } from './AutocompleteContext.js';
-import { RightAdornments } from './RightAdornments.js';
+import { useAutocompleteContext } from './AutocompleteContext.mjs';
+import { RightAdornments } from './RightAdornments.mjs';
 import { jsx } from 'react/jsx-runtime';
-import { Input } from '../Input/Input.js';
+import { Input } from '../Input/Input.mjs';
 
 const SingleInput = () => {
   const {

package/dist/esm/components/Autocomplete/{useAutocomplete.js → useAutocomplete.mjs}

@@ -2,10 +2,10 @@ import { useToken, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { useState, useMemo, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
-import { AddSymbol, AllSymbol, defaultOptionDisabled } from './Autocomplete.js';
-import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
-import { findPrevIndex, findNextIndex, mergeEventsFromRight } from './utils.js';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { AddSymbol, AllSymbol, defaultOptionDisabled } from './Autocomplete.mjs';
+import { multiSelect, selectTokens } from './Autocomplete.tokens.mjs';
+import { findPrevIndex, findNextIndex, mergeEventsFromRight } from './utils.mjs';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 
 const useAutocomplete = ({
   options = [],

package/dist/esm/components/Autocomplete/{utils.js → utils.mjs}

@@ -1,5 +1,5 @@
-import pickBy from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/pickBy.js';
-import mergeWith from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeWith.js';
+import pickBy from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/pickBy.mjs';
+import mergeWith from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeWith.mjs';
 
 const findIndex = ({
   calc,

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { bordersTemplate } from '@equinor/eds-utils';
-import { avatar } from './Avatar.tokens.js';
+import { avatar } from './Avatar.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledAvatar = styled.div.withConfig({

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

@@ -1,12 +1,12 @@
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { ThemeProvider, css } from 'styled-components';
 import { useToken, spacingsTemplate } from '@equinor/eds-utils';
-import { enabled } from './Banner.tokens.js';
-import { BannerIcon } from './BannerIcon.js';
+import { enabled } from './Banner.tokens.mjs';
+import { BannerIcon } from './BannerIcon.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.js';
-import { Paper } from '../Paper/Paper.js';
-import { Divider } from '../Divider/Divider.js';
+import { useEds } from '../EdsProvider/eds.context.mjs';
+import { Paper } from '../Paper/Paper.mjs';
+import { Divider } from '../Divider/Divider.mjs';
 
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",

package/dist/esm/components/Banner/{BannerIcon.js → BannerIcon.mjs}

@@ -1,7 +1,7 @@
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
-import * as Banner_tokens from './Banner.tokens.js';
-import { Icon } from '../Icon/index.js';
+import * as Banner_tokens from './Banner.tokens.mjs';
+import { Icon } from '../Icon/index.mjs';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/esm/components/Banner/{BannerMessage.js → BannerMessage.mjs}

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

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

@@ -1,7 +1,7 @@
-import { Banner as Banner$1 } from './Banner.js';
-import { BannerIcon } from './BannerIcon.js';
-import { BannerMessage } from './BannerMessage.js';
-import { BannerActions } from './BannerActions.js';
+import { Banner as Banner$1 } from './Banner.mjs';
+import { BannerIcon } from './BannerIcon.mjs';
+import { BannerMessage } from './BannerMessage.mjs';
+import { BannerActions } from './BannerActions.mjs';
 
 const Banner = Banner$1;
 Banner.Icon = BannerIcon;

package/dist/esm/components/Breadcrumbs/{Breadcrumb.js → Breadcrumb.mjs}

@@ -1,9 +1,9 @@
 import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { breadcrumbs } from './Breadcrumbs.tokens.js';
+import { breadcrumbs } from './Breadcrumbs.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
-import { Tooltip } from '../Tooltip/Tooltip.js';
-import { Typography } from '../Typography/Typography.js';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { Typography } from '../Typography/Typography.mjs';
 
 const {
   states,

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

@@ -1,9 +1,9 @@
 import { forwardRef, useState, Children, Fragment } from 'react';
 import styled from 'styled-components';
-import { breadcrumbs } from './Breadcrumbs.tokens.js';
+import { breadcrumbs } from './Breadcrumbs.tokens.mjs';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/Typography.mjs';
 
 const {
   spacings,

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

@@ -1,5 +1,5 @@
-import { Breadcrumbs as Breadcrumbs$1 } from './Breadcrumbs.js';
-import { Breadcrumb } from './Breadcrumb.js';
+import { Breadcrumbs as Breadcrumbs$1 } from './Breadcrumbs.mjs';
+import { Breadcrumb } from './Breadcrumb.mjs';
 
 const Breadcrumbs = Breadcrumbs$1;
 Breadcrumbs.Breadcrumb = Breadcrumb;

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

@@ -1,10 +1,10 @@
 import { forwardRef } from 'react';
 import styled, { ThemeProvider, css } from 'styled-components';
-import { token } from './tokens/index.js';
+import { token } from './tokens/index.mjs';
 import { useToken, spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
-import { InnerFullWidth } from './InnerFullWidth.js';
+import { InnerFullWidth } from './InnerFullWidth.mjs';
 import { jsx } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 
 const getVariant = (tokenSet, variant) => {
   switch (variant) {

package/dist/esm/components/Button/ButtonGroup/{ButtonGroup.js → ButtonGroup.mjs}

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { group } from './ButtonGroup.tokens.js';
+import { group } from './ButtonGroup.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 const {

package/dist/esm/components/Button/ToggleButton/{ToggleButton.js → ToggleButton.mjs}

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

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

@@ -1,6 +1,6 @@
-import { Button as Button$1 } from './Button.js';
-import { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
-import { ToggleButton } from './ToggleButton/ToggleButton.js';
+import { Button as Button$1 } from './Button.mjs';
+import { ButtonGroup } from './ButtonGroup/ButtonGroup.mjs';
+import { ToggleButton } from './ToggleButton/ToggleButton.mjs';
 
 const Button = Button$1;
 Button.Group = ButtonGroup;

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
+import { button } from './button.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 const {
   colors: {

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
+import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 const {
   clickbounds: {

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
+import { button } from './button.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 const {
   colors: {

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
+import { button } from './button.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 const {
   colors: {

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

@@ -1,8 +1,8 @@
-import { primary, secondary, danger } from './contained.js';
-import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './outlined.js';
-import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './ghost.js';
-import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.js';
-import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained_icon.js';
+import { primary, secondary, danger } from './contained.mjs';
+import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './outlined.mjs';
+import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './ghost.mjs';
+import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.mjs';
+import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained_icon.mjs';
 
 const token = {
   primary: {

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
+import { button } from './button.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 const {
   colors: {

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

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

package/dist/esm/components/Card/{CardActions.js → CardActions.mjs}

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

package/dist/esm/components/Card/{CardContent.js → CardContent.mjs}

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

package/dist/esm/components/Card/{CardHeader.js → CardHeader.mjs}

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