diff --git a/packages/components/_templates/mitosis/new/component/tsx.ejs.t b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
index 2dd734ce0462..533bce3dcdda 100644
--- a/packages/components/_templates/mitosis/new/component/tsx.ejs.t
+++ b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
@@ -5,25 +5,22 @@ import { onMount, Show, useMetadata, useStore } from "@builder.io/mitosis";
 import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name) %>Props } from "./model";
 import { cls, uuid } from "../../utils";
 import {DEFAULT_ID} from "../../shared/constants";
+<% if(formValue!=="no"){   -%>
+import {ChangeEvent, InteractionEvent} from "../../shared/model";
+<% } -%>
 
 useMetadata({
-  isAttachedToShadowDom: true,
-  component: {
-	// MS Power Apps
-    includeIcon: false,
-    properties: [],
-  },
+  isAttachedToShadowDom: true
 });
 
 export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.changeCase.pascal(name) %>Props) {
   // This is used as forwardRef
-  let component: any;
+  const ref = useRef<HTMLDivElement>(null);
   // jscpd:ignore-start
   const state = useStore<DB<%= h.changeCase.pascal(name) %>State>({
 		_id: DEFAULT_ID,
       <% if(formValue!=="no"){   -%>
-    	_isValid: undefined,
-		handleChange: (event: any) => {
+		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -32,21 +29,16 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 				props.change(event);
 			}
 
-			if (event.target?.validity?.valid != state._isValid) {
-				state._isValid = event.target?.validity?.valid;
-				if (props.validityChange) {
-					props.validityChange(!!event.target?.validity?.valid);
-				}
-			}
+			const target = event.target as HTMLInputElement;
 
 			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-			// VUE:this.$emit("update:<%= formValue %>", event.target.<%= formValue %>);
+			// VUE:this.$emit("update:<%= formValue %>", target.<%= formValue %>);
 
 			// Change event to work with reactive and template driven forms
-			// ANGULAR: this.propagateChange(event.target.<%= formValue %>);
-			// ANGULAR: this.writeValue(event.target.<%= formValue %>);
+			// ANGULAR: this.propagateChange(target.<%= formValue %>);
+			// ANGULAR: this.writeValue(target.<%= formValue %>);
 		},
-		handleBlur: (event: any) => {
+		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
@@ -55,7 +47,7 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 				props.blur(event);
 			}
 		},
-		handleFocus: (event: any) => {
+		handleFocus: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onFocus) {
 				props.onFocus(event);
 			}
@@ -77,13 +69,13 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 
   return (
     <div
-    	ref={component}
+    	ref={ref}
     	id={state._id}
     	class={cls('db-<%= name %>', props.className)}
 <% if(formValue!=="no"){   -%>
-		onChange={(event) => state.handleChange(event)}
-		onBlur={(event) => state.handleBlur(event)}
-		onFocus={(event) => state.handleFocus(event)}
+		onChange={(event: ChangeEvent<HTMLInputElement>) => state.handleChange(event)}
+		onBlur={(event: InteractionEvent<HTMLInputElement>) => state.handleBlur(event)}
+		onFocus={(event: InteractionEvent<HTMLInputElement>) => state.handleFocus(event)}
 <% } -%>
     	>
       <Show when={state.stylePath}>
diff --git a/packages/components/scripts/post-build/angular.js b/packages/components/scripts/post-build/angular.js
index 9ce5a02503e2..0c8bb46a884a 100644
--- a/packages/components/scripts/post-build/angular.js
+++ b/packages/components/scripts/post-build/angular.js
@@ -89,8 +89,8 @@ const setControlValueAccessorReplacements = (
 		writeValue(value: any) {
 		  this.${valueAccessor} = value;
 
-		  if (this.component?.nativeElement) {
-			 this.renderer.setProperty(this.component?.nativeElement, '${valueAccessor}', value);
+		  if (this.ref?.nativeElement) {
+			 this.renderer.setProperty(this.ref?.nativeElement, '${valueAccessor}', value);
 		  }
 		}
 
diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
index bcc77cfa1fe0..0ed6999a044a 100644
--- a/packages/components/scripts/post-build/components.js
+++ b/packages/components/scripts/post-build/components.js
@@ -37,12 +37,6 @@ const getComponents = () => [
 		overwrites: {
 			angular: [
 				{ from: 'openItems = []', to: 'openItems: string[] = []' }
-			],
-			react: [
-				{
-					from: 'const ref = useRef<HTMLDivElement>(null);',
-					to: 'const ref = useRef<HTMLDivElement>(component);'
-				}
 			]
 		}
 	},
@@ -56,22 +50,11 @@ const getComponents = () => [
 			angular: {
 				controlValueAccessor: 'value'
 			}
-		},
-		overwrites: {
+		},overwrites: {
 			angular: [
-				{
-					from: '[attr.defaultValue]="defaultValue ?? children"',
-					to: ''
-				},
 				{
 					from: '</textarea>',
-					to: '{{value || defaultValue}}</textarea>'
-				}
-			],
-			vue: [
-				{
-					from: ':defaultValue="defaultValue || $slots.default"',
-					to: ''
+					to: '{{value}}</textarea>'
 				}
 			]
 		}
@@ -106,12 +89,6 @@ const getComponents = () => [
 	{
 		name: 'drawer',
 		overwrites: {
-			react: [
-				{
-					from: 'const dialogRef = useRef<HTMLDialogElement>(null);',
-					to: 'const dialogRef = useRef<HTMLDialogElement>(component);'
-				}
-			],
 			webComponents: [{ from: '__prev.find', to: '!!__prev.find' }]
 		}
 	},
@@ -142,7 +119,7 @@ const getComponents = () => [
 				vModel: [{ modelValue: 'checked', binding: ':checked' }]
 			},
 			angular: {
-				controlValueAccessor: false
+				controlValueAccessor: 'checked'
 			}
 		}
 	},
diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
index 9c96dd062a88..b3be1ea3adc7 100644
--- a/packages/components/scripts/post-build/react.js
+++ b/packages/components/scripts/post-build/react.js
@@ -1,28 +1,62 @@
 const { components } = require('./components');
+const FS = require('node:fs');
 const { getComponentName, runReplacements } = require('../utils');
 
+const overwriteEvents = (tmp) => {
+	const modelFilePath = `../../${
+		tmp ? 'output/tmp' : 'output'
+	}/react/src/shared/model.ts`;
+	let modelFileContent = FS.readFileSync(modelFilePath).toString('utf-8');
+	modelFileContent = 'import * as React from "react";\n' + modelFileContent;
+	modelFileContent = modelFileContent.replace(
+		'export type ClickEvent<T> = MouseEvent;',
+		'export type ClickEvent<T> = React.MouseEvent<T, MouseEvent>;'
+	);
+	modelFileContent = modelFileContent.replace(
+		'export type ChangeEvent<T> = Event;',
+		'export type ChangeEvent<T> = React.ChangeEvent<T>;'
+	);
+	modelFileContent = modelFileContent.replace(
+		'export type InteractionEvent<T> = FocusEvent;',
+		'export type InteractionEvent<T> = React.FocusEvent<T>;'
+	);
+	FS.writeFileSync(modelFilePath, modelFileContent);
+};
+
 module.exports = (tmp) => {
-	for (const component of components) {
-		try {
+	try {
+		overwriteEvents(tmp);
+
+		for (const component of components) {
 			const upperComponentName = getComponentName(component.name);
 
 			const tsxFile = `../../${
 				tmp ? 'output/tmp' : 'output'
 			}/react/src/components/${component.name}/${component.name}.tsx`;
 
+			const tsxFileContent = FS.readFileSync(tsxFile).toString('utf-8');
+			const htmlElements = tsxFileContent.match('(?<=useRef<)(.*?)(?=>)');
+			let htmlElement = 'HTMLDivElement';
+			if (htmlElements.length > 0) {
+				htmlElement = htmlElements[0];
+			}
+
 			let replacements = [
 				{
 					from: /= useState/g,
 					to: '= useState<any>'
 				},
-				{ from: ` } from "react"`, to: `, forwardRef } from "react"` },
+				{
+					from: ` } from "react"`,
+					to: `, forwardRef, HTMLProps } from "react"`
+				},
 				{
 					from: `function DB${upperComponentName}(props: DB${upperComponentName}Props) {`,
-					to: `function DB${upperComponentName}Fn(props: DB${upperComponentName}Props, component: any) {`
+					to: `function DB${upperComponentName}Fn(props: Omit<HTMLProps<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
 				},
 				{
 					from: `export default DB${upperComponentName};`,
-					to: `const DB${upperComponentName} = forwardRef(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
+					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLProps<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
 				},
 				{
 					from: 'if (ref.current)',
@@ -31,12 +65,28 @@ module.exports = (tmp) => {
 				{
 					from: '[ref.current]',
 					to: '[ref]'
+				},
+				{
+					from: '>(null);',
+					to: '>(component);'
+				},
+				{
+					from: '={true}',
+					to: ''
+				},
+				{
+					from: '} from "../../utils"',
+					to: ', filterPassingProps } from "../../utils"'
+				},
+				{
+					from: 'ref={ref}',
+					to: 'ref={ref}\n' + '{...filterPassingProps(props)}'
 				}
 			];
 
 			runReplacements(replacements, component, 'react', tsxFile);
-		} catch (error) {
-			console.error('Error occurred:', error);
 		}
+	} catch (error) {
+		console.error('Error occurred:', error);
 	}
 };
diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
index 1370fc1bcccf..2feef846740e 100644
--- a/packages/components/src/components/accordion-item/accordion-item.lite.tsx
+++ b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -4,11 +4,13 @@ import {
 	Show,
 	Slot,
 	useMetadata,
+	useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBAccordionItemState, DBAccordionItemProps } from './model';
 import { cls, uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
+import { ClickEvent } from '../../shared/model';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -20,12 +22,11 @@ useMetadata({
 });
 
 export default function DBAccordionItem(props: DBAccordionItemProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDetailsElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionItemState>({
 		_id: DEFAULT_ID,
-		toggle: (event: any) => {
+		toggle: (event: ClickEvent<HTMLElement>) => {
 			// We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
 			event?.preventDefault();
 			if (props.onToggle) {
@@ -44,7 +45,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 
 	return (
 		<details
-			ref={component}
+			ref={ref}
 			id={state._id}
 			class={cls('db-accordion-item', props.className)}
 			aria-disabled={props.disabled}
@@ -52,7 +53,10 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
-			<summary onClick={(event) => state.toggle(event)}>
+			<summary
+				onClick={(event: ClickEvent<HTMLElement>) =>
+					state.toggle(event)
+				}>
 				<Show when={props.title}>{props.title}</Show>
 				<Show when={!props.title}>
 					<Slot name="title" />
diff --git a/packages/components/src/components/accordion-item/model.ts b/packages/components/src/components/accordion-item/model.ts
index e8fc9caa8ece..af3692973b88 100644
--- a/packages/components/src/components/accordion-item/model.ts
+++ b/packages/components/src/components/accordion-item/model.ts
@@ -36,4 +36,4 @@ export interface DBAccordionItemDefaultState {}
 
 export type DBAccordionItemState = DBAccordionItemDefaultState &
 	GlobalState &
-	ToggleEventState;
+	ToggleEventState<HTMLElement>;
diff --git a/packages/components/src/components/alert/alert.lite.tsx b/packages/components/src/components/alert/alert.lite.tsx
index 958217c0fe7b..246e78eba699 100644
--- a/packages/components/src/components/alert/alert.lite.tsx
+++ b/packages/components/src/components/alert/alert.lite.tsx
@@ -1,47 +1,26 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBAlertProps, DBAlertState } from './model';
 import { DBButton } from '../button';
 import { DBLink } from '../link';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
 import { cls } from '../../utils';
+import { ClickEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: true,
-		hasOnClick: true,
-		canvasSize: {
-			height: 'fixed', // 'fixed', 'controlled'
-			width: 'controlled' // 'fixed', 'dynamic' (requires width property), 'controlled'
-		},
-		properties: [
-			{ name: 'headline', type: 'SingleLine.Text' },
-			{
-				name: 'children',
-				type: 'SingleLine.Text',
-				defaultValue: 'Alert'
-			},
-			{
-				name: 'icon',
-				type: 'Icon', // this is a custom type not provided by ms
-				defaultValue: 'info'
-			},
-			{
-				name: 'variant',
-				type: 'DefaultVariant', // this is a custom type not provided by ms
-				defaultValue: 'adaptive'
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBAlert(props: DBAlertProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAlertState>({
-		handleClick: (event: any) => {
+		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
@@ -57,7 +36,7 @@ export default function DBAlert(props: DBAlertProps) {
 
 	return (
 		<div
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-alert', props.className)}
 			aria-live={props.ariaLive}
@@ -79,13 +58,13 @@ export default function DBAlert(props: DBAlertProps) {
 					className="db-alert-link"
 					variant="inline"
 					href={props.link.href}
+					hreflang={props.link.hreflang}
 					target={props.link.target}
 					rel={props.link.rel}
 					role={props.link.role}
 					disabled={props.link.disabled}
 					selected={props.link.selected}
 					label={props.link.label}
-					hreflang={props.link.hreflang}
 					current={props.link.current}
 					text={props.link.text}
 				/>
@@ -98,7 +77,9 @@ export default function DBAlert(props: DBAlertProps) {
 					variant="text"
 					size="small"
 					noText
-					onClick={(event) => state.handleClick(event)}>
+					onClick={(event: ClickEvent<HTMLButtonElement>) =>
+						state.handleClick(event)
+					}>
 					{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
 				</DBButton>
 			</Show>
diff --git a/packages/components/src/components/alert/model.ts b/packages/components/src/components/alert/model.ts
index 83fc60113c5d..7945879c8e41 100644
--- a/packages/components/src/components/alert/model.ts
+++ b/packages/components/src/components/alert/model.ts
@@ -21,10 +21,6 @@ export interface DBAlertDefaultProps {
 	 * The behaviour attribute shows/hides the close button on the top right.
 	 */
 	behaviour?: 'closable' | 'permanent';
-	/**
-	 * The closeButtonText attribute changes the text inside the close button (only visible with behaviour="closeable").
-	 */
-	closeButtonText?: string;
 	/**
 	 * The headline attribute changes the text of the bold headline.
 	 */
@@ -43,7 +39,7 @@ export interface DBAlertDefaultProps {
 
 export type DBAlertProps = DBAlertDefaultProps &
 	GlobalProps &
-	ClickEventProps &
+	ClickEventProps<HTMLButtonElement> &
 	IconProps &
 	CardProps &
 	DefaultVariantProps &
@@ -51,4 +47,6 @@ export type DBAlertProps = DBAlertDefaultProps &
 
 export interface DBAlertDefaultState {}
 
-export type DBAlertState = DBAlertDefaultState & GlobalState & ClickEventState;
+export type DBAlertState = DBAlertDefaultState &
+	GlobalState &
+	ClickEventState<HTMLButtonElement>;
diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
index d9431be8cafb..583e70461d0b 100644
--- a/packages/components/src/components/badge/badge.lite.tsx
+++ b/packages/components/src/components/badge/badge.lite.tsx
@@ -1,19 +1,13 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import { DBBadgeState, DBBadgeProps } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBBadge(props: DBBadgeProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBBadgeState>({});
 
@@ -26,7 +20,7 @@ export default function DBBadge(props: DBBadgeProps) {
 
 	return (
 		<span
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-badge', props.className)}
 			data-variant={props.variant}
diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx
index b47011fa76b4..a9f13ebb0e88 100644
--- a/packages/components/src/components/brand/brand.lite.tsx
+++ b/packages/components/src/components/brand/brand.lite.tsx
@@ -1,53 +1,13 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import { cls } from '../../utils';
 import { DBBrandState, DBBrandProps } from './model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: [
-			{
-				name: 'anchorRef',
-				type: 'SingleLine.URL'
-			},
-			{
-				name: 'title',
-				type: 'SingleLine.Text'
-			},
-			{
-				name: 'children',
-				type: 'SingleLine.Text',
-				defaultValue: 'Anwendungsname'
-			},
-			{
-				name: 'imgSrc',
-				type: 'SingleLine.URL',
-				defaultValue:
-					'https://ppassets.azureedge.net/assets/images/db_logo.svg'
-			},
-			{
-				name: 'imgAlt',
-				type: 'SingleLine.Text'
-			},
-			{
-				name: 'imgWidth',
-				type: 'Decimal',
-				defaultValue: 34
-			},
-			{
-				name: 'imgHeight',
-				type: 'Decimal',
-				defaultValue: 24
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBBrand(props: DBBrandProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBBrandState>({
 		defaultValues: {
@@ -67,7 +27,7 @@ export default function DBBrand(props: DBBrandProps) {
 
 	return (
 		<div
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-brand', props.className)}>
 			<Show when={state.stylePath}>
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index 7b5a7d792b63..22c4570e0e78 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -1,68 +1,23 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
 import { cls } from '../../utils';
+import { ClickEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: true,
-		hasDisabledProp: true,
-		hasOnClick: true,
-		canvasSize: {
-			height: 'fixed', // 'fixed', 'controlled'
-			width: 'dynamic' // 'fixed', 'dynamic' (requires width property), 'controlled'
-		},
-		properties: [
-			{
-				name: 'children',
-				type: 'SingleLine.Text',
-				defaultValue: 'Button'
-			},
-			{
-				name: 'variant',
-				type: 'Enum',
-				values: [
-					{ key: 'Primary', name: 'Primary', value: 'primary' },
-					{ key: 'Outlined', name: 'Outlined', value: 'outlined' },
-					{
-						key: 'Text',
-						name: 'Text',
-						value: 'text'
-					},
-					{
-						key: 'Solid',
-						name: 'Solid',
-						value: 'solid'
-					}
-				],
-				defaultValue: 'primary'
-			},
-			{
-				name: 'icon',
-				type: 'Icon'
-			},
-			{ name: 'noText', type: 'TwoOptions' },
-			{
-				name: 'width',
-				powerAppsName: 'autoWidth', // width property is reserved in power apps
-				type: 'Enum',
-				defaultValue: 'auto',
-				values: [
-					{ key: 'Full', name: 'Full', value: 'full' },
-					{ key: 'Auto', name: 'Auto', value: 'auto' }
-				]
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBButton(props: DBButtonProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLButtonElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBButtonState>({
-		handleClick: (event: any) => {
+		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
@@ -78,8 +33,8 @@ export default function DBButton(props: DBButtonProps) {
 
 	return (
 		<button
+			ref={ref}
 			id={props.id}
-			ref={component}
 			class={cls('db-button', props.className, {
 				'is-icon-text-replace': props.noText
 			})}
@@ -97,7 +52,9 @@ export default function DBButton(props: DBButtonProps) {
 			aria-describedby={props.describedbyid}
 			aria-expanded={props.ariaexpanded}
 			aria-pressed={props.ariapressed}
-			onClick={(event) => state.handleClick(event)}>
+			onClick={(event: ClickEvent<HTMLButtonElement>) =>
+				state.handleClick(event)
+			}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
diff --git a/packages/components/src/components/button/model.ts b/packages/components/src/components/button/model.ts
index 9fb79499536e..5d3340e87552 100644
--- a/packages/components/src/components/button/model.ts
+++ b/packages/components/src/components/button/model.ts
@@ -76,7 +76,7 @@ export type DBButtonDefaultProps = {
 
 export type DBButtonProps = DBButtonDefaultProps &
 	GlobalProps &
-	ClickEventProps &
+	ClickEventProps<HTMLButtonElement> &
 	IconProps &
 	WidthProps;
 
@@ -84,4 +84,4 @@ export type DBButtonDefaultState = {};
 
 export type DBButtonState = DBButtonDefaultState &
 	GlobalState &
-	ClickEventState;
+	ClickEventState<HTMLButtonElement>;
diff --git a/packages/components/src/components/card/card.lite.tsx b/packages/components/src/components/card/card.lite.tsx
index 7d42a0a0b1f6..46ebcf7b7a11 100644
--- a/packages/components/src/components/card/card.lite.tsx
+++ b/packages/components/src/components/card/card.lite.tsx
@@ -1,39 +1,23 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import type { DBCardState, DBCardProps } from './model';
 import { cls } from '../../utils';
+import { ClickEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: [
-			{
-				name: 'variant',
-				type: 'Enum',
-				values: [
-					{
-						key: 'Default',
-						name: 'Default',
-						value: 'default'
-					},
-					{
-						key: 'Interactive',
-						name: 'Interactive',
-						value: 'interactive'
-					}
-				]
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBCard(props: DBCardProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCardState>({
-		handleClick: (event: any) => {
+		handleClick: (event: ClickEvent<HTMLElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
@@ -49,14 +33,16 @@ export default function DBCard(props: DBCardProps) {
 
 	return (
 		<div
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-card', props.className)}
 			data-variant={props.variant}
 			data-color-variant={props.colorVariant}
 			data-elevation={props.elevation}
 			data-spacing={props.spacing}
-			onClick={(event) => state.handleClick(event)}>
+			onClick={(event: ClickEvent<HTMLElement>) =>
+				state.handleClick(event)
+			}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
diff --git a/packages/components/src/components/card/model.ts b/packages/components/src/components/card/model.ts
index 34fcecf67947..4a9383019210 100644
--- a/packages/components/src/components/card/model.ts
+++ b/packages/components/src/components/card/model.ts
@@ -22,11 +22,13 @@ export type DBCardDefaultProps = {
 
 export type DBCardProps = DBCardDefaultProps &
 	GlobalProps &
-	ClickEventProps &
+	ClickEventProps<HTMLElement> &
 	ImageProps &
 	CardProps &
 	SpacingProps;
 
 export type DBCardDefaultState = {};
 
-export type DBCardState = DBCardDefaultState & GlobalState & ClickEventState;
+export type DBCardState = DBCardDefaultState &
+	GlobalState &
+	ClickEventState<HTMLElement>;
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 1f5229c6c560..57bfc4057a41 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -3,46 +3,27 @@ import {
 	onUpdate,
 	Show,
 	useMetadata,
+	useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBCheckboxProps, DBCheckboxState } from './model';
 import { uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
 import { cls } from '../../utils';
+import { ChangeEvent, InteractionEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: true,
-		hasDisabledProp: true,
-		properties: [
-			// jscpd:ignore-start
-			{
-				name: 'children',
-				type: 'SingleLine.Text',
-				defaultValue: 'Checkbox'
-			},
-			{ name: 'name', type: 'SingleLine.Text' },
-			// { name: 'checked', type: 'TwoOptions' },
-			{ name: 'value', type: 'SingleLine.Text', onChange: 'value' }, // $event.target["value"|"checked"|...]
-			// { name: 'disabled', type: 'TwoOptions' },
-			{ name: 'id', type: 'SingleLine.Text' }
-			// jscpd:ignore-end
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBCheckbox(props: DBCheckboxProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLInputElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCheckboxState>({
 		initialized: false,
 		_id: DEFAULT_ID,
-		_isValid: undefined,
 
-		handleChange: (event: any) => {
+		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -51,21 +32,16 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				props.change(event);
 			}
 
-			if (event.target?.validity?.valid != state._isValid) {
-				state._isValid = event.target?.validity?.valid;
-				if (props.validityChange) {
-					props.validityChange(!!event.target?.validity?.valid);
-				}
-			}
+			const target = event.target as HTMLInputElement;
 
 			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-			// VUE:this.$emit("update:checked", event.target.checked);
+			// VUE:this.$emit("update:checked", target.checked);
 
 			// Change event to work with reactive and template driven forms
-			// ANGULAR: this.propagateChange(event.target.checked);
-			// ANGULAR: this.writeValue(event.target.checked);
+			// ANGULAR: this.propagateChange(target.checked);
+			// ANGULAR: this.writeValue(target.checked);
 		},
-		handleBlur: (event: any) => {
+		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
@@ -74,7 +50,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				props.blur(event);
 			}
 		},
-		handleFocus: (event: any) => {
+		handleFocus: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onFocus) {
 				props.onFocus(event);
 			}
@@ -112,19 +88,9 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
 					checkboxElement.indeterminate = props.indeterminate;
 				}
-
-				if (props.defaultChecked !== undefined) {
-					// only set by JS: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#instance_properties_that_apply_only_to_elements_of_type_checkbox_or_radio
-					checkboxElement.defaultChecked = props.defaultChecked;
-				}
 			}
 		}
-	}, [
-		state.initialized,
-		props.indeterminate,
-		props.checked,
-		props.defaultChecked
-	]);
+	}, [state.initialized, props.indeterminate, props.checked]);
 
 	return (
 		<label
@@ -136,7 +102,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
 			<input
-				ref={component}
+				ref={ref}
 				type="checkbox"
 				id={state._id}
 				name={props.name}
@@ -146,9 +112,15 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				aria-describedby={props.describedbyid}
 				aria-invalid={props.invalid}
 				required={props.required}
-				onChange={(event) => state.handleChange(event)}
-				onBlur={(event) => state.handleBlur(event)}
-				onFocus={(event) => state.handleFocus(event)}
+				onChange={(event: ChangeEvent<HTMLInputElement>) =>
+					state.handleChange(event)
+				}
+				onBlur={(event: InteractionEvent<HTMLInputElement>) =>
+					state.handleBlur(event)
+				}
+				onFocus={(event: InteractionEvent<HTMLInputElement>) =>
+					state.handleFocus(event)
+				}
 			/>
 			<Show when={props.label}>
 				<span>{props.label}</span>
diff --git a/packages/components/src/components/checkbox/model.ts b/packages/components/src/components/checkbox/model.ts
index b497484501a3..b93460888b96 100644
--- a/packages/components/src/components/checkbox/model.ts
+++ b/packages/components/src/components/checkbox/model.ts
@@ -1,7 +1,6 @@
 import {
 	FocusEventProps,
 	FocusEventState,
-	ValidEventProps,
 	ChangeEventState,
 	ChangeEventProps,
 	GlobalProps,
@@ -26,9 +25,8 @@ export interface DBCheckboxDefaultProps {
 
 export type DBCheckboxProps = DBCheckboxDefaultProps &
 	GlobalProps &
-	ChangeEventProps &
-	FocusEventProps &
-	ValidEventProps &
+	ChangeEventProps<HTMLInputElement> &
+	FocusEventProps<HTMLInputElement> &
 	FormProps &
 	FormCheckProps;
 
@@ -36,7 +34,7 @@ export type DBCheckboxDefaultState = {};
 
 export type DBCheckboxState = DBCheckboxDefaultState &
 	GlobalState &
-	ChangeEventState &
-	FocusEventState &
+	ChangeEventState<HTMLInputElement> &
+	FocusEventState<HTMLInputElement> &
 	FormState &
 	InitializedState;
diff --git a/packages/components/src/components/code-docs/code-docs.lite.tsx b/packages/components/src/components/code-docs/code-docs.lite.tsx
index 05ccb9df137c..8b4da71900fc 100644
--- a/packages/components/src/components/code-docs/code-docs.lite.tsx
+++ b/packages/components/src/components/code-docs/code-docs.lite.tsx
@@ -2,7 +2,7 @@ import {
 	onMount,
 	Show,
 	Slot,
-	useMetadata,
+	useMetadata, useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBCodeDocsProps, DBCodeDocsState } from './model';
@@ -19,8 +19,7 @@ useMetadata({
 });
 
 export default function DBCodeDocs(props: DBCodeDocsProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCodeDocsState>({
 		open: false,
@@ -43,7 +42,7 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 
 	return (
 		<DBCard
-			ref={component}
+			ref={ref}
 			className={cls('db-code-docs', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
diff --git a/packages/components/src/components/divider/divider.lite.tsx b/packages/components/src/components/divider/divider.lite.tsx
index 2344b9786208..cf4694903fc4 100644
--- a/packages/components/src/components/divider/divider.lite.tsx
+++ b/packages/components/src/components/divider/divider.lite.tsx
@@ -1,42 +1,13 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import { DBDividerState, DBDividerProps } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: [
-			{
-				name: 'variant',
-				type: 'Enum',
-				values: [
-					{
-						key: 'Horizontal',
-						name: 'Horizontal',
-						value: 'horizontal'
-					},
-					{ key: 'Vertical', name: 'Vertical', value: 'vertical' }
-				],
-				defaultValue: 'horizontal'
-			},
-			{
-				name: 'margin',
-				type: 'Enum',
-				values: [
-					{ key: 'Default', name: 'Default', value: '_' },
-					{ key: 'None', name: 'None', value: 'none' }
-				],
-				defaultValue: '_'
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBDivider(props: DBDividerProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBDividerState>({});
 
@@ -49,7 +20,7 @@ export default function DBDivider(props: DBDividerProps) {
 
 	return (
 		<div
-			ref={component}
+			ref={ref}
 			id={props.id}
 			data-margin={props.margin}
 			data-variant={props.variant}
diff --git a/packages/components/src/components/drawer/drawer.lite.tsx b/packages/components/src/components/drawer/drawer.lite.tsx
index 9eb466f788a4..05e5fe20c158 100644
--- a/packages/components/src/components/drawer/drawer.lite.tsx
+++ b/packages/components/src/components/drawer/drawer.lite.tsx
@@ -23,7 +23,7 @@ useMetadata({
 });
 
 export default function DBDrawer(props: DBDrawerProps) {
-	const dialogRef = useRef<HTMLDialogElement>(null);
+	const ref = useRef<HTMLDialogElement>(null);
 	const dialogContainerRef = useRef<HTMLDivElement>(null);
 	const state = useStore<DBDrawerState>({
 		_id: DEFAULT_ID,
@@ -44,18 +44,18 @@ export default function DBDrawer(props: DBDrawerProps) {
 			}
 		},
 		handleDialogOpen: () => {
-			if (dialogRef) {
-				if (props.open && !dialogRef.open) {
+			if (ref) {
+				if (props.open && !ref.open) {
 					if (dialogContainerRef) {
 						dialogContainerRef.hidden = false;
 					}
 					if (props.backdrop === 'none') {
-						dialogRef.show();
+						ref.show();
 					} else {
-						dialogRef.showModal();
+						ref.showModal();
 					}
 				}
-				if (!props.open && dialogRef.open) {
+				if (!props.open && ref.open) {
 					if (dialogContainerRef) {
 						dialogContainerRef.hidden = true;
 					}
@@ -63,7 +63,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 						if (dialogContainerRef) {
 							dialogContainerRef.hidden = false;
 						}
-						dialogRef?.close();
+						ref?.close();
 					}, 401);
 				}
 			}
@@ -85,7 +85,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 	return (
 		<dialog
 			id={state._id}
-			ref={dialogRef}
+			ref={ref}
 			class="db-drawer"
 			onClick={(event) => {
 				state.handleClose(event);
diff --git a/packages/components/src/components/header/header.lite.tsx b/packages/components/src/components/header/header.lite.tsx
index ac0caa175b30..17beff27c4e4 100644
--- a/packages/components/src/components/header/header.lite.tsx
+++ b/packages/components/src/components/header/header.lite.tsx
@@ -3,7 +3,7 @@ import {
 	onUpdate,
 	Show,
 	Slot,
-	useMetadata,
+	useMetadata, useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBHeaderState, DBHeaderProps } from './model';
@@ -13,17 +13,11 @@ import { DBDrawer } from '../drawer';
 import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: [{ name: 'drawerOpen', type: 'TwoOptions' }]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBHeader(props: DBHeaderProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBHeaderState>({
 		_id: DEFAULT_ID,
@@ -68,7 +62,7 @@ export default function DBHeader(props: DBHeaderProps) {
 
 	return (
 		<header
-			ref={component}
+			ref={ref}
 			class={cls('db-header', props.className)}
 			id={state._id}
 			data-on-forcing-mobile={props.forceMobile && !state.forcedToMobile}>
diff --git a/packages/components/src/components/header/model.ts b/packages/components/src/components/header/model.ts
index ab6acd18d314..0f83b7d4a9e9 100644
--- a/packages/components/src/components/header/model.ts
+++ b/packages/components/src/components/header/model.ts
@@ -37,5 +37,5 @@ export interface DBHeaderDefaultState {
 
 export type DBHeaderState = DBHeaderDefaultState &
 	GlobalState &
-	ToggleEventState &
+	ToggleEventState<HTMLElement> &
 	InitializedState;
diff --git a/packages/components/src/components/icon/icon.lite.tsx b/packages/components/src/components/icon/icon.lite.tsx
index b4484a1e352a..8b30d7f79557 100644
--- a/packages/components/src/components/icon/icon.lite.tsx
+++ b/packages/components/src/components/icon/icon.lite.tsx
@@ -1,26 +1,13 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import type { DBIconState, DBIconProps } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: true,
-		properties: [
-			{
-				name: 'icon',
-				type: 'Icon',
-				defaultValue: 'None'
-			},
-			{ name: 'title', type: 'SingleLine.Text' }
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBIcon(props: DBIconProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBIconState>({});
 
@@ -33,7 +20,7 @@ export default function DBIcon(props: DBIconProps) {
 
 	return (
 		<span
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-icon', props.className)}
 			data-icon={props.icon}
diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
index 466c0a85f4d0..daeeed80b181 100644
--- a/packages/components/src/components/infotext/infotext.lite.tsx
+++ b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -1,60 +1,13 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import { DBInfotextProps, DBInfotextState } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: true,
-		canvasSize: {
-			height: 'fixed', // 'fixed', 'controlled'
-			width: 'controlled' // 'fixed', 'dynamic' (requires width property), 'controlled'
-		},
-		properties: [
-			// jscpd:ignore-start
-			{
-				name: 'children',
-				type: 'SingleLine.Text',
-				defaultValue: 'Infotext'
-			},
-			{
-				name: 'variant',
-				type: 'Enum',
-				values: [
-					{ key: 'Adaptive', name: 'Adaptive', value: 'adaptive' },
-					{ key: 'Critical', name: 'Critical', value: 'critical' },
-					{
-						key: 'Informational',
-						name: 'Informational',
-						value: 'informational'
-					},
-					{ key: 'Warning', name: 'Warning', value: 'warning' },
-					{
-						key: 'Successful',
-						name: 'Successful',
-						value: 'successful'
-					}
-				],
-				defaultValue: 'adaptive'
-			},
-			{
-				name: 'size',
-				type: 'Enum',
-				values: [
-					{ key: 'Medium', name: 'Medium', value: 'medium' },
-					{ key: 'Small', name: 'Small', value: 'small' }
-				],
-				defaultValue: 'medium'
-			}
-			// jscpd:ignore-end
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBInfotext(props: DBInfotextProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBInfotextState>({});
 	// jscpd:ignore-end
@@ -68,7 +21,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 	// TODO: Check if this should be a div or a span
 	return (
 		<span
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-infotext', props.className)}
 			title={props.title}
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 1830adbebf7d..e067757038a1 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -1,5 +1,11 @@
-import { For, onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
-import { DBIcon } from '../icon';
+import {
+	For,
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { cls, getMessageIcon, uuid } from '../../utils';
 import { DBInputProps, DBInputState } from './model';
 import {
@@ -7,59 +13,29 @@ import {
 	DEFAULT_LABEL,
 	DEFAULT_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
-import { KeyValueType } from '../../shared/model';
+import {
+	ChangeEvent,
+	InteractionEvent,
+	KeyValueType
+} from '../../shared/model';
 import { DBInfotext } from '../infotext';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: true,
-		hasDisabledProp: true,
-		canvasSize: {
-			height: 'fixed', // 'fixed', 'controlled'
-			width: 'controlled' // 'fixed', 'dynamic' (requires width property), 'controlled'
-		},
-		properties: [
-			{
-				name: 'label',
-				type: 'SingleLine.Text',
-				required: true,
-				defaultValue: 'Input'
-			},
-			{ name: 'placeholder', type: 'SingleLine.Text' },
-			{ name: 'value', type: 'SingleLine.Text', onChange: 'value' }, // $event.target["value"|"checked"|...]
-			{
-				name: 'icon',
-				type: 'Icon' // this is a custom type not provided by ms
-			},
-			{
-				name: 'iconAfter',
-				type: 'Icon'
-			},
-			{
-				name: 'variant',
-				type: 'DefaultVariant', // this is a custom type not provided by ms
-				defaultValue: 'adaptive'
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBInput(props: DBInputProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLInputElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBInputState>({
 		_id: DEFAULT_ID,
 		_messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX,
-		_isValid: undefined,
 		_dataListId: DEFAULT_ID,
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' '
 		},
-		handleChange: (event: any) => {
+		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -68,21 +44,16 @@ export default function DBInput(props: DBInputProps) {
 				props.change(event);
 			}
 
-			if (event.target?.validity?.valid != state._isValid) {
-				state._isValid = event.target?.validity?.valid;
-				if (props.validityChange) {
-					props.validityChange(!!event.target?.validity?.valid);
-				}
-			}
+			const target = event.target as HTMLInputElement;
 
 			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-			// VUE:this.$emit("update:value", event.target.value);
+			// VUE:this.$emit("update:value", target.value);
 
 			// Change event to work with reactive and template driven forms
-			// ANGULAR: this.propagateChange(event.target.value);
-			// ANGULAR: this.writeValue(event.target.value);
+			// ANGULAR: this.propagateChange(target.value);
+			// ANGULAR: this.writeValue(target.value);
 		},
-		handleBlur: (event: any) => {
+		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
@@ -91,7 +62,7 @@ export default function DBInput(props: DBInputProps) {
 				props.blur(event);
 			}
 		},
-		handleFocus: (event: any) => {
+		handleFocus: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onFocus) {
 				props.onFocus(event);
 			}
@@ -127,7 +98,7 @@ export default function DBInput(props: DBInputProps) {
 				{props.label ?? state.defaultValues.label}
 			</label>
 			<input
-				ref={component}
+				ref={ref}
 				id={state._id}
 				name={props.name}
 				type={props.type || 'text'}
@@ -136,7 +107,6 @@ export default function DBInput(props: DBInputProps) {
 				}
 				disabled={props.disabled}
 				required={props.required}
-				defaultValue={props.defaultValue}
 				step={props.step}
 				value={props.value}
 				aria-invalid={props.invalid}
@@ -146,12 +116,16 @@ export default function DBInput(props: DBInputProps) {
 				min={props.min}
 				readOnly={props.readOnly}
 				form={props.form}
-				autoComplete={props.autoComplete}
-				autoFocus={props.autoFocus}
 				pattern={props.pattern}
-				onChange={(event) => state.handleChange(event)}
-				onBlur={(event) => state.handleBlur(event)}
-				onFocus={(event) => state.handleFocus(event)}
+				onChange={(event: ChangeEvent<HTMLInputElement>) =>
+					state.handleChange(event)
+				}
+				onBlur={(event: InteractionEvent<HTMLInputElement>) =>
+					state.handleBlur(event)
+				}
+				onFocus={(event: InteractionEvent<HTMLInputElement>) =>
+					state.handleFocus(event)
+				}
 				list={props.dataList && state._dataListId}
 				aria-describedby={props.message && state._messageId}
 			/>
diff --git a/packages/components/src/components/input/model.ts b/packages/components/src/components/input/model.ts
index 0f18a7a27d60..b137c2a04f68 100644
--- a/packages/components/src/components/input/model.ts
+++ b/packages/components/src/components/input/model.ts
@@ -7,14 +7,12 @@ import {
 	FormMessageProps,
 	FormProps,
 	FormState,
+	FormTextProps,
 	GlobalProps,
 	GlobalState,
-	FormTextProps,
 	IconAfterProps,
 	IconProps,
 	KeyValueType,
-	ValidEventProps,
-	OverflowProps
 } from '../../shared/model';
 
 export type DBInputDefaultProps = {
@@ -60,9 +58,8 @@ export type DBInputDefaultProps = {
 export type DBInputProps = DBInputDefaultProps &
 	GlobalProps &
 	FormTextProps &
-	ChangeEventProps &
-	FocusEventProps &
-	ValidEventProps &
+	ChangeEventProps<HTMLInputElement> &
+	FocusEventProps<HTMLInputElement> &
 	FormProps &
 	IconProps &
 	IconAfterProps &
@@ -75,6 +72,6 @@ export type DBInputDefaultState = {
 
 export type DBInputState = DBInputDefaultState &
 	GlobalState &
-	ChangeEventState &
-	FocusEventState &
+	ChangeEventState<HTMLInputElement> &
+	FocusEventState<HTMLInputElement> &
 	FormState;
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
index 4c0375a35250..563352500a3a 100644
--- a/packages/components/src/components/link/link.lite.tsx
+++ b/packages/components/src/components/link/link.lite.tsx
@@ -1,61 +1,23 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBLinkState, DBLinkProps } from './model';
 import { cls } from '../../utils';
+import { ClickEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: false,
-	component: {
-		// MS Power Apps
-		includeIcon: true,
-		properties: [
-			// jscpd:ignore-start
-			{
-				name: 'children',
-				type: 'SingleLine.Text',
-				defaultValue: 'Link'
-			},
-			{
-				name: 'href',
-				type: 'SingleLine.URL',
-				defaultValue: 'https://www.deutschebahn.com/'
-			},
-			{ name: 'title', type: 'SingleLine.Text' },
-			{
-				name: 'variant',
-				type: 'Enum',
-				values: [
-					{ key: 'Adaptive', name: 'Adaptive', value: 'adaptive' },
-					{ key: 'Primary', name: 'primary', value: 'primary' },
-					{
-						key: 'Inline',
-						name: 'Inline',
-						value: 'inline'
-					}
-				],
-				defaultValue: 'adaptive'
-			},
-			{
-				name: 'target',
-				type: 'Enum',
-				values: [
-					{ key: '_self', name: '_self', value: '_self' },
-					{ key: '_blank', name: '_blank', value: '_blank' },
-					{ key: '_parent', name: '_parent', value: '_parent' },
-					{ key: '_top', name: '_top', value: '_top' }
-				],
-				defaultValue: '_blank'
-			}
-			// jscpd:ignore-end
-		]
-	}
+	isAttachedToShadowDom: false
 });
 
 export default function DBLink(props: DBLinkProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLAnchorElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBLinkState>({
-		handleClick: (event: any) => {
+		handleClick: (event: ClickEvent<HTMLAnchorElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
@@ -71,7 +33,7 @@ export default function DBLink(props: DBLinkProps) {
 
 	return (
 		<a
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-link', props.className)}
 			href={props.href}
@@ -79,16 +41,18 @@ export default function DBLink(props: DBLinkProps) {
 			target={props.target}
 			rel={props.rel}
 			role={props.role}
+			hrefLang={props.hreflang}
 			aria-disabled={props.disabled}
 			tabIndex={props.disabled ? -1 : 0}
 			aria-selected={props.selected}
 			aria-label={props.label}
-			hrefLang={props.hreflang}
 			aria-current={props.current}
 			data-size={props.size}
 			data-variant={props.variant}
 			data-content={props.content || 'internal'}
-			onClick={(event) => state.handleClick(event)}>
+			onClick={(event: ClickEvent<HTMLAnchorElement>) =>
+				state.handleClick(event)
+			}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
diff --git a/packages/components/src/components/link/model.ts b/packages/components/src/components/link/model.ts
index a077dff90dd3..58aa3f8d1588 100644
--- a/packages/components/src/components/link/model.ts
+++ b/packages/components/src/components/link/model.ts
@@ -15,9 +15,11 @@ export interface DBLinkDefaultProps {
 
 export type DBLinkProps = DBLinkDefaultProps &
 	GlobalProps &
-	ClickEventProps &
+	ClickEventProps<HTMLAnchorElement> &
 	LinkProps;
 
 export interface DBLinkDefaultState {}
 
-export type DBLinkState = DBLinkDefaultState & GlobalState & ClickEventState;
+export type DBLinkState = DBLinkDefaultState &
+	GlobalState &
+	ClickEventState<HTMLAnchorElement>;
diff --git a/packages/components/src/components/main-navigation/main-navigation.lite.tsx b/packages/components/src/components/main-navigation/main-navigation.lite.tsx
index 8e33071eae11..6af21712b1ea 100644
--- a/packages/components/src/components/main-navigation/main-navigation.lite.tsx
+++ b/packages/components/src/components/main-navigation/main-navigation.lite.tsx
@@ -1,19 +1,13 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import { DBMainNavigationState, DBMainNavigationProps } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBMainNavigation(props: DBMainNavigationProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBMainNavigationState>({});
 
@@ -27,7 +21,7 @@ export default function DBMainNavigation(props: DBMainNavigationProps) {
 
 	return (
 		<nav
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-main-navigation', props.className)}>
 			<Show when={state.stylePath}>
diff --git a/packages/components/src/components/navigation-item/model.ts b/packages/components/src/components/navigation-item/model.ts
index a72709f69bb1..891e73f01e93 100644
--- a/packages/components/src/components/navigation-item/model.ts
+++ b/packages/components/src/components/navigation-item/model.ts
@@ -40,7 +40,7 @@ export interface DBNavigationItemDefaultProps {
 
 export type DBNavigationItemProps = DBNavigationItemDefaultProps &
 	GlobalProps &
-	ClickEventProps &
+	ClickEventProps<HTMLButtonElement> &
 	IconProps &
 	WidthProps &
 	NavigationBackButtonProps;
@@ -58,6 +58,6 @@ export interface DBNavigationItemDefaultState {
 }
 
 export type DBNavigationItemState = DBNavigationItemDefaultState &
-	ClickEventState &
+	ClickEventState<HTMLButtonElement> &
 	GlobalState &
 	InitializedState;
diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
index 93869f2a18fe..80770bc658c4 100644
--- a/packages/components/src/components/navigation-item/navigation-item.lite.tsx
+++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -4,25 +4,21 @@ import {
 	Show,
 	Slot,
 	useMetadata,
+	useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBNavigationItemState, DBNavigationItemProps } from './model';
 import { DBButton } from '../button';
 import { cls, uuid } from '../../utils';
 import { DEFAULT_BACK } from '../../shared/constants';
+import { ClickEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBNavigationItem(props: DBNavigationItemProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLLIElement>(null);
 
 	// jscpd:ignore-start
 	const state = useStore<DBNavigationItemState>({
@@ -31,7 +27,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 		hasSubNavigation: true,
 		isSubNavigationExpanded: false,
 		subNavigationId: 'sub-navigation-' + uuid(),
-		handleClick: (event: any) => {
+		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
@@ -82,7 +78,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 
 	return (
 		<li
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
@@ -101,7 +97,9 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 					aria-expanded={state.isSubNavigationExpanded}
 					className="db-navigation-item-expand-button"
 					disabled={props.disabled}
-					onClick={(event) => state.handleClick(event)}>
+					onClick={(event: ClickEvent<HTMLButtonElement>) =>
+						state.handleClick(event)
+					}>
 					{props.children}
 				</button>
 
diff --git a/packages/components/src/components/page/page.lite.tsx b/packages/components/src/components/page/page.lite.tsx
index 469d25be41d8..e3e9bf98775c 100644
--- a/packages/components/src/components/page/page.lite.tsx
+++ b/packages/components/src/components/page/page.lite.tsx
@@ -2,24 +2,18 @@ import {
 	onMount,
 	Show,
 	Slot,
-	useMetadata,
+	useMetadata, useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBPageProps, DBPageState } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBPage(props: DBPageProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBPageState>({
 		fontsLoaded: false
@@ -43,7 +37,7 @@ export default function DBPage(props: DBPageProps) {
 
 	return (
 		<div
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-page', props.className, {
 				'fixed-header-footer': props.type === 'fixedHeaderFooter'
diff --git a/packages/components/src/components/popover/model.ts b/packages/components/src/components/popover/model.ts
index 7dbbbc078c79..7587aeb83d41 100644
--- a/packages/components/src/components/popover/model.ts
+++ b/packages/components/src/components/popover/model.ts
@@ -26,4 +26,4 @@ export interface DBPopoverDefaultState {}
 
 export type DBPopoverState = DBPopoverDefaultState &
 	GlobalState &
-	ClickEventState;
+	ClickEventState<HTMLElement>;
diff --git a/packages/components/src/components/popover/popover.lite.tsx b/packages/components/src/components/popover/popover.lite.tsx
index 069b730961e4..f943d1f37e90 100644
--- a/packages/components/src/components/popover/popover.lite.tsx
+++ b/packages/components/src/components/popover/popover.lite.tsx
@@ -1,24 +1,25 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBPopoverState, DBPopoverProps } from './model';
 import { cls, uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
+import { ClickEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBPopover(props: DBPopoverProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBPopoverState>({
 		_id: DEFAULT_ID,
-		handleClick: (event: any) => {
+		handleClick: (event: ClickEvent<HTMLElement>) => {
 			event.stopPropagation();
 		}
 	});
@@ -33,7 +34,7 @@ export default function DBPopover(props: DBPopoverProps) {
 
 	return (
 		<i
-			ref={component}
+			ref={ref}
 			id={state._id}
 			class={cls('db-popover', props.className)}
 			data-spacing={props.spacing}
@@ -43,7 +44,9 @@ export default function DBPopover(props: DBPopoverProps) {
 			data-delay={props.delay}
 			data-width={props.width}
 			data-placement={props.placement}
-			onClick={(event) => state.handleClick(event)}>
+			onClick={(event: ClickEvent<HTMLElement>) =>
+				state.handleClick(event)
+			}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
diff --git a/packages/components/src/components/radio/model.ts b/packages/components/src/components/radio/model.ts
index dcc32da5a629..0571c2e66ca7 100644
--- a/packages/components/src/components/radio/model.ts
+++ b/packages/components/src/components/radio/model.ts
@@ -1,7 +1,6 @@
 import {
 	FocusEventProps,
 	FocusEventState,
-	ValidEventProps,
 	ChangeEventState,
 	ChangeEventProps,
 	GlobalProps,
@@ -19,9 +18,8 @@ export interface DBRadioDefaultProps {
 
 export type DBRadioProps = DBRadioDefaultProps &
 	GlobalProps &
-	ChangeEventProps &
-	FocusEventProps &
-	ValidEventProps &
+	ChangeEventProps<HTMLInputElement> &
+	FocusEventProps<HTMLInputElement> &
 	FormProps &
 	FormCheckProps;
 
@@ -29,7 +27,7 @@ export type DBRadioDefaultState = {};
 
 export type DBRadioState = DBRadioDefaultState &
 	GlobalState &
-	ChangeEventState &
-	FocusEventState &
+	ChangeEventState<HTMLInputElement> &
+	FocusEventState<HTMLInputElement> &
 	FormState &
 	InitializedState;
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index f07ea2a788b0..37fe1e532fb3 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -3,47 +3,26 @@ import {
 	onUpdate,
 	Show,
 	useMetadata,
+	useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBRadioProps, DBRadioState } from './model';
 import { uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
 import { cls } from '../../utils';
+import { ChangeEvent, InteractionEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		hasDisabledProp: true,
-		properties: [
-			// jscpd:ignore-start
-			{
-				name: 'children',
-				type: 'SingleLine.Text',
-				defaultValue: 'Radio'
-			},
-			{ name: 'name', type: 'SingleLine.Text' },
-			{ name: 'id', type: 'SingleLine.Text' },
-			{ name: 'value', type: 'SingleLine.Text', onChange: 'value' } // $event.target["value"|"checked"|...]
-			// TODO: We'll most likely need these later on
-			// { name: 'checked', type: 'TwoOptions' },
-			// { name: 'disabled', type: 'TwoOptions' },
-			// jscpd:ignore-end
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBRadio(props: DBRadioProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLInputElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBRadioState>({
 		initialized: false,
 		_id: DEFAULT_ID,
-		_isValid: undefined,
-
-		handleChange: (event: any) => {
+		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -52,20 +31,16 @@ export default function DBRadio(props: DBRadioProps) {
 				props.change(event);
 			}
 
-			if (event.target?.validity?.valid != state._isValid) {
-				state._isValid = event.target?.validity?.valid;
-				if (props.validityChange) {
-					props.validityChange(!!event.target?.validity?.valid);
-				}
-			}
+			const target = event.target as HTMLInputElement;
+
 			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-			// VUE:this.$emit("update:checked", event.target.checked);
+			// VUE:this.$emit("update:checked", target.checked);
 
 			// Change event to work with reactive and template driven forms
-			// ANGULAR: this.propagateChange(event.target.checked);
-			// ANGULAR: this.writeValue(event.target.checked);
+			// ANGULAR: this.propagateChange(target.checked);
+			// ANGULAR: this.writeValue(target.checked);
 		},
-		handleBlur: (event: any) => {
+		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
@@ -74,7 +49,7 @@ export default function DBRadio(props: DBRadioProps) {
 				props.blur(event);
 			}
 		},
-		handleFocus: (event: any) => {
+		handleFocus: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onFocus) {
 				props.onFocus(event);
 			}
@@ -104,11 +79,6 @@ export default function DBRadio(props: DBRadioProps) {
 				if (props.checked != undefined) {
 					radioElement.checked = true;
 				}
-
-				if (props.defaultChecked !== undefined) {
-					// only set by JS: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#instance_properties_that_apply_only_to_elements_of_type_checkbox_or_radio
-					radioElement.defaultChecked = props.defaultChecked;
-				}
 			}
 		}
 	}, [state.initialized]);
@@ -123,7 +93,7 @@ export default function DBRadio(props: DBRadioProps) {
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
 			<input
-				ref={component}
+				ref={ref}
 				type="radio"
 				id={state._id}
 				name={props.name}
@@ -133,9 +103,15 @@ export default function DBRadio(props: DBRadioProps) {
 				aria-invalid={props.invalid}
 				value={props.value}
 				required={props.required}
-				onChange={(event) => state.handleChange(event)}
-				onBlur={(event) => state.handleBlur(event)}
-				onFocus={(event) => state.handleFocus(event)}
+				onChange={(event: ChangeEvent<HTMLInputElement>) =>
+					state.handleChange(event)
+				}
+				onBlur={(event: InteractionEvent<HTMLInputElement>) =>
+					state.handleBlur(event)
+				}
+				onFocus={(event: InteractionEvent<HTMLInputElement>) =>
+					state.handleFocus(event)
+				}
 			/>
 			<Show when={props.label}>
 				<span>{props.label}</span>
diff --git a/packages/components/src/components/section/section.lite.tsx b/packages/components/src/components/section/section.lite.tsx
index eb2f1b95beba..8fd29dcd6f13 100644
--- a/packages/components/src/components/section/section.lite.tsx
+++ b/packages/components/src/components/section/section.lite.tsx
@@ -1,19 +1,13 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import { DBSectionState, DBSectionProps } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBSection(props: DBSectionProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBSectionState>({});
 
@@ -26,7 +20,7 @@ export default function DBSection(props: DBSectionProps) {
 
 	return (
 		<section
-			ref={component}
+			ref={ref}
 			id={props.id}
 			className={cls('db-section', props.className)}
 			data-size={props.size || 'medium'}>
diff --git a/packages/components/src/components/select/model.ts b/packages/components/src/components/select/model.ts
index f67f83fb6792..5b6fef5b1caa 100644
--- a/packages/components/src/components/select/model.ts
+++ b/packages/components/src/components/select/model.ts
@@ -11,9 +11,7 @@ import {
 	FormState,
 	GlobalProps,
 	GlobalState,
-	IconProps,
-	OverflowProps,
-	ValidEventProps
+	IconProps
 } from '../../shared/model';
 
 export interface DBSelectDefaultProps {
@@ -53,10 +51,9 @@ export type DBSelectOptionType = {
 
 export type DBSelectProps = DBSelectDefaultProps &
 	GlobalProps &
-	ClickEventProps &
-	ChangeEventProps &
-	FocusEventProps &
-	ValidEventProps &
+	ClickEventProps<HTMLSelectElement> &
+	ChangeEventProps<HTMLSelectElement> &
+	FocusEventProps<HTMLSelectElement> &
 	FormProps &
 	DefaultVariantProps &
 	IconProps &
@@ -69,7 +66,7 @@ export interface DBSelectDefaultState {
 
 export type DBSelectState = DBSelectDefaultState &
 	GlobalState &
-	ClickEventState &
-	ChangeEventState &
-	FocusEventState &
+	ClickEventState<HTMLSelectElement> &
+	ChangeEventState<HTMLSelectElement> &
+	FocusEventState<HTMLSelectElement> &
 	FormState;
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index e88a9fbed87c..3858e2123fe3 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -4,6 +4,7 @@ import {
 	onUpdate,
 	Show,
 	useMetadata,
+	useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
@@ -15,30 +16,25 @@ import {
 	DEFAULT_PLACEHOLDER_ID_SUFFIX
 } from '../../shared/constants';
 import { DBInfotext } from '../infotext';
+import { ChangeEvent, ClickEvent, InteractionEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBSelect(props: DBSelectProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLSelectElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBSelectState>({
 		_id: DEFAULT_ID,
 		_messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX,
 		_placeholderId: DEFAULT_ID + DEFAULT_PLACEHOLDER_ID_SUFFIX,
-		_isValid: undefined,
-		handleClick: (event: any) => {
+		handleClick: (event: ClickEvent<HTMLSelectElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
 		},
-		handleChange: (event: any) => {
+		handleChange: (event: ChangeEvent<HTMLSelectElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -46,22 +42,16 @@ export default function DBSelect(props: DBSelectProps) {
 			if (props.change) {
 				props.change(event);
 			}
-
-			if (event.target?.validity?.valid != state._isValid) {
-				state._isValid = event.target?.validity?.valid;
-				if (props.validityChange) {
-					props.validityChange(!!event.target?.validity?.valid);
-				}
-			}
+			const target = event.target as HTMLSelectElement;
 
 			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-			// VUE:this.$emit("update:value", event.target.value);
+			// VUE:this.$emit("update:value", target.value);
 
 			// Change event to work with reactive and template driven forms
-			// ANGULAR: this.propagateChange(event.target.checked);
-			// ANGULAR: this.writeValue(event.target.checked);
+			// ANGULAR: this.propagateChange(target.value);
+			// ANGULAR: this.writeValue(target.value);
 		},
-		handleBlur: (event: any) => {
+		handleBlur: (event: InteractionEvent<HTMLSelectElement>) => {
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
@@ -70,7 +60,7 @@ export default function DBSelect(props: DBSelectProps) {
 				props.blur(event);
 			}
 		},
-		handleFocus: (event: any) => {
+		handleFocus: (event: InteractionEvent<HTMLSelectElement>) => {
 			if (props.onFocus) {
 				props.onFocus(event);
 			}
@@ -107,17 +97,25 @@ export default function DBSelect(props: DBSelectProps) {
 			</Show>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
-				ref={component}
+				ref={ref}
 				aria-invalid={props.invalid}
 				required={props.required}
 				disabled={props.disabled}
 				id={state._id}
 				name={props.name}
 				value={props.value}
-				onClick={(event) => state.handleClick(event)}
-				onChange={(event) => state.handleChange(event)}
-				onBlur={(event) => state.handleBlur(event)}
-				onFocus={(event) => state.handleFocus(event)}
+				onClick={(event: ClickEvent<HTMLSelectElement>) =>
+					state.handleClick(event)
+				}
+				onChange={(event: ChangeEvent<HTMLSelectElement>) =>
+					state.handleChange(event)
+				}
+				onBlur={(event: InteractionEvent<HTMLSelectElement>) =>
+					state.handleBlur(event)
+				}
+				onFocus={(event: InteractionEvent<HTMLSelectElement>) =>
+					state.handleFocus(event)
+				}
 				aria-describedby={
 					(props.message && state._messageId) || state._placeholderId
 				}>
diff --git a/packages/components/src/components/tab-bar/tab-bar.lite.tsx b/packages/components/src/components/tab-bar/tab-bar.lite.tsx
index e36f6097fd72..c691eb3ca6ad 100644
--- a/packages/components/src/components/tab-bar/tab-bar.lite.tsx
+++ b/packages/components/src/components/tab-bar/tab-bar.lite.tsx
@@ -1,28 +1,15 @@
-import { For, onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {For, onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import { DBTab } from '../tab';
 import type { DBTabProps } from '../tab/model';
 import type { DBTabBarState, DBTabBarProps } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: [
-			{ name: 'name', type: 'SingleLine.Text' },
-			{
-				name: 'tabs',
-				type: 'Enum',
-				values: [{ key: 'TODO', name: 'TODO', value: 'TODO' }]
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBTabBar(props: DBTabBarProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTabBarState>({
 		convertTabs(tabs: any[] | string | undefined) {
@@ -49,7 +36,7 @@ export default function DBTabBar(props: DBTabBarProps) {
 
 	return (
 		<div
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('cmp-tab-bar', props.className)}
 			role="tablist">
diff --git a/packages/components/src/components/tab/tab.lite.tsx b/packages/components/src/components/tab/tab.lite.tsx
index 985e2a62b1ac..c90248cb6736 100644
--- a/packages/components/src/components/tab/tab.lite.tsx
+++ b/packages/components/src/components/tab/tab.lite.tsx
@@ -11,28 +11,11 @@ import { uuid } from '../../utils';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: [
-			{ name: 'name', type: 'SingleLine.Text' },
-			{ name: 'label', type: 'SingleLine.Text' },
-			{
-				name: 'active',
-				type: 'Enum',
-				values: [
-					{ key: 'False', name: 'False', value: 'false' },
-					{ key: 'True', name: 'True', value: 'true' }
-				]
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBTab(props: DBTabProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	const formRef = useRef<HTMLInputElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTabState>({
@@ -53,7 +36,7 @@ export default function DBTab(props: DBTabProps) {
 
 	return (
 		<div
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-tab', props.className)}>
 			<Show when={state.stylePath}>
diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx
index a0ddcb6dc4b8..cb85a4292072 100644
--- a/packages/components/src/components/tag/tag.lite.tsx
+++ b/packages/components/src/components/tag/tag.lite.tsx
@@ -1,48 +1,14 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
 import { DBButton } from '../button';
 import { DBTagProps, DBTagState } from './model';
 import { cls } from '../../utils';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		includeIcon: true,
-		isFormComponent: true,
-		properties: [
-			{
-				name: 'children',
-				type: 'SingleLine.Text',
-				defaultValue: 'Tag'
-			},
-			// { name: 'disabled', type: 'TwoOptions' },
-			{
-				name: 'variant',
-				type: 'Enum',
-				values: [
-					{ key: 'Adaptive', name: 'Adaptive', value: 'adaptive' },
-					{ key: 'Critical', name: 'Critical', value: 'critical' },
-					{
-						key: 'Informational',
-						name: 'Informational',
-						value: 'informational'
-					},
-					{ key: 'Warning', name: 'Warning', value: 'warning' },
-					{
-						key: 'Successful',
-						name: 'Successful',
-						value: 'successful'
-					}
-				],
-				defaultValue: 'adaptive'
-			}
-			// type
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBTag(props: DBTagProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	const state = useStore<DBTagState>({
 		handleRemove: () => {
 			if (props.onRemove) {
@@ -67,7 +33,7 @@ export default function DBTag(props: DBTagProps) {
 
 	return (
 		<div
-			ref={component}
+			ref={ref}
 			id={props.id}
 			class={cls('db-tag', props.className)}
 			data-disabled={props.disabled}
diff --git a/packages/components/src/components/textarea/model.ts b/packages/components/src/components/textarea/model.ts
index 3ce2381385a1..800c9f441d48 100644
--- a/packages/components/src/components/textarea/model.ts
+++ b/packages/components/src/components/textarea/model.ts
@@ -9,9 +9,7 @@ import {
 	FormState,
 	GlobalProps,
 	GlobalState,
-	FormTextProps,
-	OverflowProps,
-	ValidEventProps
+	FormTextProps
 } from '../../shared/model';
 
 export interface DBTextareaDefaultProps {
@@ -39,10 +37,9 @@ export interface DBTextareaDefaultProps {
 }
 
 export type DBTextareaProps = DBTextareaDefaultProps &
-	ChangeEventProps &
+	ChangeEventProps<HTMLTextAreaElement> &
 	DefaultVariantProps &
-	FocusEventProps &
-	ValidEventProps &
+	FocusEventProps<HTMLTextAreaElement> &
 	FormProps &
 	GlobalProps &
 	FormTextProps &
@@ -51,7 +48,7 @@ export type DBTextareaProps = DBTextareaDefaultProps &
 export interface DBTextareaDefaultState {}
 
 export type DBTextareaState = DBTextareaDefaultState &
-	ChangeEventState &
-	FocusEventState &
+	ChangeEventState<HTMLTextAreaElement> &
+	FocusEventState<HTMLTextAreaElement> &
 	FormState &
 	GlobalState;
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index de6c2d0cdb9b..46f81b5c5267 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -1,4 +1,10 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBTextareaProps, DBTextareaState } from './model';
 import { DBInfotext } from '../infotext';
 import { cls, getMessageIcon, uuid } from '../../utils';
@@ -7,49 +13,24 @@ import {
 	DEFAULT_LABEL,
 	DEFAULT_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
+import { ChangeEvent, InteractionEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		hasDisabledProp: true,
-		canvasSize: {
-			height: 'controlled', // 'fixed', 'controlled'
-			width: 'controlled' // 'fixed', 'dynamic' (requires width property), 'controlled'
-		},
-		properties: [
-			{
-				name: 'label',
-				type: 'SingleLine.Text',
-				defaultValue: 'Textarea',
-				required: true
-			},
-			{ name: 'placeholder', type: 'SingleLine.Text' },
-			{ name: 'value', type: 'SingleLine.Text', onChange: 'value' }, // $event.target["value"|"checked"|...]
-			{
-				name: 'variant',
-				type: 'DefaultVariant', // this is a custom type not provided by ms
-				defaultValue: 'adaptive'
-			}
-		]
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBTextarea(props: DBTextareaProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLTextAreaElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTextareaState>({
 		_id: DEFAULT_ID,
 		_messageId: DEFAULT_ID + DEFAULT_MESSAGE_ID_SUFFIX,
-		_isValid: undefined,
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' ',
 			rows: '4'
 		},
-		handleChange: (event: any) => {
+		handleChange: (event: ChangeEvent<HTMLTextAreaElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -57,22 +38,16 @@ export default function DBTextarea(props: DBTextareaProps) {
 			if (props.change) {
 				props.change(event);
 			}
-
-			if (event.target?.validity?.valid != state._isValid) {
-				state._isValid = event.target?.validity?.valid;
-				if (props.validityChange) {
-					props.validityChange(!!event.target?.validity?.valid);
-				}
-			}
+			const target = event.target as HTMLTextAreaElement;
 
 			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-			// VUE:this.$emit("update:value", event.target.value);
+			// VUE:this.$emit("update:value", target.value);
 
 			// Change event to work with reactive and template driven forms
-			// ANGULAR: this.propagateChange(event.target.value);
-			// ANGULAR: this.writeValue(event.target.value);
+			// ANGULAR: this.propagateChange(target.value);
+			// ANGULAR: this.writeValue(target.value);
 		},
-		handleBlur: (event: any) => {
+		handleBlur: (event: InteractionEvent<HTMLTextAreaElement>) => {
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
@@ -81,7 +56,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				props.blur(event);
 			}
 		},
-		handleFocus: (event: any) => {
+		handleFocus: (event: InteractionEvent<HTMLTextAreaElement>) => {
 			if (props.onFocus) {
 				props.onFocus(event);
 			}
@@ -104,7 +79,6 @@ export default function DBTextarea(props: DBTextareaProps) {
 
 	return (
 		<div
-			ref={component}
 			class={cls('db-textarea', props.className)}
 			data-label-variant={props.labelVariant}
 			data-variant={props.variant}>
@@ -117,10 +91,9 @@ export default function DBTextarea(props: DBTextareaProps) {
 			</label>
 
 			<textarea
+				ref={ref}
 				id={state._id}
 				data-resize={props.resize}
-				autoComplete={props.autoComplete}
-				autoFocus={props.autoFocus}
 				disabled={props.disabled}
 				required={props.required}
 				readOnly={props.readOnly}
@@ -131,10 +104,15 @@ export default function DBTextarea(props: DBTextareaProps) {
 				name={props.name}
 				wrap={props.wrap}
 				spellcheck={props.spellCheck}
-				onChange={(event) => state.handleChange(event)}
-				onBlur={(event) => state.handleBlur(event)}
-				onFocus={(event) => state.handleFocus(event)}
-				defaultValue={props.defaultValue ?? props.children}
+				onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
+					state.handleChange(event)
+				}
+				onBlur={(event: InteractionEvent<HTMLTextAreaElement>) =>
+					state.handleBlur(event)
+				}
+				onFocus={(event: InteractionEvent<HTMLTextAreaElement>) =>
+					state.handleFocus(event)
+				}
 				value={props.value}
 				aria-describedby={props.message && state._messageId}
 				placeholder={
diff --git a/packages/components/src/components/tooltip/model.ts b/packages/components/src/components/tooltip/model.ts
index 59c208360693..f6e41926e541 100644
--- a/packages/components/src/components/tooltip/model.ts
+++ b/packages/components/src/components/tooltip/model.ts
@@ -21,4 +21,4 @@ export interface DBTooltipDefaultState {}
 
 export type DBTooltipState = DBTooltipDefaultState &
 	GlobalState &
-	ClickEventState;
+	ClickEventState<HTMLElement>;
diff --git a/packages/components/src/components/tooltip/tooltip.lite.tsx b/packages/components/src/components/tooltip/tooltip.lite.tsx
index ec01e74f901c..88a5d1e01882 100644
--- a/packages/components/src/components/tooltip/tooltip.lite.tsx
+++ b/packages/components/src/components/tooltip/tooltip.lite.tsx
@@ -1,24 +1,25 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBTooltipProps, DBTooltipState } from './model';
 import { cls, uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
+import { ClickEvent } from '../../shared/model';
 
 useMetadata({
-	isAttachedToShadowDom: true,
-	component: {
-		// MS Power Apps
-		includeIcon: false,
-		properties: []
-	}
+	isAttachedToShadowDom: true
 });
 
 export default function DBTooltip(props: DBTooltipProps) {
-	// This is used as forwardRef
-	let component: any;
+	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTooltipState>({
 		_id: DEFAULT_ID,
-		handleClick: (event: any) => {
+		handleClick: (event: ClickEvent<HTMLElement>) => {
 			event.stopPropagation();
 		}
 	});
@@ -35,7 +36,7 @@ export default function DBTooltip(props: DBTooltipProps) {
 	return (
 		<i
 			role="tooltip"
-			ref={component}
+			ref={ref}
 			className={cls('db-tooltip', props.className)}
 			id={state._id}
 			data-emphasis={props.emphasis}
@@ -46,7 +47,9 @@ export default function DBTooltip(props: DBTooltipProps) {
 			data-placement={props.placement}
 			// TODO: clarify this attribute and we need to set it statically
 			data-gap="true"
-			onClick={(event) => state.handleClick(event)}>
+			onClick={(event: ClickEvent<HTMLElement>) =>
+				state.handleClick(event)
+			}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index 7eb5b5028eaa..2888a9c8d51a 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -153,11 +153,6 @@ export type EmphasisProps = {
 };
 
 export type FormProps = {
-	/**
-	 * React specific attribute to set default value.
-	 */
-	defaultValue?: any;
-
 	/**
 	 * The disabled attribute can be set to keep a user from clicking on the form element.
 	 */
@@ -191,14 +186,6 @@ export type FormProps = {
 };
 
 export type FormTextProps = {
-	/**
-	 * This attribute indicates whether the value of the control can be automatically completed by the browser.
-	 */
-	autoComplete?: 'on' | 'off';
-	/**
-	 * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.
-	 */
-	autoFocus?: boolean;
 	/**
 	 * Maximum length (number of characters) of value
 	 */
@@ -219,13 +206,6 @@ export type FormCheckProps = {
 	 */
 	checked?: boolean;
 
-	/**
-	 * Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
-	 * Vue: according to our research this property should not be used. Please refer to v-model instead.
-	 * cf. https://react.carbondesignsystem.com/?path=/docs/components-checkbox--overview#component-api vs. https://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default
-	 */
-	defaultChecked?: boolean;
-
 	/**
 	 * Hide the label of a radio/checkbox.
 	 */
@@ -253,7 +233,6 @@ export type FormMessageProps = {
 };
 
 export type FormState = {
-	_isValid?: boolean | undefined;
 	_messageId?: string;
 };
 
@@ -318,23 +297,24 @@ export type CardProps = {
 	elevation?: 'default' | 'none';
 };
 
-export type ClickEventProps = {
+export type ClickEvent<T> = MouseEvent;
+export type ClickEventProps<T> = {
 	/**
 	 * React specific onClick to pass to forward ref.
 	 */
-	onClick?: (event: any) => void;
+	onClick?: (event: ClickEvent<T>) => void;
 };
 
-export type ClickEventState = {
-	handleClick: (event: any) => void;
+export type ClickEventState<T> = {
+	handleClick: (event: ClickEvent<T>) => void;
 };
 
 export type ToggleEventProps = {
 	onToggle?: (open: boolean) => void;
 };
 
-export type ToggleEventState = {
-	toggle?: (event?: any) => void;
+export type ToggleEventState<T> = {
+	toggle?: (event: ClickEvent<T>) => void;
 };
 
 export type CloseEventProps = {
@@ -348,33 +328,30 @@ export type CloseEventState = {
 	handleClose?: (event: any) => void;
 };
 
-export type ChangeEventProps = {
-	change?: (event: any) => void;
-	onChange?: (event: any) => void;
+export type ChangeEvent<T> = Event;
+export type ChangeEventProps<T> = {
+	change?: (event: ChangeEvent<T>) => void;
+	onChange?: (event: ChangeEvent<T>) => void;
 };
 
-export type ChangeEventState = {
-	handleChange: (event: any) => void;
+export type ChangeEventState<T> = {
+	handleChange: (event: ChangeEvent<T>) => void;
 };
 
-export type FocusEventProps = {
-	blur?: (event: any) => void;
-	onBlur?: (event: any) => void;
-	focus?: (event: any) => void;
-	onFocus?: (event: any) => void;
-};
+export type InteractionEvent<T> = FocusEvent;
 
-export type FocusEventState = {
-	handleBlur: (event: any) => void;
-	handleFocus: (event: any) => void;
+export type FocusEventProps<T> = {
+	blur?: (event: InteractionEvent<T>) => void;
+	onBlur?: (event: InteractionEvent<T>) => void;
+	focus?: (event: InteractionEvent<T>) => void;
+	onFocus?: (event: InteractionEvent<T>) => void;
 };
 
-export type ValidEventProps = {
-	validityChange?: (valid: boolean) => void;
+export type FocusEventState<T> = {
+	handleBlur: (event: InteractionEvent<T>) => void;
+	handleFocus: (event: InteractionEvent<T>) => void;
 };
 
-export type NestedRefComponentType = { getFormRef?: () => { current?: any } };
-
 export type InnerCloseButtonProps = {
 	/**
 	 * The closeButtonId attribute changes the id inside the close button.
diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts
index 98f6aa6cdc66..6d7fa878fd43 100644
--- a/packages/components/src/utils/index.ts
+++ b/packages/components/src/utils/index.ts
@@ -59,3 +59,26 @@ export const getMessageIcon = (
 		  ? 'none'
 		  : undefined;
 };
+
+export const filterPassingProps = (props: any): any =>
+	Object.keys(props)
+		.filter(
+			(key) =>
+				key.startsWith('data-') ||
+				key.startsWith('aria-') ||
+				key.startsWith('default') ||
+				key.startsWith('auto') ||
+				key.startsWith('on')
+		)
+		.reduce((obj: any, key: string) => {
+			obj[key] = props[key];
+			return obj;
+		}, {});
+
+export default {
+	filterPassingProps,
+	getMessageIcon,
+	cls,
+	addAttributeToChildren,
+	uuid
+};
diff --git a/showcases/patternhub/scripts/get-example-file.js b/showcases/patternhub/scripts/get-example-file.js
index 8872ed2e623e..19800a964006 100644
--- a/showcases/patternhub/scripts/get-example-file.js
+++ b/showcases/patternhub/scripts/get-example-file.js
@@ -49,7 +49,7 @@ const getOption = (optionName, tsType) => {
 		return `${optionName}="primary"`;
 	}
 
-	if (tsType.name === 'signature' && tsType.raw === '(event: any) => void') {
+	if (tsType.name === 'signature' && tsType.raw.startsWith('(event')) {
 		return `${optionName}={(event) => console.log(event)}`;
 	}
 
diff --git a/showcases/patternhub/scripts/get-properties-file.js b/showcases/patternhub/scripts/get-properties-file.js
index 509bfbf78ced..d5ed456db75f 100644
--- a/showcases/patternhub/scripts/get-properties-file.js
+++ b/showcases/patternhub/scripts/get-properties-file.js
@@ -61,7 +61,10 @@ const getPropertiesFile = ({ displayName, description, props }) => {
 		propTable += `| ${prop.tsType.type ?? prop.tsType.name} `;
 		propTable += `| ${
 			options
-				? `<pre><code className="code-pre-wrap">${options}</code></pre>`
+				? `<pre><code className="code-pre-wrap">${options.replace(
+						/<T>/g,
+						''
+				  )}</code></pre>`
 				: ''
 		} |\n`;
 	}
diff --git a/showcases/react-showcase/src/app.tsx b/showcases/react-showcase/src/app.tsx
index 7aaa4ebd5556..ef38cf3a119a 100644
--- a/showcases/react-showcase/src/app.tsx
+++ b/showcases/react-showcase/src/app.tsx
@@ -21,7 +21,6 @@ const App = () => {
 
 	return (
 		<DBPage
-			className="db-bg-neutral-0"
 			type="fixedHeaderFooter"
 			fadeIn
 			slotHeader={
diff --git a/showcases/react-showcase/src/components/checkbox/index.tsx b/showcases/react-showcase/src/components/checkbox/index.tsx
index 98cbbd1000e4..aa71343fb160 100644
--- a/showcases/react-showcase/src/components/checkbox/index.tsx
+++ b/showcases/react-showcase/src/components/checkbox/index.tsx
@@ -20,7 +20,7 @@ const getCheckbox = ({
 		label={label}
 		size={size}
 		name={name}
-		checked={checked}
+		defaultChecked={checked}
 		invalid={invalid}
 		required={required}
 		disabled={disabled}
diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
index fae602ce42ba..d63cbb0e6ad1 100644
--- a/showcases/react-showcase/src/components/form/index.tsx
+++ b/showcases/react-showcase/src/components/form/index.tsx
@@ -1,16 +1,19 @@
 import { useEffect, useState } from 'react';
 import {
 	DBButton,
+	DBCheckbox,
 	DBInput,
 	DBRadio,
 	DBSelect,
-	DBCheckbox,
 	DBTag,
 	DBTextarea,
 	DBAccordion,
 	DBAccordionItem
 } from '../../../../../output/react/src';
-import type { KeyValueType } from '../../../../../output/react/src/shared/model';
+import type {
+	ChangeEvent,
+	KeyValueType
+} from '../../../../../output/react/src/shared/model';
 
 const FormComponent = () => {
 	const [input, setInput] = useState('');
@@ -39,15 +42,15 @@ const FormComponent = () => {
 		{ key: 'test2' }
 	];
 
-	const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
+	const handleChange1 = (event: ChangeEvent<HTMLInputElement>) => {
 		setChecked([event.target.checked, event.target.checked]);
 	};
 
-	const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+	const handleChange2 = (event: ChangeEvent<HTMLInputElement>) => {
 		setChecked([event.target.checked, checked[1]]);
 	};
 
-	const handleChange3 = (event: React.ChangeEvent<HTMLInputElement>) => {
+	const handleChange3 = (event: ChangeEvent<HTMLInputElement>) => {
 		setChecked([checked[0], event.target.checked]);
 	};
 
@@ -88,11 +91,11 @@ const FormComponent = () => {
 						/>
 						<DBTextarea
 							label="Textarea Default value"
+							defaultValue="text area default value"
 							onChange={(event) => {
 								setTextareaChildren(event.target.value);
-							}}>
-							text area default value
-						</DBTextarea>
+							}}
+						/>
 						<p>Radio:</p>
 						<ul>
 							{['X', 'Y', 'Z'].map((radioName) => (
@@ -191,7 +194,7 @@ const FormComponent = () => {
 						<DBButton
 							type="button"
 							variant="primary"
-							onClick={(_) => {
+							onClick={(clickEvent) => {
 								// eslint-disable-next-line no-alert
 								alert(
 									JSON.stringify({
diff --git a/showcases/react-showcase/src/components/radio/index.tsx b/showcases/react-showcase/src/components/radio/index.tsx
index e92d1ee04b98..3d3337eb4341 100644
--- a/showcases/react-showcase/src/components/radio/index.tsx
+++ b/showcases/react-showcase/src/components/radio/index.tsx
@@ -20,7 +20,7 @@ const getRadio = ({
 		label={label}
 		size={size}
 		name={name}
-		checked={checked}
+		defaultChecked={checked}
 		invalid={invalid}
 		required={required}
 		disabled={disabled}
diff --git a/showcases/react-showcase/src/meta-navigation/index.tsx b/showcases/react-showcase/src/meta-navigation/index.tsx
index 62fb11ec348f..3df0aeacb391 100644
--- a/showcases/react-showcase/src/meta-navigation/index.tsx
+++ b/showcases/react-showcase/src/meta-navigation/index.tsx
@@ -24,7 +24,7 @@ const MetaNavigation = ({
 		searchParameters.get(TONALITY_CONST) ?? TONALITY.REGULAR
 	);
 	const [color, setColor] = useState<string>(
-		searchParameters.get(COLOR_CONST) ?? COLOR.NEUTRAL
+		searchParameters.get(COLOR_CONST) ?? COLOR.BASE
 	);
 
 	useEffect(() => {