diff --git a/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx b/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx
index 1de2f34e6f..e6baa16728 100644
--- a/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx
+++ b/packages/lumx-react/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;
 
diff --git a/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx b/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
index b5a5814460..ea364f46f5 100644
--- a/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
@@ -1,14 +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.
@@ -200,7 +201,7 @@ 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,
diff --git a/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx b/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
index 763219b5ff..2eef0c04d2 100644
--- a/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
+++ b/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
@@ -1,11 +1,12 @@
+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';
 
 /**
@@ -66,7 +67,7 @@ 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,
diff --git a/packages/lumx-react/src/components/avatar/Avatar.tsx b/packages/lumx-react/src/components/avatar/Avatar.tsx
index de79fe44e5..2c0c6dcda7 100644
--- a/packages/lumx-react/src/components/avatar/Avatar.tsx
+++ b/packages/lumx-react/src/components/avatar/Avatar.tsx
@@ -1,12 +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.
@@ -66,7 +67,7 @@ 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,
diff --git a/packages/lumx-react/src/components/badge/Badge.tsx b/packages/lumx-react/src/components/badge/Badge.tsx
index dc00486db7..d213c26c2b 100644
--- a/packages/lumx-react/src/components/badge/Badge.tsx
+++ b/packages/lumx-react/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
diff --git a/packages/lumx-react/src/components/badge/BadgeWrapper.tsx b/packages/lumx-react/src/components/badge/BadgeWrapper.tsx
index f1b86fdf81..37d7dbb258 100644
--- a/packages/lumx-react/src/components/badge/BadgeWrapper.tsx
+++ b/packages/lumx-react/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 (
diff --git a/packages/lumx-react/src/components/button/Button.tsx b/packages/lumx-react/src/components/button/Button.tsx
index 000588f1ee..c076c5ffa8 100644
--- a/packages/lumx-react/src/components/button/Button.tsx
+++ b/packages/lumx-react/src/components/button/Button.tsx
@@ -1,12 +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';
 
 /**
@@ -54,7 +56,7 @@ const DEFAULT_PROPS: Partial<ButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
+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;
 
diff --git a/packages/lumx-react/src/components/button/ButtonGroup.tsx b/packages/lumx-react/src/components/button/ButtonGroup.tsx
index ba5426e664..3bfa5fb33a 100644
--- a/packages/lumx-react/src/components/button/ButtonGroup.tsx
+++ b/packages/lumx-react/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 (
diff --git a/packages/lumx-react/src/components/button/ButtonRoot.tsx b/packages/lumx-react/src/components/button/ButtonRoot.tsx
index b67f7d7c90..ff6684c580 100644
--- a/packages/lumx-react/src/components/button/ButtonRoot.tsx
+++ b/packages/lumx-react/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,
diff --git a/packages/lumx-react/src/components/button/IconButton.tsx b/packages/lumx-react/src/components/button/IconButton.tsx
index a285398007..4c16d86c25 100644
--- a/packages/lumx-react/src/components/button/IconButton.tsx
+++ b/packages/lumx-react/src/components/button/IconButton.tsx
@@ -1,10 +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 {
     /**
@@ -56,7 +56,7 @@ const DEFAULT_PROPS: Partial<IconButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         emphasis,
diff --git a/packages/lumx-react/src/components/checkbox/Checkbox.tsx b/packages/lumx-react/src/components/checkbox/Checkbox.tsx
index 63ee183c70..b3d036af2a 100644
--- a/packages/lumx-react/src/components/checkbox/Checkbox.tsx
+++ b/packages/lumx-react/src/components/checkbox/Checkbox.tsx
@@ -1,15 +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.
@@ -64,7 +65,7 @@ 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,
diff --git a/packages/lumx-react/src/components/chip/Chip.tsx b/packages/lumx-react/src/components/chip/Chip.tsx
index 0d37ebbee1..480fbfb56d 100644
--- a/packages/lumx-react/src/components/chip/Chip.tsx
+++ b/packages/lumx-react/src/components/chip/Chip.tsx
@@ -1,14 +1,15 @@
+import React, { MouseEventHandler, ReactNode } from 'react';
+
+import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
+
 import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-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 { onEnterPressed } from '@lumx/react/utils/event';
-
-import classNames from 'classnames';
-
-import isFunction from 'lodash/isFunction';
-import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
@@ -66,7 +67,7 @@ const DEFAULT_PROPS: Partial<ChipProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref) => {
+export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         after,
@@ -144,9 +145,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
                     {before}
                 </div>
             )}
-
             <div className={`${CLASSNAME}__label`}>{children}</div>
-
             {after && (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div
diff --git a/packages/lumx-react/src/components/chip/ChipGroup.tsx b/packages/lumx-react/src/components/chip/ChipGroup.tsx
index c62fbef3ed..ceef67c8e1 100644
--- a/packages/lumx-react/src/components/chip/ChipGroup.tsx
+++ b/packages/lumx-react/src/components/chip/ChipGroup.tsx
@@ -1,10 +1,11 @@
-import { HorizontalAlignment } from '@lumx/react/components';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { HorizontalAlignment } from '@lumx/react/components';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
 
@@ -43,7 +44,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalChipGroup: Comp<ChipGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+const InternalChipGroup = forwardRef<ChipGroupProps, HTMLDivElement>((props, ref) => {
     const { align, children, className, ...forwardedProps } = props;
     const chipGroupClassName = handleBasicClasses({
         prefix: CLASSNAME,
diff --git a/packages/lumx-react/src/components/comment-block/CommentBlock.tsx b/packages/lumx-react/src/components/comment-block/CommentBlock.tsx
index 24d3215a1a..48567a0599 100644
--- a/packages/lumx-react/src/components/comment-block/CommentBlock.tsx
+++ b/packages/lumx-react/src/components/comment-block/CommentBlock.tsx
@@ -1,10 +1,11 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { AvatarProps } from '../avatar/Avatar';
@@ -87,7 +88,7 @@ const DEFAULT_PROPS: Partial<CommentBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const CommentBlock = forwardRef<CommentBlockProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
@@ -162,7 +163,6 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
                     {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
                 </div>
             </div>
-
             {hasChildren && isOpen && <div className={`${CLASSNAME}__children`}>{children}</div>}
         </div>
     );
diff --git a/packages/lumx-react/src/components/date-picker/DatePicker.tsx b/packages/lumx-react/src/components/date-picker/DatePicker.tsx
index cd74539400..664dbc4cc9 100644
--- a/packages/lumx-react/src/components/date-picker/DatePicker.tsx
+++ b/packages/lumx-react/src/components/date-picker/DatePicker.tsx
@@ -1,7 +1,9 @@
-import React, { forwardRef, useState } from 'react';
-import { Comp } from '@lumx/react/utils/type';
+import React, { useState } from 'react';
+
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { isDateValid } from '@lumx/react/utils/date/isDateValid';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { CLASSNAME, COMPONENT_NAME } from './constants';
 import { DatePickerControlled } from './DatePickerControlled';
 import { DatePickerProps } from './types';
@@ -13,7 +15,7 @@ import { DatePickerProps } from './types';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePicker = forwardRef<DatePickerProps, HTMLDivElement>((props, ref) => {
     const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
 
     let referenceDate = value || defaultMonth || new Date();
diff --git a/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx b/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
index d1b9d8dc23..79c254163a 100644
--- a/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
+++ b/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
@@ -1,5 +1,7 @@
-import React, { KeyboardEventHandler, forwardRef } from 'react';
+import React, { KeyboardEventHandler } from 'react';
+
 import classNames from 'classnames';
+
 import {
     Button,
     DatePickerProps,
@@ -12,7 +14,6 @@ import {
     Toolbar,
 } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
-import { Comp } from '@lumx/react/utils/type';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
 import { isSameDay } from '@lumx/react/utils/date/isSameDay';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
@@ -24,6 +25,8 @@ import { onEnterPressed } from '@lumx/react/utils/event';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
 import { VISUALLY_HIDDEN } from '@lumx/react/constants';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { CLASSNAME } from './constants';
 
 /**
@@ -52,7 +55,7 @@ const COMPONENT_NAME = 'DatePickerControlled';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePickerControlled = forwardRef<DatePickerControlledProps, HTMLDivElement>((props, ref) => {
     const {
         locale = getCurrentLocale(),
         maxDate,
diff --git a/packages/lumx-react/src/components/date-picker/DatePickerField.tsx b/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
index b6840c9e38..7a2d1620eb 100644
--- a/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
+++ b/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef, SyntheticEvent, useCallback, useRef } from 'react';
+import React, { SyntheticEvent, useCallback, useRef } from 'react';
 
 import { DatePicker, IconButtonProps, Placement, PopoverDialog, TextField, TextFieldProps } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -40,7 +41,7 @@ const COMPONENT_NAME = 'DatePickerField';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePickerField = forwardRef<DatePickerFieldProps, HTMLDivElement>((props, ref) => {
     const {
         defaultMonth,
         disabled,
diff --git a/packages/lumx-react/src/components/dialog/Dialog.tsx b/packages/lumx-react/src/components/dialog/Dialog.tsx
index f952a55946..d5f86301bb 100644
--- a/packages/lumx-react/src/components/dialog/Dialog.tsx
+++ b/packages/lumx-react/src/components/dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
+import React, { Children, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -10,11 +10,12 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
 
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
@@ -92,7 +93,7 @@ const DEFAULT_PROPS: Partial<DialogProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
     if (!DOCUMENT) {
         // Can't render in SSR.
         return null;
diff --git a/packages/lumx-react/src/components/divider/Divider.tsx b/packages/lumx-react/src/components/divider/Divider.tsx
index 343c85d20f..8a46d64dc9 100644
--- a/packages/lumx-react/src/components/divider/Divider.tsx
+++ b/packages/lumx-react/src/components/divider/Divider.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.
@@ -34,7 +35,7 @@ const DEFAULT_PROPS: Partial<DividerProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {
+export const Divider = forwardRef<DividerProps, HTMLHRElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { className, theme = defaultTheme, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/drag-handle/DragHandle.tsx b/packages/lumx-react/src/components/drag-handle/DragHandle.tsx
index bcdd1f60e8..09479b0cc3 100644
--- a/packages/lumx-react/src/components/drag-handle/DragHandle.tsx
+++ b/packages/lumx-react/src/components/drag-handle/DragHandle.tsx
@@ -1,12 +1,13 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, Size, 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,7 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DragHandle = forwardRef<DragHandleProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme();
     const { className, theme = defaultTheme, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/dropdown/Dropdown.tsx b/packages/lumx-react/src/components/dropdown/Dropdown.tsx
index 6c7ed115cc..8b2dfce499 100644
--- a/packages/lumx-react/src/components/dropdown/Dropdown.tsx
+++ b/packages/lumx-react/src/components/dropdown/Dropdown.tsx
@@ -1,13 +1,14 @@
-import React, { cloneElement, forwardRef, useMemo, useRef } from 'react';
+import React, { cloneElement, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { List, ListProps } from '@lumx/react/components/list/List';
 import { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Offset, Placement } from '@lumx/react/components/popover/constants';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -113,7 +114,7 @@ const DEFAULT_PROPS: Partial<DropdownProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Dropdown = forwardRef<DropdownProps, HTMLDivElement>((props, ref) => {
     const {
         anchorRef,
         children,
diff --git a/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx b/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx
index 7e2f6612e0..3f61c33419 100644
--- a/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx
+++ b/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx
@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { Children, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -9,12 +9,13 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { 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';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -65,7 +66,7 @@ const isFooter = isComponent('footer');
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         className,
diff --git a/packages/lumx-react/src/components/flag/Flag.tsx b/packages/lumx-react/src/components/flag/Flag.tsx
index 40bc220cba..8b7a729b98 100644
--- a/packages/lumx-react/src/components/flag/Flag.tsx
+++ b/packages/lumx-react/src/components/flag/Flag.tsx
@@ -1,10 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme, Text } 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';
 
 export interface FlagProps extends GenericProps, HasTheme {
     /** Color of the component. */
@@ -28,7 +30,7 @@ const DEFAULT_PROPS: Partial<FlagProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Flag = forwardRef<FlagProps, HTMLDivElement>((props, ref) => {
     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);
diff --git a/packages/lumx-react/src/components/flex-box/FlexBox.tsx b/packages/lumx-react/src/components/flex-box/FlexBox.tsx
index 0cb45e37fe..076307ada2 100644
--- a/packages/lumx-react/src/components/flex-box/FlexBox.tsx
+++ b/packages/lumx-react/src/components/flex-box/FlexBox.tsx
@@ -1,9 +1,12 @@
-import { Alignment, Orientation } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import React, { ReactNode } from 'react';
+
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';
-import React, { forwardRef, ReactNode } from 'react';
+
+import { Alignment, Orientation } from '@lumx/react';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
@@ -55,7 +58,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const FlexBox = forwardRef<FlexBoxProps, HTMLDivElement>((props, ref) => {
     const {
         as: Component = 'div',
         children,
diff --git a/packages/lumx-react/src/components/generic-block/GenericBlock.tsx b/packages/lumx-react/src/components/generic-block/GenericBlock.tsx
index 6214e09900..263be6f7fd 100644
--- a/packages/lumx-react/src/components/generic-block/GenericBlock.tsx
+++ b/packages/lumx-react/src/components/generic-block/GenericBlock.tsx
@@ -1,12 +1,15 @@
-import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
+import React, { Children, ReactElement, ReactNode } from 'react';
+
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
+
 import { Comp, isComponentType } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
 import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export interface GenericBlockProps extends FlexBoxProps {
     /**
diff --git a/packages/lumx-react/src/components/grid-column/GridColumn.tsx b/packages/lumx-react/src/components/grid-column/GridColumn.tsx
index e1f5cab3c4..9c4926ad52 100644
--- a/packages/lumx-react/src/components/grid-column/GridColumn.tsx
+++ b/packages/lumx-react/src/components/grid-column/GridColumn.tsx
@@ -1,12 +1,12 @@
-import React, { forwardRef, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import isInteger from 'lodash/isInteger';
-
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Size } from '@lumx/react';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
@@ -50,7 +50,7 @@ const DEFAULT_PROPS: Partial<GridColumnProps> = {};
  * @param ref Component ref.
  * @return React element.
  */
-export const GridColumn: Comp<GridColumnProps> = forwardRef((props, ref): ReactElement => {
+export const GridColumn = forwardRef<GridColumnProps>((props, ref): ReactElement => {
     const {
         as: Component = 'div',
         gap,
diff --git a/packages/lumx-react/src/components/grid/Grid.tsx b/packages/lumx-react/src/components/grid/Grid.tsx
index 8305f6871e..10eda516ab 100644
--- a/packages/lumx-react/src/components/grid/Grid.tsx
+++ b/packages/lumx-react/src/components/grid/Grid.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
 
@@ -49,7 +50,7 @@ const DEFAULT_PROPS: Partial<GridProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Grid: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Grid = forwardRef<GridProps, HTMLDivElement>((props, ref) => {
     const { children, className, gutter, hAlign, orientation, vAlign, wrap, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/grid/GridItem.tsx b/packages/lumx-react/src/components/grid/GridItem.tsx
index df90131da0..4d3c6e9083 100644
--- a/packages/lumx-react/src/components/grid/GridItem.tsx
+++ b/packages/lumx-react/src/components/grid/GridItem.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment } 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 
@@ -37,7 +38,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const GridItem: Comp<GridItemProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const GridItem = forwardRef<GridItemProps, HTMLDivElement>((props, ref) => {
     const { children, className, width, align, order, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/heading/Heading.tsx b/packages/lumx-react/src/components/heading/Heading.tsx
index 9db4da4131..5f6cdfe823 100644
--- a/packages/lumx-react/src/components/heading/Heading.tsx
+++ b/packages/lumx-react/src/components/heading/Heading.tsx
@@ -1,7 +1,11 @@
-import { Comp, HeadingElement } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import React from 'react';
+
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+
+import { HeadingElement } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { Text, TextProps } from '../text';
 import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';
 import { useHeadingLevel } from './useHeadingLevel';
@@ -36,7 +40,7 @@ const DEFAULT_PROPS = {} as const;
  * Extends the `Text` Component with the heading level automatically computed based on
  * the current level provided by the context.
  */
-export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
+export const Heading = forwardRef<HeadingProps>((props, ref) => {
     const { children, as, className, ...forwardedProps } = props;
     const { headingElement } = useHeadingLevel();
 
diff --git a/packages/lumx-react/src/components/icon/Icon.tsx b/packages/lumx-react/src/components/icon/Icon.tsx
index 257acb3fad..16c31f79ee 100644
--- a/packages/lumx-react/src/components/icon/Icon.tsx
+++ b/packages/lumx-react/src/components/icon/Icon.tsx
@@ -1,11 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
+import { mdiAlertCircle } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size, 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 { mdiAlertCircle } from '@lumx/icons';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
@@ -53,7 +54,7 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
+export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
     const defaultTheme = useTheme();
     const {
         className,
diff --git a/packages/lumx-react/src/components/image-block/ImageBlock.tsx b/packages/lumx-react/src/components/image-block/ImageBlock.tsx
index 3bfc603c96..fc071583be 100644
--- a/packages/lumx-react/src/components/image-block/ImageBlock.tsx
+++ b/packages/lumx-react/src/components/image-block/ImageBlock.tsx
@@ -1,11 +1,12 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
@@ -72,7 +73,7 @@ const DEFAULT_PROPS: Partial<ImageBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ImageBlock = forwardRef<ImageBlockProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
diff --git a/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx b/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx
index dcd679de3a..9fbfd1c2e9 100644
--- a/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx
+++ b/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx
@@ -1,17 +1,18 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
+
 import { Lightbox } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils';
-import type { Comp } from '@lumx/react/utils/type';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ImageSlideshow } from './internal/ImageSlideshow';
 import { useImageLightbox } from './useImageLightbox';
 import type { ImageLightboxProps } from './types';
 import { CLASSNAME, COMPONENT_NAME } from './constants';
 
-const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+const Inner = forwardRef<ImageLightboxProps, HTMLDivElement>((props, ref) => {
     const {
         className,
         isOpen,
diff --git a/packages/lumx-react/src/components/inline-list/InlineList.tsx b/packages/lumx-react/src/components/inline-list/InlineList.tsx
index 2d70a67c38..ce47319c95 100644
--- a/packages/lumx-react/src/components/inline-list/InlineList.tsx
+++ b/packages/lumx-react/src/components/inline-list/InlineList.tsx
@@ -1,10 +1,11 @@
-import React, { Children, forwardRef, isValidElement } from 'react';
+import React, { Children, isValidElement } from 'react';
 
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -50,7 +51,7 @@ const DEFAULT_PROPS = {} as const;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
+export const InlineList = forwardRef<InlineListProps>((props, ref) => {
     const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;
     const fontColorClassName = color && getFontColorClassName(color, colorVariant);
     const typographyClassName = typography && getTypographyClassName(typography);
diff --git a/packages/lumx-react/src/components/input-helper/InputHelper.tsx b/packages/lumx-react/src/components/input-helper/InputHelper.tsx
index 3fe5dd1cba..1c9351b69b 100644
--- a/packages/lumx-react/src/components/input-helper/InputHelper.tsx
+++ b/packages/lumx-react/src/components/input-helper/InputHelper.tsx
@@ -1,8 +1,11 @@
+import React, { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { Kind, 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 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';
 import { INPUT_HELPER_CONFIGURATION } from './constants';
@@ -41,7 +44,7 @@ const DEFAULT_PROPS: Partial<InputHelperProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InputHelper: Comp<InputHelperProps, HTMLParagraphElement> = forwardRef((props, ref) => {
+export const InputHelper = forwardRef<InputHelperProps, HTMLParagraphElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { children, className, kind, theme = defaultTheme, ...forwardedProps } = props;
     const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
diff --git a/packages/lumx-react/src/components/input-label/InputLabel.tsx b/packages/lumx-react/src/components/input-label/InputLabel.tsx
index 1d00257fcd..cf570764f3 100644
--- a/packages/lumx-react/src/components/input-label/InputLabel.tsx
+++ b/packages/lumx-react/src/components/input-label/InputLabel.tsx
@@ -1,8 +1,11 @@
+import React, { ReactNode } 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 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';
 
 /**
@@ -39,7 +42,7 @@ const DEFAULT_PROPS: Partial<InputLabelProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InputLabel: Comp<InputLabelProps, HTMLLabelElement> = forwardRef((props, ref) => {
+export const InputLabel = forwardRef<InputLabelProps, HTMLLabelElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { children, className, htmlFor, isRequired, theme = defaultTheme, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/lightbox/Lightbox.tsx b/packages/lumx-react/src/components/lightbox/Lightbox.tsx
index 637be35ec0..6a9aee092c 100644
--- a/packages/lumx-react/src/components/lightbox/Lightbox.tsx
+++ b/packages/lumx-react/src/components/lightbox/Lightbox.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, RefObject, useRef, useEffect, AriaAttributes } from 'react';
+import React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';
 
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
@@ -6,7 +6,7 @@ import { createPortal } from 'react-dom';
 import { mdiClose } from '@lumx/icons';
 import { IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/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 { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
@@ -16,6 +16,7 @@ import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -55,7 +56,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {
     const {
         'aria-labelledby': propAriaLabelledBy,
         ariaLabelledBy = propAriaLabelledBy,
diff --git a/packages/lumx-react/src/components/link-preview/LinkPreview.tsx b/packages/lumx-react/src/components/link-preview/LinkPreview.tsx
index 9652da486c..fb305ae5bd 100644
--- a/packages/lumx-react/src/components/link-preview/LinkPreview.tsx
+++ b/packages/lumx-react/src/components/link-preview/LinkPreview.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -14,9 +14,10 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HeadingElement, 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.
@@ -65,7 +66,7 @@ const DEFAULT_PROPS = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const LinkPreview = forwardRef<LinkPreviewProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         className,
diff --git a/packages/lumx-react/src/components/link/Link.tsx b/packages/lumx-react/src/components/link/Link.tsx
index e18b8ecf76..93f7c1e379 100644
--- a/packages/lumx-react/src/components/link/Link.tsx
+++ b/packages/lumx-react/src/components/link/Link.tsx
@@ -1,13 +1,14 @@
-import React, { forwardRef, RefObject, useMemo } from 'react';
+import React, { RefObject, useMemo } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Icon, Size, Typography } 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 { renderLink } from '@lumx/react/utils/renderLink';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -82,7 +83,7 @@ const getIconSize = (typography?: Typography) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement> = forwardRef((props, ref) => {
+export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
     const {
         children,
         className,
diff --git a/packages/lumx-react/src/components/list/List.tsx b/packages/lumx-react/src/components/list/List.tsx
index ab17cb99a1..9b09b0b379 100644
--- a/packages/lumx-react/src/components/list/List.tsx
+++ b/packages/lumx-react/src/components/list/List.tsx
@@ -1,12 +1,14 @@
-import { Size } from '@lumx/react';
+import React, { Key, ReactNode, SyntheticEvent, useRef } from 'react';
+
+import classNames from 'classnames';
 
+import { Size } from '@lumx/react';
 import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
-import classNames from 'classnames';
-import React, { forwardRef, Key, ReactNode, SyntheticEvent, useRef } from 'react';
 import { useInteractiveList } from './useInteractiveList';
 
 /**
@@ -59,7 +61,7 @@ const DEFAULT_PROPS: Partial<ListProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalList: Comp<ListProps, HTMLUListElement> = forwardRef((props, ref) => {
+const InternalList = forwardRef<ListProps, HTMLUListElement>((props, ref) => {
     const { children, className, isClickable, itemPadding, onListItemSelected, tabIndex, ...forwardedProps } = props;
     const listElementRef = useRef<HTMLUListElement>(null);
 
diff --git a/packages/lumx-react/src/components/list/ListDivider.tsx b/packages/lumx-react/src/components/list/ListDivider.tsx
index 7f36dc0b40..f4fa995a11 100644
--- a/packages/lumx-react/src/components/list/ListDivider.tsx
+++ b/packages/lumx-react/src/components/list/ListDivider.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);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListDivider: Comp<ListDividerProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListDivider = forwardRef<ListDividerProps, HTMLLIElement>((props, ref) => {
     const { className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/list/ListItem.tsx b/packages/lumx-react/src/components/list/ListItem.tsx
index 2306f46cf1..f817aef8aa 100644
--- a/packages/lumx-react/src/components/list/ListItem.tsx
+++ b/packages/lumx-react/src/components/list/ListItem.tsx
@@ -1,13 +1,14 @@
-import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
+import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
@@ -74,7 +75,7 @@ export function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) => {
     const {
         after,
         before,
diff --git a/packages/lumx-react/src/components/list/ListSubheader.tsx b/packages/lumx-react/src/components/list/ListSubheader.tsx
index 4e8b450bf3..6b7947b673 100644
--- a/packages/lumx-react/src/components/list/ListSubheader.tsx
+++ b/packages/lumx-react/src/components/list/ListSubheader.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -30,7 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListSubheader: Comp<ListSubheaderProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListSubheader = forwardRef<ListSubheaderProps, HTMLLIElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/message/Message.tsx b/packages/lumx-react/src/components/message/Message.tsx
index b45482bc3e..c06ca865cf 100644
--- a/packages/lumx-react/src/components/message/Message.tsx
+++ b/packages/lumx-react/src/components/message/Message.tsx
@@ -1,9 +1,12 @@
+import React, { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';
 import { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } 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.
@@ -57,7 +60,7 @@ const CONFIG = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {
     const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;
     const { color, icon } = CONFIG[kind as Kind] || {};
     const { onClick, label: closeButtonLabel } = closeButtonProps || {};
diff --git a/packages/lumx-react/src/components/mosaic/Mosaic.tsx b/packages/lumx-react/src/components/mosaic/Mosaic.tsx
index 4de9c1222f..eeaa777b92 100644
--- a/packages/lumx-react/src/components/mosaic/Mosaic.tsx
+++ b/packages/lumx-react/src/components/mosaic/Mosaic.tsx
@@ -1,12 +1,14 @@
-import React, { forwardRef, MouseEventHandler, useMemo } from 'react';
+import React, { MouseEventHandler, useMemo } from 'react';
 
-import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import take from 'lodash/take';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
+import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
+import { GenericProps, HasTheme } 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.
  */
@@ -39,7 +41,7 @@ const DEFAULT_PROPS: Partial<MosaicProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Mosaic: Comp<MosaicProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { className, theme = defaultTheme, thumbnails, onImageClick, ...forwardedProps } = props;
     const handleImageClick = useMemo(() => {
diff --git a/packages/lumx-react/src/components/navigation/Navigation.tsx b/packages/lumx-react/src/components/navigation/Navigation.tsx
index d0b31764a7..bc340ed0b7 100644
--- a/packages/lumx-react/src/components/navigation/Navigation.tsx
+++ b/packages/lumx-react/src/components/navigation/Navigation.tsx
@@ -1,9 +1,13 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React from 'react';
+
 import classNames from 'classnames';
+
 import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Orientation, Theme } from '@lumx/react';
 import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { NavigationSection } from './NavigationSection';
 import { NavigationItem } from './NavigationItem';
 import { NavigationContext } from './context';
@@ -12,7 +16,7 @@ export type NavigationProps = React.ComponentProps<'nav'> &
     HasClassName &
     HasTheme & {
         /** Content of the navigation. These components should be of type NavigationItem to be rendered */
-        children?: ReactNode;
+        children?: React.ReactNode;
         orientation?: Orientation;
     } & HasAriaLabelOrLabelledBy;
 
@@ -33,38 +37,39 @@ const DEFAULT_PROPS = {
     orientation: Orientation.vertical,
 };
 
-export const Navigation = Object.assign(
-    // eslint-disable-next-line react/display-name
-    forwardRef<HTMLElement, NavigationProps>((props, ref) => {
-        const defaultTheme = useTheme() || Theme.light;
-        const { children, className, theme = defaultTheme, orientation, ...forwardedProps } = props;
-        return (
-            <ThemeProvider value={theme}>
-                <nav
-                    className={classNames(
-                        className,
-                        handleBasicClasses({
-                            prefix: CLASSNAME,
-                            theme,
-                            orientation,
-                        }),
-                    )}
-                    ref={ref}
-                    {...forwardedProps}
-                >
-                    <NavigationContext.Provider value={{ orientation }}>
-                        <ul className={`${CLASSNAME}__list`}>{children}</ul>
-                    </NavigationContext.Provider>
-                </nav>
-            </ThemeProvider>
-        );
-    }),
-    {
-        displayName: COMPONENT_NAME,
-        className: CLASSNAME,
-        defaultProps: DEFAULT_PROPS,
-        // Sub components
-        Section: NavigationSection,
-        Item: NavigationItem,
-    },
-);
+type SubComponents = {
+    Section: typeof NavigationSection;
+    Item: typeof NavigationItem;
+};
+
+export const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, theme = defaultTheme, orientation, ...forwardedProps } = props;
+    return (
+        <ThemeProvider value={theme}>
+            <nav
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                        theme,
+                        orientation,
+                    }),
+                )}
+                ref={ref}
+                {...forwardedProps}
+            >
+                <NavigationContext.Provider value={{ orientation }}>
+                    <ul className={`${CLASSNAME}__list`}>{children}</ul>
+                </NavigationContext.Provider>
+            </nav>
+        </ThemeProvider>
+    );
+});
+Navigation.displayName = COMPONENT_NAME;
+Navigation.className = CLASSNAME;
+Navigation.defaultProps = DEFAULT_PROPS;
+
+// Sub components
+Navigation.Section = NavigationSection;
+Navigation.Item = NavigationItem;
diff --git a/packages/lumx-react/src/components/navigation/NavigationItem.tsx b/packages/lumx-react/src/components/navigation/NavigationItem.tsx
index f569f6190d..a805aa3117 100644
--- a/packages/lumx-react/src/components/navigation/NavigationItem.tsx
+++ b/packages/lumx-react/src/components/navigation/NavigationItem.tsx
@@ -3,7 +3,7 @@ import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
-import { forwardRefPolymorphic } from '@lumx/react/utils/forwardRefPolymorphic';
+import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 
diff --git a/packages/lumx-react/src/components/navigation/NavigationSection.tsx b/packages/lumx-react/src/components/navigation/NavigationSection.tsx
index f02adbe30b..251c8ff182 100644
--- a/packages/lumx-react/src/components/navigation/NavigationSection.tsx
+++ b/packages/lumx-react/src/components/navigation/NavigationSection.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, useRef, useState, useContext } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
@@ -7,17 +7,18 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { HasClassName } from '@lumx/react/utils/type';
 import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
 export interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {
     /** Items inside the section */
-    children: ReactNode;
+    children: React.ReactNode;
     /** Icon (SVG path). */
     icon?: string;
     /** Label content. */
-    label: string | ReactNode;
+    label: string | React.ReactNode;
 }
 
 /**
@@ -30,81 +31,77 @@ const COMPONENT_NAME = 'NavigationSection';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
-export const NavigationSection = Object.assign(
-    forwardRef<HTMLLIElement, NavigationSectionProps>((props, ref) => {
-        const { children, className, label, icon, ...forwardedProps } = props;
-        const [isOpen, setIsOpen] = useState(false);
-        const buttonRef = useRef<HTMLButtonElement>(null);
-        const sectionId = useId();
-        const { orientation } = useContext(NavigationContext) || {};
-        const theme = useTheme();
-        const isDropdown = orientation === Orientation.horizontal;
-        return (
-            <li
-                className={classNames(
-                    className,
-                    CLASSNAME,
-                    ITEM_CLASSNAME,
-                    handleBasicClasses({
-                        prefix: ITEM_CLASSNAME,
-                        theme,
-                    }),
-                )}
-                ref={ref}
+export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {
+    const { children, className, label, icon, ...forwardedProps } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const sectionId = useId();
+    const { orientation } = useContext(NavigationContext) || {};
+    const theme = useTheme();
+    const isDropdown = orientation === Orientation.horizontal;
+    return (
+        <li
+            className={classNames(
+                className,
+                CLASSNAME,
+                ITEM_CLASSNAME,
+                handleBasicClasses({
+                    prefix: ITEM_CLASSNAME,
+                    theme,
+                }),
+            )}
+            ref={ref}
+        >
+            <button
+                {...forwardedProps}
+                aria-controls={sectionId}
+                aria-expanded={isOpen}
+                className={classNames(`${ITEM_CLASSNAME}__link`)}
+                ref={buttonRef}
+                onClick={(event) => {
+                    setIsOpen(!isOpen);
+                    event.stopPropagation();
+                }}
+                type="button"
             >
-                <button
-                    {...forwardedProps}
-                    aria-controls={sectionId}
-                    aria-expanded={isOpen}
-                    className={classNames(`${ITEM_CLASSNAME}__link`)}
-                    ref={buttonRef}
-                    onClick={(event) => {
-                        setIsOpen(!isOpen);
-                        event.stopPropagation();
-                    }}
-                    type="button"
-                >
-                    {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
+                {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
 
-                    <Text as="span" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>
-                        {label}
-                    </Text>
-                    <Icon
-                        className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
-                        icon={isOpen ? mdiChevronUp : mdiChevronDown}
-                    />
-                </button>
-                {isOpen &&
-                    (isDropdown ? (
-                        <Popover
-                            anchorRef={buttonRef}
-                            isOpen={isOpen}
-                            placement={Placement.BOTTOM_START}
-                            usePortal={false}
-                            closeOnClickAway
-                            closeOnEscape
-                            onClick={() => setIsOpen(false)}
-                            onClose={() => setIsOpen(false)}
-                            zIndex={996}
-                        >
-                            <ThemeProvider value={Theme.light}>
-                                <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
-                                    <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
-                                        {children}
-                                    </NavigationContext.Provider>
-                                </ul>
-                            </ThemeProvider>
-                        </Popover>
-                    ) : (
-                        <ul className={`${CLASSNAME}__drawer`} id={sectionId}>
-                            {children}
-                        </ul>
-                    ))}
-            </li>
-        );
-    }),
-    {
-        displayName: COMPONENT_NAME,
-        className: CLASSNAME,
-    },
-);
+                <Text as="span" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>
+                    {label}
+                </Text>
+                <Icon
+                    className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
+                    icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                />
+            </button>
+            {isOpen &&
+                (isDropdown ? (
+                    <Popover
+                        anchorRef={buttonRef}
+                        isOpen={isOpen}
+                        placement={Placement.BOTTOM_START}
+                        usePortal={false}
+                        closeOnClickAway
+                        closeOnEscape
+                        onClick={() => setIsOpen(false)}
+                        onClose={() => setIsOpen(false)}
+                        zIndex={996}
+                    >
+                        <ThemeProvider value={Theme.light}>
+                            <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
+                                <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
+                                    {children}
+                                </NavigationContext.Provider>
+                            </ul>
+                        </ThemeProvider>
+                    </Popover>
+                ) : (
+                    <ul className={`${CLASSNAME}__drawer`} id={sectionId}>
+                        {children}
+                    </ul>
+                ))}
+        </li>
+    );
+});
+NavigationSection.displayName = COMPONENT_NAME;
+NavigationSection.className = CLASSNAME;
diff --git a/packages/lumx-react/src/components/notification/Notification.tsx b/packages/lumx-react/src/components/notification/Notification.tsx
index 789a181dda..4526a2abcf 100644
--- a/packages/lumx-react/src/components/notification/Notification.tsx
+++ b/packages/lumx-react/src/components/notification/Notification.tsx
@@ -1,20 +1,18 @@
-import React, { forwardRef, useRef } from 'react';
+import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
-
 import isFunction from 'lodash/isFunction';
 
 import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
-
 import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/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 { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 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.
@@ -64,7 +62,7 @@ const DEFAULT_PROPS: Partial<NotificationProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Notification = forwardRef<NotificationProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         actionLabel,
diff --git a/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx b/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx
index 8dbf6d5a27..ce1cd428fc 100644
--- a/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx
+++ b/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx
@@ -1,8 +1,10 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
+
 import classNames from 'classnames';
 
-import { Comp, HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
+import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Popover, PopoverProps } from '../popover/Popover';
 
@@ -34,7 +36,7 @@ const DEFAULT_PROPS: Partial<PopoverDialogProps> = {};
  * * Sets a focus trap within the popover
  * * Closes on click away and escape.
  */
-export const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const PopoverDialog = forwardRef<PopoverDialogProps, HTMLDivElement>((props, ref) => {
     const {
         children,
         isOpen,
diff --git a/packages/lumx-react/src/components/popover/Popover.tsx b/packages/lumx-react/src/components/popover/Popover.tsx
index ec1d8a6846..e1c819287a 100644
--- a/packages/lumx-react/src/components/popover/Popover.tsx
+++ b/packages/lumx-react/src/components/popover/Popover.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, RefObject, useRef } from 'react';
+import React, { ReactNode, RefObject, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -12,6 +12,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { skipRender } from '@lumx/react/utils/skipRender';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
 import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
@@ -98,7 +99,7 @@ const renderPopover = (children: ReactNode, usePortal?: boolean): any => {
 };
 
 // Inner component (must be wrapped before export)
-const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref) => {
+const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
     const {
         anchorRef,
         as: Component = 'div',
diff --git a/packages/lumx-react/src/components/post-block/PostBlock.tsx b/packages/lumx-react/src/components/post-block/PostBlock.tsx
index ec01072904..430e0dad86 100644
--- a/packages/lumx-react/src/components/post-block/PostBlock.tsx
+++ b/packages/lumx-react/src/components/post-block/PostBlock.tsx
@@ -1,14 +1,13 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
-
 import isObject from 'lodash/isObject';
 
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } 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.
@@ -60,7 +59,7 @@ const DEFAULT_PROPS: Partial<PostBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
@@ -89,7 +88,6 @@ export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props
                     <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />
                 </div>
             )}
-
             <div className={`${CLASSNAME}__wrapper`}>
                 {author && <div className={`${CLASSNAME}__author`}>{author}</div>}
 
diff --git a/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx b/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx
index eaad7d8462..d727d14c0c 100644
--- a/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx
+++ b/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx
@@ -1,10 +1,12 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 import { useTabProviderContextState } from '../tabs/state';
 
@@ -42,7 +44,7 @@ const DEFAULT_PROPS: Partial<ProgressTrackerProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTracker: Comp<ProgressTrackerProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ProgressTracker = forwardRef<ProgressTrackerProps, HTMLDivElement>((props, ref) => {
     const { 'aria-label': ariaLabel, children, className, ...forwardedProps } = props;
     const stepListRef = React.useRef(null);
     useRovingTabIndex({
diff --git a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStep.tsx b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStep.tsx
index ba8a8b1eb3..55520aec5c 100644
--- a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStep.tsx
+++ b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStep.tsx
@@ -1,13 +1,13 @@
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, useCallback } from 'react';
+import React, { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';
 
 import classNames from 'classnames';
 
+import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { Icon, InputHelper, InputLabel, Kind, Size } 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
-import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { useTabProviderContext } from '../tabs/state';
 
 /**
@@ -56,7 +56,7 @@ const DEFAULT_PROPS: Partial<ProgressTrackerStepProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTrackerStep: Comp<ProgressTrackerStepProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const ProgressTrackerStep = forwardRef<ProgressTrackerStepProps, HTMLButtonElement>((props, ref) => {
     const {
         className,
         disabled,
diff --git a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStepPanel.tsx b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStepPanel.tsx
index ac87996c3c..0096380fa1 100644
--- a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStepPanel.tsx
+++ b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStepPanel.tsx
@@ -1,10 +1,12 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
-
-import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -40,28 +42,26 @@ const DEFAULT_PROPS: Partial<ProgressTrackerStepPanelProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTrackerStepPanel: Comp<ProgressTrackerStepPanelProps, HTMLDivElement> = forwardRef(
-    (props, ref) => {
-        const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
+export const ProgressTrackerStepPanel = forwardRef<ProgressTrackerStepPanelProps, HTMLDivElement>((props, ref) => {
+    const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
 
-        const state = useTabProviderContext('tabPanel', id);
-        const isActive = propIsActive || state?.isActive;
+    const state = useTabProviderContext('tabPanel', id);
+    const isActive = propIsActive || state?.isActive;
 
-        return (
-            <div
-                ref={ref}
-                {...forwardedProps}
-                id={state?.tabPanelId}
-                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
-                role="tabpanel"
-                tabIndex={isActive ? 0 : -1}
-                aria-labelledby={state?.tabId}
-            >
-                {(!state?.isLazy || isActive) && children}
-            </div>
-        );
-    },
-);
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            id={state?.tabPanelId}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
+            role="tabpanel"
+            tabIndex={isActive ? 0 : -1}
+            aria-labelledby={state?.tabId}
+        >
+            {(!state?.isLazy || isActive) && children}
+        </div>
+    );
+});
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
 ProgressTrackerStepPanel.className = CLASSNAME;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;
diff --git a/packages/lumx-react/src/components/progress/Progress.tsx b/packages/lumx-react/src/components/progress/Progress.tsx
index 69f7eba414..193b0394f0 100644
--- a/packages/lumx-react/src/components/progress/Progress.tsx
+++ b/packages/lumx-react/src/components/progress/Progress.tsx
@@ -1,12 +1,13 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme } 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';
+
 import { ProgressLinear } from './ProgressLinear';
 import { ProgressCircular } from './ProgressCircular';
 
@@ -49,7 +50,7 @@ const DEFAULT_PROPS: Partial<ProgressProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Progress: Comp<ProgressProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Progress = forwardRef<ProgressProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { className, theme = defaultTheme, variant, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/progress/ProgressCircular.tsx b/packages/lumx-react/src/components/progress/ProgressCircular.tsx
index 7352a234a5..eabdbda354 100644
--- a/packages/lumx-react/src/components/progress/ProgressCircular.tsx
+++ b/packages/lumx-react/src/components/progress/ProgressCircular.tsx
@@ -1,12 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme, Size } 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';
 
 /**
  * Progress sizes.
@@ -45,7 +45,7 @@ const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressCircular: Comp<ProgressCircularProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ProgressCircular = forwardRef<ProgressCircularProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { className, theme = defaultTheme, size, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/progress/ProgressLinear.tsx b/packages/lumx-react/src/components/progress/ProgressLinear.tsx
index b13ac9e97d..aec7ee8d9b 100644
--- a/packages/lumx-react/src/components/progress/ProgressLinear.tsx
+++ b/packages/lumx-react/src/components/progress/ProgressLinear.tsx
@@ -1,12 +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';
 
 export interface ProgressLinearProps extends GenericProps, HasTheme {}
 
@@ -32,7 +32,7 @@ const DEFAULT_PROPS: Partial<ProgressLinearProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressLinear: Comp<ProgressLinearProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ProgressLinear = forwardRef<ProgressLinearProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { className, theme = defaultTheme, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/radio-button/RadioButton.tsx b/packages/lumx-react/src/components/radio-button/RadioButton.tsx
index 924c911afa..cbe664ccbe 100644
--- a/packages/lumx-react/src/components/radio-button/RadioButton.tsx
+++ b/packages/lumx-react/src/components/radio-button/RadioButton.tsx
@@ -1,13 +1,13 @@
-import React, { forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
+import React, { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -57,7 +57,7 @@ const DEFAULT_PROPS: Partial<RadioButtonProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
diff --git a/packages/lumx-react/src/components/radio-button/RadioGroup.tsx b/packages/lumx-react/src/components/radio-button/RadioGroup.tsx
index 1f14374ebd..f3e0a513cd 100644
--- a/packages/lumx-react/src/components/radio-button/RadioGroup.tsx
+++ b/packages/lumx-react/src/components/radio-button/RadioGroup.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -30,7 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/select/Select.tsx b/packages/lumx-react/src/components/select/Select.tsx
index 7f47636bdd..9ff06e3556 100644
--- a/packages/lumx-react/src/components/select/Select.tsx
+++ b/packages/lumx-react/src/components/select/Select.tsx
@@ -1,19 +1,17 @@
-import React, { forwardRef, RefObject } from 'react';
+import React, { RefObject } from 'react';
 
 import classNames from 'classnames';
 import lodashIsEmpty from 'lodash/isEmpty';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-
 import { Emphasis, Size, Theme } from '@lumx/react/components';
 import { IconButton } from '@lumx/react/components/button/IconButton';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
-
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { WithSelectContext } from './WithSelectContext';
@@ -171,7 +169,7 @@ const SelectField: React.FC<SelectProps> = (props) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Select: Comp<SelectProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {
     const isEmpty = lodashIsEmpty(props.value);
     const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
 
diff --git a/packages/lumx-react/src/components/select/SelectMultiple.tsx b/packages/lumx-react/src/components/select/SelectMultiple.tsx
index bdb61a0ec7..add1720efe 100644
--- a/packages/lumx-react/src/components/select/SelectMultiple.tsx
+++ b/packages/lumx-react/src/components/select/SelectMultiple.tsx
@@ -1,18 +1,16 @@
-import React, { forwardRef, ReactNode, RefObject, SyntheticEvent } from 'react';
+import React, { ReactNode, RefObject, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-
 import { Size, Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
-
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -183,7 +181,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = (props) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SelectMultiple: Comp<SelectMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SelectMultiple = forwardRef<SelectMultipleProps, HTMLDivElement>((props, ref) => {
     return WithSelectContext(
         SelectMultipleField,
         {
diff --git a/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx b/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx
index 2278e874f9..515c47c6fb 100644
--- a/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx
+++ b/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx
@@ -1,12 +1,12 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -33,7 +33,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SideNavigation: Comp<SideNavigationProps, HTMLUListElement> = forwardRef((props, ref) => {
+export const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>((props, ref) => {
     const defaultTheme = useTheme();
     const { children, className, theme = defaultTheme, ...forwardedProps } = props;
     const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
diff --git a/packages/lumx-react/src/components/side-navigation/SideNavigationItem.tsx b/packages/lumx-react/src/components/side-navigation/SideNavigationItem.tsx
index 27f3c6c3cd..25b44477d5 100644
--- a/packages/lumx-react/src/components/side-navigation/SideNavigationItem.tsx
+++ b/packages/lumx-react/src/components/side-navigation/SideNavigationItem.tsx
@@ -1,17 +1,16 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
-
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
-
-import { Comp, GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 import { renderButtonOrLink } from '@lumx/react/utils/renderButtonOrLink';
 import { useId } from '@lumx/react/hooks/useId';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -67,7 +66,7 @@ const DEFAULT_PROPS: Partial<SideNavigationItemProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElement>((props, ref) => {
     const {
         children,
         className,
diff --git a/packages/lumx-react/src/components/skeleton/SkeletonCircle.tsx b/packages/lumx-react/src/components/skeleton/SkeletonCircle.tsx
index 94e3bd7acf..a9bbb88435 100644
--- a/packages/lumx-react/src/components/skeleton/SkeletonCircle.tsx
+++ b/packages/lumx-react/src/components/skeleton/SkeletonCircle.tsx
@@ -1,10 +1,12 @@
+import React from 'react';
+
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -35,7 +37,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SkeletonCircle = forwardRef<SkeletonCircleProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/skeleton/SkeletonRectangle.tsx b/packages/lumx-react/src/components/skeleton/SkeletonRectangle.tsx
index f6b2fc3543..0c4bf70f61 100644
--- a/packages/lumx-react/src/components/skeleton/SkeletonRectangle.tsx
+++ b/packages/lumx-react/src/components/skeleton/SkeletonRectangle.tsx
@@ -1,10 +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.
@@ -49,7 +51,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { aspectRatio, className, height, theme = defaultTheme, variant, width, color, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/skeleton/SkeletonTypography.tsx b/packages/lumx-react/src/components/skeleton/SkeletonTypography.tsx
index 5be8ccedb3..2959d14ee9 100644
--- a/packages/lumx-react/src/components/skeleton/SkeletonTypography.tsx
+++ b/packages/lumx-react/src/components/skeleton/SkeletonTypography.tsx
@@ -1,10 +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.
@@ -37,7 +39,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SkeletonTypography = forwardRef<SkeletonTypographyProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/slider/Slider.tsx b/packages/lumx-react/src/components/slider/Slider.tsx
index 775ae03985..fcc5daf5bc 100644
--- a/packages/lumx-react/src/components/slider/Slider.tsx
+++ b/packages/lumx-react/src/components/slider/Slider.tsx
@@ -1,17 +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.
@@ -91,7 +90,7 @@ 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,
diff --git a/packages/lumx-react/src/components/slideshow/Slides.tsx b/packages/lumx-react/src/components/slideshow/Slides.tsx
index 29e4060de5..fa69a3f5b4 100644
--- a/packages/lumx-react/src/components/slideshow/Slides.tsx
+++ b/packages/lumx-react/src/components/slideshow/Slides.tsx
@@ -1,12 +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 {
@@ -54,7 +56,7 @@ 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,
diff --git a/packages/lumx-react/src/components/slideshow/Slideshow.tsx b/packages/lumx-react/src/components/slideshow/Slideshow.tsx
index cdc4db0754..58575cb4f1 100644
--- a/packages/lumx-react/src/components/slideshow/Slideshow.tsx
+++ b/packages/lumx-react/src/components/slideshow/Slideshow.tsx
@@ -1,11 +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';
 
 /**
@@ -51,7 +53,7 @@ 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,
diff --git a/packages/lumx-react/src/components/slideshow/SlideshowControls.tsx b/packages/lumx-react/src/components/slideshow/SlideshowControls.tsx
index fd9a1aab1a..e5bc44e277 100644
--- a/packages/lumx-react/src/components/slideshow/SlideshowControls.tsx
+++ b/packages/lumx-react/src/components/slideshow/SlideshowControls.tsx
@@ -1,15 +1,16 @@
-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';
@@ -80,7 +81,7 @@ 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,
diff --git a/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx b/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx
index 2b7c52afa6..c763e25859 100644
--- a/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx
+++ b/packages/lumx-react/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
diff --git a/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx b/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx
index 2841b364ed..82206d3970 100644
--- a/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx
+++ b/packages/lumx-react/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);
 
diff --git a/packages/lumx-react/src/components/switch/Switch.tsx b/packages/lumx-react/src/components/switch/Switch.tsx
index 2420b5eb7b..52b4e6ef18 100644
--- a/packages/lumx-react/src/components/switch/Switch.tsx
+++ b/packages/lumx-react/src/components/switch/Switch.tsx
@@ -1,15 +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.
@@ -57,7 +56,7 @@ 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,
diff --git a/packages/lumx-react/src/components/table/Table.tsx b/packages/lumx-react/src/components/table/Table.tsx
index 667a31fbfd..4b63a9da4d 100644
--- a/packages/lumx-react/src/components/table/Table.tsx
+++ b/packages/lumx-react/src/components/table/Table.tsx
@@ -1,12 +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.
@@ -40,7 +40,7 @@ const DEFAULT_PROPS: Partial<TableProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {
+export const Table = forwardRef<TableProps, HTMLTableElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { children, className, hasBefore, hasDividers, theme = defaultTheme, ...forwardedProps } = props;
 
diff --git a/packages/lumx-react/src/components/table/TableBody.tsx b/packages/lumx-react/src/components/table/TableBody.tsx
index bdb2e2ea33..646a5ed43b 100644
--- a/packages/lumx-react/src/components/table/TableBody.tsx
+++ b/packages/lumx-react/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 (
diff --git a/packages/lumx-react/src/components/table/TableCell.tsx b/packages/lumx-react/src/components/table/TableCell.tsx
index 345cf902fb..4fc464a61e 100644
--- a/packages/lumx-react/src/components/table/TableCell.tsx
+++ b/packages/lumx-react/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
diff --git a/packages/lumx-react/src/components/table/TableHeader.tsx b/packages/lumx-react/src/components/table/TableHeader.tsx
index 6a4a5e9fd7..6161a12d27 100644
--- a/packages/lumx-react/src/components/table/TableHeader.tsx
+++ b/packages/lumx-react/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 (
diff --git a/packages/lumx-react/src/components/table/TableRow.tsx b/packages/lumx-react/src/components/table/TableRow.tsx
index 5d15d3c7d7..7d87ca6732 100644
--- a/packages/lumx-react/src/components/table/TableRow.tsx
+++ b/packages/lumx-react/src/components/table/TableRow.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.
@@ -39,7 +40,7 @@ const DEFAULT_PROPS: Partial<TableRowProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableRow: Comp<TableRowProps, HTMLTableRowElement> = forwardRef((props, ref) => {
+export const TableRow = forwardRef<TableRowProps, HTMLTableRowElement>((props, ref) => {
     const { children, className, disabled, isClickable, isDisabled = disabled, isSelected, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/tabs/Tab.tsx b/packages/lumx-react/src/components/tabs/Tab.tsx
index 70d61d30e1..5331e4e3bd 100644
--- a/packages/lumx-react/src/components/tabs/Tab.tsx
+++ b/packages/lumx-react/src/components/tabs/Tab.tsx
@@ -1,11 +1,12 @@
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import React, { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
 
 import classNames from 'classnames';
 
 import { Icon, IconProps, Size, Text } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTabProviderContext } from './state';
 
@@ -53,7 +54,7 @@ const DEFAULT_PROPS: Partial<TabProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {
     const {
         className,
         disabled,
diff --git a/packages/lumx-react/src/components/tabs/TabList.tsx b/packages/lumx-react/src/components/tabs/TabList.tsx
index 3c2d58e7c0..17c90a31d1 100644
--- a/packages/lumx-react/src/components/tabs/TabList.tsx
+++ b/packages/lumx-react/src/components/tabs/TabList.tsx
@@ -1,12 +1,15 @@
+import React, { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { Alignment, 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 { mergeRefs } from '@lumx/react/utils/mergeRefs';
-
-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';
+
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 
 export enum TabListLayout {
@@ -55,7 +58,7 @@ const DEFAULT_PROPS: Partial<TabListProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TabList: Comp<TabListProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         'aria-label': ariaLabel,
diff --git a/packages/lumx-react/src/components/tabs/TabPanel.tsx b/packages/lumx-react/src/components/tabs/TabPanel.tsx
index f9ff8ed20d..780d271c13 100644
--- a/packages/lumx-react/src/components/tabs/TabPanel.tsx
+++ b/packages/lumx-react/src/components/tabs/TabPanel.tsx
@@ -1,11 +1,13 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 
-import classNames from 'classnames';
-import React, { forwardRef } from 'react';
-
 /**
  * Defines the props of the component.
  */
@@ -40,7 +42,7 @@ const DEFAULT_PROPS: Partial<TabPanelProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TabPanel: Comp<TabPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TabPanel = forwardRef<TabPanelProps, HTMLDivElement>((props, ref) => {
     const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
 
     const state = useTabProviderContext('tabPanel', id);
diff --git a/packages/lumx-react/src/components/text-field/TextField.tsx b/packages/lumx-react/src/components/text-field/TextField.tsx
index f7cd15de54..a89026deee 100644
--- a/packages/lumx-react/src/components/text-field/TextField.tsx
+++ b/packages/lumx-react/src/components/text-field/TextField.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';
@@ -16,11 +16,12 @@ import {
     Size,
     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 { mergeRefs } from '@lumx/react/utils/mergeRefs';
 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.
@@ -254,7 +255,7 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         chips,
diff --git a/packages/lumx-react/src/components/text/Text.tsx b/packages/lumx-react/src/components/text/Text.tsx
index 08ffdfbb50..0b3cf767cf 100644
--- a/packages/lumx-react/src/components/text/Text.tsx
+++ b/packages/lumx-react/src/components/text/Text.tsx
@@ -1,16 +1,18 @@
-import React, { Children, Fragment, forwardRef } from 'react';
+import React, { Children, Fragment } from 'react';
+
+import classNames from 'classnames';
 
 import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
-import { Comp, GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
 import {
     getFontColorClassName,
     getRootClassName,
     handleBasicClasses,
     getTypographyClassName,
 } from '@lumx/react/utils/className';
-import classNames from 'classnames';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -73,7 +75,7 @@ const DEFAULT_PROPS = {} as const;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Text: Comp<TextProps> = forwardRef((props, ref) => {
+export const Text = forwardRef<TextProps>((props, ref) => {
     const {
         as: Component,
         children,
diff --git a/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx b/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
index 3f2be131b3..0d2e6b567c 100644
--- a/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
+++ b/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
@@ -1,6 +1,5 @@
 import React, {
     CSSProperties,
-    forwardRef,
     ImgHTMLAttributes,
     KeyboardEventHandler,
     MouseEventHandler,
@@ -9,18 +8,19 @@ import React, {
     Ref,
     useState,
 } from 'react';
+
 import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
-
-import { Comp, Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
 import { mdiImageBroken } from '@lumx/icons';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
 import { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -98,7 +98,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
+export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         align,
diff --git a/packages/lumx-react/src/components/toolbar/Toolbar.tsx b/packages/lumx-react/src/components/toolbar/Toolbar.tsx
index 08a7fc460b..fe051d0084 100644
--- a/packages/lumx-react/src/components/toolbar/Toolbar.tsx
+++ b/packages/lumx-react/src/components/toolbar/Toolbar.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -39,7 +40,7 @@ const DEFAULT_PROPS: Partial<ToolbarProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Toolbar: Comp<ToolbarProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Toolbar = forwardRef<ToolbarProps, HTMLDivElement>((props, ref) => {
     const { after, before, className, label, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.tsx
index 96db0eabb0..8553361e48 100644
--- a/packages/lumx-react/src/components/tooltip/Tooltip.tsx
+++ b/packages/lumx-react/src/components/tooltip/Tooltip.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { forwardRef, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
 import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
-import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
+import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
 import { useId } from '@lumx/react/hooks/useId';
 import { usePopper } from '@lumx/react/hooks/usePopper';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';
 import { useInjectTooltipRef } from './useInjectTooltipRef';
@@ -70,7 +71,7 @@ const ARROW_SIZE = 8;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) => {
     const {
         label,
         children,
diff --git a/packages/lumx-react/src/components/uploader/Uploader.tsx b/packages/lumx-react/src/components/uploader/Uploader.tsx
index ea5d77c2cc..884218823d 100644
--- a/packages/lumx-react/src/components/uploader/Uploader.tsx
+++ b/packages/lumx-react/src/components/uploader/Uploader.tsx
@@ -1,12 +1,14 @@
-import React, { forwardRef, MouseEventHandler } from 'react';
+import React, { MouseEventHandler } from 'react';
+
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } 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 { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Uploader variants.
@@ -76,7 +78,7 @@ const DEFAULT_PROPS: Partial<UploaderProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Uploader: Comp<UploaderProps> = forwardRef((props, ref) => {
+export const Uploader = forwardRef<UploaderProps>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         aspectRatio,
diff --git a/packages/lumx-react/src/components/user-block/UserBlock.tsx b/packages/lumx-react/src/components/user-block/UserBlock.tsx
index efd4720c4e..56a8edb472 100644
--- a/packages/lumx-react/src/components/user-block/UserBlock.tsx
+++ b/packages/lumx-react/src/components/user-block/UserBlock.tsx
@@ -1,11 +1,13 @@
-import React, { forwardRef, ReactNode } from 'react';
-import isEmpty from 'lodash/isEmpty';
+import React, { ReactNode } from 'react';
+
 import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
 import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { AvatarProps } from '../avatar/Avatar';
@@ -72,7 +74,7 @@ const DEFAULT_PROPS: Partial<UserBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         avatarProps,
diff --git a/packages/lumx-react/src/utils/forwardRefPolymorphic.ts b/packages/lumx-react/src/utils/forwardRefPolymorphic.ts
deleted file mode 100644
index fbde9e0482..0000000000
--- a/packages/lumx-react/src/utils/forwardRefPolymorphic.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { ElementType } from 'react';
-import { ComponentRef } from '@lumx/react/utils/type';
-
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-export function forwardRefPolymorphic<E extends ElementType, P extends { as?: E }>(
-    render: (props: P, ref: ComponentRef<E>) => React.ReactElement | null,
-): (props: P & { ref?: ComponentRef<E> }) => React.ReactElement | null {
-    return React.forwardRef(render as any) as any;
-}
diff --git a/packages/lumx-react/src/utils/react/forwardRef.ts b/packages/lumx-react/src/utils/react/forwardRef.ts
new file mode 100644
index 0000000000..7bc5bb2b7c
--- /dev/null
+++ b/packages/lumx-react/src/utils/react/forwardRef.ts
@@ -0,0 +1,11 @@
+import React, { type ReactNode, type ForwardedRef } from 'react';
+import type { Comp } from '../type';
+
+type ForwardRef = <P, T = HTMLElement, A = unknown>(
+    render: (props: P, ref: ForwardedRef<T>) => ReactNode,
+) => Comp<P, T> & A;
+
+/**
+ * React.forwardRef but re-typed to attach some custom metadata on our components.
+ */
+export const forwardRef = React.forwardRef as ForwardRef;
diff --git a/packages/lumx-react/src/utils/react/forwardRefPolymorphic.ts b/packages/lumx-react/src/utils/react/forwardRefPolymorphic.ts
new file mode 100644
index 0000000000..39fa428807
--- /dev/null
+++ b/packages/lumx-react/src/utils/react/forwardRefPolymorphic.ts
@@ -0,0 +1,9 @@
+import React, { type ElementType } from 'react';
+import type { ComponentRef } from '@lumx/react/utils/type';
+
+type ForwardRefPolymorphic = <E extends ElementType, P extends { as?: E }>(
+    render: (props: P, ref: ComponentRef<E>) => React.ReactNode,
+) => (props: P & React.ComponentProps<E> & { ref?: ComponentRef<E> }) => React.JSX.Element;
+
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+export const forwardRefPolymorphic = React.forwardRef as ForwardRefPolymorphic;
diff --git a/packages/yo-generators/generators/component/templates/FunctionalComponent.tsx.ejs b/packages/yo-generators/generators/component/templates/FunctionalComponent.tsx.ejs
index 8a2f00dee4..83ffa14459 100644
--- a/packages/yo-generators/generators/component/templates/FunctionalComponent.tsx.ejs
+++ b/packages/yo-generators/generators/component/templates/FunctionalComponent.tsx.ejs
@@ -1,14 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, 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.
  */
-export interface <%= componentName %>Props extends GenericProps {}
+export interface <%= componentName %>Props {}
 
 /**
  * Component display name.
@@ -28,7 +28,7 @@ const DEFAULT_PROPS: Partial<<%= componentName %>Props> = {};
 /**
  * [Enter the description of the component here].
  */
-export const <%= componentName %>: Comp<<%= componentName %>Props, HTMLDivElement> = forwardRef((props, ref) => {
+export const <%= componentName %> = forwardRef<<%= componentName %>Props, HTMLDivElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (