@lumx/react 3.10.0 → 3.10.1-alpha.0

package/src/components/progress/ProgressLinear.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
-import { Theme } from '@lumx/react';
 
 import { ProgressLinear, ProgressLinearProps } from './ProgressLinear';
 
@@ -12,26 +11,22 @@ const CLASSNAME = ProgressLinear.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<ProgressLinearProps> = {}) => {
-    const { container } = render(<ProgressLinear {...(props as any)} />);
+const setup = (props: Partial<ProgressLinearProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const { container } = render(<ProgressLinear {...(props as any)} />, { wrapper });
     const element = getByClassName(container, CLASSNAME);
     return { container, element, props };
 };
 
 describe(`<${ProgressLinear.displayName}>`, () => {
-    it('should render default', () => {
-        const { element } = setup();
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
-
-    it('should render dark theme', () => {
-        const { element } = setup({ theme: Theme.dark });
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        expect(element).toHaveClass(`${CLASSNAME}--theme-dark`);
-    });
-
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
 });

package/src/components/progress/ProgressLinear.tsx

@@ -6,6 +6,7 @@ import { Theme } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 export interface ProgressLinearProps extends GenericProps, HasTheme {}
 
@@ -22,9 +23,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<ProgressLinearProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<ProgressLinearProps> = {};
 
 /**
  * ProgressLinear component.
@@ -34,7 +33,8 @@ const DEFAULT_PROPS: Partial<ProgressLinearProps> = {
  * @return React element.
  */
 export const ProgressLinear: Comp<ProgressLinearProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <div

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -14,9 +14,9 @@ type SetupProps = Partial<RadioButtonProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}) => {
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: any = { id: 'fixedId', ...propsOverride };
-    render(<RadioButton {...props} />);
+    render(<RadioButton {...props} />, { wrapper });
 
     const radioButton = getByClassName(document.body, CLASSNAME);
     const helper = queryByClassName(radioButton, `${CLASSNAME}__helper`);
@@ -105,5 +105,11 @@ describe(`<${RadioButton.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'radioButton',
         forwardAttributes: 'radioButton',
+        applyTheme: {
+            affects: [{ element: 'radioButton' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

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

@@ -7,6 +7,7 @@ import { InputHelper, InputLabel, Theme } from '@lumx/react';
 import { Comp, 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';
 
 /**
  * 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.
@@ -59,6 +58,7 @@ const DEFAULT_PROPS: Partial<RadioButtonProps> = {
  * @return React element.
  */
 export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((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/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

@@ -15,6 +15,7 @@ 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 { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
 
@@ -42,29 +43,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 && (

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

@@ -12,6 +12,7 @@ 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 { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -57,118 +58,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.

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

@@ -6,6 +6,7 @@ import { SideNavigationItem, Theme } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -33,7 +34,8 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const SideNavigation: Comp<SideNavigationProps, HTMLUListElement> = forwardRef((props, ref) => {
-    const { children, className, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme();
+    const { children, className, theme = defaultTheme, ...forwardedProps } = props;
     const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
 
     return (

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

@@ -4,6 +4,7 @@ import React, { forwardRef } from 'react';
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -15,9 +16,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.
@@ -37,7 +36,8 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, size, color, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <div