chore: removing circular dependencies from imports (#447)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR addresses the first part of circular dependency issues by fixing
import paths across multiple components. Instead of using barrel imports
(`'..'`), we now directly import from specific component files. This
change:

1. Removes circular dependencies caused by barrel imports
2. Makes the import structure more explicit and maintainable
3. Prepares the codebase for further circular dependency fixes

This update is very similar to the one implemented in the MetaMask
extension, which can be referenced here: [MetaMask Extension PR
#30267](MetaMask/metamask-extension#30267). That
PR also focused on updating import paths in the `component-library`
folder to resolve circular dependencies.

The changes primarily affect:
- Avatar components (Base, Favicon, Network, Token)
- Button components (Base, Icon, Primary, Secondary, Tertiary)
- Text and Icon component imports

## **Related issues**

Partly fixes:
#445

## **Manual testing steps**

1. Run storybook and verify all stories for affected components render
correctly
2. Run tests and ensure all tests pass
3. Check build process completes successfully

## **Screenshots/Recordings**

### **Before**
N/A (No visual changes)

### **After**
N/A (No visual changes)

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

packages/design-system-react/src/components/avatar-base/AvatarBase.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { Icon, IconName, IconSize, Text, TextVariant, TextColor } from '..';
+import { Icon, IconName, IconSize } from '../icon';
+import { TextColor } from '../text';
 import { AvatarBase } from './AvatarBase';
 import { AvatarBaseSize, AvatarBaseShape } from './AvatarBase.types';
 import README from './README.mdx';

packages/design-system-react/src/components/avatar-base/AvatarBase.tsx

@@ -2,7 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import React from 'react';
 
 import { twMerge } from '../../utils/tw-merge';
-import { Text, FontWeight, TextVariant, TextColor } from '..';
+import { Text, FontWeight, TextVariant, TextColor } from '../text';
 import {
   AVATAR_BASE_SIZE_CLASS_MAP,
   AVATAR_BASE_SQUARE_BORDER_RADIUS_MAP,

packages/design-system-react/src/components/avatar-favicon/AvatarFavicon.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { TextColor } from '..';
+import { TextColor } from '../text';
 import { AvatarFavicon } from './AvatarFavicon';
 import { AvatarFaviconSize } from '.';
 

packages/design-system-react/src/components/avatar-network/AvatarNetwork.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { TextColor } from '..';
+import { TextColor } from '../text';
 import { AvatarNetwork } from './AvatarNetwork';
 import { AvatarNetworkSize } from '.';
 

packages/design-system-react/src/components/avatar-token/AvatarToken.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { TextColor } from '..';
+import { TextColor } from '../text';
 import { AvatarToken } from './AvatarToken';
 import { AvatarTokenSize } from '.';
 

packages/design-system-react/src/components/button-base/ButtonBase.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { IconName, TextVariant } from '..';
+import { IconName } from '../icon';
+import { TextVariant } from '../text';
 import { ButtonBase } from './ButtonBase';
 import { ButtonBaseSize } from './ButtonBase.types';
 import README from './README.mdx';

packages/design-system-react/src/components/button-base/ButtonBase.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { IconName } from '..';
+import { IconName } from '../icon';
 import { ButtonBase } from './ButtonBase';
 import { ButtonBaseSize } from './ButtonBase.types';
 

packages/design-system-react/src/components/button-base/ButtonBase.tsx

@@ -1,7 +1,8 @@
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import React from 'react';
 
-import { FontWeight, Icon, IconName, IconSize, Text, TextColor } from '..';
+import { Text, FontWeight, TextColor } from '../text';
+import { Icon, IconName, IconSize } from '../icon';
 import { twMerge } from '../../utils/tw-merge';
 import { BUTTON_BASE_SIZE_CLASS_MAP } from './ButtonBase.constants';
 import type { ButtonBaseProps } from './ButtonBase.types';

packages/design-system-react/src/components/button-icon/ButtonIcon.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { IconName } from '..';
+import { IconName } from '../icon';
 import { ButtonIcon } from './ButtonIcon';
 import { ButtonIconSize } from './ButtonIcon.types';
 import README from './README.mdx';

packages/design-system-react/src/components/button-icon/ButtonIcon.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { IconName, IconSize } from '..';
+import { IconName } from '../icon';
 import { ButtonIcon } from './ButtonIcon';
 import { ButtonIconSize } from './ButtonIcon.types';
 

packages/design-system-react/src/components/button-primary/ButtonPrimary.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { ButtonPrimarySize } from '.';
-import { IconName } from '..';
+import { IconName } from '../icon';
 import { ButtonPrimary } from './ButtonPrimary';
 import README from './README.mdx';
 

packages/design-system-react/src/components/button-primary/ButtonPrimary.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { ButtonPrimarySize, IconName } from '..';
+import { IconName } from '../icon';
+import { ButtonBaseSize } from '../button-base';
 import { ButtonPrimary } from './ButtonPrimary';
 
 describe('ButtonPrimary', () => {
@@ -118,11 +119,11 @@ describe('ButtonPrimary', () => {
 
   it('renders with correct size classes', () => {
     const { rerender } = render(
-      <ButtonPrimary size={ButtonPrimarySize.Sm}>Small</ButtonPrimary>,
+      <ButtonPrimary size={ButtonBaseSize.Sm}>Small</ButtonPrimary>,
     );
     expect(screen.getByRole('button')).toHaveClass('h-8');
 
-    rerender(<ButtonPrimary size={ButtonPrimarySize.Lg}>Large</ButtonPrimary>);
+    rerender(<ButtonPrimary size={ButtonBaseSize.Lg}>Large</ButtonPrimary>);
     expect(screen.getByRole('button')).toHaveClass('h-12');
   });
 

packages/design-system-react/src/components/button-secondary/ButtonSecondary.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { ButtonSecondarySize } from '.';
-import { IconName } from '..';
+import { IconName } from '../icon';
 import { ButtonSecondary } from './ButtonSecondary';
 import README from './README.mdx';
 

packages/design-system-react/src/components/button-secondary/ButtonSecondary.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { ButtonSecondarySize, IconName } from '..';
+import { IconName } from '../icon';
+import { ButtonBaseSize } from '../button-base';
 import { ButtonSecondary } from './ButtonSecondary';
 
 describe('ButtonSecondary', () => {
@@ -103,13 +104,11 @@ describe('ButtonSecondary', () => {
 
   it('renders with correct size classes', () => {
     const { rerender } = render(
-      <ButtonSecondary size={ButtonSecondarySize.Sm}>Small</ButtonSecondary>,
+      <ButtonSecondary size={ButtonBaseSize.Sm}>Small</ButtonSecondary>,
     );
     expect(screen.getByRole('button')).toHaveClass('h-8');
 
-    rerender(
-      <ButtonSecondary size={ButtonSecondarySize.Lg}>Large</ButtonSecondary>,
-    );
+    rerender(<ButtonSecondary size={ButtonBaseSize.Lg}>Large</ButtonSecondary>);
     expect(screen.getByRole('button')).toHaveClass('h-12');
   });
 

packages/design-system-react/src/components/button-tertiary/ButtonTertiary.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { ButtonTertiarySize } from '.';
-import { IconName } from '..';
+import { IconName } from '../icon';
 import { ButtonTertiary } from './ButtonTertiary';
 import README from './README.mdx';
 

packages/design-system-react/src/components/button-tertiary/ButtonTertiary.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { ButtonTertiarySize, IconName } from '..';
+import { IconName } from '../icon';
+import { ButtonBaseSize } from '../button-base';
 import { ButtonTertiary } from './ButtonTertiary';
 
 describe('ButtonTertiary', () => {
@@ -57,18 +58,14 @@ describe('ButtonTertiary', () => {
 
   it('renders with correct size classes', () => {
     const { rerender } = render(
-      <ButtonTertiary size={ButtonTertiarySize.Sm}>Small</ButtonTertiary>,
+      <ButtonTertiary size={ButtonBaseSize.Sm}>Small</ButtonTertiary>,
     );
     expect(screen.getByRole('button')).toHaveClass('h-8');
 
-    rerender(
-      <ButtonTertiary size={ButtonTertiarySize.Md}>Medium</ButtonTertiary>,
-    );
+    rerender(<ButtonTertiary size={ButtonBaseSize.Md}>Medium</ButtonTertiary>);
     expect(screen.getByRole('button')).toHaveClass('h-10');
 
-    rerender(
-      <ButtonTertiary size={ButtonTertiarySize.Lg}>Large</ButtonTertiary>,
-    );
+    rerender(<ButtonTertiary size={ButtonBaseSize.Lg}>Large</ButtonTertiary>);
     expect(screen.getByRole('button')).toHaveClass('h-12');
   });
 

packages/design-system-react/src/components/button/Button.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { ButtonSize } from '.';
-import { IconName } from '..';
+import { IconName } from '../icon';
 import { Button } from './Button';
 import { ButtonVariant } from './Button.types';
 import README from './README.mdx';

packages/design-system-react/src/components/button/Button.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { IconName } from '..';
+import { IconName } from '../icon';
 import { Button } from './Button';
 import { ButtonVariant } from './Button.types';
 

packages/design-system-react/src/components/button/Button.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { ButtonTertiary, ButtonPrimary, ButtonSecondary } from '..';
-import type {
-  ButtonTertiaryProps,
-  ButtonPrimaryProps,
-  ButtonSecondaryProps,
-} from '..';
+import { ButtonTertiary } from '../button-tertiary';
+import { ButtonPrimary } from '../button-primary';
+import { ButtonSecondary } from '../button-secondary';
+import type { ButtonTertiaryProps } from '../button-tertiary';
+import type { ButtonPrimaryProps } from '../button-primary';
+import type { ButtonSecondaryProps } from '../button-secondary';
 import type { ButtonProps } from './Button.types';
 import { ButtonVariant } from './Button.types';
 

packages/design-system-react/src/components/text-button/TextButton.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { IconName, Text, TextVariant } from '..';
+import { IconName } from '../icon';
+import { Text, TextVariant } from '../text';
 import README from './README.mdx';
 import { TextButton } from './TextButton';
 

packages/design-system-react/src/components/text-button/TextButton.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { IconName, Text, TextVariant } from '..';
+import { IconName } from '../icon';
+import { Text, TextVariant } from '../text';
 import { TextButton } from './TextButton';
 
 describe('TextButton', () => {