@equinor/eds-core-react 2.4.1-beta.0 → 2.5.0-beta.0

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

@@ -1,12 +1,11 @@
-import { forwardRef } from 'react';
+import { forwardRef, Children, isValidElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { TypographyNext } from '../../Typography/Typography.new.js';
+import { Slot } from '../Slot/Slot.js';
 
 const SIZE_MAPPING = {
   small: 'sm',
   default: 'md'
 };
-const sizeToTypography = SIZE_MAPPING;
 const sizeToSelectableSpace = SIZE_MAPPING;
 const Button = /*#__PURE__*/forwardRef(function Button({
   variant = 'primary',
@@ -14,6 +13,8 @@ const Button = /*#__PURE__*/forwardRef(function Button({
   tone = 'accent',
   icon = false,
   round = false,
+  multiline = false,
+  asChild,
   children,
   className,
   disabled,
@@ -21,29 +22,56 @@ const Button = /*#__PURE__*/forwardRef(function Button({
   ...rest
 }, ref) {
   const classes = ['eds-button', className].filter(Boolean).join(' ');
-  const typographySize = sizeToTypography[size];
   const selectableSpace = sizeToSelectableSpace[size];
-  return /*#__PURE__*/jsx("button", {
-    ref: ref,
-    type: type,
+  const sharedProps = {
+    ref,
     className: classes,
-    disabled: disabled,
-    "data-variant": variant,
-    "data-selectable-space": selectableSpace,
-    "data-space-proportions": "squished",
-    "data-color-appearance": disabled ? 'neutral' : tone,
-    "data-icon-only": icon || undefined,
-    "data-round": icon && round ? true : undefined,
-    ...rest,
-    children: icon ? children : /*#__PURE__*/jsx(TypographyNext, {
-      as: "span",
-      className: "eds-button__label",
-      family: "ui",
-      size: typographySize,
-      lineHeight: "squished",
-      baseline: "center",
+    disabled,
+    'data-variant': variant,
+    'data-selectable-space': selectableSpace,
+    'data-space-proportions': 'squished',
+    'data-color-appearance': disabled ? 'neutral' : tone,
+    'data-icon-only': icon || undefined,
+    'data-round': icon && round ? true : undefined,
+    'data-multiline': multiline || undefined,
+    ...rest
+  };
+  if (asChild) {
+    return /*#__PURE__*/jsx(Slot, {
+      ...sharedProps,
       children: children
-    })
+    });
+  }
+  return /*#__PURE__*/jsx("button", {
+    type: type,
+    ...sharedProps,
+    children: (() => {
+      const out = [];
+      let buf = [];
+      let labelGroupIndex = 0;
+      Children.toArray(children).forEach(child => {
+        const isLabelNode = typeof child === 'string' || typeof child === 'number' || /*#__PURE__*/isValidElement(child) && child.type === 'br';
+        if (isLabelNode) {
+          buf.push(child);
+        } else {
+          if (buf.length) {
+            out.push(/*#__PURE__*/jsx("span", {
+              className: "label",
+              children: buf
+            }, `label-${labelGroupIndex++}`));
+            buf = [];
+          }
+          out.push(child);
+        }
+      });
+      if (buf.length) {
+        out.push(/*#__PURE__*/jsx("span", {
+          className: "label",
+          children: buf
+        }, "label-end"));
+      }
+      return out;
+    })()
   });
 });
 Button.displayName = 'Button';

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

@@ -0,0 +1,77 @@
+import { forwardRef } from 'react';
+import { check, close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/Icon.js';
+import { TypographyNext } from '../../Typography/Typography.new.js';
+
+const Chip = /*#__PURE__*/forwardRef(function Chip({
+  tone = 'neutral',
+  variant = 'default',
+  selected = false,
+  onDelete,
+  dropdown = false,
+  onClick,
+  children,
+  className,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const classes = ['eds-chip', className].filter(Boolean).join(' ');
+  const deletable = typeof onDelete === 'function';
+  const toggleable = !deletable && !dropdown;
+  const handleClick = event => {
+    if (deletable) {
+      onDelete?.(event);
+    } else {
+      onClick?.(event);
+    }
+  };
+  const handleKeyDown = event => {
+    if (deletable && (event.key === 'Backspace' || event.key === 'Delete')) {
+      event.preventDefault();
+      onDelete?.(event);
+    }
+    onKeyDown?.(event);
+  };
+  return /*#__PURE__*/jsxs("button", {
+    ref: ref,
+    type: "button",
+    className: classes,
+    "data-variant": variant,
+    "data-color-appearance": tone,
+    "data-font-family": "ui",
+    "data-font-size": "md",
+    "data-selectable-space": "sm",
+    "data-space-proportions": "squished",
+    "data-selected": selected || undefined,
+    "aria-pressed": toggleable ? selected : undefined,
+    "aria-expanded": dropdown ? selected : undefined,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children: [selected && !dropdown && !deletable && /*#__PURE__*/jsx(Icon, {
+      data: check,
+      "aria-hidden": true,
+      className: "icon"
+    }), /*#__PURE__*/jsx(TypographyNext, {
+      as: "span",
+      className: "label",
+      family: "ui",
+      size: "md",
+      lineHeight: "squished",
+      baseline: "center",
+      children: children
+    }), deletable && /*#__PURE__*/jsx(Icon, {
+      data: close,
+      title: "Remove",
+      className: "icon"
+    }), !deletable && dropdown && /*#__PURE__*/jsx(Icon, {
+      data: selected ? arrow_drop_up : arrow_drop_down,
+      "aria-hidden": true,
+      className: "icon"
+    })]
+  });
+});
+Chip.displayName = 'Chip';
+
+export { Chip };

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

@@ -1,6 +1,7 @@
 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 { Chip } from './components/next/Chip/Chip.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';

package/dist/index.next.cjs

@@ -13,74 +13,54 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-/**
- * TypographyNext component for flexible typography with baseline grid support.
- *
- * Provides full control over typography properties including family, size,
- * lineHeight, baseline alignment, weight, and tracking.
- *
- * **Display behavior:** Elements render as `display: block` by default for
- * text-box trimming and baseline grid alignment. Override with CSS if needed.
- *
- * @example
- * ```tsx
- * import { TypographyNext as Typography } from '@equinor/eds-core-react'
- *
- * <Typography
- *   family="ui"
- *   size="md"
- *   lineHeight="default"
- *   baseline="grid"
- *   weight="normal"
- *   tracking="normal"
- * >
- *   Text content (renders as block-level by default)
- * </Typography>
- *
- * <Typography
- *   as="h1"
- *   family="header"
- *   size="3xl"
- *   lineHeight="squished"
- *   baseline="grid"
- *   weight="bolder"
- *   tracking="tight"
- * >
- *   Page heading
- * </Typography>
- * ```
- */
-const TypographyNext = /*#__PURE__*/react.forwardRef(({
-  as = 'span',
-  family,
-  size,
-  baseline,
-  lineHeight,
-  weight,
-  tracking,
-  debug,
-  ...rest
-}, ref) => {
-  const Component = as;
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    ref: ref,
-    "data-font-family": family,
-    "data-font-size": size,
-    "data-baseline": baseline || undefined,
-    "data-line-height": lineHeight || undefined,
-    "data-font-weight": weight || undefined,
-    "data-tracking": tracking || undefined,
-    "data-debug": debug ? '' : undefined,
-    ...rest
+function mergeClassNames(...classNames) {
+  return classNames.filter(Boolean).join(' ');
+}
+function mergeProps(slotProps, childProps) {
+  const merged = {
+    ...childProps
+  };
+  for (const key of Object.keys(slotProps)) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (key === 'className') {
+      merged[key] = mergeClassNames(slotValue, childValue);
+    } else if (key === 'style') {
+      merged[key] = {
+        ...slotValue,
+        ...childValue
+      };
+    } else if (typeof slotValue === 'function' && typeof childValue === 'function') {
+      merged[key] = (...args) => {
+        childValue(...args);
+        slotValue(...args);
+      };
+    } else if (slotValue !== undefined) {
+      merged[key] = slotValue;
+    }
+  }
+  return merged;
+}
+const Slot = /*#__PURE__*/react.forwardRef(function Slot({
+  children,
+  ...slotProps
+}, ref) {
+  if (! /*#__PURE__*/react.isValidElement(children)) {
+    return null;
+  }
+  const child = children;
+  const merged = mergeProps(slotProps, child.props);
+  return /*#__PURE__*/react.cloneElement(child, {
+    ...merged,
+    ref
   });
 });
-TypographyNext.displayName = 'TypographyNext';
+Slot.displayName = 'Slot';
 
 const SIZE_MAPPING = {
   small: 'sm',
   default: 'md'
 };
-const sizeToTypography = SIZE_MAPPING;
 const sizeToSelectableSpace = SIZE_MAPPING;
 const Button = /*#__PURE__*/react.forwardRef(function Button({
   variant = 'primary',
@@ -88,6 +68,8 @@ const Button = /*#__PURE__*/react.forwardRef(function Button({
   tone = 'accent',
   icon = false,
   round = false,
+  multiline = false,
+  asChild,
   children,
   className,
   disabled,
@@ -95,29 +77,56 @@ const Button = /*#__PURE__*/react.forwardRef(function Button({
   ...rest
 }, ref) {
   const classes = ['eds-button', className].filter(Boolean).join(' ');
-  const typographySize = sizeToTypography[size];
   const selectableSpace = sizeToSelectableSpace[size];
-  return /*#__PURE__*/jsxRuntime.jsx("button", {
-    ref: ref,
-    type: type,
+  const sharedProps = {
+    ref,
     className: classes,
-    disabled: disabled,
-    "data-variant": variant,
-    "data-selectable-space": selectableSpace,
-    "data-space-proportions": "squished",
-    "data-color-appearance": disabled ? 'neutral' : tone,
-    "data-icon-only": icon || undefined,
-    "data-round": icon && round ? true : undefined,
-    ...rest,
-    children: icon ? children : /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
-      as: "span",
-      className: "eds-button__label",
-      family: "ui",
-      size: typographySize,
-      lineHeight: "squished",
-      baseline: "center",
+    disabled,
+    'data-variant': variant,
+    'data-selectable-space': selectableSpace,
+    'data-space-proportions': 'squished',
+    'data-color-appearance': disabled ? 'neutral' : tone,
+    'data-icon-only': icon || undefined,
+    'data-round': icon && round ? true : undefined,
+    'data-multiline': multiline || undefined,
+    ...rest
+  };
+  if (asChild) {
+    return /*#__PURE__*/jsxRuntime.jsx(Slot, {
+      ...sharedProps,
       children: children
-    })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: type,
+    ...sharedProps,
+    children: (() => {
+      const out = [];
+      let buf = [];
+      let labelGroupIndex = 0;
+      react.Children.toArray(children).forEach(child => {
+        const isLabelNode = typeof child === 'string' || typeof child === 'number' || /*#__PURE__*/react.isValidElement(child) && child.type === 'br';
+        if (isLabelNode) {
+          buf.push(child);
+        } else {
+          if (buf.length) {
+            out.push(/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "label",
+              children: buf
+            }, `label-${labelGroupIndex++}`));
+            buf = [];
+          }
+          out.push(child);
+        }
+      });
+      if (buf.length) {
+        out.push(/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "label",
+          children: buf
+        }, "label-end"));
+      }
+      return out;
+    })()
   });
 });
 Button.displayName = 'Button';
@@ -200,6 +209,69 @@ const Icon = /*#__PURE__*/react.forwardRef(function Icon({
   });
 });
 
+/**
+ * TypographyNext component for flexible typography with baseline grid support.
+ *
+ * Provides full control over typography properties including family, size,
+ * lineHeight, baseline alignment, weight, and tracking.
+ *
+ * **Display behavior:** Elements render as `display: block` by default for
+ * text-box trimming and baseline grid alignment. Override with CSS if needed.
+ *
+ * @example
+ * ```tsx
+ * import { TypographyNext as Typography } from '@equinor/eds-core-react'
+ *
+ * <Typography
+ *   family="ui"
+ *   size="md"
+ *   lineHeight="default"
+ *   baseline="grid"
+ *   weight="normal"
+ *   tracking="normal"
+ * >
+ *   Text content (renders as block-level by default)
+ * </Typography>
+ *
+ * <Typography
+ *   as="h1"
+ *   family="header"
+ *   size="3xl"
+ *   lineHeight="squished"
+ *   baseline="grid"
+ *   weight="bolder"
+ *   tracking="tight"
+ * >
+ *   Page heading
+ * </Typography>
+ * ```
+ */
+const TypographyNext = /*#__PURE__*/react.forwardRef(({
+  as = 'span',
+  family,
+  size,
+  baseline,
+  lineHeight,
+  weight,
+  tracking,
+  debug,
+  ...rest
+}, ref) => {
+  const Component = as;
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    "data-font-family": family,
+    "data-font-size": size,
+    "data-baseline": baseline || undefined,
+    "data-line-height": lineHeight || undefined,
+    "data-font-weight": weight || undefined,
+    "data-tracking": tracking || undefined,
+    "data-debug": debug ? '' : undefined,
+    ...rest
+  });
+});
+TypographyNext.displayName = 'TypographyNext';
+
 const FieldDescription = /*#__PURE__*/react.forwardRef(function FieldDescription({
   children,
   className,
@@ -1126,50 +1198,6 @@ const Search = /*#__PURE__*/react.forwardRef(function Search({
 });
 Search.displayName = 'Search';
 
-function mergeClassNames(...classNames) {
-  return classNames.filter(Boolean).join(' ');
-}
-function mergeProps(slotProps, childProps) {
-  const merged = {
-    ...childProps
-  };
-  for (const key of Object.keys(slotProps)) {
-    const slotValue = slotProps[key];
-    const childValue = childProps[key];
-    if (key === 'className') {
-      merged[key] = mergeClassNames(slotValue, childValue);
-    } else if (key === 'style') {
-      merged[key] = {
-        ...slotValue,
-        ...childValue
-      };
-    } else if (typeof slotValue === 'function' && typeof childValue === 'function') {
-      merged[key] = (...args) => {
-        childValue(...args);
-        slotValue(...args);
-      };
-    } else if (slotValue !== undefined) {
-      merged[key] = slotValue;
-    }
-  }
-  return merged;
-}
-const Slot = /*#__PURE__*/react.forwardRef(function Slot({
-  children,
-  ...slotProps
-}, ref) {
-  if (! /*#__PURE__*/react.isValidElement(children)) {
-    return null;
-  }
-  const child = children;
-  const merged = mergeProps(slotProps, child.props);
-  return /*#__PURE__*/react.cloneElement(child, {
-    ...merged,
-    ref
-  });
-});
-Slot.displayName = 'Slot';
-
 const Link = /*#__PURE__*/react.forwardRef(function Link({
   variant = 'inline',
   asChild,
@@ -1361,9 +1389,80 @@ Banner.Icon = BannerIcon;
 Banner.Message = BannerMessage;
 Banner.Actions = BannerActions;
 
+const Chip = /*#__PURE__*/react.forwardRef(function Chip({
+  tone = 'neutral',
+  variant = 'default',
+  selected = false,
+  onDelete,
+  dropdown = false,
+  onClick,
+  children,
+  className,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const classes = ['eds-chip', className].filter(Boolean).join(' ');
+  const deletable = typeof onDelete === 'function';
+  const toggleable = !deletable && !dropdown;
+  const handleClick = event => {
+    if (deletable) {
+      onDelete?.(event);
+    } else {
+      onClick?.(event);
+    }
+  };
+  const handleKeyDown = event => {
+    if (deletable && (event.key === 'Backspace' || event.key === 'Delete')) {
+      event.preventDefault();
+      onDelete?.(event);
+    }
+    onKeyDown?.(event);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    ref: ref,
+    type: "button",
+    className: classes,
+    "data-variant": variant,
+    "data-color-appearance": tone,
+    "data-font-family": "ui",
+    "data-font-size": "md",
+    "data-selectable-space": "sm",
+    "data-space-proportions": "squished",
+    "data-selected": selected || undefined,
+    "aria-pressed": toggleable ? selected : undefined,
+    "aria-expanded": dropdown ? selected : undefined,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children: [selected && !dropdown && !deletable && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      data: edsIcons.check,
+      "aria-hidden": true,
+      className: "icon"
+    }), /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+      as: "span",
+      className: "label",
+      family: "ui",
+      size: "md",
+      lineHeight: "squished",
+      baseline: "center",
+      children: children
+    }), deletable && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      data: edsIcons.close,
+      title: "Remove",
+      className: "icon"
+    }), !deletable && dropdown && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      data: selected ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down,
+      "aria-hidden": true,
+      className: "icon"
+    })]
+  });
+});
+Chip.displayName = 'Chip';
+
 exports.Banner = Banner;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
+exports.Chip = Chip;
 exports.Field = Field;
 exports.Icon = Icon;
 exports.Input = Input;

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

@@ -6,12 +6,21 @@ export declare const StyledButton: import("styled-components/dist/types").IStyle
     as?: import("react").ElementType;
 } & {
     color?: "primary" | "secondary" | "danger";
-    variant?: "ghost" | "contained" | "contained_icon" | "outlined" | "ghost_icon";
+    variant?: "ghost" | "outlined" | "contained" | "contained_icon" | "ghost_icon";
     href?: string;
     disabled?: boolean;
     type?: string;
     fullWidth?: boolean;
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Omit<any, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "variant" | "href" | "fullWidth">, never>> & string & Omit<import("@equinor/eds-utils").OverridableComponent<import("../Button").ButtonProps, HTMLButtonElement> & {
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Omit<any, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "variant" | "href" | "fullWidth">, never> & Partial<Pick<{
+    as?: import("react").ElementType;
+} & {
+    color?: "primary" | "secondary" | "danger";
+    variant?: "ghost" | "outlined" | "contained" | "contained_icon" | "ghost_icon";
+    href?: string;
+    disabled?: boolean;
+    type?: string;
+    fullWidth?: boolean;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Omit<any, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "variant" | "href" | "fullWidth">, never>>> & string & Omit<import("@equinor/eds-utils").OverridableComponent<import("../Button").ButtonProps, HTMLButtonElement> & {
     Group: typeof import("../Button").ButtonGroup;
     Toggle: typeof import("../Button").ToggleButton;
 }, keyof import("react").Component<any, {}, any>>;

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

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

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

@@ -4,10 +4,12 @@ type StyledListItemType = {
     $active?: string;
     $isdisabled?: string;
 };
-export declare const StyledListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledListItemType>> & string;
-export declare const AutocompleteOptionLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+export declare const StyledListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof StyledListItemType> & StyledListItemType, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof StyledListItemType> & StyledListItemType, never>>> & string;
+export declare const AutocompleteOptionLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$multiline"> & {
     $multiline: boolean;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$multiline"> & {
+    $multiline: boolean;
+}, never>>> & string;
 export type AutocompleteOptionProps = {
     index: number;
     virtualItem: VirtualItem;

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

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