@lumx/react 4.21.1-alpha.0 → 4.22.0-next.0

package/index.js

@@ -9,7 +9,7 @@ import ReactDOM__default from 'react-dom';
 import { classNames, onEscapePressed, onEnterPressed as onEnterPressed$1, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import last from 'lodash/last.js';
 import pull from 'lodash/pull.js';
-import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider, I as InfiniteScroll } from './_internal/CusEA38-.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider, I as InfiniteScroll } from './_internal/CcLi-Wuu.js';
 import isEmpty from 'lodash/isEmpty.js';
 import get from 'lodash/get.js';
 import { getDisabledState as getDisabledState$1 } from '@lumx/core/js/utils/disabledState';
@@ -309,7 +309,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$1c(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$1d(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (typeof modifiersOrAdditionalClasses === 'string' || Array.isArray(modifiersOrAdditionalClasses)) {
@@ -344,7 +344,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$1c(ACTION_ELEMENT, modifiers)
+  action: modifiers => block$1d(ACTION_ELEMENT, modifiers)
 });
 
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
@@ -467,7 +467,7 @@ const visuallyHidden = () => VISUALLY_HIDDEN;
  */
 
 function element$T(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
-  return block$1c(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$1d(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -475,7 +475,7 @@ function element$T(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
  */
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
-    return block$1c(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$1d(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     return element$T(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
@@ -558,20 +558,20 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1G = 'AlertDialog';
+const COMPONENT_NAME$1H = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1C = 'lumx-alert-dialog';
+const CLASSNAME$1D = 'lumx-alert-dialog';
 const {
-  block: block$1b
-} = bem(CLASSNAME$1C);
+  block: block$1c
+} = bem(CLASSNAME$1D);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1j = {
+const DEFAULT_PROPS$1k = {
   size: Size.tiny,
   kind: Kind.info
 };
@@ -593,8 +593,8 @@ const AlertDialog$1 = props => {
     cancelProps,
     confirmProps,
     ref,
-    kind = DEFAULT_PROPS$1j.kind,
-    size = DEFAULT_PROPS$1j.size,
+    kind = DEFAULT_PROPS$1k.kind,
+    size = DEFAULT_PROPS$1k.size,
     dialogProps,
     children,
     DescriptionElement,
@@ -634,7 +634,7 @@ const AlertDialog$1 = props => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classnames(className, block$1b({
+    className: classnames(className, block$1c({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -732,9 +732,9 @@ const AlertDialog = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1G;
-AlertDialog.className = CLASSNAME$1C;
-AlertDialog.defaultProps = DEFAULT_PROPS$1j;
+AlertDialog.displayName = COMPONENT_NAME$1H;
+AlertDialog.className = CLASSNAME$1D;
+AlertDialog.defaultProps = DEFAULT_PROPS$1k;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -826,17 +826,17 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1F = 'Autocomplete';
+const COMPONENT_NAME$1G = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1B = 'lumx-autocomplete';
+const CLASSNAME$1C = 'lumx-autocomplete';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1i = {
+const DEFAULT_PROPS$1j = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -859,13 +859,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$1i.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1j.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$1i.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1i.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1i.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$1j.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1j.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1j.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -886,7 +886,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$1i.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$1j.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -899,7 +899,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1B),
+    className: classNames.join(className, CLASSNAME$1C),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -939,24 +939,24 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1F;
-Autocomplete.className = CLASSNAME$1B;
-Autocomplete.defaultProps = DEFAULT_PROPS$1i;
+Autocomplete.displayName = COMPONENT_NAME$1G;
+Autocomplete.className = CLASSNAME$1C;
+Autocomplete.defaultProps = DEFAULT_PROPS$1j;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1E = 'AutocompleteMultiple';
+const COMPONENT_NAME$1F = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1A = 'lumx-autocomplete-multiple';
+const CLASSNAME$1B = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1h = {
+const DEFAULT_PROPS$1i = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -997,8 +997,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$1h.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1h.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$1i.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1i.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -1020,19 +1020,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$1h.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$1i.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$1h.values,
+    values = DEFAULT_PROPS$1i.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1A),
+    className: classNames.join(className, CLASSNAME$1B),
     name: name,
     value: value,
     onChange: onChange,
@@ -1065,28 +1065,28 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1E;
-AutocompleteMultiple.className = CLASSNAME$1A;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1h;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1F;
+AutocompleteMultiple.className = CLASSNAME$1B;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1i;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1D = 'Avatar';
+const COMPONENT_NAME$1E = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1z = 'lumx-avatar';
+const CLASSNAME$1A = 'lumx-avatar';
 const {
-  block: block$1a,
+  block: block$1b,
   element: element$S
-} = bem(CLASSNAME$1z);
+} = bem(CLASSNAME$1A);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1g = {
+const DEFAULT_PROPS$1h = {
   size: Size.m
 };
 
@@ -1103,7 +1103,7 @@ const Avatar$1 = props => {
     badge,
     className,
     image,
-    size = DEFAULT_PROPS$1g.size,
+    size = DEFAULT_PROPS$1h.size,
     theme,
     ref,
     ...forwardedProps
@@ -1111,7 +1111,7 @@ const Avatar$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$1a({
+    className: classnames(className, block$1b({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -1144,7 +1144,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$1g.size,
+    size = DEFAULT_PROPS$1h.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -1172,27 +1172,27 @@ const Avatar = forwardRef((props, ref) => {
     })
   });
 });
-Avatar.displayName = COMPONENT_NAME$1D;
-Avatar.className = CLASSNAME$1z;
-Avatar.defaultProps = DEFAULT_PROPS$1g;
+Avatar.displayName = COMPONENT_NAME$1E;
+Avatar.className = CLASSNAME$1A;
+Avatar.defaultProps = DEFAULT_PROPS$1h;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1C = 'Badge';
+const COMPONENT_NAME$1D = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1y = 'lumx-badge';
+const CLASSNAME$1z = 'lumx-badge';
 const {
-  block: block$19
-} = bem(CLASSNAME$1y);
+  block: block$1a
+} = bem(CLASSNAME$1z);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1f = {
+const DEFAULT_PROPS$1g = {
   color: ColorPalette.primary
 };
 
@@ -1206,22 +1206,22 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$1f.color,
+    color = DEFAULT_PROPS$1g.color,
     ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$19({
+    className: classnames(className, block$1a({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1C;
-Badge$1.className = CLASSNAME$1y;
-Badge$1.defaultProps = DEFAULT_PROPS$1f;
+Badge$1.displayName = COMPONENT_NAME$1D;
+Badge$1.className = CLASSNAME$1z;
+Badge$1.defaultProps = DEFAULT_PROPS$1g;
 
 /**
  * Defines the props of the component.
@@ -1244,12 +1244,12 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1B = 'BadgeWrapper';
-const CLASSNAME$1x = 'lumx-badge-wrapper';
+const COMPONENT_NAME$1C = 'BadgeWrapper';
+const CLASSNAME$1y = 'lumx-badge-wrapper';
 const {
-  block: block$18,
+  block: block$19,
   element: element$R
-} = bem(CLASSNAME$1x);
+} = bem(CLASSNAME$1y);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1261,7 +1261,7 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$18()),
+    className: classnames(className, block$19()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
       className: element$R('badge'),
       children: badge
@@ -1275,8 +1275,8 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1B;
-BadgeWrapper.className = CLASSNAME$1x;
+BadgeWrapper.displayName = COMPONENT_NAME$1C;
+BadgeWrapper.className = CLASSNAME$1y;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1326,7 +1326,7 @@ const RawClickable = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1A = 'ButtonRoot';
+const COMPONENT_NAME$1B = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1424,7 +1424,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1A;
+ButtonRoot.displayName = COMPONENT_NAME$1B;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1434,20 +1434,20 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1z = 'Button';
+const COMPONENT_NAME$1A = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1w = 'lumx-button';
+const CLASSNAME$1x = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1w);
+} = bem(CLASSNAME$1x);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1e = {
+const DEFAULT_PROPS$1f = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1461,10 +1461,10 @@ const DEFAULT_PROPS$1e = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$1e.emphasis,
+    emphasis = DEFAULT_PROPS$1f.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$1e.size,
+    size = DEFAULT_PROPS$1f.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1479,9 +1479,9 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1z;
-Button$1.className = CLASSNAME$1w;
-Button$1.defaultProps = DEFAULT_PROPS$1e;
+Button$1.displayName = COMPONENT_NAME$1A;
+Button$1.className = CLASSNAME$1x;
+Button$1.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1554,26 +1554,26 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1z;
-Button.className = CLASSNAME$1w;
-Button.defaultProps = DEFAULT_PROPS$1e;
+Button.displayName = COMPONENT_NAME$1A;
+Button.className = CLASSNAME$1x;
+Button.defaultProps = DEFAULT_PROPS$1f;
 
-const COMPONENT_NAME$1y = 'Icon';
+const COMPONENT_NAME$1z = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1v = IconClassName;
+const CLASSNAME$1w = IconClassName;
 const {
-  block: block$17
-} = bem(CLASSNAME$1v);
+  block: block$18
+} = bem(CLASSNAME$1w);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1d = {};
+const DEFAULT_PROPS$1e = {};
 
 /**
  * Icon component.
@@ -1622,7 +1622,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$17({
+    className: classnames(className, block$18({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1651,24 +1651,24 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1y;
-Icon$1.className = CLASSNAME$1v;
-Icon$1.defaultProps = DEFAULT_PROPS$1d;
+Icon$1.displayName = COMPONENT_NAME$1z;
+Icon$1.className = CLASSNAME$1w;
+Icon$1.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1x = 'IconButton';
+const COMPONENT_NAME$1y = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1u = 'lumx-icon-button';
+const CLASSNAME$1v = 'lumx-icon-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1c = {
+const DEFAULT_PROPS$1d = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1681,11 +1681,11 @@ const DEFAULT_PROPS$1c = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$1c.emphasis,
+    emphasis = DEFAULT_PROPS$1d.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$1c.size,
+    size = DEFAULT_PROPS$1d.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1704,9 +1704,9 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1x;
-IconButton$1.className = CLASSNAME$1u;
-IconButton$1.defaultProps = DEFAULT_PROPS$1c;
+IconButton$1.displayName = COMPONENT_NAME$1y;
+IconButton$1.className = CLASSNAME$1v;
+IconButton$1.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * IconButton component.
@@ -1749,24 +1749,24 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1x;
-IconButton.className = CLASSNAME$1u;
-IconButton.defaultProps = DEFAULT_PROPS$1c;
+IconButton.displayName = COMPONENT_NAME$1y;
+IconButton.className = CLASSNAME$1v;
+IconButton.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1w = 'ButtonGroup';
+const COMPONENT_NAME$1x = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1t = 'lumx-button-group';
+const CLASSNAME$1u = 'lumx-button-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1b = {};
+const DEFAULT_PROPS$1c = {};
 
 /**
  * ButtonGroup component.
@@ -1782,13 +1782,13 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1t),
+    className: classnames(className, CLASSNAME$1u),
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1w;
-ButtonGroup$1.className = CLASSNAME$1t;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$1b;
+ButtonGroup$1.displayName = COMPONENT_NAME$1x;
+ButtonGroup$1.className = CLASSNAME$1u;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$1c;
 
 /**
  * ButtonGroup component.
@@ -1803,9 +1803,81 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1w;
-ButtonGroup.className = CLASSNAME$1t;
-ButtonGroup.defaultProps = DEFAULT_PROPS$1b;
+ButtonGroup.displayName = COMPONENT_NAME$1x;
+ButtonGroup.className = CLASSNAME$1u;
+ButtonGroup.defaultProps = DEFAULT_PROPS$1c;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1w = 'Card';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1t = 'lumx-card';
+const {
+  block: block$17
+} = bem(CLASSNAME$1t);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1b = {
+  as: 'div'
+};
+
+/** Root element rendered when no `as` prop is provided. */
+
+/**
+ * Card component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const Card$1 = props => {
+  const {
+    className,
+    children,
+    elevation,
+    ref,
+    as: Element = DEFAULT_PROPS$1b.as,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx(Element, {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$17({
+      [`elevation-${elevation}`]: Boolean(elevation)
+    })),
+    children: children
+  });
+};
+
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+const forwardRefPolymorphic = React__default.forwardRef;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Card component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Card = Object.assign(forwardRefPolymorphic((props, ref) => {
+  return Card$1({
+    ...props,
+    ref
+  });
+}), {
+  displayName: COMPONENT_NAME$1w,
+  className: CLASSNAME$1t,
+  defaultProps: DEFAULT_PROPS$1b
+});
 
 const COMPONENT_NAME$1v = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
@@ -7256,9 +7328,6 @@ const ComboboxButton$1 = (props, {
   });
 };
 
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-const forwardRefPolymorphic = React__default.forwardRef;
-
 var shim = {exports: {}};
 
 var useSyncExternalStoreShim_production = {};
@@ -15841,6 +15910,7 @@ const MenuPopover$1 = (props, {
     className,
     isOpen,
     placement = 'bottom-start',
+    fitToAnchorWidth = FitAnchorWidth.MIN_WIDTH,
     anchorRef,
     handleClose,
     ...forwardedProps
@@ -15857,7 +15927,7 @@ const MenuPopover$1 = (props, {
     focusAnchorOnClose: true,
     withFocusTrap: false,
     closeMode: "hide",
-    fitToAnchorWidth: false,
+    fitToAnchorWidth: fitToAnchorWidth,
     className: block$z([className]),
     children: /*#__PURE__*/jsx(FlexBox, {
       orientation: "vertical",
@@ -19487,6 +19557,27 @@ const computeValueFromPercent = (percent, min, max, precision = 0) => Number((mi
  */
 const computePercentFromValue = (value, min, max) => Number((value - min) / (max - min));
 
+/**
+ * Type guard checking whether an event is a touch event (native or React synthetic).
+ *
+ * @param event The interaction event.
+ * @return Whether the event is a touch event.
+ */
+const isTouchEvent = event => 'touches' in event;
+
+/**
+ * Read the horizontal page position from either a mouse or touch event.
+ *
+ * @param event The interaction event.
+ * @return The page X position.
+ */
+const getPageX = event => {
+  if (isTouchEvent(event)) {
+    return (event.touches[0] ?? event.changedTouches[0]).pageX;
+  }
+  return event.pageX;
+};
+
 /**
  * Slider component.
  *
@@ -19571,7 +19662,7 @@ const Slider = forwardRef((props, ref) => {
       width,
       left
     } = slider.getBoundingClientRect();
-    let percent = (event.pageX - left - window.pageXOffset) / width;
+    let percent = (getPageX(event) - left - window.pageXOffset) / width;
     percent = clamp(percent, 0, 1);
     if (steps) {
       percent = findClosestStep(percent);
@@ -19580,19 +19671,22 @@ const Slider = forwardRef((props, ref) => {
   };
 
   /**
-   * Register a handler for the mouse move event.
+   * Register a handler for the mouse/touch move event.
    */
   const handleMove = useEventCallback(event => {
     const {
       current: slider
     } = sliderRef;
     if (!slider || !onChange) return;
+    if (isTouchEvent(event)) {
+      event.preventDefault();
+    }
     const newValue = getPercentValue(event, slider);
     onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
   });
 
   /**
-   * Register a handler for the mouse up event.
+   * Register a handler for the mouse up/touch end/touch cancel event.
    * Clean a all listeners.
    */
   const handleEnd = useEventCallback(() => {
@@ -19600,6 +19694,7 @@ const Slider = forwardRef((props, ref) => {
     document.body.removeEventListener('mouseup', handleEnd);
     document.body.removeEventListener('touchmove', handleMove);
     document.body.removeEventListener('touchend', handleEnd);
+    document.body.removeEventListener('touchcancel', handleEnd);
   });
 
   /**
@@ -19645,6 +19740,25 @@ const Slider = forwardRef((props, ref) => {
     document.body.addEventListener('mousemove', handleMove);
     document.body.addEventListener('mouseup', handleEnd);
   });
+
+  /**
+   * Register a handler for the touchStart event.
+   */
+  const handleTouchStart = useEventCallback(event => {
+    const {
+      current: slider
+    } = sliderRef;
+    if (isAnyDisabled || !slider) return;
+    const newValue = getPercentValue(event, slider);
+    if (onChange) {
+      onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
+    }
+    document.body.addEventListener('touchmove', handleMove, {
+      passive: false
+    });
+    document.body.addEventListener('touchend', handleEnd);
+    document.body.addEventListener('touchcancel', handleEnd);
+  });
   const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
@@ -19654,6 +19768,7 @@ const Slider = forwardRef((props, ref) => {
       'has-label': Boolean(label)
     })),
     onMouseDown: handleMouseDown,
+    onTouchStart: handleTouchStart,
     children: [label && /*#__PURE__*/jsx(InputLabel, {
       id: sliderLabelId,
       htmlFor: sliderId,
@@ -23047,5 +23162,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1w as CLASSNAME, COMPONENT_NAME$1z as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1e as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, DialogHeading, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME$3 as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME$3 as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1x as CLASSNAME, COMPONENT_NAME$1A as COMPONENT_NAME, Card, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1f as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, DialogHeading, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME$3 as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME$3 as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map