diff --git a/.changeset/fast-drinks-argue.md b/.changeset/fast-drinks-argue.md
new file mode 100644
index 000000000..abb92c5d5
--- /dev/null
+++ b/.changeset/fast-drinks-argue.md
@@ -0,0 +1,38 @@
+---
+'@clickhouse/click-ui': minor
+---
+
+The Click-UI source code has several circular dependencies that must be resolved.
+
+During the resolution of component path redundancies and public API encapsulation in #798, several circular dependencies were exposed. There, some quick basic fixes were applied to allow to progress, but it was found that a separate PR was needed to resolve them.
+
+**What changed?**
+
+The `InitCUIThemeScript` component and `InitCUIThemeScriptProps` type were previously exported via `src/theme/index.ts` (which has been removed). They are now explicitly exported from the main entry point (`src/index.ts`). Consumers using SSR theme injection must update their imports:
+
+```tsx
+// Before
+import { InitCUIThemeScript } from '@clickhouse/click-ui/theme';
+
+// After
+import { InitCUIThemeScript } from '@clickhouse/click-ui';
+```
+
+
+**Additional cleanup:**
+
+Removed orphaned subpath exports for `CrossButton`, `EmptyButton`, and `GridCenter`. These components were moved to `@/components/Common` in a previous refactor but duplicate directories were left behind. They are now exclusively available via the Common module:
+
+```tsx
+// Before
+import { CrossButton } from '@clickhouse/click-ui/CrossButton';
+
+// After
+import { CrossButton } from '@clickhouse/click-ui';
+// or for internal use:
+import { CrossButton } from '@/components/Common';
+```
+
+**Bug fix:**
+
+Fixed a broken type export in `src/components/Common/index.ts` that was referencing a deleted file (`Common.types.ts`). The `TextSize`, `TextWeight`, and `CursorOptions` types are now correctly exported from their respective source files (`Typography` and `Panel`).
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index c41c943ab..2c2bda34e 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,15 +1,15 @@
-import { useState, useEffect, ReactNode } from "react";
-import type { Preview } from "@storybook/react-vite";
-import { Decorator } from "@storybook/react-vite";
-import { styled } from "styled-components";
-import { themes } from "storybook/theming";
-import ClickUIProvider from "../src/theme/ClickUIProvider/ClickUIProvider";
+import { useState, useEffect, ReactNode } from 'react';
+import type { Preview } from '@storybook/react-vite';
+import { Decorator } from '@storybook/react-vite';
+import { styled } from 'styled-components';
+import { themes } from 'storybook/theming';
+import { ClickUIProvider } from '@/providers';
 
 const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
   ({ $left, $bfill: fill, theme }) => `
       position: absolute;
       top: 0.5rem;
-      left: ${$left || fill ? 0 : "50vw"};
+      left: ${$left || fill ? 0 : '50vw'};
       right: 0;
       height: fit-content;
       bottom: 0;
@@ -22,28 +22,26 @@ const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
 
 export const globalTypes = {
   theme: {
-    name: "Theme",
-    description: "Global theme for components",
-    defaultValue: "system",
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'system',
     toolbar: {
-      icon: "circlehollow",
+      icon: 'circlehollow',
       items: [
-        { value: "system", icon: "browser", title: "system" },
-        { value: "dark", icon: "moon", title: "dark" },
-        { value: "light", icon: "sun", title: "light" },
+        { value: 'system', icon: 'browser', title: 'system' },
+        { value: 'dark', icon: 'moon', title: 'dark' },
+        { value: 'light', icon: 'sun', title: 'light' },
       ],
       showName: true,
     },
   },
 };
 
-const getSystemTheme = (): "dark" | "light" => {
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? "dark"
-      : "light";
+const getSystemTheme = (): 'dark' | 'light' => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
-  return "dark";
+  return 'dark';
 };
 
 interface ThemeWrapperProps {
@@ -52,24 +50,27 @@ interface ThemeWrapperProps {
 }
 
 const ThemeWrapper = ({ themeSelection, children }: ThemeWrapperProps) => {
-  const [systemTheme, setSystemTheme] = useState<"dark" | "light">(getSystemTheme);
+  const [systemTheme, setSystemTheme] = useState<'dark' | 'light'>(getSystemTheme);
 
   // Listen for system theme changes
   useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleChange = () => {
-      setSystemTheme(mediaQuery.matches ? "dark" : "light");
+      setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
     };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
   }, []);
 
   // Resolve the actual theme: handle "system" and fallback for undefined/null
   const theme =
-    themeSelection === "system" || !themeSelection ? systemTheme : themeSelection;
+    themeSelection === 'system' || !themeSelection ? systemTheme : themeSelection;
 
   return (
-    <ClickUIProvider theme={theme} config={{ tooltip: { delayDuration: 0 } }}>
+    <ClickUIProvider
+      theme={theme}
+      config={{ tooltip: { delayDuration: 0 } }}
+    >
       <ThemeBlock $left>{children}</ThemeBlock>
     </ClickUIProvider>
   );
@@ -90,22 +91,22 @@ const preview: Preview = {
   parameters: {
     options: {
       storySort: {
-        method: "alphabetical",
+        method: 'alphabetical',
         order: [
-          "Introduction",
-          "Buttons",
-          "Cards",
-          "Layout",
-          "Forms",
-          "Display",
-          "Sidebar",
-          "Typography",
-          "Colors",
-          ["Title", "Text", "Link"],
+          'Introduction',
+          'Buttons',
+          'Cards',
+          'Layout',
+          'Forms',
+          'Display',
+          'Sidebar',
+          'Typography',
+          'Colors',
+          ['Title', 'Text', 'Link'],
         ],
       },
     },
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
diff --git a/package.json b/package.json
index 158dc9150..ecb010057 100644
--- a/package.json
+++ b/package.json
@@ -157,6 +157,11 @@
       "import": "./dist/esm/components/GenericLabel/index.js",
       "require": "./dist/cjs/components/GenericLabel/index.cjs"
     },
+    "./GenericMenu": {
+      "types": "./dist/types/components/GenericMenu/index.d.ts",
+      "import": "./dist/esm/components/GenericMenu/index.js",
+      "require": "./dist/cjs/components/GenericMenu/index.cjs"
+    },
     "./Grid": {
       "types": "./dist/types/components/Grid/index.d.ts",
       "import": "./dist/esm/components/Grid/index.js",
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index 478f3fa98..62ba3b9c0 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/src/components/Accordion/Accordion.stories.tsx
@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Panel } from '..';
+import { Panel } from '@/components/Panel';
 import { Accordion } from '@/components/Accordion';
-import { Spacer } from '../Spacer';
-import { Text } from '../Typography/Text/Text';
-import { Title } from '../Typography/Title/Title';
+import { Spacer } from '@/components/Spacer';
+import { Text } from '@/components/Typography/Text';
+import { Title } from '@/components/Typography/Title';
 
 const meta: Meta<typeof Accordion> = {
   component: Accordion,
diff --git a/src/components/Accordion/Accordion.types.ts b/src/components/Accordion/Accordion.types.ts
index e45f93727..a511e590c 100644
--- a/src/components/Accordion/Accordion.types.ts
+++ b/src/components/Accordion/Accordion.types.ts
@@ -1,7 +1,7 @@
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import { ReactNode } from 'react';
-import { IconName } from '@/components/Icon';
-import { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
+import type { IconName } from '@/components/Icon';
 
 export type Size = 'sm' | 'md' | 'lg';
 export type Gap = 'sm' | 'md' | 'lg';
@@ -18,7 +18,7 @@ export interface AccordionProps
   title: ReactNode;
   color?: Color;
   icon?: IconName;
-  iconSize?: IconSize;
+  iconSize?: AssetSize;
   gap?: Gap;
   children: React.ReactNode;
   fillWidth?: boolean;
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 21fb7ba00..0886374dd 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconName } from '@/components/Icon';
+import { Icon, type IconName } from '@/components/Icon';
 import { useState, useCallback } from 'react';
 import { styled } from 'styled-components';
 import { AlertProps } from './Alert.types';
diff --git a/src/components/Alert/Alert.types.ts b/src/components/Alert/Alert.types.ts
index 19d1bf6e3..d6fb43aa3 100644
--- a/src/components/Alert/Alert.types.ts
+++ b/src/components/Alert/Alert.types.ts
@@ -1,4 +1,4 @@
-import { IconName } from '@/components/Icon';
+import type { IconName } from '@/components/Icon';
 import { ReactNode } from 'react';
 
 type AlertType = 'default' | 'banner';
diff --git a/src/components/Assets/Flags/Australia.tsx b/src/components/Assets/Flags/Australia.tsx
index 9dc4ce717..c76cd0b33 100644
--- a/src/components/Assets/Flags/Australia.tsx
+++ b/src/components/Assets/Flags/Australia.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Australia = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Brazil.tsx b/src/components/Assets/Flags/Brazil.tsx
index 495eb3ab2..2ee105774 100644
--- a/src/components/Assets/Flags/Brazil.tsx
+++ b/src/components/Assets/Flags/Brazil.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Brazil = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Canada.tsx b/src/components/Assets/Flags/Canada.tsx
index 38a49c4b4..a70b104d1 100644
--- a/src/components/Assets/Flags/Canada.tsx
+++ b/src/components/Assets/Flags/Canada.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Canada = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/European-Union.tsx b/src/components/Assets/Flags/European-Union.tsx
index 307061593..f07cbde00 100644
--- a/src/components/Assets/Flags/European-Union.tsx
+++ b/src/components/Assets/Flags/European-Union.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const EuropeanUnion = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Germany.tsx b/src/components/Assets/Flags/Germany.tsx
index 661189b58..4aa9b3df8 100644
--- a/src/components/Assets/Flags/Germany.tsx
+++ b/src/components/Assets/Flags/Germany.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Germany = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Hong-Kong.tsx b/src/components/Assets/Flags/Hong-Kong.tsx
index 4e4d90b30..f059f055b 100644
--- a/src/components/Assets/Flags/Hong-Kong.tsx
+++ b/src/components/Assets/Flags/Hong-Kong.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const HongKong = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/India.tsx b/src/components/Assets/Flags/India.tsx
index 2cf305132..734d6ee2f 100644
--- a/src/components/Assets/Flags/India.tsx
+++ b/src/components/Assets/Flags/India.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const India = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Indonesia.tsx b/src/components/Assets/Flags/Indonesia.tsx
index 5bbdaedd7..98d553c56 100644
--- a/src/components/Assets/Flags/Indonesia.tsx
+++ b/src/components/Assets/Flags/Indonesia.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Indonesia = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Ireland.tsx b/src/components/Assets/Flags/Ireland.tsx
index 7ffdf417f..03ce115a3 100644
--- a/src/components/Assets/Flags/Ireland.tsx
+++ b/src/components/Assets/Flags/Ireland.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Ireland = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Israel.tsx b/src/components/Assets/Flags/Israel.tsx
index 7014de839..020b1e39a 100644
--- a/src/components/Assets/Flags/Israel.tsx
+++ b/src/components/Assets/Flags/Israel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Israel = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Japan.tsx b/src/components/Assets/Flags/Japan.tsx
index 2811f0100..af21299b3 100644
--- a/src/components/Assets/Flags/Japan.tsx
+++ b/src/components/Assets/Flags/Japan.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Japan = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Netherlands.tsx b/src/components/Assets/Flags/Netherlands.tsx
index dd245df9e..af43088a0 100644
--- a/src/components/Assets/Flags/Netherlands.tsx
+++ b/src/components/Assets/Flags/Netherlands.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Netherlands = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Singapore.tsx b/src/components/Assets/Flags/Singapore.tsx
index ce93ca446..2cd8c6b4a 100644
--- a/src/components/Assets/Flags/Singapore.tsx
+++ b/src/components/Assets/Flags/Singapore.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Singapore = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/South-Africa.tsx b/src/components/Assets/Flags/South-Africa.tsx
index e4d349491..da5fe456a 100644
--- a/src/components/Assets/Flags/South-Africa.tsx
+++ b/src/components/Assets/Flags/South-Africa.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const SouthAfrica = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/South-Korea.tsx b/src/components/Assets/Flags/South-Korea.tsx
index 97c97b2a9..cc024efab 100644
--- a/src/components/Assets/Flags/South-Korea.tsx
+++ b/src/components/Assets/Flags/South-Korea.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const SouthKorea = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Sweden.tsx b/src/components/Assets/Flags/Sweden.tsx
index a24565146..07628ea96 100644
--- a/src/components/Assets/Flags/Sweden.tsx
+++ b/src/components/Assets/Flags/Sweden.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Sweden = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/Switzerland.tsx b/src/components/Assets/Flags/Switzerland.tsx
index 02f20b53b..b8bd56298 100644
--- a/src/components/Assets/Flags/Switzerland.tsx
+++ b/src/components/Assets/Flags/Switzerland.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Switzerland = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/United-Arab-Emirates.tsx b/src/components/Assets/Flags/United-Arab-Emirates.tsx
index d7c567d19..d910cca90 100644
--- a/src/components/Assets/Flags/United-Arab-Emirates.tsx
+++ b/src/components/Assets/Flags/United-Arab-Emirates.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const UnitedArabEmirates = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/United-Kingdom.tsx b/src/components/Assets/Flags/United-Kingdom.tsx
index b660629aa..c39677faa 100644
--- a/src/components/Assets/Flags/United-Kingdom.tsx
+++ b/src/components/Assets/Flags/United-Kingdom.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 const UnitedKingdom = (props: SVGAssetProps): React.ReactElement => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Assets/Flags/United-States.tsx b/src/components/Assets/Flags/United-States.tsx
index ed32847de..74af4b6f4 100644
--- a/src/components/Assets/Flags/United-States.tsx
+++ b/src/components/Assets/Flags/United-States.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const UnitedStates = (props: SVGAssetProps): React.ReactElement => (
   <svg
diff --git a/src/components/Assets/Flags/system/Flag.tsx b/src/components/Assets/Flags/system/Flag.tsx
index 4cb180539..5ad10234e 100644
--- a/src/components/Assets/Flags/system/Flag.tsx
+++ b/src/components/Assets/Flags/system/Flag.tsx
@@ -1,6 +1,6 @@
 import { SVGAttributes } from 'react';
 import { useTheme } from 'styled-components';
-import { getFallbackThemeName } from '@/utils/theme';
+import { getFallbackThemeName } from '@/theme/theme.utils';
 import { SvgImageElement } from '@/components/Icon/SvgImageElement';
 import { FlagProps } from './types';
 import { resolveFlagName } from './retroactiveNames';
diff --git a/src/components/Assets/Flags/system/FlagsDark.ts b/src/components/Assets/Flags/system/FlagsDark.ts
index 60de12931..415465102 100644
--- a/src/components/Assets/Flags/system/FlagsDark.ts
+++ b/src/components/Assets/Flags/system/FlagsDark.ts
@@ -27,7 +27,7 @@ import United_Arab_Emirates from '../United-Arab-Emirates';
 import United_Kingdom from '../United-Kingdom';
 import United_States from '../United-States';
 import { FlagName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const FlagsLight: Record<FlagName, ComponentType<SVGAssetProps>> = {
diff --git a/src/components/Assets/Flags/system/FlagsLight.ts b/src/components/Assets/Flags/system/FlagsLight.ts
index 60de12931..415465102 100644
--- a/src/components/Assets/Flags/system/FlagsLight.ts
+++ b/src/components/Assets/Flags/system/FlagsLight.ts
@@ -27,7 +27,7 @@ import United_Arab_Emirates from '../United-Arab-Emirates';
 import United_Kingdom from '../United-Kingdom';
 import United_States from '../United-States';
 import { FlagName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const FlagsLight: Record<FlagName, ComponentType<SVGAssetProps>> = {
diff --git a/src/components/Assets/Flags/system/types.ts b/src/components/Assets/Flags/system/types.ts
index 43901de8a..b876d8d0c 100644
--- a/src/components/Assets/Flags/system/types.ts
+++ b/src/components/Assets/Flags/system/types.ts
@@ -1,7 +1,6 @@
 import type { SVGAttributes } from 'react';
-import type { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
 import type { ThemeName } from '@/theme/theme.types';
-import type { SVGAssetProps } from '../../types';
 
 export type FlagName =
   | 'australia'
@@ -29,7 +28,5 @@ export type FlagName =
 export interface FlagProps extends SVGAttributes<SVGElement> {
   name: FlagName;
   theme?: ThemeName;
-  size?: IconSize;
+  size?: AssetSize;
 }
-
-export type { SVGAssetProps };
diff --git a/src/components/Assets/Icons/Activity.tsx b/src/components/Assets/Icons/Activity.tsx
index 50d1a58be..de7eb7d59 100644
--- a/src/components/Assets/Icons/Activity.tsx
+++ b/src/components/Assets/Icons/Activity.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Activity = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Alarm.tsx b/src/components/Assets/Icons/Alarm.tsx
index 660c3347e..658da9499 100644
--- a/src/components/Assets/Icons/Alarm.tsx
+++ b/src/components/Assets/Icons/Alarm.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Alarm = (props: SVGAssetProps) => {
   return (
diff --git a/src/components/Assets/Icons/Arrow-Directions.tsx b/src/components/Assets/Icons/Arrow-Directions.tsx
index 6543dc5aa..380a876d3 100644
--- a/src/components/Assets/Icons/Arrow-Directions.tsx
+++ b/src/components/Assets/Icons/Arrow-Directions.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Arrow_Directions = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Arrow-Down.tsx b/src/components/Assets/Icons/Arrow-Down.tsx
index afbe83eb5..ae377ac3e 100644
--- a/src/components/Assets/Icons/Arrow-Down.tsx
+++ b/src/components/Assets/Icons/Arrow-Down.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Arrow_Down = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Arrow-Left.tsx b/src/components/Assets/Icons/Arrow-Left.tsx
index 6c09ef02f..cc6899224 100644
--- a/src/components/Assets/Icons/Arrow-Left.tsx
+++ b/src/components/Assets/Icons/Arrow-Left.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Arrow_Left = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Arrow-Right.tsx b/src/components/Assets/Icons/Arrow-Right.tsx
index f7a5e1685..f3ada3517 100644
--- a/src/components/Assets/Icons/Arrow-Right.tsx
+++ b/src/components/Assets/Icons/Arrow-Right.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Arrow_Right = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Arrow-Triangle.tsx b/src/components/Assets/Icons/Arrow-Triangle.tsx
index a0b5167cb..fd19e6e7a 100644
--- a/src/components/Assets/Icons/Arrow-Triangle.tsx
+++ b/src/components/Assets/Icons/Arrow-Triangle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Arrow_Triangle = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Arrow-Up.tsx b/src/components/Assets/Icons/Arrow-Up.tsx
index aa0876423..b65a7428d 100644
--- a/src/components/Assets/Icons/Arrow-Up.tsx
+++ b/src/components/Assets/Icons/Arrow-Up.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Arrow_Up = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Auth-App.tsx b/src/components/Assets/Icons/Auth-App.tsx
index 46919bccb..d48fca452 100644
--- a/src/components/Assets/Icons/Auth-App.tsx
+++ b/src/components/Assets/Icons/Auth-App.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Auth_App = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Auth-Sms.tsx b/src/components/Assets/Icons/Auth-Sms.tsx
index f5272b494..4ca86cc18 100644
--- a/src/components/Assets/Icons/Auth-Sms.tsx
+++ b/src/components/Assets/Icons/Auth-Sms.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Auth_Sms = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Backups.tsx b/src/components/Assets/Icons/Backups.tsx
index 821d89faf..798d0e7b8 100644
--- a/src/components/Assets/Icons/Backups.tsx
+++ b/src/components/Assets/Icons/Backups.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const BackUps = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Bar-Chart.tsx b/src/components/Assets/Icons/Bar-Chart.tsx
index 4c3482b32..9ae7fb3a9 100644
--- a/src/components/Assets/Icons/Bar-Chart.tsx
+++ b/src/components/Assets/Icons/Bar-Chart.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Bar_Chart = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Bell.tsx b/src/components/Assets/Icons/Bell.tsx
index 5270954bd..1e59f8090 100644
--- a/src/components/Assets/Icons/Bell.tsx
+++ b/src/components/Assets/Icons/Bell.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Bell = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Beta.tsx b/src/components/Assets/Icons/Beta.tsx
index ab4e4fa5b..7057e2d39 100644
--- a/src/components/Assets/Icons/Beta.tsx
+++ b/src/components/Assets/Icons/Beta.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Beta = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Blog.tsx b/src/components/Assets/Icons/Blog.tsx
index e85bdf74e..51b0b7fad 100644
--- a/src/components/Assets/Icons/Blog.tsx
+++ b/src/components/Assets/Icons/Blog.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Blog = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Bold.tsx b/src/components/Assets/Icons/Bold.tsx
index 80eaf0494..c300549bc 100644
--- a/src/components/Assets/Icons/Bold.tsx
+++ b/src/components/Assets/Icons/Bold.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Bold = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Book.tsx b/src/components/Assets/Icons/Book.tsx
index 63f054fe0..939f1da11 100644
--- a/src/components/Assets/Icons/Book.tsx
+++ b/src/components/Assets/Icons/Book.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Book = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Brackets.tsx b/src/components/Assets/Icons/Brackets.tsx
index 4d40c945c..cad21f0e5 100644
--- a/src/components/Assets/Icons/Brackets.tsx
+++ b/src/components/Assets/Icons/Brackets.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Brackets = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Briefcase.tsx b/src/components/Assets/Icons/Briefcase.tsx
index 2d6f0a645..901218af7 100644
--- a/src/components/Assets/Icons/Briefcase.tsx
+++ b/src/components/Assets/Icons/Briefcase.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Briefcase = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Building.tsx b/src/components/Assets/Icons/Building.tsx
index dd9794c9b..5f90f718c 100644
--- a/src/components/Assets/Icons/Building.tsx
+++ b/src/components/Assets/Icons/Building.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Building = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Burger-Menu.tsx b/src/components/Assets/Icons/Burger-Menu.tsx
index c5ca6b3f1..808bf97c2 100644
--- a/src/components/Assets/Icons/Burger-Menu.tsx
+++ b/src/components/Assets/Icons/Burger-Menu.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Burger_Menu = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Calendar-With-Time.tsx b/src/components/Assets/Icons/Calendar-With-Time.tsx
index ca07aeebe..6a9fe4fb5 100644
--- a/src/components/Assets/Icons/Calendar-With-Time.tsx
+++ b/src/components/Assets/Icons/Calendar-With-Time.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Calendar_With_Time = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Calendar.tsx b/src/components/Assets/Icons/Calendar.tsx
index bc6141a23..76e6c6a1f 100644
--- a/src/components/Assets/Icons/Calendar.tsx
+++ b/src/components/Assets/Icons/Calendar.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Calendar = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Cards.tsx b/src/components/Assets/Icons/Cards.tsx
index bca492352..0b2da5a30 100644
--- a/src/components/Assets/Icons/Cards.tsx
+++ b/src/components/Assets/Icons/Cards.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Cards = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Cell-Tower.tsx b/src/components/Assets/Icons/Cell-Tower.tsx
index 625d85628..6cabddba5 100644
--- a/src/components/Assets/Icons/Cell-Tower.tsx
+++ b/src/components/Assets/Icons/Cell-Tower.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Cell_Tower = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Area.tsx b/src/components/Assets/Icons/Chart-Area.tsx
index 0af898116..106109c3b 100644
--- a/src/components/Assets/Icons/Chart-Area.tsx
+++ b/src/components/Assets/Icons/Chart-Area.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Area = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Bar-Horizontal.tsx b/src/components/Assets/Icons/Chart-Bar-Horizontal.tsx
index 0c92e1c7a..0c6b930c0 100644
--- a/src/components/Assets/Icons/Chart-Bar-Horizontal.tsx
+++ b/src/components/Assets/Icons/Chart-Bar-Horizontal.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Bar_Horizontal = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Cloud.tsx b/src/components/Assets/Icons/Chart-Cloud.tsx
index d0d5274c6..6415caed8 100644
--- a/src/components/Assets/Icons/Chart-Cloud.tsx
+++ b/src/components/Assets/Icons/Chart-Cloud.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Cloud = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Donut.tsx b/src/components/Assets/Icons/Chart-Donut.tsx
index 8cbdf953c..585c5e685 100644
--- a/src/components/Assets/Icons/Chart-Donut.tsx
+++ b/src/components/Assets/Icons/Chart-Donut.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Donut = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Heatmap.tsx b/src/components/Assets/Icons/Chart-Heatmap.tsx
index 0e9a20f70..7afe73332 100644
--- a/src/components/Assets/Icons/Chart-Heatmap.tsx
+++ b/src/components/Assets/Icons/Chart-Heatmap.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Heatmap = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Scatter.tsx b/src/components/Assets/Icons/Chart-Scatter.tsx
index 0717222ef..76ed1f102 100644
--- a/src/components/Assets/Icons/Chart-Scatter.tsx
+++ b/src/components/Assets/Icons/Chart-Scatter.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Scatter = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Square.tsx b/src/components/Assets/Icons/Chart-Square.tsx
index b02c80b3d..18f99eb98 100644
--- a/src/components/Assets/Icons/Chart-Square.tsx
+++ b/src/components/Assets/Icons/Chart-Square.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Square = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Stacked-Horizontal.tsx b/src/components/Assets/Icons/Chart-Stacked-Horizontal.tsx
index 6877d876b..865e5eee2 100644
--- a/src/components/Assets/Icons/Chart-Stacked-Horizontal.tsx
+++ b/src/components/Assets/Icons/Chart-Stacked-Horizontal.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Stacked_Horizontal = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chart-Stacked-Vertical.tsx b/src/components/Assets/Icons/Chart-Stacked-Vertical.tsx
index c4d6ef922..7cd1f3990 100644
--- a/src/components/Assets/Icons/Chart-Stacked-Vertical.tsx
+++ b/src/components/Assets/Icons/Chart-Stacked-Vertical.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chart_Stacked_Vertical = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chat.tsx b/src/components/Assets/Icons/Chat.tsx
index d4005da15..20433521e 100644
--- a/src/components/Assets/Icons/Chat.tsx
+++ b/src/components/Assets/Icons/Chat.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chat = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Check-In-Circle.tsx b/src/components/Assets/Icons/Check-In-Circle.tsx
index 831e5d3e9..ef543de68 100644
--- a/src/components/Assets/Icons/Check-In-Circle.tsx
+++ b/src/components/Assets/Icons/Check-In-Circle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Check_In_Circle = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Check.tsx b/src/components/Assets/Icons/Check.tsx
index 8fda9a2b5..4898a508f 100644
--- a/src/components/Assets/Icons/Check.tsx
+++ b/src/components/Assets/Icons/Check.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Check = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chevron-Down.tsx b/src/components/Assets/Icons/Chevron-Down.tsx
index e6c0554d8..8e842ef48 100644
--- a/src/components/Assets/Icons/Chevron-Down.tsx
+++ b/src/components/Assets/Icons/Chevron-Down.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 export const Chevron_Down = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chevron-Left.tsx b/src/components/Assets/Icons/Chevron-Left.tsx
index 027eaf57a..296ed4d5e 100644
--- a/src/components/Assets/Icons/Chevron-Left.tsx
+++ b/src/components/Assets/Icons/Chevron-Left.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chevron_Left = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chevron-Right.tsx b/src/components/Assets/Icons/Chevron-Right.tsx
index 2600e53a7..c559d3f16 100644
--- a/src/components/Assets/Icons/Chevron-Right.tsx
+++ b/src/components/Assets/Icons/Chevron-Right.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 export const Chevron_Right = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Chevron-Up.tsx b/src/components/Assets/Icons/Chevron-Up.tsx
index 1c1f596dd..864c60be5 100644
--- a/src/components/Assets/Icons/Chevron-Up.tsx
+++ b/src/components/Assets/Icons/Chevron-Up.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Chevron_Up = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Circle.tsx b/src/components/Assets/Icons/Circle.tsx
index d21e2acb4..78a937bba 100644
--- a/src/components/Assets/Icons/Circle.tsx
+++ b/src/components/Assets/Icons/Circle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Circle = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Clock.tsx b/src/components/Assets/Icons/Clock.tsx
index 45add501b..214991929 100644
--- a/src/components/Assets/Icons/Clock.tsx
+++ b/src/components/Assets/Icons/Clock.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Clock = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Cloud-Keys.tsx b/src/components/Assets/Icons/Cloud-Keys.tsx
index 82891d5f4..ea50c0cf0 100644
--- a/src/components/Assets/Icons/Cloud-Keys.tsx
+++ b/src/components/Assets/Icons/Cloud-Keys.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Cloud_Keys = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Cloud.tsx b/src/components/Assets/Icons/Cloud.tsx
index 35a0e24da..3b59885e5 100644
--- a/src/components/Assets/Icons/Cloud.tsx
+++ b/src/components/Assets/Icons/Cloud.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Cloud = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Code-In-Square.tsx b/src/components/Assets/Icons/Code-In-Square.tsx
index 6d06ab1d1..809acc6ad 100644
--- a/src/components/Assets/Icons/Code-In-Square.tsx
+++ b/src/components/Assets/Icons/Code-In-Square.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Code_In_Square = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Code.tsx b/src/components/Assets/Icons/Code.tsx
index ebf2a09ca..90ad7bfea 100644
--- a/src/components/Assets/Icons/Code.tsx
+++ b/src/components/Assets/Icons/Code.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Code = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Connect-Alt.tsx b/src/components/Assets/Icons/Connect-Alt.tsx
index 9735deb78..233728ce0 100644
--- a/src/components/Assets/Icons/Connect-Alt.tsx
+++ b/src/components/Assets/Icons/Connect-Alt.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Connect_Alt = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Connect.tsx b/src/components/Assets/Icons/Connect.tsx
index 7b5b580a7..f64b8680a 100644
--- a/src/components/Assets/Icons/Connect.tsx
+++ b/src/components/Assets/Icons/Connect.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Connect = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Console.tsx b/src/components/Assets/Icons/Console.tsx
index 41f0fffff..cf54c25f4 100644
--- a/src/components/Assets/Icons/Console.tsx
+++ b/src/components/Assets/Icons/Console.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Console = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Copy.tsx b/src/components/Assets/Icons/Copy.tsx
index 5269cda07..b7f2d2f20 100644
--- a/src/components/Assets/Icons/Copy.tsx
+++ b/src/components/Assets/Icons/Copy.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Copy = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Cpu.tsx b/src/components/Assets/Icons/Cpu.tsx
index c9ccfc29d..4bde53289 100644
--- a/src/components/Assets/Icons/Cpu.tsx
+++ b/src/components/Assets/Icons/Cpu.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Cpu = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Credit-Card.tsx b/src/components/Assets/Icons/Credit-Card.tsx
index eeb50a215..0a2bb7558 100644
--- a/src/components/Assets/Icons/Credit-Card.tsx
+++ b/src/components/Assets/Icons/Credit-Card.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Credit_Card = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Cross.tsx b/src/components/Assets/Icons/Cross.tsx
index 78ecdf713..344d6db22 100644
--- a/src/components/Assets/Icons/Cross.tsx
+++ b/src/components/Assets/Icons/Cross.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Cross = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Data-Lakes.tsx b/src/components/Assets/Icons/Data-Lakes.tsx
index ab5057909..0f5ef0789 100644
--- a/src/components/Assets/Icons/Data-Lakes.tsx
+++ b/src/components/Assets/Icons/Data-Lakes.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Data_Lakes = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Data.tsx b/src/components/Assets/Icons/Data.tsx
index a8abc57c8..0cdb8ea92 100644
--- a/src/components/Assets/Icons/Data.tsx
+++ b/src/components/Assets/Icons/Data.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Data = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Database.tsx b/src/components/Assets/Icons/Database.tsx
index bec47f79b..13072e102 100644
--- a/src/components/Assets/Icons/Database.tsx
+++ b/src/components/Assets/Icons/Database.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Database = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Disk.tsx b/src/components/Assets/Icons/Disk.tsx
index 4b7c4b588..f7323046e 100644
--- a/src/components/Assets/Icons/Disk.tsx
+++ b/src/components/Assets/Icons/Disk.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Disk = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Display.tsx b/src/components/Assets/Icons/Display.tsx
index a2db08748..9cabbd7b7 100644
--- a/src/components/Assets/Icons/Display.tsx
+++ b/src/components/Assets/Icons/Display.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Display = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Document.tsx b/src/components/Assets/Icons/Document.tsx
index 81e1b542e..95716e138 100644
--- a/src/components/Assets/Icons/Document.tsx
+++ b/src/components/Assets/Icons/Document.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Document = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Dot.tsx b/src/components/Assets/Icons/Dot.tsx
index 769b1c18d..419d7cf00 100644
--- a/src/components/Assets/Icons/Dot.tsx
+++ b/src/components/Assets/Icons/Dot.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Dot = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Dots-Horizontal.tsx b/src/components/Assets/Icons/Dots-Horizontal.tsx
index 57e9f1ec7..e71575e8d 100644
--- a/src/components/Assets/Icons/Dots-Horizontal.tsx
+++ b/src/components/Assets/Icons/Dots-Horizontal.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Dots_Horizontal = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Dots-Triangle.tsx b/src/components/Assets/Icons/Dots-Triangle.tsx
index 3ea1a832d..9bf3f78ea 100644
--- a/src/components/Assets/Icons/Dots-Triangle.tsx
+++ b/src/components/Assets/Icons/Dots-Triangle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Dots_Triangle = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Dots-Vertical-Double.tsx b/src/components/Assets/Icons/Dots-Vertical-Double.tsx
index 050addd3f..7cf2cd62c 100644
--- a/src/components/Assets/Icons/Dots-Vertical-Double.tsx
+++ b/src/components/Assets/Icons/Dots-Vertical-Double.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Dots_Vertical_Double = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Dots-Vertical.tsx b/src/components/Assets/Icons/Dots-Vertical.tsx
index 6245634be..dcb52ce4e 100644
--- a/src/components/Assets/Icons/Dots-Vertical.tsx
+++ b/src/components/Assets/Icons/Dots-Vertical.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Dots_Vertical = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Double-Check.tsx b/src/components/Assets/Icons/Double-Check.tsx
index 18ef45e75..b8076ceb2 100644
--- a/src/components/Assets/Icons/Double-Check.tsx
+++ b/src/components/Assets/Icons/Double-Check.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Double_Check = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Download-In-Circle.tsx b/src/components/Assets/Icons/Download-In-Circle.tsx
index c3d496929..40466efff 100644
--- a/src/components/Assets/Icons/Download-In-Circle.tsx
+++ b/src/components/Assets/Icons/Download-In-Circle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Download_In_Circle = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Download.tsx b/src/components/Assets/Icons/Download.tsx
index 3ff52ec6a..af880b845 100644
--- a/src/components/Assets/Icons/Download.tsx
+++ b/src/components/Assets/Icons/Download.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Download = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Email.tsx b/src/components/Assets/Icons/Email.tsx
index dc8db7cb8..2d5c80c82 100644
--- a/src/components/Assets/Icons/Email.tsx
+++ b/src/components/Assets/Icons/Email.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Email = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Empty.tsx b/src/components/Assets/Icons/Empty.tsx
index 745e46a1a..177368c42 100644
--- a/src/components/Assets/Icons/Empty.tsx
+++ b/src/components/Assets/Icons/Empty.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Empty = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Enter.tsx b/src/components/Assets/Icons/Enter.tsx
index 724faaf68..625477778 100644
--- a/src/components/Assets/Icons/Enter.tsx
+++ b/src/components/Assets/Icons/Enter.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Enter = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Eye-Closed.tsx b/src/components/Assets/Icons/Eye-Closed.tsx
index 31ede5fd4..fb6c8e63d 100644
--- a/src/components/Assets/Icons/Eye-Closed.tsx
+++ b/src/components/Assets/Icons/Eye-Closed.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Eye_Closed = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Eye.tsx b/src/components/Assets/Icons/Eye.tsx
index 0d8d11086..725d1bf65 100644
--- a/src/components/Assets/Icons/Eye.tsx
+++ b/src/components/Assets/Icons/Eye.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Eye = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Filter.tsx b/src/components/Assets/Icons/Filter.tsx
index 14dbc5993..982b22b87 100644
--- a/src/components/Assets/Icons/Filter.tsx
+++ b/src/components/Assets/Icons/Filter.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Filter = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Fire.tsx b/src/components/Assets/Icons/Fire.tsx
index 4f31d90ca..ae88a7448 100644
--- a/src/components/Assets/Icons/Fire.tsx
+++ b/src/components/Assets/Icons/Fire.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Fire = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Flag.tsx b/src/components/Assets/Icons/Flag.tsx
index 84ab3422f..4958e83d6 100644
--- a/src/components/Assets/Icons/Flag.tsx
+++ b/src/components/Assets/Icons/Flag.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Flag = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Flash.tsx b/src/components/Assets/Icons/Flash.tsx
index 548f2c485..e71509a01 100644
--- a/src/components/Assets/Icons/Flash.tsx
+++ b/src/components/Assets/Icons/Flash.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Flash = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Flask.tsx b/src/components/Assets/Icons/Flask.tsx
index 02e271835..e37423f1a 100644
--- a/src/components/Assets/Icons/Flask.tsx
+++ b/src/components/Assets/Icons/Flask.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Flask = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Folder-Closed.tsx b/src/components/Assets/Icons/Folder-Closed.tsx
index 1170f1751..2c7aad679 100644
--- a/src/components/Assets/Icons/Folder-Closed.tsx
+++ b/src/components/Assets/Icons/Folder-Closed.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Folder_Closed = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Folder-Open.tsx b/src/components/Assets/Icons/Folder-Open.tsx
index 3a33e296e..9b9dfcaf3 100644
--- a/src/components/Assets/Icons/Folder-Open.tsx
+++ b/src/components/Assets/Icons/Folder-Open.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Folder_Open = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Gear.tsx b/src/components/Assets/Icons/Gear.tsx
index e208da945..e60ccf204 100644
--- a/src/components/Assets/Icons/Gear.tsx
+++ b/src/components/Assets/Icons/Gear.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Gear = (props: SVGAssetProps) => {
   return (
diff --git a/src/components/Assets/Icons/Gift.tsx b/src/components/Assets/Icons/Gift.tsx
index fc553ebb9..21c4ed59b 100644
--- a/src/components/Assets/Icons/Gift.tsx
+++ b/src/components/Assets/Icons/Gift.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Gift = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Git-Merge.tsx b/src/components/Assets/Icons/Git-Merge.tsx
index 04b4afbd2..5e6253ca1 100644
--- a/src/components/Assets/Icons/Git-Merge.tsx
+++ b/src/components/Assets/Icons/Git-Merge.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Git_Merge = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Globe.tsx b/src/components/Assets/Icons/Globe.tsx
index e3bfe52f9..f4ba35cb1 100644
--- a/src/components/Assets/Icons/Globe.tsx
+++ b/src/components/Assets/Icons/Globe.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Globe = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Hexagon.tsx b/src/components/Assets/Icons/Hexagon.tsx
index ec91141c4..14f0683d8 100644
--- a/src/components/Assets/Icons/Hexagon.tsx
+++ b/src/components/Assets/Icons/Hexagon.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Hexagon = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/History.tsx b/src/components/Assets/Icons/History.tsx
index 7112e030b..31c146a0e 100644
--- a/src/components/Assets/Icons/History.tsx
+++ b/src/components/Assets/Icons/History.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const History = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Home.tsx b/src/components/Assets/Icons/Home.tsx
index 52e73d576..fa0266e9b 100644
--- a/src/components/Assets/Icons/Home.tsx
+++ b/src/components/Assets/Icons/Home.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Home = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Http-Monitoring.tsx b/src/components/Assets/Icons/Http-Monitoring.tsx
index 452cd92cf..ae483adca 100644
--- a/src/components/Assets/Icons/Http-Monitoring.tsx
+++ b/src/components/Assets/Icons/Http-Monitoring.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Http_Monitoring = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Http.tsx b/src/components/Assets/Icons/Http.tsx
index 89ebb66b5..8cce88a14 100644
--- a/src/components/Assets/Icons/Http.tsx
+++ b/src/components/Assets/Icons/Http.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Http = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Info-In-Circle.tsx b/src/components/Assets/Icons/Info-In-Circle.tsx
index a71a567d6..b66964ff3 100644
--- a/src/components/Assets/Icons/Info-In-Circle.tsx
+++ b/src/components/Assets/Icons/Info-In-Circle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Info_In_Circle = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Information.tsx b/src/components/Assets/Icons/Information.tsx
index 3cdd4cf21..82081355b 100644
--- a/src/components/Assets/Icons/Information.tsx
+++ b/src/components/Assets/Icons/Information.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Information = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Insert-Row.tsx b/src/components/Assets/Icons/Insert-Row.tsx
index 977876b94..c7729bcef 100644
--- a/src/components/Assets/Icons/Insert-Row.tsx
+++ b/src/components/Assets/Icons/Insert-Row.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Insert_Row = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Integrations.tsx b/src/components/Assets/Icons/Integrations.tsx
index 96233b146..3c7045f20 100644
--- a/src/components/Assets/Icons/Integrations.tsx
+++ b/src/components/Assets/Icons/Integrations.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Integrations = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Italic.tsx b/src/components/Assets/Icons/Italic.tsx
index 30f209aaa..e8579ede8 100644
--- a/src/components/Assets/Icons/Italic.tsx
+++ b/src/components/Assets/Icons/Italic.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Italic = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Key.tsx b/src/components/Assets/Icons/Key.tsx
index aa5e4a686..41ce49464 100644
--- a/src/components/Assets/Icons/Key.tsx
+++ b/src/components/Assets/Icons/Key.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Key = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Keys.tsx b/src/components/Assets/Icons/Keys.tsx
index d75354b31..999df91b9 100644
--- a/src/components/Assets/Icons/Keys.tsx
+++ b/src/components/Assets/Icons/Keys.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Keys = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Lifebuoy.tsx b/src/components/Assets/Icons/Lifebuoy.tsx
index 81ccb6664..ec1f3d36d 100644
--- a/src/components/Assets/Icons/Lifebuoy.tsx
+++ b/src/components/Assets/Icons/Lifebuoy.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Lifebuoy = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Light-Bulb-On.tsx b/src/components/Assets/Icons/Light-Bulb-On.tsx
index ae87ad05f..3f9583083 100644
--- a/src/components/Assets/Icons/Light-Bulb-On.tsx
+++ b/src/components/Assets/Icons/Light-Bulb-On.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Light_Bulb_On = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Light-Bulb.tsx b/src/components/Assets/Icons/Light-Bulb.tsx
index 31dfe1587..16b66436b 100644
--- a/src/components/Assets/Icons/Light-Bulb.tsx
+++ b/src/components/Assets/Icons/Light-Bulb.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Light_Bulb = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Lightening.tsx b/src/components/Assets/Icons/Lightening.tsx
index 6ef3631df..c60eac638 100644
--- a/src/components/Assets/Icons/Lightening.tsx
+++ b/src/components/Assets/Icons/Lightening.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Lightening = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Line-In-Circle.tsx b/src/components/Assets/Icons/Line-In-Circle.tsx
index 010875e58..7edb06c9e 100644
--- a/src/components/Assets/Icons/Line-In-Circle.tsx
+++ b/src/components/Assets/Icons/Line-In-Circle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Line_In_Circle = (props: SVGAssetProps) => {
   return (
diff --git a/src/components/Assets/Icons/List-Bulleted.tsx b/src/components/Assets/Icons/List-Bulleted.tsx
index 6dea8aeda..477183729 100644
--- a/src/components/Assets/Icons/List-Bulleted.tsx
+++ b/src/components/Assets/Icons/List-Bulleted.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const List_Bulleted = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/List-Numbered.tsx b/src/components/Assets/Icons/List-Numbered.tsx
index 1eb08de34..5b9342721 100644
--- a/src/components/Assets/Icons/List-Numbered.tsx
+++ b/src/components/Assets/Icons/List-Numbered.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const List_Numbered = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Loading.tsx b/src/components/Assets/Icons/Loading.tsx
index 512959548..f0ad606f5 100644
--- a/src/components/Assets/Icons/Loading.tsx
+++ b/src/components/Assets/Icons/Loading.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 import { styled } from 'styled-components';
 
 const Loading = (props: SVGAssetProps) => (
diff --git a/src/components/Assets/Icons/Lock.tsx b/src/components/Assets/Icons/Lock.tsx
index f5e6e9c37..f57be22f9 100644
--- a/src/components/Assets/Icons/Lock.tsx
+++ b/src/components/Assets/Icons/Lock.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Lock = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Map-Pin.tsx b/src/components/Assets/Icons/Map-Pin.tsx
index 4c2c0bab6..b25d5e0da 100644
--- a/src/components/Assets/Icons/Map-Pin.tsx
+++ b/src/components/Assets/Icons/Map-Pin.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Map_Pin = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Mcp.tsx b/src/components/Assets/Icons/Mcp.tsx
index 5827ac6c0..bc7a5f8d6 100644
--- a/src/components/Assets/Icons/Mcp.tsx
+++ b/src/components/Assets/Icons/Mcp.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Mcp = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Metrics-Alt.tsx b/src/components/Assets/Icons/Metrics-Alt.tsx
index 789eef201..b970d5a46 100644
--- a/src/components/Assets/Icons/Metrics-Alt.tsx
+++ b/src/components/Assets/Icons/Metrics-Alt.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Metrics_Alt = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Metrics.tsx b/src/components/Assets/Icons/Metrics.tsx
index fb4b2d0cb..b7be27344 100644
--- a/src/components/Assets/Icons/Metrics.tsx
+++ b/src/components/Assets/Icons/Metrics.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Metrics = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Minus.tsx b/src/components/Assets/Icons/Minus.tsx
index 2bed14f41..33415af38 100644
--- a/src/components/Assets/Icons/Minus.tsx
+++ b/src/components/Assets/Icons/Minus.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Minus = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Moon.tsx b/src/components/Assets/Icons/Moon.tsx
index 725eb3076..b4ac74c32 100644
--- a/src/components/Assets/Icons/Moon.tsx
+++ b/src/components/Assets/Icons/Moon.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Moon = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/No-Cloud.tsx b/src/components/Assets/Icons/No-Cloud.tsx
index d351df2a8..4b5bbd188 100644
--- a/src/components/Assets/Icons/No-Cloud.tsx
+++ b/src/components/Assets/Icons/No-Cloud.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const No_Cloud = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Pause.tsx b/src/components/Assets/Icons/Pause.tsx
index 700d6618f..dbea0c71d 100644
--- a/src/components/Assets/Icons/Pause.tsx
+++ b/src/components/Assets/Icons/Pause.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Pause = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Payment.tsx b/src/components/Assets/Icons/Payment.tsx
index 117252cc2..378671b76 100644
--- a/src/components/Assets/Icons/Payment.tsx
+++ b/src/components/Assets/Icons/Payment.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Payment = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Pencil.tsx b/src/components/Assets/Icons/Pencil.tsx
index 713964659..647b492a2 100644
--- a/src/components/Assets/Icons/Pencil.tsx
+++ b/src/components/Assets/Icons/Pencil.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Pencil = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Pie-Chart.tsx b/src/components/Assets/Icons/Pie-Chart.tsx
index 0ac9aeae3..9ab8c3f86 100644
--- a/src/components/Assets/Icons/Pie-Chart.tsx
+++ b/src/components/Assets/Icons/Pie-Chart.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Pie_Chart = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Pipe.tsx b/src/components/Assets/Icons/Pipe.tsx
index 13c7b6bdd..808ee3bd9 100644
--- a/src/components/Assets/Icons/Pipe.tsx
+++ b/src/components/Assets/Icons/Pipe.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Pipe = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Play-In-Circle.tsx b/src/components/Assets/Icons/Play-In-Circle.tsx
index 323a9518d..d1e25f795 100644
--- a/src/components/Assets/Icons/Play-In-Circle.tsx
+++ b/src/components/Assets/Icons/Play-In-Circle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Play = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Play.tsx b/src/components/Assets/Icons/Play.tsx
index 1d2b7f0d1..b1cef7a69 100644
--- a/src/components/Assets/Icons/Play.tsx
+++ b/src/components/Assets/Icons/Play.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Play = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Plug.tsx b/src/components/Assets/Icons/Plug.tsx
index 43b314490..b4bc691bd 100644
--- a/src/components/Assets/Icons/Plug.tsx
+++ b/src/components/Assets/Icons/Plug.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Plug = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Plus.tsx b/src/components/Assets/Icons/Plus.tsx
index 8d7419e00..438186bc7 100644
--- a/src/components/Assets/Icons/Plus.tsx
+++ b/src/components/Assets/Icons/Plus.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Plus = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Popout.tsx b/src/components/Assets/Icons/Popout.tsx
index c0d318418..24864b439 100644
--- a/src/components/Assets/Icons/Popout.tsx
+++ b/src/components/Assets/Icons/Popout.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Popout = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Popover-Arrow.tsx b/src/components/Assets/Icons/Popover-Arrow.tsx
index 67a0c1803..2aacbdd60 100644
--- a/src/components/Assets/Icons/Popover-Arrow.tsx
+++ b/src/components/Assets/Icons/Popover-Arrow.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Popover_Arrow = (props: SVGAssetProps) => {
   return (
diff --git a/src/components/Assets/Icons/Puzzle-Piece.tsx b/src/components/Assets/Icons/Puzzle-Piece.tsx
index 037e5af2a..f300037ec 100644
--- a/src/components/Assets/Icons/Puzzle-Piece.tsx
+++ b/src/components/Assets/Icons/Puzzle-Piece.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Puzzle_Piece = (props: SVGAssetProps) => {
   return (
diff --git a/src/components/Assets/Icons/Query.tsx b/src/components/Assets/Icons/Query.tsx
index cb420e0ab..8260b8b81 100644
--- a/src/components/Assets/Icons/Query.tsx
+++ b/src/components/Assets/Icons/Query.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Query = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Question.tsx b/src/components/Assets/Icons/Question.tsx
index 2a84fec10..3f10943ce 100644
--- a/src/components/Assets/Icons/Question.tsx
+++ b/src/components/Assets/Icons/Question.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Question = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Refresh.tsx b/src/components/Assets/Icons/Refresh.tsx
index 1cb8404d9..c884482cf 100644
--- a/src/components/Assets/Icons/Refresh.tsx
+++ b/src/components/Assets/Icons/Refresh.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Refresh = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Resize-Arrows-Horizontal.tsx b/src/components/Assets/Icons/Resize-Arrows-Horizontal.tsx
index c6ee22203..692845d72 100644
--- a/src/components/Assets/Icons/Resize-Arrows-Horizontal.tsx
+++ b/src/components/Assets/Icons/Resize-Arrows-Horizontal.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Resize_Arrows_Horizontal = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Resize-Arrows-Vertical.tsx b/src/components/Assets/Icons/Resize-Arrows-Vertical.tsx
index db386ba58..55941b537 100644
--- a/src/components/Assets/Icons/Resize-Arrows-Vertical.tsx
+++ b/src/components/Assets/Icons/Resize-Arrows-Vertical.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Resize_Arrows_Vertical = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Rocket.tsx b/src/components/Assets/Icons/Rocket.tsx
index 6aea557bb..a4d4e6881 100644
--- a/src/components/Assets/Icons/Rocket.tsx
+++ b/src/components/Assets/Icons/Rocket.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Rocket = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Sand-Glass.tsx b/src/components/Assets/Icons/Sand-Glass.tsx
index 233a3e88b..802fdd3e0 100644
--- a/src/components/Assets/Icons/Sand-Glass.tsx
+++ b/src/components/Assets/Icons/Sand-Glass.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Sand_Glass = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Search.tsx b/src/components/Assets/Icons/Search.tsx
index 72863213f..44f95f733 100644
--- a/src/components/Assets/Icons/Search.tsx
+++ b/src/components/Assets/Icons/Search.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Search = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Secure.tsx b/src/components/Assets/Icons/Secure.tsx
index 6dda65fd4..a77a8b5ed 100644
--- a/src/components/Assets/Icons/Secure.tsx
+++ b/src/components/Assets/Icons/Secure.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Secure = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Server.tsx b/src/components/Assets/Icons/Server.tsx
index 405e1ffaa..27f960b0c 100644
--- a/src/components/Assets/Icons/Server.tsx
+++ b/src/components/Assets/Icons/Server.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Server = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Services.tsx b/src/components/Assets/Icons/Services.tsx
index 0471b8965..f1433b84d 100644
--- a/src/components/Assets/Icons/Services.tsx
+++ b/src/components/Assets/Icons/Services.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Services = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Settings.tsx b/src/components/Assets/Icons/Settings.tsx
index f962a0a5d..646b36a4e 100644
--- a/src/components/Assets/Icons/Settings.tsx
+++ b/src/components/Assets/Icons/Settings.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Settings = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Share-Arrow.tsx b/src/components/Assets/Icons/Share-Arrow.tsx
index 6004e1dc0..0b6c572e5 100644
--- a/src/components/Assets/Icons/Share-Arrow.tsx
+++ b/src/components/Assets/Icons/Share-Arrow.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Share_Arrow = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Share-Network.tsx b/src/components/Assets/Icons/Share-Network.tsx
index dd1c6abb2..e60a35f0a 100644
--- a/src/components/Assets/Icons/Share-Network.tsx
+++ b/src/components/Assets/Icons/Share-Network.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Share_Network = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Share.tsx b/src/components/Assets/Icons/Share.tsx
index 68a56529f..ba9eb8455 100644
--- a/src/components/Assets/Icons/Share.tsx
+++ b/src/components/Assets/Icons/Share.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Share = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Sleep.tsx b/src/components/Assets/Icons/Sleep.tsx
index 64439a186..7fd033204 100644
--- a/src/components/Assets/Icons/Sleep.tsx
+++ b/src/components/Assets/Icons/Sleep.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Sleep = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Slide-In.tsx b/src/components/Assets/Icons/Slide-In.tsx
index 707c61bfb..9931ae887 100644
--- a/src/components/Assets/Icons/Slide-In.tsx
+++ b/src/components/Assets/Icons/Slide-In.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Slide_In = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Slide-Out.tsx b/src/components/Assets/Icons/Slide-Out.tsx
index 322bd84a5..113e3705f 100644
--- a/src/components/Assets/Icons/Slide-Out.tsx
+++ b/src/components/Assets/Icons/Slide-Out.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Slide_Out = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Sort-Alt.tsx b/src/components/Assets/Icons/Sort-Alt.tsx
index b727a814e..7f76a19d0 100644
--- a/src/components/Assets/Icons/Sort-Alt.tsx
+++ b/src/components/Assets/Icons/Sort-Alt.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Sort_Alt = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Sort.tsx b/src/components/Assets/Icons/Sort.tsx
index 5f24b5fcb..e5582f0df 100644
--- a/src/components/Assets/Icons/Sort.tsx
+++ b/src/components/Assets/Icons/Sort.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Sort = (props: SVGAssetProps) => {
   return (
diff --git a/src/components/Assets/Icons/Sparkle.tsx b/src/components/Assets/Icons/Sparkle.tsx
index e05754d2e..23544d029 100644
--- a/src/components/Assets/Icons/Sparkle.tsx
+++ b/src/components/Assets/Icons/Sparkle.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Sparkle = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Speaker.tsx b/src/components/Assets/Icons/Speaker.tsx
index 1a9b89665..0e9e2f362 100644
--- a/src/components/Assets/Icons/Speaker.tsx
+++ b/src/components/Assets/Icons/Speaker.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Speaker = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Speed.tsx b/src/components/Assets/Icons/Speed.tsx
index fe4c519d4..1235fe4ce 100644
--- a/src/components/Assets/Icons/Speed.tsx
+++ b/src/components/Assets/Icons/Speed.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Speed = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Square.tsx b/src/components/Assets/Icons/Square.tsx
index 7eeef36dc..0f136fe26 100644
--- a/src/components/Assets/Icons/Square.tsx
+++ b/src/components/Assets/Icons/Square.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Square = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Star.tsx b/src/components/Assets/Icons/Star.tsx
index bff4bd06e..9920c8d58 100644
--- a/src/components/Assets/Icons/Star.tsx
+++ b/src/components/Assets/Icons/Star.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Star = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Stop.tsx b/src/components/Assets/Icons/Stop.tsx
index a24ac4a06..fad76bddc 100644
--- a/src/components/Assets/Icons/Stop.tsx
+++ b/src/components/Assets/Icons/Stop.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Stop = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Support.tsx b/src/components/Assets/Icons/Support.tsx
index d0314d78e..c8f489c34 100644
--- a/src/components/Assets/Icons/Support.tsx
+++ b/src/components/Assets/Icons/Support.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Support = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Table.tsx b/src/components/Assets/Icons/Table.tsx
index 4c8ca6be4..f0ba7709a 100644
--- a/src/components/Assets/Icons/Table.tsx
+++ b/src/components/Assets/Icons/Table.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Table = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Taxi.tsx b/src/components/Assets/Icons/Taxi.tsx
index f51a6da79..6e44b3fed 100644
--- a/src/components/Assets/Icons/Taxi.tsx
+++ b/src/components/Assets/Icons/Taxi.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Taxi = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Text-Slash.tsx b/src/components/Assets/Icons/Text-Slash.tsx
index 906e035f9..9629fe1eb 100644
--- a/src/components/Assets/Icons/Text-Slash.tsx
+++ b/src/components/Assets/Icons/Text-Slash.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Text_Slash = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Thumbs-Down.tsx b/src/components/Assets/Icons/Thumbs-Down.tsx
index b6fe2565e..7334d4389 100644
--- a/src/components/Assets/Icons/Thumbs-Down.tsx
+++ b/src/components/Assets/Icons/Thumbs-Down.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Thumbs_Down = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Thumbs-Up.tsx b/src/components/Assets/Icons/Thumbs-Up.tsx
index aed0a6618..8892de04c 100644
--- a/src/components/Assets/Icons/Thumbs-Up.tsx
+++ b/src/components/Assets/Icons/Thumbs-Up.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Thumbs_Up = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Trash.tsx b/src/components/Assets/Icons/Trash.tsx
index 0717d14dc..584433c3b 100644
--- a/src/components/Assets/Icons/Trash.tsx
+++ b/src/components/Assets/Icons/Trash.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Trash = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Tree-Structure.tsx b/src/components/Assets/Icons/Tree-Structure.tsx
index 1a48862cc..7f168cbe2 100644
--- a/src/components/Assets/Icons/Tree-Structure.tsx
+++ b/src/components/Assets/Icons/Tree-Structure.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Tree_Structure = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Underline.tsx b/src/components/Assets/Icons/Underline.tsx
index 83eab5670..2b356ce39 100644
--- a/src/components/Assets/Icons/Underline.tsx
+++ b/src/components/Assets/Icons/Underline.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Underline = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Upgrade.tsx b/src/components/Assets/Icons/Upgrade.tsx
index d971bf399..94c528360 100644
--- a/src/components/Assets/Icons/Upgrade.tsx
+++ b/src/components/Assets/Icons/Upgrade.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Upgrade = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Upload.tsx b/src/components/Assets/Icons/Upload.tsx
index 63ef2c981..11f9bce92 100644
--- a/src/components/Assets/Icons/Upload.tsx
+++ b/src/components/Assets/Icons/Upload.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Upload = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Url.tsx b/src/components/Assets/Icons/Url.tsx
index 6d47c4ec0..40bb66518 100644
--- a/src/components/Assets/Icons/Url.tsx
+++ b/src/components/Assets/Icons/Url.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Url = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/User.tsx b/src/components/Assets/Icons/User.tsx
index eec3aad6f..ff231f0e6 100644
--- a/src/components/Assets/Icons/User.tsx
+++ b/src/components/Assets/Icons/User.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 export const User = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Users.tsx b/src/components/Assets/Icons/Users.tsx
index 8d2cf75d6..ac4a08a91 100644
--- a/src/components/Assets/Icons/Users.tsx
+++ b/src/components/Assets/Icons/Users.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 export const Users = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Warning.tsx b/src/components/Assets/Icons/Warning.tsx
index 0553b681f..4988fe658 100644
--- a/src/components/Assets/Icons/Warning.tsx
+++ b/src/components/Assets/Icons/Warning.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Warning = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/Waves.tsx b/src/components/Assets/Icons/Waves.tsx
index 47be6940c..be5307c26 100644
--- a/src/components/Assets/Icons/Waves.tsx
+++ b/src/components/Assets/Icons/Waves.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Waves = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Icons/system/Icon.tsx b/src/components/Assets/Icons/system/Icon.tsx
index 91d1ecc08..08b281b1e 100644
--- a/src/components/Assets/Icons/system/Icon.tsx
+++ b/src/components/Assets/Icons/system/Icon.tsx
@@ -1,6 +1,6 @@
 import { SVGAttributes } from 'react';
 import { useTheme } from 'styled-components';
-import { getFallbackThemeName } from '@/utils/theme';
+import { getFallbackThemeName } from '@/theme/theme.utils';
 import { resolveIconName } from './retroactiveNames';
 import IconsLight from './IconsLight';
 import IconsDark from './IconsDark';
diff --git a/src/components/Assets/Icons/system/IconsDark.ts b/src/components/Assets/Icons/system/IconsDark.ts
index f2db36ac3..7d467e043 100644
--- a/src/components/Assets/Icons/system/IconsDark.ts
+++ b/src/components/Assets/Icons/system/IconsDark.ts
@@ -173,8 +173,8 @@ import User from '../User';
 import Users from '../Users';
 import Warning from '../Warning';
 import Waves from '../Waves';
-import { IconName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { IconName } from './types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const IconsDark: Record<IconName, ComponentType<SVGAssetProps>> = {
diff --git a/src/components/Assets/Icons/system/IconsLight.ts b/src/components/Assets/Icons/system/IconsLight.ts
index 551e8869b..6cf5044c0 100644
--- a/src/components/Assets/Icons/system/IconsLight.ts
+++ b/src/components/Assets/Icons/system/IconsLight.ts
@@ -173,8 +173,8 @@ import User from '../User';
 import Users from '../Users';
 import Warning from '../Warning';
 import Waves from '../Waves';
-import { IconName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { IconName } from './types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const IconsLight: Record<IconName, ComponentType<SVGAssetProps>> = {
diff --git a/src/components/Assets/Icons/system/retroactiveNames.ts b/src/components/Assets/Icons/system/retroactiveNames.ts
index 8aa1e65cf..e772a2196 100644
--- a/src/components/Assets/Icons/system/retroactiveNames.ts
+++ b/src/components/Assets/Icons/system/retroactiveNames.ts
@@ -1,174 +1,4 @@
-import { IconName } from './types';
-
-export type DeprecatedIconName =
-  | 'Activity'
-  | 'Alarm'
-  | 'ArrowDirections'
-  | 'ArrowDown'
-  | 'ArrowLeft'
-  | 'ArrowRight'
-  | 'ArrowTriangle'
-  | 'ArrowUp'
-  | 'AuthApp'
-  | 'AuthSms'
-  | 'Backups'
-  | 'BarChart'
-  | 'Bell'
-  | 'Beta'
-  | 'Blog'
-  | 'Bold'
-  | 'Book'
-  | 'Brackets'
-  | 'Briefcase'
-  | 'Building'
-  | 'BurgerMenu'
-  | 'Calendar'
-  | 'CalendarWithTime'
-  | 'Cards'
-  | 'CellTower'
-  | 'ChartArea'
-  | 'ChartBarHorizontal'
-  | 'ChartCloud'
-  | 'ChartDonut'
-  | 'ChartHeatmap'
-  | 'ChartScatter'
-  | 'ChartSquare'
-  | 'ChartStackedHorizontal'
-  | 'ChartStackedVertical'
-  | 'ChatIcon'
-  | 'CheckIcon'
-  | 'CheckInCircle'
-  | 'ChevronDown'
-  | 'ChevronLeft'
-  | 'ChevronRight'
-  | 'ChevronUp'
-  | 'Circle'
-  | 'Clock'
-  | 'Cloud'
-  | 'CloudKeys'
-  | 'Code'
-  | 'CodeInSquare'
-  | 'Connect'
-  | 'ConnectAlt'
-  | 'Console'
-  | 'Copy'
-  | 'Cpu'
-  | 'CreditCard'
-  | 'CrossIcon'
-  | 'Data'
-  | 'DataLakes'
-  | 'DatabaseIcon'
-  | 'Disk'
-  | 'Display'
-  | 'Document'
-  | 'Dot'
-  | 'DotsHorizontal'
-  | 'DotsTriangle'
-  | 'DotsVertical'
-  | 'DotsVerticalDouble'
-  | 'DoubleCheckIcon'
-  | 'Download'
-  | 'DownloadInCircle'
-  | 'Email'
-  | 'Empty'
-  | 'Enter'
-  | 'Eye'
-  | 'EyeClosed'
-  | 'FilterIcon'
-  | 'Fire'
-  | 'Flag'
-  | 'Flash'
-  | 'Flask'
-  | 'FolderClosed'
-  | 'FolderOpen'
-  | 'Gear'
-  | 'Gift'
-  | 'GitMerge'
-  | 'Globe'
-  | 'Hexagon'
-  | 'HistoryIcon'
-  | 'Home'
-  | 'HorizontalLoading'
-  | 'Http'
-  | 'HttpMonitoring'
-  | 'InfoInCircleIcon'
-  | 'InformationIcon'
-  | 'InsertRowIcon'
-  | 'Integrations'
-  | 'Italic'
-  | 'Key'
-  | 'Keys'
-  | 'Lifebuoy'
-  | 'LightBulb'
-  | 'LightBulbOn'
-  | 'Lightening'
-  | 'LineInCircle'
-  | 'ListBulleted'
-  | 'ListNumbered'
-  | 'Loading'
-  | 'LoadingAnimated'
-  | 'Lock'
-  | 'MapPin'
-  | 'Mcp'
-  | 'Metrics'
-  | 'MetricsAlt'
-  | 'Minus'
-  | 'Moon'
-  | 'NoCloud'
-  | 'Pause'
-  | 'Payment'
-  | 'Pencil'
-  | 'PieChart'
-  | 'Pipe'
-  | 'Play'
-  | 'PlayInCircle'
-  | 'Plug'
-  | 'Plus'
-  | 'Popout'
-  | 'PopoverArrow'
-  | 'PuzzlePiece'
-  | 'Query'
-  | 'Question'
-  | 'Refresh'
-  | 'ResizeArrowsHorizontal'
-  | 'ResizeArrowsVertical'
-  | 'Rocket'
-  | 'SandGlass'
-  | 'Search'
-  | 'Secure'
-  | 'Server'
-  | 'Services'
-  | 'Settings'
-  | 'Share'
-  | 'ShareArrow'
-  | 'ShareNetwork'
-  | 'Sleep'
-  | 'SlideIn'
-  | 'SlideOut'
-  | 'SortAltIcon'
-  | 'SortIcon'
-  | 'Sparkle'
-  | 'Speaker'
-  | 'Speed'
-  | 'Square'
-  | 'Star'
-  | 'Stop'
-  | 'Support'
-  | 'Table'
-  | 'Taxi'
-  | 'TextSlash'
-  | 'ThumbsDown'
-  | 'ThumbsUp'
-  | 'Trash'
-  | 'TreeStructure'
-  | 'Underline'
-  | 'Upgrade'
-  | 'Upload'
-  | 'Url'
-  | 'UserIcon'
-  | 'UsersIcon'
-  | 'WarningIcon'
-  | 'Waves';
+import type { IconName, DeprecatedIconName } from './types';
 
 export const ICON_NAME_RETRO_MAP: Record<DeprecatedIconName, IconName> = {
   Activity: 'activity',
diff --git a/src/components/Assets/Icons/system/types.ts b/src/components/Assets/Icons/system/types.ts
index aebd4502c..54b16ec47 100644
--- a/src/components/Assets/Icons/system/types.ts
+++ b/src/components/Assets/Icons/system/types.ts
@@ -1,8 +1,6 @@
 import type { SVGAttributes } from 'react';
-import type { SVGAssetProps } from '../../types';
-import { ThemeName } from '@/theme/theme.types';
-import { type DeprecatedIconName } from './retroactiveNames';
-import type { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
+import type { ThemeName } from '@/theme/theme.types';
 
 export type IconName =
   | 'activity'
@@ -174,10 +172,178 @@ export type IconName =
   | 'warning'
   | 'waves';
 
+export type DeprecatedIconName =
+  | 'Activity'
+  | 'Alarm'
+  | 'ArrowDirections'
+  | 'ArrowDown'
+  | 'ArrowLeft'
+  | 'ArrowRight'
+  | 'ArrowTriangle'
+  | 'ArrowUp'
+  | 'AuthApp'
+  | 'AuthSms'
+  | 'Backups'
+  | 'BarChart'
+  | 'Bell'
+  | 'Beta'
+  | 'Blog'
+  | 'Bold'
+  | 'Book'
+  | 'Brackets'
+  | 'Briefcase'
+  | 'Building'
+  | 'BurgerMenu'
+  | 'Calendar'
+  | 'CalendarWithTime'
+  | 'Cards'
+  | 'CellTower'
+  | 'ChartArea'
+  | 'ChartBarHorizontal'
+  | 'ChartCloud'
+  | 'ChartDonut'
+  | 'ChartHeatmap'
+  | 'ChartScatter'
+  | 'ChartSquare'
+  | 'ChartStackedHorizontal'
+  | 'ChartStackedVertical'
+  | 'ChatIcon'
+  | 'CheckIcon'
+  | 'CheckInCircle'
+  | 'ChevronDown'
+  | 'ChevronLeft'
+  | 'ChevronRight'
+  | 'ChevronUp'
+  | 'Circle'
+  | 'Clock'
+  | 'Cloud'
+  | 'CloudKeys'
+  | 'Code'
+  | 'CodeInSquare'
+  | 'Connect'
+  | 'ConnectAlt'
+  | 'Console'
+  | 'Copy'
+  | 'Cpu'
+  | 'CreditCard'
+  | 'CrossIcon'
+  | 'Data'
+  | 'DataLakes'
+  | 'DatabaseIcon'
+  | 'Disk'
+  | 'Display'
+  | 'Document'
+  | 'Dot'
+  | 'DotsHorizontal'
+  | 'DotsTriangle'
+  | 'DotsVertical'
+  | 'DotsVerticalDouble'
+  | 'DoubleCheckIcon'
+  | 'Download'
+  | 'DownloadInCircle'
+  | 'Email'
+  | 'Empty'
+  | 'Enter'
+  | 'Eye'
+  | 'EyeClosed'
+  | 'FilterIcon'
+  | 'Fire'
+  | 'Flag'
+  | 'Flash'
+  | 'Flask'
+  | 'FolderClosed'
+  | 'FolderOpen'
+  | 'Gear'
+  | 'Gift'
+  | 'GitMerge'
+  | 'Globe'
+  | 'Hexagon'
+  | 'HistoryIcon'
+  | 'Home'
+  | 'HorizontalLoading'
+  | 'Http'
+  | 'HttpMonitoring'
+  | 'InfoInCircleIcon'
+  | 'InformationIcon'
+  | 'InsertRowIcon'
+  | 'Integrations'
+  | 'Italic'
+  | 'Key'
+  | 'Keys'
+  | 'Lifebuoy'
+  | 'LightBulb'
+  | 'LightBulbOn'
+  | 'Lightening'
+  | 'LineInCircle'
+  | 'ListBulleted'
+  | 'ListNumbered'
+  | 'Loading'
+  | 'LoadingAnimated'
+  | 'Lock'
+  | 'MapPin'
+  | 'Mcp'
+  | 'Metrics'
+  | 'MetricsAlt'
+  | 'Minus'
+  | 'Moon'
+  | 'NoCloud'
+  | 'Pause'
+  | 'Payment'
+  | 'Pencil'
+  | 'PieChart'
+  | 'Pipe'
+  | 'Play'
+  | 'PlayInCircle'
+  | 'Plug'
+  | 'Plus'
+  | 'Popout'
+  | 'PopoverArrow'
+  | 'PuzzlePiece'
+  | 'Query'
+  | 'Question'
+  | 'Refresh'
+  | 'ResizeArrowsHorizontal'
+  | 'ResizeArrowsVertical'
+  | 'Rocket'
+  | 'SandGlass'
+  | 'Search'
+  | 'Secure'
+  | 'Server'
+  | 'Services'
+  | 'Settings'
+  | 'Share'
+  | 'ShareArrow'
+  | 'ShareNetwork'
+  | 'Sleep'
+  | 'SlideIn'
+  | 'SlideOut'
+  | 'SortAltIcon'
+  | 'SortIcon'
+  | 'Sparkle'
+  | 'Speaker'
+  | 'Speed'
+  | 'Square'
+  | 'Star'
+  | 'Stop'
+  | 'Support'
+  | 'Table'
+  | 'Taxi'
+  | 'TextSlash'
+  | 'ThumbsDown'
+  | 'ThumbsUp'
+  | 'Trash'
+  | 'TreeStructure'
+  | 'Underline'
+  | 'Upgrade'
+  | 'Upload'
+  | 'Url'
+  | 'UserIcon'
+  | 'UsersIcon'
+  | 'WarningIcon'
+  | 'Waves';
+
 export interface IconProps extends SVGAttributes<SVGElement> {
   name: IconName | DeprecatedIconName;
   theme?: ThemeName;
-  size?: IconSize;
+  size?: AssetSize;
 }
-
-export type { SVGAssetProps };
diff --git a/src/components/Assets/Logos/AWS.tsx b/src/components/Assets/Logos/AWS.tsx
index 4586593ab..8f29f54a0 100644
--- a/src/components/Assets/Logos/AWS.tsx
+++ b/src/components/Assets/Logos/AWS.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 // TODO: Can this logo have a base and extend it?
 // Check this separately, see OVH.tsx
diff --git a/src/components/Assets/Logos/AWS_ATHENA.tsx b/src/components/Assets/Logos/AWS_ATHENA.tsx
index ac00516be..0c7a9ee3c 100644
--- a/src/components/Assets/Logos/AWS_ATHENA.tsx
+++ b/src/components/Assets/Logos/AWS_ATHENA.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AWS_ATHENA = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/AWS_AURORA.tsx b/src/components/Assets/Logos/AWS_AURORA.tsx
index dd6e1a64a..67004d863 100644
--- a/src/components/Assets/Logos/AWS_AURORA.tsx
+++ b/src/components/Assets/Logos/AWS_AURORA.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AWS_AURORA = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/AWS_GLUE.tsx b/src/components/Assets/Logos/AWS_GLUE.tsx
index 7c7e2cff4..dbc7e6ecd 100644
--- a/src/components/Assets/Logos/AWS_GLUE.tsx
+++ b/src/components/Assets/Logos/AWS_GLUE.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AWS_GLUE = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/AWS_KINESIS.tsx b/src/components/Assets/Logos/AWS_KINESIS.tsx
index 88f2b0ed8..914c2a828 100644
--- a/src/components/Assets/Logos/AWS_KINESIS.tsx
+++ b/src/components/Assets/Logos/AWS_KINESIS.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AWS_KINESIS = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/AWS_MSK.tsx b/src/components/Assets/Logos/AWS_MSK.tsx
index f2888b5f2..82ba661ba 100644
--- a/src/components/Assets/Logos/AWS_MSK.tsx
+++ b/src/components/Assets/Logos/AWS_MSK.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AWS_MSK = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/AWS_RDS.tsx b/src/components/Assets/Logos/AWS_RDS.tsx
index b8b06b8d3..31109b1ca 100644
--- a/src/components/Assets/Logos/AWS_RDS.tsx
+++ b/src/components/Assets/Logos/AWS_RDS.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AWS_RDS = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/AWS_REDSHIFT.tsx b/src/components/Assets/Logos/AWS_REDSHIFT.tsx
index 9d832489a..ccb4af36c 100644
--- a/src/components/Assets/Logos/AWS_REDSHIFT.tsx
+++ b/src/components/Assets/Logos/AWS_REDSHIFT.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AWS_REDSHIFT = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/AWS_S3.tsx b/src/components/Assets/Logos/AWS_S3.tsx
index f193199c4..c27534870 100644
--- a/src/components/Assets/Logos/AWS_S3.tsx
+++ b/src/components/Assets/Logos/AWS_S3.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AWS_S3 = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Airbyte.tsx b/src/components/Assets/Logos/Airbyte.tsx
index de7fe4911..862524091 100644
--- a/src/components/Assets/Logos/Airbyte.tsx
+++ b/src/components/Assets/Logos/Airbyte.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Airbyte = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/AlloyDB.tsx b/src/components/Assets/Logos/AlloyDB.tsx
index 82ee9a123..1caca8555 100644
--- a/src/components/Assets/Logos/AlloyDB.tsx
+++ b/src/components/Assets/Logos/AlloyDB.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const AlloyDBIcon = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Azure.tsx b/src/components/Assets/Logos/Azure.tsx
index d0ae828f8..c89058e15 100644
--- a/src/components/Assets/Logos/Azure.tsx
+++ b/src/components/Assets/Logos/Azure.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Azure = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Azure_Blob_Storage.tsx b/src/components/Assets/Logos/Azure_Blob_Storage.tsx
index dac7aa9d7..2ccfa407f 100644
--- a/src/components/Assets/Logos/Azure_Blob_Storage.tsx
+++ b/src/components/Assets/Logos/Azure_Blob_Storage.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Azure_Blob_Storage = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Azure_Event_Hub.tsx b/src/components/Assets/Logos/Azure_Event_Hub.tsx
index 079cd9f30..b27b371b9 100644
--- a/src/components/Assets/Logos/Azure_Event_Hub.tsx
+++ b/src/components/Assets/Logos/Azure_Event_Hub.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Azure_Event_Hub = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/BigQuery.tsx b/src/components/Assets/Logos/BigQuery.tsx
index b50a0d13e..8520c5adf 100644
--- a/src/components/Assets/Logos/BigQuery.tsx
+++ b/src/components/Assets/Logos/BigQuery.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const BigQueryLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/C_SHARP.tsx b/src/components/Assets/Logos/C_SHARP.tsx
index 7c28887f1..4260565a3 100644
--- a/src/components/Assets/Logos/C_SHARP.tsx
+++ b/src/components/Assets/Logos/C_SHARP.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const C_SHARP = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/ClickhouseDark.tsx b/src/components/Assets/Logos/ClickhouseDark.tsx
index 7033c0c36..ccf7df4ea 100644
--- a/src/components/Assets/Logos/ClickhouseDark.tsx
+++ b/src/components/Assets/Logos/ClickhouseDark.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const ClickhouseLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/ClickhouseLight.tsx b/src/components/Assets/Logos/ClickhouseLight.tsx
index 1d7acb256..af3edc432 100644
--- a/src/components/Assets/Logos/ClickhouseLight.tsx
+++ b/src/components/Assets/Logos/ClickhouseLight.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const ClickhouseLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Cloudflare.tsx b/src/components/Assets/Logos/Cloudflare.tsx
index 187213a36..c744e7757 100644
--- a/src/components/Assets/Logos/Cloudflare.tsx
+++ b/src/components/Assets/Logos/Cloudflare.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Cloudflare = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Confluent.tsx b/src/components/Assets/Logos/Confluent.tsx
index 74b29d2df..81c9f57c7 100644
--- a/src/components/Assets/Logos/Confluent.tsx
+++ b/src/components/Assets/Logos/Confluent.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Confluent = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Crunchy_Bridge.tsx b/src/components/Assets/Logos/Crunchy_Bridge.tsx
index 9baafe6d0..e5e8f0432 100644
--- a/src/components/Assets/Logos/Crunchy_Bridge.tsx
+++ b/src/components/Assets/Logos/Crunchy_Bridge.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Crunchy_Bridge = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/DataGrip.tsx b/src/components/Assets/Logos/DataGrip.tsx
index 6ce5ea9ae..b1d2ca734 100644
--- a/src/components/Assets/Logos/DataGrip.tsx
+++ b/src/components/Assets/Logos/DataGrip.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const DataGrip = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Databricks.tsx b/src/components/Assets/Logos/Databricks.tsx
index cd27c0a0b..bf3f334d6 100644
--- a/src/components/Assets/Logos/Databricks.tsx
+++ b/src/components/Assets/Logos/Databricks.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Databricks = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Dbt.tsx b/src/components/Assets/Logos/Dbt.tsx
index 1249618e5..41ac9c046 100644
--- a/src/components/Assets/Logos/Dbt.tsx
+++ b/src/components/Assets/Logos/Dbt.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Dbt = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Decodeable.tsx b/src/components/Assets/Logos/Decodeable.tsx
index 5180f760e..f83e890e9 100644
--- a/src/components/Assets/Logos/Decodeable.tsx
+++ b/src/components/Assets/Logos/Decodeable.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Decodeable = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/DeepNote.tsx b/src/components/Assets/Logos/DeepNote.tsx
index c3cc167bc..1ac9c6f49 100644
--- a/src/components/Assets/Logos/DeepNote.tsx
+++ b/src/components/Assets/Logos/DeepNote.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const DeepNote = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/DeltaLake.tsx b/src/components/Assets/Logos/DeltaLake.tsx
index 5919260b8..1c96ae5e8 100644
--- a/src/components/Assets/Logos/DeltaLake.tsx
+++ b/src/components/Assets/Logos/DeltaLake.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const DeltaLake = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/DigitalOcean.tsx b/src/components/Assets/Logos/DigitalOcean.tsx
index f449ef311..aa1595688 100644
--- a/src/components/Assets/Logos/DigitalOcean.tsx
+++ b/src/components/Assets/Logos/DigitalOcean.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const DigitalOcean = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/FeatureDatabaseDark.tsx b/src/components/Assets/Logos/FeatureDatabaseDark.tsx
index 4626fe011..5894e21c2 100644
--- a/src/components/Assets/Logos/FeatureDatabaseDark.tsx
+++ b/src/components/Assets/Logos/FeatureDatabaseDark.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const FeatureDatabaseDark = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/FeatureDatabaseLight.tsx b/src/components/Assets/Logos/FeatureDatabaseLight.tsx
index 9be648dea..3087acf50 100644
--- a/src/components/Assets/Logos/FeatureDatabaseLight.tsx
+++ b/src/components/Assets/Logos/FeatureDatabaseLight.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const FeatureDatabaseLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/FeatureHexagonDark.tsx b/src/components/Assets/Logos/FeatureHexagonDark.tsx
index c8618920f..f19529119 100644
--- a/src/components/Assets/Logos/FeatureHexagonDark.tsx
+++ b/src/components/Assets/Logos/FeatureHexagonDark.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const FeatureHexagonDark = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/FeatureHexagonLight.tsx b/src/components/Assets/Logos/FeatureHexagonLight.tsx
index 10fdb8f7e..ea0c13122 100644
--- a/src/components/Assets/Logos/FeatureHexagonLight.tsx
+++ b/src/components/Assets/Logos/FeatureHexagonLight.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const FeatureHexagonLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Fivetran.tsx b/src/components/Assets/Logos/Fivetran.tsx
index 74d823ad9..111c00464 100644
--- a/src/components/Assets/Logos/Fivetran.tsx
+++ b/src/components/Assets/Logos/Fivetran.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Fivetran = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/GCS.tsx b/src/components/Assets/Logos/GCS.tsx
index 185aad373..e453bd251 100644
--- a/src/components/Assets/Logos/GCS.tsx
+++ b/src/components/Assets/Logos/GCS.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Gcs = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Gcp.tsx b/src/components/Assets/Logos/Gcp.tsx
index 35ac7ff04..af1c03540 100644
--- a/src/components/Assets/Logos/Gcp.tsx
+++ b/src/components/Assets/Logos/Gcp.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Gcp = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/GithubDark.tsx b/src/components/Assets/Logos/GithubDark.tsx
index 995e29321..1c6bec578 100644
--- a/src/components/Assets/Logos/GithubDark.tsx
+++ b/src/components/Assets/Logos/GithubDark.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const GithubDark = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/GithubLight.tsx b/src/components/Assets/Logos/GithubLight.tsx
index ddd11c4d6..60058b566 100644
--- a/src/components/Assets/Logos/GithubLight.tsx
+++ b/src/components/Assets/Logos/GithubLight.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const GithubLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/GoLang.tsx b/src/components/Assets/Logos/GoLang.tsx
index f70f3e3a5..f0454b2f3 100644
--- a/src/components/Assets/Logos/GoLang.tsx
+++ b/src/components/Assets/Logos/GoLang.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const GoLang = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Google.tsx b/src/components/Assets/Logos/Google.tsx
index 24083dc06..df1ad6157 100644
--- a/src/components/Assets/Logos/Google.tsx
+++ b/src/components/Assets/Logos/Google.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Google = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Grafana.tsx b/src/components/Assets/Logos/Grafana.tsx
index 0629a012d..ad9f4ac54 100644
--- a/src/components/Assets/Logos/Grafana.tsx
+++ b/src/components/Assets/Logos/Grafana.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Grafana = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Hex.tsx b/src/components/Assets/Logos/Hex.tsx
index b3d0b67c7..cae27575f 100644
--- a/src/components/Assets/Logos/Hex.tsx
+++ b/src/components/Assets/Logos/Hex.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Hex = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Hudi.tsx b/src/components/Assets/Logos/Hudi.tsx
index a3689a2da..e4fc4c4ab 100644
--- a/src/components/Assets/Logos/Hudi.tsx
+++ b/src/components/Assets/Logos/Hudi.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Hudi = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Iceberg.tsx b/src/components/Assets/Logos/Iceberg.tsx
index 6274a7d5d..ca09504c9 100644
--- a/src/components/Assets/Logos/Iceberg.tsx
+++ b/src/components/Assets/Logos/Iceberg.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Iceberg = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Jdbc.tsx b/src/components/Assets/Logos/Jdbc.tsx
index 524659a70..d46cd9b2e 100644
--- a/src/components/Assets/Logos/Jdbc.tsx
+++ b/src/components/Assets/Logos/Jdbc.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Jdbc = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/KafkaDark.tsx b/src/components/Assets/Logos/KafkaDark.tsx
index a92e51afd..c1b188110 100644
--- a/src/components/Assets/Logos/KafkaDark.tsx
+++ b/src/components/Assets/Logos/KafkaDark.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const KafkaDark = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/KafkaLight.tsx b/src/components/Assets/Logos/KafkaLight.tsx
index 5dddef62c..e561465e9 100644
--- a/src/components/Assets/Logos/KafkaLight.tsx
+++ b/src/components/Assets/Logos/KafkaLight.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const KafkaLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Kubenetes.tsx b/src/components/Assets/Logos/Kubenetes.tsx
index 440063148..696ff383e 100644
--- a/src/components/Assets/Logos/Kubenetes.tsx
+++ b/src/components/Assets/Logos/Kubenetes.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Kubenetes = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/MariaDB.tsx b/src/components/Assets/Logos/MariaDB.tsx
index 17578fc09..c5bcce19a 100644
--- a/src/components/Assets/Logos/MariaDB.tsx
+++ b/src/components/Assets/Logos/MariaDB.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const MariaDB = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Metabase.tsx b/src/components/Assets/Logos/Metabase.tsx
index 1069ec672..277505114 100644
--- a/src/components/Assets/Logos/Metabase.tsx
+++ b/src/components/Assets/Logos/Metabase.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Metabase = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Microsoft.tsx b/src/components/Assets/Logos/Microsoft.tsx
index 7ada02f96..c4c354894 100644
--- a/src/components/Assets/Logos/Microsoft.tsx
+++ b/src/components/Assets/Logos/Microsoft.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Microsoft = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/MongoDb.tsx b/src/components/Assets/Logos/MongoDb.tsx
index f2023dcb6..0f4ce2f49 100644
--- a/src/components/Assets/Logos/MongoDb.tsx
+++ b/src/components/Assets/Logos/MongoDb.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const MongoDb = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/MySQL.tsx b/src/components/Assets/Logos/MySQL.tsx
index 9bb819ce5..4ed79f42b 100644
--- a/src/components/Assets/Logos/MySQL.tsx
+++ b/src/components/Assets/Logos/MySQL.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const MySQL = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/NeonDB.tsx b/src/components/Assets/Logos/NeonDB.tsx
index 884ad49ea..22cd86be0 100644
--- a/src/components/Assets/Logos/NeonDB.tsx
+++ b/src/components/Assets/Logos/NeonDB.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const NeonDB = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Nessie.tsx b/src/components/Assets/Logos/Nessie.tsx
index 9daf8c311..cd6a5a7fe 100644
--- a/src/components/Assets/Logos/Nessie.tsx
+++ b/src/components/Assets/Logos/Nessie.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const NodeJs = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/NodeJs.tsx b/src/components/Assets/Logos/NodeJs.tsx
index b089eaf61..8aa7c1578 100644
--- a/src/components/Assets/Logos/NodeJs.tsx
+++ b/src/components/Assets/Logos/NodeJs.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const NodeJs = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/OVH.tsx b/src/components/Assets/Logos/OVH.tsx
index 3a8c647f8..9eae43af7 100644
--- a/src/components/Assets/Logos/OVH.tsx
+++ b/src/components/Assets/Logos/OVH.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 import { SVGAttributes } from 'react';
 
 const OVHBase = ({ theme, ...props }: SVGAssetProps) => (
diff --git a/src/components/Assets/Logos/OneLake.tsx b/src/components/Assets/Logos/OneLake.tsx
index b179b4adb..4aa88d064 100644
--- a/src/components/Assets/Logos/OneLake.tsx
+++ b/src/components/Assets/Logos/OneLake.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const NodeJs = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/PlanetScale.tsx b/src/components/Assets/Logos/PlanetScale.tsx
index cff2ba7ff..7de28a399 100644
--- a/src/components/Assets/Logos/PlanetScale.tsx
+++ b/src/components/Assets/Logos/PlanetScale.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const PlanetScale = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Postgres.tsx b/src/components/Assets/Logos/Postgres.tsx
index 50510cb41..e5de91913 100644
--- a/src/components/Assets/Logos/Postgres.tsx
+++ b/src/components/Assets/Logos/Postgres.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Postgres = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Prequel.tsx b/src/components/Assets/Logos/Prequel.tsx
index 7bd2ee7e3..a64058bc5 100644
--- a/src/components/Assets/Logos/Prequel.tsx
+++ b/src/components/Assets/Logos/Prequel.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Prequel = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Python.tsx b/src/components/Assets/Logos/Python.tsx
index f6b96434b..3dbdc7b8b 100644
--- a/src/components/Assets/Logos/Python.tsx
+++ b/src/components/Assets/Logos/Python.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Python = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Redpanda.tsx b/src/components/Assets/Logos/Redpanda.tsx
index b2bea9e65..0720ba665 100644
--- a/src/components/Assets/Logos/Redpanda.tsx
+++ b/src/components/Assets/Logos/Redpanda.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Redpanda = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/RustDark.tsx b/src/components/Assets/Logos/RustDark.tsx
index e4e3fbbd4..e1a7df604 100644
--- a/src/components/Assets/Logos/RustDark.tsx
+++ b/src/components/Assets/Logos/RustDark.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const RustDark = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/RustLight.tsx b/src/components/Assets/Logos/RustLight.tsx
index 50d889a37..c960c9e8b 100644
--- a/src/components/Assets/Logos/RustLight.tsx
+++ b/src/components/Assets/Logos/RustLight.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const RustLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Snowflake.tsx b/src/components/Assets/Logos/Snowflake.tsx
index 0ca5d8ad4..47222db29 100644
--- a/src/components/Assets/Logos/Snowflake.tsx
+++ b/src/components/Assets/Logos/Snowflake.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Snowflake = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Supabase.tsx b/src/components/Assets/Logos/Supabase.tsx
index b9cd682d4..43c07be9b 100644
--- a/src/components/Assets/Logos/Supabase.tsx
+++ b/src/components/Assets/Logos/Supabase.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Supabase = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Superset.tsx b/src/components/Assets/Logos/Superset.tsx
index 4809f3c0b..1754e36bd 100644
--- a/src/components/Assets/Logos/Superset.tsx
+++ b/src/components/Assets/Logos/Superset.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Superset = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/TableauDark.tsx b/src/components/Assets/Logos/TableauDark.tsx
index 72d2ed435..90a945683 100644
--- a/src/components/Assets/Logos/TableauDark.tsx
+++ b/src/components/Assets/Logos/TableauDark.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const TableauDark = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/TableauLight.tsx b/src/components/Assets/Logos/TableauLight.tsx
index 69890a4f3..1cfba7f30 100644
--- a/src/components/Assets/Logos/TableauLight.tsx
+++ b/src/components/Assets/Logos/TableauLight.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const TableauLight = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/TigerData.tsx b/src/components/Assets/Logos/TigerData.tsx
index 3e7841b5a..b6a88ada0 100644
--- a/src/components/Assets/Logos/TigerData.tsx
+++ b/src/components/Assets/Logos/TigerData.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const TigerData = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Upstash.tsx b/src/components/Assets/Logos/Upstash.tsx
index 029e52f58..86ad5891e 100644
--- a/src/components/Assets/Logos/Upstash.tsx
+++ b/src/components/Assets/Logos/Upstash.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Upstash = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/Vector.tsx b/src/components/Assets/Logos/Vector.tsx
index 6142a4190..973e56709 100644
--- a/src/components/Assets/Logos/Vector.tsx
+++ b/src/components/Assets/Logos/Vector.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Vector = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/WarpStream.tsx b/src/components/Assets/Logos/WarpStream.tsx
index b788d7b67..39749676d 100644
--- a/src/components/Assets/Logos/WarpStream.tsx
+++ b/src/components/Assets/Logos/WarpStream.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const WarpStream = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/dBeaver.tsx b/src/components/Assets/Logos/dBeaver.tsx
index 1300cc949..da55aa466 100644
--- a/src/components/Assets/Logos/dBeaver.tsx
+++ b/src/components/Assets/Logos/dBeaver.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const dBeaver = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Logos/system/Logo.tsx b/src/components/Assets/Logos/system/Logo.tsx
index 6dc9732e1..12b589d01 100644
--- a/src/components/Assets/Logos/system/Logo.tsx
+++ b/src/components/Assets/Logos/system/Logo.tsx
@@ -1,11 +1,10 @@
 import { SVGAttributes } from 'react';
 import { useTheme } from 'styled-components';
-import { getFallbackThemeName } from '@/utils/theme';
-import { LogoProps } from './types';
+import { getFallbackThemeName } from '@/theme/theme.utils';
+import { SvgImageElement } from '@/components/Icon/SvgImageElement';
+import { LogoName, LogoProps } from './types';
 import LogosDark from './LogosDark';
 import LogosLight from './LogosLight';
-import { LogoName } from './types';
-import { SvgImageElement } from '@/components/Icon/SvgImageElement';
 
 // TODO: This is introducing complexity and more to maintain
 // might be best to just deprecate (break change) instead of
diff --git a/src/components/Assets/Logos/system/LogosDark.ts b/src/components/Assets/Logos/system/LogosDark.ts
index 68d190946..59244189c 100644
--- a/src/components/Assets/Logos/system/LogosDark.ts
+++ b/src/components/Assets/Logos/system/LogosDark.ts
@@ -80,7 +80,7 @@ import Upstash from '../Upstash';
 import Vector from '../Vector';
 import WarpStream from '../WarpStream';
 import { LogoName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const LogosDark: Record<LogoName, ComponentType<SVGAssetProps>> = {
diff --git a/src/components/Assets/Logos/system/LogosLight.ts b/src/components/Assets/Logos/system/LogosLight.ts
index 7a20acfac..75129f663 100644
--- a/src/components/Assets/Logos/system/LogosLight.ts
+++ b/src/components/Assets/Logos/system/LogosLight.ts
@@ -80,7 +80,7 @@ import Upstash from '../Upstash';
 import Vector from '../Vector';
 import WarpStream from '../WarpStream';
 import { LogoName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const LogosLight: Record<LogoName, ComponentType<SVGAssetProps>> = {
diff --git a/src/components/Assets/Logos/system/types.ts b/src/components/Assets/Logos/system/types.ts
index a01b84ddd..afb4ad234 100644
--- a/src/components/Assets/Logos/system/types.ts
+++ b/src/components/Assets/Logos/system/types.ts
@@ -1,7 +1,6 @@
 import type { SVGAttributes } from 'react';
-import type { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
 import type { ThemeName } from '@/theme/theme.types';
-import type { SVGAssetProps } from '../../types';
 
 export type LogoName =
   | 'airbyte'
@@ -82,7 +81,5 @@ export type LogoName =
 export interface LogoProps extends SVGAttributes<SVGElement> {
   name: LogoName;
   theme?: ThemeName;
-  size?: IconSize;
+  size?: AssetSize;
 }
-
-export type { SVGAssetProps };
diff --git a/src/components/Assets/Payments/Amex.tsx b/src/components/Assets/Payments/Amex.tsx
index 05e82a598..3da94042d 100644
--- a/src/components/Assets/Payments/Amex.tsx
+++ b/src/components/Assets/Payments/Amex.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Amex = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Payments/MasterCard.tsx b/src/components/Assets/Payments/MasterCard.tsx
index 0d943c6da..7e5cf41d4 100644
--- a/src/components/Assets/Payments/MasterCard.tsx
+++ b/src/components/Assets/Payments/MasterCard.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const MasterCard = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Payments/Paypal.tsx b/src/components/Assets/Payments/Paypal.tsx
index 2e397296c..f48e359e9 100644
--- a/src/components/Assets/Payments/Paypal.tsx
+++ b/src/components/Assets/Payments/Paypal.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Paypal = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Payments/Visa.tsx b/src/components/Assets/Payments/Visa.tsx
index 840999e35..a24714361 100644
--- a/src/components/Assets/Payments/Visa.tsx
+++ b/src/components/Assets/Payments/Visa.tsx
@@ -1,4 +1,4 @@
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Visa = (props: SVGAssetProps) => (
   <svg
diff --git a/src/components/Assets/Payments/system/Payment.tsx b/src/components/Assets/Payments/system/Payment.tsx
index db7ba6532..448e1f2e9 100644
--- a/src/components/Assets/Payments/system/Payment.tsx
+++ b/src/components/Assets/Payments/system/Payment.tsx
@@ -1,6 +1,6 @@
 import { SVGAttributes } from 'react';
 import { useTheme } from 'styled-components';
-import { getFallbackThemeName } from '@/utils/theme';
+import { getFallbackThemeName } from '@/theme/theme.utils';
 import { SvgImageElement } from '@/components/Icon/SvgImageElement';
 import { PaymentProps } from './types';
 import PaymentsDark from './PaymentsDark';
diff --git a/src/components/Assets/Payments/system/PaymentsDark.ts b/src/components/Assets/Payments/system/PaymentsDark.ts
index 98746b352..b5b122269 100644
--- a/src/components/Assets/Payments/system/PaymentsDark.ts
+++ b/src/components/Assets/Payments/system/PaymentsDark.ts
@@ -10,7 +10,7 @@ import MasterCard from '../MasterCard';
 import Paypal from '../Paypal';
 import Visa from '../Visa';
 import { PaymentName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const PaymentsDark: Record<PaymentName, ComponentType<SVGAssetProps>> = {
diff --git a/src/components/Assets/Payments/system/PaymentsLight.ts b/src/components/Assets/Payments/system/PaymentsLight.ts
index f9b1491a0..f6eb94763 100644
--- a/src/components/Assets/Payments/system/PaymentsLight.ts
+++ b/src/components/Assets/Payments/system/PaymentsLight.ts
@@ -10,7 +10,7 @@ import MasterCard from '../MasterCard';
 import Paypal from '../Paypal';
 import Visa from '../Visa';
 import { PaymentName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const PaymentsLight: Record<PaymentName, ComponentType<SVGAssetProps>> = {
diff --git a/src/components/Assets/Payments/system/types.ts b/src/components/Assets/Payments/system/types.ts
index 98552b6f5..080a63b92 100644
--- a/src/components/Assets/Payments/system/types.ts
+++ b/src/components/Assets/Payments/system/types.ts
@@ -1,14 +1,11 @@
 import type { SVGAttributes } from 'react';
-import type { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
 import type { ThemeName } from '@/theme/theme.types';
-import type { SVGAssetProps } from '../../types';
 
 export type PaymentName = 'amex' | 'mastercard' | 'paypal' | 'visa';
 
 export interface PaymentProps extends SVGAttributes<SVGElement> {
   name: PaymentName;
   theme?: ThemeName;
-  size?: IconSize;
+  size?: AssetSize;
 }
-
-export type { SVGAssetProps };
diff --git a/src/components/Assets/types.ts b/src/components/Assets/types.ts
index 6d882962d..6dc61c07c 100644
--- a/src/components/Assets/types.ts
+++ b/src/components/Assets/types.ts
@@ -1,8 +1,8 @@
 import type { SVGAttributes } from 'react';
-import type { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
 import type { ThemeName } from '@/theme/theme.types';
 
 export type SVGAssetProps = SVGAttributes<SVGElement> & {
   theme?: ThemeName;
-  size?: IconSize;
+  size?: AssetSize;
 };
diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx
index d2bcdfe32..fc51b98b9 100644
--- a/src/components/AutoComplete/AutoComplete.tsx
+++ b/src/components/AutoComplete/AutoComplete.tsx
@@ -26,7 +26,6 @@ import { IconWrapper } from '@/components/IconWrapper';
 import { getTextFromNodes } from '@/lib/getTextFromNodes';
 import { mergeRefs } from '@/utils/mergeRefs';
 
-import AutoCompleteOptionList from './AutoCompleteOptionList';
 import { useOption, useSearch } from './useOption';
 import { OptionContext } from './OptionContext';
 
@@ -528,14 +527,37 @@ export const AutoComplete = ({
           <SelectList>
             <SelectListContent>
               <OptionContext.Provider value={optionContextValue}>
-                {options && options.length > 0 ? (
-                  <AutoCompleteOptionList
-                    options={options}
-                    id={defaultId}
-                  />
-                ) : (
-                  children
-                )}
+                {options && options.length > 0
+                  ? options.map((optionProps, index) => {
+                      if ('options' in optionProps) {
+                        const { options: itemList = [], ...groupProps } = optionProps;
+                        return (
+                          <Group
+                            key={`autocomplete-${defaultId}-group-${index}`}
+                            {...groupProps}
+                          >
+                            {itemList.map(
+                              ({ label, ...itemProps }, itemIndex: number) => (
+                                <Item
+                                  key={`autocomplete-${defaultId}-group-${index}-item-${itemIndex}`}
+                                  {...itemProps}
+                                >
+                                  {label}
+                                </Item>
+                              )
+                            )}
+                          </Group>
+                        );
+                      } else {
+                        return (
+                          <Item
+                            key={`autocomplete-${defaultId}-item-${index}`}
+                            {...optionProps}
+                          />
+                        );
+                      }
+                    })
+                  : children}
               </OptionContext.Provider>
             </SelectListContent>
             {visibleList.current.length === 0 && (
diff --git a/src/components/AutoComplete/AutoCompleteOptionList.tsx b/src/components/AutoComplete/AutoCompleteOptionList.tsx
deleted file mode 100644
index dd866983e..000000000
--- a/src/components/AutoComplete/AutoCompleteOptionList.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ReactNode } from 'react';
-import { Group, Item, AutoCompleteOptionListItem } from './AutoComplete';
-
-interface Props {
-  options: AutoCompleteOptionListItem[];
-  id: string;
-}
-const AutoCompleteOptionList = ({ options, id }: Props): ReactNode =>
-  options.map((props, index) => {
-    if ('options' in props) {
-      const { options: itemList = [], ...groupProps } = props;
-      return (
-        <Group
-          key={`autocomplete-${id}-group-${index}`}
-          {...groupProps}
-        >
-          {itemList.map(({ label, ...itemProps }, itemIndex: number) => (
-            <Item
-              key={`autocomplete-${id}-group-${index}-item-${itemIndex}`}
-              {...itemProps}
-            >
-              {label}
-            </Item>
-          ))}
-        </Group>
-      );
-    } else {
-      return (
-        <Item
-          key={`autocomplete-${id}-item-${index}`}
-          {...props}
-        />
-      );
-    }
-  });
-
-export default AutoCompleteOptionList;
diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
new file mode 100644
index 000000000..73510d0d8
--- /dev/null
+++ b/src/components/Button/BaseButton.tsx
@@ -0,0 +1,31 @@
+import { styled } from 'styled-components';
+
+export const BaseButton = styled.button`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  ${({ theme }) => `
+    padding: ${theme.click.button.basic.space.y} ${theme.click.button.basic.space.x};
+    border-radius: ${theme.click.button.radii.all};
+    gap: ${theme.click.button.basic.space.gap};
+    font: ${theme.click.button.basic.typography.label.default};
+    &:hover {
+      font: ${theme.click.button.basic.typography.label.hover};
+    }
+
+    &:active,
+    &:focus {
+      outline: none;
+      font: ${theme.click.button.basic.typography.label.active};
+    }
+
+    &:disabled,
+    &:disabled:hover,
+    &:disabled:active {
+      font: ${theme.click.button.basic.typography.label.disabled};
+      cursor: not-allowed;
+    }
+    `}
+`;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 8203a1f3f..aabdfe63a 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,6 @@
 import { Icon } from '@/components/Icon';
-
 import { styled, keyframes } from 'styled-components';
-import { BaseButton } from '@/components/Common';
+import { BaseButton } from './BaseButton';
 import { Alignment, ButtonProps, ButtonType } from './Button.types';
 
 export const Button = ({
@@ -175,7 +174,12 @@ const StyledButton = styled(BaseButton)<{
   }}
 `;
 
-const ButtonIcon = styled(Icon)`
+// Lazy wrapper to avoid circular dependency issues at module load time
+const ButtonIconWrapper = (props: React.ComponentProps<typeof Icon>) => (
+  <Icon {...props} />
+);
+
+const ButtonIcon = styled(ButtonIconWrapper)`
   height: ${({ theme }) => theme.click.button.basic.size.icon.all};
   width: ${({ theme }) => theme.click.button.basic.size.icon.all};
   svg {
diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
index 6ec0ec6da..79717d029 100644
--- a/src/components/Button/Button.types.ts
+++ b/src/components/Button/Button.types.ts
@@ -1,4 +1,4 @@
-import { IconName } from '@/components/Icon';
+import type { IconName } from '@/components/Icon';
 
 export type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';
 export type Alignment = 'center' | 'left';
diff --git a/src/components/CardSecondary/CardSecondary.tsx b/src/components/CardSecondary/CardSecondary.tsx
index df3a08a99..9b0def8ca 100644
--- a/src/components/CardSecondary/CardSecondary.tsx
+++ b/src/components/CardSecondary/CardSecondary.tsx
@@ -107,7 +107,7 @@ export const CardSecondary = ({
   infoUrl,
   infoText,
   infoIcon = 'chevron-right',
-  infoIconSize = 'md',
+  infoAssetSize = 'md',
   ...props
 }: CardSecondaryProps) => {
   return (
@@ -154,7 +154,7 @@ export const CardSecondary = ({
         >
           <LinkText>{infoText}</LinkText>
           <LinkIcon
-            size={infoIconSize}
+            size={infoAssetSize}
             name={infoIcon}
           />
         </InfoLink>
diff --git a/src/components/CardSecondary/CardSecondary.types.ts b/src/components/CardSecondary/CardSecondary.types.ts
index 77ac86f7e..6a0818be2 100644
--- a/src/components/CardSecondary/CardSecondary.types.ts
+++ b/src/components/CardSecondary/CardSecondary.types.ts
@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import type { IconName } from '@/components/Icon';
-import type { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
+import type { IconName } from '@/components/Icon/Icon.types';
 
 export type BadgeState =
   | 'default'
@@ -23,5 +23,5 @@ export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
   infoUrl?: string;
   infoText?: string;
   infoIcon?: IconName;
-  infoIconSize?: IconSize;
+  infoAssetSize?: AssetSize;
 }
diff --git a/src/components/CodeBlock/useColorStyle.ts b/src/components/CodeBlock/useColorStyle.ts
index c571ca506..e85232dc5 100644
--- a/src/components/CodeBlock/useColorStyle.ts
+++ b/src/components/CodeBlock/useColorStyle.ts
@@ -1,5 +1,5 @@
 import { useTheme } from 'styled-components';
-import { CodeThemeType } from '@/components/CodeBlock';
+import { CodeThemeType } from './CodeBlock.types';
 
 const useColorStyle = (defaultTheme?: CodeThemeType) => {
   const theme = useTheme();
diff --git a/src/components/Common/Common.types.ts b/src/components/Common/Common.types.ts
deleted file mode 100644
index 59be08037..000000000
--- a/src/components/Common/Common.types.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export type TextSize = 'xs' | 'sm' | 'md' | 'lg';
-export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';
-
-export type CursorOptions =
-  | 'auto'
-  | 'default'
-  | 'none'
-  | 'context-menu'
-  | 'help'
-  | 'pointer'
-  | 'progress'
-  | 'wait'
-  | 'cell'
-  | 'crosshair'
-  | 'text'
-  | 'vertical-text'
-  | 'alias'
-  | 'copy'
-  | 'move'
-  | 'no-drop'
-  | 'not-allowed'
-  | 'grab'
-  | 'grabbing'
-  | 'e-resize'
-  | 'n-resize'
-  | 'ne-resize'
-  | 'nw-resize'
-  | 's-resize'
-  | 'se-resize'
-  | 'sw-resize'
-  | 'w-resize'
-  | 'ew-resize'
-  | 'ns-resize'
-  | 'nesw-resize'
-  | 'nwse-resize'
-  | 'col-resize'
-  | 'row-resize'
-  | 'all-scroll'
-  | 'zoom-in'
-  | 'zoom-out';
diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts
index 570b9b64a..1fedbb1ea 100644
--- a/src/components/Common/index.ts
+++ b/src/components/Common/index.ts
@@ -6,4 +6,5 @@ export { GridCenter } from './GridCenter';
 export { BaseButton } from './BaseButton';
 export { FormElementContainer } from './FormElementContainer';
 export { EllipsisContainer } from './EllipsisContainer';
-export type { TextSize, TextWeight, CursorOptions } from './Common.types';
+export type { TextSize, TextWeight } from '@/components/Typography';
+export type { CursorOptions } from '@/components/Panel/Panel.types';
diff --git a/src/components/Container/Container.stories.tsx b/src/components/Container/Container.stories.tsx
index 78f0495a5..76b337665 100644
--- a/src/components/Container/Container.stories.tsx
+++ b/src/components/Container/Container.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Container } from '@/components/Container';
-import { Text } from '..';
+import { Text } from '@/components/Typography/Text';
 import { styled } from 'styled-components';
 
 const GridCenter = styled.div`
diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index d497bb24c..a79bfce19 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -2,8 +2,8 @@ import * as RightMenu from '@radix-ui/react-context-menu';
 import { styled } from 'styled-components';
 import { forwardRef } from 'react';
 import type { HorizontalDirection } from '@/types';
-import { Icon } from '@/components/Icon/Icon';
-import type { IconName } from '@/components/Icon/Icon.types';
+import { Icon } from '@/components/Icon';
+import type { IconName } from '@/components/Icon';
 import { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';
 import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
 import { IconWrapper } from '@/components/IconWrapper/IconWrapper';
diff --git a/src/components/DateDetails/DateDetails.types.ts b/src/components/DateDetails/DateDetails.types.ts
index 312520644..6e9a46493 100644
--- a/src/components/DateDetails/DateDetails.types.ts
+++ b/src/components/DateDetails/DateDetails.types.ts
@@ -1,5 +1,5 @@
 import { Dayjs } from 'dayjs';
-import type { TextSize, TextWeight } from '@/components/Common';
+import type { TextSize, TextWeight } from '@/components/Typography';
 
 export type ArrowPosition = 'top' | 'right' | 'bottom' | 'left';
 
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index bbcbcf942..28fb0fc8c 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -4,8 +4,8 @@ import { styled } from 'styled-components';
 import { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';
 import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
 import { IconWrapper } from '@/components/IconWrapper';
-import { Icon } from '@/components/Icon/Icon';
-import type { IconName } from '@/components/Icon/Icon.types';
+import { Icon } from '@/components/Icon';
+import type { IconName } from '@/components/Icon';
 import type { HorizontalDirection } from '@/types';
 
 export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (
diff --git a/src/components/FileTabs/FileTabs.tsx b/src/components/FileTabs/FileTabs.tsx
index f1ed98ff0..1fb644b15 100644
--- a/src/components/FileTabs/FileTabs.tsx
+++ b/src/components/FileTabs/FileTabs.tsx
@@ -14,8 +14,7 @@ import {
 import { styled } from 'styled-components';
 import { Icon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
-
-import { IconName } from '../Icon/Icon.types';
+import type { IconName } from '@/components/Icon/Icon.types';
 
 // TODO: Check if react-sortablejs has ESM version
 import ReactSortableModule from 'react-sortablejs/dist/index.js';
diff --git a/src/components/Flyout/Flyout.stories.tsx b/src/components/Flyout/Flyout.stories.tsx
index fd7efde25..8cd76040e 100644
--- a/src/components/Flyout/Flyout.stories.tsx
+++ b/src/components/Flyout/Flyout.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Button, Link, Text } from '..';
+import { Button } from '@/components/Button';
+import { Link } from '@/components/Link';
+import { Text } from '@/components/Typography/Text';
 import { Flyout, FlyoutProps } from '@/components/Flyout';
 
 interface FlyoutExampleProps extends FlyoutProps {
diff --git a/src/components/Flyout/Flyout.test.tsx b/src/components/Flyout/Flyout.test.tsx
index b30c68e7d..df01b8f4a 100644
--- a/src/components/Flyout/Flyout.test.tsx
+++ b/src/components/Flyout/Flyout.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/react';
 import { Flyout } from '@/components/Flyout';
 import { renderCUI } from '@/utils/test-utils';
-import { Button } from '..';
+import { Button } from '@/components/Button';
 import { DialogProps } from '@radix-ui/react-dialog';
 
 interface Props extends DialogProps {
diff --git a/src/components/Flyout/Flyout.tsx b/src/components/Flyout/Flyout.tsx
index 002e76ac8..969aca253 100644
--- a/src/components/Flyout/Flyout.tsx
+++ b/src/components/Flyout/Flyout.tsx
@@ -19,7 +19,6 @@ import { Icon } from '@/components/Icon';
 import { Separator } from '@/components/Separator';
 import { Spacer } from '@/components/Spacer';
 import { styled } from 'styled-components';
-// TODO: Improve api for Common components, types, etc
 import { CrossButton } from '@/components/Common';
 import { keyframes } from 'styled-components';
 import type {
diff --git a/src/components/FormContainer/Error.tsx b/src/components/FormContainer/Error.tsx
new file mode 100644
index 000000000..ad19e40c0
--- /dev/null
+++ b/src/components/FormContainer/Error.tsx
@@ -0,0 +1,8 @@
+import { styled } from 'styled-components';
+
+export const Error = styled.div`
+  ${({ theme }) => `
+  font: ${theme.click.field.typography.label.error};
+  color: ${theme.click.field.color.label.error};
+`};
+`;
diff --git a/src/components/FormContainer/FormElementContainer.tsx b/src/components/FormContainer/FormElementContainer.tsx
new file mode 100644
index 000000000..4883a3f1d
--- /dev/null
+++ b/src/components/FormContainer/FormElementContainer.tsx
@@ -0,0 +1,12 @@
+import { styled } from 'styled-components';
+
+export const FormElementContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  gap: ${({ theme }) => theme.click.field.space.gap};
+`;
diff --git a/src/components/FormContainer/FormRoot.tsx b/src/components/FormContainer/FormRoot.tsx
new file mode 100644
index 000000000..b8236ca69
--- /dev/null
+++ b/src/components/FormContainer/FormRoot.tsx
@@ -0,0 +1,37 @@
+import { styled } from 'styled-components';
+
+export const FormRoot = styled.div<{
+  $orientation?: 'horizontal' | 'vertical';
+  $dir?: 'start' | 'end';
+  $addLabelPadding?: boolean;
+}>`
+  display: flex;
+  width: 100%;
+  gap: ${({ theme }) => theme.click.field.space.gap};
+  ${({ theme, $orientation = 'vertical', $dir = 'start', $addLabelPadding = false }) => `
+    flex-direction: ${
+      $orientation === 'horizontal'
+        ? $dir === 'start'
+          ? 'row-reverse'
+          : 'row'
+        : $dir === 'start'
+          ? 'column-reverse'
+          : 'column'
+    };
+    align-items: flex-start;
+    ${
+      $addLabelPadding && $orientation === 'horizontal'
+        ? `
+    label {
+      padding-top: calc(${theme.click.field.space.y} + 1px);
+      line-height: 1lh;
+    }
+    `
+        : ''
+    }
+  `}
+  * {
+    box-shadow: none;
+    outline: none;
+  }
+`;
diff --git a/src/components/GenericMenu/GenericMenu.test.tsx b/src/components/GenericMenu/GenericMenu.test.tsx
index c972d8f9a..86b7ea7bc 100644
--- a/src/components/GenericMenu/GenericMenu.test.tsx
+++ b/src/components/GenericMenu/GenericMenu.test.tsx
@@ -6,7 +6,7 @@ import {
   GenericPopoverMenuPanel,
   GenericMenuItem,
 } from './GenericMenu';
-import { themes } from '@/theme';
+import { themes } from '@/theme/theme.core';
 
 const renderWithTheme = (component: React.ReactNode) => {
   return render(<ThemeProvider theme={themes.dark}>{component}</ThemeProvider>);
diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx
index db7026bbd..1acf4b900 100644
--- a/src/components/Grid/Grid.stories.tsx
+++ b/src/components/Grid/Grid.stories.tsx
@@ -1,5 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import { CellProps, GridContextMenuItemProps, SelectedRegion, SelectionFocus } from '..';
+import {
+  CellProps,
+  GridContextMenuItemProps,
+  SelectedRegion,
+  SelectionFocus,
+} from './types';
 import { Grid as CUIGrid } from '@/components/Grid';
 
 const Cell: CellProps = ({
diff --git a/src/components/GridContainer/GridContainer.stories.tsx b/src/components/GridContainer/GridContainer.stories.tsx
index 4c155cd6c..93a92f431 100644
--- a/src/components/GridContainer/GridContainer.stories.tsx
+++ b/src/components/GridContainer/GridContainer.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { GridContainer } from '@/components/GridContainer';
-import { Text } from '..';
+import { Text } from '@/components/Typography/Text';
 import { styled } from 'styled-components';
 
 const GridCenter = styled.div`
diff --git a/src/components/HoverCard/HoverCard.stories.tsx b/src/components/HoverCard/HoverCard.stories.tsx
index 8be2e497f..49ed893ec 100644
--- a/src/components/HoverCard/HoverCard.stories.tsx
+++ b/src/components/HoverCard/HoverCard.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Checkbox } from '../Checkbox';
-import { Spacer } from '../Spacer';
-import { Text } from '../Typography/Text/Text';
-import { Title } from '../Typography/Title/Title';
+import { Checkbox } from '@/components/Checkbox';
+import { Spacer } from '@/components/Spacer';
+import { Text } from '@/components/Typography/Text';
+import { Title } from '@/components/Typography/Title';
 import { HoverCard } from '@/components/HoverCard';
 
 interface HoverCardExampleProps {
diff --git a/src/components/HoverCard/HoverCard.tsx b/src/components/HoverCard/HoverCard.tsx
index a20da384e..77d27d7d1 100644
--- a/src/components/HoverCard/HoverCard.tsx
+++ b/src/components/HoverCard/HoverCard.tsx
@@ -1,6 +1,6 @@
 import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import { ReactNode } from 'react';
-import { Arrow, GenericPopoverMenuPanel } from '../GenericMenu';
+import { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';
 import { styled } from 'styled-components';
 import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
 
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index be9f666b8..6eb885bc0 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -3,17 +3,16 @@ import LogosLight from '@/components/Assets/Logos/system/LogosLight';
 import FlagsLight from '@/components/Assets/Flags/system/FlagsLight';
 import PaymentsLight from '@/components/Assets/Payments/system/PaymentsLight';
 import { Icon } from '@/components/Icon';
-import { IconName } from '@/components/Icon/Icon.types';
+import { IconName, IconProps } from '@/components/Icon/Icon.types';
 import { ICONS_MAP } from '@/components/Icon/IconCommon';
-import { IconProps } from '@/components/Icon/Icon.types';
 import { Container } from '@/components/Container';
 import { styled } from 'styled-components';
 import { useState } from 'react';
 import { SearchField } from '@/components/Input/SearchField';
-import { Title } from '@/components/Typography/Title/Title';
+import { Title } from '@/components/Typography/Title';
 import { Panel } from '@/components/Panel';
-import { Text } from '@/components/Typography/Text/Text';
-import { GridContainer } from '../GridContainer/';
+import { Text } from '@/components/Typography/Text';
+import { GridContainer } from '@/components/GridContainer';
 import { Spacer } from '@/components/Spacer';
 
 const IconNames = Object.keys(ICONS_MAP);
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index e787962bb..d1f9e008b 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
+import type { AssetSize } from '@/types';
 import { IconName, IconProps, IconState, ImageType } from './Icon.types';
-import { IconSize } from '@/types';
 import { ICONS_MAP } from '@/components/Icon/IconCommon';
 import { Flag } from '@/components/Assets/Flags/system/Flag';
 import FlagsLight from '@/components/Assets/Flags/system/FlagsLight';
@@ -46,7 +46,7 @@ const SvgWrapper = styled.div<{
   $color?: string;
   $width?: number | string;
   $height?: number | string;
-  $size?: IconSize;
+  $size?: AssetSize;
   state?: IconState;
 }>`
   display: flex;
diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts
index cd4a361f4..d46652845 100644
--- a/src/components/Icon/Icon.types.ts
+++ b/src/components/Icon/Icon.types.ts
@@ -2,7 +2,7 @@ import { SVGAttributes } from 'react';
 import { LogoProps, LogoName } from '@/components/Assets/Logos/system/types';
 import { FlagName, FlagProps } from '@/components/Assets/Flags/system/types';
 import { PaymentProps, PaymentName } from '@/components/Assets/Payments/system/types';
-import { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
 import { ICON_NAMES } from './IconCommon';
 
 export type IconState = 'default' | 'success' | 'warning' | 'danger' | 'info';
@@ -16,7 +16,7 @@ export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
   /** The color of the icon */
   color?: string;
   /** The size of the icon */
-  size?: IconSize;
+  size?: AssetSize;
   /** The visual state of the icon */
   state?: IconState;
 }
diff --git a/src/components/Icon/SvgImageElement.tsx b/src/components/Icon/SvgImageElement.tsx
index d8c1494c3..0937172a3 100644
--- a/src/components/Icon/SvgImageElement.tsx
+++ b/src/components/Icon/SvgImageElement.tsx
@@ -1,8 +1,8 @@
 import { styled } from 'styled-components';
-import type { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
 
 export const SvgImageElement = styled.svg<{
-  $size?: IconSize;
+  $size?: AssetSize;
 }>`
   display: flex;
   align-items: center;
diff --git a/src/components/IconButton/IconButton.types.ts b/src/components/IconButton/IconButton.types.ts
index 81145c265..0eb574d9c 100644
--- a/src/components/IconButton/IconButton.types.ts
+++ b/src/components/IconButton/IconButton.types.ts
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { IconName } from '@/components/Icon';
+import type { IconName } from '@/components/Icon';
 
 export type IconButtonSize = 'default' | 'sm' | 'xs';
 
diff --git a/src/components/IconWrapper/IconWrapper.types.ts b/src/components/IconWrapper/IconWrapper.types.ts
index 91e4b1e97..d112a631c 100644
--- a/src/components/IconWrapper/IconWrapper.types.ts
+++ b/src/components/IconWrapper/IconWrapper.types.ts
@@ -1,14 +1,12 @@
 import { ReactNode } from 'react';
-
-import type { HorizontalDirection } from '@/types';
+import type { HorizontalDirection, AssetSize } from '@/types';
 import type { ImageName } from '@/components/Icon/Icon.types';
-import type { IconSize } from '@/types';
 import type { GapOptions } from '@/components/Container';
 
 export interface IconWrapperProps {
   icon?: ImageName;
   iconDir?: HorizontalDirection;
-  size?: IconSize;
+  size?: AssetSize;
   width?: number | string;
   height?: number | string;
   children: ReactNode;
diff --git a/src/components/Input/InputWrapper.tsx b/src/components/Input/InputWrapper.tsx
index 7cb330086..14eb03685 100644
--- a/src/components/Input/InputWrapper.tsx
+++ b/src/components/Input/InputWrapper.tsx
@@ -1,4 +1,3 @@
-// TODO: Improve api for Common components, types, etc
 import { Error, FormElementContainer, FormRoot } from '@/components/Common';
 import { Label } from '@/components/Label';
 import { styled } from 'styled-components';
diff --git a/src/components/Input/NumberField.stories.tsx b/src/components/Input/NumberField.stories.tsx
index bb1025df9..4da17911a 100644
--- a/src/components/Input/NumberField.stories.tsx
+++ b/src/components/Input/NumberField.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 import { NumberField, NumberFieldProps } from './NumberField';
-import { Container } from '../Container';
+import { Container } from '@/components/Container';
 
 const meta: Meta<typeof NumberField> = {
   component: NumberField,
diff --git a/src/components/Input/SearchField.stories.tsx b/src/components/Input/SearchField.stories.tsx
index 6e35d988a..5298b9b53 100644
--- a/src/components/Input/SearchField.stories.tsx
+++ b/src/components/Input/SearchField.stories.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Container } from '../Container';
+import { Container } from '@/components/Container';
 
 import { SearchField } from './SearchField';
 
diff --git a/src/components/Input/TextArea.stories.tsx b/src/components/Input/TextArea.stories.tsx
index f8ebc4577..ddef71c6a 100644
--- a/src/components/Input/TextArea.stories.tsx
+++ b/src/components/Input/TextArea.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { ChangeEvent, useEffect, useState } from 'react';
 import { TextAreaField, TextAreaFieldProps } from './TextArea';
-import { Container } from '../Container';
+import { Container } from '@/components/Container';
 
 const meta: Meta<typeof TextAreaField> = {
   component: TextAreaField,
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index b6ba696b0..8da73c4dc 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -10,7 +10,7 @@ import { Icon } from '@/components/Icon';
 import type { IconName } from '@/components/Icon/Icon.types';
 import { styled } from 'styled-components';
 import { linkStyles } from './common';
-import { TextSize, TextWeight } from '@/components/Common';
+import type { TextSize, TextWeight } from '@/components/Typography';
 
 export interface LinkProps<T extends ElementType = 'a'> {
   /** The font size of the link text */
diff --git a/src/components/Link/Link.types.ts b/src/components/Link/Link.types.ts
index 1bce5fce8..3ab4082c9 100644
--- a/src/components/Link/Link.types.ts
+++ b/src/components/Link/Link.types.ts
@@ -1,6 +1,6 @@
 import { ElementType, ReactEventHandler } from 'react';
 import type { IconName } from '@/components/Icon/Icon.types';
-import type { TextSize, TextWeight } from '@/components/Common';
+import type { TextSize, TextWeight } from '@/components/Typography';
 
 export interface LinkProps<T extends ElementType = 'a'> {
   size?: TextSize;
diff --git a/src/components/Link/common.ts b/src/components/Link/common.ts
index eff1678b0..dab8de843 100644
--- a/src/components/Link/common.ts
+++ b/src/components/Link/common.ts
@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { TextSize, TextWeight } from '../Common';
+import type { TextSize, TextWeight } from '@/components/Typography';
 
 export type StyledLinkProps = { $size: TextSize; $weight: TextWeight };
 
diff --git a/src/components/MultiAccordion/MultiAccordion.tsx b/src/components/MultiAccordion/MultiAccordion.tsx
index 37fc1d2e8..a5bf375d8 100644
--- a/src/components/MultiAccordion/MultiAccordion.tsx
+++ b/src/components/MultiAccordion/MultiAccordion.tsx
@@ -1,7 +1,7 @@
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import { styled } from 'styled-components';
+import type { AssetSize } from '@/types';
 import { Icon, type IconName } from '@/components/Icon';
-import type { IconSize } from '@/types';
 
 import { Container } from '@/components/Container';
 import { Spacer } from '@/components/Spacer';
@@ -100,7 +100,7 @@ interface MultiAccordionItemProps extends Omit<
   /** Optional icon to display next to the title */
   icon?: IconName;
   /** Size of the optional icon */
-  iconSize?: IconSize;
+  iconSize?: AssetSize;
   /** Gap size between the header and content */
   gap?: SpacerSizeType;
   /** Whether this item is marked as completed */
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 2d1a82779..fb3507159 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -5,7 +5,7 @@ import {
   useCallback,
   useRef,
 } from 'react';
-import { Container, ContainerProps } from '@/components/Container';
+import { Container, type ContainerProps } from '@/components/Container';
 import { IconButton } from '@/components/IconButton';
 import { NumberField } from '@/components/Input';
 import { Select } from '@/components/Select';
diff --git a/src/components/Pagination/Pagination.types.ts b/src/components/Pagination/Pagination.types.ts
index c5cbe3318..7f6d6d56e 100644
--- a/src/components/Pagination/Pagination.types.ts
+++ b/src/components/Pagination/Pagination.types.ts
@@ -1,5 +1,5 @@
 import { FocusEventHandler, MouseEventHandler } from 'react';
-import { ContainerProps } from '@/components/Container';
+import type { ContainerProps } from '@/components/Container';
 
 export interface PaginationProps extends Omit<
   ContainerProps<'div'>,
diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx
index ebcce20db..2e9db90ef 100644
--- a/src/components/Panel/Panel.stories.tsx
+++ b/src/components/Panel/Panel.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Panel } from '@/components/Panel';
-import { Text } from '../Typography/Text/Text';
-import { Title } from '../Typography/Title/Title';
+import { Text } from '@/components/Typography/Text';
+import { Title } from '@/components/Typography/Title';
 
 const meta: Meta<typeof Panel> = {
   component: Panel,
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index 457a31953..6da031f1d 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -1,5 +1,5 @@
-import type { CursorOptions } from '@/components/Common';
 import type { Orientation } from '@/types';
+import type { CursorOptions } from './Panel.types';
 import { HTMLAttributes } from 'react';
 import { styled } from 'styled-components';
 
diff --git a/src/components/Panel/Panel.types.ts b/src/components/Panel/Panel.types.ts
index 283807bf5..533c0c900 100644
--- a/src/components/Panel/Panel.types.ts
+++ b/src/components/Panel/Panel.types.ts
@@ -1,4 +1,3 @@
-import type { CursorOptions } from '@/components/Common';
 import type { Orientation } from '@/types';
 import { HTMLAttributes, ReactNode } from 'react';
 
@@ -6,6 +5,44 @@ export type PanelPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type PanelColor = 'default' | 'muted' | 'transparent';
 export type PanelRadii = 'none' | 'sm' | 'md' | 'lg';
 
+export type CursorOptions =
+  | 'auto'
+  | 'default'
+  | 'none'
+  | 'context-menu'
+  | 'help'
+  | 'pointer'
+  | 'progress'
+  | 'wait'
+  | 'cell'
+  | 'crosshair'
+  | 'text'
+  | 'vertical-text'
+  | 'alias'
+  | 'copy'
+  | 'move'
+  | 'no-drop'
+  | 'not-allowed'
+  | 'grab'
+  | 'grabbing'
+  | 'e-resize'
+  | 'n-resize'
+  | 'ne-resize'
+  | 'nw-resize'
+  | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
+  | 'w-resize'
+  | 'ew-resize'
+  | 'ns-resize'
+  | 'nesw-resize'
+  | 'nwse-resize'
+  | 'col-resize'
+  | 'row-resize'
+  | 'all-scroll'
+  | 'zoom-in'
+  | 'zoom-out';
+
 export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
   alignItems?: 'start' | 'center' | 'end';
   children?: ReactNode;
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
index f925cb98f..a08080e6a 100644
--- a/src/components/Popover/Popover.stories.tsx
+++ b/src/components/Popover/Popover.stories.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Button, Checkbox } from '..';
-import { GridCenter } from '../Common';
+import { Button } from '@/components/Button';
+import { Checkbox } from '@/components/Checkbox';
+import { GridCenter } from '@/components/Common';
 import { Text, Title } from '@/components/Typography';
 import { Popover } from '@/components/Popover';
 
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 6bf84b503..caa1b39c6 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -3,7 +3,6 @@ import { Arrow, GenericMenuPanel } from '@/components/GenericMenu';
 import { styled } from 'styled-components';
 import { ReactNode } from 'react';
 import { Icon } from '@/components/Icon';
-// TODO: Improve api for Common components, types, etc
 import { EmptyButton } from '@/components/Common';
 import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
 
diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
index 770d2d536..7c0fa8202 100644
--- a/src/components/RadioGroup/RadioGroup.tsx
+++ b/src/components/RadioGroup/RadioGroup.tsx
@@ -3,7 +3,6 @@ import { HTMLAttributes, ReactNode, useId } from 'react';
 import { styled } from 'styled-components';
 import { GenericLabel } from '@/components/GenericLabel';
 import { Label } from '@/components/Label';
-// TODO: Improve api for Common components, types, etc
 import { Error, FormElementContainer, FormRoot } from '@/components/Common';
 
 export interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {
diff --git a/src/components/Select/CheckboxMultiSelect.stories.tsx b/src/components/Select/CheckboxMultiSelect.stories.tsx
index d1aa0aa40..8dc9f4647 100644
--- a/src/components/Select/CheckboxMultiSelect.stories.tsx
+++ b/src/components/Select/CheckboxMultiSelect.stories.tsx
@@ -2,12 +2,12 @@ import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Panel } from '../Panel';
-import { Text } from '../Typography/Text/Text';
+import { Panel } from '@/components/Panel';
+import { Text } from '@/components/Typography/Text';
 
 import { CheckboxMultiSelect } from './CheckboxMultiSelect';
 import { selectOptions, selectOptionsLong } from './selectOptions';
-import { Spacer } from '../Spacer';
+import { Spacer } from '@/components/Spacer';
 
 const meta: Meta<typeof CheckboxMultiSelect> = {
   component: CheckboxMultiSelect,
diff --git a/src/components/Select/MultiSelect.stories.tsx b/src/components/Select/MultiSelect.stories.tsx
index 2a2cc1071..492c0f831 100644
--- a/src/components/Select/MultiSelect.stories.tsx
+++ b/src/components/Select/MultiSelect.stories.tsx
@@ -2,8 +2,8 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { MultiSelect } from './MultiSelect';
 import { selectOptions } from './selectOptions';
 import { useEffect, useState } from 'react';
-import { Container } from '../Container';
-import { Panel } from '../Panel';
+import { Container } from '@/components/Container';
+import { Panel } from '@/components/Panel';
 
 const meta: Meta<typeof MultiSelect> = {
   component: MultiSelect,
diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index ac566b083..7682f2f18 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -15,6 +15,7 @@ import {
   useState,
 } from 'react';
 import {
+  NoAvailableOptionsFactoryProps,
   SelectContainerProps,
   SelectGroupProps,
   SelectItemObject,
@@ -64,11 +65,6 @@ type CallbackProps = SelectItemObject & {
   nodeProps: SelectItemProps;
 };
 
-export interface NoAvailableOptionsFactoryProps {
-  search: string;
-  close: () => void;
-}
-
 interface NoOptionsDisplayProps {
   allowCreateOption: boolean;
   search: string;
diff --git a/src/components/Select/common/types.ts b/src/components/Select/common/types.ts
index 4a613a556..ae66e5f2c 100644
--- a/src/components/Select/common/types.ts
+++ b/src/components/Select/common/types.ts
@@ -2,7 +2,11 @@ import { HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import type { HorizontalDirection } from '@/types';
 import type { ImageName } from '@/components/Icon/Icon.types';
 import { PopoverProps } from '@radix-ui/react-popover';
-import { NoAvailableOptionsFactoryProps } from '@/components/Select/common/InternalSelect';
+
+export interface NoAvailableOptionsFactoryProps {
+  search: string;
+  close: () => void;
+}
 
 declare type DivProps = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 740b7b954..3fcf4014e 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 import { FormRoot } from '@/components/Common';
 import { GenericLabel } from '@/components/GenericLabel';
 import { SwitchProps } from './Switch.types';
-import { Theme } from '@/theme';
+import type { Theme } from '@/theme/theme.types';
 
 interface ThumbProps {
   $checked: boolean;
diff --git a/src/components/Tabs/FullWidthTabs.stories.tsx b/src/components/Tabs/FullWidthTabs.stories.tsx
index c1d60b4e6..f47c04c9f 100644
--- a/src/components/Tabs/FullWidthTabs.stories.tsx
+++ b/src/components/Tabs/FullWidthTabs.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Spacer } from '@/components/Spacer';
 import { FullWidthTabs } from '@/components/Tabs';
-import { Text } from '@/components/Typography/Text/Text';
+import { Text } from '@/components/Typography/Text';
 
 const meta: Meta<typeof FullWidthTabs> = {
   component: FullWidthTabs,
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 1487d6b95..26c44580d 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Spacer } from '@/components/Spacer';
 import { Tabs } from '@/components/Tabs';
-import { Text } from '@/components/Typography/Text/Text';
+import { Text } from '@/components/Typography/Text';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 5fc8c4b3f..f732b65c6 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -2,7 +2,7 @@ import { createContext, useEffect, useState } from 'react';
 import * as RadixUIToast from '@radix-ui/react-toast';
 import { keyframes, styled } from 'styled-components';
 import { toastsEventEmitter } from './toastEmitter';
-import { Icon, IconName } from '@/components/Icon';
+import { Icon, type IconName, type IconProps } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Button } from '@/components/Button';
 import { ToastContextProps, ToastProps, ToastAlignment, ToastType } from './Toast.types';
@@ -11,7 +11,12 @@ export const ToastContext = createContext<ToastContextProps>({
   createToast: () => null,
 });
 
-const ToastIcon = styled(Icon)<{ $type?: ToastType }>`
+// Lazy wrapper to avoid circular dependency issues at module load time
+const ToastIconWrapper = (props: IconProps & { $type?: ToastType }) => (
+  <Icon {...props} />
+);
+
+const ToastIcon = styled(ToastIconWrapper)<{ $type?: ToastType }>`
   ${({ theme, $type = 'default' }) => `
   width: ${theme.click.toast.icon.size.width};
   height: ${theme.click.toast.icon.size.height};
diff --git a/src/components/Toast/Toast.types.ts b/src/components/Toast/Toast.types.ts
index d17f899c2..8b6b8b06d 100644
--- a/src/components/Toast/Toast.types.ts
+++ b/src/components/Toast/Toast.types.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import * as RadixUIToast from '@radix-ui/react-toast';
-import { ButtonProps } from '@/components/Button';
+import type { ButtonProps } from '@/components/Button/Button.types';
 
 export interface ToastContextProps {
   createToast: (toast: ToastProps, align?: ToastAlignment) => void;
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 59a1cfabf..8ab11a133 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Tooltip } from '@/components/Tooltip';
-import { Text } from '..';
+import { Text } from '@/components/Typography/Text';
 
 const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 828bbf1fe..386d9fb3d 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -1,5 +1,5 @@
 import { TooltipProps } from '@/components/Tooltip';
-import { Tooltip } from '..';
+import { Tooltip } from './Tooltip';
 import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderCUI } from '@/utils/test-utils';
diff --git a/src/components/Typography/Text/Text.tsx b/src/components/Typography/Text/Text.tsx
index 7fb8acff7..35fc854b0 100644
--- a/src/components/Typography/Text/Text.tsx
+++ b/src/components/Typography/Text/Text.tsx
@@ -6,8 +6,9 @@ import {
   forwardRef,
 } from 'react';
 import { styled } from 'styled-components';
-import { TextSize, TextWeight } from '@/components/Common';
 
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg';
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';
 export type TextAlignment = 'left' | 'center' | 'right';
 export type TextColor = 'default' | 'muted' | 'danger' | 'disabled';
 
diff --git a/src/components/Typography/Text/index.ts b/src/components/Typography/Text/index.ts
index 90a130d87..3f9660567 100644
--- a/src/components/Typography/Text/index.ts
+++ b/src/components/Typography/Text/index.ts
@@ -1,2 +1,2 @@
 export { Text } from './Text';
-export type { TextProps, TextAlignment, TextColor } from './Text';
+export type { TextProps, TextAlignment, TextColor, TextSize, TextWeight } from './Text';
diff --git a/src/components/Typography/index.ts b/src/components/Typography/index.ts
index fba1f1282..1f93dc7aa 100644
--- a/src/components/Typography/index.ts
+++ b/src/components/Typography/index.ts
@@ -1,4 +1,4 @@
 export { Text } from './Text';
 export { Title } from './Title';
 
-export type { TextAlignment, TextColor, TextProps } from './Text';
+export type { TextAlignment, TextColor, TextProps, TextSize, TextWeight } from './Text';
diff --git a/src/components/VerticalStepper/VerticalStepper.stories.tsx b/src/components/VerticalStepper/VerticalStepper.stories.tsx
index f8f2b0391..7835ad695 100644
--- a/src/components/VerticalStepper/VerticalStepper.stories.tsx
+++ b/src/components/VerticalStepper/VerticalStepper.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Text } from '..';
+import { Text } from '@/components/Typography/Text';
 import { VerticalStepper } from '@/components/VerticalStepper';
 
 const meta: Meta<typeof VerticalStepper> = {
diff --git a/src/components/index.ts b/src/components/index.ts
deleted file mode 100644
index 5c14f1f52..000000000
--- a/src/components/index.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-export * from '@/components/types';
-
-export { Icon } from '@/components/Icon';
-export { IconButton } from '@/components/IconButton';
-export { Label } from '@/components/Label';
-export { GenericLabel } from '@/components/GenericLabel';
-export { Dropdown } from '@/components/Dropdown';
-
-export { Accordion } from '@/components/Accordion';
-export {
-  Alert,
-  DangerAlert,
-  InfoAlert,
-  WarningAlert,
-  SuccessAlert,
-} from '@/components/Alert';
-export { AutoComplete } from '@/components/AutoComplete';
-export { Avatar } from '@/components/Avatar';
-export { Badge } from '@/components/Badge';
-export { BigStat } from '@/components/BigStat';
-export { ButtonGroup } from '@/components/ButtonGroup';
-export { Button } from '@/components/Button';
-export { CardHorizontal } from '@/components/CardHorizontal';
-export { CardPrimary } from '@/components/CardPrimary';
-export { CardPromotion } from '@/components/CardPromotion';
-export { CardSecondary } from '@/components/CardSecondary';
-export { Checkbox } from '@/components/Checkbox';
-export { CodeBlock } from '@/components/CodeBlock';
-export { ConfirmationDialog } from '@/components/ConfirmationDialog';
-export { ContextMenu } from '@/components/ContextMenu';
-export { Container } from '@/components/Container';
-export { DateDetails } from '@/components/DateDetails';
-export { DatePicker } from '@/components/DatePicker';
-export { DateRangePicker } from '@/components/DatePicker/DateRangePicker';
-export { getPredefinedMonthsForDateRangePicker } from '@/components/DatePicker/utils';
-export { Dialog } from '@/components/Dialog';
-export { EllipsisContent } from '@/components/EllipsisContent';
-export { FileUpload } from '@/components/FileUpload';
-export { FileMultiUpload } from '@/components/FileUpload';
-export { Flyout } from '@/components/Flyout';
-export { FormContainer } from '@/components/FormContainer';
-export { GridContainer } from '@/components/GridContainer';
-export { InlineCodeBlock } from '@/components/CodeBlock/InlineCodeBlock';
-export { Flag as Flags } from '@/components/Assets/Flags/system/Flag';
-export { Grid } from '@/components/Grid';
-export { HoverCard } from '@/components/HoverCard';
-export { Link } from '@/components/Link/Link';
-export { linkStyles } from '@/components/Link/common';
-export { Logo } from '@/components/Assets/Logos/system/Logo';
-export { NumberField } from '@/components/Input/NumberField';
-export { PasswordField } from '@/components/Input/PasswordField';
-export { Popover } from '@/components/Popover';
-export { Pagination } from '@/components/Pagination';
-export { Panel } from '@/components/Panel';
-export { ProgressBar } from '@/components/ProgressBar';
-export { RadioGroup } from '@/components/RadioGroup/RadioGroup';
-export { SearchField } from '@/components/Input/SearchField';
-export { Select } from '@/components/Select/SingleSelect';
-export { MultiSelect } from '@/components/Select/MultiSelect';
-export { CheckboxMultiSelect } from '@/components/Select/CheckboxMultiSelect';
-export { Separator } from '@/components/Separator/Separator';
-// TODO: Sidebar elements can be in the ns Sidebar
-// there's no need to keep it separate
-export { SidebarNavigationItem } from '@/components/SidebarNavigationItem';
-export { SidebarCollapsibleItem } from '@/components/SidebarCollapsibleItem';
-export { SidebarNavigationTitle } from '@/components/SidebarNavigationTitle';
-export { SidebarCollapsibleTitle } from '@/components/SidebarCollapsibleTitle';
-export { Spacer } from '@/components/Spacer';
-export { SplitButton } from '@/components/SplitButton';
-export { Switch } from '@/components/Switch';
-export { Tabs, FullWidthTabs } from '@/components/Tabs';
-export { FileTabs, FileTabElement } from '@/components/FileTabs';
-export { Table } from '@/components/Table/Table';
-export { Text, Title } from '@/components/Typography';
-export { TextAreaField } from '@/components/Input/TextArea';
-export { TextField } from '@/components/Input/TextField';
-export { Tooltip } from '@/components/Tooltip/Tooltip';
-export { useToast } from '@/components/Toast/useToast';
-export { createToast } from '@/components/Toast/toastEmitter';
-export { User as ProfileIcon } from '@/components/Assets/Icons/User';
-export { VerticalStepper } from '@/components/VerticalStepper';
-export { MultiAccordion } from '@/components/MultiAccordion';
-export { ToastProvider, Toast } from '@/components/Toast';
diff --git a/src/components/types.ts b/src/components/types.ts
deleted file mode 100644
index 75b848ed6..000000000
--- a/src/components/types.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { TooltipProps } from './Tooltip';
-import { TitleProps } from './Typography/Title/Title';
-import { TextProps } from './Typography/Text/Text';
-import { TabsProps } from './Tabs';
-import { SpacerProps } from './Spacer';
-import { SidebarNavigationItemProps } from './SidebarNavigationItem';
-import { SelectProps } from './Select/SingleSelect';
-import { SearchFieldProps } from './Input/SearchField';
-import { RadioGroupProps, RadioGroupItemProps } from './RadioGroup';
-import { PopoverProps } from '@radix-ui/react-popover';
-import { PasswordFieldProps } from './Input/PasswordField';
-import { NumberFieldProps } from './Input/NumberField';
-import { LabelProps } from './Label';
-import { HoverCardProps } from '@radix-ui/react-hover-card';
-import { ContainerProps } from './Container';
-import { GridContainerProps } from './GridContainer';
-import { ContextMenuProps } from '@radix-ui/react-context-menu';
-import { CheckboxProps } from './Checkbox';
-import { CardPrimaryProps } from './CardPrimary';
-import { CardSecondaryProps, BadgeState } from './CardSecondary';
-import { ButtonProps, ButtonType } from './Button';
-import { ButtonGroupProps } from './ButtonGroup';
-import { BadgeProps } from './Badge';
-import { AvatarProps } from './Avatar';
-import { AlertProps } from './Alert';
-import { IconButtonProps } from './IconButton';
-export type { IconName, ImageName } from './Icon/Icon.types';
-import { SidebarNavigationTitleProps } from './SidebarNavigationTitle';
-import { SidebarCollapsibleItemProps } from './SidebarCollapsibleItem';
-import { SidebarCollapsibleTitleProps } from './SidebarCollapsibleTitle';
-export type { Menu, SplitButtonProps } from './SplitButton';
-export type { ToastProps } from './Toast';
-export type { SelectOptionListItem } from './Select/common/types';
-export type { MultiSelectProps } from './Select/MultiSelect';
-export type { CheckboxMultiSelectProps } from './Select/CheckboxMultiSelect';
-export type { PanelProps } from './Panel';
-export type { FlyoutProps, FlyoutFooterProps, FlyoutHeaderProps } from './Flyout';
-export type { DialogContentProps } from './Dialog';
-export type { DialogProps, DialogTriggerProps } from '@radix-ui/react-dialog';
-export type { ConfirmationDialogProps } from './ConfirmationDialog';
-export type { FileTabStatusType } from './FileTabs';
-export type {
-  TableHeaderType,
-  TableRowType,
-  TableProps,
-  TableColumnConfigProps,
-} from './Table';
-export type { BigStatProps } from './BigStat';
-export type { TextAreaFieldProps } from './Input/TextArea';
-export type { VerticalStepperProps, VerticalStepProps } from './VerticalStepper';
-export type { CardHorizontalProps } from './CardHorizontal';
-export type { CardPromotionProps } from './CardPromotion';
-export type { ProgressBarProps } from './ProgressBar';
-export type {
-  GridProps,
-  CellProps,
-  SelectedRegion,
-  SelectionFocus,
-  SelectionPos,
-  SelectionAction,
-  GridContextMenuItemProps,
-  Rectangle,
-} from './Grid/types';
-export type { StyledLinkProps } from './Link/common';
-
-export type { DateRange } from './DatePicker/utils';
-
-export type States = 'default' | 'active' | 'disabled' | 'error' | 'hover';
-export type HorizontalDirection = 'start' | 'end';
-export type Orientation = 'horizontal' | 'vertical';
-export type { FormContainerProps } from './FormContainer';
-export type {
-  AutoCompleteProps,
-  AutoCompleteOptionListItem,
-  SelectOptionItem,
-  SelectItemProps,
-  SelectGroupProps,
-} from './AutoComplete';
-export type { PaginationProps } from './Pagination';
-export type { ContextMenuItemProps } from './ContextMenu';
-export type { GenericLabelProps } from './GenericLabel';
-export type { MultiAccordionProps } from './MultiAccordion';
-export type { CheckboxVariants } from './Checkbox';
-export type { CursorOptions } from './Common';
-export type { SelectGroupOptionItem } from './Select/common/types';
-
-export type { IconButtonProps };
-export type { AlertProps };
-export type { AvatarProps };
-export type { BadgeProps };
-export type { ButtonGroupProps };
-export type { ButtonProps, ButtonType };
-export type { CardSecondaryProps, BadgeState };
-export type { CardPrimaryProps };
-export type { CheckboxProps };
-export type { ContainerProps };
-export type { ContextMenuProps };
-export type { GridContainerProps };
-export type { HoverCardProps };
-export type { LabelProps };
-export type { NumberFieldProps };
-export type { PasswordFieldProps };
-export type { PopoverProps };
-export type { RadioGroupProps, RadioGroupItemProps };
-export type { SearchFieldProps };
-export type { SelectProps };
-export type { SidebarNavigationItemProps };
-export type { SidebarNavigationTitleProps };
-export type { SidebarCollapsibleItemProps };
-export type { SidebarCollapsibleTitleProps };
-export type { SpacerProps };
-export type { TabsProps };
-export type { TextProps };
-export type { TitleProps };
-export type { TooltipProps };
diff --git a/src/hooks/useInitialTheme.ts b/src/hooks/useInitialTheme.ts
index a5bc980dc..7b7c80ef5 100644
--- a/src/hooks/useInitialTheme.ts
+++ b/src/hooks/useInitialTheme.ts
@@ -1,7 +1,8 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { type ThemeName, THEMES } from '@/theme';
+import { THEMES } from '@/theme/theme.core';
+import type { ThemeName } from '@/theme/theme.types';
 import { CUI_THEME_STORAGE_KEY } from '@/utils/localStorage';
 import { THEME_ATTRIBUTE, getRootElement } from '@/utils/dom';
 
diff --git a/src/index.ts b/src/index.ts
index 41701dfb3..389e545d3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,301 @@
-export * from './components';
-export * from './theme';
-export * from './hooks';
+// ClickHouse Click-UI - Main Library Entry Point
+// ================================================
+// This is the primary entry point for the @clickhouse/click-ui package.
+// All exports are organized by category for clarity.
+
+// ================================================
+// Components
+// REQUEST: Please keep the types next to the component
+// to make it easier to maintain
+// ================================================
+
+// Accordion
+export { Accordion } from './components/Accordion';
+
+// Alert
+export {
+  Alert,
+  DangerAlert,
+  InfoAlert,
+  SuccessAlert,
+  WarningAlert,
+} from './components/Alert';
+export type { AlertProps } from './components/Alert';
+
+// Assets (Flags, Logos, Icons)
+export { Flag as Flags } from './components/Assets/Flags/system/Flag';
+export { Logo } from './components/Assets/Logos/system/Logo';
+export { User as ProfileIcon } from './components/Assets/Icons/User';
+
+// AutoComplete
+export { AutoComplete } from './components/AutoComplete';
+export type {
+  AutoCompleteOptionListItem,
+  AutoCompleteProps,
+  SelectGroupProps,
+  SelectItemProps,
+  SelectOptionItem,
+} from './components/AutoComplete';
+
+// Avatar
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+
+// Badge
+export { Badge } from './components/Badge';
+export type { BadgeProps } from './components/Badge';
+
+// BigStat
+export { BigStat } from './components/BigStat';
+export type { BigStatProps } from './components/BigStat';
+
+// Button
+export { Button } from './components/Button';
+export { ButtonGroup } from './components/ButtonGroup';
+export { SplitButton } from './components/SplitButton';
+export type { ButtonGroupProps } from './components/ButtonGroup';
+export type { ButtonProps, ButtonType } from './components/Button';
+export type { Menu, SplitButtonProps } from './components/SplitButton';
+
+// Cards
+export { CardHorizontal } from './components/CardHorizontal';
+export { CardPrimary } from './components/CardPrimary';
+export { CardPromotion } from './components/CardPromotion';
+export { CardSecondary } from './components/CardSecondary';
+export type { CardHorizontalProps } from './components/CardHorizontal';
+export type { CardPrimaryProps } from './components/CardPrimary';
+export type { CardPromotionProps } from './components/CardPromotion';
+export type { BadgeState, CardSecondaryProps } from './components/CardSecondary';
+
+// Checkbox
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps, CheckboxVariants } from './components/Checkbox';
+
+// Code
+export { CodeBlock } from './components/CodeBlock';
+export { InlineCodeBlock } from './components/CodeBlock/InlineCodeBlock';
+export type { CodeThemeType } from './components/CodeBlock';
+
+// Confirmation Dialog
+export { ConfirmationDialog } from './components/ConfirmationDialog';
+export type { ConfirmationDialogProps } from './components/ConfirmationDialog';
+
+// Container & Grid
+export { Container } from './components/Container';
+export { Grid } from './components/Grid';
+export { GridContainer } from './components/GridContainer';
+export type { ContainerProps } from './components/Container';
+export type {
+  CellProps,
+  GridContextMenuItemProps,
+  GridProps,
+  Rectangle,
+  SelectedRegion,
+  SelectionAction,
+  SelectionFocus,
+  SelectionPos,
+} from './components/Grid/types';
+export type { GridContainerProps } from './components/GridContainer';
+
+// Context Menu
+export { ContextMenu } from './components/ContextMenu';
+export type { ContextMenuItemProps } from './components/ContextMenu';
+
+// Date Details
+export { DateDetails } from './components/DateDetails';
+
+// Date Picker
+export { DatePicker } from './components/DatePicker';
+export { DateRangePicker } from './components/DatePicker/DateRangePicker';
+export { getPredefinedMonthsForDateRangePicker } from './components/DatePicker/utils';
+export type { DateRange } from './components/DatePicker/utils';
+
+// Dialog
+export { Dialog } from './components/Dialog';
+export type { DialogContentProps } from './components/Dialog';
+
+// Dropdown
+export { Dropdown } from './components/Dropdown';
+
+// Ellipsis Content
+export { EllipsisContent } from './components/EllipsisContent';
+
+// File Upload & Tabs
+export { FileMultiUpload, FileUpload } from './components/FileUpload';
+export { FileTabs, FileTabElement } from './components/FileTabs';
+export type { FileTabStatusType } from './components/FileTabs';
+
+// Flyout
+export { Flyout } from './components/Flyout';
+export type {
+  FlyoutFooterProps,
+  FlyoutHeaderProps,
+  FlyoutProps,
+} from './components/Flyout';
+
+// Form Container
+export { FormContainer } from './components/FormContainer';
+export type { FormContainerProps } from './components/FormContainer';
+
+// Generic Label
+export { GenericLabel } from './components/GenericLabel';
+export type { GenericLabelProps } from './components/GenericLabel';
+
+// HoverCard
+export { HoverCard } from './components/HoverCard';
+
+// Icon
+export { Icon } from './components/Icon';
+export { IconButton } from './components/IconButton';
+export type { IconButtonProps } from './components/IconButton';
+export type { ImageName as IconName } from './components/Icon/Icon.types';
+
+// Label & Link
+export { Label } from './components/Label';
+export { Link } from './components/Link';
+// TODO: This linkStyles require investigation
+export { linkStyles } from './components/Link/common';
+export type { LabelProps } from './components/Label';
+export type { StyledLinkProps } from './components/Link/common';
+
+// Multi Accordion
+export { MultiAccordion } from './components/MultiAccordion';
+export type { MultiAccordionProps } from './components/MultiAccordion';
+
+// Navigation
+export { SidebarCollapsibleItem } from './components/SidebarCollapsibleItem';
+export { SidebarCollapsibleTitle } from './components/SidebarCollapsibleTitle';
+export { SidebarNavigationItem } from './components/SidebarNavigationItem';
+export { SidebarNavigationTitle } from './components/SidebarNavigationTitle';
+export type { SidebarCollapsibleItemProps } from './components/SidebarCollapsibleItem';
+export type { SidebarCollapsibleTitleProps } from './components/SidebarCollapsibleTitle';
+export type { SidebarNavigationItemProps } from './components/SidebarNavigationItem';
+export type { SidebarNavigationTitleProps } from './components/SidebarNavigationTitle';
+
+// Pagination
+export { Pagination } from './components/Pagination';
+export type { PaginationProps } from './components/Pagination';
+
+// Panel
+export { Panel } from './components/Panel';
+export type { PanelProps } from './components/Panel';
+
+// Popover
+export { Popover } from './components/Popover';
+
+// Progress Bar
+export { ProgressBar } from './components/ProgressBar';
+export type { ProgressBarProps } from './components/ProgressBar';
+
+// Radio Group
+export { RadioGroup } from './components/RadioGroup';
+export type { RadioGroupItemProps, RadioGroupProps } from './components/RadioGroup';
+
+// Select
+export { CheckboxMultiSelect } from './components/Select/CheckboxMultiSelect';
+export { MultiSelect } from './components/Select/MultiSelect';
+export { Select } from './components/Select/SingleSelect';
+export type { CheckboxMultiSelectProps } from './components/Select/CheckboxMultiSelect';
+export type { MultiSelectProps } from './components/Select/MultiSelect';
+export type {
+  SelectGroupOptionItem,
+  SelectOptionListItem,
+} from './components/Select/common/types';
+export type { SelectProps } from './components/Select/SingleSelect';
+
+// Separator
+export { Separator } from './components/Separator';
+
+// Spacer
+export { Spacer } from './components/Spacer';
+export type { SpacerProps } from './components/Spacer';
+
+// Switch
+export { Switch } from './components/Switch';
+
+// Table
+export { Table } from './components/Table';
+export type {
+  TableColumnConfigProps,
+  TableHeaderType,
+  TableProps,
+  TableRowType,
+} from './components/Table';
+
+// Tabs
+export { Tabs, FullWidthTabs } from './components/Tabs';
+export type { TabsProps } from './components/Tabs';
+
+// Text Field & Related Inputs
+export { NumberField } from './components/Input/NumberField';
+export { PasswordField } from './components/Input/PasswordField';
+export { SearchField } from './components/Input/SearchField';
+export { TextField } from './components/Input/TextField';
+export { TextAreaField } from './components/Input/TextArea';
+export type { NumberFieldProps } from './components/Input/NumberField';
+export type { PasswordFieldProps } from './components/Input/PasswordField';
+export type { SearchFieldProps } from './components/Input/SearchField';
+export type { TextAreaFieldProps } from './components/Input/TextArea';
+
+// Toast
+export { Toast, ToastProvider } from './components/Toast';
+export { createToast } from './components/Toast/toastEmitter';
+export { useToast } from './components/Toast/useToast';
+export type { ToastProps } from './components/Toast';
+
+// Tooltip
+export { Tooltip } from './components/Tooltip/Tooltip';
+export type { TooltipProps } from './components/Tooltip';
+
+// Typography
+export { Text, Title } from './components/Typography';
+export type { TextProps } from './components/Typography/Text/Text';
+export type { TitleProps } from './components/Typography/Title/Title';
+
+// Vertical Stepper
+export { VerticalStepper } from './components/VerticalStepper';
+export type {
+  VerticalStepperProps,
+  VerticalStepProps,
+} from './components/VerticalStepper';
+
+// ================================================
+// Providers
+// ================================================
+
+// TODO: Having both ClickUIProvider and ThemeProvider exported is confusing.
+// Consider consolidating to a single public provider API. For example, have ThemeProvider only!
+export { ClickUIProvider, ThemeProvider } from './providers';
+
+// ================================================
+// Theme
+// ================================================
+
+export { THEMES, themes } from './theme/theme.core';
+export type { ThemeName, Theme } from './theme/theme.types';
+export {
+  isValidThemeName,
+  getFallbackThemeName,
+  getDefaultThemeName,
+  getAvailableThemeNames,
+} from './theme/theme.utils';
+export { InitCUIThemeScript } from './theme/InitCUIThemeScript/InitCUIThemeScript';
+export type { InitCUIThemeScriptProps } from './theme/InitCUIThemeScript/InitCUIThemeScript';
+
+// ================================================
+// Global Types
+// ================================================
+
+export type { HorizontalDirection, Orientation, States, AssetSize } from './types';
+
+// TODO: These should NOT be exposed
+// prefer click ui props instead
+
+// ================================================
+// Radix UI Types
+// ================================================
+
+export type { ContextMenuProps } from '@radix-ui/react-context-menu';
+export type { DialogProps, DialogTriggerProps } from '@radix-ui/react-dialog';
+export type { HoverCardProps } from '@radix-ui/react-hover-card';
+export type { PopoverProps } from '@radix-ui/react-popover';
diff --git a/src/theme/ClickUIProvider/ClickUIProvider.tsx b/src/providers/ClickUIProvider.tsx
similarity index 85%
rename from src/theme/ClickUIProvider/ClickUIProvider.tsx
rename to src/providers/ClickUIProvider.tsx
index 65c894736..b38605324 100644
--- a/src/theme/ClickUIProvider/ClickUIProvider.tsx
+++ b/src/providers/ClickUIProvider.tsx
@@ -2,13 +2,14 @@ import {
   Provider as TooltipProvider,
   TooltipProviderProps,
 } from '@radix-ui/react-tooltip';
-import { ToastProvider, ToastProviderProps } from '@/components/Toast';
-import { ThemeName, THEMES } from '@/theme/theme.types';
-import { ThemeProvider } from '@/theme/theme';
+import { ToastProvider, ToastProviderProps } from '@/components/Toast/Toast';
+import { THEMES } from '@/theme/theme.core';
+import type { ThemeName } from '@/theme/theme.types';
+import { ThemeProvider } from './ThemeProvider';
 import { ReactNode, useEffect } from 'react';
 import { setRootThemeAttribute, removeRootThemeAttribute } from '@/utils/dom';
 import { CUI_THEME_STORAGE_KEY } from '@/utils/localStorage';
-import { isValidThemeName, getFallbackThemeName } from '@/utils/theme';
+import { isValidThemeName, getFallbackThemeName } from '@/theme/theme.utils';
 
 interface Props {
   config?: {
@@ -21,7 +22,7 @@ interface Props {
   storageKey?: string;
 }
 
-const ClickUIProvider = ({
+export const ClickUIProvider = ({
   children,
   theme,
   config = {},
@@ -68,5 +69,3 @@ const ClickUIProvider = ({
     </ThemeProvider>
   );
 };
-
-export default ClickUIProvider;
diff --git a/src/theme/theme.tsx b/src/providers/ThemeProvider.tsx
similarity index 73%
rename from src/theme/theme.tsx
rename to src/providers/ThemeProvider.tsx
index c325acabf..a998d49e5 100644
--- a/src/theme/theme.tsx
+++ b/src/providers/ThemeProvider.tsx
@@ -2,9 +2,10 @@ import {
   ThemeProvider as StyledThemeProvider,
   createGlobalStyle,
 } from 'styled-components';
-import { ThemeName, THEMES } from './theme.types';
-import { themes } from './themes';
-import { isValidThemeName } from '@/utils/theme';
+import { THEMES } from '@/theme/theme.core';
+import type { ThemeName } from '@/theme/theme.types';
+import { themes } from '@/theme/theme.core';
+import { isValidThemeName } from '@/theme/theme.utils';
 
 const GlobalStyle = createGlobalStyle`
   body{
@@ -13,7 +14,7 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const ThemeProvider = ({
+export const ThemeProvider = ({
   theme: name,
   children,
 }: {
@@ -29,5 +30,3 @@ const ThemeProvider = ({
     </StyledThemeProvider>
   );
 };
-
-export { ThemeProvider };
diff --git a/src/providers/index.ts b/src/providers/index.ts
new file mode 100644
index 000000000..c5d6b2aaa
--- /dev/null
+++ b/src/providers/index.ts
@@ -0,0 +1,7 @@
+// TODO: Reconcile ClickUIProvider and ThemeProvider - having two public providers is confusing.
+// Only one should be public. ClickUIProvider is the main composite provider that includes
+// theme, toast, and tooltip providers. ThemeProvider is the lower-level styled-components
+// theme provider. Consider deprecating one or making ThemeProvider internal only.
+
+export { ClickUIProvider } from './ClickUIProvider';
+export { ThemeProvider } from './ThemeProvider';
diff --git a/src/stories/chartColors.stories.tsx b/src/stories/chartColors.stories.tsx
index 5b046dd18..732f69323 100644
--- a/src/stories/chartColors.stories.tsx
+++ b/src/stories/chartColors.stories.tsx
@@ -1,5 +1,5 @@
 import { Container } from '@/components/Container';
-import { Text } from '@/components/Typography/Text/Text';
+import { Text } from '@/components/Typography/Text';
 
 import { styled, useTheme } from 'styled-components';
 
diff --git a/src/theme/ClickUIProvider/index.ts b/src/theme/ClickUIProvider/index.ts
deleted file mode 100644
index 04e47b462..000000000
--- a/src/theme/ClickUIProvider/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ClickUIProvider } from './ClickUIProvider';
-export { default } from './ClickUIProvider';
diff --git a/src/theme/InitCUIThemeScript/InitCUIThemeScript.tsx b/src/theme/InitCUIThemeScript/InitCUIThemeScript.tsx
index c4f21a409..6db22f807 100644
--- a/src/theme/InitCUIThemeScript/InitCUIThemeScript.tsx
+++ b/src/theme/InitCUIThemeScript/InitCUIThemeScript.tsx
@@ -1,6 +1,7 @@
 import { THEME_ATTRIBUTE } from '@/utils/dom';
 import { CUI_THEME_STORAGE_KEY } from '@/utils/localStorage';
-import { ThemeName, THEMES } from '@/theme/core';
+import { THEMES } from '@/theme/theme.core';
+import type { ThemeName } from '@/theme/theme.types';
 
 export interface InitCUIThemeScriptProps {
   defaultTheme?: ThemeName;
diff --git a/src/theme/core.ts b/src/theme/core.ts
deleted file mode 100644
index 1ffdce21e..000000000
--- a/src/theme/core.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import darkTheme from './tokens/variables.dark';
-import lightTheme from './tokens/variables.light';
-
-export const THEMES = {
-  Dark: 'dark',
-  Light: 'light',
-} as const;
-
-export type ThemeName = (typeof THEMES)[keyof typeof THEMES];
-export type ActiveThemeName = ThemeName;
-export type Theme = typeof lightTheme;
-
-export const themes: Record<ThemeName, Theme> = {
-  dark: darkTheme,
-  light: lightTheme,
-};
-
-// TODO: DefaultTheme can now be removed safely
-declare module 'styled-components' {
-  export interface DefaultTheme extends Theme {}
-}
diff --git a/src/theme/index.ts b/src/theme/index.ts
deleted file mode 100644
index 79ee63185..000000000
--- a/src/theme/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { ClickUIProvider } from './ClickUIProvider';
-export { THEMES } from './theme.types';
-export type { ThemeName, Theme } from './theme.types';
-export { themes } from './themes';
-export { InitCUIThemeScript } from './InitCUIThemeScript';
-export type { InitCUIThemeScriptProps } from './InitCUIThemeScript';
diff --git a/src/theme/theme.core.ts b/src/theme/theme.core.ts
new file mode 100644
index 000000000..815c00df1
--- /dev/null
+++ b/src/theme/theme.core.ts
@@ -0,0 +1,19 @@
+import darkTheme from './tokens/variables.dark';
+import lightTheme from './tokens/variables.light';
+import type { Theme, ThemeName } from './theme.types';
+
+export const THEMES: Record<Capitalize<ThemeName>, ThemeName> = {
+  Dark: 'dark',
+  Light: 'light',
+};
+
+// Note: darkTheme and lightTheme have different
+// token values but compatible structures.
+// We use 'satisfies' to ensure type compatibility
+// without casting, allowing TypeScript
+// to infer the most precise type while still
+// checking against the Theme interface.
+export const themes = {
+  dark: darkTheme,
+  light: lightTheme,
+} satisfies Record<ThemeName, Theme>;
diff --git a/src/theme/theme.types.ts b/src/theme/theme.types.ts
index 268934412..90c1ef2de 100644
--- a/src/theme/theme.types.ts
+++ b/src/theme/theme.types.ts
@@ -1,14 +1,9 @@
 import lightTheme from './tokens/variables.light';
 
-export const THEMES = {
-  Dark: 'dark',
-  Light: 'light',
-} as const;
-
-export type ThemeName = (typeof THEMES)[keyof typeof THEMES];
-
 export type Theme = typeof lightTheme;
 
+export type ThemeName = 'dark' | 'light';
+
 declare module 'styled-components' {
   export interface DefaultTheme extends Theme {}
 }
diff --git a/src/utils/theme.ts b/src/theme/theme.utils.ts
similarity index 54%
rename from src/utils/theme.ts
rename to src/theme/theme.utils.ts
index 3ce68b7e7..572dd6c50 100644
--- a/src/utils/theme.ts
+++ b/src/theme/theme.utils.ts
@@ -1,7 +1,12 @@
-import { ThemeName, THEMES } from '@/theme/theme.types';
+import { THEMES } from '@/theme/theme.core';
+import type { ThemeName } from '@/theme/theme.types';
 
 export const isValidThemeName = (theme: string | undefined): theme is ThemeName =>
   theme !== undefined && ([THEMES.Dark, THEMES.Light] as Array<string>).includes(theme);
 
 export const getFallbackThemeName = (theme: string | undefined): ThemeName =>
   isValidThemeName(theme) ? theme : THEMES.Light;
+
+export const getDefaultThemeName = (): ThemeName => THEMES.Light;
+
+export const getAvailableThemeNames = (): ThemeName[] => [THEMES.Dark, THEMES.Light];
diff --git a/src/types/index.ts b/src/types/index.ts
index c960392b2..0acdd9081 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -5,7 +5,7 @@ export type States = 'default' | 'active' | 'disabled' | 'error' | 'hover';
 export type HorizontalDirection = 'start' | 'end';
 export type Orientation = 'horizontal' | 'vertical';
 
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type AssetSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 export type SVGAssetProps = SVGAttributes<SVGElement> & {
   theme?: ThemeName;
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 0125037b3..b9c6cd1e3 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -1,4 +1,4 @@
-import { ThemeName } from '@/theme/core';
+import { ThemeName } from '@/theme/theme.types';
 import { CUI_THEME_STORAGE_KEY } from './localStorage';
 
 export const THEME_ATTRIBUTE = `data-${CUI_THEME_STORAGE_KEY}`;
diff --git a/src/utils/test-utils.tsx b/src/utils/test-utils.tsx
index 617fad547..169beb24a 100644
--- a/src/utils/test-utils.tsx
+++ b/src/utils/test-utils.tsx
@@ -1,5 +1,6 @@
-import { type ThemeName, ClickUIProvider } from '@/theme';
+import type { ThemeName } from '@/theme/theme.types';
 import { render as renderTL } from '@testing-library/react';
+import { ClickUIProvider } from '@/providers';
 
 // eslint-disable-next-line react-refresh/only-export-components
 const Wrapper = ({