@lumx/react 3.10.0 → 3.10.1-alpha.1

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

@@ -1,12 +1,13 @@
-import React, { forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
+import React, { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -47,9 +48,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<RadioButtonProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<RadioButtonProps> = {};
 
 /**
  * RadioButton component.
@@ -58,7 +57,8 @@ const DEFAULT_PROPS: Partial<RadioButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
         className,
@@ -71,7 +71,7 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
         label,
         name,
         onChange,
-        theme,
+        theme = defaultTheme,
         value,
         inputProps,
         ...forwardedProps

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

@@ -1,9 +1,10 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -30,7 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (

package/src/components/select/Select.test.tsx

@@ -5,7 +5,7 @@ import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, within } from '@testing-library/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
 import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 
@@ -19,13 +19,13 @@ jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: Partial<SelectProps> = {}) => {
+const setup = (propsOverride: Partial<SelectProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: SelectProps = {
         children: <span>Select Component</span>,
         value: '',
         ...propsOverride,
     };
-    render(<Select {...props} />);
+    render(<Select {...props} />, { wrapper });
     const select = getByClassName(document.body, CLASSNAME);
     const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
     const helpers = queryAllByClassName(select, `${CLASSNAME}__helper`);
@@ -190,5 +190,11 @@ describe(`<${Select.displayName}>`, () => {
         forwardClassName: 'select',
         forwardAttributes: 'inputWrapper',
         forwardRef: 'select',
+        applyTheme: {
+            affects: [{ element: 'select' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/select/Select.tsx

@@ -1,20 +1,19 @@
-import React, { forwardRef, RefObject } from 'react';
+import React, { RefObject } from 'react';
 
 import classNames from 'classnames';
 import lodashIsEmpty from 'lodash/isEmpty';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-
 import { Emphasis, Size, Theme } from '@lumx/react/components';
 import { IconButton } from '@lumx/react/components/button/IconButton';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
-
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
 
@@ -42,29 +41,32 @@ const stopPropagation = (evt: Event) => evt.stopPropagation();
 /**
  * Select component.
  */
-const SelectField: React.FC<SelectProps> = ({
-    anchorRef,
-    clearButtonProps,
-    handleKeyboardNav,
-    hasError,
-    hasInputClear,
-    icon,
-    id,
-    isDisabled,
-    isEmpty,
-    isRequired,
-    isValid,
-    label,
-    onClear,
-    onInputClick,
-    placeholder,
-    selectedValueRender,
-    theme,
-    value,
-    variant,
-    selectElementRef,
-    ...forwardedProps
-}) => {
+const SelectField: React.FC<SelectProps> = (props) => {
+    const defaultTheme = useTheme();
+    const {
+        anchorRef,
+        clearButtonProps,
+        handleKeyboardNav,
+        hasError,
+        hasInputClear,
+        icon,
+        id,
+        isDisabled,
+        isEmpty,
+        isRequired,
+        isValid,
+        label,
+        onClear,
+        onInputClick,
+        placeholder,
+        selectedValueRender,
+        theme = defaultTheme,
+        value,
+        variant,
+        selectElementRef,
+        ...forwardedProps
+    } = props;
+
     return (
         <>
             {variant === SelectVariant.input && (
@@ -167,7 +169,7 @@ const SelectField: React.FC<SelectProps> = ({
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Select: Comp<SelectProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {
     const isEmpty = lodashIsEmpty(props.value);
     const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
 

package/src/components/select/SelectMultiple.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, within } from '@testing-library/react';
 import {
     getAllByClassName,
@@ -23,13 +23,13 @@ jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<SelectMultipleProps> = {}) => {
+const setup = (props: Partial<SelectMultipleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const setupProps: SelectMultipleProps = {
         children: <span>Select Component</span>,
         value: [],
         ...props,
     };
-    render(<SelectMultiple {...setupProps} />);
+    render(<SelectMultiple {...setupProps} />, { wrapper });
     const select = getByClassName(document.body, CLASSNAME);
     const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
     const helpers = queryAllByClassName(select, `${CLASSNAME}__helper`);
@@ -205,5 +205,11 @@ describe('<SelectMultiple>', () => {
         forwardClassName: 'select',
         forwardAttributes: 'inputWrapper',
         forwardRef: 'select',
+        applyTheme: {
+            affects: [{ element: 'select' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/select/SelectMultiple.tsx

@@ -1,17 +1,16 @@
-import React, { forwardRef, ReactNode, RefObject, SyntheticEvent } from 'react';
+import React, { ReactNode, RefObject, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-
 import { Size, Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
-
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -57,118 +56,123 @@ const DEFAULT_PROPS: Partial<SelectMultipleProps> = {
     selectedValueRender: (choice) => choice,
 };
 
-export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
-    anchorRef,
-    handleKeyboardNav,
-    hasError,
-    icon,
-    id,
-    isDisabled,
-    isEmpty,
-    isRequired,
-    isValid,
-    label,
-    onClear,
-    onInputClick,
-    placeholder,
-    selectedChipRender,
-    selectedValueRender,
-    theme,
-    value,
-    variant,
-    selectElementRef,
-    ...forwardedProps
-}) => (
-    <>
-        {variant === SelectVariant.input && (
-            <>
-                {label && (
-                    <div className={`${CLASSNAME}__header`}>
-                        <InputLabel
-                            htmlFor={id}
-                            className={`${CLASSNAME}__label`}
-                            isRequired={isRequired}
-                            theme={theme}
-                        >
-                            {label}
-                        </InputLabel>
-                    </div>
-                )}
-
-                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                <div
-                    ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}
-                    id={id}
-                    className={`${CLASSNAME}__wrapper`}
-                    onClick={onInputClick}
-                    onKeyDown={handleKeyboardNav}
-                    tabIndex={isDisabled ? undefined : 0}
-                    aria-disabled={isDisabled || undefined}
-                    {...forwardedProps}
-                >
-                    {icon && (
-                        <Icon
-                            className={`${CLASSNAME}__input-icon`}
-                            color={theme === Theme.dark ? 'light' : undefined}
-                            icon={icon}
-                            size={Size.xs}
-                        />
-                    )}
-
-                    <div className={`${CLASSNAME}__chips`}>
-                        {!isEmpty &&
-                            value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}
-                    </div>
-
-                    {isEmpty && placeholder && (
-                        <div
-                            className={classNames([
-                                `${CLASSNAME}__input-native`,
-                                `${CLASSNAME}__input-native--placeholder`,
-                            ])}
-                        >
-                            <span>{placeholder}</span>
+export const SelectMultipleField: React.FC<SelectMultipleProps> = (props) => {
+    const defaultTheme = useTheme();
+    const {
+        anchorRef,
+        handleKeyboardNav,
+        hasError,
+        icon,
+        id,
+        isDisabled,
+        isEmpty,
+        isRequired,
+        isValid,
+        label,
+        onClear,
+        onInputClick,
+        placeholder,
+        selectedChipRender,
+        selectedValueRender,
+        theme = defaultTheme,
+        value,
+        variant,
+        selectElementRef,
+        ...forwardedProps
+    } = props;
+
+    return (
+        <>
+            {variant === SelectVariant.input && (
+                <>
+                    {label && (
+                        <div className={`${CLASSNAME}__header`}>
+                            <InputLabel
+                                htmlFor={id}
+                                className={`${CLASSNAME}__label`}
+                                isRequired={isRequired}
+                                theme={theme}
+                            >
+                                {label}
+                            </InputLabel>
                         </div>
                     )}
 
-                    {(isValid || hasError) && (
-                        <div className={`${CLASSNAME}__input-validity`}>
-                            <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />
+                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+                    <div
+                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}
+                        id={id}
+                        className={`${CLASSNAME}__wrapper`}
+                        onClick={onInputClick}
+                        onKeyDown={handleKeyboardNav}
+                        tabIndex={isDisabled ? undefined : 0}
+                        aria-disabled={isDisabled || undefined}
+                        {...forwardedProps}
+                    >
+                        {icon && (
+                            <Icon
+                                className={`${CLASSNAME}__input-icon`}
+                                color={theme === Theme.dark ? 'light' : undefined}
+                                icon={icon}
+                                size={Size.xs}
+                            />
+                        )}
+
+                        <div className={`${CLASSNAME}__chips`}>
+                            {!isEmpty &&
+                                value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}
                         </div>
-                    )}
 
-                    <div className={`${CLASSNAME}__input-indicator`}>
-                        <Icon icon={mdiMenuDown} size={Size.s} />
+                        {isEmpty && placeholder && (
+                            <div
+                                className={classNames([
+                                    `${CLASSNAME}__input-native`,
+                                    `${CLASSNAME}__input-native--placeholder`,
+                                ])}
+                            >
+                                <span>{placeholder}</span>
+                            </div>
+                        )}
+
+                        {(isValid || hasError) && (
+                            <div className={`${CLASSNAME}__input-validity`}>
+                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />
+                            </div>
+                        )}
+
+                        <div className={`${CLASSNAME}__input-indicator`}>
+                            <Icon icon={mdiMenuDown} size={Size.s} />
+                        </div>
                     </div>
-                </div>
-            </>
-        )}
+                </>
+            )}
 
-        {variant === SelectVariant.chip && (
-            <Chip
-                id={id}
-                isSelected={!isEmpty}
-                isDisabled={isDisabled}
-                after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}
-                onAfterClick={isEmpty ? onInputClick : onClear}
-                onClick={onInputClick}
-                ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}
-                theme={theme}
-                {...forwardedProps}
-            >
-                {isEmpty && <span>{label}</span>}
+            {variant === SelectVariant.chip && (
+                <Chip
+                    id={id}
+                    isSelected={!isEmpty}
+                    isDisabled={isDisabled}
+                    after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}
+                    onAfterClick={isEmpty ? onInputClick : onClear}
+                    onClick={onInputClick}
+                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}
+                    theme={theme}
+                    {...forwardedProps}
+                >
+                    {isEmpty && <span>{label}</span>}
 
-                {!isEmpty && (
-                    <span>
-                        <span>{selectedValueRender?.(value[0])}</span>
+                    {!isEmpty && (
+                        <span>
+                            <span>{selectedValueRender?.(value[0])}</span>
 
-                        {value.length > 1 && <span>&nbsp;+{value.length - 1}</span>}
-                    </span>
-                )}
-            </Chip>
-        )}
-    </>
-);
+                            {value.length > 1 && <span>&nbsp;+{value.length - 1}</span>}
+                        </span>
+                    )}
+                </Chip>
+            )}
+        </>
+    );
+};
 
 /**
  * SelectMultiple component.
@@ -177,7 +181,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SelectMultiple: Comp<SelectMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SelectMultiple = forwardRef<SelectMultipleProps, HTMLDivElement>((props, ref) => {
     return WithSelectContext(
         SelectMultipleField,
         {

package/src/components/select/WithSelectContext.tsx

@@ -11,6 +11,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { CoreSelectProps, SelectVariant } from './constants';
 
 /** The display name of the component. */
@@ -21,13 +22,16 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /** The default value of props. */
 export const DEFAULT_PROPS: Partial<CoreSelectProps> = {
-    theme: Theme.light,
     variant: SelectVariant.input,
 };
 
 export const WithSelectContext = (
     SelectElement: React.FC<any>,
-    {
+    props: CoreSelectProps,
+    ref: Ref<HTMLDivElement>,
+): React.ReactElement => {
+    const defaultTheme = useTheme() || Theme.light;
+    const {
         children,
         className,
         focusElement,
@@ -49,13 +53,11 @@ export const WithSelectContext = (
         onInfiniteScroll,
         onInputClick,
         placeholder,
-        theme = DEFAULT_PROPS.theme,
+        theme = defaultTheme,
         value,
         variant = DEFAULT_PROPS.variant,
         ...forwardedProps
-    }: CoreSelectProps,
-    ref: Ref<HTMLDivElement>,
-): React.ReactElement => {
+    } = props;
     const generatedSelectId = useId();
     const selectId = id || generatedSelectId;
     const anchorRef = useRef<HTMLElement>(null);

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

@@ -1,11 +1,12 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, isComponent } 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';
 
 /**
  * Defines the props of the component.
@@ -32,8 +33,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SideNavigation: Comp<SideNavigationProps, HTMLUListElement> = forwardRef((props, ref) => {
-    const { children, className, theme, ...forwardedProps } = props;
+export const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>((props, ref) => {
+    const defaultTheme = useTheme();
+    const { children, className, theme = defaultTheme, ...forwardedProps } = props;
     const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
 
     return (

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

@@ -1,17 +1,16 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
-
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
-
-import { Comp, GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 import { renderButtonOrLink } from '@lumx/react/utils/renderButtonOrLink';
 import { useId } from '@lumx/react/hooks/useId';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -67,7 +66,7 @@ const DEFAULT_PROPS: Partial<SideNavigationItemProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElement>((props, ref) => {
     const {
         children,
         className,

package/src/components/skeleton/SkeletonCircle.test.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { SkeletonCircle, SkeletonCircleProps } from './SkeletonCircle';
 
 const CLASSNAME = SkeletonCircle.className as string;
 
-const setup = (props: Partial<SkeletonCircleProps> = {}) => {
-    render(<SkeletonCircle {...(props as any)} />);
+const setup = (props: Partial<SkeletonCircleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<SkeletonCircle {...(props as any)} />, { wrapper });
     const skeletonCircle = queryByClassName(document.body, CLASSNAME);
     return { props, skeletonCircle };
 };
@@ -19,5 +19,11 @@ describe(`<${SkeletonCircle.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'skeletonCircle',
         forwardAttributes: 'skeletonCircle',
+        applyTheme: {
+            affects: [{ element: 'skeletonCircle' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/skeleton/SkeletonCircle.tsx

@@ -1,9 +1,12 @@
+import React from 'react';
+
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+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';
 
 /**
  * Defines the props of the component.
@@ -15,9 +18,7 @@ export interface SkeletonCircleProps extends GenericProps, HasTheme {
     color?: ColorPalette;
 }
 
-const DEFAULT_PROPS: Partial<SkeletonCircleProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<SkeletonCircleProps> = {};
 
 /**
  * Component display name.
@@ -36,8 +37,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, size, color, theme, ...forwardedProps } = props;
+export const SkeletonCircle = forwardRef<SkeletonCircleProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <div