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

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

@@ -3,8 +3,8 @@ import { tokens } from '@equinor/eds-tokens';
 import { useRef, useMemo } from 'react';
 import { useCalendarCell } from 'react-aria';
 import { jsx } from 'react/jsx-runtime';
-import { useEds } from '../../EdsProvider/eds.context.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
+import { useEds } from '../../EdsProvider/eds.context.js';
+import { Typography } from '../../Typography/Typography.js';
 
 const StyledCell = styled(Typography).withConfig({
   displayName: "CalendarCell__StyledCell",

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

@@ -1,7 +1,7 @@
 import { useLocale, useCalendarGrid } from 'react-aria';
 import { getWeeksInMonth } from '@internationalized/date';
-import { CalendarCell } from './CalendarCell.mjs';
-import { YearGrid } from './YearGrid.mjs';
+import { CalendarCell } from './CalendarCell.js';
+import { YearGrid } from './YearGrid.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 /* eslint-disable react/no-array-index-key */

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

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-import { Button } from '../../Button/index.mjs';
-import { Icon } from '../../Icon/index.mjs';
+import { Button } from '../../Button/index.js';
+import { Icon } from '../../Icon/index.js';
 import { chevron_left, chevron_up, chevron_down, chevron_right } from '@equinor/eds-icons';
 import { CalendarDate } from '@internationalized/date';
 import { tokens } from '@equinor/eds-tokens';
-import { getPageYears } from '../utils/getPageYears.mjs';
+import { getPageYears } from '../utils/getPageYears.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const HeaderWrapper = styled.div.withConfig({

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

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

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
 import { FocusScope, useFocusManager } from 'react-aria';
 import { useRef, useEffect } from 'react';
-import { getPageYears } from '../utils/getPageYears.mjs';
+import { getPageYears } from '../utils/getPageYears.js';
 import { jsx } from 'react/jsx-runtime';
 
 // Disable no-autofocus - it's not the native autofocus attribute, but react-aria's autoFocus prop

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

@@ -1,7 +1,7 @@
 import { useDateFieldState } from '@react-stately/datepicker';
 import { forwardRef, useRef } from 'react';
-import { InputFieldWrapper } from './FieldWrapper.mjs';
-import { DateFieldSegments } from './DateFieldSegments.mjs';
+import { InputFieldWrapper } from './FieldWrapper.js';
+import { DateFieldSegments } from './DateFieldSegments.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /**

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

@@ -1,20 +1,29 @@
 import { useDateFieldState } from '@react-stately/datepicker';
 import { useDateField } from 'react-aria';
-import { createCalendar } from '@internationalized/date';
-import { DateSegment } from './DateSegment.mjs';
+import { CalendarDate, createCalendar } from '@internationalized/date';
+import { DateSegment } from './DateSegment.js';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // In some cases we need to use the index as key
 /* eslint-disable react/no-array-index-key */
+// Use January 1st as placeholder when no value is set.
+// This ensures the day segment allows values up to 31,
+// preventing eager auto-advance when typing "3" (which
+// would otherwise auto-complete to "03" in months with
+// fewer than 30 days, like February).
+const DEFAULT_PLACEHOLDER = new CalendarDate(new Date().getFullYear(), 1, 1);
+
 /**
  * A field that wraps segments for inputting a date / date-time
  */
 const DateFieldSegments = /*#__PURE__*/forwardRef((props, ref) => {
+  const placeholderValue = props.placeholderValue ?? DEFAULT_PLACEHOLDER;
   const state = useDateFieldState({
     ...props,
     locale: props.locale,
-    createCalendar
+    createCalendar,
+    placeholderValue
   });
   const {
     fieldProps

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

@@ -1,8 +1,8 @@
 import { forwardRef, useRef } from 'react';
-import { InputFieldWrapper } from './FieldWrapper.mjs';
-import { DateFieldSegments } from './DateFieldSegments.mjs';
+import { InputFieldWrapper } from './FieldWrapper.js';
+import { DateFieldSegments } from './DateFieldSegments.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../../Typography/Typography.mjs';
+import { Typography } from '../../Typography/Typography.js';
 
 /**
  * DateRangeField is the input field used in {@link DateRangePicker} to type in a date range.

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

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { useDateFormatter, useDateSegment } from 'react-aria';
 import styled, { css } from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
-import { useDatePickerContext } from '../utils/context.mjs';
+import { useDatePickerContext } from '../utils/context.js';
 import { jsx } from 'react/jsx-runtime';
 
 const Segment = styled.div.withConfig({

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

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
 import { forwardRef, useState, useEffect } from 'react';
-import { Popover } from '../../Popover/index.mjs';
+import { Popover } from '../../Popover/index.js';
 import { filterDOMProps } from '@react-aria/utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { InputWrapper } from '../../InputWrapper/InputWrapper.mjs';
-import { useEds } from '../../EdsProvider/eds.context.mjs';
+import { InputWrapper } from '../../InputWrapper/InputWrapper.js';
+import { useEds } from '../../EdsProvider/eds.context.js';
 
 const getVariant = variant => {
   if (variant === 'error') {

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

@@ -1,6 +1,6 @@
-import { Icon } from '../../Icon/index.mjs';
+import { Icon } from '../../Icon/index.js';
 import { close } from '@equinor/eds-icons';
-import { Button } from '../../Button/Button.mjs';
+import { Button } from '../../Button/Button.js';
 import styled from 'styled-components';
 import { filterDOMProps } from '@react-aria/utils';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/esm/components/Datepicker/utils/{get-calendar-date.mjs → get-calendar-date.js}

@@ -1,4 +1,4 @@
-import { toCalendarDateTime, toCalendarDate, fromDate } from '@internationalized/date';
+import { toCalendarDateTime, fromDate, toCalendarDate } from '@internationalized/date';
 
 const getCalendarDate = (value, timezone, showTimeInput = false) => {
   if (!value) return null;

package/dist/esm/components/Datepicker/utils/getLocalizedValidationErrors.js

@@ -0,0 +1,164 @@
+import { DateFormatter } from '@internationalized/date';
+
+/**
+ * Validation message translations matching @react-stately/datepicker's built-in messages.
+ * Sourced from @react-stately/datepicker's intlStrings bundle.
+ * Unsupported locales fall back to English.
+ */
+const allTranslations = {
+  'en-US': {
+    rangeUnderflow: args => `Value must be ${args.minValue} or later.`,
+    rangeOverflow: args => `Value must be ${args.maxValue} or earlier.`,
+    unavailableDate: 'Selected date unavailable.'
+  },
+  'nb-NO': {
+    rangeUnderflow: args => `Verdien m\u00e5 v\u00e6re ${args.minValue} eller senere.`,
+    rangeOverflow: args => `Verdien m\u00e5 v\u00e6re ${args.maxValue} eller tidligere.`,
+    unavailableDate: 'Valgt dato utilgjengelig.'
+  },
+  'da-DK': {
+    rangeUnderflow: args => `V\u00e6rdien skal v\u00e6re ${args.minValue} eller senere.`,
+    rangeOverflow: args => `V\u00e6rdien skal v\u00e6re ${args.maxValue} eller tidligere.`,
+    unavailableDate: 'Den valgte dato er ikke tilg\u00e6ngelig.'
+  },
+  'sv-SE': {
+    rangeUnderflow: args => `V\u00e4rdet m\u00e5ste vara ${args.minValue} eller senare.`,
+    rangeOverflow: args => `V\u00e4rdet m\u00e5ste vara ${args.maxValue} eller tidigare.`,
+    unavailableDate: 'Valt datum \u00e4r inte tillg\u00e4ngligt.'
+  },
+  'de-DE': {
+    rangeUnderflow: args => `Der Wert muss ${args.minValue} oder sp\u00e4ter sein.`,
+    rangeOverflow: args => `Der Wert muss ${args.maxValue} oder fr\u00fcher sein.`,
+    unavailableDate: 'Das ausgew\u00e4hlte Datum ist nicht verf\u00fcgbar.'
+  },
+  'fr-FR': {
+    rangeUnderflow: args => `La valeur doit \u00eatre ${args.minValue} ou ult\u00e9rieure.`,
+    rangeOverflow: args => `La valeur doit \u00eatre ${args.maxValue} ou ant\u00e9rieure.`,
+    unavailableDate: 'Date s\u00e9lectionn\u00e9e non disponible.'
+  },
+  'es-ES': {
+    rangeUnderflow: args => `El valor debe ser ${args.minValue} o posterior.`,
+    rangeOverflow: args => `El valor debe ser ${args.maxValue} o anterior.`,
+    unavailableDate: 'Fecha seleccionada no disponible.'
+  },
+  'pt-BR': {
+    rangeUnderflow: args => `O valor deve ser ${args.minValue} ou posterior.`,
+    rangeOverflow: args => `O valor deve ser ${args.maxValue} ou anterior.`,
+    unavailableDate: 'Data selecionada indispon\u00edvel.'
+  },
+  'pt-PT': {
+    rangeUnderflow: args => `O valor tem de ser ${args.minValue} ou posterior.`,
+    rangeOverflow: args => `O valor tem de ser ${args.maxValue} ou anterior.`,
+    unavailableDate: 'Data selecionada indispon\u00edvel.'
+  },
+  'pl-PL': {
+    rangeUnderflow: args => `Warto\u015b\u0107 musi wynosi\u0107 ${args.minValue} lub p\u00f3\u017aniej.`,
+    rangeOverflow: args => `Warto\u015b\u0107 musi wynosi\u0107 ${args.maxValue} lub wcze\u015bniej.`,
+    unavailableDate: 'Wybrana data jest niedost\u0119pna.'
+  },
+  'nl-NL': {
+    rangeUnderflow: args => `Waarde moet ${args.minValue} of later zijn.`,
+    rangeOverflow: args => `Waarde moet ${args.maxValue} of eerder zijn.`,
+    unavailableDate: 'Geselecteerde datum niet beschikbaar.'
+  },
+  'it-IT': {
+    rangeUnderflow: args => `Il valore deve essere ${args.minValue} o successivo.`,
+    rangeOverflow: args => `Il valore deve essere ${args.maxValue} o precedente.`,
+    unavailableDate: 'Data selezionata non disponibile.'
+  },
+  'ja-JP': {
+    rangeUnderflow: args => `\u5024\u306f${args.minValue}\u4ee5\u964d\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002`,
+    rangeOverflow: args => `\u5024\u306f${args.maxValue}\u4ee5\u524d\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002`,
+    unavailableDate: '\u9078\u629e\u3057\u305f\u65e5\u4ed8\u306f\u5229\u7528\u3067\u304d\u307e\u305b\u3093\u3002'
+  },
+  'ko-KR': {
+    rangeUnderflow: args => `\uac12\uc740 ${args.minValue} \uc774\ud6c4\uc5ec\uc57c \ud569\ub2c8\ub2e4.`,
+    rangeOverflow: args => `\uac12\uc740 ${args.maxValue} \uc774\uc804\uc774\uc5b4\uc57c \ud569\ub2c8\ub2e4.`,
+    unavailableDate: '\uc120\ud0dd\ud55c \ub0a0\uc9dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.'
+  },
+  'zh-CN': {
+    rangeUnderflow: args => `\u503c\u5fc5\u987b\u4e3a ${args.minValue} \u6216\u66f4\u665a\u3002`,
+    rangeOverflow: args => `\u503c\u5fc5\u987b\u4e3a ${args.maxValue} \u6216\u66f4\u65e9\u3002`,
+    unavailableDate: '\u6240\u9009\u65e5\u671f\u4e0d\u53ef\u7528\u3002'
+  },
+  'zh-TW': {
+    rangeUnderflow: args => `\u503c\u5fc5\u9808\u70ba ${args.minValue} \u6216\u66f4\u665a\u3002`,
+    rangeOverflow: args => `\u503c\u5fc5\u9808\u70ba ${args.maxValue} \u6216\u66f4\u65e9\u3002`,
+    unavailableDate: '\u6240\u9078\u65e5\u671f\u4e0d\u53ef\u7528\u3002'
+  },
+  'ru-RU': {
+    rangeUnderflow: args => `\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c ${args.minValue} \u0438\u043b\u0438 \u043f\u043e\u0437\u0436\u0435.`,
+    rangeOverflow: args => `\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c ${args.maxValue} \u0438\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435.`,
+    unavailableDate: '\u0412\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0434\u0430\u0442\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430.'
+  },
+  'uk-UA': {
+    rangeUnderflow: args => `\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u043c\u0430\u0454 \u0431\u0443\u0442\u0438 ${args.minValue} \u0430\u0431\u043e \u043f\u0456\u0437\u043d\u0456\u0448\u0435.`,
+    rangeOverflow: args => `\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u043c\u0430\u0454 \u0431\u0443\u0442\u0438 ${args.maxValue} \u0430\u0431\u043e \u0440\u0430\u043d\u0456\u0448\u0435.`,
+    unavailableDate: '\u0412\u0438\u0431\u0440\u0430\u043d\u0430 \u0434\u0430\u0442\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430.'
+  },
+  'ar-AE': {
+    rangeUnderflow: args => `\u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u064a\u0645\u0629 ${args.minValue} \u0623\u0648 \u0623\u062d\u062f\u062b.`,
+    rangeOverflow: args => `\u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u064a\u0645\u0629 ${args.maxValue} \u0623\u0648 \u0623\u0642\u062f\u0645.`,
+    unavailableDate: '\u0627\u0644\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0645\u062d\u062f\u062f \u063a\u064a\u0631 \u0645\u062a\u0627\u062d.'
+  },
+  'fi-FI': {
+    rangeUnderflow: args => `Arvon on oltava ${args.minValue} tai my\u00f6hempi.`,
+    rangeOverflow: args => `Arvon on oltava ${args.maxValue} tai aikaisempi.`,
+    unavailableDate: 'Valittu p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4 ei ole k\u00e4ytett\u00e4viss\u00e4.'
+  }
+};
+const englishFallback = allTranslations['en-US'];
+
+/**
+ * Find the best matching locale from available translations.
+ * Tries exact match first (e.g. "nb-NO"), then language prefix match (e.g. "nb" → "nb-NO").
+ */
+function findLocaleMessages(locale) {
+  if (allTranslations[locale]) return allTranslations[locale];
+  const language = Intl.Locale ? new Intl.Locale(locale).language : locale.split('-')[0];
+
+  // First match wins: e.g. "pt" → "pt-BR", "zh" → "zh-CN"
+  for (const key of Object.keys(allTranslations)) {
+    const keyLang = key.split('-')[0];
+    if (keyLang === language) return allTranslations[key];
+  }
+  return englishFallback;
+}
+function formatMessage(msg, args) {
+  return typeof msg === 'function' ? msg(args) : msg;
+}
+
+/**
+ * Generates validation error messages using the provided locale instead of
+ * navigator.language (which is what react-stately uses internally).
+ *
+ * This fixes the issue where validation messages appear in the browser's
+ * language rather than the locale configured via I18nProvider.
+ */
+function getLocalizedValidationErrors(validationDetails, locale, minValue, maxValue, timezone) {
+  const msgs = findLocaleMessages(locale);
+  const dateFormatter = new DateFormatter(locale, {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric'
+  });
+  const timeZone = timezone ?? dateFormatter.resolvedOptions().timeZone;
+  const errors = [];
+  if (validationDetails.rangeUnderflow && minValue && msgs.rangeUnderflow) {
+    errors.push(formatMessage(msgs.rangeUnderflow, {
+      minValue: dateFormatter.format(minValue.toDate(timeZone))
+    }));
+  }
+  if (validationDetails.rangeOverflow && maxValue && msgs.rangeOverflow) {
+    errors.push(formatMessage(msgs.rangeOverflow, {
+      maxValue: dateFormatter.format(maxValue.toDate(timeZone))
+    }));
+  }
+  // react-stately maps isDateUnavailable to badInput (not customError)
+  if (validationDetails.badInput && msgs.unavailableDate) {
+    errors.push(formatMessage(msgs.unavailableDate, {}));
+  }
+  return errors;
+}
+
+export { getLocalizedValidationErrors };

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

@@ -1,5 +1,5 @@
 import { toCalendarDate, fromDate } from '@internationalized/date';
-import { defaultTimezone } from './context.mjs';
+import { defaultTimezone } from './context.js';
 
 const useConvertedValidationFunctions = (minValue, maxValue, isDateUnavailable, timezone) => {
   const tz = timezone ?? defaultTimezone;

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

@@ -1,10 +1,10 @@
 import { forwardRef, useRef, useMemo, useEffect } from 'react';
 import styled, { ThemeProvider, css } from 'styled-components';
 import { useToken, mergeRefs, useHideBodyScroll, bordersTemplate, typographyTemplate } from '@equinor/eds-utils';
-import { dialog } from './Dialog.tokens.mjs';
+import { dialog } from './Dialog.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.mjs';
-import { Paper } from '../Paper/Paper.mjs';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Paper } from '../Paper/Paper.js';
 
 const StyledDialog = styled(Paper).attrs({
   'aria-labelledby': 'eds-dialog-title',

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

@@ -2,7 +2,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.mjs';
+import { Divider } from '../Divider/Divider.js';
 
 const StyledDialogContent = styled.div.withConfig({
   displayName: "DialogContent__StyledDialogContent",

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.mjs';
+import { Divider } from '../Divider/Divider.js';
 
 const StyledDialogHeader = styled.div.withConfig({
   displayName: "DialogHeader__StyledDialogHeader",

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

@@ -1,8 +1,8 @@
-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';
+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';
 
 const Dialog = Dialog$1;
 Dialog.Actions = DialogActions;

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

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

package/dist/esm/components/EdsProvider/{eds.context.mjs → eds.context.js}

@@ -1,4 +1,4 @@
-import { useContext, useState, useEffect, createContext } from 'react';
+import { useState, useEffect, useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {

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

@@ -1,6 +1,6 @@
 import { forwardRef, useId } from 'react';
 import styled from 'styled-components';
-import { get } from './library.mjs';
+import { get } from './library.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const StyledSvg = styled.svg.attrs(({

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

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

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

@@ -1,9 +1,9 @@
 import { forwardRef, useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { useToken, outlineTemplate, spacingsTemplate, typographyMixin } from '@equinor/eds-utils';
-import { inputToken } from './Input.tokens.mjs';
+import { inputToken } from './Input.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.mjs';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const Container = styled.div.withConfig({
   displayName: "Input__Container",

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

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

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyMixin } from '@equinor/eds-utils';
-import { helperText } from './HelperText.token.mjs';
+import { helperText } from './HelperText.token.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const Container = styled.div.withConfig({

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

@@ -1,11 +1,11 @@
 import { forwardRef, useCallback } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { useToken } from '@equinor/eds-utils';
-import { inputToken } from './InputWrapper.tokens.mjs';
+import { inputToken } from './InputWrapper.tokens.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Label as Label$1 } from '../Label/Label.mjs';
-import { HelperText as TextfieldHelperText } from './HelperText/HelperText.mjs';
-import { useEds } from '../EdsProvider/eds.context.mjs';
+import { Label as Label$1 } from '../Label/Label.js';
+import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const Container = styled.div.withConfig({
   displayName: "InputWrapper__Container",

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

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

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { typographyTemplate } from '@equinor/eds-utils';
-import { label } from './Label.tokens.mjs';
+import { label } from './Label.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const LabelBase = styled.label.withConfig({

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

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { list } from './List.tokens.mjs';
+import { list } from './List.tokens.js';
 import { typographyTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 

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

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

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

@@ -1,4 +1,4 @@
-import { useContext, useState, createContext } from 'react';
+import { useState, useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {

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

@@ -1,13 +1,13 @@
 import { forwardRef, useMemo, useEffect } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
-import { MenuProvider, useMenu } from './Menu.context.mjs';
-import { MenuList } from './MenuList.mjs';
+import { MenuProvider, useMenu } from './Menu.context.js';
+import { MenuList } from './MenuList.js';
 import { useToken, mergeRefs, useIsomorphicLayoutEffect, bordersTemplate, useGlobalKeyPress } from '@equinor/eds-utils';
-import { menu } from './Menu.tokens.mjs';
+import { menu } from './Menu.tokens.js';
 import { offset, flip, shift, size, useFloating, autoUpdate, useInteractions, useDismiss } from '@floating-ui/react';
 import { jsx } from 'react/jsx-runtime';
-import { useEds } from '../EdsProvider/eds.context.mjs';
-import { Paper } from '../Paper/Paper.mjs';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Paper } from '../Paper/Paper.js';
 
 const {
   border

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

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { menu } from './Menu.tokens.mjs';
+import { menu } from './Menu.tokens.js';
 import { mergeRefs, typographyTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
-import { useMenu } from './Menu.context.mjs';
+import { useMenu } from './Menu.context.js';
 import { jsx } from 'react/jsx-runtime';
 
 const {

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

@@ -1,9 +1,9 @@
 import { forwardRef, useMemo, Children, cloneElement, useEffect, isValidElement } from 'react';
 import styled from 'styled-components';
-import { useMenu } from './Menu.context.mjs';
-import { MenuItem } from './MenuItem.mjs';
-import { MenuSection } from './MenuSection.mjs';
-import { menu } from './Menu.tokens.mjs';
+import { useMenu } from './Menu.context.js';
+import { MenuItem } from './MenuItem.js';
+import { MenuSection } from './MenuSection.js';
+import { menu } from './Menu.tokens.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 

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

@@ -1,10 +1,10 @@
 import { memo } from 'react';
 import styled from 'styled-components';
-import { menu } from './Menu.tokens.mjs';
+import { menu } from './Menu.tokens.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.mjs';
-import { Typography } from '../Typography/Typography.mjs';
+import { Divider } from '../Divider/Divider.js';
+import { Typography } from '../Typography/Typography.js';
 
 const Header = styled.div.attrs(() => ({
   tabIndex: 0

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

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

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

@@ -1,14 +1,14 @@
 import { forwardRef, useState } from 'react';
 import styled from 'styled-components';
 import { useIsMounted, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
-import { Button } from '../Button/index.mjs';
-import { Icon } from '../Icon/index.mjs';
-import { PaginationItem } from './PaginationItem.mjs';
-import { pagination } from './Pagination.tokens.mjs';
+import { Button } from '../Button/index.js';
+import { Icon } from '../Icon/index.js';
+import { PaginationItem } from './PaginationItem.js';
+import { pagination } from './Pagination.tokens.js';
 import { more_horizontal, chevron_right, chevron_left } from '@equinor/eds-icons';
-import { PaginationControl } from './paginationControl.mjs';
+import { PaginationControl } from './paginationControl.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.mjs';
+import { Typography } from '../Typography/Typography.js';
 
 const icons = {
   chevron_left,

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

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
-import { Button } from '../Button/index.mjs';
-import { pagination } from './Pagination.tokens.mjs';
+import { Button } from '../Button/index.js';
+import { pagination } from './Pagination.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
 const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem({