@lumx/react 4.8.0-alpha.0 → 4.8.0-next.1

package/index.js

@@ -2,7 +2,7 @@ import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasi
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, useContext, useReducer } from 'react';
 import { mdiAlert } from '@lumx/icons/esm/alert.js';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
@@ -110,7 +110,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1e = {
+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$1e.kind,
-    size = DEFAULT_PROPS$1e.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$1e;
+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$1d = {
+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$1d.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1e.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$1d.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1d.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1d.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$1d.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$1d;
+Autocomplete.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
@@ -441,7 +441,7 @@ const CLASSNAME$1j = 'lumx-autocomplete-multiple';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1c = {
+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$1c.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1c.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$1c.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$1d.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$1c.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$1c;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1d;
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -851,11 +851,19 @@ const Size = {
   xs: 'xs',
   s: 's',
   m: 'm',
+  l: 'l',
   xl: 'xl',
   xxl: 'xxl',
-  regular: 'regular'};
+  tiny: 'tiny',
+  regular: 'regular',
+  medium: 'medium',
+  big: 'big',
+  huge: 'huge'
+};
 const Orientation = {
-  horizontal: 'horizontal'};
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
 const Emphasis = {
   low: 'low',
   high: 'high'
@@ -910,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).
  */
@@ -932,7 +952,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1b = {
+const DEFAULT_PROPS$1c = {
   size: Size.m
 };
 
@@ -949,7 +969,7 @@ const Avatar$1 = props => {
     badge,
     className,
     image,
-    size = DEFAULT_PROPS$1b.size,
+    size = DEFAULT_PROPS$1c.size,
     theme,
     ref,
     ...forwardedProps
@@ -990,7 +1010,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$1b.size,
+    size = DEFAULT_PROPS$1c.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -1020,7 +1040,7 @@ const Avatar = forwardRef((props, ref) => {
 });
 Avatar.displayName = COMPONENT_NAME$1j;
 Avatar.className = CLASSNAME$1i;
-Avatar.defaultProps = DEFAULT_PROPS$1b;
+Avatar.defaultProps = DEFAULT_PROPS$1c;
 
 /**
  * Component display name.
@@ -1038,7 +1058,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1a = {
+const DEFAULT_PROPS$1b = {
   color: ColorPalette.primary
 };
 
@@ -1052,7 +1072,7 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$1a.color,
+    color = DEFAULT_PROPS$1b.color,
     ref,
     ...forwardedProps
   } = props;
@@ -1067,7 +1087,7 @@ const Badge$1 = props => {
 };
 Badge$1.displayName = COMPONENT_NAME$1i;
 Badge$1.className = CLASSNAME$1h;
-Badge$1.defaultProps = DEFAULT_PROPS$1a;
+Badge$1.defaultProps = DEFAULT_PROPS$1b;
 
 /**
  * Defines the props of the component.
@@ -1293,7 +1313,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$19 = {
+const DEFAULT_PROPS$1a = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1307,10 +1327,10 @@ const DEFAULT_PROPS$19 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$19.emphasis,
+    emphasis = DEFAULT_PROPS$1a.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$19.size,
+    size = DEFAULT_PROPS$1a.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1327,7 +1347,7 @@ const Button$1 = props => {
 };
 Button$1.displayName = COMPONENT_NAME$1f;
 Button$1.className = CLASSNAME$1f;
-Button$1.defaultProps = DEFAULT_PROPS$19;
+Button$1.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1402,7 +1422,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = COMPONENT_NAME$1f;
 Button.className = CLASSNAME$1f;
-Button.defaultProps = DEFAULT_PROPS$19;
+Button.defaultProps = DEFAULT_PROPS$1a;
 
 const COMPONENT_NAME$1e = 'Icon';
 const IconClassName = 'lumx-icon';
@@ -1419,7 +1439,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {};
+const DEFAULT_PROPS$19 = {};
 
 /**
  * Icon component.
@@ -1499,7 +1519,7 @@ const Icon$1 = props => {
 };
 Icon$1.displayName = COMPONENT_NAME$1e;
 Icon$1.className = CLASSNAME$1e;
-Icon$1.defaultProps = DEFAULT_PROPS$18;
+Icon$1.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
@@ -1514,7 +1534,7 @@ const CLASSNAME$1d = 'lumx-icon-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$18 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1527,11 +1547,11 @@ const DEFAULT_PROPS$17 = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$17.emphasis,
+    emphasis = DEFAULT_PROPS$18.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$17.size,
+    size = DEFAULT_PROPS$18.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1552,7 +1572,7 @@ const IconButton$1 = props => {
 };
 IconButton$1.displayName = COMPONENT_NAME$1d;
 IconButton$1.className = CLASSNAME$1d;
-IconButton$1.defaultProps = DEFAULT_PROPS$17;
+IconButton$1.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * IconButton component.
@@ -1596,7 +1616,7 @@ const IconButton = forwardRef((props, ref) => {
 });
 IconButton.displayName = COMPONENT_NAME$1d;
 IconButton.className = CLASSNAME$1d;
-IconButton.defaultProps = DEFAULT_PROPS$17;
+IconButton.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Component display name.
@@ -1611,7 +1631,7 @@ const CLASSNAME$1c = 'lumx-button-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {};
+const DEFAULT_PROPS$17 = {};
 
 /**
  * ButtonGroup component.
@@ -1633,7 +1653,7 @@ const ButtonGroup$1 = props => {
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1c;
 ButtonGroup$1.className = CLASSNAME$1c;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$16;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * ButtonGroup component.
@@ -1650,7 +1670,7 @@ const ButtonGroup = forwardRef((props, ref) => {
 });
 ButtonGroup.displayName = COMPONENT_NAME$1c;
 ButtonGroup.className = CLASSNAME$1c;
-ButtonGroup.defaultProps = DEFAULT_PROPS$16;
+ButtonGroup.defaultProps = DEFAULT_PROPS$17;
 
 const COMPONENT_NAME$1b = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
@@ -1658,7 +1678,7 @@ const CLASSNAME$1b = InputLabelClassName;
 const {
   block: block$$
 } = bem(CLASSNAME$1b);
-const DEFAULT_PROPS$15 = {};
+const DEFAULT_PROPS$16 = {};
 
 /**
  * InputLabel component.
@@ -1688,7 +1708,7 @@ function InputLabel$1(props) {
 }
 InputLabel$1.displayName = COMPONENT_NAME$1b;
 InputLabel$1.className = CLASSNAME$1b;
-InputLabel$1.defaultProps = DEFAULT_PROPS$15;
+InputLabel$1.defaultProps = DEFAULT_PROPS$16;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1717,7 +1737,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {
+const DEFAULT_PROPS$15 = {
   kind: Kind.info
 };
 
@@ -1728,7 +1748,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$14.kind,
+    kind = DEFAULT_PROPS$15.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1748,7 +1768,7 @@ function InputHelper$1(props) {
 }
 InputHelper$1.displayName = COMPONENT_NAME$1a;
 InputHelper$1.className = CLASSNAME$1a;
-InputHelper$1.defaultProps = DEFAULT_PROPS$14;
+InputHelper$1.defaultProps = DEFAULT_PROPS$15;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1863,7 +1883,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {};
+const DEFAULT_PROPS$14 = {};
 
 /**
  * Checkbox component.
@@ -1925,7 +1945,7 @@ const Checkbox = forwardRef((props, ref) => {
 });
 Checkbox.displayName = COMPONENT_NAME$19;
 Checkbox.className = CLASSNAME$19;
-Checkbox.defaultProps = DEFAULT_PROPS$13;
+Checkbox.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1960,7 +1980,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$13 = {
   size: Size.m
 };
 
@@ -1987,7 +2007,7 @@ const Chip$1 = props => {
     hasAfterClick,
     hasBeforeClick,
     hasOnClick,
-    size = DEFAULT_PROPS$12.size,
+    size = DEFAULT_PROPS$13.size,
     theme,
     ref,
     href,
@@ -2109,7 +2129,7 @@ const Chip = forwardRef((props, ref) => {
 });
 Chip.displayName = COMPONENT_NAME$18;
 Chip.className = CLASSNAME$18;
-Chip.defaultProps = DEFAULT_PROPS$12;
+Chip.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
@@ -2124,7 +2144,7 @@ const CLASSNAME$17 = 'lumx-chip-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {};
+const DEFAULT_PROPS$12 = {};
 
 /**
  * ChipGroup component.
@@ -2222,7 +2242,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
 });
 InternalChipGroup.displayName = COMPONENT_NAME$17;
 InternalChipGroup.className = CLASSNAME$17;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$11;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$12;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2434,7 +2454,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$11 = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2464,7 +2484,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$10.variant,
+    variant = DEFAULT_PROPS$11.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -2533,7 +2553,7 @@ const CommentBlock = forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$16;
 CommentBlock.className = CLASSNAME$15;
-CommentBlock.defaultProps = DEFAULT_PROPS$10;
+CommentBlock.defaultProps = DEFAULT_PROPS$11;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -3623,7 +3643,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$10 = {
   closeMode: 'unmount',
   size: Size$1.big,
   disableBodyScroll: true
@@ -3644,7 +3664,7 @@ const Dialog = forwardRef((props, ref) => {
   const {
     children,
     className,
-    closeMode = DEFAULT_PROPS$$.closeMode,
+    closeMode = DEFAULT_PROPS$10.closeMode,
     header,
     focusElement,
     forceFooterDivider,
@@ -3656,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
@@ -3801,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.
@@ -3845,7 +3865,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {};
+const DEFAULT_PROPS$$ = {};
 
 /**
  * Divider component.
@@ -3868,7 +3888,7 @@ const Divider = forwardRef((props, ref) => {
 });
 Divider.displayName = COMPONENT_NAME$11;
 Divider.className = CLASSNAME$12;
-Divider.defaultProps = DEFAULT_PROPS$_;
+Divider.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Component display name.
@@ -3881,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;
 
@@ -7213,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$U = {
-  gap: Size$1.big,
-  orientation: Orientation$1.horizontal
+  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({});
@@ -7242,14 +7343,11 @@ const isActions = isComponentType(Actions);
  */
 const BaseGenericBlock = forwardRef((props, ref) => {
   const {
-    className,
     figure,
     figureProps,
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$U.gap,
-    orientation = DEFAULT_PROPS$U.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -7266,39 +7364,44 @@ 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;
@@ -7313,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;
@@ -8735,7 +8838,7 @@ const CLASSNAME$O = 'lumx-inline-list';
 const {
   block: block$H,
   element: element$x
-} = classNames.bem(CLASSNAME$O);
+} = bem(CLASSNAME$O);
 
 /**
  * Component default props.
@@ -8746,17 +8849,17 @@ const DEFAULT_PROPS$N = {};
  * InlineList component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const InlineList = forwardRef((props, ref) => {
+const InlineList$1 = props => {
   const {
     className,
     color,
     colorVariant,
-    typography,
-    children,
+    typography: typography$1,
+    items = [],
     wrap,
+    ref,
     ...forwardedProps
   } = props;
   return (
@@ -8765,31 +8868,53 @@ const InlineList = forwardRef((props, ref) => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classNames.join(className, block$H({
+      className: classnames(className, block$H({
         wrap: Boolean(wrap)
-      }), color && classNames.font(color, colorVariant), typography && classNames.typography(typography))
+      }), color && font(color, colorVariant), typography$1 && typography(typography$1))
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list",
-      children: Children.toArray(children).map((child, index) => {
-        const key = /*#__PURE__*/isValidElement(child) && child.key || index;
-        return (
-          /*#__PURE__*/
-          // We need to item is set as display: contents which removes the semantic.
-          // eslint-disable-next-line jsx-a11y/no-redundant-roles
-          jsxs("li", {
-            role: "listitem",
-            className: element$x('item'),
-            children: [index !== 0 && /*#__PURE__*/jsx("span", {
-              className: element$x('item-separator'),
-              "aria-hidden": "true",
-              children: '\u00A0•\u00A0'
-            }), child]
-          }, key)
-        );
-      })
+      children: items.map((item, index) =>
+      /*#__PURE__*/
+      // We need to item is set as display: contents which removes the semantic.
+      // eslint-disable-next-line jsx-a11y/no-redundant-roles
+      jsxs("li", {
+        role: "listitem",
+        className: element$x('item'),
+        children: [index !== 0 && /*#__PURE__*/jsx("span", {
+          className: element$x('item-separator'),
+          "aria-hidden": "true",
+          children: '\u00A0•\u00A0'
+        }), item]
+      }, index))
     })
   );
+};
+InlineList$1.displayName = COMPONENT_NAME$N;
+InlineList$1.className = CLASSNAME$O;
+InlineList$1.defaultProps = DEFAULT_PROPS$N;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InlineList = forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return InlineList$1({
+    ...rest,
+    ref,
+    items: Children.toArray(children)
+  });
 });
 InlineList.displayName = COMPONENT_NAME$N;
 InlineList.className = CLASSNAME$O;
@@ -16068,5 +16193,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$19 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 };
+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