@lumx/react 4.11.0-next.7 → 4.11.0-next.9

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant as ColorVariant$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Alignment as Alignment$1 } from '@lumx/core/js/constants';
+import { ColorVariant as ColorVariant$1, Size as Size$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, Emphasis as Emphasis$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Kind as Kind$1, Alignment as Alignment$1, ColorPalette as ColorPalette$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -73,485 +73,135 @@ function useId() {
 const forwardRef = React__default.forwardRef;
 
 /**
- * Associative map from message kind to color and icon.
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
  */
-const CONFIG$1 = {
-  [Kind$1.error]: {
-    color: ColorPalette$1.red,
-    icon: mdiAlert
-  },
-  [Kind$1.info]: {
-    color: ColorPalette$1.blue,
-    icon: mdiInformation
-  },
-  [Kind$1.success]: {
-    color: ColorPalette$1.green,
-    icon: mdiCheckCircle
-  },
-  [Kind$1.warning]: {
-    color: ColorPalette$1.yellow,
-    icon: mdiAlertCircle
-  }
-};
 
 /**
- * Component display name.
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
  */
-const COMPONENT_NAME$1x = 'AlertDialog';
+const TOOLTIP_HOVER_DELAY = {
+  open: 500,
+  close: 500
+};
 
 /**
- * Component default class name and class prefix.
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
  */
-const CLASSNAME$1v = 'lumx-alert-dialog';
-const {
-  block: block$19
-} = classNames.bem(CLASSNAME$1v);
+const TOOLTIP_LONG_PRESS_DELAY = {
+  open: 250,
+  close: 3000
+};
 
 /**
- * Component default props.
+ * Alignments.
  */
-const DEFAULT_PROPS$1g = {
-  size: Size$1.tiny,
-  kind: Kind$1.info
+const Alignment = {
+  left: 'left'};
+const Theme = {
+  light: 'light',
+  dark: 'dark'
+};
+const Size = {
+  xxs: 'xxs',
+  xs: 'xs',
+  s: 's',
+  m: 'm',
+  l: 'l',
+  xl: 'xl',
+  xxl: 'xxl',
+  tiny: 'tiny',
+  regular: 'regular',
+  medium: 'medium',
+  big: 'big',
+  huge: 'huge'
+};
+const Orientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+const Emphasis = {
+  low: 'low',
+  medium: 'medium',
+  high: 'high'
 };
-
 /**
- * AlertDialog component.
- *
- * An alert dialog is a modal dialog that interrupts the user's workflow to
- * communicate an important message and acquire a response.
- *
- * It should not have a complex content.
- * Children of this component should only be strings, paragraphs or links.
+ * List of typographies that can't be customized.
  */
-const AlertDialog = forwardRef((props, ref) => {
-  const {
-    id,
-    title,
-    className,
-    cancelProps,
-    confirmProps,
-    kind = DEFAULT_PROPS$1g.kind,
-    size = DEFAULT_PROPS$1g.size,
-    dialogProps,
-    children,
-    ...forwardedProps
-  } = props;
-  const cancelButtonRef = React__default.useRef(null);
-  const confirmationButtonRef = React__default.useRef(null);
-  const {
-    color,
-    icon
-  } = CONFIG$1[kind] || {};
-
-  // Define a unique ID to target title and description for aria attributes.
-  const generatedId = useId();
-  const uniqueId = id || generatedId;
-  const titleId = `${uniqueId}-title`;
-  const descriptionId = `${uniqueId}-description`;
-
-  // If content is a string, set in a paragraph.
-  const DescriptionElement = typeof children === 'string' ? 'p' : 'div';
-  const {
-    label: confirmLabel,
-    onClick: confirmOnClick,
-    ...forwardedConfirmProps
-  } = confirmProps;
-  const {
-    label: cancelLabel,
-    onClick: cancelOnClick,
-    ...forwardedCancelProps
-  } = cancelProps || {};
-  return /*#__PURE__*/jsxs(Dialog, {
-    ref: ref,
-    focusElement: cancelProps ? cancelButtonRef : confirmationButtonRef,
-    size: size,
-    dialogProps: {
-      id: uniqueId,
-      role: 'alertdialog',
-      'aria-labelledby': titleId,
-      'aria-describedby': descriptionId,
-      ...dialogProps
-    },
-    className: classNames.join(className, block$19({
-      [`kind-${kind}`]: Boolean(kind)
-    })),
-    ...forwardedProps,
-    children: [/*#__PURE__*/jsx("header", {
-      children: /*#__PURE__*/jsx(Toolbar, {
-        className: "lumx-spacing-margin-horizontal",
-        before: /*#__PURE__*/jsx(Icon, {
-          icon: icon,
-          size: Size$1.s,
-          color: color
-        }),
-        label: /*#__PURE__*/jsx("h2", {
-          id: titleId,
-          className: "lumx-typography-title",
-          children: title
-        })
-      })
-    }), children && /*#__PURE__*/jsx(DescriptionElement, {
-      id: descriptionId,
-      className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge",
-      children: children
-    }), /*#__PURE__*/jsx("footer", {
-      children: /*#__PURE__*/jsx(Toolbar, {
-        className: "lumx-spacing-margin-horizontal",
-        after: /*#__PURE__*/jsxs(Fragment, {
-          children: [cancelProps && /*#__PURE__*/jsx(Button, {
-            ...forwardedCancelProps,
-            ref: cancelButtonRef,
-            emphasis: Emphasis$1.medium,
-            onClick: cancelOnClick,
-            children: cancelLabel
-          }), /*#__PURE__*/jsx(Button, {
-            ...forwardedConfirmProps,
-            ref: confirmationButtonRef,
-            color: color,
-            className: "lumx-spacing-margin-left-regular",
-            onClick: confirmOnClick,
-            children: confirmLabel
-          })]
-        })
-      })
-    })]
-  });
-});
-AlertDialog.displayName = COMPONENT_NAME$1x;
-AlertDialog.className = CLASSNAME$1v;
-AlertDialog.defaultProps = DEFAULT_PROPS$1g;
-
+const TypographyInterface = {
+  overline: 'overline',
+  caption: 'caption',
+  body1: 'body1',
+  body2: 'body2',
+  subtitle1: 'subtitle1',
+  subtitle2: 'subtitle2',
+  title: 'title',
+  headline: 'headline',
+  display1: 'display1'
+};
 /**
- * Hook focusing an element when defined and `focus` boolean `true`.
- *
- * @param element       Element to focus.
- * @param shouldFocus   Boolean flag to trigger the focus
+ * List of all typographies.
  */
-function useFocus(element, shouldFocus = true) {
-  const [wasFocus, setWasFocus] = useState(false);
-  useEffect(() => {
-    if (shouldFocus && wasFocus !== shouldFocus && element) {
-      element.focus();
-      setWasFocus(shouldFocus);
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [element, shouldFocus]);
-}
-
+const Typography = {
+  ...TypographyInterface};
 /**
- * Merge refs into a single function ref.
- *
- * @param  refs React references to merge.
- * @return the merged ref.
+ * All available aspect ratios.
  */
-function mergeRefs(...refs) {
-  return value => refs.forEach(ref => {
-    if (typeof ref === 'function') {
-      ref(value);
-    } else if (ref) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current = value;
-    }
-  });
-}
-
+const AspectRatio = {
+  /** Intrinsic content ratio. */
+  original: 'original',
+  /** Ratio 3:2 */
+  horizontal: 'horizontal',
+  /** Ratio 1:1 */
+  square: 'square',
+  /** Ratio constrained by the parent. */
+  free: 'free'
+};
 /**
- * Same as `mergeRefs` but memoized
+ * Semantic info about the purpose of the component
  */
-const useMergeRefs = (...refs) => {
-  return useMemo(() => mergeRefs(...refs),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  refs);
+const Kind = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error'
 };
-
-const ThemeContext = /*#__PURE__*/React__default.createContext(undefined);
-
-/** Provide a theme context to all children. */
-const ThemeProvider = ThemeContext.Provider;
-
-/** Get the theme in the current context. */
-function useTheme() {
-  return React__default.useContext(ThemeContext);
-}
-
 /**
- * Resolve disabled state from props.
- * (handles `disabled`, `isDisabled` and `aria-disabled`)
- *
- * @params component props
+ * See SCSS variable $lumx-color-palette
  */
-function useDisableStateProps(props) {
-  const {
-    disabled,
-    isDisabled,
-    'aria-disabled': ariaDisabled,
-    onClick,
-    onChange,
-    ...otherProps
-  } = props;
-  const disabledStateContext = useDisabledStateContext();
-  const disabledStateProps = getDisabledState$1(disabledStateContext, {
-    disabled,
-    isDisabled,
-    'aria-disabled': ariaDisabled
-  });
-  const isAnyDisabled = disabledStateProps['aria-disabled'] || disabledStateProps.disabled || undefined;
-  if (!isAnyDisabled) {
-    otherProps.onClick = onClick;
-    otherProps.onChange = onChange;
-  }
-  return {
-    disabledStateProps,
-    otherProps: otherProps,
-    isAnyDisabled
-  };
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1w = 'Autocomplete';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1u = 'lumx-autocomplete';
-
+const ColorPalette = {
+  primary: 'primary',
+  blue: 'blue',
+  dark: 'dark',
+  green: 'green',
+  yellow: 'yellow',
+  red: 'red',
+  light: 'light'};
 /**
- * Component default props.
+ * See SCSS variable $lumx-color-variants
  */
-const DEFAULT_PROPS$1f = {
-  anchorToInput: false,
-  closeOnClick: false,
-  closeOnClickAway: true,
-  closeOnEscape: true,
-  shouldFocusOnClose: false
+const ColorVariant = {
+  N: 'N'
 };
 
-/**
- * Autocomplete component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Autocomplete = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
-  const {
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    anchorToInput = DEFAULT_PROPS$1f.anchorToInput,
-    children,
-    chips,
-    className,
-    closeOnClick = DEFAULT_PROPS$1f.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1f.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1f.closeOnEscape,
-    error,
-    fitToAnchorWidth,
-    hasError,
-    helper,
-    icon,
-    inputRef,
-    clearButtonProps,
-    isRequired,
-    isOpen,
-    isValid,
-    label,
-    name,
-    offset,
-    onBlur,
-    onChange,
-    onClose,
-    onFocus,
-    onInfiniteScroll,
-    placeholder,
-    placement,
-    shouldFocusOnClose = DEFAULT_PROPS$1f.shouldFocusOnClose,
-    theme = defaultTheme,
-    value,
-    textFieldProps = {},
-    focusAnchorOnClose,
-    ...forwardedProps
-  } = otherProps;
-  const inputAnchorRef = useRef(null);
-  const textFieldRef = useRef(null);
-  useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1u),
-    children: [/*#__PURE__*/jsx(TextField, {
-      ...textFieldProps,
-      chips: chips,
-      error: error,
-      hasError: hasError,
-      helper: helper,
-      icon: icon,
-      inputRef: mergeRefs(inputAnchorRef, inputRef),
-      clearButtonProps: clearButtonProps,
-      ...disabledStateProps,
-      isRequired: isRequired,
-      isValid: isValid,
-      label: label,
-      name: name,
-      onBlur: onBlur,
-      onChange: onChange,
-      onFocus: onFocus,
-      placeholder: placeholder,
-      textFieldRef: textFieldRef,
-      theme: theme,
-      value: value
-    }), /*#__PURE__*/jsx(Dropdown, {
-      anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
-      closeOnClick: closeOnClick,
-      closeOnClickAway: closeOnClickAway,
-      closeOnEscape: closeOnEscape,
-      focusAnchorOnClose: focusAnchorOnClose,
-      fitToAnchorWidth: fitToAnchorWidth,
-      isOpen: isOpen,
-      offset: offset,
-      onClose: onClose,
-      onInfiniteScroll: onInfiniteScroll,
-      placement: placement,
-      shouldFocusOnOpen: false,
-      theme: theme,
-      children: children
-    })]
-  });
-});
-Autocomplete.displayName = COMPONENT_NAME$1w;
-Autocomplete.className = CLASSNAME$1u;
-Autocomplete.defaultProps = DEFAULT_PROPS$1f;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1v = 'AutocompleteMultiple';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1t = 'lumx-autocomplete-multiple';
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$1e = {
-  closeOnClickAway: true,
-  closeOnEscape: true,
-  selectedChipRender(choice, index, onClear, isDisabled) {
-    const onClick = event => onClear && onClear(event, choice);
-    return /*#__PURE__*/jsx(Chip, {
-      after: onClear && /*#__PURE__*/jsx(Icon, {
-        icon: mdiClose,
-        size: Size$1.xxs
-      }),
-      isDisabled: isDisabled,
-      size: Size$1.s,
-      onAfterClick: onClick,
-      onClick: onClick,
-      children: choice
-    }, index);
-  },
-  values: []
-};
+/** ColorPalette with all possible color variant combination */
 
-/**
- * AutocompleteMultiple component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const AutocompleteMultiple = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
-  const {
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    anchorToInput,
-    children,
-    // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    chipsAlignment,
-    className,
-    closeOnClickAway = DEFAULT_PROPS$1e.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1e.closeOnEscape,
-    fitToAnchorWidth,
-    hasError,
-    helper,
-    icon,
-    inputRef,
-    clearButtonProps,
-    isRequired,
-    isOpen,
-    isValid,
-    label,
-    name,
-    offset,
-    onBlur,
-    onChange,
-    onClear,
-    onClose,
-    onFocus,
-    onInfiniteScroll,
-    onKeyDown,
-    placeholder,
-    placement,
-    selectedChipRender = DEFAULT_PROPS$1e.selectedChipRender,
-    shouldFocusOnClose,
-    theme = defaultTheme,
-    type,
-    value,
-    values = DEFAULT_PROPS$1e.values,
-    ...forwardedProps
-  } = otherProps;
-  return /*#__PURE__*/jsx(Autocomplete, {
-    ref: ref,
-    ...forwardedProps,
-    anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1t),
-    name: name,
-    value: value,
-    onChange: onChange,
-    onKeyDown: onKeyDown,
-    onBlur: onBlur,
-    shouldFocusOnClose: shouldFocusOnClose,
-    onFocus: onFocus,
-    hasError: hasError,
-    helper: helper,
-    icon: icon,
-    inputRef: inputRef,
-    chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear)),
-    ...disabledStateProps,
-    isRequired: isRequired,
-    clearButtonProps: clearButtonProps,
-    isValid: isValid,
-    label: label,
-    placeholder: placeholder,
-    theme: theme,
-    type: type,
-    isOpen: isOpen,
-    closeOnClick: false,
-    closeOnClickAway: closeOnClickAway,
-    closeOnEscape: closeOnEscape,
-    onClose: onClose,
-    offset: offset,
-    placement: placement,
-    fitToAnchorWidth: fitToAnchorWidth,
-    onInfiniteScroll: onInfiniteScroll,
-    children: children
-  });
-});
-AutocompleteMultiple.displayName = COMPONENT_NAME$1v;
-AutocompleteMultiple.className = CLASSNAME$1t;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1e;
+({
+  [Size.xxs]: 14,
+  [Size.xs]: 20,
+  [Size.s]: 24,
+  [Size.m]: 36,
+  [Size.l]: 64,
+  [Size.xl]: 128,
+  [Size.xxl]: 256
+});
+
+/**
+ * Check if we are running in a true browser (not SSR and not jsdom test environment).
+ */
+const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom');
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -627,386 +277,790 @@ var classnamesExports = requireClassnames();
 var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 /**
- * Modifier
- * @example { 'is-disabled': true, 'is-selected': false }
+ * Modifier
+ * @example { 'is-disabled': true, 'is-selected': false }
+ */
+
+/**
+ * Generates BEM modifier class names.
+ *
+ * @param baseName   The base BEM class to attach modifiers to.
+ * @param modifiers  Map of modifier names to boolean values.
+ * @returns Combined modifier class names string.
+ *
+ * @example
+ * modifier('button', { active: true }); // 'button--active'
+ * modifier('button', { active: true, disabled: false }); // 'button--active'
+ */
+function modifier$1(baseName, modifiers) {
+  const modifierClasses = [];
+  for (const [key, value] of Object.entries(modifiers)) {
+    if (value) modifierClasses.push(`${baseName}--${key}`);
+  }
+  return modifierClasses.join(' ');
+}
+
+/**
+ * Generates a BEM block + modifier class name string.
+ * Combines a base class with optional modifiers and additional classes.
+ *
+ * @param baseName   The base BEM class
+ * @param modifier   Optional modifiers
+ * @returns Combined class name string
+ *
+ * @example
+ * block('button'); // 'button'
+ * block('button', { active: true, disabled: false }); // 'button button--active'
+ */
+
+function block$19(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+  let modifiers;
+  let classes;
+  if (Array.isArray(modifiersOrAdditionalClasses)) {
+    classes = modifiersOrAdditionalClasses;
+  } else {
+    modifiers = modifiersOrAdditionalClasses;
+    classes = additionalClasses;
+  }
+  if (!modifiers && !classes) {
+    return baseName;
+  }
+  return classnames(
+  // Additional classes
+  classes,
+  // Base class
+  baseName,
+  // Modifier(s)
+  modifiers ? modifier$1(baseName, modifiers) : null);
+}
+
+const PREFIX = 'lumx-action-area';
+const ACTION_ELEMENT = `${PREFIX}__action`;
+/**
+ * Action area CSS utility.
+ *
+ * Apply `actionArea()` to the container element to make it a positioning context
+ * for the action's expanded click area.
+ *
+ * Apply `actionArea.action()` to the primary interactive element (link or button)
+ * whose click area should expand to fill the entire container.
+ */
+const actionArea = Object.assign(/** Action area container class. Sets `position: relative`. */
+() => PREFIX, {
+  /** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
+  action: modifiers => block$19(ACTION_ELEMENT, modifiers)
+});
+
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+function resolveColorWithVariants(colorWithVariants, colorVariant) {
+  if (!colorWithVariants) return [undefined, colorVariant];
+  const [color, baseColorVariant] = colorWithVariants.split('-');
+  return [color, colorVariant || baseColorVariant];
+}
+
+/**
+ * Generates a Lumx color class name for the given type, color and variant.
+ * This is the base function used by font() and background() utilities.
+ *
+ * @param type - The color class type ('font' or 'background')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx color class name or undefined if no color is provided
+ *
+ * @example
+ * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * color('background', 'primary'); // 'lumx-color-background-primary-N'
+ * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
+ * color('font', undefined); // undefined
+ */
+function color(type, propColor, propColorVariant) {
+  const [cColor, cColorVariant = ColorVariant$1.N] = resolveColorWithVariants(propColor, propColorVariant);
+  return `lumx-color-${type}-${cColor}-${cColorVariant}`;
+}
+
+/**
+ * Generates a Lumx font color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx font color class name or undefined if no color is provided
+ *
+ * @example
+ * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * font('primary-L2'); // 'lumx-color-font-primary-L2'
+ * font('primary'); // 'lumx-color-font-primary-N'
+ * font(undefined); // undefined
+ */
+const font = (propColor, propColorVariant) => color('font', propColor, propColorVariant);
+
+/**
+ * Returns the classname associated to the given typography. For example, for Typography.title it returns
+ * lumx-typography-title
+ */
+function typography(typo) {
+  return `lumx-typography-${typo}`;
+}
+
+/** Set of valid AbstractSize values for runtime detection. */
+const ABSTRACT_SIZES = new Set([Size$1.tiny, Size$1.regular, Size$1.medium, Size$1.big, Size$1.huge]);
+function isAbstractSize(value) {
+  return ABSTRACT_SIZES.has(value);
+}
+
+/**
+ * Returns a lumx classname for the given type, direction and size. For example, for
+ * arguments type='padding', direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param type - margin or padding
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+
+function spacing(type, directionOrSize, size) {
+  // Resolve shorthand: spacing(type, size) => spacing(type, undefined, size)
+  const isShorthand = isAbstractSize(directionOrSize) || directionOrSize === null;
+  const direction = isShorthand ? undefined : directionOrSize;
+  const resolvedSize = isShorthand ? directionOrSize : size;
+  let baseClass = `lumx-spacing-${type}`;
+  if (direction && direction !== 'all') {
+    baseClass = `${baseClass}-${direction}`;
+  }
+  if (resolvedSize) {
+    baseClass = `${baseClass}-${resolvedSize}`;
+  } else if (resolvedSize === null) {
+    baseClass = `${baseClass}-none`;
+  }
+  return baseClass;
+}
+
+/**
+ * Returns a lumx padding classname for the given direction and size. For example, for
+ * arguments direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ *
+ * Can also be called with just a size: padding('regular') is equivalent to padding('all', 'regular').
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+
+function padding(directionOrSize, size) {
+  if (isAbstractSize(directionOrSize) || directionOrSize === null) {
+    return spacing('padding', directionOrSize);
+  }
+  return spacing('padding', directionOrSize, size);
+}
+
+/**
+ * Visually hidden class name.
+ * Used to hide elements from view but keep them readable from screen readers
+ */
+const visuallyHidden = () => VISUALLY_HIDDEN;
+
+/**
+ * Creates a BEM element class generator function for the given base class.
+ * Returns a function that generates BEM element class names with optional modifiers.
+ *
+ * @param baseClass  The base BEM block class name (e.g., 'button', 'card')
+ * @param elem       The BEM element name (e.g., 'icon', 'title')
+ * @param modifier   Optional BEM modifier ()
+ * @returns combined BEM element class name
+ *
+ * @example
+ * element('my-button', 'icon'); // 'my-button__icon'
+ * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
+ */
+
+function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+  if (Array.isArray(modifiersOrAdditionalClasses)) {
+    return block$19(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+  }
+  return block$19(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+}
+
+/**
+ * Setup BEM block & element generation for a given base name.
+ */
+function bem(baseName) {
+  function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
+    if (Array.isArray(modifiersOrAdditionalClasses)) {
+      return block$19(baseName, modifiersOrAdditionalClasses);
+    }
+    return block$19(baseName, modifiersOrAdditionalClasses, additionalClasses);
+  }
+  function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
+    if (Array.isArray(modifiersOrAdditionalClasses)) {
+      return element$R(baseName, elem, modifiersOrAdditionalClasses);
+    }
+    return element$R(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+  }
+  return {
+    block: blockFn,
+    element: elementFn,
+    modifier: modifiers => modifier$1(baseName, modifiers)
+  };
+}
+
+/**
+ * Make sure the pressed key is the enter key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+function onEnterPressed(handler) {
+  return evt => {
+    if (evt.key !== 'Enter') {
+      return;
+    }
+    handler(evt);
+  };
+}
+
+/** Get value with a string of function selector */
+const getWithSelector = (selector, object) => {
+  // Use the provided selector function
+  if (typeof selector === 'function') {
+    return selector(object);
+  }
+  // Use the provided selector as a property name
+  if (typeof selector === 'string') {
+    return object[selector];
+  }
+  return String(object);
+};
+
+/**
+ * Associative map from message kind to color and icon.
+ */
+const CONFIG$1 = {
+  [Kind.error]: {
+    color: ColorPalette.red,
+    icon: mdiAlert
+  },
+  [Kind.info]: {
+    color: ColorPalette.blue,
+    icon: mdiInformation
+  },
+  [Kind.success]: {
+    color: ColorPalette.green,
+    icon: mdiCheckCircle
+  },
+  [Kind.warning]: {
+    color: ColorPalette.yellow,
+    icon: mdiAlertCircle
+  }
+};
+
+/**
+ * Component display name.
  */
+const COMPONENT_NAME$1x = 'AlertDialog';
 
 /**
- * Generates BEM modifier class names.
- *
- * @param baseName   The base BEM class to attach modifiers to.
- * @param modifiers  Map of modifier names to boolean values.
- * @returns Combined modifier class names string.
- *
- * @example
- * modifier('button', { active: true }); // 'button--active'
- * modifier('button', { active: true, disabled: false }); // 'button--active'
+ * Component default class name and class prefix.
  */
-function modifier$1(baseName, modifiers) {
-  const modifierClasses = [];
-  for (const [key, value] of Object.entries(modifiers)) {
-    if (value) modifierClasses.push(`${baseName}--${key}`);
-  }
-  return modifierClasses.join(' ');
-}
+const CLASSNAME$1v = 'lumx-alert-dialog';
+const {
+  block: block$18
+} = bem(CLASSNAME$1v);
 
 /**
- * Generates a BEM block + modifier class name string.
- * Combines a base class with optional modifiers and additional classes.
- *
- * @param baseName   The base BEM class
- * @param modifier   Optional modifiers
- * @returns Combined class name string
- *
- * @example
- * block('button'); // 'button'
- * block('button', { active: true, disabled: false }); // 'button button--active'
+ * Component default props.
  */
+const DEFAULT_PROPS$1g = {
+  size: Size.tiny,
+  kind: Kind.info
+};
 
-function block$18(baseName, modifiersOrAdditionalClasses, additionalClasses) {
-  let modifiers;
-  let classes;
-  if (Array.isArray(modifiersOrAdditionalClasses)) {
-    classes = modifiersOrAdditionalClasses;
-  } else {
-    modifiers = modifiersOrAdditionalClasses;
-    classes = additionalClasses;
-  }
-  if (!modifiers && !classes) {
-    return baseName;
-  }
-  return classnames(
-  // Additional classes
-  classes,
-  // Base class
-  baseName,
-  // Modifier(s)
-  modifiers ? modifier$1(baseName, modifiers) : null);
-}
-
-const PREFIX = 'lumx-action-area';
-const ACTION_ELEMENT = `${PREFIX}__action`;
 /**
- * Action area CSS utility.
+ * AlertDialog component.
  *
- * Apply `actionArea()` to the container element to make it a positioning context
- * for the action's expanded click area.
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
  *
- * Apply `actionArea.action()` to the primary interactive element (link or button)
- * whose click area should expand to fill the entire container.
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
  */
-const actionArea = Object.assign(/** Action area container class. Sets `position: relative`. */
-() => PREFIX, {
-  /** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
-  action: modifiers => block$18(ACTION_ELEMENT, modifiers)
-});
-
-/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
-function resolveColorWithVariants(colorWithVariants, colorVariant) {
-  if (!colorWithVariants) return [undefined, colorVariant];
-  const [color, baseColorVariant] = colorWithVariants.split('-');
-  return [color, colorVariant || baseColorVariant];
-}
+const AlertDialog$1 = props => {
+  const {
+    id,
+    title,
+    className,
+    cancelProps,
+    confirmProps,
+    ref,
+    kind = DEFAULT_PROPS$1g.kind,
+    size = DEFAULT_PROPS$1g.size,
+    dialogProps,
+    children,
+    DescriptionElement,
+    cancelButtonRef,
+    confirmationButtonRef,
+    focusElement,
+    Dialog,
+    Toolbar,
+    Button,
+    Icon,
+    ...forwardedProps
+  } = props;
+  const {
+    color,
+    icon
+  } = CONFIG$1[kind] || {};
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  const {
+    label: confirmLabel,
+    onClick: confirmOnClick,
+    ...forwardedConfirmProps
+  } = confirmProps;
+  const {
+    label: cancelLabel,
+    onClick: cancelOnClick,
+    ...forwardedCancelProps
+  } = cancelProps || {};
+  return /*#__PURE__*/jsxs(Dialog, {
+    ref: ref,
+    focusElement: focusElement ?? (cancelProps ? cancelButtonRef : confirmationButtonRef),
+    size: size,
+    dialogProps: {
+      id,
+      role: 'alertdialog',
+      'aria-labelledby': titleId,
+      'aria-describedby': descriptionId,
+      ...dialogProps
+    },
+    className: classnames(className, block$18({
+      [`kind-${kind}`]: Boolean(kind)
+    })),
+    ...forwardedProps,
+    children: [/*#__PURE__*/jsx("header", {
+      children: /*#__PURE__*/jsx(Toolbar, {
+        className: "lumx-spacing-margin-horizontal",
+        before: /*#__PURE__*/jsx(Icon, {
+          icon: icon,
+          size: Size.s,
+          color: color
+        }),
+        label: /*#__PURE__*/jsx("h2", {
+          id: titleId,
+          className: "lumx-typography-title",
+          children: title
+        })
+      })
+    }), children && /*#__PURE__*/jsx(DescriptionElement, {
+      id: descriptionId,
+      className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge",
+      children: children
+    }), /*#__PURE__*/jsx("footer", {
+      children: /*#__PURE__*/jsx(Toolbar, {
+        className: "lumx-spacing-margin-horizontal",
+        after: /*#__PURE__*/jsxs(Fragment, {
+          children: [cancelProps && /*#__PURE__*/jsx(Button, {
+            ...forwardedCancelProps,
+            ref: cancelButtonRef,
+            emphasis: Emphasis.medium,
+            onClick: cancelOnClick,
+            children: cancelLabel
+          }), /*#__PURE__*/jsx(Button, {
+            ...forwardedConfirmProps,
+            ref: confirmationButtonRef,
+            color: color,
+            className: "lumx-spacing-margin-left-regular",
+            onClick: confirmOnClick,
+            children: confirmLabel
+          })]
+        })
+      })
+    })]
+  });
+};
 
 /**
- * Generates a Lumx color class name for the given type, color and variant.
- * This is the base function used by font() and background() utilities.
+ * AlertDialog component.
  *
- * @param type - The color class type ('font' or 'background')
- * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
- * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
- * @returns The Lumx color class name or undefined if no color is provided
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
  *
- * @example
- * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
- * color('background', 'primary'); // 'lumx-color-background-primary-N'
- * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
- * color('font', undefined); // undefined
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
  */
-function color(type, propColor, propColorVariant) {
-  const [cColor, cColorVariant = ColorVariant$1.N] = resolveColorWithVariants(propColor, propColorVariant);
-  return `lumx-color-${type}-${cColor}-${cColorVariant}`;
-}
+const AlertDialog = forwardRef((props, ref) => {
+  const {
+    id,
+    title,
+    className,
+    cancelProps,
+    confirmProps,
+    kind,
+    size,
+    dialogProps,
+    children,
+    ...forwardedProps
+  } = props;
+  const cancelButtonRef = React__default.useRef(null);
+  const confirmationButtonRef = React__default.useRef(null);
+
+  // Define a unique ID to target title and description for aria attributes.
+  const generatedId = useId();
+  const uniqueId = id || generatedId;
+
+  // If content is a string, set in a paragraph.
+  const DescriptionElement = typeof children === 'string' ? 'p' : 'div';
+  return AlertDialog$1({
+    Button,
+    confirmProps,
+    DescriptionElement,
+    Dialog,
+    Icon,
+    id: uniqueId,
+    Toolbar,
+    cancelButtonRef,
+    cancelProps,
+    children,
+    className,
+    confirmationButtonRef,
+    dialogProps,
+    kind,
+    ref,
+    size,
+    title,
+    ...forwardedProps
+  });
+});
+AlertDialog.displayName = COMPONENT_NAME$1x;
+AlertDialog.className = CLASSNAME$1v;
+AlertDialog.defaultProps = DEFAULT_PROPS$1g;
 
 /**
- * Generates a Lumx font color class name for the given color and variant.
- *
- * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
- * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
- * @returns The Lumx font color class name or undefined if no color is provided
+ * Hook focusing an element when defined and `focus` boolean `true`.
  *
- * @example
- * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
- * font('primary-L2'); // 'lumx-color-font-primary-L2'
- * font('primary'); // 'lumx-color-font-primary-N'
- * font(undefined); // undefined
+ * @param element       Element to focus.
+ * @param shouldFocus   Boolean flag to trigger the focus
  */
-const font = (propColor, propColorVariant) => color('font', propColor, propColorVariant);
+function useFocus(element, shouldFocus = true) {
+  const [wasFocus, setWasFocus] = useState(false);
+  useEffect(() => {
+    if (shouldFocus && wasFocus !== shouldFocus && element) {
+      element.focus();
+      setWasFocus(shouldFocus);
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [element, shouldFocus]);
+}
 
 /**
- * Returns the classname associated to the given typography. For example, for Typography.title it returns
- * lumx-typography-title
+ * Merge refs into a single function ref.
+ *
+ * @param  refs React references to merge.
+ * @return the merged ref.
  */
-function typography(typo) {
-  return `lumx-typography-${typo}`;
-}
-
-/** Set of valid AbstractSize values for runtime detection. */
-const ABSTRACT_SIZES = new Set([Size$1.tiny, Size$1.regular, Size$1.medium, Size$1.big, Size$1.huge]);
-function isAbstractSize(value) {
-  return ABSTRACT_SIZES.has(value);
+function mergeRefs(...refs) {
+  return value => refs.forEach(ref => {
+    if (typeof ref === 'function') {
+      ref(value);
+    } else if (ref) {
+      // eslint-disable-next-line no-param-reassign
+      ref.current = value;
+    }
+  });
 }
 
 /**
- * Returns a lumx classname for the given type, direction and size. For example, for
- * arguments type='padding', direction='right', size='regular' it returns lumx-spacing-padding-right-regular
- * @param type - margin or padding
- * @param direction - Direction
- * @param size - Size
- * @returns string
+ * Same as `mergeRefs` but memoized
  */
+const useMergeRefs = (...refs) => {
+  return useMemo(() => mergeRefs(...refs),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
+};
 
-function spacing(type, directionOrSize, size) {
-  // Resolve shorthand: spacing(type, size) => spacing(type, undefined, size)
-  const isShorthand = isAbstractSize(directionOrSize) || directionOrSize === null;
-  const direction = isShorthand ? undefined : directionOrSize;
-  const resolvedSize = isShorthand ? directionOrSize : size;
-  let baseClass = `lumx-spacing-${type}`;
-  if (direction && direction !== 'all') {
-    baseClass = `${baseClass}-${direction}`;
-  }
-  if (resolvedSize) {
-    baseClass = `${baseClass}-${resolvedSize}`;
-  } else if (resolvedSize === null) {
-    baseClass = `${baseClass}-none`;
-  }
-  return baseClass;
+const ThemeContext = /*#__PURE__*/React__default.createContext(undefined);
+
+/** Provide a theme context to all children. */
+const ThemeProvider = ThemeContext.Provider;
+
+/** Get the theme in the current context. */
+function useTheme() {
+  return React__default.useContext(ThemeContext);
 }
 
 /**
- * Returns a lumx padding classname for the given direction and size. For example, for
- * arguments direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * Resolve disabled state from props.
+ * (handles `disabled`, `isDisabled` and `aria-disabled`)
  *
- * Can also be called with just a size: padding('regular') is equivalent to padding('all', 'regular').
- * @param direction - Direction
- * @param size - Size
- * @returns string
+ * @params component props
  */
-
-function padding(directionOrSize, size) {
-  if (isAbstractSize(directionOrSize) || directionOrSize === null) {
-    return spacing('padding', directionOrSize);
+function useDisableStateProps(props) {
+  const {
+    disabled,
+    isDisabled,
+    'aria-disabled': ariaDisabled,
+    onClick,
+    onChange,
+    ...otherProps
+  } = props;
+  const disabledStateContext = useDisabledStateContext();
+  const disabledStateProps = getDisabledState$1(disabledStateContext, {
+    disabled,
+    isDisabled,
+    'aria-disabled': ariaDisabled
+  });
+  const isAnyDisabled = disabledStateProps['aria-disabled'] || disabledStateProps.disabled || undefined;
+  if (!isAnyDisabled) {
+    otherProps.onClick = onClick;
+    otherProps.onChange = onChange;
   }
-  return spacing('padding', directionOrSize, size);
+  return {
+    disabledStateProps,
+    otherProps: otherProps,
+    isAnyDisabled
+  };
 }
 
 /**
- * Visually hidden class name.
- * Used to hide elements from view but keep them readable from screen readers
+ * Component display name.
  */
-const visuallyHidden = () => VISUALLY_HIDDEN;
+const COMPONENT_NAME$1w = 'Autocomplete';
 
 /**
- * Creates a BEM element class generator function for the given base class.
- * Returns a function that generates BEM element class names with optional modifiers.
- *
- * @param baseClass  The base BEM block class name (e.g., 'button', 'card')
- * @param elem       The BEM element name (e.g., 'icon', 'title')
- * @param modifier   Optional BEM modifier ()
- * @returns combined BEM element class name
- *
- * @example
- * element('my-button', 'icon'); // 'my-button__icon'
- * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
+ * Component default class name and class prefix.
  */
-
-function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
-  if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$18(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
-  }
-  return block$18(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
-}
+const CLASSNAME$1u = 'lumx-autocomplete';
 
 /**
- * Setup BEM block & element generation for a given base name.
+ * Component default props.
  */
-function bem(baseName) {
-  function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
-    if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$18(baseName, modifiersOrAdditionalClasses);
-    }
-    return block$18(baseName, modifiersOrAdditionalClasses, additionalClasses);
-  }
-  function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
-    if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$R(baseName, elem, modifiersOrAdditionalClasses);
-    }
-    return element$R(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
-  }
-  return {
-    block: blockFn,
-    element: elementFn,
-    modifier: modifiers => modifier$1(baseName, modifiers)
-  };
-}
+const DEFAULT_PROPS$1f = {
+  anchorToInput: false,
+  closeOnClick: false,
+  closeOnClickAway: true,
+  closeOnEscape: true,
+  shouldFocusOnClose: false
+};
 
 /**
- * Make sure the pressed key is the enter key before calling the callback.
+ * Autocomplete component.
  *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-function onEnterPressed(handler) {
-  return evt => {
-    if (evt.key !== 'Enter') {
-      return;
-    }
-    handler(evt);
-  };
-}
-
-/** Get value with a string of function selector */
-const getWithSelector = (selector, object) => {
-  // Use the provided selector function
-  if (typeof selector === 'function') {
-    return selector(object);
-  }
-  // Use the provided selector as a property name
-  if (typeof selector === 'string') {
-    return object[selector];
-  }
-  return String(object);
-};
+const Autocomplete = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    anchorToInput = DEFAULT_PROPS$1f.anchorToInput,
+    children,
+    chips,
+    className,
+    closeOnClick = DEFAULT_PROPS$1f.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1f.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1f.closeOnEscape,
+    error,
+    fitToAnchorWidth,
+    hasError,
+    helper,
+    icon,
+    inputRef,
+    clearButtonProps,
+    isRequired,
+    isOpen,
+    isValid,
+    label,
+    name,
+    offset,
+    onBlur,
+    onChange,
+    onClose,
+    onFocus,
+    onInfiniteScroll,
+    placeholder,
+    placement,
+    shouldFocusOnClose = DEFAULT_PROPS$1f.shouldFocusOnClose,
+    theme = defaultTheme,
+    value,
+    textFieldProps = {},
+    focusAnchorOnClose,
+    ...forwardedProps
+  } = otherProps;
+  const inputAnchorRef = useRef(null);
+  const textFieldRef = useRef(null);
+  useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames.join(className, CLASSNAME$1u),
+    children: [/*#__PURE__*/jsx(TextField, {
+      ...textFieldProps,
+      chips: chips,
+      error: error,
+      hasError: hasError,
+      helper: helper,
+      icon: icon,
+      inputRef: mergeRefs(inputAnchorRef, inputRef),
+      clearButtonProps: clearButtonProps,
+      ...disabledStateProps,
+      isRequired: isRequired,
+      isValid: isValid,
+      label: label,
+      name: name,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      placeholder: placeholder,
+      textFieldRef: textFieldRef,
+      theme: theme,
+      value: value
+    }), /*#__PURE__*/jsx(Dropdown, {
+      anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
+      closeOnClick: closeOnClick,
+      closeOnClickAway: closeOnClickAway,
+      closeOnEscape: closeOnEscape,
+      focusAnchorOnClose: focusAnchorOnClose,
+      fitToAnchorWidth: fitToAnchorWidth,
+      isOpen: isOpen,
+      offset: offset,
+      onClose: onClose,
+      onInfiniteScroll: onInfiniteScroll,
+      placement: placement,
+      shouldFocusOnOpen: false,
+      theme: theme,
+      children: children
+    })]
+  });
+});
+Autocomplete.displayName = COMPONENT_NAME$1w;
+Autocomplete.className = CLASSNAME$1u;
+Autocomplete.defaultProps = DEFAULT_PROPS$1f;
 
 /**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
+ * Component display name.
  */
+const COMPONENT_NAME$1v = 'AutocompleteMultiple';
 
 /**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
+ * Component default class name and class prefix.
  */
-const TOOLTIP_HOVER_DELAY = {
-  open: 500,
-  close: 500
-};
+const CLASSNAME$1t = 'lumx-autocomplete-multiple';
 
 /**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
+ * Component default props.
  */
-const TOOLTIP_LONG_PRESS_DELAY = {
-  open: 250,
-  close: 3000
+const DEFAULT_PROPS$1e = {
+  closeOnClickAway: true,
+  closeOnEscape: true,
+  selectedChipRender(choice, index, onClear, isDisabled) {
+    const onClick = event => onClear && onClear(event, choice);
+    return /*#__PURE__*/jsx(Chip, {
+      after: onClear && /*#__PURE__*/jsx(Icon, {
+        icon: mdiClose,
+        size: Size$1.xxs
+      }),
+      isDisabled: isDisabled,
+      size: Size$1.s,
+      onAfterClick: onClick,
+      onClick: onClick,
+      children: choice
+    }, index);
+  },
+  values: []
 };
 
 /**
- * Alignments.
- */
-const Alignment = {
-  left: 'left'};
-const Theme = {
-  light: 'light',
-  dark: 'dark'
-};
-const Size = {
-  xxs: 'xxs',
-  xs: 'xs',
-  s: 's',
-  m: 'm',
-  l: 'l',
-  xl: 'xl',
-  xxl: 'xxl',
-  tiny: 'tiny',
-  regular: 'regular',
-  medium: 'medium',
-  big: 'big',
-  huge: 'huge'
-};
-const Orientation = {
-  horizontal: 'horizontal',
-  vertical: 'vertical'
-};
-const Emphasis = {
-  low: 'low',
-  high: 'high'
-};
-/**
- * List of typographies that can't be customized.
- */
-const TypographyInterface = {
-  overline: 'overline',
-  caption: 'caption',
-  body1: 'body1',
-  body2: 'body2',
-  subtitle1: 'subtitle1',
-  subtitle2: 'subtitle2',
-  title: 'title',
-  headline: 'headline',
-  display1: 'display1'
-};
-/**
- * List of all typographies.
- */
-const Typography = {
-  ...TypographyInterface};
-/**
- * All available aspect ratios.
- */
-const AspectRatio = {
-  /** Intrinsic content ratio. */
-  original: 'original',
-  /** Ratio 3:2 */
-  horizontal: 'horizontal',
-  /** Ratio 1:1 */
-  square: 'square',
-  /** Ratio constrained by the parent. */
-  free: 'free'
-};
-/**
- * Semantic info about the purpose of the component
- */
-const Kind = {
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  error: 'error'
-};
-/**
- * See SCSS variable $lumx-color-palette
- */
-const ColorPalette = {
-  primary: 'primary',
-  blue: 'blue',
-  dark: 'dark',
-  green: 'green',
-  yellow: 'yellow',
-  red: 'red',
-  light: 'light'};
-/**
- * See SCSS variable $lumx-color-variants
+ * AutocompleteMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-const ColorVariant = {
-  N: 'N'
-};
-
-/** ColorPalette with all possible color variant combination */
-
-({
-  [Size.xxs]: 14,
-  [Size.xs]: 20,
-  [Size.s]: 24,
-  [Size.m]: 36,
-  [Size.l]: 64,
-  [Size.xl]: 128,
-  [Size.xxl]: 256
+const AutocompleteMultiple = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    anchorToInput,
+    children,
+    // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    chipsAlignment,
+    className,
+    closeOnClickAway = DEFAULT_PROPS$1e.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1e.closeOnEscape,
+    fitToAnchorWidth,
+    hasError,
+    helper,
+    icon,
+    inputRef,
+    clearButtonProps,
+    isRequired,
+    isOpen,
+    isValid,
+    label,
+    name,
+    offset,
+    onBlur,
+    onChange,
+    onClear,
+    onClose,
+    onFocus,
+    onInfiniteScroll,
+    onKeyDown,
+    placeholder,
+    placement,
+    selectedChipRender = DEFAULT_PROPS$1e.selectedChipRender,
+    shouldFocusOnClose,
+    theme = defaultTheme,
+    type,
+    value,
+    values = DEFAULT_PROPS$1e.values,
+    ...forwardedProps
+  } = otherProps;
+  return /*#__PURE__*/jsx(Autocomplete, {
+    ref: ref,
+    ...forwardedProps,
+    anchorToInput: anchorToInput,
+    className: classNames.join(className, CLASSNAME$1t),
+    name: name,
+    value: value,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onBlur: onBlur,
+    shouldFocusOnClose: shouldFocusOnClose,
+    onFocus: onFocus,
+    hasError: hasError,
+    helper: helper,
+    icon: icon,
+    inputRef: inputRef,
+    chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear)),
+    ...disabledStateProps,
+    isRequired: isRequired,
+    clearButtonProps: clearButtonProps,
+    isValid: isValid,
+    label: label,
+    placeholder: placeholder,
+    theme: theme,
+    type: type,
+    isOpen: isOpen,
+    closeOnClick: false,
+    closeOnClickAway: closeOnClickAway,
+    closeOnEscape: closeOnEscape,
+    onClose: onClose,
+    offset: offset,
+    placement: placement,
+    fitToAnchorWidth: fitToAnchorWidth,
+    onInfiniteScroll: onInfiniteScroll,
+    children: children
+  });
 });
-
-/**
- * Check if we are running in a true browser (not SSR and not jsdom test environment).
- */
-const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom');
+AutocompleteMultiple.displayName = COMPONENT_NAME$1v;
+AutocompleteMultiple.className = CLASSNAME$1t;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
@@ -2380,11 +2434,11 @@ const SelectionChipGroup$1 = (props, {
       const customProps = getChipProps?.(v) || {};
       const chipIsDisabled = customProps.isDisabled || isDisabled;
       const chipName = typeof customProps.children === 'string' ? customProps.children : name;
-      const ariaLabel = chipRemoveLabel ? `${chipName} \u2014 ${chipRemoveLabel}` : chipName;
+      const ariaLabel = chipRemoveLabel ? `${chipName} - ${chipRemoveLabel}` : chipName;
       return /*#__PURE__*/jsx(Tooltip, {
         label: !chipIsDisabled ? ariaLabel : undefined,
         children: /*#__PURE__*/jsx(Chip, {
-          "aria-label": label,
+          "aria-label": ariaLabel,
           ...customProps,
           size: "s",
           after: /*#__PURE__*/jsx(Icon, {
@@ -6046,6 +6100,12 @@ function useEventCallback(fn) {
   return React__default.useCallback((...args) => ref.current?.(...args), []);
 }
 
+/** Unref a react ref or element */
+function unref(maybeElement) {
+  if (maybeElement instanceof HTMLElement) return maybeElement;
+  return maybeElement?.current;
+}
+
 const useRovingTabIndexContainer = ({
   containerRef,
   itemSelector,
@@ -6056,7 +6116,7 @@ const useRovingTabIndexContainer = ({
 }) => {
   const onItemFocused = useEventCallback(unstableOnItemFocused);
   useIsomorphicLayoutEffect(() => {
-    const container = containerRef?.current;
+    const container = unref(containerRef);
     if (!container) {
       return undefined;
     }
@@ -6097,7 +6157,7 @@ const SelectionChipGroup = ({
   chipRemoveLabel,
   ...forwardedProps
 }) => {
-  const containerRef = React__default.useRef(null);
+  const [container, setContainer] = React__default.useState(null);
 
   // Store latest values in refs so the event handlers always access current state.
   const valueRef = React__default.useRef(value);
@@ -6105,27 +6165,40 @@ const SelectionChipGroup = ({
   const onChangeRef = React__default.useRef(onChange);
   onChangeRef.current = onChange;
 
-  // Attach event listeners
+  // Attach event listeners. Re-runs when the container mounts/unmounts, inputRef or getOptionId change.
   React__default.useEffect(() => {
     return setupSelectionChipGroupEvents({
-      getContainer: () => containerRef.current,
+      getContainer: () => container,
       getInput: () => inputRef?.current,
       onChange: newValue => onChangeRef.current?.(newValue),
       getValue: () => valueRef.current,
       getOptionId
     });
-  }, [inputRef, getOptionId]);
+  }, [container, inputRef, getOptionId]);
   useRovingTabIndexContainer({
-    containerRef,
+    containerRef: container,
     itemSelector: `.${CLASSNAME$1i}`,
     itemDisabledSelector: `.${CLASSNAME$1i}[aria-disabled="true"]`
   });
 
-  // Handle renderChip or fallback to getChipProps from props
-  const getChipProps = renderChip ? option => {
-    const customChip = renderChip(option);
-    return isComponentType(Chip)(customChip) && customChip.props || {};
-  } : getChipPropsProp;
+  // Merge getChipProps and renderChip: getChipProps provides base props, renderChip overrides them,
+  // and the core JSX template props take final priority (applied in the core component).
+  const getChipProps = option => {
+    const chipProps = getChipPropsProp?.(option) || {};
+    let renderChipProps = {};
+    if (renderChip) {
+      const customChip = renderChip(option);
+      if (isComponentType(Chip)(customChip)) {
+        renderChipProps = customChip.props || {};
+      }
+    }
+    // Filter out undefined values from renderChipProps so they don't override chipProps
+    const definedRenderChipProps = Object.fromEntries(Object.entries(renderChipProps).filter(([, v]) => v !== undefined));
+    return {
+      ...chipProps,
+      ...definedRenderChipProps
+    };
+  };
   return SelectionChipGroup$1({
     ...forwardedProps,
     value,
@@ -6136,7 +6209,7 @@ const SelectionChipGroup = ({
     label,
     chipRemoveLabel,
     getChipProps,
-    ref: containerRef
+    ref: setContainer
   }, {
     Chip,
     ChipGroup,
@@ -13495,12 +13568,6 @@ const ImageSlideshow = ({
   });
 };
 
-/** Unref a react ref or element */
-function unref(maybeElement) {
-  if (maybeElement instanceof HTMLElement) return maybeElement;
-  return maybeElement?.current;
-}
-
 function setupViewTransitionName(elementRef, name) {
   let originalName = null;
   return {