@lumx/react 3.0.2 → 3.0.3-alpha.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.2",
-        "@lumx/icons": "^3.0.2",
+        "@lumx/core": "^3.0.3-alpha.1",
+        "@lumx/icons": "^3.0.3-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -66,6 +66,7 @@
         "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.3.0",
+        "rollup-plugin-dts": "^4.2.2",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-ts-paths-resolve": "^1.3.0",
         "rollup-plugin-typescript-paths": "^1.2.2",
@@ -97,8 +98,8 @@
         "React"
     ],
     "license": "MIT",
-    "module": "esm/index.js",
-    "main": "esm/index.js",
+    "module": "index.js",
+    "main": "index.js",
     "types": "types.d.ts",
     "name": "@lumx/react",
     "publishConfig": {
@@ -119,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.2",
-    "gitHead": "f66d1996ea46e90a4dc135ee8f47ef012b95171c"
+    "version": "3.0.3-alpha.1",
+    "gitHead": "8bbdcaeec0b5b6556fdac9bdf81a56ef47c77bcc"
 }

package/src/components/alert-dialog/AlertDialog.tsx

@@ -17,7 +17,8 @@ import {
 
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons/';
 import { uid } from 'uid';
-import { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */

package/src/components/autocomplete/Autocomplete.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { Dropdown, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
-
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -1,7 +1,8 @@
 import { mdiClose } from '@lumx/icons';
 import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
 
-import { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';

package/src/components/avatar/Avatar.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Avatar sizes.

package/src/components/badge/Badge.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme } from '@lumx/react';
 import { Badge, BadgeProps } from './Badge';

package/src/components/badge/Badge.tsx

@@ -1,5 +1,6 @@
 import { Color, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 

package/src/components/button/Button.test.tsx

@@ -5,7 +5,7 @@ import 'jest-enzyme';
 
 import { mdiCheck, mdiChevronDown, mdiPlus } from '@lumx/icons';
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { Button, ButtonProps } from './Button';
 
 const DEFAULT_PROPS = Button.defaultProps as any;

package/src/components/button/Button.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { Emphasis, Icon, Size, Theme } from '@lumx/react';
-import { Comp, getBasicClass, getRootClassName } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
+import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
 import { BaseButtonProps, ButtonRoot } from './ButtonRoot';
 
 /**

package/src/components/button/ButtonGroup.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component

package/src/components/button/ButtonRoot.test.tsx

@@ -12,7 +12,7 @@ import {
     ButtonRoot,
     ButtonRootProps,
 } from '@lumx/react/components/button/ButtonRoot';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 type SetupProps = Partial<ButtonRootProps>;
 

package/src/components/button/ButtonRoot.tsx

@@ -6,7 +6,8 @@ import classNames from 'classnames';
 
 import { Color, ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;

package/src/components/button/IconButton.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
-import { Comp, getRootClassName } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 
 export interface IconButtonProps extends BaseButtonProps {
     /**

package/src/components/checkbox/Checkbox.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Checkbox, CheckboxProps } from './Checkbox';
 

package/src/components/checkbox/Checkbox.tsx

@@ -6,7 +6,8 @@ import { uid } from 'uid';
 import { mdiCheck } from '@lumx/icons';
 
 import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/chip/Chip.test.tsx

@@ -4,7 +4,7 @@ import React, { ReactElement } from 'react';
 
 import { ColorPalette, Theme } from '@lumx/react';
 import { Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { Chip, ChipProps } from './Chip';
 
 const CLASSNAME = Chip.className as string;

package/src/components/chip/Chip.tsx

@@ -1,7 +1,9 @@
 import { Color, ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, onEnterPressed } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { onEnterPressed } from '@lumx/react/utils/event';
 
 import classNames from 'classnames';
 

package/src/components/chip/ChipGroup.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
 

package/src/components/comment-block/CommentBlock.tsx

@@ -3,7 +3,8 @@ import React, { Children, forwardRef, KeyboardEvent, KeyboardEventHandler, React
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import isFunction from 'lodash/isFunction';
 import { AvatarProps } from '../avatar/Avatar';

package/src/components/date-picker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import React, { forwardRef, useState } from 'react';
-import { Comp } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
 import { CLASSNAME, COMPONENT_NAME } from './constants';
 import { DatePickerControlled } from './DatePickerControlled';
 import { DatePickerProps } from './types';

package/src/components/date-picker/DatePickerControlled.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';
-import { Comp } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
 import { CLASSNAME } from './constants';
 
 /**

package/src/components/date-picker/DatePickerField.tsx

@@ -6,7 +6,7 @@ import moment from 'moment';
 import React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';
 
 import { useFocus } from '@lumx/react/hooks/useFocus';
-import { Comp, GenericProps } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
 
 /**
  * Defines the props of the component.

package/src/components/date-picker/constants.ts

@@ -1,4 +1,4 @@
-import { getRootClassName } from '@lumx/react/utils';
+import { getRootClassName } from '@lumx/react/utils/className';
 
 /**
  * Component display name.

package/src/components/date-picker/types.ts

@@ -1,5 +1,5 @@
 import { IconButtonProps } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils';
+import { GenericProps } from '@lumx/react/utils/type';
 import { Ref } from 'react';
 
 /**

package/src/components/dialog/Dialog.tsx

@@ -9,14 +9,10 @@ import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
-import {
-    Comp,
-    GenericProps,
-    getRootClassName,
-    handleBasicClasses,
-    isComponent,
-    partitionMulti,
-} from '@lumx/react/utils';
+
+import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 

package/src/components/divider/Divider.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme } from '@lumx/react';
 import { Divider, DividerProps } from './Divider';

package/src/components/divider/Divider.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.
@@ -23,7 +24,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-export const DEFAULT_PROPS: Partial<DividerProps> = {
+const DEFAULT_PROPS: Partial<DividerProps> = {
     theme: Theme.light,
 };
 

package/src/components/drag-handle/DragHandle.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/dropdown/Dropdown.tsx

@@ -5,7 +5,8 @@ import classNames from 'classnames';
 import { List, ListProps } from '@lumx/react/components/list/List';
 import { Offset, Placement, Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';
+import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme } from '@lumx/react';
 import { ExpansionPanel, ExpansionPanelProps } from './ExpansionPanel';

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -9,16 +9,9 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import {
-    Callback,
-    Comp,
-    GenericProps,
-    getRootClassName,
-    handleBasicClasses,
-    HasTheme,
-    isComponent,
-    partitionMulti,
-} from '@lumx/react/utils';
+import { Callback, Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 
 /**
  * Defines the props of the component.

package/src/components/flag/Flag.test.tsx

@@ -5,7 +5,7 @@ import React, { ReactElement } from 'react';
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
 import { itShouldRenderStories, commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Flag, FlagProps } from './Flag';
 import * as stories from './Flag.stories';

package/src/components/flag/Flag.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 export interface FlagProps extends GenericProps, HasTheme {
     /** Color of the component. */

package/src/components/flex-box/FlexBox.stories.tsx

@@ -235,3 +235,11 @@ export const Distribution = () => (
         <Button>Button 3</Button>
     </FlexBox>
 );
+
+export const CustomizeElement = () => (
+    <FlexBox as="header" orientation="horizontal" gap="regular">
+        <div>Element 1</div>
+        <div>Element 2</div>
+        <div>Element 2</div>
+    </FlexBox>
+);

package/src/components/flex-box/FlexBox.tsx

@@ -1,5 +1,6 @@
 import { Alignment, Orientation } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';
 import React, { forwardRef, ReactNode } from 'react';
@@ -15,6 +16,8 @@ export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
  * Defines the props of the component.
  */
 export interface FlexBoxProps extends GenericProps {
+    /** Customize the root element. */
+    as?: React.ElementType;
     /** Children elements. */
     children?: ReactNode;
     /** Whether the "content filling space" is enabled or not. */
@@ -54,6 +57,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {
     const {
+        as: Component = 'div',
         children,
         className,
         fillSpace,
@@ -68,7 +72,7 @@ export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, re
     } = props;
 
     return (
-        <div
+        <Component
             ref={ref}
             {...forwardedProps}
             className={classNames(
@@ -87,7 +91,7 @@ export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, re
             )}
         >
             {children}
-        </div>
+        </Component>
     );
 });
 FlexBox.displayName = COMPONENT_NAME;

package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -75,6 +75,22 @@ exports[`<FlexBox> Snapshots and structure should render story 'Distribution' 1`
 </div>
 `;
 
+exports[`<FlexBox> Snapshots and structure should render story 'CustomizeElement' 1`] = `
+<header
+  className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-regular"
+>
+  <div>
+    Element 1
+  </div>
+  <div>
+    Element 2
+  </div>
+  <div>
+    Element 2
+  </div>
+</header>
+`;
+
 exports[`<FlexBox> Snapshots and structure should render story 'Flex' 1`] = `
 Array [
   <div

package/src/components/generic-block/GenericBlock.stories.jsx

@@ -1,6 +1,7 @@
+import { IMAGES } from '@lumx/react/stories/knobs/image';
 import React from 'react';
 import { mdiPencil } from '@lumx/icons';
-import { GenericBlock, Button, Icon, Size } from '@lumx/react';
+import { GenericBlock, Button, Icon, Size, Thumbnail } from '@lumx/react';
 
 export default { title: 'LumX components/generic-block/GenericBlock' };
 
@@ -104,3 +105,24 @@ export const GapSizes = ({ theme }) =>
             </GenericBlock.Actions>
         </GenericBlock>
     ));
+
+export const AsAFigure = () => (
+    <GenericBlock as="figure" orientation="vertical" style={{ width: '150px' }}>
+        <GenericBlock.Figure>
+            <Thumbnail alt="" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
+        </GenericBlock.Figure>
+        <GenericBlock.Content as="figcaption">Rocky mountain landscape</GenericBlock.Content>
+    </GenericBlock>
+);
+
+export const AsAnArticle = () => (
+    <GenericBlock as="article" orientation="horizontal">
+        <GenericBlock.Figure>
+            <Thumbnail alt="" size="xl" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
+        </GenericBlock.Figure>
+        <GenericBlock.Content>
+            <h2>Article title</h2>
+            <p>Article description...</p>
+        </GenericBlock.Content>
+    </GenericBlock>
+);

package/src/components/generic-block/GenericBlock.tsx

@@ -2,8 +2,11 @@ import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
-import { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';
+import { Comp, isComponentType } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
+import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
 
 export interface GenericBlockProps extends FlexBoxProps {
     /**
@@ -44,6 +47,10 @@ export interface GenericBlockProps extends FlexBoxProps {
      * props to forward to the figure element.
      */
     figureProps?: Omit<FlexBoxProps, 'children'>;
+    /**
+     * Gap space between sections.
+     */
+    gap?: GenericBlockGapSize;
 }
 
 /**
@@ -66,22 +73,29 @@ const DEFAULT_PROPS: Partial<GenericBlockProps> = {
 
 type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
 
+interface GenericBlockSectionProps extends FlexBoxProps {
+    /**
+     * Gap space between items.
+     */
+    gap?: GenericBlockGapSize;
+}
+
 interface GenericBlock extends BaseGenericBlock {
     /**
      * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject
      * the "figure" section of the block (instead of using `figure` and `figureProps` props).
      */
-    Figure: Comp<FlexBoxProps>;
+    Figure: Comp<GenericBlockSectionProps>;
     /**
      * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject
      * the "content" section of the block (instead of using `content` and `contentProps` props).
      */
-    Content: Comp<FlexBoxProps>;
+    Content: Comp<GenericBlockSectionProps>;
     /**
      * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject
      * the "actions" section of the block (instead of using `actions` and `actionsProps` props).
      */
-    Actions: Comp<FlexBoxProps>;
+    Actions: Comp<GenericBlockSectionProps>;
 }
 
 const Figure = noop.bind({}) as Comp<FlexBoxProps>;

package/src/components/generic-block/constants.ts

@@ -0,0 +1,9 @@
+import pick from 'lodash/pick';
+import { Size } from '@lumx/react';
+import { ValueOf } from '@lumx/react/utils/type';
+
+/**
+ * Accepted gap sizes for the generic block.
+ */
+export const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
+export type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;

package/src/components/generic-block/index.ts

@@ -1 +1,2 @@
 export * from './GenericBlock';
+export { GenericBlockGapSize } from './constants';

package/src/components/grid/Grid.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
 

package/src/components/grid/GridItem.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Alignment } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 

package/src/components/heading/Heading.tsx

@@ -1,4 +1,5 @@
-import { Comp, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';
+import { Comp, HeadingElement } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 import { Text, TextProps } from '../text';

package/src/components/heading/HeadingLevelProvider.tsx

@@ -1,4 +1,4 @@
-import { HeadingElement } from '@lumx/react/utils';
+import { HeadingElement } from '@lumx/react/utils/type';
 import React, { ReactNode } from 'react';
 import { MAX_HEADING_LEVEL } from './constants';
 import { HeadingLevelContext } from './context';