@lumx/react 4.7.1 → 4.8.0-next.0

package/index.js

@@ -110,7 +110,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1d = {
+const DEFAULT_PROPS$1f = {
   size: Size$1.tiny,
   kind: Kind$1.info
 };
@@ -131,8 +131,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$1d.kind,
-    size = DEFAULT_PROPS$1d.size,
+    kind = DEFAULT_PROPS$1f.kind,
+    size = DEFAULT_PROPS$1f.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -220,7 +220,7 @@ const AlertDialog = forwardRef((props, ref) => {
 });
 AlertDialog.displayName = COMPONENT_NAME$1m;
 AlertDialog.className = CLASSNAME$1l;
-AlertDialog.defaultProps = DEFAULT_PROPS$1d;
+AlertDialog.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -322,7 +322,7 @@ const CLASSNAME$1k = 'lumx-autocomplete';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1c = {
+const DEFAULT_PROPS$1e = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -344,13 +344,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$1c.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1e.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$1c.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1c.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1c.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$1e.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1e.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1e.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -371,7 +371,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$1c.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$1e.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -426,7 +426,7 @@ const Autocomplete = forwardRef((props, ref) => {
 });
 Autocomplete.displayName = COMPONENT_NAME$1l;
 Autocomplete.className = CLASSNAME$1k;
-Autocomplete.defaultProps = DEFAULT_PROPS$1c;
+Autocomplete.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
@@ -441,7 +441,7 @@ const CLASSNAME$1j = 'lumx-autocomplete-multiple';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1b = {
+const DEFAULT_PROPS$1d = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -481,8 +481,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$1b.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1b.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$1d.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1d.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -504,12 +504,12 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$1b.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$1d.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$1b.values,
+    values = DEFAULT_PROPS$1d.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
@@ -551,7 +551,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1k;
 AutocompleteMultiple.className = CLASSNAME$1j;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1b;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1d;
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -851,10 +851,19 @@ const Size = {
   xs: 'xs',
   s: 's',
   m: 'm',
+  l: 'l',
   xl: 'xl',
-  xxl: 'xxl'};
+  xxl: 'xxl',
+  tiny: 'tiny',
+  regular: 'regular',
+  medium: 'medium',
+  big: 'big',
+  huge: 'huge'
+};
 const Orientation = {
-  horizontal: 'horizontal'};
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
 const Emphasis = {
   low: 'low',
   high: 'high'
@@ -883,7 +892,11 @@ const Typography = {
  */
 const AspectRatio = {
   /** Intrinsic content ratio. */
-  original: 'original'};
+  original: 'original',
+  /** Ratio 3:2 */
+  horizontal: 'horizontal',
+  /** Ratio 1:1 */
+  square: 'square'};
 /**
  * Semantic info about the purpose of the component
  */
@@ -905,6 +918,18 @@ const ColorPalette = {
   red: 'red',
   light: 'light'};
 
+/** 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
+});
+
 /**
  * Check if we are running in a true browser (not SSR and not jsdom test environment).
  */
@@ -927,7 +952,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1a = {
+const DEFAULT_PROPS$1c = {
   size: Size.m
 };
 
@@ -944,7 +969,7 @@ const Avatar$1 = props => {
     badge,
     className,
     image,
-    size = DEFAULT_PROPS$1a.size,
+    size = DEFAULT_PROPS$1c.size,
     theme,
     ref,
     ...forwardedProps
@@ -985,7 +1010,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$1a.size,
+    size = DEFAULT_PROPS$1c.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -1015,7 +1040,7 @@ const Avatar = forwardRef((props, ref) => {
 });
 Avatar.displayName = COMPONENT_NAME$1j;
 Avatar.className = CLASSNAME$1i;
-Avatar.defaultProps = DEFAULT_PROPS$1a;
+Avatar.defaultProps = DEFAULT_PROPS$1c;
 
 /**
  * Component display name.
@@ -1033,7 +1058,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$19 = {
+const DEFAULT_PROPS$1b = {
   color: ColorPalette.primary
 };
 
@@ -1047,7 +1072,7 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$19.color,
+    color = DEFAULT_PROPS$1b.color,
     ref,
     ...forwardedProps
   } = props;
@@ -1062,7 +1087,7 @@ const Badge$1 = props => {
 };
 Badge$1.displayName = COMPONENT_NAME$1i;
 Badge$1.className = CLASSNAME$1h;
-Badge$1.defaultProps = DEFAULT_PROPS$19;
+Badge$1.defaultProps = DEFAULT_PROPS$1b;
 
 /**
  * Defines the props of the component.
@@ -1288,7 +1313,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {
+const DEFAULT_PROPS$1a = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1302,10 +1327,10 @@ const DEFAULT_PROPS$18 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$18.emphasis,
+    emphasis = DEFAULT_PROPS$1a.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$18.size,
+    size = DEFAULT_PROPS$1a.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1322,7 +1347,7 @@ const Button$1 = props => {
 };
 Button$1.displayName = COMPONENT_NAME$1f;
 Button$1.className = CLASSNAME$1f;
-Button$1.defaultProps = DEFAULT_PROPS$18;
+Button$1.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1397,7 +1422,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = COMPONENT_NAME$1f;
 Button.className = CLASSNAME$1f;
-Button.defaultProps = DEFAULT_PROPS$18;
+Button.defaultProps = DEFAULT_PROPS$1a;
 
 const COMPONENT_NAME$1e = 'Icon';
 const IconClassName = 'lumx-icon';
@@ -1414,7 +1439,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {};
+const DEFAULT_PROPS$19 = {};
 
 /**
  * Icon component.
@@ -1494,7 +1519,7 @@ const Icon$1 = props => {
 };
 Icon$1.displayName = COMPONENT_NAME$1e;
 Icon$1.className = CLASSNAME$1e;
-Icon$1.defaultProps = DEFAULT_PROPS$17;
+Icon$1.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
@@ -1509,7 +1534,7 @@ const CLASSNAME$1d = 'lumx-icon-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$18 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1522,11 +1547,11 @@ const DEFAULT_PROPS$16 = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$16.emphasis,
+    emphasis = DEFAULT_PROPS$18.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$16.size,
+    size = DEFAULT_PROPS$18.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1547,7 +1572,7 @@ const IconButton$1 = props => {
 };
 IconButton$1.displayName = COMPONENT_NAME$1d;
 IconButton$1.className = CLASSNAME$1d;
-IconButton$1.defaultProps = DEFAULT_PROPS$16;
+IconButton$1.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * IconButton component.
@@ -1591,7 +1616,7 @@ const IconButton = forwardRef((props, ref) => {
 });
 IconButton.displayName = COMPONENT_NAME$1d;
 IconButton.className = CLASSNAME$1d;
-IconButton.defaultProps = DEFAULT_PROPS$16;
+IconButton.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Component display name.
@@ -1606,7 +1631,7 @@ const CLASSNAME$1c = 'lumx-button-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {};
+const DEFAULT_PROPS$17 = {};
 
 /**
  * ButtonGroup component.
@@ -1628,7 +1653,7 @@ const ButtonGroup$1 = props => {
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1c;
 ButtonGroup$1.className = CLASSNAME$1c;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$15;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * ButtonGroup component.
@@ -1645,7 +1670,7 @@ const ButtonGroup = forwardRef((props, ref) => {
 });
 ButtonGroup.displayName = COMPONENT_NAME$1c;
 ButtonGroup.className = CLASSNAME$1c;
-ButtonGroup.defaultProps = DEFAULT_PROPS$15;
+ButtonGroup.defaultProps = DEFAULT_PROPS$17;
 
 const COMPONENT_NAME$1b = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
@@ -1653,7 +1678,7 @@ const CLASSNAME$1b = InputLabelClassName;
 const {
   block: block$$
 } = bem(CLASSNAME$1b);
-const DEFAULT_PROPS$14 = {};
+const DEFAULT_PROPS$16 = {};
 
 /**
  * InputLabel component.
@@ -1683,7 +1708,7 @@ function InputLabel$1(props) {
 }
 InputLabel$1.displayName = COMPONENT_NAME$1b;
 InputLabel$1.className = CLASSNAME$1b;
-InputLabel$1.defaultProps = DEFAULT_PROPS$14;
+InputLabel$1.defaultProps = DEFAULT_PROPS$16;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1712,7 +1737,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$15 = {
   kind: Kind.info
 };
 
@@ -1723,7 +1748,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$13.kind,
+    kind = DEFAULT_PROPS$15.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1743,7 +1768,7 @@ function InputHelper$1(props) {
 }
 InputHelper$1.displayName = COMPONENT_NAME$1a;
 InputHelper$1.className = CLASSNAME$1a;
-InputHelper$1.defaultProps = DEFAULT_PROPS$13;
+InputHelper$1.defaultProps = DEFAULT_PROPS$15;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1858,7 +1883,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {};
+const DEFAULT_PROPS$14 = {};
 
 /**
  * Checkbox component.
@@ -1920,7 +1945,7 @@ const Checkbox = forwardRef((props, ref) => {
 });
 Checkbox.displayName = COMPONENT_NAME$19;
 Checkbox.className = CLASSNAME$19;
-Checkbox.defaultProps = DEFAULT_PROPS$12;
+Checkbox.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1955,7 +1980,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$13 = {
   size: Size.m
 };
 
@@ -1982,7 +2007,7 @@ const Chip$1 = props => {
     hasAfterClick,
     hasBeforeClick,
     hasOnClick,
-    size = DEFAULT_PROPS$11.size,
+    size = DEFAULT_PROPS$13.size,
     theme,
     ref,
     href,
@@ -2104,7 +2129,7 @@ const Chip = forwardRef((props, ref) => {
 });
 Chip.displayName = COMPONENT_NAME$18;
 Chip.className = CLASSNAME$18;
-Chip.defaultProps = DEFAULT_PROPS$11;
+Chip.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
@@ -2119,7 +2144,7 @@ const CLASSNAME$17 = 'lumx-chip-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {};
+const DEFAULT_PROPS$12 = {};
 
 /**
  * ChipGroup component.
@@ -2217,7 +2242,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
 });
 InternalChipGroup.displayName = COMPONENT_NAME$17;
 InternalChipGroup.className = CLASSNAME$17;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$10;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$12;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2429,7 +2454,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$11 = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2459,7 +2484,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$$.variant,
+    variant = DEFAULT_PROPS$11.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -2528,7 +2553,7 @@ const CommentBlock = forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$16;
 CommentBlock.className = CLASSNAME$15;
-CommentBlock.defaultProps = DEFAULT_PROPS$$;
+CommentBlock.defaultProps = DEFAULT_PROPS$11;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -3618,7 +3643,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$10 = {
   closeMode: 'unmount',
   size: Size$1.big,
   disableBodyScroll: true
@@ -3639,7 +3664,7 @@ const Dialog = forwardRef((props, ref) => {
   const {
     children,
     className,
-    closeMode = DEFAULT_PROPS$_.closeMode,
+    closeMode = DEFAULT_PROPS$10.closeMode,
     header,
     focusElement,
     forceFooterDivider,
@@ -3651,11 +3676,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$_.size,
+    size = DEFAULT_PROPS$10.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$_.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$10.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -3796,7 +3821,7 @@ const Dialog = forwardRef((props, ref) => {
 });
 Dialog.displayName = COMPONENT_NAME$12;
 Dialog.className = CLASSNAME$13;
-Dialog.defaultProps = DEFAULT_PROPS$_;
+Dialog.defaultProps = DEFAULT_PROPS$10;
 
 /**
  * Component display name.
@@ -3840,7 +3865,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {};
+const DEFAULT_PROPS$$ = {};
 
 /**
  * Divider component.
@@ -3863,7 +3888,7 @@ const Divider = forwardRef((props, ref) => {
 });
 Divider.displayName = COMPONENT_NAME$11;
 Divider.className = CLASSNAME$12;
-Divider.defaultProps = DEFAULT_PROPS$Z;
+Divider.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Component display name.
@@ -3876,37 +3901,66 @@ const COMPONENT_NAME$10 = 'DragHandle';
 const CLASSNAME$11 = 'lumx-drag-handle';
 const {
   block: block$T
-} = classNames.bem(CLASSNAME$11);
+} = bem(CLASSNAME$11);
 
 /**
  * DragHandle component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const DragHandle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
+const DragHandle$1 = props => {
   const {
     className,
-    theme = defaultTheme,
+    theme,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$T({
+    className: classnames(className, block$T({
       [`theme-${theme}`]: Boolean(theme)
     })),
-    children: /*#__PURE__*/jsx(Icon, {
+    children: Icon$1({
       icon: mdiDragVertical,
-      color: theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark,
-      size: Size$1.xs
+      color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
+      size: Size.xs
     })
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$_ = {};
+
+/**
+ * DragHandle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const DragHandle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    theme = defaultTheme,
+    ...otherProps
+  } = props;
+  return DragHandle$1({
+    ref,
+    theme,
+    ...otherProps
+  });
 });
 DragHandle.displayName = COMPONENT_NAME$10;
 DragHandle.className = CLASSNAME$11;
+DragHandle.defaultProps = DEFAULT_PROPS$_;
 
 const INITIAL_INDEX = -1;
 
@@ -4083,12 +4137,43 @@ const COMPONENT_NAME$$ = 'List';
 const CLASSNAME$10 = 'lumx-list';
 const {
   block: block$S
-} = classNames.bem(CLASSNAME$10);
+} = bem(CLASSNAME$10);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {};
+const DEFAULT_PROPS$Z = {};
+
+/**
+ * List component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const List$1 = props => {
+  const {
+    children,
+    className,
+    itemPadding,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("ul", {
+    ...forwardedProps,
+    className: classnames(className, block$S({
+      [`item-padding-${itemPadding}`]: Boolean(itemPadding)
+    })),
+    ref: ref,
+    children: children
+  });
+};
+List$1.displayName = COMPONENT_NAME$$;
+List$1.className = CLASSNAME$10;
+List$1.defaultProps = DEFAULT_PROPS$Z;
+
+/**
+ * Defines the props of the component.
+ */
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /**
@@ -4101,25 +4186,22 @@ const DEFAULT_PROPS$Y = {};
 const InternalList = forwardRef((props, ref) => {
   const {
     children,
-    className,
     isClickable,
-    itemPadding,
     onListItemSelected,
+    itemPadding,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
-  return /*#__PURE__*/jsx("ul", {
+  return List$1({
     ...forwardedProps,
-    className: classNames.join(className, block$S({
-      [`item-padding-${adjustedItemPadding}`]: Boolean(adjustedItemPadding)
-    })),
-    ref: ref,
-    children: children
+    ref,
+    children,
+    itemPadding: adjustedItemPadding
   });
 });
 InternalList.displayName = COMPONENT_NAME$$;
 InternalList.className = CLASSNAME$10;
-InternalList.defaultProps = DEFAULT_PROPS$Y;
+InternalList.defaultProps = DEFAULT_PROPS$Z;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -4203,7 +4285,7 @@ const {
 /**
  * Component default props (used by framework wrappers).
  */
-const DEFAULT_PROPS$X = {
+const DEFAULT_PROPS$Y = {
   closeMode: 'unmount',
   elevation: 3,
   placement: Placement.AUTO,
@@ -4227,8 +4309,8 @@ const Popover$1 = (props, {
     as: asTag = 'div',
     children,
     className,
-    closeMode = DEFAULT_PROPS$X.closeMode,
-    elevation = DEFAULT_PROPS$X.elevation,
+    closeMode = DEFAULT_PROPS$Y.closeMode,
+    elevation = DEFAULT_PROPS$Y.elevation,
     hasArrow,
     isOpen,
     position,
@@ -4238,7 +4320,7 @@ const Popover$1 = (props, {
     // Framework-specific
     ref,
     arrowRef,
-    usePortal = DEFAULT_PROPS$X.usePortal,
+    usePortal = DEFAULT_PROPS$Y.usePortal,
     clickAwayCallback,
     clickAwayRefs,
     unmountSentinel,
@@ -6636,27 +6718,27 @@ const _InnerPopover = forwardRef((props, ref) => {
     as,
     children,
     className,
-    closeMode = DEFAULT_PROPS$X.closeMode,
+    closeMode = DEFAULT_PROPS$Y.closeMode,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$X.elevation,
+    elevation = DEFAULT_PROPS$Y.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$X.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$X.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$Y.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$Y.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$X.placement,
+    placement = DEFAULT_PROPS$Y.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$X.zIndex,
+    zIndex = DEFAULT_PROPS$Y.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -6730,7 +6812,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$_;
 Popover.className = CLASSNAME$$;
-Popover.defaultProps = DEFAULT_PROPS$X;
+Popover.defaultProps = DEFAULT_PROPS$Y;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6790,7 +6872,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$X = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6813,18 +6895,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$W.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$W.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$W.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$W.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$W.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$X.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$X.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$X.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$X.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$X.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$W.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$X.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$W.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$W.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$X.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$X.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -6870,7 +6952,7 @@ const Dropdown = forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$Z;
 Dropdown.className = CLASSNAME$_;
-Dropdown.defaultProps = DEFAULT_PROPS$W;
+Dropdown.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Component display name.
@@ -6889,7 +6971,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$W = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6907,7 +6989,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$V.closeMode,
+    closeMode = DEFAULT_PROPS$W.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -7024,11 +7106,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$Y;
 ExpansionPanel.className = CLASSNAME$Z;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$V;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$W;
 
 const COMPONENT_NAME$X = 'Flag';
 const CLASSNAME$Y = 'lumx-flag';
-const DEFAULT_PROPS$U = {};
+const DEFAULT_PROPS$V = {};
 const {
   block: block$O,
   element: element$C
@@ -7092,7 +7174,7 @@ const Flag = forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$X;
 Flag.className = CLASSNAME$Y;
-Flag.defaultProps = DEFAULT_PROPS$U;
+Flag.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Defines the props of the component.
@@ -7180,15 +7262,67 @@ const CLASSNAME$W = 'lumx-generic-block';
 const {
   block: block$M,
   element: element$B
-} = classNames.bem(CLASSNAME$W);
+} = bem(CLASSNAME$W);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
-  gap: Size$1.big,
-  orientation: Orientation$1.horizontal
+const DEFAULT_PROPS$U = {
+  gap: Size.big,
+  orientation: Orientation.horizontal
 };
+
+/**
+ * The GenericBlock is a layout component made of 3 sections that can be
+ * displayed either horizontally of vertically with the same gap between each section.
+ *
+ * The sections are:
+ * - `Figure` => A visual element to display before the main content.
+ * - `Content` => The main content displayed
+ * - `Actions` => One or more actions to set after the element.
+ *
+ * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+ */
+const GenericBlock$1 = props => {
+  const {
+    className,
+    figure,
+    figureProps,
+    children,
+    actions,
+    actionsProps,
+    gap = DEFAULT_PROPS$U.gap,
+    ref,
+    content,
+    orientation = DEFAULT_PROPS$U.orientation,
+    contentProps,
+    FlexBox,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs(FlexBox, {
+    ref: ref,
+    className: classnames(className, block$M()),
+    gap: gap,
+    orientation: orientation,
+    ...forwardedProps,
+    children: [figure && /*#__PURE__*/jsx(FlexBox, {
+      ...figureProps,
+      className: classnames(figureProps?.className, element$B('figure')),
+      children: figure
+    }), content && /*#__PURE__*/jsx(FlexBox, {
+      orientation: Orientation.vertical,
+      fillSpace: true,
+      ...contentProps,
+      className: classnames(contentProps?.className, element$B('content')),
+      children: content
+    }), actions && /*#__PURE__*/jsx(FlexBox, {
+      ...actionsProps,
+      className: classnames(actionsProps?.className, element$B('actions')),
+      children: actions
+    })]
+  });
+};
+
 const Figure = noop$1.bind({});
 const isFigure = isComponentType(Figure);
 const Content = noop$1.bind({});
@@ -7209,14 +7343,11 @@ const isActions = isComponentType(Actions);
  */
 const BaseGenericBlock = forwardRef((props, ref) => {
   const {
-    className,
     figure,
     figureProps,
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$T.gap,
-    orientation = DEFAULT_PROPS$T.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -7233,44 +7364,49 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       otherChildren: otherChildren.filter(child => !isEmpty(child))
     };
   }, [children]);
-  return /*#__PURE__*/jsxs(FlexBox, {
-    ref: ref,
-    className: classNames.join(className, block$M()),
-    gap: gap,
-    orientation: orientation,
+  const alignProps = {
+    vAlign: forwardedProps.vAlign,
+    hAlign: forwardedProps.hAlign
+  };
+  return GenericBlock$1({
     ...forwardedProps,
-    children: [(figure || sections.figureChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
-      ref: sections.figureChild?.ref,
-      vAlign: forwardedProps.vAlign,
-      hAlign: forwardedProps.hAlign,
-      ...figureProps,
-      ...sections.figureChildProps,
-      className: classNames.join(figureProps?.className, sections.figureChildProps?.className, element$B('figure')),
-      children: [figure, sections.figureChildProps?.children]
-    }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
-      ref: sections.contentChild?.ref,
-      orientation: Orientation$1.vertical,
-      fillSpace: true,
-      vAlign: forwardedProps.vAlign,
-      hAlign: forwardedProps.hAlign,
-      ...contentProps,
-      ...sections.contentChildProps,
-      className: classNames.join(contentProps?.className, sections.contentChildProps?.className, element$B('content')),
-      children: [sections.contentChildProps?.children, sections.otherChildren]
-    }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
+    ref,
+    FlexBox,
+    actionsProps: {
       ref: sections.actionsChild?.ref,
-      vAlign: forwardedProps.vAlign,
-      hAlign: forwardedProps.hAlign,
+      ...alignProps,
       ...actionsProps,
       ...sections.actionsChildProps,
-      className: classNames.join(actionsProps?.className, sections.actionsChildProps?.className, element$B('actions')),
+      className: classNames.join(actionsProps?.className, sections.actionsChildProps?.className)
+    },
+    actions: actions || sections.actionsChildProps?.children ? /*#__PURE__*/jsxs(Fragment, {
       children: [actions, sections.actionsChildProps?.children]
-    })]
+    }) : undefined,
+    contentProps: {
+      ref: sections.contentChild?.ref,
+      ...alignProps,
+      ...contentProps,
+      ...sections.contentChildProps,
+      className: classNames.join(contentProps?.className, sections.contentChildProps?.className)
+    },
+    content: sections.contentChildProps?.children || sections.otherChildren.length > 0 ? /*#__PURE__*/jsxs(Fragment, {
+      children: [sections.contentChildProps?.children, sections.otherChildren]
+    }) : undefined,
+    figureProps: {
+      ref: sections.figureChild?.ref,
+      ...alignProps,
+      ...figureProps,
+      ...sections.figureChildProps,
+      className: classNames.join(figureProps?.className, sections.figureChildProps?.className)
+    },
+    figure: figure || sections.figureChildProps?.children ? /*#__PURE__*/jsxs(Fragment, {
+      children: [figure, sections.figureChildProps?.children]
+    }) : undefined
   });
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$V;
 BaseGenericBlock.className = CLASSNAME$W;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$T;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$U;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -7280,7 +7416,7 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
 /**
  * Accepted gap sizes for the generic block.
  */
-const GenericBlockGapSize = pick(Size$1, ['tiny', 'regular', 'medium', 'big', 'huge']);
+const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -7318,7 +7454,7 @@ const CLASSNAME$V = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {};
+const DEFAULT_PROPS$T = {};
 
 /**
  * Get Heading component common props
@@ -7419,7 +7555,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {};
+const DEFAULT_PROPS$S = {};
 
 /**
  * Text component common props
@@ -7506,7 +7642,7 @@ const Text = forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$T;
 Text.className = CLASSNAME$U;
-Text.defaultProps = DEFAULT_PROPS$R;
+Text.defaultProps = DEFAULT_PROPS$S;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -7543,7 +7679,7 @@ const Heading = forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$U;
 Heading.className = CLASSNAME$V;
-Heading.defaultProps = DEFAULT_PROPS$S;
+Heading.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -7594,7 +7730,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$R = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -7612,9 +7748,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$Q.orientation,
+    orientation = DEFAULT_PROPS$R.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$Q.wrap,
+    wrap = DEFAULT_PROPS$R.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -7632,7 +7768,7 @@ const Grid = forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$S;
 Grid.className = CLASSNAME$T;
-Grid.defaultProps = DEFAULT_PROPS$Q;
+Grid.defaultProps = DEFAULT_PROPS$R;
 
 /**
  * Component display name.
@@ -7690,7 +7826,7 @@ const CLASSNAME$R = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7727,7 +7863,7 @@ const GridColumn$1 = props => {
 };
 GridColumn$1.displayName = COMPONENT_NAME$Q;
 GridColumn$1.className = CLASSNAME$R;
-GridColumn$1.defaultProps = DEFAULT_PROPS$P;
+GridColumn$1.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Defines the props of the component.
@@ -7738,7 +7874,7 @@ GridColumn$1.defaultProps = DEFAULT_PROPS$P;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7757,7 +7893,7 @@ const GridColumn = forwardRef((props, ref) => {
 });
 GridColumn.displayName = COMPONENT_NAME$Q;
 GridColumn.className = CLASSNAME$R;
-GridColumn.defaultProps = DEFAULT_PROPS$O;
+GridColumn.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Icon component.
@@ -7875,7 +8011,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -7891,9 +8027,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     actions,
-    align = DEFAULT_PROPS$N.align,
+    align = DEFAULT_PROPS$O.align,
     alt,
-    captionPosition = DEFAULT_PROPS$N.captionPosition,
+    captionPosition = DEFAULT_PROPS$O.captionPosition,
     captionStyle,
     className,
     description,
@@ -7947,7 +8083,7 @@ const ImageBlock = forwardRef((props, ref) => {
 });
 ImageBlock.displayName = COMPONENT_NAME$P;
 ImageBlock.className = CLASSNAME$Q;
-ImageBlock.defaultProps = DEFAULT_PROPS$N;
+ImageBlock.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
@@ -8707,7 +8843,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$N = {};
 
 /**
  * InlineList component.
@@ -8760,7 +8896,7 @@ const InlineList = forwardRef((props, ref) => {
 });
 InlineList.displayName = COMPONENT_NAME$N;
 InlineList.className = CLASSNAME$O;
-InlineList.defaultProps = DEFAULT_PROPS$M;
+InlineList.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * InputHelper component.
@@ -9058,7 +9194,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$M = {
   size: Size$1.regular,
   titleHeading: 'h2'
 };
@@ -9078,11 +9214,11 @@ const LinkPreview = forwardRef((props, ref) => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$L.size,
+    size = DEFAULT_PROPS$M.size,
     theme = defaultTheme,
     thumbnailProps,
     title,
-    titleHeading = DEFAULT_PROPS$L.titleHeading,
+    titleHeading = DEFAULT_PROPS$M.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -9150,7 +9286,90 @@ const LinkPreview = forwardRef((props, ref) => {
 });
 LinkPreview.displayName = COMPONENT_NAME$K;
 LinkPreview.className = CLASSNAME$L;
-LinkPreview.defaultProps = DEFAULT_PROPS$L;
+LinkPreview.defaultProps = DEFAULT_PROPS$M;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$J = 'ListItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$K = 'lumx-list-item';
+const {
+  block: block$D,
+  element: element$t
+} = bem(CLASSNAME$K);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$L = {
+  size: Size.regular
+};
+
+/**
+ * ListItem component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const ListItem$1 = props => {
+  const {
+    after,
+    before,
+    children,
+    className,
+    isHighlighted,
+    isSelected,
+    isDisabled,
+    'aria-disabled': ariaDisabled,
+    linkAs,
+    linkProps = {},
+    linkRef,
+    handleClick,
+    size = DEFAULT_PROPS$L.size,
+    ref,
+    ...forwardedProps
+  } = props;
+  const clickable = !!linkAs || linkProps?.href || handleClick;
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$D({
+      [`size-${size}`]: Boolean(size)
+    })),
+    children: RawClickable({
+      as: clickable ? linkAs || (linkProps.href ? 'a' : 'button') : 'div',
+      isDisabled,
+      'aria-disabled': ariaDisabled,
+      ...linkProps,
+      className: element$t(clickable ? 'link' : 'wrapper', {
+        'is-highlighted': isHighlighted,
+        'is-selected': isSelected,
+        'is-disabled': isDisabled || ariaDisabled === 'true'
+      }),
+      handleClick,
+      ref: linkRef,
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [before && /*#__PURE__*/jsx("div", {
+          className: element$t('before'),
+          children: before
+        }), /*#__PURE__*/jsx("div", {
+          className: element$t('content'),
+          children: children
+        }), after && /*#__PURE__*/jsx("div", {
+          className: element$t('after'),
+          children: after
+        })]
+      })
+    })
+  });
+};
+ListItem$1.displayName = COMPONENT_NAME$J;
+ListItem$1.className = CLASSNAME$K;
+ListItem$1.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * ListItemAction props.
@@ -9159,12 +9378,12 @@ LinkPreview.defaultProps = DEFAULT_PROPS$L;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'ListItemAction';
+const COMPONENT_NAME$I = 'ListItemAction';
 
 /**
  * Component classname (used by action area CSS pattern).
  */
-const CLASSNAME$K = 'lumx-action-area__action';
+const CLASSNAME$J = 'lumx-action-area__action';
 const DEFAULT_PROPS$K = {};
 
 /**
@@ -9227,43 +9446,14 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
     children
   });
 }), {
-  displayName: COMPONENT_NAME$J,
-  className: CLASSNAME$K,
+  displayName: COMPONENT_NAME$I,
+  className: CLASSNAME$J,
   defaultProps: DEFAULT_PROPS$K
 });
 
 /**
- * Component display name.
- */
-const COMPONENT_NAME$I = 'ListItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$J = 'lumx-list-item';
-const {
-  block: block$D,
-  element: element$t
-} = classNames.bem(CLASSNAME$J);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$J = {
-  size: Size$1.regular
-};
-
-/**
- * Check if the list item is clickable.
- * @return `true` if the list item is clickable; `false` otherwise.
+ * Defines the props of the component.
  */
-function isClickable({
-  linkAs,
-  linkProps,
-  onItemSelected
-}) {
-  return !!linkAs || !isEmpty(linkProps?.href) || !!onItemSelected;
-}
 
 /**
  * ListItem component.
@@ -9274,68 +9464,31 @@ function isClickable({
  */
 const _ListItem = forwardRef((props, ref) => {
   const {
-    isAnyDisabled,
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
   const {
-    after,
-    before,
-    children,
-    className,
-    isHighlighted,
-    isSelected,
-    linkAs,
-    linkProps = {},
-    linkRef,
     onItemSelected,
     onClick,
-    size = DEFAULT_PROPS$J.size,
+    linkRef,
     ...forwardedProps
   } = otherProps;
-  const clickable = isClickable({
-    linkAs,
-    linkProps,
-    onItemSelected: onItemSelected || onClick
-  });
-  return /*#__PURE__*/jsx("li", {
-    ref: ref,
+  const handleClick = event => {
+    onItemSelected?.(event);
+    onClick?.(event);
+  };
+  return ListItem$1({
     ...forwardedProps,
-    className: classNames.join(className, block$D({
-      [`size-${size}`]: Boolean(size)
-    })),
-    children: RawClickable({
-      as: clickable ? linkAs || (linkProps.href ? 'a' : 'button') : 'div',
-      ...disabledStateProps,
-      ...linkProps,
-      className: classNames.join(element$t(clickable ? 'link' : 'wrapper', {
-        'is-highlighted': isHighlighted,
-        'is-selected': isSelected,
-        'is-disabled': isAnyDisabled
-      })),
-      handleClick(event) {
-        onItemSelected?.(event);
-        onClick?.(event);
-      },
-      ref: linkRef,
-      children: /*#__PURE__*/jsxs(Fragment, {
-        children: [before && /*#__PURE__*/jsx("div", {
-          className: element$t('before'),
-          children: before
-        }), /*#__PURE__*/jsx("div", {
-          className: element$t('content'),
-          children: children
-        }), after && /*#__PURE__*/jsx("div", {
-          className: element$t('after'),
-          children: after
-        })]
-      })
-    })
+    isDisabled: disabledStateProps.disabled,
+    'aria-disabled': disabledStateProps['aria-disabled'],
+    ref,
+    linkRef,
+    handleClick: onItemSelected || props.onClick ? handleClick : undefined
   });
 });
-_ListItem.displayName = COMPONENT_NAME$I;
-_ListItem.className = CLASSNAME$J;
-_ListItem.defaultProps = DEFAULT_PROPS$J;
+_ListItem.displayName = COMPONENT_NAME$J;
+_ListItem.className = CLASSNAME$K;
+_ListItem.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * ListItem component with Action sub-component.
@@ -9355,28 +9508,56 @@ const COMPONENT_NAME$H = 'ListDivider';
  */
 const CLASSNAME$I = 'lumx-list-divider';
 
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$J = {};
+
 /**
  * ListDivider component.
  * Purely decorative, consider a `ListSection` with label for a better list structure.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const ListDivider = forwardRef((props, ref) => {
+const ListDivider$1 = props => {
   const {
     className,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     role: "none",
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$I)
+    className: classnames(className, CLASSNAME$I)
+  });
+};
+ListDivider$1.displayName = COMPONENT_NAME$H;
+ListDivider$1.className = CLASSNAME$I;
+ListDivider$1.defaultProps = DEFAULT_PROPS$J;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListDivider = forwardRef((props, ref) => {
+  return ListDivider$1({
+    ...props,
+    ref
   });
 });
 ListDivider.displayName = COMPONENT_NAME$H;
 ListDivider.className = CLASSNAME$I;
+ListDivider.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
@@ -15680,7 +15861,7 @@ const UploaderVariant = {
  */
 
 /**
- * Extend native HTML input props with specialized `onChange` providing the a `File` array.
+ * Native input file props (framework-agnostic subset).
  */
 
 /**
@@ -15699,17 +15880,83 @@ const CLASSNAME$1 = 'lumx-uploader';
 const {
   block: block$1,
   element: element$1
-} = classNames.bem(CLASSNAME$1);
+} = bem(CLASSNAME$1);
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS$1 = {
-  aspectRatio: AspectRatio$1.horizontal,
-  size: Size$1.xl,
+  aspectRatio: AspectRatio.horizontal,
+  size: Size.xl,
   variant: UploaderVariant.square
 };
 
+/**
+ * Uploader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Uploader$1 = props => {
+  const {
+    aspectRatio = DEFAULT_PROPS$1.aspectRatio,
+    className,
+    label,
+    icon,
+    size = DEFAULT_PROPS$1.size,
+    theme,
+    variant = DEFAULT_PROPS$1.variant,
+    isAnyDisabled,
+    fileInputProps,
+    inputId,
+    isDragHovering,
+    handleClick,
+    handleChange,
+    Component = 'label',
+    ref,
+    ...forwardedProps
+  } = props;
+  // Adjust to square aspect ratio when using circle variants.
+  const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
+  return /*#__PURE__*/jsxs(Component, {
+    ref: ref,
+    ...forwardedProps,
+    onClick: handleClick,
+    className: classnames(className, block$1({
+      [`aspect-ratio-${adjustedAspectRatio}`]: Boolean(adjustedAspectRatio),
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme),
+      [`variant-${variant}`]: Boolean(variant),
+      'is-drag-hovering': isDragHovering,
+      'is-disabled': isAnyDisabled
+    })),
+    children: [/*#__PURE__*/jsx("span", {
+      className: element$1('background')
+    }), /*#__PURE__*/jsxs("span", {
+      className: element$1('wrapper'),
+      children: [icon && Icon$1({
+        className: element$1('icon'),
+        icon,
+        size: Size.s
+      }), label && /*#__PURE__*/jsx("span", {
+        className: element$1('label'),
+        children: label
+      })]
+    }), fileInputProps && /*#__PURE__*/jsx("input", {
+      type: "file",
+      id: inputId,
+      className: classnames(element$1('input'), visuallyHidden()),
+      ...fileInputProps,
+      onChange: handleChange
+    })]
+  });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Uploader component.
  *
@@ -15725,19 +15972,11 @@ const Uploader = forwardRef((props, ref) => {
   } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    aspectRatio = DEFAULT_PROPS$1.aspectRatio,
-    className,
-    label,
-    icon,
-    size = DEFAULT_PROPS$1.size,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$1.variant,
     fileInputProps,
     onClick,
     ...forwardedProps
   } = otherProps;
-  // Adjust to square aspect ratio when using circle variants.
-  const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio$1.square : aspectRatio;
   const handleClick = React__default.useCallback(evt => {
     if (isAnyDisabled) {
       evt.preventDefault();
@@ -15765,46 +16004,28 @@ const Uploader = forwardRef((props, ref) => {
     return evt => {
       const fileList = evt.target.files;
       const files = fileList ? Array.from(fileList) : [];
-      fileInputProps.onChange(files, evt);
+      fileInputProps.onChange?.(files, evt);
     };
   }, [isAnyDisabled, fileInputProps]);
-  return /*#__PURE__*/jsxs(wrapper.Component, {
-    ref: ref,
-    ...wrapper.props,
-    ...forwardedProps,
-    onClick: handleClick,
-    className: classNames.join(className, block$1({
-      [`aspect-ratio-${adjustedAspectRatio}`]: Boolean(adjustedAspectRatio),
-      [`size-${size}`]: Boolean(size),
-      [`theme-${theme}`]: Boolean(theme),
-      [`variant-${variant}`]: Boolean(variant),
-      'is-drag-hovering': isDragHovering,
-      'is-disabled': isAnyDisabled
-    })),
-    children: [/*#__PURE__*/jsx("span", {
-      className: element$1('background')
-    }), /*#__PURE__*/jsxs("span", {
-      className: element$1('wrapper'),
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: element$1('icon'),
-        icon: icon,
-        size: Size$1.s
-      }), label && /*#__PURE__*/jsx("span", {
-        className: element$1('label'),
-        children: label
-      })]
-    }), fileInputProps && /*#__PURE__*/jsx("input", {
-      type: "file",
-      id: inputId,
-      className: classNames.join(element$1('input'), classNames.visuallyHidden()),
-      ...disabledStateProps,
+  return Uploader$1({
+    Component: wrapper.Component,
+    ref,
+    inputId,
+    handleClick,
+    handleChange: onChange,
+    isAnyDisabled,
+    isDragHovering,
+    theme,
+    fileInputProps: {
       ...fileInputProps,
+      ...disabledStateProps,
       readOnly: isAnyDisabled,
-      onChange: onChange,
       onDragEnter: setDragHovering,
       onDragLeave: unsetDragHovering,
       onDrop: unsetDragHovering
-    })]
+    },
+    ...wrapper.props,
+    ...forwardedProps
   });
 });
 Uploader.displayName = COMPONENT_NAME$1;
@@ -15950,5 +16171,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1f as CLASSNAME, COMPONENT_NAME$1f as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$18 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, 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, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1f as CLASSNAME, COMPONENT_NAME$1f as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1a as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, 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, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map