diff --git a/src/alert/index.tsx b/src/alert/index.tsx
index cb672a643d..5a82c64afb 100644
--- a/src/alert/index.tsx
+++ b/src/alert/index.tsx
@@ -13,7 +13,9 @@ export { AlertProps };
 
 const Alert = React.forwardRef(
   ({ type = 'info', visible = true, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {
-    const baseComponentProps = useBaseComponent<HTMLDivElement>('Alert');
+    const baseComponentProps = useBaseComponent<HTMLDivElement>('Alert', {
+      props: { type, visible, dismissible: props.dismissible },
+    });
 
     const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
     const { stepNumber, stepNameSelector } = useFunnelStep();
diff --git a/src/area-chart/index.tsx b/src/area-chart/index.tsx
index 18687f84a8..16f28c4695 100644
--- a/src/area-chart/index.tsx
+++ b/src/area-chart/index.tsx
@@ -19,7 +19,16 @@ function AreaChart<T extends AreaChartProps.DataTypes>({
   i18nStrings = {},
   ...props
 }: AreaChartProps<T>) {
-  const baseComponentProps = useBaseComponent('AreaChart');
+  const baseComponentProps = useBaseComponent('AreaChart', {
+    props: {
+      detailPopoverSize,
+      hideLegend: props.hideLegend,
+      hideFilter: props.hideFilter,
+      fitHeight: props.fitHeight,
+      xScaleType,
+      yScaleType,
+    },
+  });
   return (
     <InternalAreaChart
       height={height}
diff --git a/src/autosuggest/index.tsx b/src/autosuggest/index.tsx
index 9885b62012..c3171710b5 100644
--- a/src/autosuggest/index.tsx
+++ b/src/autosuggest/index.tsx
@@ -14,7 +14,16 @@ const Autosuggest = React.forwardRef(
     { filteringType = 'auto', statusType = 'finished', disableBrowserAutocorrect = false, ...props }: AutosuggestProps,
     ref: React.Ref<AutosuggestProps.Ref>
   ) => {
-    const baseComponentProps = useBaseComponent('Autosuggest');
+    const baseComponentProps = useBaseComponent('Autosuggest', {
+      props: {
+        autoFocus: props.autoFocus,
+        disableBrowserAutocorrect,
+        expandToViewport: props.expandToViewport,
+        filteringType,
+        readOnly: props.readOnly,
+        virtualScroll: props.virtualScroll,
+      },
+    });
     const externalProps = getExternalProps(props);
     return (
       <InternalAutosuggest
diff --git a/src/badge/index.tsx b/src/badge/index.tsx
index 2cf997f3f7..2edec0707c 100644
--- a/src/badge/index.tsx
+++ b/src/badge/index.tsx
@@ -11,7 +11,7 @@ import { BadgeProps } from './interfaces';
 export { BadgeProps };
 
 export default function Badge({ color = 'grey', children, ...rest }: BadgeProps) {
-  const { __internalRootRef } = useBaseComponent('Badge');
+  const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });
   const baseProps = getBaseProps(rest);
 
   const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);
diff --git a/src/bar-chart/index.tsx b/src/bar-chart/index.tsx
index 4102a97069..0eca3db493 100644
--- a/src/bar-chart/index.tsx
+++ b/src/bar-chart/index.tsx
@@ -25,7 +25,19 @@ function BarChart<T extends number | string | Date>({
   detailPopoverSeriesContent,
   ...props
 }: BarChartProps<T>) {
-  const baseComponentProps = useBaseComponent('BarChart');
+  const baseComponentProps = useBaseComponent('BarChart', {
+    props: {
+      detailPopoverSize,
+      emphasizeBaselineAxis,
+      fitHeight: props.fitHeight,
+      hideFilter: props.hideFilter,
+      hideLegend: props.hideLegend,
+      horizontalBars,
+      stackedBars,
+      xScaleType,
+      yScaleType,
+    },
+  });
   const baseProps = getBaseProps(props);
   const className = clsx(baseProps.className, styles.root);
 
diff --git a/src/box/index.tsx b/src/box/index.tsx
index 97bc987a88..06bf5f63dc 100644
--- a/src/box/index.tsx
+++ b/src/box/index.tsx
@@ -9,7 +9,17 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 export { BoxProps };
 
 export default function Box({ variant = 'div', margin = {}, padding = {}, ...props }: BoxProps) {
-  const baseComponentProps = useBaseComponent('Box');
+  const baseComponentProps = useBaseComponent('Box', {
+    props: {
+      color: props.color,
+      display: props.display,
+      float: props.float,
+      fontSize: props.fontSize,
+      fontWeight: props.fontWeight,
+      textAlign: props.textAlign,
+      variant,
+    },
+  });
   return <InternalBox variant={variant} margin={margin} padding={padding} {...props} {...baseComponentProps} />;
 }
 applyDisplayName(Box, 'Box');
diff --git a/src/button-dropdown/index.tsx b/src/button-dropdown/index.tsx
index 23f3109903..49829a36b4 100644
--- a/src/button-dropdown/index.tsx
+++ b/src/button-dropdown/index.tsx
@@ -28,7 +28,9 @@ const ButtonDropdown = React.forwardRef(
     }: ButtonDropdownProps,
     ref: React.Ref<ButtonDropdownProps.Ref>
   ) => {
-    const baseComponentProps = useBaseComponent('ButtonDropdown');
+    const baseComponentProps = useBaseComponent('ButtonDropdown', {
+      props: { expandToViewport, expandableGroups, variant },
+    });
     const baseProps = getBaseProps(props);
     return (
       <InternalButtonDropdown
diff --git a/src/button/index.tsx b/src/button/index.tsx
index 55d435d215..5c4640fbd2 100644
--- a/src/button/index.tsx
+++ b/src/button/index.tsx
@@ -40,7 +40,9 @@ const Button = React.forwardRef(
     }: ButtonProps,
     ref: React.Ref<ButtonProps.Ref>
   ) => {
-    const baseComponentProps = useBaseComponent('Button');
+    const baseComponentProps = useBaseComponent('Button', {
+      props: { formAction, fullWidth, iconAlign, iconName, rel, target, variant, wrapText },
+    });
     const baseProps = getBaseProps(props);
     return (
       <InternalButton
diff --git a/src/cards/index.tsx b/src/cards/index.tsx
index 568bdbc13d..64c2c5648c 100644
--- a/src/cards/index.tsx
+++ b/src/cards/index.tsx
@@ -65,7 +65,9 @@ const Cards = React.forwardRef(function <T = any>(
   }: CardsProps<T>,
   ref: React.Ref<CardsProps.Ref>
 ) {
-  const { __internalRootRef } = useBaseComponent('Cards');
+  const { __internalRootRef } = useBaseComponent('Cards', {
+    props: { entireCardClickable, selectionType, stickyHeader, variant },
+  });
   const baseProps = getBaseProps(rest);
   const isRefresh = useVisualRefresh();
   const isMobile = useMobile();
diff --git a/src/code-editor/index.tsx b/src/code-editor/index.tsx
index 294fcc826f..d2ff0b88e6 100644
--- a/src/code-editor/index.tsx
+++ b/src/code-editor/index.tsx
@@ -45,8 +45,6 @@ import {
 export { CodeEditorProps };
 
 const CodeEditor = forwardRef((props: CodeEditorProps, ref: React.Ref<CodeEditorProps.Ref>) => {
-  const { __internalRootRef } = useBaseComponent('CodeEditor');
-  const { controlId, ariaLabelledby, ariaDescribedby } = useFormFieldContext(props);
   const {
     ace,
     value,
@@ -61,6 +59,8 @@ const CodeEditor = forwardRef((props: CodeEditorProps, ref: React.Ref<CodeEditor
     themes,
     ...rest
   } = props;
+  const { __internalRootRef } = useBaseComponent('CodeEditor', { props: { language } });
+  const { controlId, ariaLabelledby, ariaDescribedby } = useFormFieldContext(props);
   const [editorHeight = 480, setEditorHeight] = useControllable(editorContentHeight, onEditorContentResize, 480, {
     componentName: 'code-editor',
     changeHandler: 'onEditorContentResize',
diff --git a/src/column-layout/index.tsx b/src/column-layout/index.tsx
index 2374d5685a..11cc013ae0 100644
--- a/src/column-layout/index.tsx
+++ b/src/column-layout/index.tsx
@@ -16,7 +16,9 @@ export default function ColumnLayout({
   disableGutters = false,
   ...props
 }: ColumnLayoutProps) {
-  const baseComponentProps = useBaseComponent('ColumnLayout');
+  const baseComponentProps = useBaseComponent('ColumnLayout', {
+    props: { borders, columns, disableGutters, minColumnWidth: props.minColumnWidth, variant },
+  });
   const externalProps = getExternalProps(props);
   return (
     <InternalColumnLayout
diff --git a/src/content-layout/index.tsx b/src/content-layout/index.tsx
index d7717b9a39..4adca7b41f 100644
--- a/src/content-layout/index.tsx
+++ b/src/content-layout/index.tsx
@@ -9,7 +9,9 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 export { ContentLayoutProps };
 
 export default function ContentLayout(props: ContentLayoutProps) {
-  const baseComponentProps = useBaseComponent('ContentLayout');
+  const baseComponentProps = useBaseComponent('ContentLayout', {
+    props: { disableOverlap: props.disableOverlap },
+  });
   return <InternalContentLayout {...props} {...baseComponentProps} />;
 }
 
diff --git a/src/copy-to-clipboard/index.tsx b/src/copy-to-clipboard/index.tsx
index f125e19b7f..d2ee2ecad1 100644
--- a/src/copy-to-clipboard/index.tsx
+++ b/src/copy-to-clipboard/index.tsx
@@ -23,7 +23,9 @@ export default function CopyToClipboard({
   textToCopy,
   ...restProps
 }: CopyToClipboardProps) {
-  const { __internalRootRef } = useBaseComponent('CopyToClipboard');
+  const { __internalRootRef } = useBaseComponent('CopyToClipboard', {
+    props: { variant },
+  });
   const baseProps = getBaseProps(restProps);
 
   const copyButtonProps =