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

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

@@ -0,0 +1,84 @@
+import { forwardRef, useId, useRef, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
+  title,
+  placement = 'top',
+  disabled,
+  children,
+  className,
+  onMouseEnter: onMouseEnterProp,
+  onMouseLeave: onMouseLeaveProp,
+  ...rest
+}, ref) {
+  const uid = useId();
+  const tooltipId = `eds-tooltip-${uid.replace(/:/g, '')}`;
+  const anchorName = `--${tooltipId}`;
+  const tooltipRef = useRef(null);
+  const hideTimer = 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__*/jsxs("span", {
+    className: "eds-tooltip-anchor",
+    style: {
+      '--tooltip-anchor-name': anchorName
+    },
+    onMouseEnter: show,
+    onMouseLeave: hide,
+    onFocus: show,
+    onBlur: hide,
+    children: [/*#__PURE__*/cloneElement(children, {
+      'aria-describedby': tooltipId
+    }), /*#__PURE__*/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__*/jsx("span", {
+        className: "label",
+        "data-font-family": "ui",
+        "data-font-size": "sm",
+        "data-baseline": "center",
+        children: title
+      })
+    })]
+  });
+});
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };

package/dist/esm-next/index.next.js

@@ -1,9 +1,14 @@
+export { Banner } from './components/next/Banner/Banner.js';
 export { Button } from './components/next/Button/Button.js';
 export { Checkbox } from './components/next/Checkbox/Checkbox.js';
 export { Field } from './components/next/Field/Field.js';
 export { Icon } from './components/next/Icon/Icon.js';
 export { Input } from './components/next/Input/Input.js';
+export { Link } from './components/next/Link/Link.js';
 export { Radio } from './components/next/Radio/Radio.js';
+export { Search } from './components/next/Search/Search.js';
 export { Switch } from './components/next/Switch/Switch.js';
+export { TextArea } from './components/next/TextArea/TextArea.js';
 export { TextField } from './components/next/TextField/TextField.js';
+export { Tooltip } from './components/next/Tooltip/Tooltip.js';
 export { useFieldIds } from './components/next/Field/useFieldIds.js';

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');
 
@@ -112,6 +112,7 @@ const Button = /*#__PURE__*/react.forwardRef(function Button({
     ...rest,
     children: icon ? children : /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
       as: "span",
+      className: "eds-button__label",
       family: "ui",
       size: typographySize,
       lineHeight: "squished",
@@ -122,6 +123,32 @@ const Button = /*#__PURE__*/react.forwardRef(function Button({
 });
 Button.displayName = 'Button';
 
+/**
+ * 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__*/react.forwardRef(function Icon({
   data,
   title,
@@ -140,7 +167,7 @@ const Icon = /*#__PURE__*/react.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 ? {
@@ -582,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(' '),
@@ -682,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,
@@ -835,7 +862,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
         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, {
@@ -873,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 {};