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

package/dist/eds-core-react.cjs

@@ -1830,7 +1830,7 @@ const StyledTableCell$2 = styled__default.default.td.withConfig({
     align
   } = theme;
   const backgroundColor = color === 'error' ? theme.validation.error?.background : '';
-  const base = styled.css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(border));
+  const base = styled.css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", " a{font-size:inherit;font-weight:inherit;}"], height, height, backgroundColor, align.vertical, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(border));
   return base;
 });
 const TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell({
@@ -2011,7 +2011,7 @@ const StyledTableCell$1 = styled__default.default.th.withConfig({
   // Firefox specific workaround (bug in v142.0) - see issue #3910
   // Hardcoded padding values compensate for Firefox's incorrect table cell height calculation
   const firefoxFix = edsUtils.isFirefox() ? styled.css(["vertical-align:top;height:auto;min-height:", ";> div{padding:", " 0;}"], height, $density === 'compact' ? '7px' : '13px') : styled.css([""]);
-  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, firefoxFix, $sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
+  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", " a{font-size:inherit;font-weight:inherit;}", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, firefoxFix, $sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
 });
 const CellInner$1 = styled__default.default.div.withConfig({
   displayName: "HeaderCell__CellInner",
@@ -2061,7 +2061,7 @@ const StyledTableCell = styled__default.default.th.withConfig({
     typography,
     spacings
   } = theme;
-  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), $sticky ? styled.css(["position:sticky;bottom:0;z-index:2;"]) : '');
+  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " a{font-size:inherit;font-weight:inherit;}", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), $sticky ? styled.css(["position:sticky;bottom:0;z-index:2;"]) : '');
 });
 const CellInner = styled__default.default.div.withConfig({
   displayName: "FooterCell__CellInner",
@@ -5443,8 +5443,6 @@ const enabled$3 = {
   },
   entities: {
     icon: {
-      height: medium$3,
-      width: medium$3,
       border: {
         radius: borderRadius$3,
         type: 'border',
@@ -5596,7 +5594,7 @@ const Chip = /*#__PURE__*/react.forwardRef(function Chip({
   };
   const resizedChildren = react.Children.map(children, child => {
     // We force size on Icon & Avatar component
-    if (child.props) {
+    if (child?.props) {
       return /*#__PURE__*/react.cloneElement(child, {
         size: 16,
         disabled
@@ -6964,11 +6962,7 @@ const info$1 = {
         color: infoColor
       }
     }
-  },
-  modes: {
-    compact: {}
-  }
-};
+  }};
 const warning$1 = {
   entities: {
     icon: {
@@ -6977,11 +6971,7 @@ const warning$1 = {
         color: warningColor
       }
     }
-  },
-  modes: {
-    compact: {}
-  }
-};
+  }};
 
 var tokens$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9566,8 +9556,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 +9599,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),
@@ -9679,7 +9684,9 @@ function Option({
   const isSelected = selectedItemsLabels.includes(label);
   const optionComponent = _optionComponent?.(item, isSelected);
   const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
-  const itemProps = getItemProps({
+
+  // Guard: downshift 9.x validates that item exists in the items array
+  const itemProps = item !== undefined ? getItemProps({
     ...(multiline && {
       ref: rowVirtualizer.measureElement
     }),
@@ -9691,7 +9698,14 @@ function Option({
         height: `${virtualItem.size}px`
       })
     }
-  });
+  }) : {
+    style: {
+      transform: `translateY(${virtualItem.start}px)`,
+      ...(!multiline && {
+        height: `${virtualItem.size}px`
+      })
+    }
+  };
   return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
     $isdisabled: isDisabled ? 'true' : 'false',
     $highlighted: highlighted,
@@ -9751,7 +9765,7 @@ function AddNewOption({
       ref: rowVirtualizer.measureElement
     }),
     item,
-    index: index
+    index
   });
   return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
     $highlighted: highlighted,
@@ -9803,7 +9817,7 @@ function SelectAllOption({
       ref: rowVirtualizer.measureElement
     }),
     item,
-    index: index
+    index
   });
   return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
     ref: ref,
@@ -10318,7 +10332,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)));
           }
@@ -10475,6 +10495,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) {
@@ -10700,7 +10723,9 @@ const useAutocomplete = ({
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
           case downshift.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 {
@@ -12508,14 +12533,23 @@ function DateSegment({
 
 // 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 date.CalendarDate(new Date().getFullYear(), 1, 1);
+
 /**
  * A field that wraps segments for inputting a date / date-time
  */
 const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const placeholderValue = props.placeholderValue ?? DEFAULT_PLACEHOLDER;
   const state = datepicker.useDateFieldState({
     ...props,
     locale: props.locale,
-    createCalendar: date.createCalendar
+    createCalendar: date.createCalendar,
+    placeholderValue
   });
   const {
     fieldProps
@@ -12663,6 +12697,167 @@ const useGetLocale = locale => {
   return locale ?? currentLocale ?? browserLocale;
 };
 
+/**
+ * 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 date.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;
+}
+
 const DatePicker = /*#__PURE__*/react.forwardRef(({
   onChange,
   label,
@@ -12757,8 +12952,10 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
     fieldProps,
     calendarProps
   } = reactAria.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: edsTokens.tokens.colors.interactive.warning__text.rgba,
     icon: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
       size: 16,
@@ -13008,8 +13205,10 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
     buttonProps,
     calendarProps
   } = reactAria.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: edsTokens.tokens.colors.interactive.warning__text.rgba,
     icon: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
       size: 16,

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

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

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

@@ -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.mjs';
-import { AccordionHeaderTitle } from './AccordionHeaderTitle.mjs';
-import { AccordionHeaderActions } from './AccordionHeaderActions.mjs';
-import { accordion } from './Accordion.tokens.mjs';
+import { Icon } from '../Icon/index.js';
+import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
+import { AccordionHeaderActions } from './AccordionHeaderActions.js';
+import { accordion } from './Accordion.tokens.js';
 import { bordersTemplate, typographyTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

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

@@ -1,9 +1,9 @@
-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';
+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';
 
 const Accordion = Accordion$1;
 Accordion.Item = AccordionItem;

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

@@ -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.mjs';
-import { input } from '../Input/Input.tokens.mjs';
-import { useAutocompleteContext } from './AutocompleteContext.mjs';
-import { StyledListItem, AutocompleteOptionLabel } from './Option.mjs';
+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 { jsxs, jsx } from 'react/jsx-runtime';
 
 const StyledAddItemIcon = styled(Icon).withConfig({
@@ -40,7 +40,7 @@ function AddNewOption({
       ref: rowVirtualizer.measureElement
     }),
     item,
-    index: index
+    index
   });
   return /*#__PURE__*/jsxs(StyledListItem, {
     $highlighted: highlighted,

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

@@ -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.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 styled, { ThemeProvider, css } 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 { jsx, jsxs } from 'react/jsx-runtime';
-import { Label } from '../Label/Label.mjs';
-import { HelperText as TextfieldHelperText } from '../InputWrapper/HelperText/HelperText.mjs';
+import { Label } from '../Label/Label.js';
+import { HelperText as TextfieldHelperText } from '../InputWrapper/HelperText/HelperText.js';
 
 const Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",

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

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

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

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

@@ -1,10 +1,11 @@
 import { useRef } from 'react';
 import styled from 'styled-components';
-import { useAutocompleteContext } from './AutocompleteContext.mjs';
-import { RightAdornments } from './RightAdornments.mjs';
+import { useAutocompleteContext } from './AutocompleteContext.js';
+import { RightAdornments } from './RightAdornments.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Chip } from '../Chip/Chip.mjs';
-import { Input } from '../Input/Input.mjs';
+import { Chip } from '../Chip/Chip.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Input } from '../Input/Input.js';
 
 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.mjs → Option.js}

@@ -1,8 +1,8 @@
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import styled, { css } from 'styled-components';
-import { useAutocompleteContext } from './AutocompleteContext.mjs';
+import { useAutocompleteContext } from './AutocompleteContext.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Checkbox } from '../Checkbox/Checkbox.mjs';
+import { Checkbox } from '../Checkbox/Checkbox.js';
 
 const StyledListItem = styled.li.withConfig({
   displayName: "Option__StyledListItem",
@@ -48,7 +48,9 @@ function Option({
   const isSelected = selectedItemsLabels.includes(label);
   const optionComponent = _optionComponent?.(item, isSelected);
   const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
-  const itemProps = getItemProps({
+
+  // Guard: downshift 9.x validates that item exists in the items array
+  const itemProps = item !== undefined ? getItemProps({
     ...(multiline && {
       ref: rowVirtualizer.measureElement
     }),
@@ -60,7 +62,14 @@ function Option({
         height: `${virtualItem.size}px`
       })
     }
-  });
+  }) : {
+    style: {
+      transform: `translateY(${virtualItem.start}px)`,
+      ...(!multiline && {
+        height: `${virtualItem.size}px`
+      })
+    }
+  };
   return /*#__PURE__*/jsxs(StyledListItem, {
     $isdisabled: isDisabled ? 'true' : 'false',
     $highlighted: highlighted,