@lumx/react 3.10.0 → 3.10.1-alpha.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.10.0",
-        "@lumx/icons": "^3.10.0",
+        "@lumx/core": "^3.10.1-alpha.1",
+        "@lumx/icons": "^3.10.1-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.10.0"
+    "version": "3.10.1-alpha.1"
 }

package/src/components/alert-dialog/AlertDialog.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -14,11 +14,10 @@ import {
     Toolbar,
     ButtonProps,
 } from '@lumx/react';
-
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -77,7 +76,7 @@ const DEFAULT_PROPS: Partial<DialogProps> = {
  * It should not have a complex content.
  * Children of this component should only be strings, paragraphs or links.
  */
-export const AlertDialog: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {
     const { id, title, className, cancelProps, confirmProps, kind, size, dialogProps, children, ...forwardedProps } =
         props;
 

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Dropdown, List, ListItem, Size, TextField } from '@lumx/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,7 +14,7 @@ const CLASSNAME = Autocomplete.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<AutocompleteProps> = {}) => {
+const setup = (props: Partial<AutocompleteProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     render(
         <Autocomplete {...(props as any)}>
             <List>
@@ -25,6 +25,7 @@ const setup = (props: Partial<AutocompleteProps> = {}) => {
                 ))}
             </List>
         </Autocomplete>,
+        { wrapper },
     );
     const autocomplete = getByClassName(document.body, CLASSNAME);
     const textField = getByClassName(autocomplete, TextField.className as string);
@@ -90,5 +91,11 @@ describe(`<${Autocomplete.displayName}>`, () => {
         forwardClassName: 'autocomplete',
         forwardAttributes: 'autocomplete',
         forwardRef: 'autocomplete',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/autocomplete/Autocomplete.tsx

@@ -1,13 +1,15 @@
-import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';
+import React, { ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } 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 { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -199,7 +201,8 @@ const DEFAULT_PROPS: Partial<AutocompleteProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme();
     const {
         anchorToInput,
         children,
@@ -231,7 +234,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
         placeholder,
         placement,
         shouldFocusOnClose,
-        theme,
+        theme = defaultTheme,
         value,
         textFieldProps = {},
         focusAnchorOnClose,

package/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 
@@ -13,7 +13,7 @@ const CLASSNAME = AutocompleteMultiple.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<AutocompleteMultipleProps> = {}) => {
+const setup = (props: Partial<AutocompleteMultipleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     render(
         <AutocompleteMultiple {...(props as any)}>
             <List>
@@ -24,6 +24,7 @@ const setup = (props: Partial<AutocompleteMultipleProps> = {}) => {
                 ))}
             </List>
         </AutocompleteMultiple>,
+        { wrapper },
     );
     const autocompleteMultiple = getByClassName(document.body, CLASSNAME);
     const textField = getByClassName(autocompleteMultiple, TextField.className as string);
@@ -52,5 +53,11 @@ describe(`<${AutocompleteMultiple.displayName}>`, () => {
         forwardClassName: 'autocompleteMultiple',
         forwardRef: 'autocompleteMultiple',
         forwardAttributes: 'autocompleteMultiple',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -1,11 +1,13 @@
+import React, { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { mdiClose } from '@lumx/icons';
-import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
 
-import { Comp } from '@lumx/react/utils/type';
+import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -65,7 +67,8 @@ const DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme();
     const {
         anchorToInput,
         children,
@@ -99,7 +102,7 @@ export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElemen
         placement,
         selectedChipRender,
         shouldFocusOnClose,
-        theme,
+        theme = defaultTheme,
         type,
         value,
         values,

package/src/components/avatar/Avatar.test.tsx

@@ -1,24 +1,34 @@
 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 { Avatar, AvatarProps } from './Avatar';
 
 const CLASSNAME = Avatar.className as string;
 
-const setup = (propsOverride: Partial<AvatarProps> = {}) => {
+const setup = (propsOverride: Partial<AvatarProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: AvatarProps = {
         image: 'path/to/avatar/image.png',
         alt: 'Image',
         ...propsOverride,
     };
-    render(<Avatar {...props} />);
+    render(<Avatar {...props} />, { wrapper });
     const avatar = queryByClassName(document.body, CLASSNAME);
     return { avatar, props };
 };
 
 describe(`<${Avatar.displayName}>`, () => {
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'avatar', forwardAttributes: 'avatar' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'avatar',
+        forwardAttributes: 'avatar',
+        applyTheme: {
+            affects: [{ element: 'avatar' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

package/src/components/avatar/Avatar.tsx

@@ -1,11 +1,13 @@
-import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import React, { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } 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';
 
 /**
  * Avatar sizes.
@@ -56,7 +58,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<AvatarProps> = {
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -66,7 +67,8 @@ const DEFAULT_PROPS: Partial<AvatarProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
         alt,
@@ -78,7 +80,7 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
         onClick,
         onKeyPress,
         size,
-        theme,
+        theme = defaultTheme,
         thumbnailProps,
         ...forwardedProps
     } = props;

package/src/components/badge/Badge.tsx

@@ -1,8 +1,11 @@
+import React, { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { ColorPalette } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -38,7 +41,7 @@ const DEFAULT_PROPS: Partial<BadgeProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Badge = forwardRef<BadgeProps, HTMLDivElement>((props, ref) => {
     const { children, className, color, ...forwardedProps } = props;
     return (
         <div

package/src/components/badge/BadgeWrapper.tsx

@@ -1,8 +1,11 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import classNames from 'classnames';
-import React, { forwardRef, ReactElement, ReactNode } from 'react';
+import { GenericProps } from '@lumx/react/utils/type';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export interface BadgeWrapperProps extends GenericProps {
     /** Badge. */
@@ -21,7 +24,7 @@ const COMPONENT_NAME = 'BadgeWrapper';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
-export const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props, ref) => {
     const { badge, children, className, ...forwardedProps } = props;
 
     return (

package/src/components/button/Button.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { mdiCheck, mdiPlus } from '@lumx/icons';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Emphasis, Icon } from '@lumx/react';
@@ -15,9 +15,9 @@ type SetupProps = Partial<ButtonProps>;
 /**
  * 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 = { ...propsOverride };
-    render(<Button {...props} />);
+    render(<Button {...props} />, { wrapper });
     const button = getByClassName(document.body, CLASSNAME);
     const buttonWrapper = queryByClassName(document.body, 'lumx-button-wrapper');
     const icons = queryAllByClassName(button, Icon.className as string);
@@ -71,5 +71,11 @@ describe(`<${Button.displayName}>`, () => {
         forwardClassName: 'button',
         forwardAttributes: 'button',
         forwardRef: 'button',
+        applyTheme: {
+            affects: [{ element: 'button' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/button/Button.tsx

@@ -1,11 +1,14 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
-import { Comp, isComponent } from '@lumx/react/utils/type';
+import { isComponent } from '@lumx/react/utils/type';
 import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { BaseButtonProps, ButtonRoot } from './ButtonRoot';
 
 /**
@@ -44,7 +47,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<ButtonProps> = {
     emphasis: Emphasis.high,
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -54,8 +56,9 @@ const DEFAULT_PROPS: Partial<ButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
-    const { children, className, emphasis, leftIcon, rightIcon, size, theme, ...forwardedProps } = props;
+export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, emphasis, leftIcon, rightIcon, size, theme = defaultTheme, ...forwardedProps } = props;
 
     const buttonClassName = classNames(
         className,

package/src/components/button/ButtonGroup.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 } 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<ButtonGroupProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ButtonGroup = forwardRef<ButtonGroupProps, HTMLDivElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (

package/src/components/button/ButtonRoot.tsx

@@ -1,4 +1,4 @@
-import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';
+import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
@@ -6,9 +6,10 @@ import classNames from 'classnames';
 
 import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 
@@ -94,7 +95,7 @@ const renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
+export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
     const {
         'aria-label': ariaLabel,
         children,

package/src/components/button/IconButton.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 { Button } from '@lumx/react';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
@@ -14,9 +14,9 @@ type SetupProps = Partial<IconButtonProps>;
 /**
  * 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 = { ...propsOverride };
-    render(<IconButton {...props} />);
+    render(<IconButton {...props} />, { wrapper });
     const iconButton = getByClassName(document.body, CLASSNAME);
     const icon = queryByClassName(iconButton, 'lumx-icon');
     const img = queryByTagName(iconButton, 'IMG');
@@ -58,5 +58,11 @@ describe(`<${IconButton.displayName}>`, () => {
         forwardClassName: 'iconButton',
         forwardAttributes: 'iconButton',
         forwardRef: 'iconButton',
+        applyTheme: {
+            affects: [{ element: 'iconButton' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/button/IconButton.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export interface IconButtonProps extends BaseButtonProps {
     /**
@@ -46,7 +47,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<IconButtonProps> = {
     emphasis: Emphasis.high,
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -56,8 +56,19 @@ const DEFAULT_PROPS: Partial<IconButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {
-    const { emphasis, image, icon, label, size, theme, tooltipProps, hideTooltip, ...forwardedProps } = props;
+export const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        emphasis,
+        image,
+        icon,
+        label,
+        size,
+        theme = defaultTheme,
+        tooltipProps,
+        hideTooltip,
+        ...forwardedProps
+    } = props;
 
     return (
         <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>

package/src/components/checkbox/Checkbox.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';
@@ -14,9 +14,9 @@ type SetupProps = Partial<CheckboxProps>;
 /**
  * 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(<Checkbox {...props} />);
+    render(<Checkbox {...props} />, { wrapper });
 
     const checkbox = getByClassName(document.body, CLASSNAME);
     const helper = queryByClassName(checkbox, `${CLASSNAME}__helper`);
@@ -117,5 +117,11 @@ describe(`<${Checkbox.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'checkbox',
         forwardAttributes: 'checkbox',
+        applyTheme: {
+            affects: [{ element: 'checkbox' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/checkbox/Checkbox.tsx

@@ -1,14 +1,16 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 
 import { mdiCheck, mdiMinus } from '@lumx/icons';
 
 import { Icon, 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 { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Intermediate state of checkbox.
@@ -54,9 +56,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<CheckboxProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<CheckboxProps> = {};
 
 /**
  * Checkbox component.
@@ -65,7 +65,8 @@ const DEFAULT_PROPS: Partial<CheckboxProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
         className,
@@ -78,7 +79,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
         label,
         name,
         onChange,
-        theme,
+        theme = defaultTheme,
         value,
         inputProps = {},
         ...forwardedProps

package/src/components/chip/Chip.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Theme } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
@@ -12,12 +12,12 @@ const CLASSNAME = Chip.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propOverrides: Partial<ChipProps> = {}) => {
+const setup = (propOverrides: Partial<ChipProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props = {
         ...propOverrides,
     };
 
-    render(<Chip {...props} />);
+    render(<Chip {...props} />, { wrapper });
     const chip = getByClassName(document.body, CLASSNAME);
     const before = queryByClassName(chip, `${CLASSNAME}__before`);
     const after = queryByClassName(chip, `${CLASSNAME}__after`);
@@ -185,5 +185,15 @@ describe('<Chip />', () => {
         });
     });
 
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'chip', forwardAttributes: 'chip' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'chip',
+        forwardAttributes: 'chip',
+        applyTheme: {
+            affects: [{ element: 'chip', classModifier: 'color', inverted: true }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });