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

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,597 +73,247 @@ 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
-  };
-}
-
+const ColorPalette = {
+  primary: 'primary',
+  blue: 'blue',
+  dark: 'dark',
+  green: 'green',
+  yellow: 'yellow',
+  red: 'red',
+  light: 'light'};
 /**
- * Component display name.
+ * See SCSS variable $lumx-color-variants
  */
-const COMPONENT_NAME$1w = 'Autocomplete';
+const ColorVariant = {
+  N: 'N'
+};
 
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1u = 'lumx-autocomplete';
+/** 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
+});
 
 /**
- * Component default props.
+ * Check if we are running in a true browser (not SSR and not jsdom test environment).
  */
-const DEFAULT_PROPS$1f = {
-  anchorToInput: false,
-  closeOnClick: false,
-  closeOnClickAway: true,
-  closeOnEscape: true,
-  shouldFocusOnClose: false
-};
+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;
+}
+
+var classnames$1 = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredClassnames;
+
+function requireClassnames () {
+	if (hasRequiredClassnames) return classnames$1.exports;
+	hasRequiredClassnames = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames() {
+				var classes = [];
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (!arg) continue;
+
+					var argType = typeof arg;
+
+					if (argType === 'string' || argType === 'number') {
+						classes.push(arg);
+					} else if (Array.isArray(arg)) {
+						if (arg.length) {
+							var inner = classNames.apply(null, arg);
+							if (inner) {
+								classes.push(inner);
+							}
+						}
+					} else if (argType === 'object') {
+						if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+							classes.push(arg.toString());
+							continue;
+						}
+
+						for (var key in arg) {
+							if (hasOwn.call(arg, key) && arg[key]) {
+								classes.push(key);
+							}
+						}
+					}
+				}
+
+				return classes.join(' ');
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (classnames$1));
+	return classnames$1.exports;
+}
+
+var classnamesExports = requireClassnames();
+var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 /**
- * Autocomplete component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * Modifier
+ * @example { 'is-disabled': true, 'is-selected': false }
  */
-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.
+ * 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'
  */
-const COMPONENT_NAME$1v = 'AutocompleteMultiple';
+function modifier$1(baseName, modifiers) {
+  const modifierClasses = [];
+  for (const [key, value] of Object.entries(modifiers)) {
+    if (value) modifierClasses.push(`${baseName}--${key}`);
+  }
+  return modifierClasses.join(' ');
+}
 
 /**
- * Component default class name and class prefix.
+ * 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'
  */
-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: []
-};
-
-/**
- * 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;
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var classnames$1 = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-var hasRequiredClassnames;
-
-function requireClassnames () {
-	if (hasRequiredClassnames) return classnames$1.exports;
-	hasRequiredClassnames = 1;
-	(function (module) {
-		/* global define */
-
-		(function () {
-
-			var hasOwn = {}.hasOwnProperty;
-
-			function classNames() {
-				var classes = [];
-
-				for (var i = 0; i < arguments.length; i++) {
-					var arg = arguments[i];
-					if (!arg) continue;
-
-					var argType = typeof arg;
-
-					if (argType === 'string' || argType === 'number') {
-						classes.push(arg);
-					} else if (Array.isArray(arg)) {
-						if (arg.length) {
-							var inner = classNames.apply(null, arg);
-							if (inner) {
-								classes.push(inner);
-							}
-						}
-					} else if (argType === 'object') {
-						if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-							classes.push(arg.toString());
-							continue;
-						}
-
-						for (var key in arg) {
-							if (hasOwn.call(arg, key) && arg[key]) {
-								classes.push(key);
-							}
-						}
-					}
-				}
-
-				return classes.join(' ');
-			}
-
-			if (module.exports) {
-				classNames.default = classNames;
-				module.exports = classNames;
-			} else {
-				window.classNames = classNames;
-			}
-		}()); 
-	} (classnames$1));
-	return classnames$1.exports;
-}
-
-var classnamesExports = requireClassnames();
-var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
-
-/**
- * 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$18(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$19(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -698,7 +348,7 @@ const ACTION_ELEMENT = `${PREFIX}__action`;
 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)
+  action: modifiers => block$19(ACTION_ELEMENT, modifiers)
 });
 
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
@@ -822,9 +472,9 @@ const visuallyHidden = () => VISUALLY_HIDDEN;
 
 function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$18(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$19(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$18(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$19(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -833,9 +483,9 @@ function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$18(baseName, modifiersOrAdditionalClasses);
+      return block$19(baseName, modifiersOrAdditionalClasses);
     }
-    return block$18(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$19(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -879,134 +529,538 @@ const getWithSelector = (selector, object) => {
 };
 
 /**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
+ * 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
+  }
+};
 
 /**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
+ * Component display name.
  */
-const TOOLTIP_HOVER_DELAY = {
-  open: 500,
-  close: 500
-};
+const COMPONENT_NAME$1x = 'AlertDialog';
 
 /**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
+ * Component default class name and class prefix.
  */
-const TOOLTIP_LONG_PRESS_DELAY = {
-  open: 250,
-  close: 3000
-};
+const CLASSNAME$1v = 'lumx-alert-dialog';
+const {
+  block: block$18
+} = bem(CLASSNAME$1v);
 
 /**
- * Alignments.
+ * Component default props.
  */
-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'
+const DEFAULT_PROPS$1g = {
+  size: Size.tiny,
+  kind: Kind.info
 };
+
 /**
- * List of typographies that can't be customized.
+ * 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.
  */
-const TypographyInterface = {
-  overline: 'overline',
-  caption: 'caption',
-  body1: 'body1',
-  body2: 'body2',
-  subtitle1: 'subtitle1',
-  subtitle2: 'subtitle2',
-  title: 'title',
-  headline: 'headline',
-  display1: 'display1'
+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
+          })]
+        })
+      })
+    })]
+  });
 };
+
 /**
- * List of all typographies.
- */
-const Typography = {
-  ...TypographyInterface};
-/**
- * All available aspect ratios.
+ * 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.
  */
-const AspectRatio = {
-  /** Intrinsic content ratio. */
-  original: 'original',
-  /** Ratio 3:2 */
-  horizontal: 'horizontal',
-  /** Ratio 1:1 */
-  square: 'square',
-  /** Ratio constrained by the parent. */
-  free: 'free'
-};
+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;
+
 /**
- * Semantic info about the purpose of the component
+ * Hook focusing an element when defined and `focus` boolean `true`.
+ *
+ * @param element       Element to focus.
+ * @param shouldFocus   Boolean flag to trigger the focus
  */
-const Kind = {
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  error: 'error'
-};
+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]);
+}
+
 /**
- * See SCSS variable $lumx-color-palette
+ * Merge refs into a single function ref.
+ *
+ * @param  refs React references to merge.
+ * @return the merged ref.
  */
-const ColorPalette = {
-  primary: 'primary',
-  blue: 'blue',
-  dark: 'dark',
-  green: 'green',
-  yellow: 'yellow',
-  red: 'red',
-  light: 'light'};
+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;
+    }
+  });
+}
+
 /**
- * See SCSS variable $lumx-color-variants
+ * Same as `mergeRefs` but memoized
  */
-const ColorVariant = {
-  N: 'N'
+const useMergeRefs = (...refs) => {
+  return useMemo(() => mergeRefs(...refs),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
 };
 
-/** ColorPalette with all possible color variant combination */
+const ThemeContext = /*#__PURE__*/React__default.createContext(undefined);
 
-({
-  [Size.xxs]: 14,
-  [Size.xs]: 20,
-  [Size.s]: 24,
-  [Size.m]: 36,
-  [Size.l]: 64,
-  [Size.xl]: 128,
-  [Size.xxl]: 256
+/** 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
+ */
+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';
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1f = {
+  anchorToInput: false,
+  closeOnClick: false,
+  closeOnClickAway: true,
+  closeOnEscape: true,
+  shouldFocusOnClose: false
+};
+
+/**
+ * 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;
 
 /**
- * Check if we are running in a true browser (not SSR and not jsdom test environment).
+ * Component display name.
  */
-const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom');
+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: []
+};
+
+/**
+ * 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;
 
 /**
  * Component display name.