@equinor/eds-core-react 2.3.6 → 2.4.0-beta.0

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/InputWrapper/InputWrapper.js

@@ -3,9 +3,9 @@ import styled, { ThemeProvider } from 'styled-components';
 import { useToken } from '@equinor/eds-utils';
 import { inputToken } from './InputWrapper.tokens.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 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/Popover/Popover.js

@@ -99,12 +99,12 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
   } = useInteractions([useDismiss(context)]);
   useEffect(() => {
     if (!elements.floating) return;
-    if (open) {
-      if (elements.floating.isConnected) {
+    if (elements.floating.hasAttribute('popover')) {
+      if (open) {
         elements.floating.showPopover();
+      } else {
+        elements.floating.hidePopover();
       }
-    } else {
-      elements.floating.hidePopover();
     }
   }, [open, elements.floating]);
   useEffect(() => {

package/dist/esm/components/Table/DataCell/DataCell.js

@@ -20,7 +20,7 @@ const StyledTableCell = styled.td.withConfig({
     align
   } = theme;
   const backgroundColor = color === 'error' ? theme.validation.error?.background : '';
-  const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
+  const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", " a{font-size:inherit;font-weight:inherit;}"], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
 const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({

package/dist/esm/components/Table/FooterCell/FooterCell.js

@@ -19,7 +19,7 @@ const StyledTableCell = styled.th.withConfig({
     typography,
     spacings
   } = theme;
-  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), $sticky ? css(["position:sticky;bottom:0;z-index:2;"]) : '');
+  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " a{font-size:inherit;font-weight:inherit;}", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), $sticky ? css(["position:sticky;bottom:0;z-index:2;"]) : '');
 });
 const CellInner = styled.div.withConfig({
   displayName: "FooterCell__CellInner",

package/dist/esm/components/Table/HeaderCell/HeaderCell.js

@@ -34,7 +34,7 @@ const StyledTableCell = styled.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 = isFirefox() ? css(["vertical-align:top;height:auto;min-height:", ";> div{padding:", " 0;}"], height, $density === 'compact' ? '7px' : '13px') : css([""]);
-  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, firefoxFix, $sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
+  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", " a{font-size:inherit;font-weight:inherit;}", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, firefoxFix, $sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
 });
 const CellInner = styled.div.withConfig({
   displayName: "HeaderCell__CellInner",

package/dist/esm/components/Textarea/Textarea.js

@@ -4,8 +4,8 @@ import { input as input$1 } from '../Input/Input.tokens.js';
 import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 import { useInputField } from '../InputWrapper/useInputField.js';
-import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { Input } from '../Input/Input.js';
 
 const {

package/dist/esm-next/components/next/Banner/Banner.js

@@ -0,0 +1,88 @@
+import { forwardRef } from 'react';
+import { close } from '@equinor/eds-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { TypographyNext } from '../../Typography/Typography.new.js';
+
+const BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon({
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx("span", {
+    ref: ref,
+    className: ['eds-banner__icon', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage({
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    family: "ui",
+    size: "md",
+    baseline: "center",
+    lineHeight: "default",
+    tracking: "normal",
+    className: ['eds-banner__message', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+const BannerActions = /*#__PURE__*/forwardRef(function BannerActions({
+  placement = 'left',
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: ['eds-banner__actions', className].filter(Boolean).join(' '),
+    "data-placement": placement,
+    ...rest,
+    children: children
+  });
+});
+const BannerComponent = /*#__PURE__*/forwardRef(function Banner({
+  tone = 'info',
+  role = 'status',
+  onDismiss,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: ['eds-banner', className].filter(Boolean).join(' '),
+    "data-color-appearance": tone,
+    role: role,
+    ...rest,
+    children: [children, onDismiss && /*#__PURE__*/jsx(Button, {
+      variant: "ghost",
+      icon: true,
+      size: "small",
+      className: "eds-banner__dismiss",
+      "aria-label": "Dismiss",
+      onClick: onDismiss,
+      children: /*#__PURE__*/jsx(Icon, {
+        data: close
+      })
+    })]
+  });
+});
+BannerIcon.displayName = 'Banner.Icon';
+BannerMessage.displayName = 'Banner.Message';
+BannerActions.displayName = 'Banner.Actions';
+BannerComponent.displayName = 'Banner';
+const Banner = BannerComponent;
+Banner.Icon = BannerIcon;
+Banner.Message = BannerMessage;
+Banner.Actions = BannerActions;
+
+export { Banner };

package/dist/esm-next/components/next/Button/Button.js

@@ -38,6 +38,7 @@ const Button = /*#__PURE__*/forwardRef(function Button({
     ...rest,
     children: icon ? children : /*#__PURE__*/jsx(TypographyNext, {
       as: "span",
+      className: "eds-button__label",
       family: "ui",
       size: typographySize,
       lineHeight: "squished",

package/dist/esm-next/components/next/Icon/Icon.js

@@ -1,6 +1,32 @@
 import { forwardRef, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+/**
+ * Icon component for EDS 2.0
+ *
+ * Features:
+ * - Automatic sizing from parent's data-font-size via --eds-typography-icon-size
+ * - Dynamic fallback sizing (1.5em) when no tokens are set
+ * - Explicit size prop for standalone usage
+ * - WCAG 2.1 AA accessible with optional title for semantic icons
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@equinor/eds-core-react/next'
+ * import { save } from '@equinor/eds-icons'
+ *
+ * // Auto-sized from parent's data-font-size
+ * <div data-font-size="md">
+ *   <Icon data={warning} /> Error message
+ * </div>
+ *
+ * // Explicit size for standalone usage
+ * <Icon data={save} size="lg" />
+ *
+ * // Semantic icon with accessible name
+ * <Icon data={save} title="Save document" />
+ * ```
+ */
 const Icon = /*#__PURE__*/forwardRef(function Icon({
   data,
   title,
@@ -19,7 +45,7 @@ const Icon = /*#__PURE__*/forwardRef(function Icon({
     height = '24',
     width = '24'
   } = data;
-  const classes = ['icon', className].filter(Boolean).join(' ');
+  const classes = ['eds-icon', className].filter(Boolean).join(' ');
 
   // Accessibility: decorative icons are hidden, semantic icons have role="img"
   const accessibilityProps = title ? {

package/dist/esm-next/components/next/Input/Input.js

@@ -56,7 +56,7 @@ const Input = /*#__PURE__*/forwardRef(function Input({
       })]
     }), /*#__PURE__*/jsx(Component, {
       ref: ref,
-      type: type,
+      type: Component === 'textarea' ? undefined : type,
       disabled: disabled,
       readOnly: readOnly,
       className: ['eds-input', className].filter(Boolean).join(' '),

package/dist/esm-next/components/next/Link/Link.js

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const Link = /*#__PURE__*/forwardRef(function Link({
+  variant = 'inline',
+  className,
+  children,
+  ...rest
+}, ref) {
+  const classes = ['eds-link', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/jsx("a", {
+    ref: ref,
+    className: classes,
+    "data-variant": variant,
+    "data-font-family": variant === 'standalone' ? 'ui' : undefined,
+    "data-font-size": variant === 'standalone' ? 'md' : undefined,
+    "data-line-height": variant === 'standalone' ? 'squished' : undefined,
+    ...rest,
+    children: children
+  });
+});
+Link.displayName = 'Link';
+
+export { Link };

package/dist/esm-next/components/next/Search/Search.js

@@ -0,0 +1,118 @@
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { close, search } from '@equinor/eds-icons';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFieldIds } from '../Field/useFieldIds.js';
+import { Field } from '../Field/Field.js';
+import { Input } from '../Input/Input.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+
+const Search = /*#__PURE__*/forwardRef(function Search({
+  label,
+  description,
+  helperMessage,
+  id: providedId,
+  invalid,
+  disabled,
+  readOnly,
+  value,
+  defaultValue,
+  onChange,
+  onClear,
+  clearLabel = 'Clear search',
+  ...inputProps
+}, forwardedRef) {
+  const {
+    inputId,
+    labelId,
+    descriptionId,
+    helperMessageId,
+    getDescribedBy
+  } = useFieldIds(providedId);
+  const isControlled = value !== undefined;
+  const [internalHasValue, setInternalHasValue] = useState(() => Boolean(defaultValue));
+  const hasValue = isControlled ? Boolean(value) : internalHasValue;
+  const inputRef = useRef(null);
+  const mergedRef = useCallback(node => {
+    inputRef.current = node;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef]);
+  const handleChange = e => {
+    if (!isControlled) {
+      setInternalHasValue(Boolean(e.target.value));
+    }
+    onChange?.(e);
+  };
+  const handleClear = () => {
+    if (!isControlled && inputRef.current) {
+      // Direct DOM mutation: bypasses React's synthetic onChange, which is
+      // intentional — onClear is the designated callback for clear actions.
+      inputRef.current.value = '';
+      setInternalHasValue(false);
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const showClear = hasValue && !disabled && !readOnly;
+  // Accent only in interactive states — grey in error, readonly, disabled
+  const iconTone = disabled || readOnly || invalid ? 'neutral' : 'accent';
+  return /*#__PURE__*/jsx("search", {
+    className: "eds-search",
+    "aria-labelledby": label ? labelId : undefined,
+    children: /*#__PURE__*/jsxs(Field, {
+      disabled: disabled,
+      children: [label && /*#__PURE__*/jsx(Field.Label, {
+        id: labelId,
+        htmlFor: inputId,
+        children: label
+      }), description && /*#__PURE__*/jsx(Field.Description, {
+        id: descriptionId,
+        children: description
+      }), /*#__PURE__*/jsx(Input, {
+        ref: mergedRef,
+        id: inputId,
+        type: "search",
+        disabled: disabled,
+        readOnly: readOnly,
+        invalid: invalid,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: handleChange,
+        "aria-describedby": getDescribedBy({
+          hasDescription: !!description,
+          hasHelperMessage: !!helperMessage
+        }),
+        hideErrorIcon: true,
+        startAdornment: /*#__PURE__*/jsx(Icon, {
+          data: search,
+          className: "search-icon",
+          "data-color-appearance": iconTone
+        }),
+        endAdornment: showClear ? /*#__PURE__*/jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: invalid ? 'neutral' : 'accent',
+          onClick: handleClear,
+          "aria-label": clearLabel,
+          children: /*#__PURE__*/jsx(Icon, {
+            data: close
+          })
+        }) : undefined,
+        ...inputProps
+      }), helperMessage && /*#__PURE__*/jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        role: invalid ? 'alert' : undefined,
+        children: helperMessage
+      })]
+    })
+  });
+});
+Search.displayName = 'Search';
+
+export { Search };

package/dist/esm-next/components/next/TextArea/TextArea.js

@@ -0,0 +1,131 @@
+import { forwardRef, useState, useEffect, useRef, useMemo } from 'react';
+import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
+import { info_circle } from '@equinor/eds-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFieldIds } from '../Field/useFieldIds.js';
+import { Field } from '../Field/Field.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { Input } from '../Input/Input.js';
+
+const TextArea = /*#__PURE__*/forwardRef(function TextArea({
+  label,
+  labelInfo,
+  indicator,
+  description,
+  helperMessage,
+  id: providedId,
+  invalid,
+  disabled,
+  maxRows,
+  showCharacterCount,
+  ...textareaProps
+}, ref) {
+  const {
+    inputId,
+    descriptionId,
+    helperMessageId,
+    getDescribedBy
+  } = useFieldIds(providedId);
+  const [charCount, setCharCount] = useState(() => String(textareaProps.value ?? textareaProps.defaultValue ?? '').length);
+  useEffect(() => {
+    if (textareaProps.value !== undefined) {
+      setCharCount(String(textareaProps.value).length);
+    }
+  }, [textareaProps.value]);
+  const {
+    maxLength,
+    onChange: onChangeProp,
+    ...restTextareaProps
+  } = textareaProps;
+  const handleChange = e => {
+    setCharCount(e.target.value.length);
+    onChangeProp?.(e);
+  };
+  const internalRef = useRef(null);
+  const [maxPixelHeight, setMaxPixelHeight] = useState(undefined);
+
+  // Auto-grow is always on. When maxRows is set, compute a pixel cap after
+  // mount using the element's actual rendered line-height and padding
+  // (density-aware). Until the cap is computed (or if maxRows is not set),
+  // pass Infinity so the textarea grows without bound.
+  const autoResizeHeight = maxRows !== undefined && maxPixelHeight !== undefined ? maxPixelHeight : Infinity;
+  const autoResizeRef = useAutoResize(autoResizeHeight);
+  useEffect(() => {
+    if (!maxRows || !internalRef.current) return;
+    const el = internalRef.current;
+    const updateMaxHeight = () => {
+      const style = window.getComputedStyle(el);
+      const lineHeight = parseFloat(style.lineHeight);
+      const paddingBlockStart = parseFloat(style.paddingBlockStart);
+      const paddingBlockEnd = parseFloat(style.paddingBlockEnd);
+      setMaxPixelHeight(lineHeight * maxRows + paddingBlockStart + paddingBlockEnd);
+    };
+    const observer = new ResizeObserver(updateMaxHeight);
+    observer.observe(el);
+    updateMaxHeight();
+    return () => observer.disconnect();
+  }, [maxRows]);
+  const combinedRef = useMemo(() => mergeRefs(ref, autoResizeRef, internalRef), [ref, autoResizeRef, internalRef]);
+  const showHelperRow = helperMessage || showCharacterCount;
+  return /*#__PURE__*/jsxs(Field, {
+    className: "eds-text-area",
+    disabled: disabled,
+    children: [label && /*#__PURE__*/jsxs("div", {
+      className: "label-row",
+      children: [/*#__PURE__*/jsx(Field.Label, {
+        htmlFor: inputId,
+        indicator: indicator,
+        children: label
+      }), labelInfo && /*#__PURE__*/jsx(Tooltip, {
+        title: labelInfo,
+        placement: "top",
+        children: /*#__PURE__*/jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: "neutral",
+          "aria-label": "More information",
+          children: /*#__PURE__*/jsx(Icon, {
+            data: info_circle,
+            size: "xs"
+          })
+        })
+      })]
+    }), description && /*#__PURE__*/jsx(Field.Description, {
+      id: descriptionId,
+      children: description
+    }), /*#__PURE__*/jsx(Input, {
+      ref: combinedRef,
+      as: "textarea",
+      id: inputId,
+      disabled: disabled,
+      invalid: invalid,
+      maxLength: maxLength,
+      onChange: handleChange,
+      "aria-describedby": getDescribedBy({
+        hasDescription: !!description,
+        hasHelperMessage: !!helperMessage
+      }),
+      ...restTextareaProps
+    }), showHelperRow && /*#__PURE__*/jsxs("div", {
+      className: "helper-row",
+      children: [helperMessage && /*#__PURE__*/jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        role: invalid ? 'alert' : undefined,
+        children: helperMessage
+      }), showCharacterCount && /*#__PURE__*/jsx("span", {
+        className: "char-count",
+        "data-font-family": "ui",
+        "data-font-size": "xs",
+        "aria-live": maxLength !== undefined && charCount >= maxLength * 0.8 ? 'polite' : 'off',
+        children: maxLength !== undefined ? `${charCount} / ${maxLength}` : charCount
+      })]
+    })]
+  });
+});
+TextArea.displayName = 'TextArea';
+
+export { TextArea };