@equinor/eds-core-react 2.3.3 → 2.3.4-beta.0

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

@@ -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.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 { 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 { jsx, jsxs } from 'react/jsx-runtime';
 
 const OptionList = ({

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

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

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

@@ -1,7 +1,7 @@
-import { useAutocompleteContext } from './AutocompleteContext.mjs';
-import { StyledListItem, AutocompleteOptionLabel } from './Option.mjs';
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Checkbox } from '../Checkbox/Checkbox.mjs';
+import { Checkbox } from '../Checkbox/Checkbox.js';
 
 function SelectAllOption({
   item,
@@ -27,7 +27,7 @@ function SelectAllOption({
       ref: rowVirtualizer.measureElement
     }),
     item,
-    index: index
+    index
   });
   return /*#__PURE__*/jsxs(StyledListItem, {
     ref: ref,

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

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

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

@@ -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.mjs';
-import { multiSelect, selectTokens } from './Autocomplete.tokens.mjs';
-import { findPrevIndex, findNextIndex, mergeEventsFromRight } from './utils.mjs';
-import { useEds } from '../EdsProvider/eds.context.mjs';
+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';
 
 const useAutocomplete = ({
   options = [],
@@ -112,7 +112,13 @@ const useAutocomplete = ({
       ...multipleSelectionProps,
       onSelectedItemsChange: changes => {
         if (onOptionsChange) {
-          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol || item !== AddSymbol);
+          // AddSymbol/AllSymbol are handled manually in onStateChange,
+          // so skip propagating when they appear in selectedItems
+          // (downshift 9.x propagates selectedItem to useMultipleSelection)
+          if (changes.selectedItems.some(item => item === AllSymbol || item === AddSymbol)) {
+            return;
+          }
+          let selectedItems = changes.selectedItems;
           if (itemCompare) {
             selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
           }
@@ -269,6 +275,9 @@ const useAutocomplete = ({
               toggleAllSelected();
             } else if (selectedItem === AddSymbol && typedInputValue.trim()) {
               onAddNewOption?.(typedInputValue);
+              if (clearSearchOnChange) {
+                setTypedInputValue('');
+              }
             } else if (multiple) {
               const shouldRemove = itemCompare ? selectedItems.some(i => itemCompare(selectedItem, i)) : selectedItems.includes(selectedItem);
               if (shouldRemove) {
@@ -494,7 +503,9 @@ const useAutocomplete = ({
             };
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
           case useCombobox.stateChangeTypes.ItemClick:
-            if (clearSearchOnChange) {
+            // Don't clear typedInputValue for AddSymbol — onStateChange needs
+            // it to call onAddNewOption (downshift 9.x runs onStateChange after re-render)
+            if (clearSearchOnChange && changes.selectedItem !== AddSymbol) {
               setTypedInputValue('');
             }
             return {

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

@@ -1,5 +1,5 @@
-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';
+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';
 
 const findIndex = ({
   calc,

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

@@ -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.mjs';
+import { avatar } from './Avatar.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledAvatar = styled.div.withConfig({

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

@@ -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.mjs';
-import { BannerIcon } from './BannerIcon.mjs';
+import { enabled } from './Banner.tokens.js';
+import { BannerIcon } from './BannerIcon.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.mjs';
-import { Paper } from '../Paper/Paper.mjs';
-import { Divider } from '../Divider/Divider.mjs';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Paper } from '../Paper/Paper.js';
+import { Divider } from '../Divider/Divider.js';
 
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",

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

@@ -74,11 +74,7 @@ const info = {
         color: infoColor
       }
     }
-  },
-  modes: {
-    compact: {}
-  }
-};
+  }};
 const warning = {
   entities: {
     icon: {
@@ -87,10 +83,6 @@ const warning = {
         color: warningColor
       }
     }
-  },
-  modes: {
-    compact: {}
-  }
-};
+  }};
 
 export { enabled, info, warning };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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.mjs';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.mjs';
+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';
 
 const {
   clickbounds: {

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

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

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

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

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

@@ -1,8 +1,8 @@
-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';
+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';
 
 const token = {
   primary: {

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

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

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

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import * as Card_tokens from './Card.tokens.mjs';
+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.mjs';
+import { Paper } from '../Paper/Paper.js';
 
 const {
   primary

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
-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';
+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';
 
 const Card = Card$1;
 Card.Actions = CardActions;

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

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { checkbox } from './Checkbox.tokens.mjs';
+import { checkbox } from './Checkbox.tokens.js';
 import { typographyTemplate } from '@equinor/eds-utils';
-import { CheckboxInput } from './Input.mjs';
+import { CheckboxInput } from './Input.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /* eslint camelcase: "off" */

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

@@ -1,10 +1,10 @@
 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.mjs';
+import { checkbox } from './Checkbox.tokens.js';
 import { useToken, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.mjs';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 /* eslint camelcase: "off" */
 const StyledPath = styled.path.attrs(({

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

@@ -1,7 +1,7 @@
 import { forwardRef, Children, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
-import { Icon } from './Icon.mjs';
-import * as Chip_tokens from './Chip.tokens.mjs';
+import { Icon } from './Icon.js';
+import * as Chip_tokens from './Chip.tokens.js';
 import { outlineTemplate, bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -85,7 +85,7 @@ const Chip = /*#__PURE__*/forwardRef(function Chip({
   };
   const resizedChildren = Children.map(children, child => {
     // We force size on Icon & Avatar component
-    if (child.props) {
+    if (child?.props) {
       return /*#__PURE__*/cloneElement(child, {
         size: 16,
         disabled

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

@@ -107,8 +107,6 @@ const enabled = {
   },
   entities: {
     icon: {
-      height: medium,
-      width: medium,
       border: {
         radius: borderRadius,
         type: 'border',

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

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

package/dist/esm/components/Datepicker/{DatePicker.mjs → DatePicker.js}

@@ -1,18 +1,19 @@
 import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
-import { Calendar } from './calendars/Calendar.mjs';
-import { DateField } from './fields/DateField.mjs';
+import { Calendar } from './calendars/Calendar.js';
+import { DateField } from './fields/DateField.js';
 import { calendar, warning_outlined } from '@equinor/eds-icons';
-import { useConvertedValidationFunctions } from './utils/useConvertedValidationFunctions.mjs';
-import { FieldWrapper } from './fields/FieldWrapper.mjs';
-import { Toggle } from './fields/Toggle.mjs';
+import { useConvertedValidationFunctions } from './utils/useConvertedValidationFunctions.js';
+import { FieldWrapper } from './fields/FieldWrapper.js';
+import { Toggle } from './fields/Toggle.js';
 import { toCalendarDateTime, fromDate, toCalendarDate, createCalendar } from '@internationalized/date';
 import { useDatePicker, I18nProvider } from 'react-aria';
 import { useDatePickerState } from '@react-stately/datepicker';
-import { DatePickerProvider, defaultTimezone } from './utils/context.mjs';
+import { DatePickerProvider, defaultTimezone } from './utils/context.js';
 import { tokens } from '@equinor/eds-tokens';
-import { Icon } from '../Icon/index.mjs';
-import { getCalendarDate } from './utils/get-calendar-date.mjs';
-import { useGetLocale } from './utils/useGetLocale.mjs';
+import { Icon } from '../Icon/index.js';
+import { getCalendarDate } from './utils/get-calendar-date.js';
+import { useGetLocale } from './utils/useGetLocale.js';
+import { getLocalizedValidationErrors } from './utils/getLocalizedValidationErrors.js';
 import { jsx } from 'react/jsx-runtime';
 
 const DatePicker = /*#__PURE__*/forwardRef(({
@@ -109,8 +110,10 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     fieldProps,
     calendarProps
   } = useDatePicker(dateCreateProps, pickerState, ref);
+  const localizedErrors = pickerState.displayValidation.isInvalid ? getLocalizedValidationErrors(pickerState.displayValidation.validationDetails, locale, _minValue, _maxValue, timezone) : [];
+  const errorMessages = localizedErrors.length > 0 ? localizedErrors : pickerState.displayValidation.validationErrors;
   const helperPropsInvalid = pickerState.displayValidation.isInvalid ? {
-    text: pickerState.displayValidation.validationErrors.join('\n'),
+    text: errorMessages.join('\n'),
     color: tokens.colors.interactive.warning__text.rgba,
     icon: /*#__PURE__*/jsx(Icon, {
       size: 16,

package/dist/esm/components/Datepicker/{DateRangePicker.mjs → DateRangePicker.js}

@@ -1,18 +1,19 @@
 import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
-import { RangeCalendar } from './calendars/RangeCalendar.mjs';
+import { RangeCalendar } from './calendars/RangeCalendar.js';
 import { calendar_date_range, warning_outlined } from '@equinor/eds-icons';
-import { useConvertedValidationFunctions } from './utils/useConvertedValidationFunctions.mjs';
-import { FieldWrapper } from './fields/FieldWrapper.mjs';
-import { Toggle } from './fields/Toggle.mjs';
+import { useConvertedValidationFunctions } from './utils/useConvertedValidationFunctions.js';
+import { FieldWrapper } from './fields/FieldWrapper.js';
+import { Toggle } from './fields/Toggle.js';
 import { useDateRangePicker, I18nProvider } from 'react-aria';
 import { useDateRangePickerState } from '@react-stately/datepicker';
-import { DateRangeField } from './fields/DateRangeField.mjs';
+import { DateRangeField } from './fields/DateRangeField.js';
 import { toCalendarDate, fromDate } from '@internationalized/date';
-import { DatePickerProvider, defaultTimezone } from './utils/context.mjs';
+import { DatePickerProvider, defaultTimezone } from './utils/context.js';
 import { tokens } from '@equinor/eds-tokens';
-import { Icon } from '../Icon/index.mjs';
-import { getCalendarDate } from './utils/get-calendar-date.mjs';
-import { useGetLocale } from './utils/useGetLocale.mjs';
+import { Icon } from '../Icon/index.js';
+import { getCalendarDate } from './utils/get-calendar-date.js';
+import { useGetLocale } from './utils/useGetLocale.js';
+import { getLocalizedValidationErrors } from './utils/getLocalizedValidationErrors.js';
 import { jsx } from 'react/jsx-runtime';
 
 const DateRangePicker = /*#__PURE__*/forwardRef(({
@@ -96,8 +97,10 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
     buttonProps,
     calendarProps
   } = useDateRangePicker(dateRangePickerStateProps, state, ref);
+  const localizedErrors = state.displayValidation.isInvalid ? getLocalizedValidationErrors(state.displayValidation.validationDetails, locale, _minValue, _maxValue, timezone) : [];
+  const errorMessages = localizedErrors.length > 0 ? localizedErrors : state.displayValidation.validationErrors;
   const helperProps = state.displayValidation.isInvalid ? {
-    text: state.displayValidation.validationErrors.join('\n'),
+    text: errorMessages.join('\n'),
     color: tokens.colors.interactive.warning__text.rgba,
     icon: /*#__PURE__*/jsx(Icon, {
       size: 16,

package/dist/esm/components/Datepicker/calendars/{Calendar.mjs → Calendar.js}

@@ -1,11 +1,11 @@
 import { useLocale, useCalendar } from 'react-aria';
 import { forwardRef, useState } from 'react';
 import { useCalendarState } from '@react-stately/calendar';
-import { CalendarGrid } from './CalendarGrid.mjs';
-import { CalendarHeader } from './CalendarHeader.mjs';
+import { CalendarGrid } from './CalendarGrid.js';
+import { CalendarHeader } from './CalendarHeader.js';
 import { createCalendar } from '@internationalized/date';
-import { Popover } from '../../Popover/index.mjs';
-import { CalendarWrapper } from './CalendarWrapper.mjs';
+import { Popover } from '../../Popover/index.js';
+import { CalendarWrapper } from './CalendarWrapper.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const Calendar = /*#__PURE__*/forwardRef(({