@lumx/react 3.10.0 → 3.10.1-alpha.1

package/src/components/skeleton/SkeletonRectangle.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 { SkeletonRectangle, SkeletonRectangleProps } from './SkeletonRectangle';
 
 const CLASSNAME = SkeletonRectangle.className as string;
 
-const setup = (props: Partial<SkeletonRectangleProps> = {}) => {
-    render(<SkeletonRectangle {...(props as any)} />);
+const setup = (props: Partial<SkeletonRectangleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<SkeletonRectangle {...(props as any)} />, { wrapper });
     const skeletonRectangle = queryByClassName(document.body, CLASSNAME);
     return { props, skeletonRectangle };
 };
@@ -19,5 +19,11 @@ describe(`<${SkeletonRectangle.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'skeletonRectangle',
         forwardAttributes: 'skeletonRectangle',
+        applyTheme: {
+            affects: [{ element: 'skeletonRectangle' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -1,9 +1,12 @@
+import React from 'react';
+
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, ValueOf } 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';
 
 /**
  * Skeleton variants.
@@ -28,7 +31,6 @@ export interface SkeletonRectangleProps extends GenericProps, HasTheme {
 }
 
 const DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {
-    theme: Theme.light,
     variant: SkeletonRectangleVariant.squared,
 };
 
@@ -49,8 +51,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { aspectRatio, className, height, theme, variant, width, color, ...forwardedProps } = props;
+export const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { aspectRatio, className, height, theme = defaultTheme, variant, width, color, ...forwardedProps } = props;
 
     return (
         <div

package/src/components/skeleton/SkeletonTypography.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 { SkeletonTypography, SkeletonTypographyProps } from './SkeletonTypography';
 
 const CLASSNAME = SkeletonTypography.className as string;
 
-const setup = (props: Partial<SkeletonTypographyProps> = {}) => {
-    render(<SkeletonTypography {...(props as any)} />);
+const setup = (props: Partial<SkeletonTypographyProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<SkeletonTypography {...(props as any)} />, { wrapper });
     const skeletonTypography = queryByClassName(document.body, CLASSNAME);
     return { props, skeletonTypography };
 };
@@ -19,5 +19,11 @@ describe(`<${SkeletonTypography.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'skeletonTypography',
         forwardAttributes: 'skeletonTypography',
+        applyTheme: {
+            affects: [{ element: 'skeletonTypography' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/skeleton/SkeletonTypography.tsx

@@ -1,9 +1,12 @@
+import React, { CSSProperties } from 'react';
+
 import classNames from 'classnames';
-import React, { CSSProperties, forwardRef } from 'react';
 
 import { Theme, TypographyInterface, 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.
@@ -17,9 +20,7 @@ export interface SkeletonTypographyProps extends GenericProps, HasTheme {
     color?: ColorPalette;
 }
 
-const DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {};
 
 /**
  * Component display name.
@@ -38,8 +39,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, typography, width, color, ...forwardedProps } = props;
+export const SkeletonTypography = forwardRef<SkeletonTypographyProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;
 
     return (
         <div

package/src/components/slider/Slider.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 { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Slider, SliderProps } from './Slider';
@@ -9,8 +9,8 @@ const CLASSNAME = Slider.className as string;
 
 jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
-const setup = (props: Partial<SliderProps> = {}) => {
-    render(<Slider {...(props as any)} />);
+const setup = (props: Partial<SliderProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<Slider {...(props as any)} />, { wrapper });
     const slider = queryByClassName(document.body, CLASSNAME);
     return { props, slider };
 };
@@ -21,5 +21,11 @@ describe(`<${Slider.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'slider',
         forwardAttributes: 'slider',
+        applyTheme: {
+            affects: [{ element: 'slider' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/slider/Slider.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { forwardRef, SyntheticEvent, useMemo, useRef } from 'react';
+import React, { SyntheticEvent, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
-
 import useEventCallback from '@lumx/react/hooks/useEventCallback';
-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 { clamp } from '@lumx/react/utils/clamp';
 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.
@@ -58,7 +58,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<SliderProps> = {
     precision: 0,
     steps: 0,
-    theme: Theme.light,
 };
 
 /**
@@ -91,7 +90,8 @@ const computePercentFromValue = (value: number, min: number, max: number): numbe
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Slider: Comp<SliderProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         className,
         disabled,
@@ -107,7 +107,7 @@ export const Slider: Comp<SliderProps, HTMLDivElement> = forwardRef((props, ref)
         onMouseDown,
         precision,
         steps,
-        theme,
+        theme = defaultTheme,
         value,
         ...forwardedProps
     } = props;

package/src/components/slideshow/Slides.tsx

@@ -1,11 +1,14 @@
-import React, { Children, CSSProperties, forwardRef } from 'react';
-import chunk from 'lodash/chunk';
+import React, { Children, CSSProperties } from 'react';
 
+import chunk from 'lodash/chunk';
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-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';
+
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {
@@ -53,12 +56,13 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Slides = forwardRef<SlidesProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme();
     const {
         activeIndex,
         id,
         className,
-        theme,
+        theme = defaultTheme,
         fillHeight,
         groupBy,
         isAutoPlaying,

package/src/components/slideshow/Slideshow.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 { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Slideshow, SlideshowProps } from './Slideshow';
@@ -8,7 +8,7 @@ import { Slides } from './Slides';
 
 const CLASSNAME = Slides.className as string;
 
-const setup = (propsOverride: Partial<SlideshowProps> = {}) => {
+const setup = (propsOverride: Partial<SlideshowProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: SlideshowProps = {
         slideshowControlsProps: {
             nextButtonProps: { label: 'Next' },
@@ -16,7 +16,7 @@ const setup = (propsOverride: Partial<SlideshowProps> = {}) => {
         },
         ...propsOverride,
     };
-    render(<Slideshow {...props} />);
+    render(<Slideshow {...props} />, { wrapper });
     const slideShow = queryByClassName(document.body, CLASSNAME);
     return { props, slideShow };
 };
@@ -27,5 +27,11 @@ describe(`<${Slideshow.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'slideShow',
         forwardAttributes: 'slideShow',
+        applyTheme: {
+            affects: [{ element: 'slideShow' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/slideshow/Slideshow.tsx

@@ -1,10 +1,13 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';
 import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { buildSlideShowGroupId } from './SlideshowItemGroup';
 
 /**
@@ -41,7 +44,6 @@ export interface SlideshowProps
  */
 const DEFAULT_PROPS: Partial<SlideshowProps> = {
     ...DEFAULT_OPTIONS,
-    theme: Theme.light,
 };
 
 /**
@@ -51,7 +53,8 @@ const DEFAULT_PROPS: Partial<SlideshowProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Slideshow = forwardRef<SlideshowProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         activeIndex,
         autoPlay,
@@ -62,7 +65,7 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         interval,
         onChange,
         slideshowControlsProps,
-        theme,
+        theme = defaultTheme,
         id,
         slidesId,
         slideGroupLabel,

package/src/components/slideshow/SlideshowControls.tsx

@@ -1,16 +1,18 @@
-import React, { forwardRef, RefObject, useCallback, useMemo } from 'react';
+import React, { RefObject, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, 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 { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useSwipeNavigate } from './useSwipeNavigate';
 import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
 import { usePaginationVisibleRange } from './usePaginationVisibleRange';
@@ -70,7 +72,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
     activeIndex: 0,
-    theme: Theme.light,
 };
 
 /**
@@ -80,7 +81,8 @@ const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = forwardRef((props, ref) => {
+const InternalSlideshowControls = forwardRef<SlideshowControlsProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         activeIndex,
         className,
@@ -92,7 +94,7 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         previousButtonProps,
         paginationProps,
         slidesCount,
-        theme,
+        theme = defaultTheme,
         isAutoPlaying = false,
         playButtonProps,
         paginationItemLabel,

package/src/components/slideshow/SlideshowItem.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import React 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 SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SlideshowItem = forwardRef<SlideshowItemProps, HTMLDivElement>((props, ref) => {
     const { className, children, ...forwardedProps } = props;
     return (
         <div

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-
-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';
+
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 
 /**
@@ -35,7 +36,7 @@ export const buildSlideShowGroupId = (slidesId: string, index: number) => `${sli
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SlideshowItemGroup: Comp<SlideshowItemGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SlideshowItemGroup = forwardRef<SlideshowItemGroupProps, HTMLDivElement>((props, ref) => {
     const { className, children, role = 'group', label, isDisplayed, ...forwardedProps } = props;
     const groupRef = React.useRef<HTMLDivElement>(null);
 

package/src/components/switch/Switch.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 { render } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event/';
@@ -14,9 +14,9 @@ type SetupProps = Partial<SwitchProps>;
 /**
  * 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 = { ...propsOverride };
-    render(<Switch {...props} />);
+    render(<Switch {...props} />, { wrapper });
     const switchWrapper = getByClassName(document.body, CLASSNAME);
     const input = getByTagName(switchWrapper, 'input');
     const helper = queryByClassName(switchWrapper, `${CLASSNAME}__helper`);
@@ -106,5 +106,11 @@ describe(`<${Switch.displayName}>`, () => {
         forwardClassName: 'switchWrapper',
         forwardAttributes: 'switchWrapper',
         forwardRef: 'switchWrapper',
+        applyTheme: {
+            affects: [{ element: 'switchWrapper' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/switch/Switch.tsx

@@ -1,14 +1,14 @@
-import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent } from 'react';
+import React, { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
-
 import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, 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,7 +47,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<SwitchProps> = {
     position: Alignment.left,
-    theme: Theme.light,
 };
 
 /**
@@ -57,7 +56,8 @@ const DEFAULT_PROPS: Partial<SwitchProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
         children,
@@ -70,7 +70,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
         name,
         onChange,
         position,
-        theme,
+        theme = defaultTheme,
         value,
         inputProps = {},
         ...forwardedProps

package/src/components/table/Table.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 { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 
@@ -8,8 +8,8 @@ import { Table, TableProps } from './Table';
 
 const CLASSNAME = Table.className as string;
 
-const setup = (props: Partial<TableProps> = {}) => {
-    render(<Table {...(props as any)} />);
+const setup = (props: Partial<TableProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<Table {...(props as any)} />, { wrapper });
     const table = queryByClassName(document.body, CLASSNAME);
     return { props, table };
 };
@@ -21,5 +21,11 @@ describe(`<${Table.displayName}>`, () => {
         forwardClassName: 'table',
         forwardAttributes: 'table',
         forwardRef: 'table',
+        applyTheme: {
+            affects: [{ element: 'table' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/table/Table.tsx

@@ -1,11 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { 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 { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -30,9 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<TableProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<TableProps> = {};
 
 /**
  * Table component.
@@ -41,8 +40,9 @@ const DEFAULT_PROPS: Partial<TableProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {
-    const { children, className, hasBefore, hasDividers, theme, ...forwardedProps } = props;
+export const Table = forwardRef<TableProps, HTMLTableElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, hasBefore, hasDividers, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <table

package/src/components/table/TableBody.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import React 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.
@@ -27,7 +28,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableBody: Comp<TableBodyProps, HTMLTableSectionElement> = forwardRef((props, ref) => {
+export const TableBody = forwardRef<TableBodyProps, HTMLTableSectionElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (

package/src/components/table/TableCell.tsx

@@ -1,12 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
+import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
 import { Icon, Size } from '@lumx/react';
-import { Comp, GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Table head cell sort order.
@@ -60,7 +60,7 @@ const DEFAULT_PROPS: Partial<TableCellProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableCell: Comp<TableCellProps, HTMLTableCellElement> = forwardRef((props, ref) => {
+export const TableCell = forwardRef<TableCellProps, HTMLTableCellElement>((props, ref) => {
     const { children, className, icon, isSortable, onHeaderClick, sortOrder, variant, ...forwardedProps } = props;
 
     // Use button if clickable

package/src/components/table/TableHeader.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import React 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.
@@ -32,7 +33,7 @@ const DEFAULT_PROPS: Partial<TableHeaderProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement> = forwardRef((props, ref) => {
+export const TableHeader = forwardRef<TableHeaderProps, HTMLTableSectionElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (