chore: explicit type imports everywhere

packages/libs/react-ui/src/components/Accordion/Accordion.tsx

@@ -1,6 +1,7 @@
 import { IAccordionSectionsProps } from '.';
 
-import React, { FC, FunctionComponentElement } from 'react';
+import type { FC, FunctionComponentElement } from 'react';
+import React from 'react';
 
 export interface IAccordionRootProps {
   children?: FunctionComponentElement<IAccordionSectionsProps>;

packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx

@@ -2,7 +2,8 @@ import { toggleButtonClass } from './Accordion.css';
 
 import { SystemIcon } from '@components/Icon';
 import classNames from 'classnames';
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export interface IAccordionSectionProps {
   children: React.ReactNode;

packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx

@@ -8,12 +8,8 @@ import useLinked from './useLinked';
 import { IAccordionSectionProps } from '.';
 
 import classNames from 'classnames';
-import React, {
-  FC,
-  FunctionComponentElement,
-  useCallback,
-  useEffect,
-} from 'react';
+import type { FC, FunctionComponentElement } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 export interface IAccordionSectionsProps {
   children?: FunctionComponentElement<IAccordionSectionProps>[];

packages/libs/react-ui/src/components/Accordion/index.ts

@@ -5,7 +5,7 @@ import { AccordionSection } from './AccordionSection';
 import type { IAccordionSectionsProps } from './AccordionSections';
 import { AccordionSections } from './AccordionSections';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export { IAccordionRootProps, IAccordionSectionProps, IAccordionSectionsProps };
 

packages/libs/react-ui/src/components/Box/Box.stories.tsx

@@ -1,6 +1,7 @@
 import { containerClass, contentClass } from './stories.css';
 
-import { Box, IBoxProps } from '@components/Box';
+import type { IBoxProps } from '@components/Box';
+import { Box } from '@components/Box';
 import type { Meta, StoryObj } from '@storybook/react';
 import { vars } from '@theme/vars.css';
 import React from 'react';

packages/libs/react-ui/src/components/Box/Box.tsx

@@ -1,5 +1,7 @@
-import { Sprinkles, sprinkles } from '@theme/sprinkles.css';
-import React, { createElement, ElementType } from 'react';
+import type { Sprinkles } from '@theme/sprinkles.css';
+import { sprinkles } from '@theme/sprinkles.css';
+import type { ElementType } from 'react';
+import React, { createElement } from 'react';
 
 export interface IBoxProps
   extends Partial<

packages/libs/react-ui/src/components/BrandLogo/index.tsx

@@ -2,7 +2,8 @@ import { KadenaLogo } from './variants/Kadena';
 import { KadenaDevToolsLogo } from './variants/KadenaDevTools';
 import { KadenaDocsLogo } from './variants/KadenaDocs';
 
-import React, { FC, SVGProps } from 'react';
+import type { FC, SVGProps } from 'react';
+import React from 'react';
 
 export type LogoVariant = 'Kadena' | 'DevTools' | 'Docs';
 export const logoVariants: LogoVariant[] = ['Kadena', 'DevTools', 'Docs'];

packages/libs/react-ui/src/components/BrandLogo/variants/Kadena.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 export const KadenaLogo: React.FC<SVGProps<SVGSVGElement>> = () => (
   <svg

packages/libs/react-ui/src/components/BrandLogo/variants/KadenaDevTools.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const KadenaDevToolsLogo: React.FC<SVGProps<SVGSVGElement>> = () => (
   <svg

packages/libs/react-ui/src/components/BrandLogo/variants/KadenaDocs.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const KadenaDocsLogo: React.FC<SVGProps<SVGSVGElement>> = () => (
   <svg

packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,4 +1,5 @@
-import { Breadcrumbs, IBreadcrumbsProps } from '@components/Breadcrumbs';
+import type { IBreadcrumbsProps } from '@components/Breadcrumbs';
+import { Breadcrumbs } from '@components/Breadcrumbs';
 import { ProductIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';

packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,8 +1,9 @@
 import { containerClass, iconContainer, navClass } from './Breadcrumbs.css';
-import { IBreadcrumbItemProps } from './BreadcrumbsItem';
+import type { IBreadcrumbItemProps } from './BreadcrumbsItem';
 
 import { ProductIcon } from '@components/Icon';
-import React, { FC, FunctionComponentElement } from 'react';
+import type { FC, FunctionComponentElement } from 'react';
+import React from 'react';
 
 export interface IBreadcrumbsProps {
   children?: FunctionComponentElement<IBreadcrumbItemProps>[];

packages/libs/react-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -1,6 +1,7 @@
 import { itemClass, linkClass, spanClass } from './Breadcrumbs.css';
 
-import React, { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
 
 export interface IBreadcrumbItemProps {
   children?: ReactNode;

packages/libs/react-ui/src/components/Breadcrumbs/index.tsx

@@ -3,7 +3,7 @@ import { BreadcrumbsContainer } from './Breadcrumbs';
 import type { IBreadcrumbItemProps } from './BreadcrumbsItem';
 import { BreadcrumbsItem } from './BreadcrumbsItem';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 interface IBreadcrumbs {
   Root: FC<IBreadcrumbsProps>;

packages/libs/react-ui/src/components/Button/Button.css.ts

@@ -1,6 +1,7 @@
 import { colorPalette } from '@theme/colors';
 import { sprinkles } from '@theme/sprinkles.css';
-import { ColorType, darkThemeClass, vars } from '@theme/vars.css';
+import type { ColorType } from '@theme/vars.css';
+import { darkThemeClass, vars } from '@theme/vars.css';
 import {
   createVar,
   keyframes,

packages/libs/react-ui/src/components/Button/Button.tsx

@@ -7,7 +7,8 @@ import { ButtonIcon } from './ButtonIcon';
 
 import { SystemIcon } from '@components/Icon';
 import cx from 'classnames';
-import React, { ButtonHTMLAttributes, FC } from 'react';
+import type { ButtonHTMLAttributes, FC } from 'react';
+import React from 'react';
 
 export interface IButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as' | 'disabled'> {

packages/libs/react-ui/src/components/Button/ButtonIcon.tsx

@@ -1,5 +1,6 @@
 import { SystemIcon } from '@components/Icon';
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 type IconProps = JSX.IntrinsicElements['i'];
 export interface IButtonIconProps extends IconProps {

packages/libs/react-ui/src/components/Card/Card.stories.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@components/Button';
-import { Card, ICardProps } from '@components/Card';
+import type { ICardProps } from '@components/Card';
+import { Card } from '@components/Card';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 

packages/libs/react-ui/src/components/Card/Card.tsx

@@ -6,7 +6,8 @@ import {
 } from './Card.css';
 
 import className from 'classnames';
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export interface ICardChildComponentProps {
   children: React.ReactNode;

packages/libs/react-ui/src/components/ContentHeader/ContentHeader.stories.tsx

@@ -1,4 +1,5 @@
-import { ContentHeader, IContentHeaderProps } from '@components/ContentHeader';
+import type { IContentHeaderProps } from '@components/ContentHeader';
+import { ContentHeader } from '@components/ContentHeader';
 import { SystemIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';

packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx

@@ -2,7 +2,8 @@ import { containerClass, descriptionClass } from './ContentHeader.css';
 
 import { SystemIcon } from '@components/Icon';
 import { Heading, Text } from '@components/Typography';
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export interface IContentHeaderProps {
   icon: (typeof SystemIcon)[keyof typeof SystemIcon];

packages/libs/react-ui/src/components/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import { dividerClass } from './Divider.css';
 
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export const Divider: FC = () => {
   return <hr className={dividerClass} />;

packages/libs/react-ui/src/components/Grid/Grid.stories.tsx

@@ -1,5 +1,6 @@
-import { gapVariants, ResponsiveInputType } from './Grid.css';
-import { IGridRootProps } from './GridRoot';
+import type { ResponsiveInputType } from './Grid.css';
+import { gapVariants } from './Grid.css';
+import type { IGridRootProps } from './GridRoot';
 import { ContentClass } from './stories.css';
 
 import { Grid } from '@components/Grid';

packages/libs/react-ui/src/components/Grid/GridItem.tsx

@@ -7,7 +7,8 @@ import {
 } from './Grid.css';
 
 import classNames from 'classnames';
-import React, { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
 
 export interface IGridItemProps {
   children?: ReactNode;

packages/libs/react-ui/src/components/Grid/GridRoot.tsx

@@ -7,7 +7,8 @@ import {
 } from './Grid.css';
 
 import classNames from 'classnames';
-import React, { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
 
 export interface IGridRootProps {
   children?: ReactNode;

packages/libs/react-ui/src/components/Grid/index.ts

@@ -3,7 +3,7 @@ import GridItem from './GridItem';
 import type { IGridRootProps } from './GridRoot';
 import GridRoot from './GridRoot';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export type { IGridRootProps as IGridContainerProps, IGridItemProps };
 

packages/libs/react-ui/src/components/Icon/IconWrapper.tsx

@@ -1,7 +1,8 @@
 import { iconContainer, sizeVariants } from './IconWrapper.css';
 
 import classNames from 'classnames';
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 
 export interface IIconProps {
   size?: keyof typeof sizeVariants;

packages/libs/react-ui/src/components/Icon/Product/ProductIcon.stories.tsx

@@ -1,7 +1,8 @@
 import { sizeVariants } from '../IconWrapper.css';
 import { gridContainer, gridItem } from '../stories.css';
 
-import { IIconProps, ProductIcon } from '@components/Icon';
+import type { IIconProps } from '@components/Icon';
+import { ProductIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 

packages/libs/react-ui/src/components/Icon/Product/svgs/BlogChain.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const BlogChain: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/Chainweb.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const Chainweb: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/Concepts.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const Concepts: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/Contribute.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const Contribute: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/KadenaOverview.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const KadenaOverview: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/ManageKda.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const ManageKda: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/Marmalade.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const Marmalade: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/Overview.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const Overview: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/PactDeveloper.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const PactDeveloper: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/PactLanguage.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const PactLanguage: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/QuickStart.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const QuickStart: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/RestApi.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const RestApi: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/SmartContract.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const SmartContract: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/Syntax.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const Syntax: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/UsefulTools.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const UsefulTools: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/Product/svgs/Whitepapers.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const Whitepapers: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx

@@ -1,7 +1,8 @@
 import { sizeVariants } from '../IconWrapper.css';
 import { gridContainer, gridItem } from '../stories.css';
 
-import { IIconProps, SystemIcon } from '@components/Icon';
+import type { IIconProps } from '@components/Icon';
+import { SystemIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 

packages/libs/react-ui/src/components/Icon/System/svgs/Account.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const Account: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,

packages/libs/react-ui/src/components/Icon/System/svgs/AlertBox.tsx

@@ -1,5 +1,5 @@
+import type { SVGProps } from 'react';
 import * as React from 'react';
-import { SVGProps } from 'react';
 
 const AlertBox: React.FC<SVGProps<SVGSVGElement>> = (
   props: SVGProps<SVGSVGElement>,