@lumx/react 3.10.0 → 3.10.1-alpha.0

package/src/components/dialog/Dialog.tsx

@@ -18,6 +18,7 @@ import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -208,65 +209,67 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
               >
                   <div className={`${CLASSNAME}__overlay`} />
 
-                  <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                      <ClickAwayProvider
-                          callback={!shouldPreventCloseOnClickAway && onClose}
-                          childrenRefs={clickAwayRefs}
-                          parentRef={rootRef}
-                      >
-                          <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
-                              {(header || headerChildContent) && (
-                                  <header
-                                      {...headerChildProps}
-                                      className={classNames(
-                                          `${CLASSNAME}__header`,
-                                          (forceHeaderDivider || hasTopIntersection) &&
-                                              `${CLASSNAME}__header--has-divider`,
-                                          headerChildProps?.className,
-                                      )}
-                                  >
-                                      {header}
-                                      {headerChildContent}
-                                  </header>
-                              )}
-
-                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>
-                                  <div
-                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
-                                      ref={setSentinelTop}
-                                  />
-
-                                  {content}
-
-                                  <div
-                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
-                                      ref={setSentinelBottom}
-                                  />
-                              </div>
-
-                              {(footer || footerChildContent) && (
-                                  <footer
-                                      {...footerChildProps}
-                                      className={classNames(
-                                          `${CLASSNAME}__footer`,
-                                          (forceFooterDivider || hasBottomIntersection) &&
-                                              `${CLASSNAME}__footer--has-divider`,
-                                          footerChildProps?.className,
-                                      )}
-                                  >
-                                      {footer}
-                                      {footerChildContent}
-                                  </footer>
-                              )}
-
-                              {isLoading && (
-                                  <div className={`${CLASSNAME}__progress-overlay`}>
-                                      <Progress variant={ProgressVariant.circular} />
+                  <ThemeProvider value={undefined}>
+                      <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
+                          <ClickAwayProvider
+                              callback={!shouldPreventCloseOnClickAway && onClose}
+                              childrenRefs={clickAwayRefs}
+                              parentRef={rootRef}
+                          >
+                              <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                                  {(header || headerChildContent) && (
+                                      <header
+                                          {...headerChildProps}
+                                          className={classNames(
+                                              `${CLASSNAME}__header`,
+                                              (forceHeaderDivider || hasTopIntersection) &&
+                                                  `${CLASSNAME}__header--has-divider`,
+                                              headerChildProps?.className,
+                                          )}
+                                      >
+                                          {header}
+                                          {headerChildContent}
+                                      </header>
+                                  )}
+
+                                  <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>
+                                      <div
+                                          className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
+                                          ref={setSentinelTop}
+                                      />
+
+                                      {content}
+
+                                      <div
+                                          className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
+                                          ref={setSentinelBottom}
+                                      />
                                   </div>
-                              )}
-                          </div>
-                      </ClickAwayProvider>
-                  </section>
+
+                                  {(footer || footerChildContent) && (
+                                      <footer
+                                          {...footerChildProps}
+                                          className={classNames(
+                                              `${CLASSNAME}__footer`,
+                                              (forceFooterDivider || hasBottomIntersection) &&
+                                                  `${CLASSNAME}__footer--has-divider`,
+                                              footerChildProps?.className,
+                                          )}
+                                      >
+                                          {footer}
+                                          {footerChildContent}
+                                      </footer>
+                                  )}
+
+                                  {isLoading && (
+                                      <div className={`${CLASSNAME}__progress-overlay`}>
+                                          <Progress variant={ProgressVariant.circular} />
+                                      </div>
+                                  )}
+                              </div>
+                          </ClickAwayProvider>
+                      </section>
+                  </ThemeProvider>
               </div>,
               document.body,
           )

package/src/components/divider/Divider.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 { Theme } from '@lumx/react';
 import { render, screen } from '@testing-library/react';
@@ -13,10 +13,10 @@ type SetupProps = Partial<DividerProps>;
 /**
  * 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: DividerProps = { ...propsOverride };
 
-    render(<Divider {...props} />);
+    render(<Divider {...props} />, { wrapper });
     const divider = screen.queryByRole('separator');
 
     return { props, divider };
@@ -43,5 +43,11 @@ describe(`<${Divider.displayName}>`, () => {
         forwardClassName: 'divider',
         forwardAttributes: 'divider',
         forwardRef: 'divider',
+        applyTheme: {
+            affects: [{ element: 'divider' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/divider/Divider.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 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';
 
 /**
  * Defines the props of the component.
@@ -24,9 +25,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<DividerProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<DividerProps> = {};
 
 /**
  * Divider component.
@@ -36,7 +35,8 @@ const DEFAULT_PROPS: Partial<DividerProps> = {
  * @return React element.
  */
 export const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {
-    const { className, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <hr

package/src/components/drag-handle/DragHandle.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { DragHandle, DragHandleProps } from './DragHandle';
+
+const CLASSNAME = DragHandle.className as string;
+
+type SetupProps = Partial<DragHandleProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: DragHandleProps = { ...propsOverride };
+
+    const { container } = render(<DragHandle {...props} />, { wrapper });
+    const handle = queryByClassName(container, CLASSNAME);
+
+    return { props, handle };
+};
+
+describe(`<${DragHandle.displayName}>`, () => {
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'handle',
+        forwardAttributes: 'handle',
+        forwardRef: 'handle',
+        applyTheme: {
+            affects: [{element:'handle'}],
+            viaProp: true,
+            viaContext: true,
+        },
+    });
+});

package/src/components/drag-handle/DragHandle.tsx

@@ -6,6 +6,7 @@ import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, Size, 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';
 
 /**
  * Defines the props of the component.
@@ -30,7 +31,8 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme();
+    const { className, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <div

package/src/components/expansion-panel/ExpansionPanel.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 { queryByRole, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
@@ -29,7 +29,10 @@ const ControlledComponent = (props: ExpansionPanelProps) => {
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: Partial<ExpansionPanelProps> = {}, options: { controlled?: boolean } = {}) => {
+const setup = (
+    propsOverride: Partial<ExpansionPanelProps> = {},
+    options: { controlled?: boolean; wrapper?: SetupRenderOptions['wrapper'] } = {},
+) => {
     const props = {
         toggleButtonProps: { label: 'Toggle' },
         children: mockChildrenContent,
@@ -37,7 +40,7 @@ const setup = (propsOverride: Partial<ExpansionPanelProps> = {}, options: { cont
     };
 
     const Component = options.controlled ? ControlledComponent : ExpansionPanel;
-    const { container } = render(<Component {...props} />);
+    const { container } = render(<Component {...props} />, { wrapper: options.wrapper });
 
     return {
         container,
@@ -154,5 +157,11 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
         forwardClassName: 'element',
         forwardAttributes: 'element',
         forwardRef: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -14,6 +14,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { EXPANSION_PANEL_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -51,9 +52,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {};
 
 const isDragHandle = isComponent(DragHandle);
 const isHeader = isComponent('header');
@@ -67,6 +66,7 @@ const isFooter = isComponent('footer');
  * @return React element.
  */
 export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         className,
         children: anyChildren,
@@ -77,7 +77,7 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
         onClose,
         onOpen,
         onToggleOpen,
-        theme,
+        theme = defaultTheme,
         toggleButtonProps,
         ...forwardedProps
     } = props;

package/src/components/flag/Flag.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
-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,10 +13,10 @@ const CLASSNAME = Flag.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propOverrides: Partial<FlagProps> = {}) => {
+const setup = (propOverrides: Partial<FlagProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props = { label: 'default', ...propOverrides };
 
-    render(<Flag {...props} />);
+    render(<Flag {...props} />, { wrapper });
     const flag = getByClassName(document.body, CLASSNAME);
     const icon = queryByClassName(flag, `${CLASSNAME}__icon`);
 
@@ -50,5 +50,15 @@ describe(`<${Flag.displayName} />`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'flag', forwardAttributes: 'flag' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'flag',
+        forwardAttributes: 'flag',
+        applyTheme: {
+            affects: [{ element: 'flag', classModifier: 'color', inverted: true }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

package/src/components/flag/Flag.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { ColorPalette, Icon, Size, Theme, Text } 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 FlagProps extends GenericProps, HasTheme {
     /** Color of the component. */
@@ -18,9 +19,7 @@ export interface FlagProps extends GenericProps, HasTheme {
 
 const COMPONENT_NAME = 'Flag';
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
-const DEFAULT_PROPS: Partial<FlagProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<FlagProps> = {};
 
 /**
  * Flag component.
@@ -30,7 +29,8 @@ const DEFAULT_PROPS: Partial<FlagProps> = {
  * @return React element.
  */
 export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, icon, color, className, theme, truncate, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { label, icon, color, className, theme = defaultTheme, truncate, ...forwardedProps } = props;
     const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
     const isTruncated = !!truncate;
 

package/src/components/icon/Icon.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { mdiAlertCircle } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
@@ -15,12 +15,12 @@ type SetupProps = Partial<IconProps>;
 /**
  * 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: IconProps = {
         icon: 'mdiPlus',
         ...propsOverride,
     };
-    render(<Icon {...props} />);
+    render(<Icon {...props} />, { wrapper });
     const i = getByClassName(document.body, CLASSNAME);
     const svg = getByTagName(i, 'svg');
     const path = getByTagName(svg, 'path');
@@ -114,5 +114,14 @@ describe(`<${Icon.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'i', forwardAttributes: 'i' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'i',
+        forwardAttributes: 'i',
+        applyTheme: {
+            affects: [{ element: 'i', classModifier: 'color', inverted: true }],
+            viaProp: true,
+            viaContext: true,
+        },
+    });
 });

package/src/components/icon/Icon.tsx

@@ -6,6 +6,7 @@ import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiAlertCircle } from '@lumx/icons';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 
@@ -53,7 +54,18 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  * @return React element.
  */
 export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
-    const { className, color, colorVariant, hasShape, icon, size, theme, alt, ...forwardedProps } = props;
+    const defaultTheme = useTheme();
+    const {
+        className,
+        color,
+        colorVariant,
+        hasShape,
+        icon,
+        size,
+        theme = defaultTheme,
+        alt,
+        ...forwardedProps
+    } = props;
 
     // Color
     let iconColor = color;

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

@@ -1,19 +1,21 @@
 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 { toNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 
+import { Thumbnail } from '@lumx/react';
 import { ImageBlock, ImageBlockProps } from './ImageBlock';
 import { FullFeatured } from './ImageBlock.stories';
 
 const CLASSNAME = ImageBlock.className as string;
 
-const setup = (props: Partial<ImageBlockProps> = {}) => {
-    render(<ImageBlock {...(props as any)} />);
+const setup = (props: Partial<ImageBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<ImageBlock {...(props as any)} />, { wrapper });
     const imageBlock = queryByClassName(document.body, CLASSNAME);
-    return { props, imageBlock };
+    const thumbnail = queryByClassName(imageBlock as any, Thumbnail.className as string);
+    return { props, imageBlock, thumbnail };
 };
 
 describe(`<${ImageBlock.displayName}>`, () => {
@@ -47,5 +49,11 @@ describe(`<${ImageBlock.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'imageBlock',
         forwardAttributes: 'imageBlock',
+        applyTheme: {
+            affects: [{ element: 'imageBlock' }, { element: 'thumbnail' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

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

@@ -7,6 +7,7 @@ import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/re
 import { Comp, 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 { ThumbnailProps } from '../thumbnail/Thumbnail';
 import { ImageCaption, ImageCaptionMetadata } from './ImageCaption';
 
@@ -61,7 +62,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<ImageBlockProps> = {
     captionPosition: ImageBlockCaptionPosition.below,
-    theme: Theme.light,
     align: Alignment.left,
 };
 
@@ -73,6 +73,7 @@ const DEFAULT_PROPS: Partial<ImageBlockProps> = {
  * @return React element.
  */
 export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
         align,
@@ -86,7 +87,7 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
         image,
         size,
         tags,
-        theme,
+        theme = defaultTheme,
         thumbnailProps,
         title,
         titleProps,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Kind, Theme } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 import { INPUT_HELPER_CONFIGURATION } from '@lumx/react/components/input-helper/constants';
@@ -14,9 +14,9 @@ type SetupProps = Partial<InputHelperProps>;
 /**
  * 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(<InputHelper {...props} />);
+    render(<InputHelper {...props} />, { wrapper });
     const helper = getByClassName(document.body, CLASSNAME);
 
     return { helper, props };
@@ -43,5 +43,15 @@ describe(`<${InputHelper.displayName}>`, () => {
         });
     });
 
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'helper', forwardAttributes: 'helper' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'helper',
+        forwardAttributes: 'helper',
+        applyTheme: {
+            affects: [{ element: 'helper' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

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

@@ -4,6 +4,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { INPUT_HELPER_CONFIGURATION } from './constants';
 
 /**
@@ -31,7 +32,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<InputHelperProps> = {
     kind: Kind.info,
-    theme: Theme.light,
 };
 
 /**
@@ -42,7 +42,8 @@ const DEFAULT_PROPS: Partial<InputHelperProps> = {
  * @return React element.
  */
 export const InputHelper: Comp<InputHelperProps, HTMLParagraphElement> = forwardRef((props, ref) => {
-    const { children, className, kind, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, kind, theme = defaultTheme, ...forwardedProps } = props;
     const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
 
     return (

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Theme } from '@lumx/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { InputLabel, InputLabelProps } from './InputLabel';
 
 const CLASSNAME = InputLabel.className as string;
@@ -13,9 +13,9 @@ type SetupProps = Partial<InputLabelProps>;
 /**
  * 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 = { htmlFor: 'id', ...propsOverride };
-    render(<InputLabel {...props} />);
+    render(<InputLabel {...props} />, { wrapper });
     const label = getByClassName(document.body, CLASSNAME);
 
     return { label, props };
@@ -40,5 +40,15 @@ describe(`<${InputLabel.displayName}>`, () => {
         });
     });
 
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'label', forwardAttributes: 'label' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'label',
+        forwardAttributes: 'label',
+        applyTheme: {
+            affects: [{ element: 'label' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });