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

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

@@ -2,10 +2,10 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, cloneElement } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { accordion } from './Accordion.tokens.js';
+import { accordion } from './Accordion.tokens.mjs';
 import { useId, 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';
 
 var _excluded = ["headerLevel", "chevronPosition", "children", "id"];
 var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {

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

@@ -3,10 +3,10 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 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';
 
 var Accordion = Accordion$1;
 Accordion.Item = AccordionItem;

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

@@ -6,19 +6,19 @@ import { forwardRef, useState, useEffect, useMemo, useCallback, useRef } from 'r
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { Button } from '../Button/index.js';
-import { List } from '../List/index.js';
-import { Icon } from '../Icon/index.js';
-import { Progress } from '../Progress/index.js';
+import { Button } from '../Button/index.mjs';
+import { List } from '../List/index.mjs';
+import { Icon } from '../Icon/index.mjs';
+import { Progress } from '../Progress/index.mjs';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
-import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
+import { multiSelect, selectTokens } from './Autocomplete.tokens.mjs';
 import { bordersTemplate, useToken, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
-import { AutocompleteOption } from './Option.js';
+import { AutocompleteOption } from './Option.mjs';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.js';
-import { Label } from '../Label/Label.js';
-import { Input } from '../Input/Input.js';
+import { useEds } from '../EdsProvider/eds.context.mjs';
+import { Label } from '../Label/Label.mjs';
+import { Input } from '../Input/Input.mjs';
 
 var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "loading", "hideClearButton", "onOptionsChange", "onInputChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline", "dropdownHeight", "optionComponent"];
 var Container = styled.div.withConfig({
@@ -196,7 +196,8 @@ function AutocompleteInner(props, ref) {
     resetSelection = _useMultipleSelection.reset,
     setSelectedItems = _useMultipleSelection.setSelectedItems;
   var getLabel = useCallback(function (item) {
-    if (!item) {
+    //note: non strict check for null or undefined to allow 0
+    if (item == null) {
       return '';
     }
     if (_typeof(item) === 'object') {
@@ -268,7 +269,8 @@ function AutocompleteInner(props, ref) {
           break;
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
-          if (selectedItem && !optionDisabled(selectedItem)) {
+          //note: non strict check for null or undefined to allow 0
+          if (selectedItem != null && !optionDisabled(selectedItem)) {
             if (multiple) {
               selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
             } else {
@@ -399,12 +401,10 @@ function AutocompleteInner(props, ref) {
       }), size({
         apply: function apply(_ref10) {
           var rects = _ref10.rects,
-            availableHeight = _ref10.availableHeight,
             elements = _ref10.elements;
           var anchorWidth = "".concat(rects.reference.width, "px");
           Object.assign(elements.floating.style, {
-            width: "".concat(autoWidth ? anchorWidth : 'auto'),
-            maxHeight: "".concat(availableHeight, "px")
+            width: "".concat(autoWidth ? anchorWidth : 'auto')
           });
         },
         padding: 10

package/dist/esm/components/Autocomplete/{Autocomplete.tokens.js → Autocomplete.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 typography = tokens.typography,
   colors = tokens.colors,

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

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Checkbox } from '../Checkbox/Checkbox.mjs';
 
 var _excluded = ["value", "optionComponent", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
 var StyledListItem = styled.li.withConfig({

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 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';
 
 var _excluded = ["src", "alt", "size", "disabled"];

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

@@ -3,12 +3,12 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, useToken } 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 { Divider } from '../Divider/Divider.js';
-import { useEds } from '../EdsProvider/eds.context.js';
-import { Paper } from '../Paper/Paper.js';
+import { Divider } from '../Divider/Divider.mjs';
+import { useEds } from '../EdsProvider/eds.context.mjs';
+import { Paper } from '../Paper/Paper.mjs';
 
 var _excluded = ["children", "className", "elevation"];
 var Content = styled.div.withConfig({

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

@@ -2,8 +2,8 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
-import { info as info$1, warning as warning$1 } from './Banner.tokens.js';
-import { Icon } from '../Icon/index.js';
+import { info as info$1, warning as warning$1 } 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}

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 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';
 
 var _excluded = ["children"];
 var StyledBannerMessage = styled(Typography).withConfig({

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';
 
 var Banner = Banner$1;
 Banner.Icon = BannerIcon;

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

@@ -2,10 +2,10 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 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 { Typography } from '../Typography/Typography.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Typography } from '../Typography/Typography.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
 
 var _excluded = ["children", "maxWidth", "forceTooltip", "href", "as"];
 var states = breadcrumbs.states,

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

@@ -3,10 +3,10 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 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';
 
 var _excluded = ["children", "collapse", "wrap"];
 var spacings = breadcrumbs.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';
 
 var Breadcrumbs = Breadcrumbs$1;
 Breadcrumbs.Breadcrumb = Breadcrumb;

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

@@ -2,11 +2,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { token } from './tokens/index.js';
+import { token } from './tokens/index.mjs';
 import { spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate, useToken } 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';
 
 var _excluded = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
 var getVariant = function getVariant(tokenSet, variant) {

package/dist/esm/components/Button/ButtonGroup/{ButtonGroup.js → ButtonGroup.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 { group } from './ButtonGroup.tokens.js';
+import { group } from './ButtonGroup.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "vertical"];
 var border = group.border;
-var radius = border.type === 'border' && border.radius;
+var radius = border.radius;
 var ButtonGroupBase = styled.div.withConfig({
   displayName: "ButtonGroup__ButtonGroupBase",
   componentId: "sc-1fn8jon-0"

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

@@ -3,10 +3,10 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
-import { Button } from '../Button.js';
+import { Button } from '../Button.mjs';
 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';
 
 var _excluded = ["children", "multiple", "selectedIndexes", "onChange"];
 var ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {

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';
 
 var 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.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import { button } from './button.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 var _tokens$colors = tokens.colors,
   primaryWhite = _tokens$colors.text.static_icons__primary_white.rgba,

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.29.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.29.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 var _tokens$clickbounds = tokens.clickbounds,
   clicboundHeight = _tokens$clickbounds.default__base,

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.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import { button } from './button.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 var _tokens$colors$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

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.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import { button } from './button.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 var _tokens$colors$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

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$1, secondary as secondary$1, danger as danger$1 } from './outlined.js';
-import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './ghost.js';
-import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.js';
-import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './contained_icon.js';
+import { primary, secondary, danger } from './contained.mjs';
+import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './outlined.mjs';
+import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './ghost.mjs';
+import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.mjs';
+import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './contained_icon.mjs';
 
 var 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.29.0/node_modules/ramda/es/mergeDeepRight.js';
+import { button } from './button.mjs';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.mjs';
 
 var _tokens$colors$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

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

@@ -2,11 +2,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import * as Card_tokens from './Card.tokens.js';
-import { primary as primary$1 } from './Card.tokens.js';
+import * as Card_tokens from './Card.tokens.mjs';
+import { primary as primary$1 } 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';
 
 var _excluded = ["children", "variant", "elevation"];
 var primary = primary$1;

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

@@ -1,12 +1,12 @@
-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,
   background = _tokens$colors$ui.background__default.rgba,
   backgroundInfo = _tokens$colors$ui.background__info.rgba,
   backgroundWarning = _tokens$colors$ui.background__warning.rgba,
   backgroundDanger = _tokens$colors$ui.background__danger.rgba,
-  spacingMedium = tokens$1.spacings.comfortable.medium,
-  borderRadius = tokens$1.shape.corners.borderRadius;
+  spacingMedium = tokens.spacings.comfortable.medium,
+  borderRadius = tokens.shape.corners.borderRadius;
 var primary = {
   background: background,
   border: {

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

@@ -2,16 +2,16 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 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';
 
 var _excluded = ["children", "alignRight", "meta"];
 var spacings = primary.spacings;
 var StyledCardActions = styled.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], function (_ref) {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], function (_ref) {
   var justifyContent = _ref.justifyContent;
   return justifyContent;
 }, spacings.right, spacings.left, spacings.top, spacings.bottom);

package/dist/esm/components/Card/{CardContent.js → CardContent.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 { primary } from './Card.tokens.js';
+import { primary } from './Card.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children"];
@@ -10,7 +10,7 @@ var spacings = primary.spacings;
 var StyledCardContent = styled.div.withConfig({
   displayName: "CardContent__StyledCardContent",
   componentId: "sc-esm4ym-0"
-})(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.bottom);
+})(["display:grid;padding:0 ", " 0 ", ";&:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.bottom);
 var CardContent = /*#__PURE__*/forwardRef(function CardContent(_ref, ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/components/Card/{CardHeader.js → CardHeader.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 { primary } from './Card.tokens.js';
+import { primary } from './Card.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children"];
@@ -10,7 +10,7 @@ var spacings = primary.spacings;
 var StyledCardHeader = styled.div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
-})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";> :not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.left, spacings.top, spacings.bottom);
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";> :not(:first-child){margin-left:", ";}&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.left, spacings.top, spacings.bottom);
 var CardHeader = /*#__PURE__*/forwardRef(function CardHeader(_ref, ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/components/Card/{CardMedia.js → CardMedia.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 { primary } from './Card.tokens.js';
+import { primary } from './Card.tokens.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "fullWidth"];

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

@@ -1,9 +1,9 @@
-import { Card as Card$1 } from './Card.js';
-import { CardActions } from './CardActions.js';
-import { CardContent } from './CardContent.js';
-import { CardMedia } from './CardMedia.js';
-import { CardHeader } from './CardHeader.js';
-import { CardHeaderTitle } from './CardHeaderTitle.js';
+import { Card as Card$1 } from './Card.mjs';
+import { CardActions } from './CardActions.mjs';
+import { CardContent } from './CardContent.mjs';
+import { CardMedia } from './CardMedia.mjs';
+import { CardHeader } from './CardHeader.mjs';
+import { CardHeaderTitle } from './CardHeaderTitle.mjs';
 
 var Card = Card$1;
 Card.Actions = CardActions;

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

@@ -2,9 +2,9 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { checkbox } from './Checkbox.tokens.js';
+import { checkbox } from './Checkbox.tokens.mjs';
 import { typographyTemplate } from '@equinor/eds-utils';
-import { CheckboxInput } from './Input.js';
+import { CheckboxInput } from './Input.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["label", "disabled", "indeterminate", "className", "style"];

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

@@ -4,10 +4,10 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef } from 'react';
 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 { checkbox } from './Checkbox.tokens.mjs';
 import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 
 var _excluded = ["disabled", "indeterminate", "style", "className"];
 var StyledPath = styled.path.attrs(function (_ref) {

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

@@ -2,8 +2,8 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
-import { Icon } from './Icon.js';
-import { error as error$1, enabled as enabled$1 } from './Chip.tokens.js';
+import { Icon } from './Icon.mjs';
+import { error as error$1, enabled as enabled$1 } from './Chip.tokens.mjs';
 import { outlineTemplate, bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { close } from '@equinor/eds-icons';
-import { Icon as Icon$1 } from '../Icon/index.js';
-import { enabled as enabled$1, error as error$1 } from './Chip.tokens.js';
+import { Icon as Icon$1 } from '../Icon/index.mjs';
+import { enabled as enabled$1, error as error$1 } from './Chip.tokens.mjs';
 import { bordersTemplate } from '@equinor/eds-utils';
 
 Icon$1.add({