diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
index 944be0be..b41f0980 100644
--- a/packages/react/src/components/Accordion/Accordion.tsx
+++ b/packages/react/src/components/Accordion/Accordion.tsx
@@ -21,8 +21,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {PaperTypeMap} from '../Paper';
 import './accordion.scss';
 
@@ -33,8 +31,6 @@ export type AccordionProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiAccordionProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Accordion';
-
 /**
  * The Accordion component lets users show and hide sections of related content on a page.
  *
@@ -58,7 +54,7 @@ const COMPONENT_NAME: string = 'Accordion';
  * @param ref - The ref to be forwarded to the MuiAccordion component.
  * @returns The rendered Accordion component.
  */
-const Accordion: OverridableComponent<PaperTypeMap<AccordionProps>> & WithWrapperProps = forwardRef(
+const Accordion: OverridableComponent<PaperTypeMap<AccordionProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: AccordionProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -67,9 +63,6 @@ const Accordion: OverridableComponent<PaperTypeMap<AccordionProps>> & WithWrappe
 
     return <MuiAccordion ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<PaperTypeMap<AccordionProps>> & WithWrapperProps;
-
-Accordion.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Accordion.muiName = COMPONENT_NAME;
+) as OverridableComponent<PaperTypeMap<AccordionProps>>;
 
 export default Accordion;
diff --git a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx
index 36f6668c..0ff9f862 100644
--- a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx
+++ b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx
@@ -21,13 +21,9 @@ import type {AccordionDetailsProps as MuiAccordionDetailsProps} from '@mui/mater
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type AccordionDetailsProps = MuiAccordionDetailsProps;
 
-const COMPONENT_NAME: string = 'AccordionDetails';
-
 /**
  * The Accordion Details component is the wrapper for the Accordion content.
  *
@@ -49,15 +45,12 @@ const COMPONENT_NAME: string = 'AccordionDetails';
  * @param ref - The ref to be forwarded to the MuiAccordionDetails component.
  * @returns The rendered AccordionDetails component.
  */
-const AccordionDetails: ForwardRefExoticComponent<AccordionDetailsProps> & WithWrapperProps = forwardRef(
+const AccordionDetails: ForwardRefExoticComponent<AccordionDetailsProps> = forwardRef(
   ({className, ...rest}: AccordionDetailsProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-accordion-details', className);
 
     return <MuiAccordionDetails ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<AccordionDetailsProps> & WithWrapperProps;
-
-AccordionDetails.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AccordionDetails.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<AccordionDetailsProps>;
 
 export default AccordionDetails;
diff --git a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx
index 0cbe52cc..fddc93ea 100644
--- a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx
+++ b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx
@@ -25,8 +25,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, ElementType, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type AccordionSummaryProps<
   C extends ElementType = ElementType,
@@ -39,8 +37,6 @@ export type AccordionSummaryProps<
   component?: C;
 } & Omit<MuiAccordionSummaryProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'AccordionSummary';
-
 /**
  * The Accordion Summary component is the wrapper for the Accordion header, which expands or collapses the content when clicked.
  *
@@ -64,19 +60,15 @@ const COMPONENT_NAME: string = 'AccordionSummary';
  * @param ref - The ref to be forwarded to the MuiAccordionSummary component.
  * @returns The rendered AccordionSummary component.
  */
-const AccordionSummary: OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>> & WithWrapperProps =
-  forwardRef(
-    <C extends ElementType = ElementType>(
-      {className, ...rest}: AccordionSummaryProps<C>,
-      ref: Ref<HTMLDivElement>,
-    ): ReactElement => {
-      const classes: string = clsx('oxygen-accordion-summary', className);
-
-      return <MuiAccordionSummary ref={ref} className={classes} {...rest} />;
-    },
-  ) as OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>> & WithWrapperProps;
+const AccordionSummary: OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: AccordionSummaryProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-accordion-summary', className);
 
-AccordionSummary.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AccordionSummary.muiName = COMPONENT_NAME;
+    return <MuiAccordionSummary ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>>;
 
 export default AccordionSummary;
diff --git a/packages/react/src/components/AccountOverview/AccountOverview.tsx b/packages/react/src/components/AccountOverview/AccountOverview.tsx
index a72e1f1a..34871360 100644
--- a/packages/react/src/components/AccountOverview/AccountOverview.tsx
+++ b/packages/react/src/components/AccountOverview/AccountOverview.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, ReactNode, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import Card from '../Card';
 import type {CardProps, CardTypeMap} from '../Card';
@@ -73,8 +71,6 @@ export type AccountOverviewProps<
 
 export type AccountCompletionSteps = CarouselStep;
 
-const COMPONENT_NAME: string = 'AccountOverview';
-
 /**
  * The Account Overview component lets you display the progress of the user's account.
  * It includes the user's profile picture, name, email, account progress and account completion steps.
@@ -98,7 +94,7 @@ const COMPONENT_NAME: string = 'AccountOverview';
  * @param ref - The ref to be forwarded to the Card component.
  * @returns The rendered AccountOverview component.
  */
-const AccountOverview: OverridableComponent<CardTypeMap<AccountOverviewProps>> & WithWrapperProps = forwardRef(
+const AccountOverview: OverridableComponent<CardTypeMap<AccountOverviewProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       className,
@@ -139,9 +135,6 @@ const AccountOverview: OverridableComponent<CardTypeMap<AccountOverviewProps>> &
       </Card>
     );
   },
-) as OverridableComponent<CardTypeMap<AccountOverviewProps>> & WithWrapperProps;
-
-AccountOverview.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AccountOverview.muiName = COMPONENT_NAME;
+) as OverridableComponent<CardTypeMap<AccountOverviewProps>>;
 
 export default AccountOverview;
diff --git a/packages/react/src/components/ActionCard/ActionCard.tsx b/packages/react/src/components/ActionCard/ActionCard.tsx
index 5ec9788b..e7dde959 100644
--- a/packages/react/src/components/ActionCard/ActionCard.tsx
+++ b/packages/react/src/components/ActionCard/ActionCard.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, ReactNode, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Button from '../Button';
 import Card from '../Card';
 import type {CardProps, CardTypeMap} from '../Card';
@@ -53,8 +51,6 @@ export type ActionCardProps<C extends ElementType = ElementType> = CardProps<C>
   title: string;
 };
 
-const COMPONENT_NAME: string = 'ActionCard';
-
 /**
  * The Action Card component is an extended version of the `Card` component with an action button.
  *
@@ -77,7 +73,7 @@ const COMPONENT_NAME: string = 'ActionCard';
  * @param ref - The ref to be forwarded to the Card component.
  * @returns The rendered ActionCard component.
  */
-const ActionCard: OverridableComponent<CardTypeMap<ActionCardProps>> & WithWrapperProps = forwardRef(
+const ActionCard: OverridableComponent<CardTypeMap<ActionCardProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, image, title, description, actionText, onActionClick, ...rest}: ActionCardProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -99,9 +95,6 @@ const ActionCard: OverridableComponent<CardTypeMap<ActionCardProps>> & WithWrapp
       </Card>
     );
   },
-) as OverridableComponent<CardTypeMap<ActionCardProps>> & WithWrapperProps;
-
-ActionCard.displayName = composeComponentDisplayName(COMPONENT_NAME);
-ActionCard.muiName = COMPONENT_NAME;
+) as OverridableComponent<CardTypeMap<ActionCardProps>>;
 
 export default ActionCard;
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index 3b2000d0..a78a7f1f 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, ElementType, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {PaperTypeMap} from '../Paper';
 import './alert.scss';
 
@@ -34,8 +32,6 @@ export type AlertProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiAlertProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Alert';
-
 /**
  * The Alert component displays brief messages to the user without interrupting their use of the app.
  *
@@ -59,7 +55,7 @@ const COMPONENT_NAME: string = 'Alert';
  * @param ref - The ref to be forwarded to the MuiAlert component.
  * @returns The rendered Alert component.
  */
-const Alert: OverridableComponent<PaperTypeMap<AlertProps>> & WithWrapperProps = forwardRef(
+const Alert: OverridableComponent<PaperTypeMap<AlertProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: AlertProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -68,9 +64,6 @@ const Alert: OverridableComponent<PaperTypeMap<AlertProps>> & WithWrapperProps =
 
     return <MuiAlert ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<PaperTypeMap<AlertProps>> & WithWrapperProps;
-
-Alert.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Alert.muiName = COMPONENT_NAME;
+) as OverridableComponent<PaperTypeMap<AlertProps>>;
 
 export default Alert;
diff --git a/packages/react/src/components/AlertTitle/AlertTitle.tsx b/packages/react/src/components/AlertTitle/AlertTitle.tsx
index d6436ed8..da223461 100644
--- a/packages/react/src/components/AlertTitle/AlertTitle.tsx
+++ b/packages/react/src/components/AlertTitle/AlertTitle.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, ElementType, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {TypographyTypeMap} from '../Typography';
 import './alert-title.scss';
 
@@ -34,8 +32,6 @@ export type AlertProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiAlertTitleProps, 'component'>;
 
-const COMPONENT_NAME: string = 'AlertTitle';
-
 /**
  * The Alert Title component can be used to display a title for the Alert component.
  *
@@ -59,7 +55,7 @@ const COMPONENT_NAME: string = 'AlertTitle';
  * @param ref - The ref to be forwarded to the MuiAlertTitle component.
  * @returns The rendered AlertTitle component.
  */
-const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> & WithWrapperProps = forwardRef(
+const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: AlertProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -68,9 +64,6 @@ const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> & Wit
 
     return <MuiAlertTitle ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<TypographyTypeMap<AlertTitleProps>> & WithWrapperProps;
-
-AlertTitle.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AlertTitle.muiName = COMPONENT_NAME;
+) as OverridableComponent<TypographyTypeMap<AlertTitleProps>>;
 
 export default AlertTitle;
diff --git a/packages/react/src/components/AppBar/AppBar.tsx b/packages/react/src/components/AppBar/AppBar.tsx
index 91c22497..fba2f9f7 100644
--- a/packages/react/src/components/AppBar/AppBar.tsx
+++ b/packages/react/src/components/AppBar/AppBar.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './app-bar.scss';
 
 export type AppBarProps<
@@ -37,8 +35,6 @@ export type AppBarProps<
   component?: C;
 } & Omit<MuiAppBarProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'AppBar';
-
 /**
  * The App Bar component displays information and actions relating to the current screen.
  *
@@ -62,7 +58,7 @@ const COMPONENT_NAME: string = 'AppBar';
  * @param ref - The ref to be forwarded to the MuiAppBar component.
  * @returns The rendered AppBar component.
  */
-const AppBar: OverridableComponent<AppBarTypeMap<AppBarProps>> & WithWrapperProps = forwardRef(
+const AppBar: OverridableComponent<AppBarTypeMap<AppBarProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: AppBarProps<C>,
     ref: Ref<HTMLHeadingElement>,
@@ -71,9 +67,6 @@ const AppBar: OverridableComponent<AppBarTypeMap<AppBarProps>> & WithWrapperProp
 
     return <MuiAppBar ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<AppBarTypeMap<AppBarProps>> & WithWrapperProps;
-
-AppBar.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AppBar.muiName = COMPONENT_NAME;
+) as OverridableComponent<AppBarTypeMap<AppBarProps>>;
 
 export default AppBar;
diff --git a/packages/react/src/components/AppShell/AppShell.tsx b/packages/react/src/components/AppShell/AppShell.tsx
index 8a6d7196..c70a05b0 100644
--- a/packages/react/src/components/AppShell/AppShell.tsx
+++ b/packages/react/src/components/AppShell/AppShell.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import type {BoxProps, BoxTypeMap} from '../Box';
 import './app-shell.scss';
@@ -41,8 +39,6 @@ export type AppShellProps<C extends ElementType = ElementType> = BoxProps<C> & {
   navigation?: ReactNode;
 };
 
-const COMPONENT_NAME: string = 'AppShell';
-
 /**
  * The App Shell component is a layout component that can be used to create a common Header - Navbar - Footer - Aside - Content layout pattern.
  *
@@ -65,7 +61,7 @@ const COMPONENT_NAME: string = 'AppShell';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered AppShell component.
  */
-const AppShell: OverridableComponent<BoxTypeMap<AppShellProps>> & WithWrapperProps = forwardRef(
+const AppShell: OverridableComponent<BoxTypeMap<AppShellProps>> = forwardRef(
   <C extends ElementType>(
     {className, children, footer, header, navigation, ...rest}: AppShellProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -87,9 +83,6 @@ const AppShell: OverridableComponent<BoxTypeMap<AppShellProps>> & WithWrapperPro
       </Box>
     );
   },
-) as OverridableComponent<BoxTypeMap<AppShellProps>> & WithWrapperProps;
-
-AppShell.displayName = composeComponentDisplayName(COMPONENT_NAME);
-AppShell.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<AppShellProps>>;
 
 export default AppShell;
diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
index a25a9822..735d589b 100644
--- a/packages/react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -21,8 +21,6 @@ import type {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Auto
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {ChipTypeMap} from '../Chip';
 import './autocomplete.scss';
 
@@ -34,8 +32,6 @@ export type AutocompleteProps<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 > = MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>;
 
-const COMPONENT_NAME: string = 'Autocomplete';
-
 /**
  * The Autocomplete is a normal text input enhanced by a panel of suggested options.
  *
@@ -57,15 +53,12 @@ const COMPONENT_NAME: string = 'Autocomplete';
  * @param ref - The ref to be forwarded to the MuiAccordion component.
  * @returns The rendered Accordion component.
  */
-const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<any>> & WithWrapperProps = forwardRef(
+const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<any>> = forwardRef(
   ({className, ...rest}: AutocompleteProps<any>, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-autocomplete', className);
 
     return <MuiAutocomplete className={classes} {...rest} ref={ref} />;
   },
-) as ForwardRefExoticComponent<AutocompleteProps<any>> & WithWrapperProps;
-
-Autocomplete.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Autocomplete.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<AutocompleteProps<any>>;
 
 export default Autocomplete;
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index 28296948..533fca95 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -23,8 +23,6 @@ import clsx from 'clsx';
 import {forwardRef, useMemo} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
 import usePastelColorGenerator from '../../hooks/use-pastel-color-generator';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './avatar.scss';
 
 export type AvatarProps<
@@ -46,8 +44,6 @@ export type AvatarProps<
   randomBackgroundColor?: boolean;
 } & Omit<MuiAvatarProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Avatar';
-
 /**
  * Avatars are found throughout material design with uses in everything from tables to dialog menus.
  *
@@ -70,7 +66,7 @@ const COMPONENT_NAME: string = 'Avatar';
  * @param ref - The ref to be forwarded to the MuiAvatar component.
  * @returns The rendered Avatar component.
  */
-const Avatar: OverridableComponent<AvatarTypeMap<AvatarProps>> & WithWrapperProps = forwardRef(
+const Avatar: OverridableComponent<AvatarTypeMap<AvatarProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, children, randomBackgroundColor, backgroundColorRandomizer, ...rest}: AvatarProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -97,9 +93,6 @@ const Avatar: OverridableComponent<AvatarTypeMap<AvatarProps>> & WithWrapperProp
       </MuiAvatar>
     );
   },
-) as OverridableComponent<AvatarTypeMap<AvatarProps>> & WithWrapperProps;
-
-Avatar.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Avatar.muiName = COMPONENT_NAME;
+) as OverridableComponent<AvatarTypeMap<AvatarProps>>;
 
 export default Avatar;
diff --git a/packages/react/src/components/Backdrop/Backdrop.tsx b/packages/react/src/components/Backdrop/Backdrop.tsx
index 629802ff..31a8eed8 100644
--- a/packages/react/src/components/Backdrop/Backdrop.tsx
+++ b/packages/react/src/components/Backdrop/Backdrop.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './backdrop.scss';
 
 export type BackdropProps<
@@ -37,8 +35,6 @@ export type BackdropProps<
   component?: C;
 } & Omit<MuiBackdropProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Backdrop';
-
 /**
  * The Backdrop component narrows the user's focus to a particular element on the screen.
  *
@@ -62,7 +58,7 @@ const COMPONENT_NAME: string = 'Backdrop';
  * @param ref - The ref to be forwarded to the MuiBackdrop component.
  * @returns The rendered Backdrop component.
  */
-const Backdrop: OverridableComponent<BackdropTypeMap<BackdropProps>> & WithWrapperProps = forwardRef(
+const Backdrop: OverridableComponent<BackdropTypeMap<BackdropProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: BackdropProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -71,9 +67,6 @@ const Backdrop: OverridableComponent<BackdropTypeMap<BackdropProps>> & WithWrapp
 
     return <MuiBackdrop ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<BackdropTypeMap<BackdropProps>> & WithWrapperProps;
-
-Backdrop.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Backdrop.muiName = COMPONENT_NAME;
+) as OverridableComponent<BackdropTypeMap<BackdropProps>>;
 
 export default Backdrop;
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 6ea9f976..dd698340 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './badge.scss';
 
 export type BadgeProps<
@@ -37,8 +35,6 @@ export type BadgeProps<
   component?: C;
 } & Omit<MuiBadgeProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Badge';
-
 /**
  * The Badge component generates a small badge to the top-right of its child(ren).
  *
@@ -63,19 +59,15 @@ const COMPONENT_NAME: string = 'Badge';
  * @param ref - The ref to be forwarded to the MuiBadge component.
  * @returns The rendered Badge component.
  */
-const Badge: OverridableComponent<BadgeTypeMap<BadgeTypeMap['defaultComponent'], BadgeProps>> & WithWrapperProps =
-  forwardRef(
-    <C extends ElementType = ElementType>(
-      {className, ...rest}: BadgeProps<C>,
-      ref: Ref<HTMLSpanElement>,
-    ): ReactElement => {
-      const classes: string = clsx('oxygen-badge', className);
-
-      return <MuiBadge ref={ref} className={classes} {...rest} />;
-    },
-  ) as OverridableComponent<BadgeTypeMap<BadgeTypeMap['defaultComponent'], BadgeProps>> & WithWrapperProps;
+const Badge: OverridableComponent<BadgeTypeMap<BadgeTypeMap['defaultComponent'], BadgeProps>> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: BadgeProps<C>,
+    ref: Ref<HTMLSpanElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-badge', className);
 
-Badge.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Badge.muiName = COMPONENT_NAME;
+    return <MuiBadge ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<BadgeTypeMap<BadgeTypeMap['defaultComponent'], BadgeProps>>;
 
 export default Badge;
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index d2f80265..18bb6f32 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -23,8 +23,6 @@ import type {BoxTypeMap} from '@mui/system/Box';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type BoxProps<
   C extends ElementType = ElementType,
@@ -37,8 +35,6 @@ export type BoxProps<
   component?: C;
 } & Omit<MuiBoxProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Box';
-
 /**
  * The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
  *
@@ -61,15 +57,12 @@ const COMPONENT_NAME: string = 'Box';
  * @param ref - The ref to be forwarded to the MuiBadge component.
  * @returns The rendered Badge component.
  */
-const Box: OverridableComponent<BoxTypeMap<BoxProps>> & WithWrapperProps = forwardRef(
+const Box: OverridableComponent<BoxTypeMap<BoxProps>> = forwardRef(
   <C extends ElementType = ElementType>({className, ...rest}: BoxProps<C>, ref: Ref<HTMLSpanElement>): ReactElement => {
     const classes: string = clsx('oxygen-box', className);
 
     return <MuiBox ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<BoxTypeMap<BoxProps>> & WithWrapperProps;
-
-Box.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Box.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<BoxProps>>;
 
 export default Box;
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
index d69d0d31..a3508fdf 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './breadcrumbs.scss';
 
 export type BreadcrumbsProps<
@@ -37,8 +35,6 @@ export type BreadcrumbsProps<
   component?: C;
 } & Omit<MuiBreadcrumbsProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Breadcrumbs';
-
 /**
  * The Breadcrumbs component is a list of links that help visualize a page's location within
  * a site's hierarchical structure, it allows navigation up to any of the ancestors.
@@ -62,7 +58,7 @@ const COMPONENT_NAME: string = 'Breadcrumbs';
  * @param ref - The ref to be forwarded to the MuiBreadcrumbs component.
  * @returns The rendered Breadcrumbs component.
  */
-const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap<BreadcrumbsProps>> & WithWrapperProps = forwardRef(
+const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap<BreadcrumbsProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, children, ...rest}: BreadcrumbsProps<C>,
     ref: Ref<HTMLSpanElement>,
@@ -75,9 +71,6 @@ const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap<BreadcrumbsProps>> &
       </MuiBreadcrumbs>
     );
   },
-) as OverridableComponent<BreadcrumbsTypeMap<BreadcrumbsProps>> & WithWrapperProps;
-
-Breadcrumbs.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Breadcrumbs.muiName = 'Breadcrumbs';
+) as OverridableComponent<BreadcrumbsTypeMap<BreadcrumbsProps>>;
 
 export default Breadcrumbs;
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 74214983..aa29d33c 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -23,8 +23,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './button.scss';
 
 export type ButtonProps<
@@ -38,8 +36,6 @@ export type ButtonProps<
   component?: C;
 } & Omit<MuiButtonProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Button';
-
 /**
  * The Button component allow users to take actions, and make choices, with a single tap.
  *
@@ -63,7 +59,7 @@ const COMPONENT_NAME: string = 'Button';
  * @param ref - The ref to be forwarded to the MuiButton component.
  * @returns The rendered Button component.
  */
-const Button: OverridableComponent<ButtonTypeMap<ButtonProps>> & WithWrapperProps = forwardRef(
+const Button: OverridableComponent<ButtonTypeMap<ButtonProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: ButtonProps<C>,
     ref: Ref<HTMLButtonElement>,
@@ -72,9 +68,6 @@ const Button: OverridableComponent<ButtonTypeMap<ButtonProps>> & WithWrapperProp
 
     return <MuiButton ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ButtonTypeMap<ButtonProps>> & WithWrapperProps;
-
-Button.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Button.muiName = COMPONENT_NAME;
+) as OverridableComponent<ButtonTypeMap<ButtonProps>>;
 
 export default Button;
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
index bcf4bbb4..27d0274f 100644
--- a/packages/react/src/components/Card/Card.tsx
+++ b/packages/react/src/components/Card/Card.tsx
@@ -18,11 +18,10 @@
 
 import MuiCard from '@mui/material/Card';
 import type {CardProps as MuiCardProps, CardTypeMap} from '@mui/material/Card';
+import {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
-import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
+import type {ElementType, ReactElement, Ref} from 'react';
 import './card.scss';
 
 export type CardProps<
@@ -36,8 +35,6 @@ export type CardProps<
   component?: C;
 } & Omit<MuiCardProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Card';
-
 /**
  * The Card component contain content and actions about a single subject.
  *
@@ -61,20 +58,17 @@ const COMPONENT_NAME: string = 'Card';
  * @param ref - The ref to be forwarded to the MuiCard component.
  * @returns The rendered Card component.
  */
-const Card: ForwardRefExoticComponent<CardProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(
+const Card: OverridableComponent<CardTypeMap<CardProps>> = forwardRef(
+  <C extends ElementType = ElementType>(
     {className, component, onClick, elevation = 0, variant = 'outlined', ...rest}: CardProps<C>,
-    ref: MutableRefObject<HTMLDivElement>,
+    ref: Ref<HTMLDivElement>,
   ): ReactElement => {
     const classes: string = clsx('oxygen-card', {'with-hover': onClick}, className);
 
     return (
-      <MuiCard className={classes} ref={ref} onClick={onClick} elevation={elevation} variant={variant} {...rest} />
+      <MuiCard ref={ref} className={classes} onClick={onClick} elevation={elevation} variant={variant} {...rest} />
     );
   },
-) as ForwardRefExoticComponent<CardProps> & WithWrapperProps;
-
-Card.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Card.muiName = COMPONENT_NAME;
+) as OverridableComponent<CardTypeMap<CardProps>>;
 
 export default Card;
diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx
index 3a0e6897..b150c16a 100644
--- a/packages/react/src/components/CardActions/CardActions.tsx
+++ b/packages/react/src/components/CardActions/CardActions.tsx
@@ -21,14 +21,10 @@ import type {CardActionsProps as MuiCardActionsProps} from '@mui/material/CardAc
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './card-actions.scss';
 
 export type CardActionsProps = MuiCardActionsProps;
 
-const COMPONENT_NAME: string = 'CardActions';
-
 /**
  * The Card Actions component is an optional wrapper that groups a set of buttons.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'CardActions';
  * @param ref - The ref to be forwarded to the MuiCardActions component.
  * @returns The rendered CardActions component.
  */
-const CardActions: ForwardRefExoticComponent<CardActionsProps> & WithWrapperProps = forwardRef(
+const CardActions: ForwardRefExoticComponent<CardActionsProps> = forwardRef(
   ({className, ...rest}: CardActionsProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-card-actions', className);
 
     return <MuiCardActions ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<CardActionsProps> & WithWrapperProps;
-
-CardActions.displayName = composeComponentDisplayName(COMPONENT_NAME);
-CardActions.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<CardActionsProps>;
 
 export default CardActions;
diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx
index 5ff85eda..96af4629 100644
--- a/packages/react/src/components/CardContent/CardContent.tsx
+++ b/packages/react/src/components/CardContent/CardContent.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './card-content.scss';
 
 export type CardContentProps<
@@ -37,8 +35,6 @@ export type CardContentProps<
   component?: C;
 } & Omit<MuiCardContentProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'CardContent';
-
 /**
  * The Card Content component is the wrapper for the Card content.
  *
@@ -61,7 +57,7 @@ const COMPONENT_NAME: string = 'CardContent';
  * @param ref - The ref to be forwarded to the MuiCardContent component.
  * @returns The rendered CardContent component.
  */
-const CardContent: OverridableComponent<CardContentTypeMap<CardContentProps>> & WithWrapperProps = forwardRef(
+const CardContent: OverridableComponent<CardContentTypeMap<CardContentProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: CardContentProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -70,9 +66,6 @@ const CardContent: OverridableComponent<CardContentTypeMap<CardContentProps>> &
 
     return <MuiCardContent ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<CardContentTypeMap<CardContentProps>> & WithWrapperProps;
-
-CardContent.displayName = composeComponentDisplayName(COMPONENT_NAME);
-CardContent.muiName = COMPONENT_NAME;
+) as OverridableComponent<CardContentTypeMap<CardContentProps>>;
 
 export default CardContent;
diff --git a/packages/react/src/components/CardHeader/CardHeader.tsx b/packages/react/src/components/CardHeader/CardHeader.tsx
index d9552a29..e23b6016 100644
--- a/packages/react/src/components/CardHeader/CardHeader.tsx
+++ b/packages/react/src/components/CardHeader/CardHeader.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './card-header.scss';
 
 export type CardHeaderProps<
@@ -39,8 +37,6 @@ export type CardHeaderProps<
   component?: C;
 } & Omit<MuiCardHeaderProps<D, P, T, S>, 'component'>;
 
-const COMPONENT_NAME: string = 'CardHeader';
-
 /**
  * The Card Header component is an optional wrapper for the Card header.
  *
@@ -63,7 +59,7 @@ const COMPONENT_NAME: string = 'CardHeader';
  * @param ref - The ref to be forwarded to the MuiCardHeader component.
  * @returns The rendered CardHeader component.
  */
-const CardHeader: OverridableComponent<CardHeaderTypeMap<CardHeaderProps>> & WithWrapperProps = forwardRef(
+const CardHeader: OverridableComponent<CardHeaderTypeMap<CardHeaderProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: CardHeaderProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -72,9 +68,6 @@ const CardHeader: OverridableComponent<CardHeaderTypeMap<CardHeaderProps>> & Wit
 
     return <MuiCardHeader ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<CardHeaderTypeMap<CardHeaderProps>> & WithWrapperProps;
-
-CardHeader.displayName = composeComponentDisplayName(COMPONENT_NAME);
-CardHeader.muiName = COMPONENT_NAME;
+) as OverridableComponent<CardHeaderTypeMap<CardHeaderProps>>;
 
 export default CardHeader;
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index 24432cd9..1366b1f3 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -22,8 +22,6 @@ import clsx from 'clsx';
 import {forwardRef, useEffect, useMemo, useState} from 'react';
 import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
 import {useIsMobile} from '../../hooks/use-is-mobile';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import type {BoxProps, BoxTypeMap} from '../Box';
 import Button from '../Button';
@@ -91,8 +89,6 @@ export type CarouselProps<
   title?: ReactNode;
 };
 
-const COMPONENT_NAME: string = 'Carousel';
-
 /**
  * The Carousel component can be used to slide through content.
  *
@@ -115,7 +111,7 @@ const COMPONENT_NAME: string = 'Carousel';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered Carousel component.
  */
-const Carousel: OverridableComponent<BoxTypeMap<CarouselProps>> & WithWrapperProps = forwardRef(
+const Carousel: OverridableComponent<BoxTypeMap<CarouselProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       autoPlay = false,
@@ -232,9 +228,6 @@ const Carousel: OverridableComponent<BoxTypeMap<CarouselProps>> & WithWrapperPro
       </Box>
     );
   },
-) as OverridableComponent<BoxTypeMap<CarouselProps>> & WithWrapperProps;
-
-Carousel.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Carousel.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<CarouselProps>>;
 
 export default Carousel;
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index fa253b38..c54aed08 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -23,8 +23,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, Ref, ElementType} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type CheckboxProps<C extends ElementType = ElementType> = {
   /**
@@ -33,8 +31,6 @@ export type CheckboxProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiCheckboxProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Checkbox';
-
 /**
  * The Checkboxes allow the user to select one or more items from a set.
  *
@@ -60,7 +56,7 @@ const COMPONENT_NAME: string = 'Checkbox';
  * @param ref - The ref to be forwarded to the MuiCheckbox component.
  * @returns The rendered Checkbox component.
  */
-const Checkbox: OverridableComponent<ButtonBaseTypeMap<CheckboxProps>> & WithWrapperProps = forwardRef(
+const Checkbox: OverridableComponent<ButtonBaseTypeMap<CheckboxProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: CheckboxProps<C>,
     ref: Ref<HTMLButtonElement>,
@@ -69,9 +65,6 @@ const Checkbox: OverridableComponent<ButtonBaseTypeMap<CheckboxProps>> & WithWra
 
     return <MuiCheckbox ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ButtonBaseTypeMap<CheckboxProps>> & WithWrapperProps;
-
-Checkbox.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Checkbox.muiName = COMPONENT_NAME;
+) as OverridableComponent<ButtonBaseTypeMap<CheckboxProps>>;
 
 export default Checkbox;
diff --git a/packages/react/src/components/Chip/Chip.tsx b/packages/react/src/components/Chip/Chip.tsx
index bb5cc68e..ba3f1ec2 100644
--- a/packages/react/src/components/Chip/Chip.tsx
+++ b/packages/react/src/components/Chip/Chip.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './chip.scss';
 
 export type ChipProps<
@@ -37,8 +35,6 @@ export type ChipProps<
   component?: C;
 } & Omit<MuiChipProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Chip';
-
 /**
  * The Chips are compact elements that represent an input, attribute, or action.
  *
@@ -61,15 +57,12 @@ const COMPONENT_NAME: string = 'Chip';
  * @param ref - The ref to be forwarded to the MuiChip component.
  * @returns The rendered Chip component.
  */
-const Chip: OverridableComponent<ChipTypeMap<ChipProps>> & WithWrapperProps = forwardRef(
+const Chip: OverridableComponent<ChipTypeMap<ChipProps>> = forwardRef(
   <C extends ElementType = ElementType>({className, ...rest}: ChipProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-chip', className);
 
     return <MuiChip ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ChipTypeMap<ChipProps>> & WithWrapperProps;
-
-Chip.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Chip.muiName = COMPONENT_NAME;
+) as OverridableComponent<ChipTypeMap<ChipProps>>;
 
 export default Chip;
diff --git a/packages/react/src/components/CircularProgress/CircularProgress.tsx b/packages/react/src/components/CircularProgress/CircularProgress.tsx
index 06587b63..31c3c256 100644
--- a/packages/react/src/components/CircularProgress/CircularProgress.tsx
+++ b/packages/react/src/components/CircularProgress/CircularProgress.tsx
@@ -21,14 +21,10 @@ import type {CircularProgressProps as MuiCircularProgressProps} from '@mui/mater
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './circular-progress.scss';
 
 export type CircularProgressProps = MuiCircularProgressProps;
 
-const COMPONENT_NAME: string = 'CircularProgress';
-
 /**
  * The Circular Progress indicators commonly known as spinners, express an unspecified wait
  * time or display the length of a process.
@@ -52,15 +48,12 @@ const COMPONENT_NAME: string = 'CircularProgress';
  * @param ref - The ref to be forwarded to the MuiCircularProgress component.
  * @returns The rendered CircularProgress component.
  */
-const CircularProgress: ForwardRefExoticComponent<CircularProgressProps> & WithWrapperProps = forwardRef(
+const CircularProgress: ForwardRefExoticComponent<CircularProgressProps> = forwardRef(
   ({className, ...rest}: CircularProgressProps, ref: Ref<HTMLSpanElement>): ReactElement => {
     const classes: string = clsx('oxygen-circular-progress', className);
 
     return <MuiCircularProgress ref={ref} aria-label="progress" className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<CircularProgressProps> & WithWrapperProps;
-
-CircularProgress.displayName = composeComponentDisplayName(COMPONENT_NAME);
-CircularProgress.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<CircularProgressProps>;
 
 export default CircularProgress;
diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx
index ac4de3f6..926bfd77 100644
--- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx
+++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx
@@ -19,8 +19,6 @@
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Avatar from '../Avatar';
 import type {AvatarProps} from '../Avatar';
 import type {BadgeProps} from '../Badge';
@@ -45,8 +43,6 @@ export type CircularProgressAvatarProps = Omit<CircularProgressProps, 'value'> &
   progress?: number;
 };
 
-const COMPONENT_NAME: string = 'CircularProgressAvatar';
-
 /**
  * The Circular Progress Avatar is a Avatar variant with a circular progress and a badge.
  *
@@ -69,7 +65,7 @@ const COMPONENT_NAME: string = 'CircularProgressAvatar';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered CircularProgressAvatar component.
  */
-const CircularProgressAvatar: ForwardRefExoticComponent<CircularProgressAvatarProps> & WithWrapperProps = forwardRef(
+const CircularProgressAvatar: ForwardRefExoticComponent<CircularProgressAvatarProps> = forwardRef(
   (
     {className, progress, badgeOptions, avatarOptions, ...rest}: CircularProgressAvatarProps,
     ref: Ref<HTMLDivElement>,
@@ -108,9 +104,6 @@ const CircularProgressAvatar: ForwardRefExoticComponent<CircularProgressAvatarPr
       </Box>
     );
   },
-) as ForwardRefExoticComponent<CircularProgressAvatarProps> & WithWrapperProps;
-
-CircularProgressAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME);
-CircularProgressAvatar.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<CircularProgressAvatarProps>;
 
 export default CircularProgressAvatar;
diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx
index b66f57f6..041dd5a4 100644
--- a/packages/react/src/components/Code/Code.tsx
+++ b/packages/react/src/components/Code/Code.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {TypographyTypeMap} from '../Typography';
 import Typography, {TypographyProps} from '../Typography/Typography';
 import './code.scss';
@@ -39,8 +37,6 @@ export type CodeProps<C extends ElementType = ElementType> = TypographyProps<C>
   outlined?: boolean;
 };
 
-const COMPONENT_NAME: string = 'Code';
-
 /**
  * The Code can represent an inline or block code without syntax highlight.
  *
@@ -63,7 +59,7 @@ const COMPONENT_NAME: string = 'Code';
  * @param ref - The ref to be forwarded to the Typography component.
  * @returns The rendered Code component.
  */
-const Code: OverridableComponent<TypographyTypeMap<CodeProps>> & WithWrapperProps = forwardRef(
+const Code: OverridableComponent<TypographyTypeMap<CodeProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, children, filled = true, outlined = false, ...rest}: CodeProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -76,9 +72,6 @@ const Code: OverridableComponent<TypographyTypeMap<CodeProps>> & WithWrapperProp
       </Typography>
     );
   },
-) as OverridableComponent<TypographyTypeMap<CodeProps>> & WithWrapperProps;
-
-Code.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Code.muiName = COMPONENT_NAME;
+) as OverridableComponent<TypographyTypeMap<CodeProps>>;
 
 export default Code;
diff --git a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx
index c6067fd2..84d9ad81 100644
--- a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx
+++ b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx
@@ -22,8 +22,6 @@ import {ChevronDownIcon, ChevronUpIcon} from '@oxygen-ui/react-icons';
 import clsx from 'clsx';
 import {forwardRef, useState} from 'react';
 import type {ElementType, Ref, MouseEvent, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import Chip from '../Chip';
 import List from '../List';
@@ -48,8 +46,6 @@ export type CollapsibleNavbarItemProps<C extends ElementType = ElementType> = Na
     items: NavbarItemProps[];
   };
 
-const COMPONENT_NAME: string = 'CollapsibleNavbarItem';
-
 /**
  * The Collapsible Navbar Item is a custom component that is used to render a collapsible item in the Navbar.
  *
@@ -72,8 +68,7 @@ const COMPONENT_NAME: string = 'CollapsibleNavbarItem';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered CollapsibleNavbarItem component.
  */
-const CollapsibleNavbarItem: OverridableComponent<ListItemButtonTypeMap<CollapsibleNavbarItemProps>> &
-  WithWrapperProps = forwardRef(
+const CollapsibleNavbarItem: OverridableComponent<ListItemButtonTypeMap<CollapsibleNavbarItemProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       className,
@@ -167,9 +162,6 @@ const CollapsibleNavbarItem: OverridableComponent<ListItemButtonTypeMap<Collapsi
       </Box>
     );
   },
-) as OverridableComponent<ListItemButtonTypeMap<CollapsibleNavbarItemProps>> & WithWrapperProps;
-
-CollapsibleNavbarItem.displayName = composeComponentDisplayName(COMPONENT_NAME);
-CollapsibleNavbarItem.muiName = COMPONENT_NAME;
+) as OverridableComponent<ListItemButtonTypeMap<CollapsibleNavbarItemProps>>;
 
 export default CollapsibleNavbarItem;
diff --git a/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx b/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx
index fbe456c4..c365fa99 100644
--- a/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx
+++ b/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx
@@ -23,8 +23,6 @@ import {useColorScheme} from '@mui/material/styles';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, PropsWithChildren, ReactElement, SVGProps} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './color-mode-toggle.scss';
 
 export type ColorModeToggleProps<
@@ -38,8 +36,6 @@ export type ColorModeToggleProps<
   component?: C;
 } & Omit<IconButtonProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'ColorModeToggle';
-
 const BrightnessIcon = (props: PropsWithChildren<SVGProps<SVGSVGElement>>): ReactElement => (
   <svg
     width="24"
@@ -100,7 +96,7 @@ const CrescentIcon = (props: PropsWithChildren<SVGProps<SVGSVGElement>>): ReactE
  * @param ref - The ref to be forwarded to the IconButton component.
  * @returns The rendered ColorModeToggle component.
  */
-const ColorModeToggle: OverridableComponent<IconButtonTypeMap<IconButtonProps>> & WithWrapperProps = forwardRef(
+const ColorModeToggle: OverridableComponent<IconButtonTypeMap<IconButtonProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: ColorModeToggleProps<C>,
     ref: Ref<HTMLButtonElement>,
@@ -124,9 +120,6 @@ const ColorModeToggle: OverridableComponent<IconButtonTypeMap<IconButtonProps>>
       </IconButton>
     );
   },
-) as OverridableComponent<IconButtonTypeMap<IconButtonProps>> & WithWrapperProps;
-
-ColorModeToggle.displayName = composeComponentDisplayName(COMPONENT_NAME);
-ColorModeToggle.muiName = COMPONENT_NAME;
+) as OverridableComponent<IconButtonTypeMap<IconButtonProps>>;
 
 export default ColorModeToggle;
diff --git a/packages/react/src/components/Container/Container.tsx b/packages/react/src/components/Container/Container.tsx
index b68b4cb4..0c189793 100644
--- a/packages/react/src/components/Container/Container.tsx
+++ b/packages/react/src/components/Container/Container.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './container.scss';
 
 export type ContainerProps<
@@ -37,8 +35,6 @@ export type ContainerProps<
   component?: C;
 } & Omit<MuiContainerProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Container';
-
 /**
  * The container centers your content horizontally. It's the most basic layout element.
  *
@@ -61,7 +57,7 @@ const COMPONENT_NAME: string = 'Container';
  * @param ref - The ref to be forwarded to the MuiContainer component.
  * @returns The rendered Container component.
  */
-const Container: OverridableComponent<ContainerTypeMap<ContainerProps>> & WithWrapperProps = forwardRef(
+const Container: OverridableComponent<ContainerTypeMap<ContainerProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: ContainerProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -70,9 +66,6 @@ const Container: OverridableComponent<ContainerTypeMap<ContainerProps>> & WithWr
 
     return <MuiContainer ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ContainerTypeMap<ContainerProps>> & WithWrapperProps;
-
-Container.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Container.muiName = COMPONENT_NAME;
+) as OverridableComponent<ContainerTypeMap<ContainerProps>>;
 
 export default Container;
diff --git a/packages/react/src/components/CountryFlag/CountryFlag.tsx b/packages/react/src/components/CountryFlag/CountryFlag.tsx
index 54902e71..6b6ac8c1 100644
--- a/packages/react/src/components/CountryFlag/CountryFlag.tsx
+++ b/packages/react/src/components/CountryFlag/CountryFlag.tsx
@@ -19,8 +19,6 @@
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, HTMLAttributes, Ref, ReactElement} from 'react';
 import WorldFlag from 'react-world-flags';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Typography from '../Typography';
 
 export type CountryFlagProps = {
@@ -40,8 +38,6 @@ export type CountryFlagProps = {
  */
 export type CountryFlagsProps = CountryFlagProps;
 
-const COMPONENT_NAME: string = 'CountryFlag';
-
 /**
  * The Toggle to switch between the two palette modes: light (the default) and dark.
  *
@@ -59,7 +55,7 @@ const COMPONENT_NAME: string = 'CountryFlag';
  * @param ref - The ref to be forwarded to the WorldFlag component.
  * @returns The rendered CountryFlag component.
  */
-const CountryFlag: ForwardRefExoticComponent<CountryFlagProps> & WithWrapperProps = forwardRef(
+const CountryFlag: ForwardRefExoticComponent<CountryFlagProps> = forwardRef(
   ({countryCode, height = '16', ...rest}: CountryFlagProps, ref: Ref<HTMLImageElement>): ReactElement => (
     <WorldFlag
       ref={ref}
@@ -69,9 +65,6 @@ const CountryFlag: ForwardRefExoticComponent<CountryFlagProps> & WithWrapperProp
       {...rest}
     />
   ),
-) as ForwardRefExoticComponent<CountryFlagProps> & WithWrapperProps;
-
-CountryFlag.displayName = composeComponentDisplayName(COMPONENT_NAME);
-CountryFlag.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<CountryFlagProps>;
 
 export default CountryFlag;
diff --git a/packages/react/src/components/DataGrid/DataGrid.tsx b/packages/react/src/components/DataGrid/DataGrid.tsx
index 38f37391..6b2fb563 100644
--- a/packages/react/src/components/DataGrid/DataGrid.tsx
+++ b/packages/react/src/components/DataGrid/DataGrid.tsx
@@ -21,14 +21,10 @@ import type {GridValidRowModel as MuiXGridValidRowModel, DataGridProps as MuiXDa
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './data-grid.scss';
 
 export type DataGridProps<R extends MuiXGridValidRowModel = any> = MuiXDataGridProps<R>;
 
-const COMPONENT_NAME: string = 'DataGrid';
-
 /**
  * The Data Grid component is built with React and TypeScript to provide a smooth UX for manipulating
  * an unlimited set of data. It features an intuitive API for real-time updates as well as theming
@@ -52,15 +48,12 @@ const COMPONENT_NAME: string = 'DataGrid';
  * @param ref - The ref to be forwarded to the MuiDataGrid component.
  * @returns The rendered DataGrid component.
  */
-const DataGrid: ForwardRefExoticComponent<DataGridProps> & WithWrapperProps = forwardRef(
+const DataGrid: ForwardRefExoticComponent<DataGridProps> = forwardRef(
   ({className, ...rest}: DataGridProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-data-grid', className);
 
     return <MuiXDataGrid ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<DataGridProps> & WithWrapperProps;
-
-DataGrid.displayName = composeComponentDisplayName(COMPONENT_NAME);
-DataGrid.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<DataGridProps>;
 
 export default DataGrid;
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx
index 3f68f0fb..0a6ad05a 100644
--- a/packages/react/src/components/Divider/Divider.tsx
+++ b/packages/react/src/components/Divider/Divider.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './divider.scss';
 
 export type DividerProps<
@@ -37,8 +35,6 @@ export type DividerProps<
   component?: C;
 } & Omit<MuiDividerProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Divider';
-
 /**
  * The Divider provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.
  *
@@ -63,7 +59,7 @@ const COMPONENT_NAME: string = 'Divider';
  * @param ref - The ref to be forwarded to the MuiDivider component.
  * @returns The rendered Divider component.
  */
-const Divider: OverridableComponent<MuiDividerTypeMap<DividerProps>> & WithWrapperProps = forwardRef(
+const Divider: OverridableComponent<MuiDividerTypeMap<DividerProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: DividerProps<C>,
     ref: Ref<HTMLHRElement>,
@@ -72,9 +68,6 @@ const Divider: OverridableComponent<MuiDividerTypeMap<DividerProps>> & WithWrapp
 
     return <MuiDivider ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<MuiDividerTypeMap<DividerProps>> & WithWrapperProps;
-
-Divider.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Divider.muiName = COMPONENT_NAME;
+) as OverridableComponent<MuiDividerTypeMap<DividerProps>>;
 
 export default Divider;
diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx
index 2b6e4987..5818cfb9 100644
--- a/packages/react/src/components/Drawer/Drawer.tsx
+++ b/packages/react/src/components/Drawer/Drawer.tsx
@@ -21,8 +21,6 @@ import type {DrawerProps as MuiDrawerProps} from '@mui/material/Drawer';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement, ForwardRefExoticComponent} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './drawer.scss';
 
 export type DrawerProps<C extends ElementType = ElementType> = {
@@ -32,8 +30,6 @@ export type DrawerProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiDrawerProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Drawer';
-
 /**
  * The navigation drawers (or "sidebars") provide ergonomic access to destinations in a site or
  * app functionality such as switching accounts.
@@ -57,7 +53,7 @@ const COMPONENT_NAME: string = 'Drawer';
  * @param ref - The ref to be forwarded to the MuiDrawer component.
  * @returns The rendered Drawer component.
  */
-const Drawer: ForwardRefExoticComponent<DrawerProps> & WithWrapperProps = forwardRef(
+const Drawer: ForwardRefExoticComponent<DrawerProps> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: DrawerProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -66,9 +62,6 @@ const Drawer: ForwardRefExoticComponent<DrawerProps> & WithWrapperProps = forwar
 
     return <MuiDrawer ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<DrawerProps> & WithWrapperProps;
-
-Drawer.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Drawer.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<DrawerProps>;
 
 export default Drawer;
diff --git a/packages/react/src/components/Fab/Fab.tsx b/packages/react/src/components/Fab/Fab.tsx
index 10afc1a6..57dee2db 100644
--- a/packages/react/src/components/Fab/Fab.tsx
+++ b/packages/react/src/components/Fab/Fab.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, Ref, ElementType} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type FabProps<
   C extends ElementType = ElementType,
@@ -36,8 +34,6 @@ export type FabProps<
   component?: C;
 } & Omit<MuiFabProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Fab';
-
 /**
  * A Floating Action Button (FAB) performs the primary, or most common, action on a screen.
  *
@@ -61,7 +57,7 @@ const COMPONENT_NAME: string = 'Fab';
  * @param ref - The ref to be forwarded to the MuiFab component.
  * @returns The rendered Fab component.
  */
-const Fab: OverridableComponent<FabTypeMap<FabProps>> & WithWrapperProps = forwardRef(
+const Fab: OverridableComponent<FabTypeMap<FabProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: FabProps<C>,
     ref: Ref<HTMLButtonElement>,
@@ -70,9 +66,6 @@ const Fab: OverridableComponent<FabTypeMap<FabProps>> & WithWrapperProps = forwa
 
     return <MuiFab ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<FabTypeMap<FabProps>> & WithWrapperProps;
-
-Fab.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Fab.muiName = COMPONENT_NAME;
+) as OverridableComponent<FabTypeMap<FabProps>>;
 
 export default Fab;
diff --git a/packages/react/src/components/Footer/Footer.tsx b/packages/react/src/components/Footer/Footer.tsx
index a61f8ee1..3f5724c7 100644
--- a/packages/react/src/components/Footer/Footer.tsx
+++ b/packages/react/src/components/Footer/Footer.tsx
@@ -21,8 +21,6 @@ import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
 import {useIsMobile} from '../../hooks/use-is-mobile';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import type {BoxProps, BoxTypeMap} from '../Box';
 import Container from '../Container';
@@ -47,8 +45,6 @@ export type FooterProps<C extends ElementType = ElementType> = BoxProps<C> & {
   maxWidth?: ContainerProps['maxWidth'];
 };
 
-const COMPONENT_NAME: string = 'Footer';
-
 /**
  * The Footers display a set of links and a copyright at the bottom of the application.
  *
@@ -67,7 +63,7 @@ const COMPONENT_NAME: string = 'Footer';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered Footer component.
  */
-const Footer: OverridableComponent<BoxTypeMap<FooterProps>> & WithWrapperProps = forwardRef(
+const Footer: OverridableComponent<BoxTypeMap<FooterProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, copyright, component = 'footer' as C, links, maxWidth, ...rest}: FooterProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -107,9 +103,6 @@ const Footer: OverridableComponent<BoxTypeMap<FooterProps>> & WithWrapperProps =
       </Box>
     );
   },
-) as OverridableComponent<BoxTypeMap<FooterProps>> & WithWrapperProps;
-
-Footer.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Footer.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<FooterProps>>;
 
 export default Footer;
diff --git a/packages/react/src/components/FormControl/FormControl.tsx b/packages/react/src/components/FormControl/FormControl.tsx
index 62c96767..0435e221 100644
--- a/packages/react/src/components/FormControl/FormControl.tsx
+++ b/packages/react/src/components/FormControl/FormControl.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './form-control.scss';
 
 export type FormControlProps<
@@ -37,8 +35,6 @@ export type FormControlProps<
   component?: C;
 } & Omit<MuiFormControlProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'FormControl';
-
 /**
  * The Form Control apply a common state to form inputs; FormLabel, FormHelperText, Input, InputLabel.
  *
@@ -67,7 +63,7 @@ const COMPONENT_NAME: string = 'FormControl';
  * @param ref - The ref to be forwarded to the MuiFormControl component.
  * @returns The rendered FormControl component.
  */
-const FormControl: OverridableComponent<FormControlTypeMap<FormControlProps>> & WithWrapperProps = forwardRef(
+const FormControl: OverridableComponent<FormControlTypeMap<FormControlProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: FormControlProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -76,9 +72,6 @@ const FormControl: OverridableComponent<FormControlTypeMap<FormControlProps>> &
 
     return <MuiFormControl ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<FormControlTypeMap<FormControlProps>> & WithWrapperProps;
-
-FormControl.displayName = composeComponentDisplayName(COMPONENT_NAME);
-FormControl.muiName = COMPONENT_NAME;
+) as OverridableComponent<FormControlTypeMap<FormControlProps>>;
 
 export default FormControl;
diff --git a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx
index af2beb88..8f3500ad 100644
--- a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx
+++ b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx
@@ -21,13 +21,9 @@ import type {FormControlLabelProps as MuiFormControlLabelProps} from '@mui/mater
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type FormControlLabelProps = MuiFormControlLabelProps;
 
-const COMPONENT_NAME: string = 'FormControlLabel';
-
 /**
  * The Form Control Label can be used to display a label for a form control.
  *
@@ -53,15 +49,12 @@ const COMPONENT_NAME: string = 'FormControlLabel';
  * @param ref - The ref to be forwarded to the MuiFormControlLabel component.
  * @returns The rendered FormControlLabel component.
  */
-const FormControlLabel: ForwardRefExoticComponent<FormControlLabelProps> & WithWrapperProps = forwardRef(
+const FormControlLabel: ForwardRefExoticComponent<FormControlLabelProps> = forwardRef(
   ({className, ...rest}: FormControlLabelProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-form-control-label', className);
 
     return <MuiFormControlLabel className={classes} {...rest} ref={ref} />;
   },
-) as ForwardRefExoticComponent<FormControlLabelProps> & WithWrapperProps;
-
-FormControlLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
-FormControlLabel.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<FormControlLabelProps>;
 
 export default FormControlLabel;
diff --git a/packages/react/src/components/FormGroup/FormGroup.tsx b/packages/react/src/components/FormGroup/FormGroup.tsx
index 09be13b1..7d698699 100644
--- a/packages/react/src/components/FormGroup/FormGroup.tsx
+++ b/packages/react/src/components/FormGroup/FormGroup.tsx
@@ -21,13 +21,9 @@ import type {FormGroupProps as MuiFormGroupProps} from '@mui/material/FormGroup'
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type FormGroupProps = MuiFormGroupProps;
 
-const COMPONENT_NAME: string = 'FormGroup';
-
 /**
  * The Form Group is a helpful wrapper used to group selection control components.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'FormGroup';
  * @param ref - The ref to be forwarded to the MuiFormGroup component.
  * @returns The rendered FormGroup component.
  */
-const FormGroup: ForwardRefExoticComponent<FormGroupProps> & WithWrapperProps = forwardRef(
+const FormGroup: ForwardRefExoticComponent<FormGroupProps> = forwardRef(
   ({className, ...rest}: FormGroupProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-form-group', className);
 
     return <MuiFormGroup ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<FormGroupProps> & WithWrapperProps;
-
-FormGroup.displayName = composeComponentDisplayName(COMPONENT_NAME);
-FormGroup.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<FormGroupProps>;
 
 export default FormGroup;
diff --git a/packages/react/src/components/FormHelperText/FormHelperText.tsx b/packages/react/src/components/FormHelperText/FormHelperText.tsx
index 3130bff4..6c7ece81 100644
--- a/packages/react/src/components/FormHelperText/FormHelperText.tsx
+++ b/packages/react/src/components/FormHelperText/FormHelperText.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './form-helper-text.scss';
 
 export type FormHelperTextProps<
@@ -37,8 +35,6 @@ export type FormHelperTextProps<
   component?: C;
 } & Omit<MuiFormHelperTextProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'FormHelperText';
-
 /**
  * A Form Helper Text component is used to provide additional information about the form inputs.
  *
@@ -61,7 +57,7 @@ const COMPONENT_NAME: string = 'FormHelperText';
  * @param ref - The ref to be forwarded to the MuiFab component.
  * @returns The rendered Fab component.
  */
-const FormHelperText: OverridableComponent<FormHelperTextTypeMap<FormHelperTextProps>> & WithWrapperProps = forwardRef(
+const FormHelperText: OverridableComponent<FormHelperTextTypeMap<FormHelperTextProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: FormHelperTextProps<C>,
     ref: Ref<HTMLParagraphElement>,
@@ -70,9 +66,6 @@ const FormHelperText: OverridableComponent<FormHelperTextTypeMap<FormHelperTextP
 
     return <MuiFormHelperText ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<FormHelperTextTypeMap<FormHelperTextProps>> & WithWrapperProps;
-
-FormHelperText.displayName = composeComponentDisplayName(COMPONENT_NAME);
-FormHelperText.muiName = COMPONENT_NAME;
+) as OverridableComponent<FormHelperTextTypeMap<FormHelperTextProps>>;
 
 export default FormHelperText;
diff --git a/packages/react/src/components/FormLabel/FormLabel.tsx b/packages/react/src/components/FormLabel/FormLabel.tsx
index 41908ca6..2c996c24 100644
--- a/packages/react/src/components/FormLabel/FormLabel.tsx
+++ b/packages/react/src/components/FormLabel/FormLabel.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, Ref, ElementType} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type FormLabelProps<
   C extends ElementType = ElementType,
@@ -36,8 +34,6 @@ export type FormLabelProps<
   component?: C;
 } & Omit<MuiFormLabelProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'FormLabel';
-
 /**
  * A Form Label component is used to provide a label for the form inputs.
  *
@@ -64,7 +60,7 @@ const COMPONENT_NAME: string = 'FormLabel';
  * @param ref - The ref to be forwarded to the MuiFab component.
  * @returns The rendered Fab component.
  */
-const FormLabel: OverridableComponent<FormLabelTypeMap<FormLabelProps>> & WithWrapperProps = forwardRef(
+const FormLabel: OverridableComponent<FormLabelTypeMap<FormLabelProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: FormLabelProps<C>,
     ref: Ref<HTMLLabelElement>,
@@ -73,9 +69,6 @@ const FormLabel: OverridableComponent<FormLabelTypeMap<FormLabelProps>> & WithWr
 
     return <MuiFormLabel ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<FormLabelTypeMap<FormLabelProps>> & WithWrapperProps;
-
-FormLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
-FormLabel.muiName = COMPONENT_NAME;
+) as OverridableComponent<FormLabelTypeMap<FormLabelProps>>;
 
 export default FormLabel;
diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx
index f61efd19..6735ed9d 100644
--- a/packages/react/src/components/Grid/Grid.tsx
+++ b/packages/react/src/components/Grid/Grid.tsx
@@ -22,8 +22,6 @@ import type {Grid2TypeMap, Grid2Props as MuiGridProps} from '@mui/material/Unsta
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './grid.scss';
 
 export type GridProps<
@@ -39,8 +37,6 @@ export type GridProps<
   component?: C;
 } & Omit<MuiGridProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Grid';
-
 /**
  * The Grid adapts to screen size and orientation, ensuring consistency across layouts.
  *
@@ -63,15 +59,12 @@ const COMPONENT_NAME: string = 'Grid';
  * @param ref - The ref to be forwarded to the MuiFormControl component.
  * @returns The rendered FormControl component.
  */
-const Grid: OverridableComponent<Grid2TypeMap<GridProps>> & WithWrapperProps = forwardRef(
+const Grid: OverridableComponent<Grid2TypeMap<GridProps>> = forwardRef(
   <C extends ElementType = ElementType>({className, ...rest}: GridProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-grid', className);
 
     return <MuiGrid ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<Grid2TypeMap<GridProps>> & WithWrapperProps;
-
-Grid.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Grid.muiName = COMPONENT_NAME;
+) as OverridableComponent<Grid2TypeMap<GridProps>>;
 
 export default Grid;
diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx
index 7e45b652..5073c3c8 100644
--- a/packages/react/src/components/Header/Header.tsx
+++ b/packages/react/src/components/Header/Header.tsx
@@ -24,8 +24,6 @@ import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
 import {useIsMobile} from '../../hooks/use-is-mobile';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import AppBar from '../AppBar';
 import type {AppBarProps, AppBarTypeMap} from '../AppBar';
 import Avatar from '../Avatar';
@@ -134,8 +132,6 @@ const userDropdownMenuDefaultProps: UserDropdownMenuHeaderProps = {
   onActionClick: (): void => null,
 };
 
-const COMPONENT_NAME: string = 'Header';
-
 /**
  * The Header displays the brand, left aligned elements, right aligned elements, and the user dropdown menu.
  *
@@ -158,7 +154,7 @@ const COMPONENT_NAME: string = 'Header';
  * @param ref - The ref to be forwarded to the AppBar component.
  * @returns The rendered Header component.
  */
-const Header: OverridableComponent<AppBarTypeMap<HeaderProps>> & WithWrapperProps = forwardRef(
+const Header: OverridableComponent<AppBarTypeMap<HeaderProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       brand,
@@ -276,9 +272,6 @@ const Header: OverridableComponent<AppBarTypeMap<HeaderProps>> & WithWrapperProp
       </AppBar>
     );
   },
-) as OverridableComponent<AppBarTypeMap<HeaderProps>> & WithWrapperProps;
-
-Header.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Header.muiName = COMPONENT_NAME;
+) as OverridableComponent<AppBarTypeMap<HeaderProps>>;
 
 export default Header;
diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx
index aa284eff..4e35c7ad 100644
--- a/packages/react/src/components/IconButton/IconButton.tsx
+++ b/packages/react/src/components/IconButton/IconButton.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './icon-button.scss';
 
 /**
@@ -50,8 +48,6 @@ export type IconButtonProps<
   variant?: IconButtonVariants | 'contained' | 'text';
 } & Omit<MuiIconButtonProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'IconButton';
-
 /**
  * The Icon Button component is used to render a button with an icon.
  *
@@ -75,7 +71,7 @@ const COMPONENT_NAME: string = 'IconButton';
  * @param ref - The ref to be forwarded to the MuiIconButton component.
  * @returns The rendered IconButton component.
  */
-const IconButton: OverridableComponent<IconButtonTypeMap<IconButtonProps>> & WithWrapperProps = forwardRef(
+const IconButton: OverridableComponent<IconButtonTypeMap<IconButtonProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, variant = IconButtonVariants.TEXT, ...rest}: IconButtonProps<C>,
     ref: Ref<HTMLButtonElement>,
@@ -86,9 +82,6 @@ const IconButton: OverridableComponent<IconButtonTypeMap<IconButtonProps>> & Wit
 
     return <MuiIconButton ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<IconButtonTypeMap<IconButtonProps>> & WithWrapperProps;
-
-IconButton.displayName = composeComponentDisplayName(COMPONENT_NAME);
-IconButton.muiName = COMPONENT_NAME;
+) as OverridableComponent<IconButtonTypeMap<IconButtonProps>>;
 
 export default IconButton;
diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx
index 33851711..d07ce924 100644
--- a/packages/react/src/components/Image/Image.tsx
+++ b/packages/react/src/components/Image/Image.tsx
@@ -19,13 +19,9 @@
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ImgHTMLAttributes, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type ImageProps = ImgHTMLAttributes<HTMLImageElement>;
 
-const COMPONENT_NAME: string = 'Image';
-
 /**
  * The Footers display a set of links and a copyright at the bottom of the application.
  *
@@ -46,15 +42,12 @@ const COMPONENT_NAME: string = 'Image';
  * @param ref - The ref to be forwarded to the img component.
  * @returns The rendered Image component.
  */
-const Image: ForwardRefExoticComponent<ImageProps> & WithWrapperProps = forwardRef(
+const Image: ForwardRefExoticComponent<ImageProps> = forwardRef(
   ({className, alt, ...rest}: ImageProps, ref: Ref<HTMLImageElement>): ReactElement => {
     const classes: string = clsx('oxygen-image', className);
 
     return <img ref={ref} className={classes} alt={alt} {...rest} />;
   },
-) as ForwardRefExoticComponent<ImageProps> & WithWrapperProps;
-
-Image.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Image.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<ImageProps>;
 
 export default Image;
diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx
index f5ab92bd..6bf3d012 100644
--- a/packages/react/src/components/Input/Input.tsx
+++ b/packages/react/src/components/Input/Input.tsx
@@ -21,14 +21,10 @@ import type {InputProps as MuiInputProps} from '@mui/material/Input';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './input.scss';
 
 export type InputProps = MuiInputProps;
 
-const COMPONENT_NAME: string = 'Input';
-
 /**
  * The Input component is used to render a text input field.
  *
@@ -51,15 +47,12 @@ const COMPONENT_NAME: string = 'Input';
  * @param ref - The ref to be forwarded to the MuiInput component.
  * @returns The rendered Input component.
  */
-const Input: ForwardRefExoticComponent<InputProps> & WithWrapperProps = forwardRef(
+const Input: ForwardRefExoticComponent<InputProps> = forwardRef(
   ({className, ...rest}: InputProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-input', className);
 
     return <MuiInput ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<InputProps> & WithWrapperProps;
-
-Input.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Input.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<InputProps>;
 
 export default Input;
diff --git a/packages/react/src/components/InputAdornment/InputAdornment.tsx b/packages/react/src/components/InputAdornment/InputAdornment.tsx
index 1d928d1c..f7bdd329 100644
--- a/packages/react/src/components/InputAdornment/InputAdornment.tsx
+++ b/packages/react/src/components/InputAdornment/InputAdornment.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type InputAdornmentProps<
   C extends ElementType = ElementType,
@@ -36,8 +34,6 @@ export type InputAdornmentProps<
   component?: C;
 } & Omit<MuiInputAdornmentProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'InputAdornment';
-
 /**
  * The Input Adornment can be used to add a prefix, a suffix, or an action to an input. For instance,
  * you can use an icon button to hide or reveal the password.
@@ -61,7 +57,7 @@ const COMPONENT_NAME: string = 'InputAdornment';
  * @param ref - The ref to be forwarded to the MuiInputAdornment component.
  * @returns The rendered InputAdornment component.
  */
-const InputAdornment: OverridableComponent<InputAdornmentTypeMap<InputAdornmentProps>> & WithWrapperProps = forwardRef(
+const InputAdornment: OverridableComponent<InputAdornmentTypeMap<InputAdornmentProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, position, ...rest}: InputAdornmentProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -70,9 +66,6 @@ const InputAdornment: OverridableComponent<InputAdornmentTypeMap<InputAdornmentP
 
     return <MuiInputAdornment ref={ref} position={position} className={classes} {...rest} />;
   },
-) as OverridableComponent<InputAdornmentTypeMap<InputAdornmentProps>> & WithWrapperProps;
-
-InputAdornment.displayName = composeComponentDisplayName(COMPONENT_NAME);
-InputAdornment.muiName = COMPONENT_NAME;
+) as OverridableComponent<InputAdornmentTypeMap<InputAdornmentProps>>;
 
 export default InputAdornment;
diff --git a/packages/react/src/components/InputLabel/InputLabel.tsx b/packages/react/src/components/InputLabel/InputLabel.tsx
index a34e9df2..3c9ccad3 100644
--- a/packages/react/src/components/InputLabel/InputLabel.tsx
+++ b/packages/react/src/components/InputLabel/InputLabel.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './input-label.scss';
 
 export type InputLabelProps<
@@ -37,8 +35,6 @@ export type InputLabelProps<
   component?: C;
 } & Omit<MuiInputLabelProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'InputLabel';
-
 /**
  * The Form Label component is used to provide a label for the form inputs.
  *
@@ -62,7 +58,7 @@ const COMPONENT_NAME: string = 'InputLabel';
  * @param ref - The ref to be forwarded to the MuiInputLabel component.
  * @returns The rendered InputLabel component.
  */
-const InputLabel: OverridableComponent<InputLabelTypeMap<InputLabelProps>> & WithWrapperProps = forwardRef(
+const InputLabel: OverridableComponent<InputLabelTypeMap<InputLabelProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: InputLabelProps<C>,
     ref: Ref<HTMLLabelElement>,
@@ -71,9 +67,6 @@ const InputLabel: OverridableComponent<InputLabelTypeMap<InputLabelProps>> & Wit
 
     return <MuiInputLabel ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<InputLabelTypeMap<InputLabelProps>> & WithWrapperProps;
-
-InputLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
-InputLabel.muiName = COMPONENT_NAME;
+) as OverridableComponent<InputLabelTypeMap<InputLabelProps>>;
 
 export default InputLabel;
diff --git a/packages/react/src/components/LinearProgress/LinearProgress.tsx b/packages/react/src/components/LinearProgress/LinearProgress.tsx
index 8c088048..b197933c 100644
--- a/packages/react/src/components/LinearProgress/LinearProgress.tsx
+++ b/packages/react/src/components/LinearProgress/LinearProgress.tsx
@@ -21,13 +21,9 @@ import type {LinearProgressProps as MuiLinearProgressProps} from '@mui/material/
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type LinearProgressProps = MuiLinearProgressProps;
 
-const COMPONENT_NAME: string = 'LinearProgress';
-
 /**
  * The Linear Progress component is used to show the progress of a task in a linear fashion.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'LinearProgress';
  * @param ref - The ref to be forwarded to the MuiLinearProgress component.
  * @returns The rendered LinearProgress component.
  */
-const LinearProgress: ForwardRefExoticComponent<LinearProgressProps> & WithWrapperProps = forwardRef(
+const LinearProgress: ForwardRefExoticComponent<LinearProgressProps> = forwardRef(
   ({className, ...rest}: LinearProgressProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-linear-progress', className);
 
     return <MuiLinearProgress ref={ref} aria-label="progress-bar" className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<LinearProgressProps> & WithWrapperProps;
-
-LinearProgress.displayName = composeComponentDisplayName(COMPONENT_NAME);
-LinearProgress.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<LinearProgressProps>;
 
 export default LinearProgress;
diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx
index a0192461..94747d8f 100644
--- a/packages/react/src/components/Link/Link.tsx
+++ b/packages/react/src/components/Link/Link.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './link.scss';
 
 export type LinkProps<
@@ -37,8 +35,6 @@ export type LinkProps<
   component?: C;
 } & Omit<MuiLinkProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Link';
-
 /**
  * A Link allows you to easily customize anchor elements with your theme colors and typography styles.
  *
@@ -64,7 +60,7 @@ const COMPONENT_NAME: string = 'Link';
  * @param ref - The ref to be forwarded to the MuiLink component.
  * @returns The rendered Link component.
  */
-const Link: OverridableComponent<LinkTypeMap<LinkProps>> & WithWrapperProps = forwardRef(
+const Link: OverridableComponent<LinkTypeMap<LinkProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: LinkProps<C>,
     ref: Ref<HTMLAnchorElement>,
@@ -73,9 +69,6 @@ const Link: OverridableComponent<LinkTypeMap<LinkProps>> & WithWrapperProps = fo
 
     return <MuiLink ref={ref} className={classes} underline="hover" {...rest} />;
   },
-) as OverridableComponent<LinkTypeMap<LinkProps>> & WithWrapperProps;
-
-Link.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Link.muiName = COMPONENT_NAME;
+) as OverridableComponent<LinkTypeMap<LinkProps>>;
 
 export default Link;
diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx
index dcc94fd6..14f43f68 100644
--- a/packages/react/src/components/List/List.tsx
+++ b/packages/react/src/components/List/List.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list.scss';
 
 export type ListProps<
@@ -37,8 +35,6 @@ export type ListProps<
   component?: C;
 } & Omit<MuiListProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'List';
-
 /**
  * A Lists is a continuous, vertical index of text or images.
  *
@@ -63,15 +59,12 @@ const COMPONENT_NAME: string = 'List';
  * @param ref - The ref to be forwarded to the MuiList component.
  * @returns The rendered List component.
  */
-const List: OverridableComponent<ListTypeMap<ListProps>> & WithWrapperProps = forwardRef(
+const List: OverridableComponent<ListTypeMap<ListProps>> = forwardRef(
   <C extends ElementType>({className, ...rest}: ListProps<C>, ref: Ref<HTMLUListElement>): ReactElement => {
     const classes: string = clsx('oxygen-list', className);
 
     return <MuiList ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ListTypeMap<ListProps>> & WithWrapperProps;
-
-List.displayName = composeComponentDisplayName(COMPONENT_NAME);
-List.muiName = COMPONENT_NAME;
+) as OverridableComponent<ListTypeMap<ListProps>>;
 
 export default List;
diff --git a/packages/react/src/components/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx
index 9be4d2e5..545e0965 100644
--- a/packages/react/src/components/ListItem/ListItem.tsx
+++ b/packages/react/src/components/ListItem/ListItem.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, MutableRefObject, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item.scss';
 
 export type ListItemProps<C extends ElementType = ElementType, D extends ElementType = 'li', P = {}> = {
@@ -33,8 +31,6 @@ export type ListItemProps<C extends ElementType = ElementType, D extends Element
   component?: C;
 } & Omit<MuiListItemProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'ListItem';
-
 /**
  * The List Item is a common list item that renders as an <li> by default.
  *
@@ -59,7 +55,7 @@ const COMPONENT_NAME: string = 'ListItem';
  * @param ref - The ref to be forwarded to the MuiListItem component.
  * @returns The rendered ListItem component.
  */
-const ListItem: OverridableComponent<ListItemTypeMap<ListItemProps, 'li'>> & WithWrapperProps = forwardRef(
+const ListItem: OverridableComponent<ListItemTypeMap<ListItemProps, 'li'>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: ListItemProps<C>,
     ref: MutableRefObject<HTMLLIElement>,
@@ -68,9 +64,6 @@ const ListItem: OverridableComponent<ListItemTypeMap<ListItemProps, 'li'>> & Wit
 
     return <MuiListItem ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ListItemTypeMap<ListItemProps, 'li'>> & WithWrapperProps;
-
-ListItem.displayName = composeComponentDisplayName(COMPONENT_NAME);
-ListItem.muiName = COMPONENT_NAME;
+) as OverridableComponent<ListItemTypeMap<ListItemProps, 'li'>>;
 
 export default ListItem;
diff --git a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx
index 87f8be99..54654199 100644
--- a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx
+++ b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx
@@ -21,14 +21,10 @@ import type {ListItemAvatarProps as MuiListItemAvatarProps} from '@mui/material/
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item-avatar.scss';
 
 export type ListItemAvatarProps = MuiListItemAvatarProps;
 
-const COMPONENT_NAME: string = 'ListItemAvatar';
-
 /**
  * The List Item Avatar component is used to display an avatar in a list item.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'ListItemAvatar';
  * @param ref - The ref to be forwarded to the MuiListItemAvatar component.
  * @returns The rendered ListItemAvatar component.
  */
-const ListItemAvatar: ForwardRefExoticComponent<ListItemAvatarProps> & WithWrapperProps = forwardRef(
+const ListItemAvatar: ForwardRefExoticComponent<ListItemAvatarProps> = forwardRef(
   ({className, ...rest}: ListItemAvatarProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-list-item-avatar', className);
 
     return <MuiListItemAvatar ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<ListItemAvatarProps> & WithWrapperProps;
-
-ListItemAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME);
-ListItemAvatar.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<ListItemAvatarProps>;
 
 export default ListItemAvatar;
diff --git a/packages/react/src/components/ListItemButton/ListItemButton.tsx b/packages/react/src/components/ListItemButton/ListItemButton.tsx
index 18ccd998..ef0d00a5 100644
--- a/packages/react/src/components/ListItemButton/ListItemButton.tsx
+++ b/packages/react/src/components/ListItemButton/ListItemButton.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item-button.scss';
 
 export type ListItemButtonProps<
@@ -37,8 +35,6 @@ export type ListItemButtonProps<
   component?: C;
 } & Omit<MuiListItemButtonProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'ListItemButton';
-
 /**
  * The List Item Button an action element to be used inside a list item.
  *
@@ -62,7 +58,7 @@ const COMPONENT_NAME: string = 'ListItemButton';
  * @param ref - The ref to be forwarded to the MuiListItemButton component.
  * @returns The rendered ListItemButton component.
  */
-const ListItemButton: OverridableComponent<ListItemButtonTypeMap<ListItemButtonProps>> & WithWrapperProps = forwardRef(
+const ListItemButton: OverridableComponent<ListItemButtonTypeMap<ListItemButtonProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: ListItemButtonProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -71,9 +67,6 @@ const ListItemButton: OverridableComponent<ListItemButtonTypeMap<ListItemButtonP
 
     return <MuiListItemButton ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ListItemButtonTypeMap<ListItemButtonProps>> & WithWrapperProps;
-
-ListItemButton.displayName = composeComponentDisplayName(COMPONENT_NAME);
-ListItemButton.muiName = COMPONENT_NAME;
+) as OverridableComponent<ListItemButtonTypeMap<ListItemButtonProps>>;
 
 export default ListItemButton;
diff --git a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx
index 94a931bd..d1b6b09b 100644
--- a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx
+++ b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx
@@ -21,14 +21,10 @@ import type {ListItemIconProps as MuiListItemIconProps} from '@mui/material/List
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item-icon.scss';
 
 export type ListItemIconProps = MuiListItemIconProps;
 
-const COMPONENT_NAME: string = 'ListItemIcon';
-
 /**
  * The List Item Icon component is used to display an icon in a list item.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'ListItemIcon';
  * @param ref - The ref to be forwarded to the MuiListItemIcon component.
  * @returns The rendered ListItemIcon component.
  */
-const ListItemIcon: ForwardRefExoticComponent<ListItemIconProps> & WithWrapperProps = forwardRef(
+const ListItemIcon: ForwardRefExoticComponent<ListItemIconProps> = forwardRef(
   ({className, ...rest}: ListItemIconProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-list-item-icon', className);
 
     return <MuiListItemIcon ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<ListItemIconProps> & WithWrapperProps;
-
-ListItemIcon.displayName = composeComponentDisplayName(COMPONENT_NAME);
-ListItemIcon.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<ListItemIconProps>;
 
 export default ListItemIcon;
diff --git a/packages/react/src/components/ListItemText/ListItemText.tsx b/packages/react/src/components/ListItemText/ListItemText.tsx
index 1ca95b76..7c5aba94 100644
--- a/packages/react/src/components/ListItemText/ListItemText.tsx
+++ b/packages/react/src/components/ListItemText/ListItemText.tsx
@@ -21,14 +21,10 @@ import type {ListItemTextProps as MuiListItemTextProps} from '@mui/material/List
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item-text.scss';
 
 export type ListItemTextProps = MuiListItemTextProps;
 
-const COMPONENT_NAME: string = 'ListItemText';
-
 /**
  * The List Item Text component is used to display text in a list item.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'ListItemText';
  * @param ref - The ref to be forwarded to the MuiListItemText component.
  * @returns The rendered ListItemText component.
  */
-const ListItemText: ForwardRefExoticComponent<ListItemTextProps> & WithWrapperProps = forwardRef(
+const ListItemText: ForwardRefExoticComponent<ListItemTextProps> = forwardRef(
   ({className, ...rest}: ListItemTextProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-list-item-text', className);
 
     return <MuiListItemText ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<ListItemTextProps> & WithWrapperProps;
-
-ListItemText.displayName = composeComponentDisplayName(COMPONENT_NAME);
-ListItemText.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<ListItemTextProps>;
 
 export default ListItemText;
diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx
index 57312173..065a3ad9 100644
--- a/packages/react/src/components/Menu/Menu.tsx
+++ b/packages/react/src/components/Menu/Menu.tsx
@@ -21,8 +21,6 @@ import type {MenuProps as MuiMenuProps} from '@mui/material/Menu';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement, ForwardRefExoticComponent} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './menu.scss';
 
 export type MenuProps<C extends ElementType = ElementType> = {
@@ -32,8 +30,6 @@ export type MenuProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiMenuProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Menu';
-
 /**
  * A Menus display a list of choices on temporary surfaces.
  *
@@ -59,15 +55,12 @@ const COMPONENT_NAME: string = 'Menu';
  * @param ref - The ref to be forwarded to the MuiList component.
  * @returns The rendered List component.
  */
-const Menu: ForwardRefExoticComponent<MenuProps> & WithWrapperProps = forwardRef(
+const Menu: ForwardRefExoticComponent<MenuProps> = forwardRef(
   <C extends ElementType = ElementType>({className, ...rest}: MenuProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-menu', className);
 
     return <MuiMenu ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<MenuProps> & WithWrapperProps;
-
-Menu.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Menu.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<MenuProps>;
 
 export default Menu;
diff --git a/packages/react/src/components/MenuItem/MenuItem.tsx b/packages/react/src/components/MenuItem/MenuItem.tsx
index 4c7ed9ae..31e62bbd 100644
--- a/packages/react/src/components/MenuItem/MenuItem.tsx
+++ b/packages/react/src/components/MenuItem/MenuItem.tsx
@@ -22,8 +22,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './menu-item.scss';
 
 export type MenuItemProps<
@@ -37,8 +35,6 @@ export type MenuItemProps<
   component?: C;
 } & Omit<MuiMenuItemProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'MenuItem';
-
 /**
  * The Menu Item component is used to display a single item inside a menu.
  *
@@ -62,7 +58,7 @@ const COMPONENT_NAME: string = 'MenuItem';
  * @param ref - The ref to be forwarded to the MuiMenuItem component.
  * @returns The rendered MenuItem component.
  */
-const MenuItem: OverridableComponent<MenuItemTypeMap<MenuItemProps>> & WithWrapperProps = forwardRef(
+const MenuItem: OverridableComponent<MenuItemTypeMap<MenuItemProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: MenuItemProps<C>,
     ref: Ref<HTMLLIElement>,
@@ -71,9 +67,6 @@ const MenuItem: OverridableComponent<MenuItemTypeMap<MenuItemProps>> & WithWrapp
 
     return <MuiMenuItem ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<MenuItemTypeMap<MenuItemProps>> & WithWrapperProps;
-
-MenuItem.displayName = composeComponentDisplayName(COMPONENT_NAME);
-MenuItem.muiName = COMPONENT_NAME;
+) as OverridableComponent<MenuItemTypeMap<MenuItemProps>>;
 
 export default MenuItem;
diff --git a/packages/react/src/components/Navbar/Navbar.tsx b/packages/react/src/components/Navbar/Navbar.tsx
index 8623c428..28703df4 100644
--- a/packages/react/src/components/Navbar/Navbar.tsx
+++ b/packages/react/src/components/Navbar/Navbar.tsx
@@ -27,8 +27,6 @@ import type {
   ForwardRefExoticComponent,
   MutableRefObject,
 } from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import CollapsibleNavbarItem from '../CollapsibleNavbarItem';
 import type {CollapsibleNavbarItemProps} from '../CollapsibleNavbarItem';
@@ -80,8 +78,6 @@ export type NavbarItems = {
   label?: string;
 };
 
-const COMPONENT_NAME: string = 'Navbar';
-
 /**
  * The Navbar component is used to provide a navigation bar for the application.
  *
@@ -104,7 +100,7 @@ const COMPONENT_NAME: string = 'Navbar';
  * @param ref - The ref to be forwarded to the Drawer component.
  * @returns The rendered Navbar component.
  */
-const Navbar: ForwardRefExoticComponent<NavbarProps> & WithWrapperProps = forwardRef(
+const Navbar: ForwardRefExoticComponent<NavbarProps> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       className,
@@ -232,9 +228,6 @@ const Navbar: ForwardRefExoticComponent<NavbarProps> & WithWrapperProps = forwar
       </Drawer>
     );
   },
-) as ForwardRefExoticComponent<NavbarProps> & WithWrapperProps;
-
-Navbar.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Navbar.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<NavbarProps>;
 
 export default Navbar;
diff --git a/packages/react/src/components/NavbarItem/NavbarItem.tsx b/packages/react/src/components/NavbarItem/NavbarItem.tsx
index ff1418e4..7f3231bb 100644
--- a/packages/react/src/components/NavbarItem/NavbarItem.tsx
+++ b/packages/react/src/components/NavbarItem/NavbarItem.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import Chip from '../Chip';
 import ListItemButton from '../ListItemButton';
@@ -59,8 +57,6 @@ export type NavbarItemProps<C extends ElementType = ElementType> = ListItemButto
     tagClassName?: 'premium' | 'beta' | 'new' | 'experimental';
   };
 
-const COMPONENT_NAME: string = 'NavbarItem';
-
 /**
  * The Navbar Item component is used to represent an item in the Navbar.
  *
@@ -83,7 +79,7 @@ const COMPONENT_NAME: string = 'NavbarItem';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered NavbarItem component.
  */
-const NavbarItem: OverridableComponent<ListItemButtonTypeMap<NavbarItemProps>> & WithWrapperProps = forwardRef(
+const NavbarItem: OverridableComponent<ListItemButtonTypeMap<NavbarItemProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, fill, icon, id, label, onClick, selected, tag, tagClassName, open = true, ...rest}: NavbarItemProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -116,9 +112,6 @@ const NavbarItem: OverridableComponent<ListItemButtonTypeMap<NavbarItemProps>> &
       </Box>
     );
   },
-) as OverridableComponent<ListItemButtonTypeMap<NavbarItemProps>> & WithWrapperProps;
-
-NavbarItem.displayName = composeComponentDisplayName(COMPONENT_NAME);
-NavbarItem.muiName = COMPONENT_NAME;
+) as OverridableComponent<ListItemButtonTypeMap<NavbarItemProps>>;
 
 export default NavbarItem;
diff --git a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx
index 49ebcfc8..c4280372 100644
--- a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx
+++ b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx
@@ -21,14 +21,10 @@ import type {OutlinedInputProps as MuiOutlinedInputProps} from '@mui/material/Ou
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './outlined-input.scss';
 
 export type OutlinedInputProps = MuiOutlinedInputProps;
 
-const COMPONENT_NAME: string = 'OutlinedInput';
-
 /**
  * The Outlined Input component is used to render a text input field with an outlined border.
  *
@@ -51,15 +47,12 @@ const COMPONENT_NAME: string = 'OutlinedInput';
  * @param ref - The ref to be forwarded to the MuiOutlinedInput component.
  * @returns The rendered OutlinedInput component.
  */
-const OutlinedInput: ForwardRefExoticComponent<OutlinedInputProps> & WithWrapperProps = forwardRef(
+const OutlinedInput: ForwardRefExoticComponent<OutlinedInputProps> = forwardRef(
   ({className, ...rest}: OutlinedInputProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-outlined-input', className);
 
     return <MuiOutlinedInput ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<OutlinedInputProps> & WithWrapperProps;
-
-OutlinedInput.displayName = composeComponentDisplayName(COMPONENT_NAME);
-OutlinedInput.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<OutlinedInputProps>;
 
 export default OutlinedInput;
diff --git a/packages/react/src/components/Paper/Paper.tsx b/packages/react/src/components/Paper/Paper.tsx
index a2616101..ab533772 100644
--- a/packages/react/src/components/Paper/Paper.tsx
+++ b/packages/react/src/components/Paper/Paper.tsx
@@ -22,8 +22,6 @@ import type {PaperProps as MuiPaperProps, PaperTypeMap} from '@mui/material/Pape
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, Ref, ElementType} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type PaperProps<
   C extends ElementType = ElementType,
@@ -36,8 +34,6 @@ export type PaperProps<
   component?: C;
 } & Omit<MuiPaperProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Paper';
-
 /**
  * The Paper component is a container for displaying content on an elevated surface.
  *
@@ -62,7 +58,7 @@ const COMPONENT_NAME: string = 'Paper';
  * @param ref - The ref to be forwarded to the MuiPaper component.
  * @returns The rendered Paper component.
  */
-const Paper: OverridableComponent<PaperTypeMap<PaperProps>> & WithWrapperProps = forwardRef(
+const Paper: OverridableComponent<PaperTypeMap<PaperProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: PaperProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -71,9 +67,6 @@ const Paper: OverridableComponent<PaperTypeMap<PaperProps>> & WithWrapperProps =
 
     return <MuiPaper className={classes} {...rest} ref={ref} />;
   },
-) as OverridableComponent<PaperTypeMap<PaperProps>> & WithWrapperProps;
-
-Paper.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Paper.muiName = COMPONENT_NAME;
+) as OverridableComponent<PaperTypeMap<PaperProps>>;
 
 export default Paper;
diff --git a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
index 88ffaf43..88835943 100644
--- a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
+++ b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
@@ -24,8 +24,6 @@ import {forwardRef, useState} from 'react';
 import type {ChangeEvent, ElementType, Ref, ReactElement} from 'react';
 import Flag from 'react-world-flags';
 import {countries, Country} from './constants/countries';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import type {BoxProps, BoxTypeMap} from '../Box';
 import InputLabel from '../InputLabel';
@@ -82,8 +80,6 @@ export type PhoneNumberInputProps<C extends ElementType = ElementType> = BoxProp
   placeholder?: string;
 };
 
-const COMPONENT_NAME: string = 'PhoneNumberInput';
-
 /**
  * The Phone Number Input component is used to get the phone number input from the user.
  *
@@ -106,7 +102,7 @@ const COMPONENT_NAME: string = 'PhoneNumberInput';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered PhoneNumberInput component.
  */
-const PhoneNumberInput: OverridableComponent<BoxTypeMap<PhoneNumberInputProps>> & WithWrapperProps = forwardRef(
+const PhoneNumberInput: OverridableComponent<BoxTypeMap<PhoneNumberInputProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       className,
@@ -199,9 +195,6 @@ const PhoneNumberInput: OverridableComponent<BoxTypeMap<PhoneNumberInputProps>>
       </Box>
     );
   },
-) as OverridableComponent<BoxTypeMap<PhoneNumberInputProps>> & WithWrapperProps;
-
-PhoneNumberInput.displayName = composeComponentDisplayName(COMPONENT_NAME);
-PhoneNumberInput.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<PhoneNumberInputProps>>;
 
 export default PhoneNumberInput;
diff --git a/packages/react/src/components/PhoneNumberInput/__test__/PhoneNumberInput.test.tsx b/packages/react/src/components/PhoneNumberInput/__test__/PhoneNumberInput.test.tsx
index 68fc299a..4e9b86d3 100644
--- a/packages/react/src/components/PhoneNumberInput/__test__/PhoneNumberInput.test.tsx
+++ b/packages/react/src/components/PhoneNumberInput/__test__/PhoneNumberInput.test.tsx
@@ -21,12 +21,12 @@ import PhoneNumberInput from '../PhoneNumberInput';
 
 describe('TextField', () => {
   it('should render successfully', () => {
-    const {baseElement} = render(<PhoneNumberInput />);
+    const {baseElement} = render(<PhoneNumberInput label="Mobile" />);
     expect(baseElement).toBeTruthy();
   });
 
   it('should match the snapshot', () => {
-    const {baseElement} = render(<PhoneNumberInput />);
+    const {baseElement} = render(<PhoneNumberInput label="Mobile" />);
     expect(baseElement).toMatchSnapshot();
   });
 });
diff --git a/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap b/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
index 1181a248..14fa25cd 100644
--- a/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
+++ b/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
@@ -10,7 +10,9 @@ exports[`TextField should match the snapshot 1`] = `
         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated oxygen-input-label css-f3834g-MuiFormLabel-root-MuiInputLabel-root"
         for="phone-number-input"
         id="phone-number-label"
-      />
+      >
+        Mobile
+      </label>
       <div
         class="oxygen-box oxygen-select-input MuiBox-root css-0"
       >
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 134f258a..f1e3a37d 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -21,8 +21,6 @@ import type {PopoverProps as MuiPopoverProps} from '@mui/material/Popover';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, Ref, ElementType, ForwardRefExoticComponent} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type PopoverProps<C extends ElementType = ElementType> = {
   /**
@@ -31,8 +29,6 @@ export type PopoverProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiPopoverProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Popover';
-
 /**
  * A Popover can be used to display some content on top of another.
  *
@@ -58,7 +54,7 @@ const COMPONENT_NAME: string = 'Popover';
  * @param ref - The ref to be forwarded to the MuiPopover component.
  * @returns The rendered Popover component.
  */
-const Popover: ForwardRefExoticComponent<PopoverProps> & WithWrapperProps = forwardRef(
+const Popover: ForwardRefExoticComponent<PopoverProps> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: PopoverProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -67,9 +63,6 @@ const Popover: ForwardRefExoticComponent<PopoverProps> & WithWrapperProps = forw
 
     return <MuiPopover className={classes} {...rest} ref={ref} />;
   },
-) as ForwardRefExoticComponent<PopoverProps> & WithWrapperProps;
-
-Popover.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Popover.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<PopoverProps>;
 
 export default Popover;
diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx
index e2d85bc1..98fcef78 100644
--- a/packages/react/src/components/Radio/Radio.tsx
+++ b/packages/react/src/components/Radio/Radio.tsx
@@ -23,8 +23,6 @@ import type {RadioProps as MuiRadioProps} from '@mui/material/Radio';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, Ref, ElementType} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type RadioProps<C extends ElementType = ElementType> = {
   /**
@@ -33,8 +31,6 @@ export type RadioProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiRadioProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Radio';
-
 /**
  * A Radio component is used to allow users to select a single option from a list of options.
  *
@@ -58,7 +54,7 @@ const COMPONENT_NAME: string = 'Radio';
  * @param ref - The ref to be forwarded to the MuiRadio component.
  * @returns The rendered Radio component.
  */
-const Radio: OverridableComponent<ButtonBaseTypeMap<RadioProps>> & WithWrapperProps = forwardRef(
+const Radio: OverridableComponent<ButtonBaseTypeMap<RadioProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: RadioProps<C>,
     ref: Ref<HTMLButtonElement>,
@@ -67,9 +63,6 @@ const Radio: OverridableComponent<ButtonBaseTypeMap<RadioProps>> & WithWrapperPr
 
     return <MuiRadio className={classes} {...rest} ref={ref} />;
   },
-) as OverridableComponent<ButtonBaseTypeMap<RadioProps>> & WithWrapperProps;
-
-Radio.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Radio.muiName = COMPONENT_NAME;
+) as OverridableComponent<ButtonBaseTypeMap<RadioProps>>;
 
 export default Radio;
diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx
index 446e312a..57814d2e 100644
--- a/packages/react/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx
@@ -21,13 +21,9 @@ import type {RadioGroupProps as MuiRadioGroupProps} from '@mui/material/RadioGro
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type RadioGroupProps = MuiRadioGroupProps;
 
-const COMPONENT_NAME: string = 'RadioGroup';
-
 /**
  * The Radio Group allows the user to select one option from a set.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'RadioGroup';
  * @param ref - The ref to be forwarded to the MuiRadioGroup component.
  * @returns The rendered RadioGroup component.
  */
-const RadioGroup: ForwardRefExoticComponent<RadioGroupProps> & WithWrapperProps = forwardRef(
+const RadioGroup: ForwardRefExoticComponent<RadioGroupProps> = forwardRef(
   ({className, ...rest}: RadioGroupProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-radio-group', className);
 
     return <MuiRadioGroup className={classes} {...rest} ref={ref} />;
   },
-) as ForwardRefExoticComponent<RadioGroupProps> & WithWrapperProps;
-
-RadioGroup.displayName = composeComponentDisplayName(COMPONENT_NAME);
-RadioGroup.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<RadioGroupProps>;
 
 export default RadioGroup;
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index 3153b352..f9ee684d 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -21,8 +21,6 @@ import type {SelectProps as MuiSelectProps} from '@mui/material/Select';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import InputLabel from '../InputLabel';
 import type {InputLabelProps as MuiInputLabelProps} from '../InputLabel';
 import './select.scss';
@@ -34,8 +32,6 @@ export type SelectProps = MuiSelectProps & {
   InputLabelProps?: MuiInputLabelProps;
 };
 
-const COMPONENT_NAME: string = 'Select';
-
 /**
  * The Select components are used for collecting user provided information from a list of options.
  *
@@ -58,7 +54,7 @@ const COMPONENT_NAME: string = 'Select';
  * @param ref - The ref to be forwarded to the MuiSelect component.
  * @returns The rendered Select component.
  */
-const Select: ForwardRefExoticComponent<SelectProps> & WithWrapperProps = forwardRef(
+const Select: ForwardRefExoticComponent<SelectProps> = forwardRef(
   (
     {
       className,
@@ -102,9 +98,6 @@ const Select: ForwardRefExoticComponent<SelectProps> & WithWrapperProps = forwar
       </>
     );
   },
-) as ForwardRefExoticComponent<SelectProps> & WithWrapperProps;
-
-Select.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Select.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<SelectProps>;
 
 export default Select;
diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx
index cca1a846..8d3af189 100644
--- a/packages/react/src/components/SignIn/SignIn.tsx
+++ b/packages/react/src/components/SignIn/SignIn.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import type {BoxTypeMap, BoxProps} from '../Box';
 import Box from '../Box';
 import Button from '../Button';
@@ -51,8 +49,6 @@ export type SignInProps<C extends ElementType = ElementType> = BoxProps<C> & {
   signUpUrl?: string;
 };
 
-const COMPONENT_NAME: string = 'SignIn';
-
 /**
  * The Sign In component is a custom component that is used to render a sign-in form.
  *
@@ -75,7 +71,7 @@ const COMPONENT_NAME: string = 'SignIn';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered SignIn component.
  */
-const SignIn: OverridableComponent<BoxTypeMap<SignInProps>> & WithWrapperProps = forwardRef(
+const SignIn: OverridableComponent<BoxTypeMap<SignInProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, signUpUrl, logoUrl, signInOptions, ...rest}: SignInProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -136,9 +132,6 @@ const SignIn: OverridableComponent<BoxTypeMap<SignInProps>> & WithWrapperProps =
       </Box>
     );
   },
-) as OverridableComponent<BoxTypeMap<SignInProps>> & WithWrapperProps;
-
-SignIn.displayName = composeComponentDisplayName(COMPONENT_NAME);
-SignIn.muiName = 'SignIn';
+) as OverridableComponent<BoxTypeMap<SignInProps>>;
 
 export default SignIn;
diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/Skeleton/Skeleton.tsx
index c8917f1e..87fc2cc9 100644
--- a/packages/react/src/components/Skeleton/Skeleton.tsx
+++ b/packages/react/src/components/Skeleton/Skeleton.tsx
@@ -22,8 +22,6 @@ import type {SkeletonProps as MuiSkeletonProps, SkeletonTypeMap} from '@mui/mate
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
 export type SkeletonProps<
   C extends ElementType = ElementType,
@@ -36,8 +34,6 @@ export type SkeletonProps<
   component?: C;
 } & Omit<MuiSkeletonProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Skeleton';
-
 /**
  * The Skeleton displays a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
  *
@@ -60,7 +56,7 @@ const COMPONENT_NAME: string = 'Skeleton';
  * @param ref - The ref to be forwarded to the MuiSkeleton component.
  * @returns The rendered Skeleton component.
  */
-const Skeleton: OverridableComponent<SkeletonTypeMap<SkeletonProps>> & WithWrapperProps = forwardRef(
+const Skeleton: OverridableComponent<SkeletonTypeMap<SkeletonProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: SkeletonProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -69,9 +65,6 @@ const Skeleton: OverridableComponent<SkeletonTypeMap<SkeletonProps>> & WithWrapp
 
     return <MuiSkeleton ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<SkeletonTypeMap<SkeletonProps>> & WithWrapperProps;
-
-Skeleton.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Skeleton.muiName = COMPONENT_NAME;
+) as OverridableComponent<SkeletonTypeMap<SkeletonProps>>;
 
 export default Skeleton;
diff --git a/packages/react/src/components/Snackbar/Snackbar.tsx b/packages/react/src/components/Snackbar/Snackbar.tsx
index db2eaf61..90dd80d3 100644
--- a/packages/react/src/components/Snackbar/Snackbar.tsx
+++ b/packages/react/src/components/Snackbar/Snackbar.tsx
@@ -21,14 +21,10 @@ import type {SnackbarProps as MuiSnackbarProps} from '@mui/material/Snackbar';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './snackbar.scss';
 
 export type SnackbarProps = MuiSnackbarProps;
 
-const COMPONENT_NAME: string = 'Snackbar';
-
 /**
  * The Snackbar (also known as toasts) is used for brief notifications of processes that have been or will be performed.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'Snackbar';
  * @param ref - The ref to be forwarded to the MuiSnackbar component.
  * @returns The rendered Snackbar component.
  */
-const Snackbar: ForwardRefExoticComponent<SnackbarProps> & WithWrapperProps = forwardRef(
+const Snackbar: ForwardRefExoticComponent<SnackbarProps> = forwardRef(
   ({className, ...rest}: SnackbarProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-snackbar', className);
 
     return <MuiSnackbar className={classes} {...rest} ref={ref} />;
   },
-) as ForwardRefExoticComponent<SnackbarProps> & WithWrapperProps;
-
-Snackbar.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Snackbar.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<SnackbarProps>;
 
 export default Snackbar;
diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx
index 5e50ca6f..37af3fd6 100644
--- a/packages/react/src/components/Stepper/Stepper.tsx
+++ b/packages/react/src/components/Stepper/Stepper.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import type {BoxProps, BoxTypeMap} from '../Box';
 import './stepper.scss';
@@ -41,8 +39,6 @@ export type StepperProps<C extends ElementType = ElementType> = BoxProps<C> & {
   steps: ReactElement[];
 };
 
-const COMPONENT_NAME: string = 'Stepper';
-
 /**
  * The Stepper can be used to compose wizards and carousels.
  *
@@ -65,7 +61,7 @@ const COMPONENT_NAME: string = 'Stepper';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered Stepper component.
  */
-const Stepper: OverridableComponent<BoxTypeMap<StepperProps>> & WithWrapperProps = forwardRef(
+const Stepper: OverridableComponent<BoxTypeMap<StepperProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {animateOnSlide, className, currentStep = 0, steps}: StepperProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -129,9 +125,6 @@ const Stepper: OverridableComponent<BoxTypeMap<StepperProps>> & WithWrapperProps
 
     return steps[currentStep];
   },
-) as OverridableComponent<BoxTypeMap<StepperProps>> & WithWrapperProps;
-
-Stepper.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Stepper.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<StepperProps>>;
 
 export default Stepper;
diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx
index 25670555..42b4841e 100644
--- a/packages/react/src/components/Switch/Switch.tsx
+++ b/packages/react/src/components/Switch/Switch.tsx
@@ -23,8 +23,6 @@ import type {SwitchProps as MuiSwitchProps} from '@mui/material/Switch';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, Ref, ElementType} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './switch.scss';
 
 export type SwitchProps<C extends ElementType = ElementType> = {
@@ -34,8 +32,6 @@ export type SwitchProps<C extends ElementType = ElementType> = {
   component?: C;
 } & Omit<MuiSwitchProps, 'component'>;
 
-const COMPONENT_NAME: string = 'Switch';
-
 /**
  * The Switch toggles the state of a single setting on or off.
  *
@@ -61,7 +57,7 @@ const COMPONENT_NAME: string = 'Switch';
  * @param ref - The ref to be forwarded to the MuiSwitch component.
  * @returns The rendered Switch component.
  */
-const Switch: OverridableComponent<ButtonBaseTypeMap<SwitchProps>> & WithWrapperProps = forwardRef(
+const Switch: OverridableComponent<ButtonBaseTypeMap<SwitchProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: SwitchProps<C>,
     ref: Ref<HTMLButtonElement>,
@@ -70,9 +66,6 @@ const Switch: OverridableComponent<ButtonBaseTypeMap<SwitchProps>> & WithWrapper
 
     return <MuiSwitch ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ButtonBaseTypeMap<SwitchProps>> & WithWrapperProps;
-
-Switch.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Switch.muiName = COMPONENT_NAME;
+) as OverridableComponent<ButtonBaseTypeMap<SwitchProps>>;
 
 export default Switch;
diff --git a/packages/react/src/components/Tab/Tab.tsx b/packages/react/src/components/Tab/Tab.tsx
index 127ec30e..9c8841b6 100644
--- a/packages/react/src/components/Tab/Tab.tsx
+++ b/packages/react/src/components/Tab/Tab.tsx
@@ -22,8 +22,6 @@ import type {TabProps as MuiTabProps, TabTypeMap} from '@mui/material/Tab';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './tab.scss';
 
 export type TabProps<
@@ -37,8 +35,6 @@ export type TabProps<
   component?: C;
 } & Omit<MuiTabProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Tab';
-
 /**
  * The Tab component is used to create a tab in a tab list.
  *
@@ -62,15 +58,12 @@ const COMPONENT_NAME: string = 'Tab';
  * @param ref - The ref to be forwarded to the MuiTab component.
  * @returns The rendered Tab component.
  */
-const Tab: OverridableComponent<TabTypeMap<TabProps>> & WithWrapperProps = forwardRef(
+const Tab: OverridableComponent<TabTypeMap<TabProps>> = forwardRef(
   <C extends ElementType = ElementType>({className, ...rest}: TabProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-tab', className);
 
     return <MuiTab className={classes} ref={ref} {...rest} />;
   },
-) as OverridableComponent<TabTypeMap<TabProps>> & WithWrapperProps;
-
-Tab.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Tab.muiName = COMPONENT_NAME;
+) as OverridableComponent<TabTypeMap<TabProps>>;
 
 export default Tab;
diff --git a/packages/react/src/components/TabPanel/TabPanel.tsx b/packages/react/src/components/TabPanel/TabPanel.tsx
index 919cadd2..56b201e4 100644
--- a/packages/react/src/components/TabPanel/TabPanel.tsx
+++ b/packages/react/src/components/TabPanel/TabPanel.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import type {BoxProps, BoxTypeMap} from '../Box';
 import './tab-panel.scss';
@@ -37,8 +35,6 @@ export type TabPanelProps<C extends ElementType = ElementType> = BoxProps<C> & {
   value: number;
 };
 
-const COMPONENT_NAME: string = 'TabPanel';
-
 /**
  * TabPanel component can be used with Tabs component to implement the content of the tab views.
  *
@@ -61,7 +57,7 @@ const COMPONENT_NAME: string = 'TabPanel';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered TabPanel component.
  */
-const TabPanel: OverridableComponent<BoxTypeMap<TabPanelProps>> & WithWrapperProps = forwardRef(
+const TabPanel: OverridableComponent<BoxTypeMap<TabPanelProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, children, value, index, ...rest}: TabPanelProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -74,9 +70,6 @@ const TabPanel: OverridableComponent<BoxTypeMap<TabPanelProps>> & WithWrapperPro
       </Box>
     );
   },
-) as OverridableComponent<BoxTypeMap<TabPanelProps>> & WithWrapperProps;
-
-TabPanel.displayName = composeComponentDisplayName(COMPONENT_NAME);
-TabPanel.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<TabPanelProps>>;
 
 export default TabPanel;
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index c3441c27..2c15d7ab 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -22,8 +22,6 @@ import type {TabsProps as MuiTabsProps, TabsTypeMap} from '@mui/material/Tabs';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import Divider from '../Divider';
 import './tabs.scss';
@@ -39,8 +37,6 @@ export type TabsProps<
   component?: C;
 } & Omit<MuiTabsProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Tabs';
-
 /**
  * The Skeleton displays a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
  *
@@ -63,7 +59,7 @@ const COMPONENT_NAME: string = 'Tabs';
  * @param ref - The ref to be forwarded to the MuiSkeleton component.
  * @returns The rendered Skeleton component.
  */
-const Tabs: OverridableComponent<TabsTypeMap<TabsProps>> & WithWrapperProps = forwardRef(
+const Tabs: OverridableComponent<TabsTypeMap<TabsProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: TabsProps<C>,
     ref: Ref<HTMLButtonElement>,
@@ -79,9 +75,6 @@ const Tabs: OverridableComponent<TabsTypeMap<TabsProps>> & WithWrapperProps = fo
       </Box>
     );
   },
-) as OverridableComponent<TabsTypeMap<TabsProps>> & WithWrapperProps;
-
-Tabs.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Tabs.muiName = COMPONENT_NAME;
+) as OverridableComponent<TabsTypeMap<TabsProps>>;
 
 export default Tabs;
diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx
index c9af91a4..edb01ba9 100644
--- a/packages/react/src/components/TextField/TextField.tsx
+++ b/packages/react/src/components/TextField/TextField.tsx
@@ -24,8 +24,6 @@ import {CircleDotIcon, EyeIcon, EyeSlashIcon} from '@oxygen-ui/react-icons';
 import clsx from 'clsx';
 import {forwardRef, useState} from 'react';
 import type {ElementType, ForwardRefExoticComponent, MouseEvent, Ref, ReactElement, ReactNode} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import IconButton from '../IconButton';
 import InputAdornment from '../InputAdornment';
 import InputLabel from '../InputLabel';
@@ -56,9 +54,7 @@ export type TextFieldProps<C extends ElementType = ElementType> = {
   criteria?: string[];
 } & Omit<MuiTextFieldProps, 'component'>;
 
-const COMPONENT_NAME: string = 'TextField';
-
-const PasswordField: ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps = forwardRef(
+const PasswordField: ForwardRefExoticComponent<TextFieldProps> = forwardRef(
   <C extends ElementType = ElementType>(
     {type, variant, ...rest}: TextFieldProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -94,9 +90,9 @@ const PasswordField: ForwardRefExoticComponent<TextFieldProps> & WithWrapperProp
       />
     );
   },
-) as ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps;
+) as ForwardRefExoticComponent<TextFieldProps>;
 
-const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps = forwardRef(
+const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> = forwardRef(
   <C extends ElementType = ElementType>(
     {criteria, id, type, ...rest}: TextFieldProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -151,7 +147,7 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> & Wit
       </Tooltip>
     );
   },
-) as ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps;
+) as ForwardRefExoticComponent<TextFieldProps>;
 
 /**
  * The Text Fields let users enter and edit text..
@@ -178,7 +174,7 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> & Wit
  * @param ref - The ref to be forwarded to the MuiTextField component.
  * @returns The rendered TextField component.
  */
-const TextField: OverridableComponent<FormControlTypeMap<TextFieldProps>> & WithWrapperProps = forwardRef(
+const TextField: OverridableComponent<FormControlTypeMap<TextFieldProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, id, label, type, InputLabelProps, variant, ...rest}: TextFieldProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -198,9 +194,6 @@ const TextField: OverridableComponent<FormControlTypeMap<TextFieldProps>> & With
       </div>
     );
   },
-) as OverridableComponent<FormControlTypeMap<TextFieldProps>> & WithWrapperProps;
-
-TextField.displayName = composeComponentDisplayName(COMPONENT_NAME);
-TextField.muiName = COMPONENT_NAME;
+) as OverridableComponent<FormControlTypeMap<TextFieldProps>>;
 
 export default TextField;
diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx
index b1bf7c0a..15902b8d 100644
--- a/packages/react/src/components/Toolbar/Toolbar.tsx
+++ b/packages/react/src/components/Toolbar/Toolbar.tsx
@@ -22,8 +22,6 @@ import type {ToolbarProps as MuiToolbarProps, ToolbarTypeMap} from '@mui/materia
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './toolbar.scss';
 
 export type ToolbarProps<
@@ -37,8 +35,6 @@ export type ToolbarProps<
   component?: C;
 } & Omit<MuiToolbarProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Toolbar';
-
 /**
  * The Toolbar component is a container for grouping elements such as AppBar.
  *
@@ -61,7 +57,7 @@ const COMPONENT_NAME: string = 'Toolbar';
  * @param ref - The ref to be forwarded to the MuiSkeleton component.
  * @returns The rendered Skeleton component.
  */
-const Toolbar: OverridableComponent<ToolbarTypeMap<ToolbarProps>> & WithWrapperProps = forwardRef(
+const Toolbar: OverridableComponent<ToolbarTypeMap<ToolbarProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: ToolbarProps<C>,
     ref: Ref<HTMLDivElement>,
@@ -70,9 +66,6 @@ const Toolbar: OverridableComponent<ToolbarTypeMap<ToolbarProps>> & WithWrapperP
 
     return <MuiToolbar ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<ToolbarTypeMap<ToolbarProps>> & WithWrapperProps;
-
-Toolbar.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Toolbar.muiName = COMPONENT_NAME;
+) as OverridableComponent<ToolbarTypeMap<ToolbarProps>>;
 
 export default Toolbar;
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index 15d5b0d4..9e0ea6ff 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -21,14 +21,10 @@ import type {TooltipProps as MuiTooltipProps} from '@mui/material/Tooltip';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './tooltip.scss';
 
 export type TooltipProps = MuiTooltipProps;
 
-const COMPONENT_NAME: string = 'Tooltip';
-
 /**
  * Tooltips display informative text when users hover over, focus on, or tap an element.
  *
@@ -50,15 +46,12 @@ const COMPONENT_NAME: string = 'Tooltip';
  * @param ref - The ref to be forwarded to the MuiTooltip component.
  * @returns The rendered Tooltip component.
  */
-const Tooltip: ForwardRefExoticComponent<TooltipProps> & WithWrapperProps = forwardRef(
+const Tooltip: ForwardRefExoticComponent<TooltipProps> = forwardRef(
   ({className, ...rest}: TooltipProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-tooltip', className);
 
     return <MuiTooltip ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<TooltipProps> & WithWrapperProps;
-
-Tooltip.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Tooltip.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<TooltipProps>;
 
 export default Tooltip;
diff --git a/packages/react/src/components/Typography/Typography.tsx b/packages/react/src/components/Typography/Typography.tsx
index 4bb05715..e5632c6e 100644
--- a/packages/react/src/components/Typography/Typography.tsx
+++ b/packages/react/src/components/Typography/Typography.tsx
@@ -22,8 +22,6 @@ import type {TypographyProps as MuiTypographyProps, TypographyTypeMap} from '@mu
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './typography.scss';
 
 export type TypographyProps<
@@ -37,8 +35,6 @@ export type TypographyProps<
   component?: C;
 } & Omit<MuiTypographyProps<D, P>, 'component'>;
 
-const COMPONENT_NAME: string = 'Typography';
-
 /**
  * The Typography can present your design and content as clearly and efficiently as possible.
  *
@@ -63,7 +59,7 @@ const COMPONENT_NAME: string = 'Typography';
  * @param ref - The ref to be forwarded to the MuiTypography component.
  * @returns The rendered Typography component.
  */
-const Typography: OverridableComponent<TypographyTypeMap<TypographyProps>> & WithWrapperProps = forwardRef(
+const Typography: OverridableComponent<TypographyTypeMap<TypographyProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: TypographyProps<C>,
     ref: Ref<HTMLSpanElement>,
@@ -72,9 +68,6 @@ const Typography: OverridableComponent<TypographyTypeMap<TypographyProps>> & Wit
 
     return <MuiTypography ref={ref} className={classes} {...rest} />;
   },
-) as OverridableComponent<TypographyTypeMap<TypographyProps>> & WithWrapperProps;
-
-Typography.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Typography.muiName = COMPONENT_NAME;
+) as OverridableComponent<TypographyTypeMap<TypographyProps>>;
 
 export default Typography;
diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx
index 6bcb6159..5b8c5172 100644
--- a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx
+++ b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx
@@ -28,8 +28,6 @@ import type {
   ReactElement,
   ReactNode,
 } from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Avatar from '../Avatar';
 import Button, {ButtonProps} from '../Button';
 import Divider from '../Divider';
@@ -120,8 +118,6 @@ export type UserTemplate = {
   name?: string;
 };
 
-const COMPONENT_NAME: string = 'UserDropdownMenu';
-
 /**
  * The User Dropdown Menu lets you display a dropdown menu with user information and actions.
  *
@@ -143,7 +139,7 @@ const COMPONENT_NAME: string = 'UserDropdownMenu';
  * @param ref - The ref to be forwarded to the Menu component.
  * @returns The rendered UserDropdownMenu component.
  */
-const UserDropdownMenu: ForwardRefExoticComponent<UserDropdownMenuProps> & WithWrapperProps = forwardRef(
+const UserDropdownMenu: ForwardRefExoticComponent<UserDropdownMenuProps> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       className,
@@ -278,9 +274,6 @@ const UserDropdownMenu: ForwardRefExoticComponent<UserDropdownMenuProps> & WithW
       </>
     );
   },
-) as ForwardRefExoticComponent<UserDropdownMenuProps> & WithWrapperProps;
-
-UserDropdownMenu.displayName = composeComponentDisplayName(COMPONENT_NAME);
-UserDropdownMenu.muiName = COMPONENT_NAME;
+) as ForwardRefExoticComponent<UserDropdownMenuProps>;
 
 export default UserDropdownMenu;
diff --git a/packages/react/src/components/Wizard/Wizard.tsx b/packages/react/src/components/Wizard/Wizard.tsx
index 5cdab65a..479d00ce 100644
--- a/packages/react/src/components/Wizard/Wizard.tsx
+++ b/packages/react/src/components/Wizard/Wizard.tsx
@@ -20,8 +20,6 @@ import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef, useCallback, useMemo, useState} from 'react';
 import type {ElementType, Ref, ReactElement} from 'react';
-import type {WithWrapperProps} from '../../models/component';
-import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import type {BoxProps, BoxTypeMap} from '../Box';
 import Button from '../Button';
@@ -93,8 +91,6 @@ export type WizardProps<C extends ElementType = ElementType> = BoxProps<C> & {
   title: string;
 };
 
-const COMPONENT_NAME: string = 'Wizard';
-
 /**
  * The Wizard lets you create a step-by-step wizard with a progress bar.
  *
@@ -117,7 +113,7 @@ const COMPONENT_NAME: string = 'Wizard';
  * @param ref - The ref to be forwarded to the Box component.
  * @returns The rendered Wizard component.
  */
-const Wizard: OverridableComponent<BoxTypeMap<WizardProps>> & WithWrapperProps = forwardRef(
+const Wizard: OverridableComponent<BoxTypeMap<WizardProps>> = forwardRef(
   <C extends ElementType = ElementType>(
     {
       allowBackwardNavigation = true,
@@ -214,9 +210,6 @@ const Wizard: OverridableComponent<BoxTypeMap<WizardProps>> & WithWrapperProps =
       </Box>
     );
   },
-) as OverridableComponent<BoxTypeMap<WizardProps>> & WithWrapperProps;
-
-Wizard.displayName = composeComponentDisplayName(COMPONENT_NAME);
-Wizard.muiName = COMPONENT_NAME;
+) as OverridableComponent<BoxTypeMap<WizardProps>>;
 
 export default Wizard;
diff --git a/packages/react/src/models/component.ts b/packages/react/src/models/component.ts
index 72173a53..65d64e71 100644
--- a/packages/react/src/models/component.ts
+++ b/packages/react/src/models/component.ts
@@ -20,6 +20,13 @@ import {NamedExoticComponent} from 'react';
 
 export type WithWrapperProps = MuiWrapperProps & NamedExoticComponent;
 
+/**
+ * [IMPORTANT] Temporarily disabled due to the following issues with regards to composition.
+ *  - https://github.com/wso2/oxygen-ui/issues/288
+ *  - https://github.com/mui/material-ui/issues/32420#issuecomment-2410430433
+ *
+ * TODO: Bring back once a solution is sorted out.
+ */
 interface MuiWrapperProps {
   /**
    * Component name with `Mui` prefix.
diff --git a/packages/react/src/utils/compose-component-display-name.ts b/packages/react/src/utils/compose-component-display-name.ts
index c01fbb91..e9697b1e 100644
--- a/packages/react/src/utils/compose-component-display-name.ts
+++ b/packages/react/src/utils/compose-component-display-name.ts
@@ -18,6 +18,14 @@
 
 import {PACKAGE_NAME} from '../constants';
 
+/**
+ * [IMPORTANT] Temporarily disabled due to the following issues with regards to composition.
+ *  - https://github.com/wso2/oxygen-ui/issues/288
+ *  - https://github.com/mui/material-ui/issues/32420#issuecomment-2410430433
+ *
+ * TODO: Consider and bring back once a solution is sorted out.
+ * We may not even need this.
+ */
 const composeComponentDisplayName = (componentName: string): string => `${PACKAGE_NAME}/${componentName}`;
 
 export default composeComponentDisplayName;