@lumx/react 3.10.1-alpha.7 → 3.10.1-alpha.8

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

@@ -4,15 +4,18 @@ import classNames from 'classnames';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import isFunction from 'lodash/isFunction';
+
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { type GenericProps, type HasTheme, type ComponentClassName, isComponentType } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
+import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { EXPANSION_PANEL_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { isEmpty } from '@lumx/react/utils/collection/isEmpty';
 
 /**
  * Defines the props of the component.
@@ -35,6 +38,8 @@ export interface ExpansionPanelProps extends GenericProps, HasTheme {
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** On toggle open or close callback. */
     onToggleOpen?(shouldOpen: boolean, event: React.MouseEvent): void;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -45,16 +50,16 @@ const COMPONENT_NAME = 'ExpansionPanel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-expansion-panel';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {};
 
-const isDragHandle = isComponentType(DragHandle);
-const isHeader = isComponentType('header');
-const isFooter = isComponentType('footer');
+const isDragHandle = isComponent(DragHandle);
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
 
 /**
  * ExpansionPanel component.
@@ -87,23 +92,24 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
 
     // Either take the header in children or create one with the label.
     const headerProps: PropsWithChildren<any> = React.isValidElement(header) ? header.props : {};
-    const headerContent =
-        React.Children.count(headerProps.children) > 0 ? (
-            headerProps.children
-        ) : (
-            <span className={`${CLASSNAME}__label`}>{label}</span>
-        );
+    const headerContent = !isEmpty(headerProps.children) ? (
+        headerProps.children
+    ) : (
+        <span className={`${CLASSNAME}__label`}>{label}</span>
+    );
 
     const toggleOpen = (event: React.MouseEvent) => {
         const shouldOpen = !isOpen;
 
-        if (shouldOpen) {
-            onOpen?.(event);
+        if (isFunction(onOpen) && shouldOpen) {
+            onOpen(event);
+        }
+        if (isFunction(onClose) && !shouldOpen) {
+            onClose(event);
         }
-        if (!shouldOpen) {
-            onClose?.(event);
+        if (isFunction(onToggleOpen)) {
+            onToggleOpen(shouldOpen, event);
         }
-        onToggleOpen?.(shouldOpen, event);
     };
 
     const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
@@ -130,7 +136,7 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
     // Switch max height on/off to activate the CSS transition (updates when children changes).
     const [maxHeight, setMaxHeight] = useState('0');
     useEffect(() => {
-        const height = isOpen ? wrapperRef.current?.offsetHeight ?? 0 : 0;
+        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
         setMaxHeight(`${height}px`);
     }, [children, isOpen]);
 

package/src/components/flag/Flag.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -20,7 +20,7 @@ export interface FlagProps extends GenericProps, HasTheme {
 }
 
 const COMPONENT_NAME = 'Flag';
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-flag';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<FlagProps> = {};
 
 /**

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

@@ -1,11 +1,11 @@
 import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
+import castArray from 'lodash/castArray';
 
 import { Alignment, Orientation } from '@lumx/react';
-import { castArray } from '@lumx/react/utils/collection/castArray';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
@@ -49,7 +49,7 @@ const COMPONENT_NAME = 'FlexBox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-flex-box';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * FlexBox component.

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

@@ -1,9 +1,12 @@
 import React, { Children, ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
 
-import { type ComponentClassName, type Comp, isComponentType } from '@lumx/react/utils/type';
-import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
+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';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -61,7 +64,7 @@ const COMPONENT_NAME = 'GenericBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-generic-block';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -98,13 +101,13 @@ interface GenericBlock extends BaseGenericBlock {
     Actions: Comp<GenericBlockSectionProps>;
 }
 
-const Figure = (() => {}) as unknown as Comp<FlexBoxProps>;
+const Figure = noop.bind({}) as Comp<FlexBoxProps>;
 const isFigure = isComponentType(Figure);
 
-const Content = (() => {}) as unknown as Comp<FlexBoxProps>;
+const Content = noop.bind({}) as Comp<FlexBoxProps>;
 const isContent = isComponentType(Content);
 
-const Actions = (() => {}) as unknown as Comp<FlexBoxProps>;
+const Actions = noop.bind({}) as Comp<FlexBoxProps>;
 const isActions = isComponentType(Actions);
 
 /**
@@ -145,8 +148,7 @@ const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
             contentChildProps: (contentChild as ReactElement)?.props,
             actionsChild,
             actionsChildProps: (actionsChild as ReactElement)?.props,
-            // TODO: check this is working
-            otherChildren: otherChildren.filter((child) => React.Children.count(child) > 0),
+            otherChildren: otherChildren.filter((child) => !isEmpty(child)),
         };
     }, [children]);
 

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

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

package/src/components/grid/Grid.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } from '@lumx/react';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
@@ -23,6 +23,8 @@ export interface GridProps extends GenericProps {
     hAlign?: Alignment;
     /** Gutter size. */
     gutter?: GridGutterSize;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -33,7 +35,7 @@ const COMPONENT_NAME = 'Grid';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-grid';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/grid/GridItem.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Alignment } from '@lumx/react';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
@@ -19,6 +19,8 @@ export interface GridItemProps extends GenericProps {
     order?: Columns;
     /** Width. */
     width?: Columns;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -29,7 +31,7 @@ const COMPONENT_NAME = 'GridItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-grid-item';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * GridItem component.

package/src/components/grid-column/GridColumn.tsx

@@ -1,9 +1,11 @@
 import React, { ReactElement, ReactNode } from 'react';
 
+import isInteger from 'lodash/isInteger';
 import classNames from 'classnames';
 
 import { Size } from '@lumx/react';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -32,7 +34,7 @@ const COMPONENT_NAME = 'GridColumn';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-grid-column';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -67,7 +69,7 @@ export const GridColumn = forwardRef<GridColumnProps>((props, ref): ReactElement
             className={classNames(className, CLASSNAME)}
             style={{
                 ...style,
-                ['--lumx-grid-column-item-min-width' as any]: Number.isInteger(itemMinWidth) && `${itemMinWidth}px`,
+                ['--lumx-grid-column-item-min-width' as any]: isInteger(itemMinWidth) && `${itemMinWidth}px`,
                 ['--lumx-grid-column-columns' as any]: maxColumns,
                 ['--lumx-grid-column-gap' as any]: gap && `var(--lumx-spacing-unit-${gap})`,
             }}

package/src/components/heading/Heading.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import type { HeadingElement, ComponentClassName } from '@lumx/react/utils/type';
+import { HeadingElement } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Text, TextProps } from '../text';
@@ -17,6 +18,10 @@ export interface HeadingProps extends Partial<TextProps> {
      * Display a specific heading level instead of the one provided by parent context provider.
      */
     as?: HeadingElement;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
 }
 
 /**
@@ -27,7 +32,7 @@ const COMPONENT_NAME = 'Heading';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-heading';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/icon/Icon.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiAlertCircle } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -40,7 +40,7 @@ const COMPONENT_NAME = 'Icon';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-icon';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/image-block/ImageBlock.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
 
-import type { GenericProps, HasTheme, ValueOf, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -56,7 +56,7 @@ const COMPONENT_NAME = 'ImageBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-image-block';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/image-lightbox/ImageLightbox.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Lightbox } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ImageSlideshow } from './internal/ImageSlideshow';

package/src/components/image-lightbox/constants.ts

@@ -1,4 +1,4 @@
-import type { ComponentClassName } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 
 /**
  * Component display name.
@@ -8,4 +8,4 @@ export const COMPONENT_NAME = 'ImageLightbox';
 /**
  * Component default class name and class prefix.
  */
-export const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-image-lightbox';
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);

package/src/components/image-lightbox/internal/ImageSlide.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SlideshowItem, Thumbnail } from '@lumx/react';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useSizeOnWindowResize } from '@lumx/react/hooks/useSizeOnWindowResize';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
 import { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { mdiMagnifyMinusOutline, mdiMagnifyPlusOutline } from '@lumx/icons';
 import { FlexBox, IconButton, Slides, SlideshowControls } from '@lumx/react';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { memoize } from '@lumx/react/utils/function/memoize';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 
+import memoize from 'lodash/memoize';
 import { ImageCaption } from '../../image-block/ImageCaption';
 import { CLASSNAME } from '../constants';
 import type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';
@@ -113,9 +113,13 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
 
     const getImgRef = React.useMemo(
         () =>
-            memoize((index: number, isActive: boolean) => {
-                return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
-            }),
+            memoize(
+                (index: number, isActive: boolean) => {
+                    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
+                },
+                // memoize based on both arguments
+                (...args) => args.join(),
+            ),
         [images, activeImageRef],
     );
 

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
+import memoize from 'lodash/memoize';
+
 import { startViewTransition } from '@lumx/react/utils/browser/DOM/startViewTransition';
 import { findImage } from '@lumx/react/utils/browser/DOM/findImage';
-import { memoize } from '@lumx/react/utils/function/memoize';
 
 import type { ImageLightboxProps } from './types';
 import { CLASSNAME } from './constants';

package/src/components/inline-list/InlineList.tsx

@@ -3,8 +3,8 @@ import React, { Children, isValidElement } from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
-import { getFontColorClassName, getTypographyClassName } from '@lumx/react/utils/className';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -27,6 +27,10 @@ export interface InlineListProps extends GenericProps {
      * Activate line wrap on overflow.
      */
     wrap?: boolean;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
 }
 
 /**
@@ -37,7 +41,7 @@ const COMPONENT_NAME = 'InlineList';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-inline-list';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/input-helper/InputHelper.tsx

@@ -3,8 +3,8 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Kind, Theme } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -28,7 +28,7 @@ const COMPONENT_NAME = 'InputHelper';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-input-helper';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/input-label/InputLabel.tsx

@@ -3,8 +3,8 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -28,7 +28,7 @@ const COMPONENT_NAME = 'InputLabel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-input-label';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/lightbox/Lightbox.tsx

@@ -6,13 +6,13 @@ import { createPortal } from 'react-dom';
 import { mdiClose } from '@lumx/icons';
 import { IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
@@ -37,6 +37,8 @@ export interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttribut
     zIndex?: number;
     /** On close callback. */
     onClose?(): void;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -47,7 +49,7 @@ const COMPONENT_NAME = 'Lightbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-lightbox';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Lightbox component.

package/src/components/link/Link.tsx

@@ -1,11 +1,13 @@
 import React, { RefObject, useMemo } from 'react';
 
+import isEmpty from 'lodash/isEmpty';
+
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/renderLink';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { renderLink } from '@lumx/react/utils/react/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
@@ -32,6 +34,8 @@ export interface LinkProps extends GenericProps {
     target?: HTMLAnchorProps['target'];
     /** Typography variant. */
     typography?: Typography;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -42,7 +46,7 @@ const COMPONENT_NAME = 'Link';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-link';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 const getIconSize = (typography?: Typography) => {
     switch (typography) {
@@ -100,7 +104,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
     const renderedChildren = useMemo(
         () => (
             <>
-                {leftIcon && (
+                {leftIcon && !isEmpty(leftIcon) && (
                     <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />
                 )}
 
@@ -114,7 +118,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
                     </span>
                 )}
 
-                {rightIcon && (
+                {rightIcon && !isEmpty(rightIcon) && (
                     <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />
                 )}
             </>
@@ -126,7 +130,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
      * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
      * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
      */
-    if ((!linkAs && href) || isDisabled) {
+    if ((!linkAs && isEmpty(href)) || isDisabled) {
         return (
             <button
                 type="button"

package/src/components/link-preview/LinkPreview.tsx

@@ -14,8 +14,8 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import type { GenericProps, HeadingElement, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -49,7 +49,7 @@ const COMPONENT_NAME = 'LinkPreview';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-link-preview';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.