@lumx/react 2.2.20 → 2.2.22

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

@@ -1,29 +1,46 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
-import { Comp, getRootClassName } from '@lumx/react/utils';
+import { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';
 import { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';
 
 export interface GenericBlockProps extends FlexBoxProps {
-    /** Component to use as visual element. */
+    /**
+     * Component to use as visual element.
+     */
     figure?: ReactNode;
-    /** Actions to set after the main content. */
+    /**
+     * Actions to set after the main content.
+     */
     actions?: ReactNode;
-    /** Main content to display */
+    /**
+     * Main content to display or sections components
+     * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})
+     */
     children: ReactNode;
-    /** Orientation of the 3 sections */
+    /**
+     * Orientation of the 3 sections
+     */
     orientation?: FlexBoxProps['orientation'];
-    /** Horizontal alignment. */
+    /**
+     * Horizontal alignment.
+     */
     hAlign?: FlexBoxProps['hAlign'];
-    /** Vertical alignment. */
+    /**
+     * Vertical alignment.
+     */
     vAlign?: FlexBoxProps['vAlign'];
     /**
      * The props to forward to the content.
      * By default, the content will have the same alignment as wrapper.
      */
     contentProps?: Omit<FlexBoxProps, 'children'>;
-    /** props to forward to the actions element. */
+    /**
+     * props to forward to the actions element.
+     */
     actionsProps?: Omit<FlexBoxProps, 'children'>;
-    /** props to forward to the figure element. */
+    /**
+     * props to forward to the figure element.
+     */
     figureProps?: Omit<FlexBoxProps, 'children'>;
 }
 
@@ -47,6 +64,35 @@ const DEFAULT_PROPS: Partial<GenericBlockProps> = {
     vAlign: Alignment.center,
 };
 
+type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
+
+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>;
+    /**
+     * 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>;
+    /**
+     * 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>;
+}
+
+const Figure = (() => null) as any;
+const isFigure = isComponentType(Figure);
+
+const Content = (() => null) as any;
+const isContent = isComponentType(Content);
+
+const Actions = (() => null) as any;
+const isActions = isComponentType(Actions);
+
 /**
  * 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.
@@ -58,7 +104,7 @@ const DEFAULT_PROPS: Partial<GenericBlockProps> = {
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
-export const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
     const {
         className,
         figure,
@@ -72,6 +118,23 @@ export const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef(
         ...forwardedProps
     } = props;
 
+    const sections = React.useMemo(() => {
+        // Split children by section type
+        const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(
+            Children.toArray(children),
+            [isFigure, isContent, isActions],
+        );
+        return {
+            figureChild,
+            figureChildProps: (figureChild as ReactElement)?.props || {},
+            contentChild,
+            contentChildProps: (contentChild as ReactElement)?.props || {},
+            actionsChild,
+            actionsChildProps: (actionsChild as ReactElement)?.props || {},
+            otherChildren,
+        };
+    }, [children]);
+
     let actionsVAlign: HorizontalAlignment = Alignment.center;
     if (orientation === Orientation.horizontal) {
         actionsVAlign = Alignment.right;
@@ -89,32 +152,58 @@ export const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef(
             orientation={orientation}
             {...forwardedProps}
         >
-            <FlexBox {...figureProps} className={classNames(figureProps?.className, `${CLASSNAME}__figure`)}>
+            <FlexBox
+                ref={(sections.figureChild as any)?.ref}
+                {...figureProps}
+                {...sections.figureChildProps}
+                className={classNames(
+                    figureProps?.className,
+                    sections.figureChildProps?.className,
+                    `${CLASSNAME}__figure`,
+                )}
+            >
                 {figure}
+                {sections.figureChildProps?.children}
             </FlexBox>
 
             {children && (
                 <FlexBox
+                    ref={(sections.contentChild as any)?.ref}
                     orientation={Orientation.vertical}
                     fillSpace
                     vAlign={contentVAlign}
                     {...contentProps}
-                    className={classNames(contentProps?.className, `${CLASSNAME}__content`)}
+                    {...sections.contentChildProps}
+                    className={classNames(
+                        contentProps?.className,
+                        sections.contentChildProps?.className,
+                        `${CLASSNAME}__content`,
+                    )}
                 >
-                    {children}
+                    {sections.contentChildProps?.children}
+                    {sections.otherChildren}
                 </FlexBox>
             )}
 
             <FlexBox
+                ref={(sections.actionsChild as any)?.ref}
                 vAlign={actionsVAlign}
                 {...actionsProps}
-                className={classNames(actionsProps?.className, `${CLASSNAME}__actions`)}
+                {...sections.actionsChildProps}
+                className={classNames(
+                    actionsProps?.className,
+                    sections.actionsChildProps?.className,
+                    `${CLASSNAME}__actions`,
+                )}
             >
                 {actions}
+                {sections.actionsChildProps?.children}
             </FlexBox>
         </FlexBox>
     );
 });
-GenericBlock.displayName = COMPONENT_NAME;
-GenericBlock.className = CLASSNAME;
-GenericBlock.defaultProps = DEFAULT_PROPS;
+BaseGenericBlock.displayName = COMPONENT_NAME;
+BaseGenericBlock.className = CLASSNAME;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS;
+
+export const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });

package/src/components/icon/Icon.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import { mdiAlertCircle } from '@lumx/icons';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
@@ -11,7 +11,7 @@ export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'x
 /**
  * Defines the props of the component.
  */
-export interface IconProps extends GenericProps {
+export interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
     color?: Color;
     /** Lightened or darkened variant of the selected icon color. */
@@ -25,8 +25,6 @@ export interface IconProps extends GenericProps {
     icon: string;
     /** Size variant. */
     size?: IconSizes;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
     alt?: string;
 }

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

@@ -6,7 +6,7 @@ import isObject from 'lodash/isObject';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
 
 /**
@@ -26,7 +26,7 @@ export type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
-export interface ImageBlockProps extends GenericProps {
+export interface ImageBlockProps extends GenericProps, HasTheme {
     /** Action toolbar content. */
     actions?: ReactNode;
     /** Alignment. */
@@ -47,8 +47,6 @@ export interface ImageBlockProps extends GenericProps {
     size?: ImageBlockSize;
     /** Tag content. */
     tags?: ReactNode;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
     thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
     /** Image title to display in the caption. */

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

@@ -1,5 +1,5 @@
 import { Kind, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 
@@ -8,13 +8,11 @@ import { INPUT_HELPER_CONFIGURATION } from './constants';
 /**
  * Defines the props of the component.
  */
-export interface InputHelperProps extends GenericProps {
+export interface InputHelperProps extends GenericProps, HasTheme {
     /** Helper content. */
     children: string | ReactNode;
     /** Helper variant. */
     kind?: Kind;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
 }
 
 /**

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

@@ -1,20 +1,18 @@
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 
 /**
  * Defines the props of the component.
  */
-export interface InputLabelProps extends GenericProps {
+export interface InputLabelProps extends GenericProps, HasTheme {
     /** Label content. */
     children: string | ReactNode;
     /** Native htmlFor property. */
     htmlFor: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
 }
 
 /**

package/src/components/lightbox/Lightbox.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 
 import { mdiClose } from '@lumx/icons';
-import { ColorPalette, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
+import { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';
 import { DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
@@ -20,7 +20,7 @@ const LIGHTBOX_TRANSITION_DURATION = 400;
 /**
  * Defines the props of the component.
  */
-export interface LightboxProps extends GenericProps {
+export interface LightboxProps extends GenericProps, HasTheme {
     /** Props to pass to the close button (minus those already set by the Lightbox props). */
     closeButtonProps?: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
@@ -30,8 +30,6 @@ export interface LightboxProps extends GenericProps {
     parentElement: RefObject<any>;
     /** Whether to keep the dialog open on clickaway or escape press. */
     preventAutoClose?: boolean;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Z-axis position. */
     zIndex?: number;
     /** On close callback. */
@@ -143,7 +141,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
                     onClick={onClose}
                 />
             )}
-            <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>
+            <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
                 <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
                     {children}
                 </div>

package/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`<Lightbox> Snapshots and structure should render story 'Default' 1`] =
     />
     <ClickAwayProvider
       callback={[Function]}
-      refs={
+      childrenRefs={
         Object {
           "current": Array [
             Object {

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

@@ -14,12 +14,12 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface LinkPreviewProps extends GenericProps {
+export interface LinkPreviewProps extends GenericProps, HasTheme {
     /** Description. */
     description?: string;
     /** Link URL. */
@@ -30,8 +30,6 @@ export interface LinkPreviewProps extends GenericProps {
     linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
     /** Size variant. */
     size?: Extract<Size, 'regular' | 'big'>;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Thumbnail for the link preview. */
     thumbnailProps?: ThumbnailProps;
     /** Title. */

package/src/components/mosaic/Mosaic.tsx

@@ -1,16 +1,14 @@
 import React, { forwardRef, MouseEventHandler, useMemo } from 'react';
 
 import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import classNames from 'classnames';
 import take from 'lodash/take';
 
 /**
  * Defines the props of the component.
  */
-export interface MosaicProps extends GenericProps {
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
+export interface MosaicProps extends GenericProps, HasTheme {
     /** Thumbnails. */
     thumbnails: ThumbnailProps[];
     /** On image click callback. */

package/src/components/notification/Notification.tsx

@@ -9,22 +9,20 @@ import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
 
 import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
 
 /**
  * Defines the props of the component.
  */
-export interface NotificationProps extends GenericProps {
+export interface NotificationProps extends GenericProps, HasTheme {
     /** Action button label. */
     actionLabel?: string;
     /** Content. */
     content?: React.ReactNode;
     /** Whether the component is open or not. */
     isOpen?: boolean;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Notification type. */
     type?: Kind;
     /** Z-axis position. */

package/src/components/popover/Popover.tsx

@@ -342,7 +342,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
                   style={popoverStyle}
                   {...attributes.popper}
               >
-                  <ClickAwayProvider callback={closeOnClickAway && handleClose} refs={clickAwayRefs}>
+                  <ClickAwayProvider callback={closeOnClickAway && handleClose} childrenRefs={clickAwayRefs}>
                       {hasArrow && <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow} />}
                       {children}
                   </ClickAwayProvider>

package/src/components/popover/__snapshots__/Popover.test.tsx.snap

@@ -17,7 +17,7 @@ Array [
       }
     >
       <ClickAwayProvider
-        refs={
+        childrenRefs={
           Object {
             "current": Array [
               Object {
@@ -49,7 +49,7 @@ Array [
       }
     >
       <ClickAwayProvider
-        refs={
+        childrenRefs={
           Object {
             "current": Array [
               Object {
@@ -85,7 +85,7 @@ exports[`<Popover> Snapshots and structure should render story 'Auto' 1`] = `
     }
   >
     <ClickAwayProvider
-      refs={
+      childrenRefs={
         Object {
           "current": Array [
             Object {
@@ -120,7 +120,7 @@ exports[`<Popover> Snapshots and structure should render story 'Default' 1`] = `
     }
   >
     <ClickAwayProvider
-      refs={
+      childrenRefs={
         Object {
           "current": Array [
             Object {
@@ -155,7 +155,7 @@ exports[`<Popover> Snapshots and structure should render story 'MatchingWidth' 1
     }
   >
     <ClickAwayProvider
-      refs={
+      childrenRefs={
         Object {
           "current": Array [
             Object {
@@ -190,7 +190,7 @@ exports[`<Popover> Snapshots and structure should render story 'Offset' 1`] = `
     }
   >
     <ClickAwayProvider
-      refs={
+      childrenRefs={
         Object {
           "current": Array [
             Object {
@@ -226,7 +226,7 @@ Array [
       }
     >
       <ClickAwayProvider
-        refs={
+        childrenRefs={
           Object {
             "current": Array [
               Object {
@@ -258,7 +258,7 @@ Array [
       }
     >
       <ClickAwayProvider
-        refs={
+        childrenRefs={
           Object {
             "current": Array [
               Object {
@@ -290,7 +290,7 @@ Array [
       }
     >
       <ClickAwayProvider
-        refs={
+        childrenRefs={
           Object {
             "current": Array [
               Object {
@@ -322,7 +322,7 @@ Array [
       }
     >
       <ClickAwayProvider
-        refs={
+        childrenRefs={
           Object {
             "current": Array [
               Object {

package/src/components/post-block/PostBlock.tsx

@@ -6,12 +6,12 @@ import isObject from 'lodash/isObject';
 
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface PostBlockProps extends GenericProps {
+export interface PostBlockProps extends GenericProps, HasTheme {
     /** Action toolbar content. */
     actions?: ReactNode;
     /** Attachment content. */
@@ -26,8 +26,6 @@ export interface PostBlockProps extends GenericProps {
     tags?: ReactNode;
     /** Content (string, or sanitized html). */
     text?: string | { __html: string };
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Thumbnail. */
     thumbnailProps?: ThumbnailProps;
     /** Title. */

package/src/components/progress/Progress.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
 
 /**
  * Progress variants.
@@ -15,9 +15,7 @@ export type ProgressVariant = ValueOf<typeof ProgressVariant>;
 /**
  * Defines the props of the component.
  */
-export interface ProgressProps extends GenericProps {
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
+export interface ProgressProps extends GenericProps, HasTheme {
     /** Progress variant. */
     variant?: ProgressVariant;
 }

package/src/components/radio-button/RadioButton.tsx

@@ -5,12 +5,12 @@ import { uid } from 'uid';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface RadioButtonProps extends GenericProps {
+export interface RadioButtonProps extends GenericProps, HasTheme {
     /** Helper text. */
     helper?: string;
     /** Native input id property. */
@@ -25,8 +25,6 @@ export interface RadioButtonProps extends GenericProps {
     label?: ReactNode;
     /** Native input name property. */
     name?: string;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Native input value property. */
     value?: string;
     /** On change callback. */

package/src/components/select/constants.ts

@@ -1,6 +1,5 @@
 import { IconButtonProps } from '@lumx/react';
-import { Theme } from '@lumx/react/components';
-import { GenericProps, ValueOf } from '@lumx/react/utils';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils';
 import { ReactNode, SyntheticEvent } from 'react';
 
 /**
@@ -9,7 +8,7 @@ import { ReactNode, SyntheticEvent } from 'react';
 export const SelectVariant = { input: 'input', chip: 'chip' } as const;
 export type SelectVariant = ValueOf<typeof SelectVariant>;
 
-export interface CoreSelectProps extends GenericProps {
+export interface CoreSelectProps extends GenericProps, HasTheme {
     /** Props to pass to the clear button (minus those already set by the Select props). If not specified, the button won't be displayed. */
     clearButtonProps?: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
@@ -35,8 +34,6 @@ export interface CoreSelectProps extends GenericProps {
     label?: string;
     /** Placeholder input text. */
     placeholder?: string;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Select variant. */
     variant?: SelectVariant;
     /** On clear callback. */

package/src/components/side-navigation/SideNavigation.tsx

@@ -4,16 +4,14 @@ import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, isComponent } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface SideNavigationProps extends GenericProps {
+export interface SideNavigationProps extends GenericProps, HasTheme {
     /** SideNavigationItem elements. */
     children: ReactNode;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
 }
 
 /**

package/src/components/skeleton/SkeletonCircle.tsx

@@ -2,16 +2,14 @@ import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface SkeletonCircleProps extends GenericProps {
+export interface SkeletonCircleProps extends GenericProps, HasTheme {
     /** Size variant. */
     size: GlobalSize;
-    /** Theme. */
-    theme?: Theme;
     /** The color of the skeleton. */
     color?: ColorPalette;
 }