@equinor/eds-core-react 2.4.0 → 2.4.1

package/dist/index.next.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
 var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var edsIcons = require('@equinor/eds-icons');
+var jsxRuntime = require('react/jsx-runtime');
+var edsUtils = require('@equinor/eds-utils');
 var reactDom = require('react-dom');
 var styled = require('styled-components');
-var edsUtils = require('@equinor/eds-utils');
 var edsTokens = require('@equinor/eds-tokens');
 var react$1 = require('@floating-ui/react');
 
@@ -609,7 +609,7 @@ const Input = /*#__PURE__*/react.forwardRef(function Input({
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Component, {
       ref: ref,
-      type: type,
+      type: Component === 'textarea' ? undefined : type,
       disabled: disabled,
       readOnly: readOnly,
       className: ['eds-input', className].filter(Boolean).join(' '),
@@ -709,7 +709,7 @@ const TooltipArrow = styled__default.default.svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
 })(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
-const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip({
+const Tooltip$1 = /*#__PURE__*/react.forwardRef(function Tooltip({
   title,
   placement = 'bottom',
   children,
@@ -856,14 +856,13 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
   } = useFieldIds(providedId);
   return /*#__PURE__*/jsxRuntime.jsxs(Field, {
     disabled: disabled,
-    className: "eds-text-field",
     children: [label && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "eds-text-field__header",
       children: [/*#__PURE__*/jsxRuntime.jsx(Field.Label, {
         htmlFor: inputId,
         indicator: indicator,
         children: label
-      }), labelInfo && /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+      }), labelInfo && /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
         title: labelInfo,
         placement: "top",
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -901,12 +900,424 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
   });
 });
 
+const TextArea = /*#__PURE__*/react.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] = react.useState(() => String(textareaProps.value ?? textareaProps.defaultValue ?? '').length);
+  react.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 = react.useRef(null);
+  const [maxPixelHeight, setMaxPixelHeight] = react.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 = edsUtils.useAutoResize(autoResizeHeight);
+  react.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 = react.useMemo(() => edsUtils.mergeRefs(ref, autoResizeRef, internalRef), [ref, autoResizeRef, internalRef]);
+  const showHelperRow = helperMessage || showCharacterCount;
+  return /*#__PURE__*/jsxRuntime.jsxs(Field, {
+    className: "eds-text-area",
+    disabled: disabled,
+    children: [label && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "label-row",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Field.Label, {
+        htmlFor: inputId,
+        indicator: indicator,
+        children: label
+      }), labelInfo && /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
+        title: labelInfo,
+        placement: "top",
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: "neutral",
+          "aria-label": "More information",
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+            data: edsIcons.info_circle,
+            size: "xs"
+          })
+        })
+      })]
+    }), description && /*#__PURE__*/jsxRuntime.jsx(Field.Description, {
+      id: descriptionId,
+      children: description
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+      className: "helper-row",
+      children: [helperMessage && /*#__PURE__*/jsxRuntime.jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        role: invalid ? 'alert' : undefined,
+        children: helperMessage
+      }), showCharacterCount && /*#__PURE__*/jsxRuntime.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';
+
+const Search = /*#__PURE__*/react.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] = react.useState(() => Boolean(defaultValue));
+  const hasValue = isControlled ? Boolean(value) : internalHasValue;
+  const inputRef = react.useRef(null);
+  const mergedRef = react.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__*/jsxRuntime.jsx("search", {
+    className: "eds-search",
+    "aria-labelledby": label ? labelId : undefined,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Field, {
+      disabled: disabled,
+      children: [label && /*#__PURE__*/jsxRuntime.jsx(Field.Label, {
+        id: labelId,
+        htmlFor: inputId,
+        children: label
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Field.Description, {
+        id: descriptionId,
+        children: description
+      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Icon, {
+          data: edsIcons.search,
+          className: "search-icon",
+          "data-color-appearance": iconTone
+        }),
+        endAdornment: showClear ? /*#__PURE__*/jsxRuntime.jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: invalid ? 'neutral' : 'accent',
+          onClick: handleClear,
+          "aria-label": clearLabel,
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+            data: edsIcons.close
+          })
+        }) : undefined,
+        ...inputProps
+      }), helperMessage && /*#__PURE__*/jsxRuntime.jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        role: invalid ? 'alert' : undefined,
+        children: helperMessage
+      })]
+    })
+  });
+});
+Search.displayName = 'Search';
+
+const Link = /*#__PURE__*/react.forwardRef(function Link({
+  variant = 'inline',
+  className,
+  children,
+  ...rest
+}, ref) {
+  const classes = ['eds-link', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/jsxRuntime.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';
+
+const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip({
+  title,
+  placement = 'top',
+  disabled,
+  children,
+  className,
+  onMouseEnter: onMouseEnterProp,
+  onMouseLeave: onMouseLeaveProp,
+  ...rest
+}, ref) {
+  const uid = react.useId();
+  const tooltipId = `eds-tooltip-${uid.replace(/:/g, '')}`;
+  const anchorName = `--${tooltipId}`;
+  const tooltipRef = react.useRef(null);
+  const hideTimer = react.useRef(null);
+  const active = Boolean(title) && !disabled;
+  const show = () => {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    if (!tooltipRef.current?.matches(':popover-open')) {
+      tooltipRef.current?.showPopover();
+    }
+  };
+
+  // Short delay so mouse can travel from trigger to tooltip (WCAG 1.4.13 — hoverable)
+  const hide = () => {
+    hideTimer.current = setTimeout(() => {
+      if (tooltipRef.current?.matches(':popover-open')) {
+        tooltipRef.current.hidePopover();
+      }
+    }, 100);
+  };
+
+  // Merge forwarded ref with internal ref
+  const setRef = node => {
+    tooltipRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+  };
+  if (!active) return children;
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    className: "eds-tooltip-anchor",
+    style: {
+      '--tooltip-anchor-name': anchorName
+    },
+    onMouseEnter: show,
+    onMouseLeave: hide,
+    onFocus: show,
+    onBlur: hide,
+    children: [/*#__PURE__*/react.cloneElement(children, {
+      'aria-describedby': tooltipId
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: setRef,
+      id: tooltipId,
+      role: "tooltip"
+      // hint: top-layer + Escape/light-dismiss. Safari falls back to manual (no Escape).
+      ,
+      popover: "hint",
+      className: ['eds-tooltip', className].filter(Boolean).join(' '),
+      "data-placement": placement,
+      "data-space-proportions": "squished",
+      ...rest,
+      onMouseEnter: e => {
+        if (hideTimer.current) clearTimeout(hideTimer.current);
+        onMouseEnterProp?.(e);
+      },
+      onMouseLeave: e => {
+        hide();
+        onMouseLeaveProp?.(e);
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "label",
+        "data-font-family": "ui",
+        "data-font-size": "sm",
+        "data-baseline": "center",
+        children: title
+      })
+    })]
+  });
+});
+Tooltip.displayName = 'Tooltip';
+
+const BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon({
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
+    className: ['eds-banner__icon', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+const BannerMessage = /*#__PURE__*/react.forwardRef(function BannerMessage({
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.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__*/react.forwardRef(function BannerActions({
+  placement = 'left',
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    className: ['eds-banner__actions', className].filter(Boolean).join(' '),
+    "data-placement": placement,
+    ...rest,
+    children: children
+  });
+});
+const BannerComponent = /*#__PURE__*/react.forwardRef(function Banner({
+  tone = 'info',
+  role = 'status',
+  onDismiss,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: ref,
+    className: ['eds-banner', className].filter(Boolean).join(' '),
+    "data-color-appearance": tone,
+    role: role,
+    ...rest,
+    children: [children, onDismiss && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      variant: "ghost",
+      icon: true,
+      size: "small",
+      className: "eds-banner__dismiss",
+      "aria-label": "Dismiss",
+      onClick: onDismiss,
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        data: edsIcons.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;
+
+exports.Banner = Banner;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Field = Field;
 exports.Icon = Icon;
 exports.Input = Input;
+exports.Link = Link;
 exports.Radio = Radio;
+exports.Search = Search;
 exports.Switch = Switch;
+exports.TextArea = TextArea;
 exports.TextField = TextField;
+exports.Tooltip = Tooltip;
 exports.useFieldIds = useFieldIds;

package/dist/types/components/Autocomplete/AutocompleteContext.d.ts

@@ -94,7 +94,7 @@ export declare const AutocompleteContext: import("react").Context<{
         optionLabel?: (option: unknown) => string;
     } & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "id" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "onClear" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: unknown;
     isOpen: boolean;
@@ -208,7 +208,7 @@ export declare const useAutocompleteContext: () => {
         optionLabel?: (option: unknown) => string;
     } & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "id" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "onClear" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: unknown;
     isOpen: boolean;

package/dist/types/components/Autocomplete/useAutocomplete.d.ts

@@ -1,7 +1,7 @@
 import type { DOMAttributes } from 'react';
 import { AutocompleteProps } from './Autocomplete';
 import { AutocompleteToken } from './Autocomplete.tokens';
-export declare const useAutocomplete: <T>({ options, totalOptions, label, meta, className, style, disabled, readOnly, loading, hideClearButton, onOptionsChange, onAddNewOption, onInputChange, selectedOptions: _selectedOptions, selectionDisplay, multiple, itemToKey: _itemToKey, itemCompare: _itemCompare, allowSelectAll, initialSelectedOptions: _initialSelectedOptions, optionDisabled, optionsFilter, autoWidth, placeholder, optionLabel, clearSearchOnChange, multiline, dropdownHeight, optionComponent, helperText, helperIcon, noOptionsText, variant, onClear, ref, ...other }: AutocompleteProps<T> & {
+export declare const useAutocomplete: <T>({ options, totalOptions, label, meta, className, style, disabled, readOnly, loading, hideClearButton, onOptionsChange, onAddNewOption, onInputChange, selectedOptions: _selectedOptions, selectionDisplay, multiple, itemToKey: _itemToKey, itemCompare: _itemCompare, allowSelectAll, initialSelectedOptions: _initialSelectedOptions, optionDisabled, optionsFilter, autoWidth, placeholder, optionLabel, clearSearchOnChange, multiline, dropdownHeight, optionComponent, helperText, helperIcon, noOptionsText, variant, onClear, ref, id, ...other }: AutocompleteProps<T> & {
     ref?: React.Ref<HTMLInputElement>;
 }) => {
     getDropdownProps: <Options>(options?: import("downshift").UseMultipleSelectionGetDropdownPropsOptions & Options, extraOptions?: import("downshift").GetPropsCommonOptions) => Omit<import("downshift").Overwrite<import("downshift").UseMultipleSelectionGetDropdownReturnValue, Options>, "preventKeyAction">;
@@ -103,7 +103,7 @@ export declare const useAutocomplete: <T>({ options, totalOptions, label, meta,
         optionLabel?: (option: T) => string;
     }) & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "id" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "onClear" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: T;
     isOpen: boolean;

package/dist/types/components/next/Banner/Banner.d.ts

@@ -0,0 +1,23 @@
+declare const BannerIcon: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const BannerMessage: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const BannerActions: import("react").ForwardRefExoticComponent<{
+    placement?: import("./Banner.types").BannerActionsPlacement;
+    children: import("react").ReactNode;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const BannerComponent: import("react").ForwardRefExoticComponent<{
+    tone?: import("./Banner.types").BannerTone;
+    role?: import("react").HTMLAttributes<HTMLDivElement>["role"];
+    onDismiss?: () => void;
+    children: import("react").ReactNode;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundBanner = typeof BannerComponent & {
+    Icon: typeof BannerIcon;
+    Message: typeof BannerMessage;
+    Actions: typeof BannerActions;
+};
+export declare const Banner: CompoundBanner;
+export {};

package/dist/types/components/next/Banner/Banner.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/next/Banner/Banner.types.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BannerTone = 'info' | 'warning' | 'danger' | 'success';
+export type BannerActionsPlacement = 'left' | 'bottom';
+export type BannerProps = {
+    /** Visual tone of the banner
+     * @default 'info'
+     */
+    tone?: BannerTone;
+    /**
+     * ARIA role. Use `'alert'` for urgent messages that require immediate attention.
+     * @default 'status'
+     */
+    role?: HTMLAttributes<HTMLDivElement>['role'];
+    /** Callback when the dismiss button is clicked. When provided, a close button is rendered. */
+    onDismiss?: () => void;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+export type BannerIconProps = {
+    children: ReactNode;
+} & HTMLAttributes<HTMLSpanElement>;
+export type BannerMessageProps = {
+    children: ReactNode;
+} & HTMLAttributes<HTMLParagraphElement>;
+export type BannerActionsProps = {
+    /**
+     * Where to place the actions relative to the message.
+     * - `left`: Actions appear inline to the right of the message
+     * - `bottom`: Actions appear below the message, spanning full width
+     * @default 'left'
+     */
+    placement?: BannerActionsPlacement;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/types/components/next/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner';
+export type { BannerProps, BannerTone, BannerIconProps, BannerMessageProps, BannerActionsProps, BannerActionsPlacement, } from './Banner.types';

package/dist/types/components/next/Input/Input.types.d.ts

@@ -12,7 +12,10 @@ export type InputProps = {
     endText?: string;
     /** Adornment at the end (icons, buttons, etc.) */
     endAdornment?: ReactNode;
-    /** Render as input or textarea */
+    /**
+     * Render as input or textarea.
+     * @internal Use the TextArea component instead of `as="textarea"`.
+     */
     as?: 'input' | 'textarea';
     /** Class name applied to the container element */
     containerClassName?: string;

package/dist/types/components/next/Link/Link.d.ts

@@ -0,0 +1,4 @@
+export declare const Link: import("react").ForwardRefExoticComponent<{
+    href: string;
+    variant?: import("./Link.types").LinkVariant;
+} & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/types/components/next/Link/Link.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/next/Link/Link.types.d.ts

@@ -0,0 +1,11 @@
+import type { AnchorHTMLAttributes } from 'react';
+export type LinkVariant = 'inline' | 'standalone';
+export type LinkProps = {
+    /** Link destination URL */
+    href: string;
+    /** Visual variant
+     * - `inline` (default): used within text, inherits surrounding font size
+     * - `standalone`: used on its own with flex layout, compose icons as children
+     */
+    variant?: LinkVariant;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;

package/dist/types/components/next/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link';
+export type { LinkProps, LinkVariant } from './Link.types';

package/dist/types/components/next/Search/Search.d.ts

@@ -0,0 +1,9 @@
+import './search.css';
+export declare const Search: import("react").ForwardRefExoticComponent<{
+    label?: import("react").ReactNode;
+    description?: import("react").ReactNode;
+    helperMessage?: import("react").ReactNode;
+    id?: string;
+    onClear?: () => void;
+    clearLabel?: string;
+} & Omit<import("..").InputProps, "type" | "as" | "hideErrorIcon" | "startText" | "startAdornment" | "endText" | "endAdornment"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/next/Search/Search.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/next/Search/Search.types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { InputProps } from '../Input/Input.types';
+export type SearchProps = {
+    /** Label for the field */
+    label?: ReactNode;
+    /** Descriptive text that provides additional context for the field */
+    description?: ReactNode;
+    /** Helper or validation message shown below the input */
+    helperMessage?: ReactNode;
+    /** Unique identifier for the field */
+    id?: string;
+    /** Callback fired when the clear button is clicked */
+    onClear?: () => void;
+    /** Accessible label for the clear button. Defaults to "Clear search". Override for localisation. */
+    clearLabel?: string;
+} & Omit<InputProps, 'startAdornment' | 'endAdornment' | 'startText' | 'endText' | 'as' | 'hideErrorIcon' | 'type'>;

package/dist/types/components/next/Search/index.d.ts

@@ -0,0 +1,2 @@
+export { Search } from './Search';
+export type { SearchProps } from './Search.types';

package/dist/types/components/next/TextArea/TextArea.d.ts

@@ -0,0 +1,11 @@
+export declare const TextArea: import("react").ForwardRefExoticComponent<{
+    label?: import("react").ReactNode;
+    labelInfo?: string;
+    indicator?: string;
+    description?: import("react").ReactNode;
+    helperMessage?: import("react").ReactNode;
+    id?: string;
+    invalid?: boolean;
+    maxRows?: number;
+    showCharacterCount?: boolean;
+} & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "id"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/types/components/next/TextArea/TextArea.figma.d.ts

@@ -0,0 +1 @@
+export {};