From a6dbd52465e71dfae50067ad5c66b1c497f9b87a Mon Sep 17 00:00:00 2001
From: mwleklinskiVL <mwleklinski@virtuslab.com>
Date: Fri, 3 Nov 2023 13:27:31 +0100
Subject: [PATCH] chore: NO-JIRA: change React.FC to FC

---
 src/components/AlertBanner/AlertBanner.tsx          |  4 ++--
 src/components/Avatar/Avatar.tsx                    |  4 ++--
 src/components/Badge/Badge.tsx                      |  8 ++++----
 src/components/Button/Button.tsx                    |  6 +++---
 src/components/CheckboxGroup/CheckboxGroup.tsx      |  7 ++++---
 src/components/Counter/Counter.tsx                  |  4 ++--
 src/components/Divider/Divider.tsx                  |  4 ++--
 src/components/IconButton/IconButton.tsx            |  8 +++++---
 src/components/InlineBanner/InlineBanner.tsx        |  4 ++--
 src/components/InlineMessage/InlineMessage.tsx      |  8 ++++----
 .../InlineSearchInput/InlineSearchInput.tsx         | 13 +++++++------
 src/components/Label/Label.tsx                      |  6 +++---
 src/components/Loader/Loader.tsx                    | 10 ++++++----
 src/components/Popover/Popover.tsx                  |  6 ++----
 .../RadioButtonGroup/RadioButtonGroup.tsx           | 13 ++++++-------
 src/components/SearchInput/SearchInput.tsx          | 10 ++++++----
 src/components/Select/Select.tsx                    |  3 ++-
 src/components/SocialButton/SocialButton.tsx        |  4 ++--
 src/components/SocialButton/socials/Apple.tsx       |  4 +++-
 src/components/SocialButton/socials/Facebook.tsx    |  4 +++-
 src/components/SocialButton/socials/Figma.tsx       |  6 ++++--
 src/components/SocialButton/socials/Github.tsx      |  6 ++++--
 src/components/SocialButton/socials/Google.tsx      |  6 ++++--
 src/components/SocialButton/socials/Twitter.tsx     |  6 ++++--
 src/components/SocialButton/socials/WithLoader.tsx  |  4 ++--
 src/components/SocialButton/socials/socials.ts      |  8 +++++---
 src/components/StatusDot/StatusDot.tsx              |  4 ++--
 src/components/Tag/Tag.tsx                          |  3 ++-
 src/components/Toast/Toast.tsx                      |  4 ++--
 src/docs-components/ButtonDocs/ButtonDocs.tsx       |  3 ++-
 src/docs-components/CheckboxDocs.tsx                |  4 +++-
 src/docs-components/RadioButtonDocs.tsx             |  6 ++++--
 src/docs-components/TagDocs.tsx                     |  4 +++-
 src/docs-components/TetDocs.tsx                     |  4 ++--
 src/docs-components/common/Cols.tsx                 |  9 +++++----
 src/docs-components/common/Hero.tsx                 |  4 +++-
 src/docs-components/common/States.tsx               |  4 ++--
 37 files changed, 123 insertions(+), 92 deletions(-)

diff --git a/src/components/AlertBanner/AlertBanner.tsx b/src/components/AlertBanner/AlertBanner.tsx
index ef22732c..2a52254b 100644
--- a/src/components/AlertBanner/AlertBanner.tsx
+++ b/src/components/AlertBanner/AlertBanner.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { AlertBannerProps } from './AlertBanner.props';
 import { resolveIconName } from './AlertBanner.styles';
@@ -11,7 +11,7 @@ import { useAction } from '@/hooks';
 import { tet } from '@/tetrisly';
 import { MarginProps } from '@/types';
 
-export const AlertBanner: React.FC<AlertBannerProps & MarginProps> = ({
+export const AlertBanner: FC<AlertBannerProps & MarginProps> = ({
   text,
   intent = 'none',
   custom,
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index f7a0aa3f..8eeabe13 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { AvatarProps } from './Avatar.props';
 import { stylesBuilder } from './stylesBuilder';
@@ -6,7 +6,7 @@ import { stylesBuilder } from './stylesBuilder';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types/MarginProps';
 
-export const Avatar: React.FC<AvatarProps & MarginProps> = ({
+export const Avatar: FC<AvatarProps & MarginProps> = ({
   appearance = 'blue',
   emphasis = 'low',
   shape = 'rounded',
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 44cb5685..220cad8a 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,13 +1,13 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { BadgeProps } from './Badge.props';
+import type { BadgeProps } from './Badge.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
-export const Badge: React.FC<BadgeProps & MarginProps> = ({
+export const Badge: FC<BadgeProps & MarginProps> = ({
   appearance,
   intent = 'neutral',
   emphasis = 'high',
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index c0a09f1d..b6abe707 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { ButtonProps } from './Button.props';
+import type { ButtonProps } from './Button.props';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 import { Loader } from '../Loader';
@@ -9,7 +9,7 @@ import { Loader } from '../Loader';
 import { warnInDevelopment } from '@/services';
 import type { MarginProps } from '@/types';
 
-export const Button: React.FC<ButtonProps & MarginProps> = ({
+export const Button: FC<ButtonProps & MarginProps> = ({
   variant = 'default',
   appearance = 'secondary',
   intent = 'none',
diff --git a/src/components/CheckboxGroup/CheckboxGroup.tsx b/src/components/CheckboxGroup/CheckboxGroup.tsx
index c9e3e8a0..9a1700da 100644
--- a/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -1,5 +1,6 @@
 import {
   Children,
+  FC,
   ForwardRefExoticComponent,
   isValidElement,
   PropsWithChildren,
@@ -8,14 +9,14 @@ import {
 
 import type { CheckboxGroupProps } from './CheckboxGroup.props';
 import { stylesBuilder } from './stylesBuilder';
-import { Checkbox, CheckboxProps } from '../Checkbox';
+import { Checkbox, type CheckboxProps } from '../Checkbox';
 import { HelperText } from '../HelperText';
 import { Label } from '../Label';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
-type Props = React.FC<PropsWithChildren<CheckboxGroupProps & MarginProps>> & {
+type Props = FC<PropsWithChildren<CheckboxGroupProps & MarginProps>> & {
   Item: ForwardRefExoticComponent<CheckboxProps & MarginProps>;
 };
 
diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
index bb03c156..2a8a1640 100644
--- a/src/components/Counter/Counter.tsx
+++ b/src/components/Counter/Counter.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { CounterProps } from './Counter.props';
 import { stylesBuilder } from './stylesBuilder';
@@ -6,7 +6,7 @@ import { stylesBuilder } from './stylesBuilder';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const Counter: React.FC<CounterProps & MarginProps> = ({
+export const Counter: FC<CounterProps & MarginProps> = ({
   number,
   appearance = 'default',
   emphasis = 'low',
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index a65a7451..18ea0181 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { DividerProps } from './Divider.props';
 import { stylesBuilder } from './stylesBuilder';
@@ -6,7 +6,7 @@ import { stylesBuilder } from './stylesBuilder';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const Divider: React.FC<DividerProps & MarginProps> = ({
+export const Divider: FC<DividerProps & MarginProps> = ({
   orientation = 'horizontal',
   width,
   height,
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 9a2667e2..c0884886 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -1,9 +1,11 @@
+import type { FC } from 'react';
+
 import { IconButtonProps } from './IconButton.props';
 import { defaultConfig } from './IconButton.styles';
-import { Button, ButtonProps } from '../Button';
+import { Button, type ButtonProps } from '../Button';
 
 import { mergeConfigWithCustom } from '@/services';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
 const mapperIconButtonPropsToButtonProps = ({
   children,
@@ -21,7 +23,7 @@ const mapperIconButtonPropsToButtonProps = ({
   } as ButtonProps;
 };
 
-export const IconButton: React.FC<IconButtonProps & MarginProps> = (props) => {
+export const IconButton: FC<IconButtonProps & MarginProps> = (props) => {
   const buttonProps = mapperIconButtonPropsToButtonProps(props);
   const custom = mergeConfigWithCustom({
     defaultConfig,
diff --git a/src/components/InlineBanner/InlineBanner.tsx b/src/components/InlineBanner/InlineBanner.tsx
index 95f09c7d..389bcb90 100644
--- a/src/components/InlineBanner/InlineBanner.tsx
+++ b/src/components/InlineBanner/InlineBanner.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { InlineBannerProps } from './InlineBanner.props';
 import { resolveIconName } from './InlineBanner.styles';
@@ -11,7 +11,7 @@ import { useAction } from '@/hooks';
 import { tet } from '@/tetrisly/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const InlineBanner: React.FC<InlineBannerProps & MarginProps> = ({
+export const InlineBanner: FC<InlineBannerProps & MarginProps> = ({
   title,
   description,
   intent = 'none',
diff --git a/src/components/InlineMessage/InlineMessage.tsx b/src/components/InlineMessage/InlineMessage.tsx
index ae329292..8eaab104 100644
--- a/src/components/InlineMessage/InlineMessage.tsx
+++ b/src/components/InlineMessage/InlineMessage.tsx
@@ -1,14 +1,14 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { InlineMessageProps } from './InlineMessage.props';
+import type { InlineMessageProps } from './InlineMessage.props';
 import { resolveIconName } from './InlineMessage.styles';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
-export const InlineMessage: React.FC<InlineMessageProps & MarginProps> = ({
+export const InlineMessage: FC<InlineMessageProps & MarginProps> = ({
   intent = 'informative',
   title,
   description,
diff --git a/src/components/InlineSearchInput/InlineSearchInput.tsx b/src/components/InlineSearchInput/InlineSearchInput.tsx
index 8350f836..1cd61da8 100644
--- a/src/components/InlineSearchInput/InlineSearchInput.tsx
+++ b/src/components/InlineSearchInput/InlineSearchInput.tsx
@@ -1,15 +1,16 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { InlineSearchInputProps } from './InlineSearchInput.props';
+import type { InlineSearchInputProps } from './InlineSearchInput.props';
 import { defaultConfig } from './InlineSearchInput.styles';
 import { SearchInput } from '../SearchInput';
 
 import { mergeConfigWithCustom } from '@/services';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
-export const InlineSearchInput: React.FC<
-  InlineSearchInputProps & MarginProps
-> = ({ custom, ...restProps }) => {
+export const InlineSearchInput: FC<InlineSearchInputProps & MarginProps> = ({
+  custom,
+  ...restProps
+}) => {
   const config = useMemo(
     () => mergeConfigWithCustom({ defaultConfig, custom }),
     [custom],
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index f3062ed3..54d4af35 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,14 +1,14 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { LabelProps } from './Label.props';
 import { stylesBuilder } from './stylesBuilder';
 import { Button } from '../Button';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
-export const Label: React.FC<LabelProps & MarginProps> = ({
+export const Label: FC<LabelProps & MarginProps> = ({
   label,
   tooltip,
   action,
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index 56380772..063fe11b 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -1,13 +1,15 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import { AnimatedProgress } from './AnimatedProgress';
-import { LoaderProps } from './Loader.props';
+import type { LoaderProps } from './Loader.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
-export const Loader: React.FC<LoaderProps & MarginProps> = ({
+type NewType = FC<LoaderProps & MarginProps>;
+
+export const Loader: NewType = ({
   appearance = 'primary',
   progress,
   shape,
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index c5b57b39..089dea65 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -1,5 +1,5 @@
 import { useSpace } from '@xstyled/styled-components';
-import { type PropsWithChildren, useMemo } from 'react';
+import { type PropsWithChildren, useMemo, type FC } from 'react';
 
 import { AnchorWrapper, PopoverContent } from './AnchorWrapper.styled';
 import type { PopoverProps } from './Popover.props';
@@ -7,9 +7,7 @@ import { stylesBuilder } from './stylesBuilder';
 
 import type { MarginProps } from '@/types';
 
-export const Popover: React.FC<
-  PropsWithChildren<PopoverProps & MarginProps>
-> = ({
+export const Popover: FC<PropsWithChildren<PopoverProps & MarginProps>> = ({
   align = 'center',
   origin = 'top',
   offset = '$space-component-gap-large',
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/src/components/RadioButtonGroup/RadioButtonGroup.tsx
index 762871d0..523cc028 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -1,9 +1,10 @@
 import {
   Children,
   cloneElement,
+  type FC,
   isValidElement,
-  PropsWithChildren,
-  ReactElement,
+  type PropsWithChildren,
+  type ReactElement,
   useMemo,
 } from 'react';
 
@@ -19,10 +20,8 @@ import { RadioButton } from '../RadioButton';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-type Props = React.FC<
-  PropsWithChildren<RadioButtonGroupProps & MarginProps>
-> & {
-  Item: React.FC<RadioButtonGroupItemProps>;
+type Props = FC<PropsWithChildren<RadioButtonGroupProps & MarginProps>> & {
+  Item: FC<RadioButtonGroupItemProps>;
 };
 
 export const RadioButtonGroup: Props = ({
@@ -95,7 +94,7 @@ export const RadioButtonGroup: Props = ({
   );
 };
 
-const Item: React.FC<RadioButtonGroupItemProps> = (props) => (
+const Item: FC<RadioButtonGroupItemProps> = (props) => (
   <RadioButton {...props} />
 );
 
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index abbfee42..63e51821 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -1,7 +1,9 @@
-import { SearchInputProps } from './SearchInput.props';
-import { TextInput, TextInputProps } from '../TextInput';
+import type { FC } from 'react';
 
-import { MarginProps } from '@/types';
+import type { SearchInputProps } from './SearchInput.props';
+import { TextInput, type TextInputProps } from '../TextInput';
+
+import type { MarginProps } from '@/types';
 
 const SEARCH_ICON_COMPONENT: TextInputProps['beforeComponent'] = {
   type: 'Icon',
@@ -10,7 +12,7 @@ const SEARCH_ICON_COMPONENT: TextInputProps['beforeComponent'] = {
   },
 };
 
-export const SearchInput: React.FC<SearchInputProps & MarginProps> = ({
+export const SearchInput: FC<SearchInputProps & MarginProps> = ({
   placeholder = 'Search...',
   hasClearButton = true,
   ...restProps
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 3afd3d8d..0870600e 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,4 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
+import type { FC } from 'react';
 
 import type { SelectProps } from './Select.props';
 import { Avatar } from '../Avatar';
@@ -16,7 +17,7 @@ const DROPDOWN_INDICATOR_COMPONENT = {
   },
 } satisfies TextInputProps['afterComponent'];
 
-export const Select: React.FC<SelectProps & MarginProps> = ({
+export const Select: FC<SelectProps & MarginProps> = ({
   state,
   beforeComponent,
   hasClearButton,
diff --git a/src/components/SocialButton/SocialButton.tsx b/src/components/SocialButton/SocialButton.tsx
index 762c6faf..9a627614 100644
--- a/src/components/SocialButton/SocialButton.tsx
+++ b/src/components/SocialButton/SocialButton.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { SocialButtonProps } from './SocialButton.props';
 import { socials } from './socials';
@@ -7,7 +7,7 @@ import { stylesBuilder } from './stylesBuilder';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const SocialButton: React.FC<SocialButtonProps & MarginProps> = ({
+export const SocialButton: FC<SocialButtonProps & MarginProps> = ({
   platform,
   appearance = 'primary',
   custom,
diff --git a/src/components/SocialButton/socials/Apple.tsx b/src/components/SocialButton/socials/Apple.tsx
index 3d153725..5d67f362 100644
--- a/src/components/SocialButton/socials/Apple.tsx
+++ b/src/components/SocialButton/socials/Apple.tsx
@@ -1,9 +1,11 @@
+import type { FC } from 'react';
+
 import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 import { tet } from '@/tetrisly';
 
-export const Apple: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Apple: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <tet.svg
       data-testid="apple-icon"
diff --git a/src/components/SocialButton/socials/Facebook.tsx b/src/components/SocialButton/socials/Facebook.tsx
index 01f142c6..8e57632d 100644
--- a/src/components/SocialButton/socials/Facebook.tsx
+++ b/src/components/SocialButton/socials/Facebook.tsx
@@ -1,7 +1,9 @@
+import type { FC } from 'react';
+
 import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
-export const Facebook: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Facebook: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="facebook-icon"
diff --git a/src/components/SocialButton/socials/Figma.tsx b/src/components/SocialButton/socials/Figma.tsx
index 1af165dc..17dad1d2 100644
--- a/src/components/SocialButton/socials/Figma.tsx
+++ b/src/components/SocialButton/socials/Figma.tsx
@@ -1,7 +1,9 @@
-import { SocialProps } from './SocialProps';
+import type { FC } from 'react';
+
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
-export const Figma: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Figma: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="figma-icon"
diff --git a/src/components/SocialButton/socials/Github.tsx b/src/components/SocialButton/socials/Github.tsx
index b664abcd..37e97b4d 100644
--- a/src/components/SocialButton/socials/Github.tsx
+++ b/src/components/SocialButton/socials/Github.tsx
@@ -1,7 +1,9 @@
-import { SocialProps } from './SocialProps';
+import type { FC } from 'react';
+
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
-export const Github: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Github: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="github-icon"
diff --git a/src/components/SocialButton/socials/Google.tsx b/src/components/SocialButton/socials/Google.tsx
index 1aa3298f..604c4210 100644
--- a/src/components/SocialButton/socials/Google.tsx
+++ b/src/components/SocialButton/socials/Google.tsx
@@ -1,9 +1,11 @@
-import { SocialProps } from './SocialProps';
+import type { FC } from 'react';
+
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 import { tet } from '@/tetrisly';
 
-export const Google: React.FC<SocialProps> = ({ loading }) => (
+export const Google: FC<SocialProps> = ({ loading }) => (
   <tet.div
     data-testid="google-icon"
     ml="-10px"
diff --git a/src/components/SocialButton/socials/Twitter.tsx b/src/components/SocialButton/socials/Twitter.tsx
index b5cfcf92..d8e79eb6 100644
--- a/src/components/SocialButton/socials/Twitter.tsx
+++ b/src/components/SocialButton/socials/Twitter.tsx
@@ -1,7 +1,9 @@
-import { SocialProps } from './SocialProps';
+import type { FC } from 'react';
+
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
-export const Twitter: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Twitter: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="x-icon"
diff --git a/src/components/SocialButton/socials/WithLoader.tsx b/src/components/SocialButton/socials/WithLoader.tsx
index 407315fb..3acb885b 100644
--- a/src/components/SocialButton/socials/WithLoader.tsx
+++ b/src/components/SocialButton/socials/WithLoader.tsx
@@ -1,8 +1,8 @@
-import type { PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
 import { Loader } from '@/components/Loader';
 
-export const WithLoader: React.FC<PropsWithChildren<{ loading: boolean }>> = ({
+export const WithLoader: FC<PropsWithChildren<{ loading: boolean }>> = ({
   loading,
   children,
 }) =>
diff --git a/src/components/SocialButton/socials/socials.ts b/src/components/SocialButton/socials/socials.ts
index 3dac0db8..b2423463 100644
--- a/src/components/SocialButton/socials/socials.ts
+++ b/src/components/SocialButton/socials/socials.ts
@@ -1,11 +1,13 @@
+import type { FC } from 'react';
+
 import { Apple } from './Apple';
 import { Facebook } from './Facebook';
 import { Figma } from './Figma';
 import { Github } from './Github';
 import { Google } from './Google';
-import { SocialProps } from './SocialProps';
+import type { SocialProps } from './SocialProps';
 import { Twitter } from './Twitter';
-import { SocialButtonProps } from '../SocialButton.props';
+import type { SocialButtonProps } from '../SocialButton.props';
 
 export const socials = {
   Apple: {
@@ -35,7 +37,7 @@ export const socials = {
 } as const satisfies Record<
   SocialButtonProps['platform'],
   {
-    Icon: React.FC<SocialProps>;
+    Icon: FC<SocialProps>;
     color: string;
   }
 >;
diff --git a/src/components/StatusDot/StatusDot.tsx b/src/components/StatusDot/StatusDot.tsx
index c760b450..0a673afa 100644
--- a/src/components/StatusDot/StatusDot.tsx
+++ b/src/components/StatusDot/StatusDot.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { StatusDotProps } from './StatusDot.props';
 import { stylesBuilder } from './stylesBuilder';
@@ -6,7 +6,7 @@ import { stylesBuilder } from './stylesBuilder';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const StatusDot: React.FC<StatusDotProps & MarginProps> = ({
+export const StatusDot: FC<StatusDotProps & MarginProps> = ({
   appearance = 'red',
   hasStroke = false,
   custom,
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 55c57cde..4fe09243 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -4,6 +4,7 @@ import {
   useCallback,
   useMemo,
   useRef,
+  FC,
 } from 'react';
 
 import { stylesBuilder } from './stylesBuilder';
@@ -19,7 +20,7 @@ const KEYBOARD_KEYS = {
   Space: ' ',
 };
 
-export const Tag: React.FC<TagProps & MarginProps> = ({
+export const Tag: FC<TagProps & MarginProps> = ({
   label,
   state,
   beforeComponent,
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index e97acf8c..41c344dd 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import { stylesBuilder } from './stylesBuilder';
 import type { ToastProps } from './Toast.props';
@@ -11,7 +11,7 @@ import { useAction } from '@/hooks';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const Toast: React.FC<ToastProps & MarginProps> = ({
+export const Toast: FC<ToastProps & MarginProps> = ({
   text,
   emphasis = 'low',
   intent = 'neutral',
diff --git a/src/docs-components/ButtonDocs/ButtonDocs.tsx b/src/docs-components/ButtonDocs/ButtonDocs.tsx
index 74927146..7fc6ee61 100644
--- a/src/docs-components/ButtonDocs/ButtonDocs.tsx
+++ b/src/docs-components/ButtonDocs/ButtonDocs.tsx
@@ -1,4 +1,5 @@
 import { startCase } from 'lodash';
+import type { FC } from 'react';
 
 import { ButtonRow } from './ButtonRow';
 import { SectionHeader } from '../common/SectionHeader';
@@ -27,7 +28,7 @@ const getButtonIntents = (
   return ['none'] as const;
 };
 
-export const ButtonDocs: React.FC = () => (
+export const ButtonDocs: FC = () => (
   <>
     {variants.map((variant) => (
       <tet.section
diff --git a/src/docs-components/CheckboxDocs.tsx b/src/docs-components/CheckboxDocs.tsx
index 568b5f64..91722d40 100644
--- a/src/docs-components/CheckboxDocs.tsx
+++ b/src/docs-components/CheckboxDocs.tsx
@@ -1,3 +1,5 @@
+import type { FC } from 'react';
+
 import { SectionHeader } from './common/SectionHeader';
 import { States } from './common/States';
 
@@ -11,7 +13,7 @@ const getLabels = (label: boolean, helperText: boolean) => [
   `Helper Text: ${getYesNo(helperText)}`,
 ];
 
-export const CheckboxDocs: React.FC = () => (
+export const CheckboxDocs: FC = () => (
   <tet.div>
     {['Unchecked', 'Checked', 'Indeterminate'].map((state) => (
       <tet.section key={state} py="$dimension-500">
diff --git a/src/docs-components/RadioButtonDocs.tsx b/src/docs-components/RadioButtonDocs.tsx
index f641ebb0..e288345e 100644
--- a/src/docs-components/RadioButtonDocs.tsx
+++ b/src/docs-components/RadioButtonDocs.tsx
@@ -1,7 +1,9 @@
+import type { FC } from 'react';
+
 import { SectionHeader } from './common/SectionHeader';
 import { States } from './common/States';
 
-import { RadioButton, RadioButtonProps } from '@/components/RadioButton';
+import { RadioButton, type RadioButtonProps } from '@/components/RadioButton';
 import { tet } from '@/tetrisly';
 
 const getYesNo = (yes: boolean) => (yes ? 'Yes' : 'No');
@@ -11,7 +13,7 @@ const getLabels = (label: boolean, helperText: boolean) => [
   `Helper Text: ${getYesNo(helperText)}`,
 ];
 
-export const RadioButtonDocs: React.FC = () => (
+export const RadioButtonDocs: FC = () => (
   <tet.div>
     {['Unchecked', 'Checked'].map((state) => (
       <tet.section key={state} py="$dimension-500">
diff --git a/src/docs-components/TagDocs.tsx b/src/docs-components/TagDocs.tsx
index d1ea42ca..8ae0741c 100644
--- a/src/docs-components/TagDocs.tsx
+++ b/src/docs-components/TagDocs.tsx
@@ -1,3 +1,5 @@
+import type { FC } from 'react';
+
 import { Tag, type TagProps } from '@/components/Tag';
 import { SectionHeader } from '@/docs-components/common/SectionHeader.tsx';
 import { States } from '@/docs-components/common/States.tsx';
@@ -34,7 +36,7 @@ const RenderTag = ({
   </tet.div>
 );
 
-export const TagDocs: React.FC = () => (
+export const TagDocs: FC = () => (
   <tet.div>
     {headers.map((header) => (
       <tet.section key={header} py="$dimension-500">
diff --git a/src/docs-components/TetDocs.tsx b/src/docs-components/TetDocs.tsx
index 031430f2..1a4f1474 100644
--- a/src/docs-components/TetDocs.tsx
+++ b/src/docs-components/TetDocs.tsx
@@ -1,5 +1,5 @@
 import { Primary, Controls, Stories, useOf, Unstyled } from '@storybook/blocks';
-import type { PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { z } from 'zod';
 
 import { Hero } from './common/Hero';
@@ -19,7 +19,7 @@ const validateDocs = (docs: unknown) => {
   return null;
 };
 
-export const TetDocs: React.FC<PropsWithChildren<{ docs: string | null }>> = ({
+export const TetDocs: FC<PropsWithChildren<{ docs: string | null }>> = ({
   children,
   docs,
 }) => {
diff --git a/src/docs-components/common/Cols.tsx b/src/docs-components/common/Cols.tsx
index 8d319a98..98df4e80 100644
--- a/src/docs-components/common/Cols.tsx
+++ b/src/docs-components/common/Cols.tsx
@@ -1,8 +1,9 @@
-import { GapProps } from '@xstyled/styled-components';
+import type { GapProps } from '@xstyled/styled-components';
+import type { FC } from 'react';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
-import { PaddingProps } from '@/types/PaddingProps';
+import type { MarginProps } from '@/types/MarginProps';
+import type { PaddingProps } from '@/types/PaddingProps';
 
 type ColsProps = {
   columns?: number;
@@ -11,7 +12,7 @@ type ColsProps = {
 } & PaddingProps &
   MarginProps;
 
-export const Cols: React.FC<ColsProps> = ({
+export const Cols: FC<ColsProps> = ({
   columns = 2,
   children,
   gap,
diff --git a/src/docs-components/common/Hero.tsx b/src/docs-components/common/Hero.tsx
index 8017587e..c364e6da 100644
--- a/src/docs-components/common/Hero.tsx
+++ b/src/docs-components/common/Hero.tsx
@@ -1,3 +1,5 @@
+import type { FC } from 'react';
+
 import { Logo } from './Logo';
 import { TetrislyMark } from './TetrislyMark';
 
@@ -9,7 +11,7 @@ type HeroProps = {
   docs: string | null;
 };
 
-export const Hero: React.FC<HeroProps> = ({ component, description, docs }) => (
+export const Hero: FC<HeroProps> = ({ component, description, docs }) => (
   <tet.section
     p={{
       xs: '$space-component-padding-xLarge',
diff --git a/src/docs-components/common/States.tsx b/src/docs-components/common/States.tsx
index 1189e63b..725fa397 100644
--- a/src/docs-components/common/States.tsx
+++ b/src/docs-components/common/States.tsx
@@ -3,7 +3,7 @@ import type {
   GapProps,
   WidthProps,
 } from '@xstyled/styled-components';
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { tet } from '@/tetrisly';
 
@@ -31,7 +31,7 @@ export const State: FC<
   </tet.div>
 );
 
-export const States: React.FC<StatesProps> = ({
+export const States: FC<StatesProps> = ({
   states,
   gap,
   itemWidth,