diff --git a/packages/ui-client/.babelrc.json b/packages/ui-client/.babelrc.json
deleted file mode 100644
index f474986efbca9..0000000000000
--- a/packages/ui-client/.babelrc.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"presets": [
-		"@babel/preset-env",
-		["@babel/preset-react", {
-			"runtime": "automatic"
-		}],
-		"@babel/preset-typescript"
-	]
-}
diff --git a/packages/ui-client/.eslintignore b/packages/ui-client/.eslintignore
deleted file mode 100644
index 608841ff3853c..0000000000000
--- a/packages/ui-client/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-!.storybook
diff --git a/packages/ui-client/.eslintrc.json b/packages/ui-client/.eslintrc.json
index d5db8560f3e86..6e0406abd46a7 100644
--- a/packages/ui-client/.eslintrc.json
+++ b/packages/ui-client/.eslintrc.json
@@ -1,65 +1,4 @@
 {
-	"extends": [
-		"plugin:@typescript-eslint/recommended",
-		"plugin:@typescript-eslint/eslint-recommended",
-		"@rocket.chat/eslint-config/original",
-		"@rocket.chat/eslint-config/react",
-		"prettier",
-		"plugin:anti-trojan-source/recommended",
-		"plugin:react/jsx-runtime",
-		"plugin:storybook/recommended"
-	],
-	"parser": "@typescript-eslint/parser",
-	"plugins": ["@typescript-eslint", "prettier"],
-	"rules": {
-		"func-call-spacing": "off",
-		"import/named": "error",
-		"import/order": [
-			"error",
-			{
-				"newlines-between": "always",
-				"groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]],
-				"alphabetize": {
-					"order": "asc"
-				}
-			}
-		],
-		"indent": "off",
-		"jsx-quotes": ["error", "prefer-single"],
-		"new-cap": ["error"],
-		"no-extra-parens": "off",
-		"no-spaced-func": "off",
-		"no-undef": "off",
-		"no-unused-vars": "off",
-		"no-useless-constructor": "off",
-		"no-use-before-define": "off",
-		"prefer-arrow-callback": ["error", { "allowNamedFunctions": true }],
-		"prettier/prettier": 2
-	},
-	"settings": {
-		"import/resolver": {
-			"node": {
-				"extensions": [".js", ".ts", ".tsx"]
-			}
-		}
-	},
-	"ignorePatterns": ["**/dist"],
-	"overrides": [
-		{
-			"files": ["*.ts", "*.tsx"],
-			"rules": {
-				"@typescript-eslint/ban-ts-ignore": "off",
-				"@typescript-eslint/indent": "off",
-				"@typescript-eslint/no-extra-parens": "off",
-				"@typescript-eslint/no-explicit-any": "off",
-				"@typescript-eslint/no-unused-vars": [
-					"error",
-					{
-						"argsIgnorePattern": "^_"
-					}
-				],
-				"@typescript-eslint/prefer-optional-chain": "warn"
-			}
-		}
-  ]
+	"extends": ["@rocket.chat/eslint-config", "@rocket.chat/eslint-config/react", "plugin:storybook/recommended"],
+	"ignorePatterns": ["dist", "storybook-static", "!.storybook"]
 }
diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json
index 1da04ff1f3c77..9cd3f1cb1e484 100644
--- a/packages/ui-client/package.json
+++ b/packages/ui-client/package.json
@@ -17,8 +17,10 @@
 		"testunit": "jest",
 		"typecheck": "tsc --noEmit"
 	},
+	"dependencies": {
+		"dompurify": "~3.2.7"
+	},
 	"devDependencies": {
-		"@babel/core": "~7.28.5",
 		"@react-aria/toolbar": "^3.0.0-nightly.5042",
 		"@rocket.chat/core-typings": "workspace:~",
 		"@rocket.chat/css-in-js": "~0.31.25",
@@ -68,8 +70,5 @@
 	},
 	"volta": {
 		"extends": "../../package.json"
-	},
-	"dependencies": {
-		"dompurify": "~3.2.7"
 	}
 }
diff --git a/packages/ui-client/src/components/AnchorPortal.tsx b/packages/ui-client/src/components/AnchorPortal.tsx
index c0d01122c2cf8..83a4bd2a46162 100644
--- a/packages/ui-client/src/components/AnchorPortal.tsx
+++ b/packages/ui-client/src/components/AnchorPortal.tsx
@@ -1,4 +1,5 @@
-import { ReactNode, useLayoutEffect } from 'react';
+import type { ReactNode } from 'react';
+import { useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 import { ensureAnchorElement, refAnchorElement, unrefAnchorElement } from '../helpers/anchors';
diff --git a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx
index 165c0154d3361..4459c7d419c25 100644
--- a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx
+++ b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 import AnnouncementBanner from './AnnouncementBanner';
 
diff --git a/packages/ui-client/src/components/DotLeader.stories.tsx b/packages/ui-client/src/components/DotLeader.stories.tsx
index 658ffc8131527..5bac732351f56 100644
--- a/packages/ui-client/src/components/DotLeader.stories.tsx
+++ b/packages/ui-client/src/components/DotLeader.stories.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { DotLeader } from './DotLeader';
+import DotLeader from './DotLeader';
 
 export default {
 	title: 'Components/DotLeader',
diff --git a/packages/ui-client/src/components/DotLeader.tsx b/packages/ui-client/src/components/DotLeader.tsx
index 8340ba22d65e1..5a9b1db5fb568 100644
--- a/packages/ui-client/src/components/DotLeader.tsx
+++ b/packages/ui-client/src/components/DotLeader.tsx
@@ -1,11 +1,13 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { FC, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-type DotLeaderProps = {
+export type DotLeaderProps = {
 	color?: CSSProperties['borderColor'];
 	dotSize?: CSSProperties['borderBlockEndWidth'];
 };
 
-export const DotLeader: FC<DotLeaderProps> = ({ color = 'neutral-300', dotSize = 'x2' }) => (
+const DotLeader = ({ color = 'neutral-300', dotSize = 'x2' }: DotLeaderProps) => (
 	<Box flexGrow={1} h='full' alignSelf='flex-end' borderBlockEndStyle='dotted' borderBlockEndWidth={dotSize} m={2} borderColor={color} />
 );
+
+export default DotLeader;
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx
index 509af85c68fe0..2a85ad0ba1e87 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx
@@ -1,7 +1,9 @@
 import { ButtonGroup, Box } from '@rocket.chat/fuselage';
-import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const EmojiPickerCategoryHeader = (props: ComponentProps<typeof ButtonGroup>) => (
+export type EmojiPickerCategoryHeaderProps = ComponentPropsWithoutRef<typeof ButtonGroup>;
+
+const EmojiPickerCategoryHeader = (props: EmojiPickerCategoryHeaderProps) => (
 	<Box mbs={12} mi={12}>
 		<ButtonGroup small stretch {...props} />
 	</Box>
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryWrapper.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryWrapper.tsx
index 306fc7203bffb..6093f6ea7e0ec 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryWrapper.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryWrapper.tsx
@@ -1,6 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const EmojiPickerCategoryWrapper = (props: ComponentProps<typeof Box>) => <Box {...props} display='flex' flexWrap='wrap' />;
+export type EmojiPickerCategoryWrapperProps = ComponentPropsWithoutRef<typeof Box>;
+
+const EmojiPickerCategoryWrapper = (props: EmojiPickerCategoryWrapperProps) => <Box {...props} display='flex' flexWrap='wrap' />;
 
 export default EmojiPickerCategoryWrapper;
diff --git a/packages/ui-client/src/components/ExternalLink.tsx b/packages/ui-client/src/components/ExternalLink.tsx
index 0e7ef7a56148b..65eb688085b15 100644
--- a/packages/ui-client/src/components/ExternalLink.tsx
+++ b/packages/ui-client/src/components/ExternalLink.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ComponentProps, FC } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
 type ExternalLinkProps = {
 	to: string;
-} & ComponentProps<typeof Box>;
+} & ComponentPropsWithoutRef<typeof Box>;
 
-export const ExternalLink: FC<ExternalLinkProps> = ({ children, to, ...props }) => (
+export const ExternalLink = ({ children, to, ...props }: ExternalLinkProps) => (
 	<Box is='a' href={to} target='_blank' rel='noopener noreferrer' {...props}>
 		{children || to}
 	</Box>
diff --git a/packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx b/packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx
index 615887e10402c..14a8eb4dfdccb 100644
--- a/packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx
+++ b/packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx
@@ -1,7 +1,9 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { render, screen } from '@testing-library/react';
 
-import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from './FeaturePreview';
+import FeaturePreview from './FeaturePreview';
+import FeaturePreviewOff from './FeaturePreviewOff';
+import FeaturePreviewOn from './FeaturePreviewOn';
 
 test('should renders off if the feature is disabled', async () => {
 	render(
diff --git a/packages/ui-client/src/components/FeaturePreview/FeaturePreview.tsx b/packages/ui-client/src/components/FeaturePreview/FeaturePreview.tsx
index 1f537ef9d3897..1d40e89a07854 100644
--- a/packages/ui-client/src/components/FeaturePreview/FeaturePreview.tsx
+++ b/packages/ui-client/src/components/FeaturePreview/FeaturePreview.tsx
@@ -1,19 +1,16 @@
-/* eslint-disable react/no-multi-comp */
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import { Children, Suspense, cloneElement } from 'react';
 
 import { useFeaturePreview } from '../../hooks/useFeaturePreview';
-import { FeaturesAvailable } from '../../hooks/useFeaturePreviewList';
+import type { FeaturesAvailable } from '../../hooks/useFeaturePreviewList';
 
-export const FeaturePreview = ({
-	feature,
-	disabled = false,
-	children,
-}: {
-	disabled?: boolean;
+export type FeaturePreviewProps = {
 	feature: FeaturesAvailable;
+	disabled?: boolean;
 	children: ReactElement<{ featureToggleEnabled?: boolean }>[];
-}) => {
+};
+
+const FeaturePreview = ({ feature, disabled = false, children }: FeaturePreviewProps) => {
 	const featureToggleEnabled = useFeaturePreview(feature) && !disabled;
 
 	const toggledChildren = Children.map(children, (child) =>
@@ -25,10 +22,4 @@ export const FeaturePreview = ({
 	return <Suspense fallback={null}>{toggledChildren}</Suspense>;
 };
 
-export const FeaturePreviewOn = ({ children, featureToggleEnabled }: { children: ReactNode; featureToggleEnabled?: boolean }) => (
-	<>{featureToggleEnabled && children}</>
-);
-
-export const FeaturePreviewOff = ({ children, featureToggleEnabled }: { children: ReactNode; featureToggleEnabled?: boolean }) => (
-	<>{!featureToggleEnabled && children}</>
-);
+export default FeaturePreview;
diff --git a/packages/ui-client/src/components/FeaturePreview/FeaturePreviewOff.tsx b/packages/ui-client/src/components/FeaturePreview/FeaturePreviewOff.tsx
new file mode 100644
index 0000000000000..3b7ac103b47fe
--- /dev/null
+++ b/packages/ui-client/src/components/FeaturePreview/FeaturePreviewOff.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type FeaturePreviewOnProps = {
+	children: ReactNode;
+	featureToggleEnabled?: boolean;
+};
+
+const FeaturePreviewOff = ({ children, featureToggleEnabled }: FeaturePreviewOnProps) => <>{!featureToggleEnabled && children}</>;
+
+export default FeaturePreviewOff;
diff --git a/packages/ui-client/src/components/FeaturePreview/FeaturePreviewOn.tsx b/packages/ui-client/src/components/FeaturePreview/FeaturePreviewOn.tsx
new file mode 100644
index 0000000000000..a6fc6c3b284b9
--- /dev/null
+++ b/packages/ui-client/src/components/FeaturePreview/FeaturePreviewOn.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type FeaturePreviewOnProps = {
+	children: ReactNode;
+	featureToggleEnabled?: boolean;
+};
+
+const FeaturePreviewOn = ({ children, featureToggleEnabled }: FeaturePreviewOnProps) => <>{featureToggleEnabled && children}</>;
+
+export default FeaturePreviewOn;
diff --git a/packages/ui-client/src/components/FeaturePreview/index.ts b/packages/ui-client/src/components/FeaturePreview/index.ts
index f6b8e5f2071e7..9d23e58b4e050 100644
--- a/packages/ui-client/src/components/FeaturePreview/index.ts
+++ b/packages/ui-client/src/components/FeaturePreview/index.ts
@@ -1,2 +1,4 @@
-export { FeaturePreview, FeaturePreviewOn, FeaturePreviewOff } from './FeaturePreview';
+export { default as FeaturePreview } from './FeaturePreview';
 export { default as FeaturePreviewBadge } from './FeaturePreviewBadge';
+export { default as FeaturePreviewOn } from './FeaturePreviewOn';
+export { default as FeaturePreviewOff } from './FeaturePreviewOff';
diff --git a/packages/ui-client/src/components/Header/Header.stories.tsx b/packages/ui-client/src/components/Header/Header.stories.tsx
index cb3b006cc82bf..60bd3732722b3 100644
--- a/packages/ui-client/src/components/Header/Header.stories.tsx
+++ b/packages/ui-client/src/components/Header/Header.stories.tsx
@@ -3,7 +3,7 @@ import { Avatar, IconButton } from '@rocket.chat/fuselage';
 import { SettingsContext } from '@rocket.chat/ui-contexts';
 import { action } from '@storybook/addon-actions';
 import type { Meta } from '@storybook/react';
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 
 import {
 	Header,
diff --git a/packages/ui-client/src/components/Header/Header.tsx b/packages/ui-client/src/components/Header/Header.tsx
index c204b4d4bc0d9..df8026b356bba 100644
--- a/packages/ui-client/src/components/Header/Header.tsx
+++ b/packages/ui-client/src/components/Header/Header.tsx
@@ -1,10 +1,12 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useLayout } from '@rocket.chat/ui-contexts';
-import type { FC, ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
 import HeaderDivider from './HeaderDivider';
 
-const Header: FC<ComponentProps<typeof Box>> = (props) => {
+export type HeaderProps = ComponentPropsWithoutRef<typeof Box>;
+
+const Header = (props: HeaderProps) => {
 	const { isMobile } = useLayout();
 
 	return (
diff --git a/packages/ui-client/src/components/Header/HeaderAvatar.tsx b/packages/ui-client/src/components/Header/HeaderAvatar.tsx
index b650a1c898dad..c70660324fde1 100644
--- a/packages/ui-client/src/components/Header/HeaderAvatar.tsx
+++ b/packages/ui-client/src/components/Header/HeaderAvatar.tsx
@@ -1,6 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { FC, ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const HeaderAvatar: FC<ComponentProps<typeof Box>> = (props) => <Box mi={4} display='flex' alignItems='center' {...props} />;
+export type HeaderAvatarProps = ComponentPropsWithoutRef<typeof Box>;
+
+const HeaderAvatar = (props: HeaderAvatarProps) => <Box mi={4} display='flex' alignItems='center' {...props} />;
 
 export default HeaderAvatar;
diff --git a/packages/ui-client/src/components/Header/HeaderContent.tsx b/packages/ui-client/src/components/Header/HeaderContent.tsx
index 2b3fe0e369cdc..bd94ade6999bf 100644
--- a/packages/ui-client/src/components/Header/HeaderContent.tsx
+++ b/packages/ui-client/src/components/Header/HeaderContent.tsx
@@ -1,7 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { FC, ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const HeaderContent: FC<ComponentProps<typeof Box>> = (props) => (
+export type HeaderContentProps = ComponentPropsWithoutRef<typeof Box>;
+
+const HeaderContent = (props: HeaderContentProps) => (
 	<Box flexGrow={1} width={1} flexShrink={1} mi={4} display='flex' justifyContent='center' flexDirection='column' {...props} />
 );
 
diff --git a/packages/ui-client/src/components/Header/HeaderContentRow.tsx b/packages/ui-client/src/components/Header/HeaderContentRow.tsx
index 22f879f1e2c1e..1df01a9785e9a 100644
--- a/packages/ui-client/src/components/Header/HeaderContentRow.tsx
+++ b/packages/ui-client/src/components/Header/HeaderContentRow.tsx
@@ -1,7 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { FC, ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const HeaderContentRow: FC<ComponentProps<typeof Box>> = (props) => (
+export type HeaderContentRowProps = ComponentPropsWithoutRef<typeof Box>;
+
+const HeaderContentRow = (props: HeaderContentRowProps) => (
 	<Box alignItems='center' flexShrink={1} flexGrow={1} display='flex' {...props} />
 );
 
diff --git a/packages/ui-client/src/components/Header/HeaderDivider.tsx b/packages/ui-client/src/components/Header/HeaderDivider.tsx
index e9932f44a6a8f..2beadec2d0882 100644
--- a/packages/ui-client/src/components/Header/HeaderDivider.tsx
+++ b/packages/ui-client/src/components/Header/HeaderDivider.tsx
@@ -1,6 +1,5 @@
 import { Divider } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
 
-const HeaderDivider: FC = () => <Divider mbs={-2} mbe={0} />;
+const HeaderDivider = () => <Divider mbs={-2} mbe={0} />;
 
 export default HeaderDivider;
diff --git a/packages/ui-client/src/components/Header/HeaderIcon.tsx b/packages/ui-client/src/components/Header/HeaderIcon.tsx
index 82545aafe429c..c811c3c7b7404 100644
--- a/packages/ui-client/src/components/Header/HeaderIcon.tsx
+++ b/packages/ui-client/src/components/Header/HeaderIcon.tsx
@@ -1,8 +1,8 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { isValidElement } from 'react';
 
-type HeaderIconProps = { icon: ReactElement | ComponentProps<typeof Icon> | null };
+export type HeaderIconProps = { icon: ReactElement | ComponentPropsWithoutRef<typeof Icon> | null };
 
 const HeaderIcon = ({ icon }: HeaderIconProps) =>
 	icon && (
diff --git a/packages/ui-client/src/components/Header/HeaderState.tsx b/packages/ui-client/src/components/Header/HeaderState.tsx
index 3a21eb949550e..0368175d08f7c 100644
--- a/packages/ui-client/src/components/Header/HeaderState.tsx
+++ b/packages/ui-client/src/components/Header/HeaderState.tsx
@@ -1,8 +1,8 @@
 import { Icon, IconButton } from '@rocket.chat/fuselage';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { AllHTMLAttributes, ComponentPropsWithoutRef, FC, MouseEventHandler } from 'react';
+import type { AllHTMLAttributes, ComponentPropsWithoutRef, MouseEventHandler } from 'react';
 
-type HeaderStateProps =
+export type HeaderStateProps =
 	| (Pick<ComponentPropsWithoutRef<typeof IconButton>, 'color' | 'title' | 'icon'> & {
 			onClick: MouseEventHandler;
 	  } & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>)
@@ -11,7 +11,7 @@ type HeaderStateProps =
 			onClick?: undefined;
 	  });
 
-const HeaderState: FC<HeaderStateProps> = (props) =>
+const HeaderState = (props: HeaderStateProps) =>
 	props.onClick ? <IconButton tiny mie={4} {...props} /> : <Icon size='x16' mie={8} name={props.icon} {...props} />;
 
 export default HeaderState;
diff --git a/packages/ui-client/src/components/Header/HeaderSubtitle.tsx b/packages/ui-client/src/components/Header/HeaderSubtitle.tsx
index facaadf599c0b..eef2190739743 100644
--- a/packages/ui-client/src/components/Header/HeaderSubtitle.tsx
+++ b/packages/ui-client/src/components/Header/HeaderSubtitle.tsx
@@ -1,6 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { FC, ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const HeaderSubtitle: FC<ComponentProps<typeof Box>> = (props) => <Box color='hint' fontScale='p2' withTruncatedText {...props} />;
+export type HeaderSubtitleProps = ComponentPropsWithoutRef<typeof Box>;
+
+const HeaderSubtitle = (props: HeaderSubtitleProps) => <Box color='hint' fontScale='p2' withTruncatedText {...props} />;
 
 export default HeaderSubtitle;
diff --git a/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx b/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx
index afbad5d734340..2123e2c360c8d 100644
--- a/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx
@@ -1,7 +1,9 @@
 import { Box, Tag } from '@rocket.chat/fuselage';
-import type { ComponentProps, FC } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const HeaderTag: FC<ComponentProps<typeof Tag>> = ({ children, ...props }) => (
+export type HeaderTagProps = ComponentPropsWithoutRef<typeof Tag>;
+
+const HeaderTag = ({ children, ...props }: HeaderTagProps) => (
 	<Box p={4} withTruncatedText minWidth='x32'>
 		<Tag medium {...props}>
 			{children}
diff --git a/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx b/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
index b2115aad3d470..f17f1317bb933 100644
--- a/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
@@ -1,12 +1,12 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps, FC, ReactElement } from 'react';
+import type { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { isValidElement } from 'react';
 
-type HeaderIconProps = {
-	icon: ReactElement | Pick<ComponentProps<typeof Icon>, 'name' | 'color'> | null;
+export type HeaderIconProps = {
+	icon: ReactElement | Pick<ComponentPropsWithoutRef<typeof Icon>, 'name' | 'color'> | null;
 };
 
-const HeaderTagIcon: FC<HeaderIconProps> = ({ icon }) => {
+const HeaderTagIcon = ({ icon }: HeaderIconProps) => {
 	if (!icon) {
 		return null;
 	}
diff --git a/packages/ui-client/src/components/Header/HeaderTag/HeaderTagSkeleton.tsx b/packages/ui-client/src/components/Header/HeaderTag/HeaderTagSkeleton.tsx
index d22c4c1a642ad..14fecc6c194be 100644
--- a/packages/ui-client/src/components/Header/HeaderTag/HeaderTagSkeleton.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTag/HeaderTagSkeleton.tsx
@@ -1,6 +1,5 @@
 import { Skeleton } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
 
-const HeaderTagSkeleton: FC = () => <Skeleton width='x48' />;
+const HeaderTagSkeleton = () => <Skeleton width='x48' />;
 
 export default HeaderTagSkeleton;
diff --git a/packages/ui-client/src/components/Header/HeaderTitle.tsx b/packages/ui-client/src/components/Header/HeaderTitle.tsx
index bf2fce7b4e677..ad5e1023521fe 100644
--- a/packages/ui-client/src/components/Header/HeaderTitle.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTitle.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { FC, ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const HeaderTitle: FC<ComponentProps<typeof Box>> = (props) => (
-	<Box color='default' mi={4} is='h1' fontScale='h4' withTruncatedText {...props} />
-);
+export type HeaderTitleProps = ComponentPropsWithoutRef<typeof Box>;
+
+const HeaderTitle = (props: HeaderTitleProps) => <Box color='default' mi={4} is='h1' fontScale='h4' withTruncatedText {...props} />;
 
 export default HeaderTitle;
diff --git a/packages/ui-client/src/components/Header/HeaderTitleButton.tsx b/packages/ui-client/src/components/Header/HeaderTitleButton.tsx
index cdfad6c88f06d..69adba8879b08 100644
--- a/packages/ui-client/src/components/Header/HeaderTitleButton.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTitleButton.tsx
@@ -1,8 +1,10 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Palette } from '@rocket.chat/fuselage';
-import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const HeaderTitleButton = ({ className, ...props }: { className?: string } & ComponentProps<typeof Box>) => {
+export type HeaderTitleButtonProps = { className?: string } & ComponentPropsWithoutRef<typeof Box>;
+
+const HeaderTitleButton = ({ className, ...props }: HeaderTitleButtonProps) => {
 	const customClass = css`
 		border-width: 1px;
 		border-style: solid;
diff --git a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx
index 909814926c553..a8776ba2acbdd 100644
--- a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx
+++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx
@@ -1,8 +1,10 @@
 import { useToolbar } from '@react-aria/toolbar';
 import { ButtonGroup } from '@rocket.chat/fuselage';
-import { type ComponentProps, useRef } from 'react';
+import { type ComponentPropsWithoutRef, useRef } from 'react';
 
-const HeaderToolbar = (props: ComponentProps<typeof ButtonGroup>) => {
+export type HeaderToolbarProps = ComponentPropsWithoutRef<typeof ButtonGroup>;
+
+const HeaderToolbar = (props: HeaderToolbarProps) => {
 	const ref = useRef(null);
 	const { toolbarProps } = useToolbar(props, ref);
 
diff --git a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx
index 26d476e67a17b..7e66fa84595a8 100644
--- a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx
+++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx
@@ -1,7 +1,8 @@
 import { IconButton } from '@rocket.chat/fuselage';
-import { ComponentProps, forwardRef } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
+import { forwardRef } from 'react';
 
-type HeaderToolbarActionProps = ComponentProps<typeof IconButton> & {
+type HeaderToolbarActionProps = ComponentPropsWithoutRef<typeof IconButton> & {
 	tooltip?: string;
 };
 
diff --git a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx
index 57f26b06bfd7e..682f04e978970 100644
--- a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx
+++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx
@@ -1,8 +1,10 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Badge } from '@rocket.chat/fuselage';
-import type { ComponentProps, FC } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const HeaderToolbarActionActionBadge: FC<ComponentProps<typeof Badge>> = (props) => (
+export type HeaderToolbarActionBadgeProps = ComponentPropsWithoutRef<typeof Badge>;
+
+const HeaderToolbarActionBadge = (props: HeaderToolbarActionBadgeProps) => (
 	<Box
 		position='absolute'
 		role='status'
@@ -17,4 +19,4 @@ const HeaderToolbarActionActionBadge: FC<ComponentProps<typeof Badge>> = (props)
 	</Box>
 );
 
-export default HeaderToolbarActionActionBadge;
+export default HeaderToolbarActionBadge;
diff --git a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx
index 52bb2d21222f2..f3823002e88e1 100644
--- a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx
+++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx
@@ -1,6 +1,5 @@
 import { Divider } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
 
-const HeaderToolbarDivider = (): ReactElement => <Divider mi={4} vertical />;
+const HeaderToolbarDivider = () => <Divider mi={4} vertical />;
 
 export default HeaderToolbarDivider;
diff --git a/packages/ui-client/src/components/HeaderV2/Header.stories.tsx b/packages/ui-client/src/components/HeaderV2/Header.stories.tsx
index 62b1e6abb40a3..840e0f1b873c8 100644
--- a/packages/ui-client/src/components/HeaderV2/Header.stories.tsx
+++ b/packages/ui-client/src/components/HeaderV2/Header.stories.tsx
@@ -3,7 +3,7 @@ import { Avatar, Box, IconButton } from '@rocket.chat/fuselage';
 import { SettingsContext } from '@rocket.chat/ui-contexts';
 import { action } from '@storybook/addon-actions';
 import type { Meta } from '@storybook/react';
-import { ComponentProps, ComponentType } from 'react';
+import type { ComponentPropsWithoutRef, ComponentType } from 'react';
 
 import {
 	HeaderV2 as Header,
@@ -87,7 +87,7 @@ const room: IRoom = {
 	_updatedAt: new Date(),
 } as const;
 
-const CustomAvatar = (props: Omit<ComponentProps<typeof Avatar>, 'url'>) => <Avatar size='x28' url={avatarUrl} {...props} />;
+const CustomAvatar = (props: Omit<ComponentPropsWithoutRef<typeof Avatar>, 'url'>) => <Avatar size='x28' url={avatarUrl} {...props} />;
 const icon = { name: 'hash' } as const;
 
 export const Default = () => (
diff --git a/packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx b/packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx
index 31f3f1733d6e9..9175b66257d32 100644
--- a/packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx
+++ b/packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx
@@ -1,8 +1,8 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { isValidElement } from 'react';
 
-type HeaderIconProps = { icon: ReactElement | ComponentProps<typeof Icon> | null };
+type HeaderIconProps = { icon: ReactElement | ComponentPropsWithoutRef<typeof Icon> | null };
 
 const HeaderIcon = ({ icon }: HeaderIconProps) =>
 	icon && (
diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx b/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx
index 222a01dcf4daa..8ea2d6895bfc1 100644
--- a/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx
+++ b/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx
@@ -1,7 +1,7 @@
 import { Box, Tag } from '@rocket.chat/fuselage';
-import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-type HeaderTagProps = ComponentProps<typeof Tag>;
+type HeaderTagProps = ComponentPropsWithoutRef<typeof Tag>;
 
 const HeaderTag = ({ children, ...props }: HeaderTagProps) => (
 	<Box p={4} withTruncatedText minWidth='x32'>
diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagIcon.tsx b/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagIcon.tsx
index fd124ea09a10f..3f46570719498 100644
--- a/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagIcon.tsx
+++ b/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagIcon.tsx
@@ -1,9 +1,9 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { isValidElement } from 'react';
 
 type HeaderIconProps = {
-	icon: ReactElement | Pick<ComponentProps<typeof Icon>, 'name' | 'color'> | null;
+	icon: ReactElement | Pick<ComponentPropsWithoutRef<typeof Icon>, 'name' | 'color'> | null;
 };
 
 const HeaderTagIcon = ({ icon }: HeaderIconProps) => {
diff --git a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbar.tsx b/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbar.tsx
index 2c2377a5778aa..df8b1e5b2ad17 100644
--- a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbar.tsx
+++ b/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbar.tsx
@@ -1,8 +1,9 @@
 import { useToolbar } from '@react-aria/toolbar';
 import { ButtonGroup } from '@rocket.chat/fuselage';
-import { type ComponentProps, useRef } from 'react';
+import { useRef } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-type HeaderToolbarProps = ComponentProps<typeof ButtonGroup>;
+type HeaderToolbarProps = ComponentPropsWithoutRef<typeof ButtonGroup>;
 
 const HeaderToolbar = (props: HeaderToolbarProps) => {
 	const ref = useRef(null);
diff --git a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx b/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx
index 26d476e67a17b..7e66fa84595a8 100644
--- a/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx
+++ b/packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx
@@ -1,7 +1,8 @@
 import { IconButton } from '@rocket.chat/fuselage';
-import { ComponentProps, forwardRef } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
+import { forwardRef } from 'react';
 
-type HeaderToolbarActionProps = ComponentProps<typeof IconButton> & {
+type HeaderToolbarActionProps = ComponentPropsWithoutRef<typeof IconButton> & {
 	tooltip?: string;
 };
 
diff --git a/packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx b/packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx
index 8fe78ae7fa788..68d63088383b4 100644
--- a/packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx
+++ b/packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx
@@ -14,7 +14,7 @@ import {
 } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { ComponentProps, ReactElement, ReactNode, ComponentPropsWithoutRef } from 'react';
+import type { ReactElement, ReactNode, ComponentPropsWithoutRef } from 'react';
 import { useId, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -46,7 +46,7 @@ const iconMap: Record<string, IconName> = {
 	success: 'check',
 };
 
-const getButtonProps = (variant: VariantType): ComponentProps<typeof Button> => {
+const getButtonProps = (variant: VariantType): ComponentPropsWithoutRef<typeof Button> => {
 	switch (variant) {
 		case 'danger':
 			return { danger: true };
diff --git a/packages/ui-client/src/components/Modal/GenericModal/GenericModalSkeleton.tsx b/packages/ui-client/src/components/Modal/GenericModal/GenericModalSkeleton.tsx
index db08f9273fe39..60d35c3adcb74 100644
--- a/packages/ui-client/src/components/Modal/GenericModal/GenericModalSkeleton.tsx
+++ b/packages/ui-client/src/components/Modal/GenericModal/GenericModalSkeleton.tsx
@@ -1,9 +1,9 @@
 import { Skeleton } from '@rocket.chat/fuselage';
-import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
 import GenericModal from './GenericModal';
 
-const GenericModalSkeleton = (props: ComponentProps<typeof GenericModal>) => (
+const GenericModalSkeleton = (props: ComponentPropsWithoutRef<typeof GenericModal>) => (
 	<GenericModal {...props} icon={null} title={<Skeleton width='50%' />}>
 		<Skeleton width='full' />
 	</GenericModal>
diff --git a/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx b/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
index 3d0f988953b36..86e73bd53730b 100644
--- a/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
+++ b/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
@@ -18,7 +18,10 @@ export type RequiredModalProps = {
 	dontAskAgain?: ReactElement;
 };
 
-function withDoNotAskAgain<T extends RequiredModalProps>(Component: ComponentType<any>) {
+function withDoNotAskAgain<T extends RequiredModalProps>(
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	Component: ComponentType<any>,
+) {
 	type WrappedComponentProps = DoNotAskAgainProps & Omit<T, keyof RequiredModalProps>;
 	const WrappedComponent = function ({ onConfirm, dontAskAgain, ...props }: WrappedComponentProps) {
 		const t = useTranslation();
diff --git a/packages/ui-client/src/components/Modal/ModalBackdrop.tsx b/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
index c70124ad02841..4a11349d10796 100644
--- a/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
+++ b/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { MouseEvent, ReactElement, ReactNode, RefObject } from 'react';
+import type { MouseEvent, ReactNode, RefObject } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 
 const useEscapeKey = (onDismiss: (() => void) | undefined): void => {
@@ -72,7 +72,7 @@ type ModalBackdropProps = {
 	onDismiss?: () => void;
 };
 
-const ModalBackdrop = ({ children, onDismiss }: ModalBackdropProps): ReactElement => {
+const ModalBackdrop = ({ children, onDismiss }: ModalBackdropProps) => {
 	const ref = useRef<HTMLDivElement>(null);
 
 	useEscapeKey(onDismiss);
diff --git a/packages/ui-client/src/components/Modal/ModalRegion.tsx b/packages/ui-client/src/components/Modal/ModalRegion.tsx
index 76bcc23b48e72..3cafd84ca0157 100644
--- a/packages/ui-client/src/components/Modal/ModalRegion.tsx
+++ b/packages/ui-client/src/components/Modal/ModalRegion.tsx
@@ -1,14 +1,13 @@
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useCurrentModal, useModal } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { lazy, Suspense } from 'react';
 
 import ModalBackdrop from './ModalBackdrop';
 import ModalPortal from './ModalPortal';
 
-const FocusScope = lazy(() => import('react-aria').then(({ FocusScope }) => ({ default: FocusScope })));
+const FocusScope = lazy(() => import('react-aria').then((module) => ({ default: module.FocusScope })));
 
-const ModalRegion = (): ReactElement | null => {
+const ModalRegion = () => {
 	const currentModal = useCurrentModal();
 	const { setModal } = useModal();
 	const handleDismiss = useEffectEvent(() => {
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
index a6e348ef82e27..4e2b2d053daa8 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
@@ -1,6 +1,7 @@
-import { Box, Button } from '@rocket.chat/fuselage';
+import type { Button } from '@rocket.chat/fuselage';
+import { Box } from '@rocket.chat/fuselage';
 import { useButtonPattern, useOutsideClick, useToggle } from '@rocket.chat/fuselage-hooks';
-import type { ComponentProps, FormEvent, ReactElement, RefObject } from 'react';
+import type { ComponentPropsWithoutRef, FormEvent, RefObject } from 'react';
 import { useCallback, useRef } from 'react';
 
 import MultiSelectCustomAnchor from './MultiSelectCustomAnchor';
@@ -47,7 +48,7 @@ type DropDownProps = {
 	selectedOptions: OptionProp[];
 	setSelectedOptions: (roles: OptionProp[]) => void;
 	searchBarText?: string;
-} & ComponentProps<typeof Button>;
+} & ComponentPropsWithoutRef<typeof Button>;
 
 export const MultiSelectCustom = ({
 	dropdownOptions,
@@ -57,7 +58,7 @@ export const MultiSelectCustom = ({
 	setSelectedOptions,
 	searchBarText,
 	...props
-}: DropDownProps): ReactElement => {
+}: DropDownProps) => {
 	const reference = useRef<HTMLInputElement>(null);
 	const target = useRef<HTMLElement>(null);
 	const [collapsed, toggleCollapsed] = useToggle(false);
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
index e28c0a7ad452c..c480bdfdb72e4 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Icon } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,7 +11,7 @@ type MultiSelectCustomAnchorProps = {
 	selectedOptionsTitle: string;
 	selectedOptionsCount: number;
 	maxCount: number;
-} & ComponentProps<typeof Box>;
+} & ComponentPropsWithoutRef<typeof Box>;
 
 const MultiSelectCustomAnchor = forwardRef<HTMLElement, MultiSelectCustomAnchorProps>(function MultiSelectCustomAnchor(
 	{ className, collapsed, selectedOptionsCount, selectedOptionsTitle, defaultTitle, maxCount, ...props },
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx
index 51ebd06c37c07..f0c63486ed8bd 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface MultiSelectCustomListWrapperProps extends ComponentProps<typeof Box> {}
+export type MultiSelectCustomListWrapperProps = ComponentPropsWithoutRef<typeof Box>;
 
 const MultiSelectCustomListWrapper = forwardRef<Element, MultiSelectCustomListWrapperProps>(function MultiSelectCustomListWrapper(
 	{ children },
diff --git a/packages/ui-client/src/components/TextSeparator.stories.tsx b/packages/ui-client/src/components/TextSeparator.stories.tsx
index 2a4c9e708eef5..7ed0ddda9193f 100644
--- a/packages/ui-client/src/components/TextSeparator.stories.tsx
+++ b/packages/ui-client/src/components/TextSeparator.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import type { ReactElement } from 'react';
 
 import TextSeparator from './TextSeparator';
 
@@ -9,7 +8,7 @@ export default {
 	parameters: {
 		layout: 'centered',
 	},
-	decorators: [(fn): ReactElement => <div style={{ minWidth: 400 }}>{fn()}</div>],
+	decorators: [(fn) => <div style={{ minWidth: 400 }}>{fn()}</div>],
 } satisfies Meta<typeof TextSeparator>;
 
 const Template: StoryFn<typeof TextSeparator> = (args) => <TextSeparator {...args} />;
diff --git a/packages/ui-client/src/components/TextSeparator.tsx b/packages/ui-client/src/components/TextSeparator.tsx
index 978804a7f7da5..f4a2635570f84 100644
--- a/packages/ui-client/src/components/TextSeparator.tsx
+++ b/packages/ui-client/src/components/TextSeparator.tsx
@@ -1,14 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { DotLeader } from './DotLeader';
+import DotLeader from './DotLeader';
 
 type TextSeparatorProps = {
 	label: ReactNode;
 	value: ReactNode;
 };
 
-const TextSeparator = ({ label, value }: TextSeparatorProps): ReactElement => (
+const TextSeparator = ({ label, value }: TextSeparatorProps) => (
 	<Box display='flex' flexDirection='row' mb={4}>
 		<Box display='inline-flex' alignItems='center'>
 			{label}
diff --git a/packages/ui-client/src/components/TooltipComponent.tsx b/packages/ui-client/src/components/TooltipComponent.tsx
index 4a46e5536a530..e65c95c063233 100644
--- a/packages/ui-client/src/components/TooltipComponent.tsx
+++ b/packages/ui-client/src/components/TooltipComponent.tsx
@@ -1,5 +1,5 @@
 import { Tooltip, PositionAnimated, AnimatedVisibility } from '@rocket.chat/fuselage';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useRef } from 'react';
 
 type TooltipComponentProps = {
@@ -7,7 +7,7 @@ type TooltipComponentProps = {
 	anchor: Element;
 };
 
-export const TooltipComponent = ({ title, anchor }: TooltipComponentProps): ReactElement => {
+export const TooltipComponent = ({ title, anchor }: TooltipComponentProps) => {
 	const ref = useRef(anchor);
 
 	return (
diff --git a/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx b/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx
index 9673d716193da..bc1b89f122e46 100644
--- a/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx
+++ b/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx
@@ -3,7 +3,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { memo, useMemo, useState } from 'react';
 
 const query = (
@@ -13,11 +13,11 @@ const query = (
 	selector: string;
 } => ({ selector: JSON.stringify({ term, conditions }) });
 
-type UserAutoCompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'> & {
+type UserAutoCompleteProps = Omit<ComponentPropsWithoutRef<typeof AutoComplete>, 'filter'> & {
 	conditions?: { [key: string]: unknown };
 };
 
-const UserAutoComplete = ({ value, onChange, ...props }: UserAutoCompleteProps): ReactElement => {
+const UserAutoComplete = ({ value, onChange, ...props }: UserAutoCompleteProps) => {
 	const { conditions = {} } = props;
 	const [filter, setFilter] = useState('');
 	const debouncedFilter = useDebouncedValue(filter, 1000);
@@ -38,7 +38,7 @@ const UserAutoComplete = ({ value, onChange, ...props }: UserAutoCompleteProps):
 			filter={filter}
 			setFilter={setFilter}
 			data-qa-id='UserAutoComplete'
-			renderSelected={({ selected: { value, label } }): ReactElement | null => (
+			renderSelected={({ selected: { value, label } }) => (
 				<Chip height='x20' value={value} mie={4}>
 					<UserAvatar size='x20' username={value} />
 					<Box verticalAlign='middle' is='span' margin='none' mi={4}>
@@ -46,7 +46,7 @@ const UserAutoComplete = ({ value, onChange, ...props }: UserAutoCompleteProps):
 					</Box>
 				</Chip>
 			)}
-			renderItem={({ value, label, ...props }): ReactElement => (
+			renderItem={({ value, label, ...props }) => (
 				<Option key={value} label={label} avatar={<UserAvatar size='x20' username={value} />} {...props} />
 			)}
 			options={options}
diff --git a/packages/ui-client/src/components/UserStatus/Away.tsx b/packages/ui-client/src/components/UserStatus/Away.tsx
index 48aed1f47a092..e6690d8070e55 100644
--- a/packages/ui-client/src/components/UserStatus/Away.tsx
+++ b/packages/ui-client/src/components/UserStatus/Away.tsx
@@ -1,10 +1,10 @@
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
 import UserStatus from './UserStatus';
 
-type AwayProps = Omit<ComponentProps<typeof UserStatus>, 'status'>;
+type AwayProps = Omit<ComponentPropsWithoutRef<typeof UserStatus>, 'status'>;
 
-function Away(props: AwayProps): ReactElement {
+function Away(props: AwayProps) {
 	return <UserStatus status='away' {...props} />;
 }
 
diff --git a/packages/ui-client/src/components/UserStatus/Busy.tsx b/packages/ui-client/src/components/UserStatus/Busy.tsx
index 124cf481a3de2..76c4ed38dd9de 100644
--- a/packages/ui-client/src/components/UserStatus/Busy.tsx
+++ b/packages/ui-client/src/components/UserStatus/Busy.tsx
@@ -1,10 +1,9 @@
-import type { ComponentProps, ReactElement } from 'react';
-
+import type { UserStatusProps } from './UserStatus';
 import UserStatus from './UserStatus';
 
-type BusyProps = Omit<ComponentProps<typeof UserStatus>, 'status'>;
+type BusyProps = Omit<UserStatusProps, 'status'>;
 
-function Busy(props: BusyProps): ReactElement {
+function Busy(props: BusyProps) {
 	return <UserStatus status='busy' {...props} />;
 }
 
diff --git a/packages/ui-client/src/components/UserStatus/Loading.tsx b/packages/ui-client/src/components/UserStatus/Loading.tsx
index 8e9d8839335e8..3d129d3a44a3f 100644
--- a/packages/ui-client/src/components/UserStatus/Loading.tsx
+++ b/packages/ui-client/src/components/UserStatus/Loading.tsx
@@ -1,10 +1,9 @@
-import type { ComponentProps, ReactElement } from 'react';
-
+import type { UserStatusProps } from './UserStatus';
 import UserStatus from './UserStatus';
 
-type LoadingProps = Omit<ComponentProps<typeof UserStatus>, 'status'>;
+type LoadingProps = Omit<UserStatusProps, 'status'>;
 
-function Loading(props: LoadingProps): ReactElement {
+function Loading(props: LoadingProps) {
 	return <UserStatus {...props} />;
 }
 
diff --git a/packages/ui-client/src/components/UserStatus/Offline.tsx b/packages/ui-client/src/components/UserStatus/Offline.tsx
index 2726c1cf89350..330338312657c 100644
--- a/packages/ui-client/src/components/UserStatus/Offline.tsx
+++ b/packages/ui-client/src/components/UserStatus/Offline.tsx
@@ -1,10 +1,9 @@
-import type { ComponentProps, ReactElement } from 'react';
-
+import type { UserStatusProps } from './UserStatus';
 import UserStatus from './UserStatus';
 
-type OfflineProps = Omit<ComponentProps<typeof UserStatus>, 'status'>;
+type OfflineProps = Omit<UserStatusProps, 'status'>;
 
-function Offline(props: OfflineProps): ReactElement {
+function Offline(props: OfflineProps) {
 	return <UserStatus status='offline' {...props} />;
 }
 
diff --git a/packages/ui-client/src/components/UserStatus/Online.tsx b/packages/ui-client/src/components/UserStatus/Online.tsx
index ec459ccdc89d8..0f686122de5d4 100644
--- a/packages/ui-client/src/components/UserStatus/Online.tsx
+++ b/packages/ui-client/src/components/UserStatus/Online.tsx
@@ -1,10 +1,9 @@
-import type { ComponentProps, ReactElement } from 'react';
-
+import type { UserStatusProps } from './UserStatus';
 import UserStatus from './UserStatus';
 
-type OnlineProps = Omit<ComponentProps<typeof UserStatus>, 'status'>;
+type OnlineProps = Omit<UserStatusProps, 'status'>;
 
-function Online(props: OnlineProps): ReactElement {
+function Online(props: OnlineProps) {
 	return <UserStatus status='online' {...props} />;
 }
 
diff --git a/packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx b/packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx
index 26631a96523d4..0c8126b2902e9 100644
--- a/packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx
+++ b/packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 
 import * as UserStatus from '.';
 import { useAutoSequence } from '../../hooks/useAutoSequence';
diff --git a/packages/ui-client/src/components/UserStatus/UserStatus.tsx b/packages/ui-client/src/components/UserStatus/UserStatus.tsx
index 35db492977247..4ca41308cfc18 100644
--- a/packages/ui-client/src/components/UserStatus/UserStatus.tsx
+++ b/packages/ui-client/src/components/UserStatus/UserStatus.tsx
@@ -1,13 +1,13 @@
 import { StatusBullet } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export type UserStatusProps = {
 	small?: boolean;
-} & ComponentProps<typeof StatusBullet>;
+} & ComponentPropsWithoutRef<typeof StatusBullet>;
 
-function UserStatus({ small, status, ...props }: UserStatusProps): ReactElement {
+function UserStatus({ small, status, ...props }: UserStatusProps) {
 	const { t } = useTranslation();
 	const size = small ? 'small' : 'large';
 
diff --git a/packages/ui-client/src/components/Wizard/Wizard.tsx b/packages/ui-client/src/components/Wizard/Wizard.tsx
index 54d2eb8fee435..2d12a54a0d751 100644
--- a/packages/ui-client/src/components/Wizard/Wizard.tsx
+++ b/packages/ui-client/src/components/Wizard/Wizard.tsx
@@ -1,10 +1,11 @@
 import { Box } from '@rocket.chat/fuselage';
-import { ComponentProps, memo, type ReactNode } from 'react';
+import { memo } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 import { WizardContext } from './WizardContext';
 import type { WizardAPI } from './WizardContext';
 
-type WizardProps = ComponentProps<typeof Box> & {
+type WizardProps = ComponentPropsWithoutRef<typeof Box> & {
 	api: WizardAPI;
 	children: ReactNode;
 };
diff --git a/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx b/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx
index b52b5c2e28d57..eb53ed6155006 100644
--- a/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx
+++ b/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { Meta, StoryFn } from '@storybook/react';
-import { ComponentProps } from 'react';
 
 import Wizard from './Wizard';
+import type { WizardActionsProps } from './WizardActions';
 import WizardActions from './WizardActions';
 import WizardBackButton from './WizardBackButton';
 import WizardNextButton from './WizardNextButton';
@@ -33,7 +33,7 @@ export default {
 	},
 } satisfies Meta<typeof WizardActions>;
 
-const Template: StoryFn<ComponentProps<typeof WizardActions>> = (args) => (
+const Template: StoryFn<WizardActionsProps> = (args) => (
 	<WizardActions {...args}>
 		<WizardBackButton />
 		<WizardNextButton />
diff --git a/packages/ui-client/src/components/Wizard/WizardActions.tsx b/packages/ui-client/src/components/Wizard/WizardActions.tsx
index 8a891cbbc874f..c2947d38cb29d 100644
--- a/packages/ui-client/src/components/Wizard/WizardActions.tsx
+++ b/packages/ui-client/src/components/Wizard/WizardActions.tsx
@@ -1,7 +1,7 @@
 import { Box, ButtonGroup } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-type WizardActionsProps = {
+export type WizardActionsProps = {
 	annotation?: string;
 	children: ReactNode;
 };
diff --git a/packages/ui-client/src/components/Wizard/WizardBackButton.tsx b/packages/ui-client/src/components/Wizard/WizardBackButton.tsx
index 52bb9278007f9..d64a12882c4a0 100644
--- a/packages/ui-client/src/components/Wizard/WizardBackButton.tsx
+++ b/packages/ui-client/src/components/Wizard/WizardBackButton.tsx
@@ -1,10 +1,10 @@
 import { Button } from '@rocket.chat/fuselage';
-import type { ComponentProps, MouseEvent } from 'react';
+import type { ComponentPropsWithoutRef, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useWizardContext } from './useWizardContext';
 
-type WizardBackButtonProps = Omit<ComponentProps<typeof Button>, 'primary' | 'onClick'> & {
+type WizardBackButtonProps = Omit<ComponentPropsWithoutRef<typeof Button>, 'primary' | 'onClick'> & {
 	manual?: boolean;
 	onClick?(event?: MouseEvent<HTMLElement>): unknown | Promise<unknown>;
 };
diff --git a/packages/ui-client/src/components/Wizard/WizardNextButton.tsx b/packages/ui-client/src/components/Wizard/WizardNextButton.tsx
index fa26efb3eaf03..cc5bcc8116db8 100644
--- a/packages/ui-client/src/components/Wizard/WizardNextButton.tsx
+++ b/packages/ui-client/src/components/Wizard/WizardNextButton.tsx
@@ -1,10 +1,10 @@
 import { Button } from '@rocket.chat/fuselage';
-import type { ComponentProps, MouseEvent } from 'react';
+import type { ComponentPropsWithoutRef, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useWizardContext } from './useWizardContext';
 
-type WizardNextButtonProps = Omit<ComponentProps<typeof Button>, 'primary' | 'onClick'> & {
+type WizardNextButtonProps = Omit<ComponentPropsWithoutRef<typeof Button>, 'primary' | 'onClick'> & {
 	manual?: boolean;
 	onClick?(event?: MouseEvent<HTMLElement>): unknown | Promise<unknown>;
 };
diff --git a/packages/ui-client/src/components/Wizard/mocks/createMockWizardApi.ts b/packages/ui-client/src/components/Wizard/mocks/createMockWizardApi.ts
index fec96cccafb73..5f78e9e453935 100644
--- a/packages/ui-client/src/components/Wizard/mocks/createMockWizardApi.ts
+++ b/packages/ui-client/src/components/Wizard/mocks/createMockWizardApi.ts
@@ -1,4 +1,4 @@
-import { WizardAPI } from '../WizardContext';
+import type { WizardAPI } from '../WizardContext';
 import StepsLinkedList from '../lib/StepsLinkedList';
 
 export const createMockWizardApi = (overrides?: Partial<WizardAPI>) => {
diff --git a/packages/ui-client/src/helpers/imperativeModal.tsx b/packages/ui-client/src/helpers/imperativeModal.tsx
index 597beace028bb..b730a7a2c6677 100644
--- a/packages/ui-client/src/helpers/imperativeModal.tsx
+++ b/packages/ui-client/src/helpers/imperativeModal.tsx
@@ -1,12 +1,12 @@
 import { Emitter } from '@rocket.chat/emitter';
 import { createElement } from 'react';
-import type { ComponentProps, ComponentType, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ComponentType, ReactNode } from 'react';
 
 import { modalStore } from '../providers/ModalProvider/ModalStore';
 
 type ReactModalDescriptor<TComponent extends ComponentType<any> = ComponentType<any>> = {
 	component: TComponent;
-	props?: ComponentProps<TComponent>;
+	props?: ComponentPropsWithoutRef<TComponent>;
 };
 
 type ModalDescriptor = ReactModalDescriptor | null;
diff --git a/packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts b/packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts
index f0d7b8e831449..8e4557dfd5a08 100644
--- a/packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts
+++ b/packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts
@@ -1,7 +1,8 @@
 import { useSetting, useUserPreference } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import { FeaturePreviewProps, parseSetting, useFeaturePreviewList } from './useFeaturePreviewList';
+import type { FeaturePreviewProps } from './useFeaturePreviewList';
+import { parseSetting, useFeaturePreviewList } from './useFeaturePreviewList';
 
 export const usePreferenceFeaturePreviewList = () => {
 	const featurePreviewEnabled = useSetting('Accounts_AllowFeaturePreview', false);
diff --git a/yarn.lock b/yarn.lock
index 81934e8873ac2..b6b64d91eaab1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10296,7 +10296,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@rocket.chat/ui-client@workspace:packages/ui-client"
   dependencies:
-    "@babel/core": "npm:~7.28.5"
     "@react-aria/toolbar": "npm:^3.0.0-nightly.5042"
     "@rocket.chat/core-typings": "workspace:~"
     "@rocket.chat/css-in-js": "npm:~0.31.25"