From e56bff955fe3e7756d7883f8617912539b271d76 Mon Sep 17 00:00:00 2001
From: Steven <steven@straatemans.nl>
Date: Thu, 7 Nov 2024 08:56:18 +0100
Subject: [PATCH] chore(devwallet): stylefixes (#2639)

---
 .changeset/purple-rabbits-drum.md             |   2 +
 .../dev-wallet/src/App/Layout/BreadCrumbs.tsx |  34 --
 .../apps/dev-wallet/src/App/Layout/Layout.tsx |   2 -
 .../dev-wallet/src/App/Layout/SideBar.tsx     |   8 -
 .../SideBarBreadcrumbs/SideBarBreadcrumbs.tsx |  20 +
 .../dev-wallet/src/pages/account/account.tsx  |  29 +-
 .../backup-recovery-phrase.tsx                |  25 +-
 .../write-down/write-down-recovery-phrase.tsx |  23 +-
 .../src/pages/contacts/contacts.tsx           |  27 +-
 .../dev-wallet/src/pages/home/home-page.tsx   |  71 ++--
 .../dev-wallet/src/pages/keys/keys-page.tsx   |  83 ++---
 .../src/pages/networks/networks.tsx           |  26 +-
 .../signature-builder/signature-builder.tsx   |  80 ++--
 .../src/pages/transaction/Transaction.tsx     |  45 ++-
 .../src/pages/transactions/transactions.tsx   | 111 +++---
 .../src/pages/transfer-v2/transfer-v2.tsx     | 178 +++++----
 packages/libs/kode-ui/package.json            |   1 +
 .../components/Breadcrumbs/Breadcrumbs.css.ts |  21 +-
 .../src/patterns/SideBarLayout/SideBar.tsx    |   1 +
 .../SideBarLayout/SideBarLayout.stories.tsx   | 344 +++++++++++-------
 .../patterns/SideBarLayout/SideBarLayout.tsx  |  39 +-
 .../src/patterns/SideBarLayout/aside.css.ts   |  12 +-
 .../Breadcrumbs/SideBarBreadcrumbs.tsx        |  20 +
 .../Breadcrumbs/SideBarBreadcrumbsItem.tsx    |  12 +
 .../components/Breadcrumbs/index.ts           |   2 +
 .../components/LayoutProvider.tsx             |  52 +--
 .../SideBarLayout/components/SideBarAside.tsx |   4 +-
 .../components/SideBarHeader.tsx              |  15 +-
 .../SideBarLayout/components/SideBarTree.tsx  |   4 +-
 .../components/SideBarTreeWrapper.tsx         |  21 ++
 .../components/sidebartree.css.ts             |  24 +-
 .../src/patterns/SideBarLayout/sidebar.css.ts |   2 +-
 .../src/patterns/SideBarLayout/styles.css.ts  |  16 +-
 packages/libs/kode-ui/src/patterns/index.ts   |   5 +
 .../kode-ui/src/styles/tokens/contract.css.ts |  72 ++--
 .../kode-ui/src/styles/tokens/dark.css.ts     |  26 +-
 .../kode-ui/src/styles/tokens/light.css.ts    |  26 +-
 pnpm-lock.yaml                                | 241 +++++++-----
 38 files changed, 919 insertions(+), 805 deletions(-)
 create mode 100644 .changeset/purple-rabbits-drum.md
 delete mode 100644 packages/apps/dev-wallet/src/App/Layout/BreadCrumbs.tsx
 create mode 100644 packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx
 create mode 100644 packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx
 create mode 100644 packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbsItem.tsx
 create mode 100644 packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/index.ts
 create mode 100644 packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeWrapper.tsx

diff --git a/.changeset/purple-rabbits-drum.md b/.changeset/purple-rabbits-drum.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/purple-rabbits-drum.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/App/Layout/BreadCrumbs.tsx b/packages/apps/dev-wallet/src/App/Layout/BreadCrumbs.tsx
deleted file mode 100644
index 5c0671da07..0000000000
--- a/packages/apps/dev-wallet/src/App/Layout/BreadCrumbs.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { MonoWindow } from '@kadena/kode-icons/system';
-import {
-  BreadcrumbsItem,
-  Breadcrumbs as BreadcrumbsUI,
-  Text,
-} from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
-import { FC } from 'react';
-import { Link } from 'react-router-dom';
-
-export const BreadCrumbs: FC = () => {
-  const { breadCrumbs } = useLayout();
-
-  return (
-    <BreadcrumbsUI
-      icon={
-        <Text>
-          {breadCrumbs.length ? breadCrumbs[0].visual : <MonoWindow />}
-        </Text>
-      }
-    >
-      <>
-        <BreadcrumbsItem component={Link} href="/">
-          Dashboard
-        </BreadcrumbsItem>
-        {breadCrumbs.map((crumb) => (
-          <BreadcrumbsItem key={crumb.url} component={Link} href={crumb.url}>
-            {crumb.label}
-          </BreadcrumbsItem>
-        ))}
-      </>
-    </BreadcrumbsUI>
-  );
-};
diff --git a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
index c70c167390..3809e3ee0a 100644
--- a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
+++ b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
@@ -15,7 +15,6 @@ import {
 import { FC, useMemo } from 'react';
 import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { BetaHeader } from './../BetaHeader';
-import { BreadCrumbs } from './BreadCrumbs';
 import { SideBar } from './SideBar';
 
 export const Layout: FC = () => {
@@ -41,7 +40,6 @@ export const Layout: FC = () => {
     <>
       <SideBarLayout
         topBanner={<BetaHeader />}
-        breadcrumbs={<BreadCrumbs />}
         location={innerLocation}
         sidebar={<SideBar />}
         footer={
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
index e4add3720e..c70ad3c6b6 100644
--- a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
+++ b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -4,7 +4,6 @@ import {
   MonoDashboardCustomize,
   MonoLogout,
   MonoNetworkCheck,
-  MonoSwapHoriz,
   MonoTableRows,
   MonoWallet,
   MonoWindow,
@@ -91,13 +90,6 @@ export const SideBar: FC = () => {
             />
           </SideBarTree>
 
-          <SideBarItem
-            visual={<MonoSwapHoriz />}
-            label="Transfer"
-            component={Link}
-            href="/transfer"
-          />
-
           <SideBarItem
             visual={<MonoContacts />}
             label="Contacts"
diff --git a/packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx b/packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx
new file mode 100644
index 0000000000..7f96614874
--- /dev/null
+++ b/packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx
@@ -0,0 +1,20 @@
+import { IBreadcrumbsProps } from '@kadena/kode-ui';
+import { SideBarBreadcrumbs as SideBarBreadcrumbsUI } from '@kadena/kode-ui/patterns';
+import React, { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+export const SideBarBreadcrumbs: FC<IBreadcrumbsProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <SideBarBreadcrumbsUI {...props}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+        return React.cloneElement(child, { ...child.props, component: Link });
+      })}
+    </SideBarBreadcrumbsUI>
+  );
+};
diff --git a/packages/apps/dev-wallet/src/pages/account/account.tsx b/packages/apps/dev-wallet/src/pages/account/account.tsx
index 15d8f50381..068dcaf87d 100644
--- a/packages/apps/dev-wallet/src/pages/account/account.tsx
+++ b/packages/apps/dev-wallet/src/pages/account/account.tsx
@@ -15,14 +15,8 @@ import { getTransferActivities } from '@/modules/activity/activity.service';
 import * as transactionService from '@/modules/transaction/transaction.service';
 import { useAsync } from '@/utils/useAsync';
 import { ChainId } from '@kadena/client';
-import {
-  MonoKey,
-  MonoRemoveRedEye,
-  MonoTransform,
-  MonoWallet,
-} from '@kadena/kode-icons/system';
+import { MonoKey, MonoRemoveRedEye } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
 import { useMemo, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { noStyleLinkClass, panelClass } from '../home/style.css';
@@ -41,27 +35,6 @@ export function AccountPage() {
     watchAccounts.find((account) => account.uuid === accountId);
 
   const navigate = useNavigate();
-  useLayout({
-    breadCrumbs: [
-      {
-        label:
-          activeNetwork?.name || activeNetwork?.networkId || 'Unknown Network',
-        url: '/',
-        visual: <MonoWallet />,
-      },
-      {
-        url: `/account/${accountId || ''}`,
-        label: `Account (${account?.alias || account?.address || 'Unknown Account'})`,
-      },
-    ],
-    appContext: {
-      visual: <MonoTransform />,
-      label: 'Add Asset',
-      onPress: () => {
-        navigate('/add-asset');
-      },
-    },
-  });
 
   const keyset = account?.keyset;
   const asset = fungibles.find((f) => f.contract === account?.contract);
diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
index 71d8fde7d8..9b0af35bda 100644
--- a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
+++ b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
@@ -1,23 +1,22 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Box, Button, Heading, Stack, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
-
+<SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
+  <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+  <SideBarBreadcrumbsItem href="/terminal">Dev Console</SideBarBreadcrumbsItem>
+</SideBarBreadcrumbs>;
 export function BackupRecoveryPhrase() {
-  useLayout({
-    appContext: undefined,
-    breadCrumbs: [
-      {
-        label: 'Backup',
-        visual: <MonoDashboardCustomize />,
-        url: '/backup-recovery-phrase',
-      },
-    ],
-  });
-
   return (
     <>
+      <SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/backup-recovery-phrase">
+          Backup
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
       <AuthCard>
         <Box margin="md">
           <Heading variant="h5">Backup the recovery phrase</Heading>
diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx
index e6af31c94f..bf0869b0b1 100644
--- a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx
+++ b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx
@@ -1,27 +1,14 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
 import { BackupMnemonic } from '@/Components/BackupMnemonic/BackupMnemonic';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Notification } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export function WriteDownRecoveryPhrase() {
-  useLayout({
-    appContext: undefined,
-    breadCrumbs: [
-      {
-        label: 'Backup',
-        visual: <MonoDashboardCustomize />,
-        url: '/backup-recovery-phrase',
-      },
-      {
-        label: 'Recovery phrase',
-        url: '/backup-recovery-phrase/write-down',
-      },
-    ],
-  });
   const { decryptSecret, askForPassword, profile } = useWallet();
   const [mnemonic, setMnemonic] = useState('');
   const [error, setError] = useState('');
@@ -55,6 +42,12 @@ export function WriteDownRecoveryPhrase() {
   }
   return (
     <>
+      <SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/backup-recovery-phrase/write-down">
+          Recovery phrase
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
       {
         <AuthCard>
           <BackupMnemonic
diff --git a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
index a808948568..c0028b8712 100644
--- a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
+++ b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
@@ -1,6 +1,7 @@
 import { ConfirmDeletion } from '@/Components/ConfirmDeletion/ConfirmDeletion';
 import { ListItem } from '@/Components/ListItem/ListItem';
 import { usePrompt } from '@/Components/PromptProvider/Prompt';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import {
   contactRepository,
   IContact,
@@ -20,28 +21,13 @@ import {
   Stack,
   Text,
 } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { panelClass } from '../home/style.css';
 import { ContactForm } from './Components/ContactForm';
 
 export function Contacts() {
-  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout({
-    appContext: {
-      visual: <MonoContacts />,
-      label: 'Add Contact',
-      onPress: () => {
-        setIsRightAsideExpanded(true);
-      },
-    },
-    breadCrumbs: [
-      {
-        label: 'Contacts',
-        visual: <MonoContacts />,
-        url: '/contacts',
-      },
-    ],
-  });
+  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const [editContact, setEditContact] = useState<IContact>();
   const { contacts } = useWallet();
   const prompt = usePrompt();
@@ -53,6 +39,13 @@ export function Contacts() {
 
   return (
     <>
+      <SideBarBreadcrumbs icon={<MonoContacts />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/contacts">
+          Contacts
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+
       <ContactForm
         input={editContact}
         onClose={closeForm}
diff --git a/packages/apps/dev-wallet/src/pages/home/home-page.tsx b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
index bbf56253f5..1d60013ef1 100644
--- a/packages/apps/dev-wallet/src/pages/home/home-page.tsx
+++ b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
@@ -1,37 +1,19 @@
 import { AssetsCard } from '@/Components/AssetsCard/AssetsCard';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { transactionRepository } from '@/modules/transaction/transaction.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { panelClass } from '@/pages/home/style.css.ts';
 import { useAsync } from '@/utils/useAsync';
 import { IPactCommand } from '@kadena/client';
-import { MonoWallet, MonoWindow } from '@kadena/kode-icons/system';
+import { MonoDashboard } from '@kadena/kode-icons/system';
 import { Box, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
 import { linkClass } from '../select-profile/select-profile.css';
 import { TransactionList } from '../transactions/transactions';
 
 export function HomePage() {
   const { profile, activeNetwork } = useWallet();
-  const { setIsRightAsideExpanded } = useLayout();
-  console.log('activeNetwork?.name', activeNetwork?.name);
-  useLayout({
-    breadCrumbs: [
-      {
-        label:
-          activeNetwork?.name || activeNetwork?.networkId || 'Unknown Network',
-        url: '/',
-        visual: <MonoWindow />,
-      },
-    ],
-    appContext: {
-      visual: <MonoWallet />,
-      label: 'Add Asset',
-      onPress: () => {
-        setIsRightAsideExpanded(true);
-      },
-    },
-  });
 
   const [transactions] = useAsync(
     async (profile, activeNetwork) => {
@@ -56,28 +38,33 @@ export function HomePage() {
   );
 
   return (
-    <Box gap={'lg'}>
-      <Text>Welcome back</Text>
-      <Heading as="h1">{profile?.name} </Heading>
-      <Stack gap={'lg'} flexDirection={'column'}>
-        <AssetsCard />
-        <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
-          <Heading variant="h4">Wallet Activities</Heading>
-          <Stack>
-            <Tabs>
-              <TabItem title="Transactions">
-                <TransactionList transactions={transactions || []} />
-                <Stack paddingBlockStart={'lg'}>
-                  <Link to="/transactions" className={linkClass}>
-                    All transactions
-                  </Link>
-                </Stack>
-              </TabItem>
-              <TabItem title="Transfers">WIP: Not implemented yet</TabItem>
-            </Tabs>
+    <>
+      <SideBarBreadcrumbs icon={<MonoDashboard />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+      <Box gap={'lg'}>
+        <Text>Welcome back</Text>
+        <Heading as="h1">{profile?.name} </Heading>
+        <Stack gap={'lg'} flexDirection={'column'}>
+          <AssetsCard />
+          <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
+            <Heading variant="h4">Wallet Activities</Heading>
+            <Stack>
+              <Tabs>
+                <TabItem title="Transactions">
+                  <TransactionList transactions={transactions || []} />
+                  <Stack paddingBlockStart={'lg'}>
+                    <Link to="/transactions" className={linkClass}>
+                      All transactions
+                    </Link>
+                  </Stack>
+                </TabItem>
+                <TabItem title="Transfers">WIP: Not implemented yet</TabItem>
+              </Tabs>
+            </Stack>
           </Stack>
         </Stack>
-      </Stack>
-    </Box>
+      </Box>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
index 75fd5f5cc1..e0f7b99787 100644
--- a/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
+++ b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
@@ -1,56 +1,49 @@
-import { createAsideUrl } from '@/utils/createAsideUrl';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { Mono123, MonoKey } from '@kadena/kode-icons/system';
 import { Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
-import { Link, useParams } from 'react-router-dom';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
+import { useParams } from 'react-router-dom';
 import { Keys } from './Components/Keys';
 import { KeySets } from './Components/KeySets';
 
 export function KeysPage() {
   const { tab = 'keys' } = useParams();
-  useLayout({
-    appContext: {
-      visual: <MonoKey />,
-      label: 'Add key Source',
-      href: createAsideUrl('KeySource'),
-      component: Link,
-    },
-    breadCrumbs: [
-      {
-        label: 'Manage Your Keys',
-        visual: <MonoKey />,
-        url: '/key-management/keys',
-      },
-    ],
-  });
 
   return (
-    <Stack flexDirection={'column'} gap={'lg'}>
-      <Heading>Manage Your Keys</Heading>
-      <Tabs defaultSelectedKey={tab}>
-        <TabItem
-          key={'keys'}
-          title={
-            <Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
-              <MonoKey />
-              <Text>Your Keys</Text>
-            </Stack>
-          }
-        >
-          <Keys />
-        </TabItem>
-        <TabItem
-          key={'keysets'}
-          title={
-            <Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
-              <Mono123 />
-              <Text>Your Key Sets</Text>
-            </Stack>
-          }
-        >
-          <KeySets />
-        </TabItem>
-      </Tabs>
-    </Stack>
+    <>
+      <SideBarBreadcrumbs icon={<MonoKey />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/key-management/keys">
+          Manage Your Keys
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+      <Stack flexDirection={'column'} gap={'lg'}>
+        <Heading>Manage Your Keys</Heading>
+        <Tabs defaultSelectedKey={tab}>
+          <TabItem
+            key={'keys'}
+            title={
+              <Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
+                <MonoKey />
+                <Text>Your Keys</Text>
+              </Stack>
+            }
+          >
+            <Keys />
+          </TabItem>
+          <TabItem
+            key={'keysets'}
+            title={
+              <Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
+                <Mono123 />
+                <Text>Your Key Sets</Text>
+              </Stack>
+            }
+          >
+            <KeySets />
+          </TabItem>
+        </Tabs>
+      </Stack>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/networks/networks.tsx b/packages/apps/dev-wallet/src/pages/networks/networks.tsx
index a784050e35..8fe87b0fdc 100644
--- a/packages/apps/dev-wallet/src/pages/networks/networks.tsx
+++ b/packages/apps/dev-wallet/src/pages/networks/networks.tsx
@@ -1,10 +1,10 @@
 import { ListItem } from '@/Components/ListItem/ListItem';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { networkRepository } from '@/modules/network/network.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
-import { createAsideUrl } from '@/utils/createAsideUrl';
-import { MonoWifiTethering, MonoWorkspaces } from '@kadena/kode-icons/system';
-import { Button, Heading, Link, Stack, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { MonoWifiTethering } from '@kadena/kode-icons/system';
+import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
+import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { panelClass } from '../home/style.css';
 import {
@@ -18,20 +18,16 @@ export function Networks() {
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const [selectedNetwork, setSelectedNetwork] =
     useState<INetworkWithOptionalUuid>(() => getNewNetwork());
-  useLayout({
-    appContext: {
-      visual: <MonoWorkspaces />,
-      label: 'Add Network',
-      href: createAsideUrl('KeySource'),
-      component: Link,
-    },
-    breadCrumbs: [
-      { label: 'Networks', visual: <MonoWifiTethering />, url: '/networks' },
-    ],
-  });
 
   return (
     <>
+      <SideBarBreadcrumbs icon={<MonoWifiTethering />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/networks">
+          Networks
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+
       <Stack margin="md" flexDirection={'column'}>
         <NetworkForm
           isOpen={isRightAsideExpanded}
diff --git a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
index 2a79bb88be..6a9aaec3ce 100644
--- a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
+++ b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
@@ -6,6 +6,7 @@ import {
   createTransaction,
 } from '@kadena/client';
 
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { transactionRepository } from '@/modules/transaction/transaction.repository';
 import * as transactionService from '@/modules/transaction/transaction.service';
 import { useWallet } from '@/modules/wallet/wallet.hook';
@@ -18,7 +19,7 @@ import {
   Stack,
   Text,
 } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { execCodeParser } from '@kadena/pactjs-generator';
 import classNames from 'classnames';
 import yaml from 'js-yaml';
@@ -89,16 +90,6 @@ export function SignatureBuilder() {
   >([]);
   const { profile, activeNetwork, networks, setActiveNetwork } = useWallet();
   const navigate = useNavigate();
-  useLayout({
-    appContext: undefined,
-    breadCrumbs: [
-      {
-        label: 'Sig Builder',
-        visual: <MonoDashboardCustomize />,
-        url: '/sig-builder',
-      },
-    ],
-  });
 
   const exec =
     pactCommand && pactCommand.payload && 'exec' in pactCommand.payload
@@ -200,35 +191,46 @@ export function SignatureBuilder() {
   };
 
   return (
-    <Stack flexDirection={'column'} gap={'md'}>
-      <Heading variant="h5">Paste SigData, CommandSigData, or Payload</Heading>
-      <textarea
-        value={input}
-        className={classNames(codeArea)}
-        onChange={(e) => {
-          e.preventDefault();
-          setError(undefined);
-          processSig(e.target.value);
-        }}
-      />
-      <Box>{schema && <Text>{`Schema: ${schema}`}</Text>}</Box>
-      {schema === 'signingRequest' && (
-        <Notification intent="info" role="status">
-          SigningRequest is not supported yet, We are working on it.
-        </Notification>
-      )}
-      {error && (
-        <Notification intent="negative" role="alert">
-          {error}
-        </Notification>
-      )}
-      <Box>
+    <>
+      <SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/sig-builder">
+          Sig Builder
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+
+      <Stack flexDirection={'column'} gap={'md'}>
+        <Heading variant="h5">
+          Paste SigData, CommandSigData, or Payload
+        </Heading>
+        <textarea
+          value={input}
+          className={classNames(codeArea)}
+          onChange={(e) => {
+            e.preventDefault();
+            setError(undefined);
+            processSig(e.target.value);
+          }}
+        />
+        <Box>{schema && <Text>{`Schema: ${schema}`}</Text>}</Box>
+        {schema === 'signingRequest' && (
+          <Notification intent="info" role="status">
+            SigningRequest is not supported yet, We are working on it.
+          </Notification>
+        )}
+        {error && (
+          <Notification intent="negative" role="alert">
+            {error}
+          </Notification>
+        )}
         <Box>
-          {['PactCommand', 'quickSignRequest'].includes(schema!) && (
-            <Button onPress={reviewTransaction}>Review Transaction</Button>
-          )}
+          <Box>
+            {['PactCommand', 'quickSignRequest'].includes(schema!) && (
+              <Button onPress={reviewTransaction}>Review Transaction</Button>
+            )}
+          </Box>
         </Box>
-      </Box>
-    </Stack>
+      </Stack>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/transaction/Transaction.tsx b/packages/apps/dev-wallet/src/pages/transaction/Transaction.tsx
index cfe0ec0203..23cc633f6f 100644
--- a/packages/apps/dev-wallet/src/pages/transaction/Transaction.tsx
+++ b/packages/apps/dev-wallet/src/pages/transaction/Transaction.tsx
@@ -1,7 +1,10 @@
 import { transactionRepository } from '@/modules/transaction/transaction.repository';
 
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { useAsync } from '@/utils/useAsync';
+import { MonoSwapHoriz } from '@kadena/kode-icons/system';
 import { Heading, Stack, Text } from '@kadena/kode-ui';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useParams } from 'react-router-dom';
 import { TxList } from './components/TxList';
 
@@ -15,21 +18,33 @@ export const TransactionPage = () => {
     [groupId],
   );
   return (
-    <Stack flexDirection={'column'} gap={'lg'}>
-      <Stack flexDirection={'column'} gap={'sm'}>
-        <Heading>Transactions</Heading>
-        {txs.length === 0 && <Text>No transactions</Text>}
-        {txs.length >= 2 && (
-          <Text>This is a group of {txs.length} Transactions</Text>
-        )}
+    <>
+      <SideBarBreadcrumbs icon={<MonoSwapHoriz />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href={`/transactions`}>
+          Transactions
+        </SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href={`/transactions/${groupId}`}>
+          Transaction Group
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+
+      <Stack flexDirection={'column'} gap={'lg'}>
+        <Stack flexDirection={'column'} gap={'sm'}>
+          <Heading>Transactions</Heading>
+          {txs.length === 0 && <Text>No transactions</Text>}
+          {txs.length >= 2 && (
+            <Text>This is a group of {txs.length} Transactions</Text>
+          )}
+        </Stack>
+        <TxList
+          onDone={() => {
+            console.log('done');
+          }}
+          txIds={txs.map((tx) => tx.uuid)}
+          showExpanded={txs.length === 1}
+        />
       </Stack>
-      <TxList
-        onDone={() => {
-          console.log('done');
-        }}
-        txIds={txs.map((tx) => tx.uuid)}
-        showExpanded={txs.length === 1}
-      />
-    </Stack>
+    </>
   );
 };
diff --git a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
index 83483273a9..7d4fe23d7c 100644
--- a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
+++ b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
@@ -1,3 +1,4 @@
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import {
   ITransaction,
   transactionRepository,
@@ -7,7 +8,7 @@ import { shorten } from '@/utils/helpers';
 import { IPactCommand } from '@kadena/client';
 import { MonoOpenInNew, MonoSwapHoriz } from '@kadena/kode-icons/system';
 import { Box, Heading, Stack, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { listClass, listItemClass, panelClass } from '../home/style.css';
@@ -15,22 +16,6 @@ import { hashStyle } from './style.css';
 
 export function Transactions() {
   const { profile, activeNetwork } = useWallet();
-  useLayout({
-    appContext: undefined,
-    breadCrumbs: [
-      {
-        label:
-          activeNetwork?.name || activeNetwork?.networkId || 'Unknown Network',
-        url: '/',
-        visual: <MonoSwapHoriz />,
-      },
-      {
-        label: 'Transactions',
-        visual: <MonoSwapHoriz />,
-        url: '/transactions',
-      },
-    ],
-  });
   const [transactions, setTransactions] = useState<
     (ITransaction & { creationDate: number })[]
   >([]);
@@ -58,10 +43,18 @@ export function Transactions() {
   }, [profile?.uuid, activeNetwork?.uuid]);
 
   return (
-    <Box className={panelClass} marginBlockStart="xs">
-      <Heading as="h4">Transactions</Heading>
-      <TransactionList transactions={transactions} />
-    </Box>
+    <>
+      <SideBarBreadcrumbs icon={<MonoSwapHoriz />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/transactions">
+          Transactions
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+      <Box className={panelClass} marginBlockStart="xs">
+        <Heading as="h4">Transactions</Heading>
+        <TransactionList transactions={transactions} />
+      </Box>
+    </>
   );
 }
 
@@ -91,45 +84,47 @@ export const TransactionList = ({
     [transactions],
   );
   return (
-    <Box marginBlockStart="md">
-      {txs.length ? (
-        <ul className={listClass}>
-          {txs.map((tx) => (
-            <li key={tx.uuid}>
-              <Stack
-                justifyContent="space-between"
-                alignItems={'center'}
-                className={listItemClass}
-                gap={'lg'}
-              >
-                <Link to={`/transaction/${tx.groupId}`}>
-                  <Text>
-                    <MonoOpenInNew />
-                  </Text>
-                </Link>
-                <Text>{shorten(tx.hash)}</Text>
+    <>
+      <Box marginBlockStart="md">
+        {txs.length ? (
+          <ul className={listClass}>
+            {txs.map((tx) => (
+              <li key={tx.uuid}>
+                <Stack
+                  justifyContent="space-between"
+                  alignItems={'center'}
+                  className={listItemClass}
+                  gap={'lg'}
+                >
+                  <Link to={`/transaction/${tx.groupId}`}>
+                    <Text>
+                      <MonoOpenInNew />
+                    </Text>
+                  </Link>
+                  <Text>{shorten(tx.hash)}</Text>
 
-                <Text className={hashStyle}>
-                  <span
-                    title={tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
-                  >
-                    {tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
-                  </span>
-                </Text>
+                  <Text className={hashStyle}>
+                    <span
+                      title={tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
+                    >
+                      {tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
+                    </span>
+                  </Text>
 
-                <Text>{tx.status}</Text>
+                  <Text>{tx.status}</Text>
 
-                <Text>
-                  {new Date(
-                    ((JSON.parse(tx.cmd) as IPactCommand).meta.creationTime ||
-                      0) * 1000,
-                  ).toLocaleString()}
-                </Text>
-              </Stack>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-    </Box>
+                  <Text>
+                    {new Date(
+                      ((JSON.parse(tx.cmd) as IPactCommand).meta.creationTime ||
+                        0) * 1000,
+                    ).toLocaleString()}
+                  </Text>
+                </Stack>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </Box>
+    </>
   );
 };
diff --git a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx
index e851baa438..a2a926d154 100644
--- a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx
+++ b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx
@@ -6,12 +6,13 @@ import { MonoSwapHoriz } from '@kadena/kode-icons/system';
 import { Divider, Heading, Stack, Step, Stepper, Text } from '@kadena/kode-ui';
 import { useCallback, useEffect, useState } from 'react';
 
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { activityRepository } from '@/modules/activity/activity.repository';
 import {
   ITransaction,
   transactionRepository,
 } from '@/modules/transaction/transaction.repository';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { ReviewTransaction } from '../transaction/components/ReviewTransaction';
 import { TxList } from '../transaction/components/TxList';
@@ -31,22 +32,7 @@ export function TransferV2() {
     activeNetwork,
     profile,
   } = useWallet();
-  useLayout({
-    appContext: undefined,
-    breadCrumbs: [
-      {
-        label:
-          activeNetwork?.name || activeNetwork?.networkId || 'Unknown Network',
-        url: '/',
-        visual: <MonoSwapHoriz />,
-      },
-      {
-        label: 'Transfer',
-        visual: <MonoSwapHoriz />,
-        url: '/transfer',
-      },
-    ],
-  });
+
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const accountId = searchParams.get('accountId');
@@ -270,83 +256,95 @@ export function TransferV2() {
   };
 
   return (
-    <Stack flexDirection={'column'}>
-      <Stepper direction="horizontal">
-        <Step
-          icon={<MonoSwapHoriz />}
-          onClick={() => {
-            setStep('transfer');
-          }}
-          active={step === 'transfer'}
-        >
+    <>
+      <SideBarBreadcrumbs icon={<MonoSwapHoriz />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/transfer">
           Transfer
-        </Step>
-        <Step active={step === 'sign'}>Transactions</Step>
-        <Step active={step === 'result'}>Result</Step>
-      </Stepper>
-      {step === 'transfer' && (
-        <Stack justifyContent={'center'}>
-          <Stack gap={'lg'} flexDirection={'column'} style={{ width: '670px' }}>
-            <TransferForm
-              accountId={accountId}
-              activityId={urlActivityId}
-              onSubmit={async (data, redistribution) => {
-                const senderAccount = allAccounts.find(
-                  (acc) => acc.uuid === data.accountId,
-                );
-                if (!senderAccount?.keyset?.uuid) return;
-                const formData = { ...data, senderAccount };
-                const getEmpty = () => ['', []] as [string, ITransaction[]];
-                let redistributionGroup = getEmpty();
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+      <Stack flexDirection={'column'}>
+        <Stepper direction="horizontal">
+          <Step
+            icon={<MonoSwapHoriz />}
+            onClick={() => {
+              setStep('transfer');
+            }}
+            active={step === 'transfer'}
+          >
+            Transfer
+          </Step>
+          <Step active={step === 'sign'}>Transactions</Step>
+          <Step active={step === 'result'}>Result</Step>
+        </Stepper>
+        {step === 'transfer' && (
+          <Stack justifyContent={'center'}>
+            <Stack
+              gap={'lg'}
+              flexDirection={'column'}
+              style={{ width: '670px' }}
+            >
+              <TransferForm
+                accountId={accountId}
+                activityId={urlActivityId}
+                onSubmit={async (data, redistribution) => {
+                  const senderAccount = allAccounts.find(
+                    (acc) => acc.uuid === data.accountId,
+                  );
+                  if (!senderAccount?.keyset?.uuid) return;
+                  const formData = { ...data, senderAccount };
+                  const getEmpty = () => ['', []] as [string, ITransaction[]];
+                  let redistributionGroup = getEmpty();
 
-                if (redistribution.length > 0) {
-                  redistributionGroup =
-                    (await createRedistribution(formData, redistribution)) ??
-                    getEmpty();
-                }
-                const txGroup =
-                  (await createTransaction(formData)) ?? getEmpty();
-                const updatedTxGroups = {
-                  redistribution: {
-                    groupId: redistributionGroup[0] ?? '',
-                    txs: redistributionGroup[1] ?? [],
-                  },
-                  transfer: {
-                    groupId: txGroup[0] ?? '',
-                    txs: txGroup[1] ?? [],
-                  },
-                };
-                setTxGroups(updatedTxGroups);
-                const activityId = crypto.randomUUID();
-                await activityRepository.addActivity({
-                  data: {
-                    transferData: data,
-                    txGroups: {
-                      transfer: {
-                        groupId: updatedTxGroups.transfer.groupId,
-                      },
-                      redistribution: {
-                        groupId: updatedTxGroups.redistribution.groupId,
+                  if (redistribution.length > 0) {
+                    redistributionGroup =
+                      (await createRedistribution(formData, redistribution)) ??
+                      getEmpty();
+                  }
+                  const txGroup =
+                    (await createTransaction(formData)) ?? getEmpty();
+                  const updatedTxGroups = {
+                    redistribution: {
+                      groupId: redistributionGroup[0] ?? '',
+                      txs: redistributionGroup[1] ?? [],
+                    },
+                    transfer: {
+                      groupId: txGroup[0] ?? '',
+                      txs: txGroup[1] ?? [],
+                    },
+                  };
+                  setTxGroups(updatedTxGroups);
+                  const activityId = crypto.randomUUID();
+                  await activityRepository.addActivity({
+                    data: {
+                      transferData: data,
+                      txGroups: {
+                        transfer: {
+                          groupId: updatedTxGroups.transfer.groupId,
+                        },
+                        redistribution: {
+                          groupId: updatedTxGroups.redistribution.groupId,
+                        },
                       },
                     },
-                  },
-                  keysetId: senderAccount.keyset?.uuid,
-                  networkUUID: activeNetwork!.uuid,
-                  profileId: profile?.uuid ?? '',
-                  status: 'Initiated',
-                  type: 'Transfer',
-                  uuid: activityId,
-                });
-                setStep('sign');
-                // then the page will stay on the sign step if refresh
-                navigate(`/transfer?activityId=${activityId}`);
-              }}
-            />
+                    keysetId: senderAccount.keyset?.uuid,
+                    networkUUID: activeNetwork!.uuid,
+                    profileId: profile?.uuid ?? '',
+                    status: 'Initiated',
+                    type: 'Transfer',
+                    uuid: activityId,
+                  });
+                  setStep('sign');
+                  // then the page will stay on the sign step if refresh
+                  navigate(`/transfer?activityId=${activityId}`);
+                }}
+              />
+            </Stack>
           </Stack>
-        </Stack>
-      )}
-      {(step === 'sign' || step === 'result' || step === 'summary') &&
-        renderSignStep()}
-    </Stack>
+        )}
+        {(step === 'sign' || step === 'result' || step === 'summary') &&
+          renderSignStep()}
+      </Stack>
+    </>
   );
 }
diff --git a/packages/libs/kode-ui/package.json b/packages/libs/kode-ui/package.json
index 877c05f137..9bc96e4cdf 100644
--- a/packages/libs/kode-ui/package.json
+++ b/packages/libs/kode-ui/package.json
@@ -108,6 +108,7 @@
     "react": "^18.2.0",
     "react-aria": "^3.31.1",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.10.3",
     "react-stately": "^3.29.1",
     "react-use": "^17.4.0"
   },
diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts
index f0bb763dd7..9f2f3bbb48 100644
--- a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts
+++ b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts
@@ -1,4 +1,4 @@
-import { atoms, style, token } from '../../styles';
+import { atoms, globalStyle, style, token } from '../../styles';
 
 export const containerClass = style([
   atoms({
@@ -55,9 +55,18 @@ export const linkClass = style({
   },
 });
 
-export const navClass = style({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: 'max-content',
+export const navClass = style([
+  atoms({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  }),
+  {
+    width: 'max-content',
+  },
+]);
+
+globalStyle(`${navClass} svg`, {
+  width: '20px',
+  color: token('color.text.gray.default'),
 });
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
index dc9dab3abc..e68d30674c 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
@@ -58,6 +58,7 @@ export const SideBar: FC<ISideBarProps> = ({
         className={menuBackdropClass({ expanded: isExpanded })}
         onClick={(e) => handleExpand(e as unknown as PressEvent)}
       />
+
       <aside
         className={classNames(menuWrapperClass({ expanded: isExpanded }), {
           [menuWrapperMobileExpandedClass]: isExpanded,
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
index 54d5492e96..6c6970521f 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -9,16 +9,18 @@ import {
 } from '@kadena/kode-icons/system';
 import type { Meta, StoryObj } from '@storybook/react';
 import type { FC, PropsWithChildren } from 'react';
-import React, { useEffect } from 'react';
-import {
-  Breadcrumbs,
-  BreadcrumbsItem,
-  Button,
-  Stack,
-} from './../../components';
+import React from 'react';
+import { Button, Stack } from './../../components';
+import { SideBarBreadcrumbs } from './components/Breadcrumbs/SideBarBreadcrumbs';
+import { SideBarBreadcrumbsItem } from './components/Breadcrumbs/SideBarBreadcrumbsItem';
 import { LayoutProvider, useLayout } from './components/LayoutProvider';
 import { KadenaLogo } from './components/Logo/KadenaLogo';
 import { KLogo } from './components/Logo/KLogo';
+import {
+  RightAside,
+  RightAsideContent,
+  RightAsideHeader,
+} from './components/RightAside';
 import { SideBarFooter } from './components/SideBarFooter';
 import { SideBarFooterItem } from './components/SideBarFooterItem';
 import { SideBarItem } from './components/SideBarItem';
@@ -63,132 +65,222 @@ const LinkComponent: FC<PropsWithChildren<{ to: string }>> = ({
 };
 
 const InnerLayout = () => {
-  const { setAppContext, isExpanded } = useLayout();
-
-  useEffect(() => {
-    setAppContext({
-      visual: <MonoAccountTree />,
-      label: 'New Transf.',
-      href: 'https://kadena.io',
-    });
-  }, []);
+  const { isExpanded, setIsRightAsideExpanded, isRightAsideExpanded } =
+    useLayout();
 
   return (
-    <SideBarLayout
-      minifiedLogo={
-        <a href="https://kadena.io" target="_blank" rel="noreferrer">
-          <KLogo height={40} />
-        </a>
-      }
-      location={{
-        url: 'https://kadena.io',
-        push: console.log,
-      }}
-      topBanner={
-        <div
-          style={{ paddingBlock: '10px', background: 'green', width: '100%' }}
-        >
-          topbanner
-        </div>
-      }
-      breadcrumbs={
-        <Breadcrumbs icon={<MonoAccountTree />}>
-          <BreadcrumbsItem href="/accounts">He-man</BreadcrumbsItem>
-          <BreadcrumbsItem href="/accounts/2">Skeletor</BreadcrumbsItem>
-        </Breadcrumbs>
-      }
-      sidebar={
-        <SideBar
-          logo={
-            <a href="https://kadena.io" target="_blank" rel="noreferrer">
-              <KadenaLogo height={40} />
-            </a>
-          }
-          minifiedLogo={
-            <a href="https://kadena.io" target="_blank" rel="noreferrer">
-              <KLogo height={40} />
-            </a>
-          }
-          appContext={
-            <SideBarItem
-              visual={<MonoWifiTethering />}
-              label="Mainnet"
-              href="javascript:void()"
-            />
-          }
-          navigation={
-            <>
-              <SideBarTree visual={<MonoWallet />} label="My Wallet">
-                <SideBarTreeItem label="Accounts" href="https://kadena.io" />
-                <SideBarTreeItem label="Assets" href="https://docs.kadena.io" />
-              </SideBarTree>
-              <SideBarTree visual={<MonoWallet />} label="My Wallet 2">
-                <SideBarTreeItem label="Accounts" href="https://kadena.io" />
-                <SideBarTreeItem label="Assets" href="https://docs.kadena.io" />
-              </SideBarTree>
-            </>
-          }
-          context={
-            <>
+    <>
+      <RightAside isOpen={isRightAsideExpanded}>
+        <RightAsideHeader label="test header" />
+        <RightAsideContent>content</RightAsideContent>
+      </RightAside>
+      <SideBarLayout
+        minifiedLogo={
+          <a href="https://kadena.io" target="_blank" rel="noreferrer">
+            <KLogo height={40} />
+          </a>
+        }
+        location={{
+          url: 'https://kadena.io',
+          push: console.log,
+        }}
+        topBanner={
+          <div
+            style={{ paddingBlock: '10px', background: 'green', width: '100%' }}
+          >
+            topbanner
+          </div>
+        }
+        sidebar={
+          <SideBar
+            logo={
+              <a href="https://kadena.io" target="_blank" rel="noreferrer">
+                <KadenaLogo height={40} />
+              </a>
+            }
+            minifiedLogo={
+              <a href="https://kadena.io" target="_blank" rel="noreferrer">
+                <KLogo height={40} />
+              </a>
+            }
+            appContext={
               <SideBarItem
-                visual={<MonoControlPointDuplicate />}
-                label="New Transfer"
-                onPress={() => {}}
+                visual={<MonoWifiTethering />}
+                label="Mainnet"
+                href="javascript:void()"
               />
-
-              <SideBarItemsInline>
+            }
+            navigation={
+              <>
+                <SideBarTree visual={<MonoWallet />} label="My Wallet">
+                  <SideBarTreeItem label="Accounts" href="https://kadena.io" />
+                  <SideBarTreeItem
+                    label="Assets"
+                    href="https://docs.kadena.io"
+                  />
+                </SideBarTree>
+                <SideBarTree visual={<MonoWallet />} label="My Wallet 2">
+                  <SideBarTreeItem label="Accounts" href="https://kadena.io" />
+                  <SideBarTreeItem
+                    label="Assets"
+                    href="https://docs.kadena.io"
+                  />
+                </SideBarTree>
+              </>
+            }
+            context={
+              <>
                 <SideBarItem
-                  visual={<MonoAccountTree />}
-                  label="Profile"
+                  visual={<MonoControlPointDuplicate />}
+                  label="New Transfer"
                   onPress={() => {}}
                 />
 
-                <SideBarItem
-                  visual={<MonoLightMode />}
-                  label="Change theme"
-                  onPress={() => {}}
-                >
-                  <Button
-                    aria-label="Change theme"
-                    variant={isExpanded ? 'transparent' : 'outlined'}
-                    isCompact={!isExpanded}
-                    startVisual={<MonoLightMode />}
+                <SideBarItemsInline>
+                  <SideBarItem
+                    visual={<MonoAccountTree />}
+                    label="Profile"
                     onPress={() => {}}
                   />
-                </SideBarItem>
-              </SideBarItemsInline>
-            </>
-          }
-        />
-      }
-      footer={
-        <SideBarFooter>
-          <SideBarFooterItem
-            visual={<MonoWindow />}
-            component={LinkComponent}
-            href="https://kadena.io"
-            label="option 1"
-          />
-          <SideBarFooterItem
-            visual={<MonoWifiTethering />}
-            onPress={() => {}}
-            label="option 2"
-          />
-          <SideBarFooterItem
-            visual={<MonoWorkspaces />}
-            onPress={() => {}}
-            label="option 3"
-          />
-          <SideBarFooterItem
-            visual={<MonoLightMode />}
-            onPress={() => {}}
-            label="option 4"
+
+                  <SideBarItem
+                    visual={<MonoLightMode />}
+                    label="Change theme"
+                    onPress={() => {}}
+                  >
+                    <Button
+                      aria-label="Change theme"
+                      variant={isExpanded ? 'transparent' : 'outlined'}
+                      isCompact={!isExpanded}
+                      startVisual={<MonoLightMode />}
+                      onPress={() => {}}
+                    />
+                  </SideBarItem>
+                </SideBarItemsInline>
+              </>
+            }
           />
-        </SideBarFooter>
-      }
-    >
-      <Stack style={{ maxWidth: '800px', height: '400px' }}>content</Stack>
-    </SideBarLayout>
+        }
+        footer={
+          <SideBarFooter>
+            <SideBarFooterItem
+              visual={<MonoWindow />}
+              component={LinkComponent}
+              href="https://kadena.io"
+              label="option 1"
+            />
+            <SideBarFooterItem
+              visual={<MonoWifiTethering />}
+              onPress={() => {}}
+              label="option 2"
+            />
+            <SideBarFooterItem
+              visual={<MonoWorkspaces />}
+              onPress={() => {}}
+              label="option 3"
+            />
+            <SideBarFooterItem
+              visual={<MonoLightMode />}
+              onPress={() => {}}
+              label="option 4"
+            />
+          </SideBarFooter>
+        }
+      >
+        <Stack
+          flexDirection="column"
+          style={{ maxWidth: '800px', height: '400px' }}
+        >
+          <Stack width="100%" justifyContent="center" margin="md">
+            <Button
+              onPress={() => {
+                setIsRightAsideExpanded(true);
+              }}
+            >
+              open sidebar
+            </Button>
+          </Stack>
+          content
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+          <p>content</p>
+        </Stack>
+      </SideBarLayout>
+    </>
   );
 };
 
@@ -199,6 +291,14 @@ export const Primary: IStory = {
   render: () => {
     return (
       <LayoutProvider>
+        <SideBarBreadcrumbs icon={<MonoAccountTree />}>
+          <SideBarBreadcrumbsItem href="/accounts">
+            He-man
+          </SideBarBreadcrumbsItem>
+          <SideBarBreadcrumbsItem href="/accounts/2">
+            Skeletor
+          </SideBarBreadcrumbsItem>
+        </SideBarBreadcrumbs>
         <InnerLayout />
       </LayoutProvider>
     );
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
index 1d7622045f..e3a59cdf0d 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React, { useEffect } from 'react';
 import { MediaContextProvider, Stack } from './../../components';
-
 import { useLayout } from './components/LayoutProvider';
 import { SideBarAside } from './components/SideBarAside';
 import { SideBarHeader } from './components/SideBarHeader';
@@ -18,7 +17,6 @@ export interface ISideBarLayout extends PropsWithChildren {
   topBanner?: ReactElement;
   logo?: ReactElement;
   minifiedLogo?: ReactElement;
-  breadcrumbs?: ReactElement;
   sidebar?: ReactElement;
   footer?: ReactElement;
   variant?: 'default' | 'full';
@@ -29,7 +27,6 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
   topBanner,
   logo,
   minifiedLogo,
-  breadcrumbs,
   sidebar,
   footer,
   variant = 'default',
@@ -53,32 +50,30 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
         className={bodyWrapperClass}
       >
         <Stack
-          className={classNames(
-            layoutWrapperClass({ variant, hasTopBanner: !!topBanner }),
-            {
-              [layoutExpandedWrapperClass]: isExpanded,
-            },
-          )}
+          className={classNames(layoutWrapperClass({ variant }), {
+            [layoutExpandedWrapperClass]: isExpanded,
+          })}
         >
-          {topBanner && (
-            <Stack
-              style={{
-                gridArea: 'sidebarlayout-topbanner',
-                overflowY: 'hidden',
-              }}
-            >
-              {topBanner}
-            </Stack>
-          )}
           <SideBarHeader
-            breadcrumbs={breadcrumbs}
             hasSidebar={!!sidebar}
             logo={logo}
             minifiedLogo={minifiedLogo}
           />
           {sidebar}
-          <main className={mainClass({ variant })}>{children}</main>
-          <SideBarAside location={location} hasTopBanner={!!topBanner} />
+          <main className={mainClass({ variant })}>
+            {topBanner && (
+              <Stack
+                style={{
+                  gridArea: 'sidebarlayout-topbanner',
+                  overflowY: 'hidden',
+                }}
+              >
+                {topBanner}
+              </Stack>
+            )}
+            {children}
+          </main>
+          <SideBarAside location={location} />
           {footer}
         </Stack>
       </Stack>
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
index 5c81591378..6125880d7e 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
@@ -10,9 +10,11 @@ import {
 export const asideWrapperClass = recipe({
   base: [
     {
+      position: 'fixed',
       gridArea: 'sidebarlayout-aside',
       paddingBlockEnd: token('spacing.md'),
       backgroundColor: token('color.background.base.default'),
+      gridRow: '2/5',
     },
     responsiveStyle({
       xs: {
@@ -24,7 +26,6 @@ export const asideWrapperClass = recipe({
         willChange: 'transform',
         transition: 'transform .4s ease',
         transform: 'translateX(100%)',
-        position: 'absolute',
         opacity: 0,
         top: 0,
         bottom: 0,
@@ -35,25 +36,22 @@ export const asideWrapperClass = recipe({
         maxWidth: '370px',
       },
       xl: {
-        position: 'absolute',
         transform: 'translateX(0%)',
         marginInlineEnd: token('spacing.md'),
       },
     }),
   ],
   variants: {
-    hasTopBanner: {
-      false: { gridRow: '1/5' },
-      true: { gridRow: '2/5' },
-    },
     expanded: {
       true: {
         opacity: 1,
         transform: 'translateX(0%)',
+        pointerEvents: 'auto',
       },
       false: [
         {
           opacity: 0,
+          pointerEvents: 'none',
         },
       ],
     },
@@ -65,7 +63,7 @@ export const menuBackdropClass = recipe({
     responsiveStyle({
       xs: {
         display: 'flex',
-        position: 'absolute',
+        position: 'fixed',
         inset: 0,
         background: token('color.neutral.n90@alpha20'),
         zIndex: token('zIndex.overlay'),
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx
new file mode 100644
index 0000000000..84fea359be
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx
@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import type { IBreadcrumbsProps } from './../../../../components';
+import { Breadcrumbs } from './../../../../components';
+import { useLayout } from './../LayoutProvider';
+
+export const SideBarBreadcrumbs: FC<IBreadcrumbsProps> = ({
+  children,
+  ...props
+}) => {
+  const { breadcrumbsRef } = useLayout();
+
+  if (!breadcrumbsRef || React.Children.count(children) === 0) return null;
+
+  return createPortal(
+    <Breadcrumbs {...props}>{children}</Breadcrumbs>,
+    breadcrumbsRef,
+  );
+};
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbsItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbsItem.tsx
new file mode 100644
index 0000000000..eed0772ea6
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbsItem.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import type { IBreadcrumbItemProps } from './../../../../components';
+import { BreadcrumbsItem } from './../../../../components';
+
+export const SideBarBreadcrumbsItem: FC<IBreadcrumbItemProps> = ({
+  children,
+  ...props
+}) => {
+  return <BreadcrumbsItem {...props}>{children}</BreadcrumbsItem>;
+};
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/index.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/index.ts
new file mode 100644
index 0000000000..2421959460
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/index.ts
@@ -0,0 +1,2 @@
+export { SideBarBreadcrumbs } from './SideBarBreadcrumbs';
+export { SideBarBreadcrumbsItem } from './SideBarBreadcrumbsItem';
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx
index 6c73f0f8f2..eb47994b73 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx
@@ -1,11 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 import type { PressEvent } from 'react-aria';
 import type { ISideBarLayoutLocation } from '../types';
 
@@ -40,6 +34,8 @@ export interface ILayoutContext {
   setRightAsideRef: (value?: HTMLDivElement | null) => void;
   isRightAsideExpanded: boolean;
   setIsRightAsideExpanded: (value: boolean) => void;
+  breadcrumbsRef?: HTMLDivElement | null;
+  setBreadcrumbsRef: (value?: HTMLDivElement | null) => void;
 }
 export const LayoutContext = createContext<ILayoutContext>({
   isExpanded: true,
@@ -58,44 +54,16 @@ export const LayoutContext = createContext<ILayoutContext>({
   setIsRightAsideExpanded: () => {},
 });
 
-export interface IuseLayoutProps extends ILayoutContext {}
-
-export const useLayout = (
-  props?: Pick<ILayoutContext, 'appContext' | 'breadCrumbs'>,
-): IuseLayoutProps => {
-  const context = useContext(LayoutContext);
-
-  useEffect(() => {
-    if (!props) return;
-
-    if (props.appContext?.label !== context.appContext?.label) {
-      context.setAppContext(props.appContext);
-    }
-
-    //check if the content of the breadcrumbs has changed
-    const breadCrumbsHasChanged = props.breadCrumbs.reduce((acc, val, idx) => {
-      const oldVal = context.breadCrumbs[idx];
-      if (val.url !== oldVal?.url || val.label !== oldVal.label) return true;
-
-      return acc;
-    }, false);
-
-    if (
-      props.breadCrumbs.length !== context.breadCrumbs.length ||
-      breadCrumbsHasChanged
-    ) {
-      context.setBreadCrumbs(props.breadCrumbs);
-    }
-  }, [props?.appContext, props?.breadCrumbs]);
-
-  return { ...context };
-};
+export const useLayout = () => useContext(LayoutContext);
 
 export interface ILayoutProvider extends PropsWithChildren {}
 
 export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
   const [rightAsideRef, setRightAsideRefState] =
     useState<HTMLDivElement | null>(null);
+
+  const [breadcrumbsRef, setBreadcrumbsRefState] =
+    useState<HTMLDivElement | null>(null);
   const [isRightAsideExpanded, setIsRightAsideExpanded] = useState(false);
   const [rightAsideTitle, setRightAsideTitleState] = useState<
     string | undefined
@@ -155,6 +123,10 @@ export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
     setRightAsideRefState(value ? value : null);
   };
 
+  const setBreadcrumbsRef = (value?: HTMLDivElement | null) => {
+    setBreadcrumbsRefState(value ? value : null);
+  };
+
   const isActiveUrl = (url?: string) => {
     return !!url && url === location?.url;
   };
@@ -179,6 +151,8 @@ export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
         setRightAsideRef,
         isRightAsideExpanded,
         setIsRightAsideExpanded: handleSetRightAsideExpanded,
+        breadcrumbsRef,
+        setBreadcrumbsRef,
       }}
     >
       {children}
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
index 2100dc0cd4..1aee57e11c 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
@@ -15,9 +15,8 @@ import { Button, Heading, Stack } from './../../../components';
 import { useLayout } from './LayoutProvider';
 
 export const SideBarAside: FC<{
-  hasTopBanner?: boolean;
   location: ISideBarLayoutLocation;
-}> = ({ hasTopBanner, location }) => {
+}> = ({ location }) => {
   const {
     setIsRightAsideExpanded,
     isRightAsideExpanded,
@@ -51,7 +50,6 @@ export const SideBarAside: FC<{
       <aside
         className={asideWrapperClass({
           expanded: isRightAsideExpanded,
-          hasTopBanner,
         })}
       >
         <header className={asideHeaderClass}>
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
index f8cd37f7b9..68564ebef1 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
@@ -1,7 +1,7 @@
 import { MonoMenu, MonoMenuOpen } from '@kadena/kode-icons/system';
 import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { PressEvent } from 'react-aria';
 import {
   headerClass,
@@ -16,13 +16,13 @@ import { useLayout } from './LayoutProvider';
 import { KLogo } from './Logo/KLogo';
 
 interface IProps extends PropsWithChildren {
-  breadcrumbs?: ReactElement;
   minifiedLogo?: ReactElement;
   hasSidebar?: boolean;
 }
 
-export const SideBarHeader: FC<IProps> = ({ breadcrumbs, minifiedLogo }) => {
-  const { isExpanded, handleToggleExpand } = useLayout();
+export const SideBarHeader: FC<IProps> = ({ minifiedLogo }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { isExpanded, handleToggleExpand, setBreadcrumbsRef } = useLayout();
   const handleExpand = (e: PressEvent) => {
     if (handleToggleExpand) {
       handleToggleExpand(e);
@@ -33,6 +33,11 @@ export const SideBarHeader: FC<IProps> = ({ breadcrumbs, minifiedLogo }) => {
     return minifiedLogo ? minifiedLogo : <KLogo height={40} />;
   };
 
+  useEffect(() => {
+    if (!ref.current) return;
+    setBreadcrumbsRef(ref.current);
+  }, [ref.current]);
+
   return (
     <header className={headerWrapperClass}>
       <Stack
@@ -56,7 +61,7 @@ export const SideBarHeader: FC<IProps> = ({ breadcrumbs, minifiedLogo }) => {
             />
           </Stack>
         </Media>
-        <Stack style={{ gridArea: 'header-crumbs' }}>{breadcrumbs}</Stack>
+        <Stack ref={ref} style={{ gridArea: 'header-crumbs' }}></Stack>
       </Stack>
     </header>
   );
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx
index 8189c4f2d7..ddafa91306 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx
@@ -3,13 +3,13 @@ import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { listItemClass } from '../sidebar.css';
 import type { PressEvent } from './../../../components/Button';
-import { Button } from './../../../components/Button';
 import { Link } from './../../../components/Link';
 import { Media } from './../../../components/Media';
 import { breakpoints } from './../../../styles';
 import { useLayout } from './LayoutProvider';
 import type { ISideBarItemProps } from './SideBarItem';
 import { sidebartreeListClass } from './sidebartree.css';
+import { SideBarTreeWrapper } from './SideBarTreeWrapper';
 
 const LOCALSTORAGEKEY = 'sidemenu';
 
@@ -59,7 +59,7 @@ export const SideBarTree: FC<ISideBarTreeProps> = ({
     setTreeIsExpanded(innerExpanded);
   };
 
-  const Component = href ? Link : Button;
+  const Component = href ? Link : SideBarTreeWrapper;
 
   return (
     <li className={listItemClass}>
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeWrapper.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeWrapper.tsx
new file mode 100644
index 0000000000..e6b8fa20d9
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeWrapper.tsx
@@ -0,0 +1,21 @@
+import type { FC, ReactElement } from 'react';
+import React from 'react';
+import type { AriaButtonProps } from 'react-aria';
+import { sidebarTreeWrapperClass } from './sidebartree.css';
+
+export type ISideBarTreeWrapperProps = AriaButtonProps<'button'> & {
+  startVisual?: ReactElement;
+};
+
+export const SideBarTreeWrapper: FC<ISideBarTreeWrapperProps> = ({
+  children,
+  startVisual,
+  ...props
+}) => {
+  return (
+    <button {...props} className={sidebarTreeWrapperClass}>
+      {startVisual ?? startVisual}
+      {children}
+    </button>
+  );
+};
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/sidebartree.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/sidebartree.css.ts
index ee61e41555..86baec0a43 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/sidebartree.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/sidebartree.css.ts
@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { atoms, token } from './../../../styles';
+import { atoms, globalStyle, token } from './../../../styles';
 
 export const sidebartreeListClass = style([
   atoms({
@@ -40,3 +40,25 @@ export const sidebartreeItemClass = style([
     },
   },
 ]);
+
+export const sidebarTreeWrapperClass = style([
+  atoms({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+    border: 'none',
+    cursor: 'pointer',
+    color: 'text.gray.default',
+    paddingBlock: 'sm',
+    paddingInline: 'xs',
+    gap: 'md',
+  }),
+  {
+    backgroundColor: 'transparent',
+  },
+]);
+
+globalStyle(`${sidebarTreeWrapperClass} svg`, {
+  width: '12px',
+});
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
index 2026c9fe73..682a998f4e 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -52,6 +52,7 @@ export const menuBackdropClass = recipe({
 export const menuWrapperClass = recipe({
   base: [
     atoms({
+      position: 'fixed',
       flexDirection: 'column',
       flex: 1,
       gap: 'sm',
@@ -68,7 +69,6 @@ export const menuWrapperClass = recipe({
         willChange: 'transform',
         transition: 'transform .4s ease',
         transform: 'translateX(-100%)',
-        position: 'relative',
         gridArea: 'sidebarlayout-main',
         gridRow: '1/5',
         inset: 0,
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
index b29d5706b9..be8af71fbc 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
@@ -14,7 +14,6 @@ export const layoutWrapperClass = recipe({
     {
       variants: {
         variant: 'default',
-        hasTopBanner: false,
       },
       style: [
         responsiveStyle({
@@ -49,15 +48,13 @@ export const layoutWrapperClass = recipe({
     {
       variants: {
         variant: 'default',
-        hasTopBanner: true,
       },
       style: [
         responsiveStyle({
           xs: {
             gridTemplateColumns: 'auto',
-            gridTemplateRows: `minMax(0px, 60px) ${minHeaderHeight} 1fr 60px`,
+            gridTemplateRows: `${minHeaderHeight} 1fr 60px`,
             gridTemplateAreas: `
-            "sidebarlayout-topbanner"
             "sidebarlayout-header"
             "sidebarlayout-main"
             "sidebarlayout-footer"
@@ -65,9 +62,8 @@ export const layoutWrapperClass = recipe({
           },
           md: {
             gridTemplateColumns: '45px auto',
-            gridTemplateRows: `minMax(0px, 60px) ${minHeaderHeight} 1fr`,
+            gridTemplateRows: `${minHeaderHeight} 1fr`,
             gridTemplateAreas: `
-            "sidebarlayout-topbanner sidebarlayout-topbanner sidebarlayout-topbanner"
             "sidebarlayout-sidebar sidebarlayout-header sidebarlayout-header"
             "sidebarlayout-sidebar sidebarlayout-main sidebarlayout-aside"
           `,
@@ -80,17 +76,12 @@ export const layoutWrapperClass = recipe({
     },
   ],
   variants: {
-    hasTopBanner: {
-      true: {},
-      false: {},
-    },
     variant: {
       full: [
         style({
           gridTemplateColumns: 'auto',
-          gridTemplateRows: `60px ${minHeaderHeight} 1fr`,
+          gridTemplateRows: `${minHeaderHeight} 1fr`,
           gridTemplateAreas: `
-            "sidebarlayout-topbanner"
             "sidebarlayout-header"
             "sidebarlayout-main"
           `,
@@ -120,7 +111,6 @@ export const bodyWrapperClass = style({
 
 export const mainClass = recipe({
   base: {
-    overflowY: 'scroll',
     gridArea: 'sidebarlayout-main',
   },
   variants: {
diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts
index beafa604ba..417e6fbb62 100644
--- a/packages/libs/kode-ui/src/patterns/index.ts
+++ b/packages/libs/kode-ui/src/patterns/index.ts
@@ -42,4 +42,9 @@ export {
   RightAsideHeader,
 } from './SideBarLayout/components/RightAside';
 
+export {
+  SideBarBreadcrumbs,
+  SideBarBreadcrumbsItem,
+} from './SideBarLayout/components/Breadcrumbs';
+
 export type { iRightAsideHeader } from './SideBarLayout/components/RightAside';
diff --git a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
index 704212fa95..9f8edf719d 100644
--- a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
@@ -4926,6 +4926,42 @@ export const tokens = createThemeContract({
           },
         },
       },
+      layout: {
+        content: {
+          /**
+           * @light  `"33.75rem"`
+           * @dark  `"33.75rem"`
+           */
+          minWidth: '',
+          /**
+           * @light  `"42.5rem"`
+           * @dark  `"42.5rem"`
+           */
+          maxWidth: '',
+        },
+      },
+      effect: {
+        shadow: {
+          /**
+           * This is the shadow 1 description
+           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           */
+          level1: '',
+          /**
+           * This is the shadow 2 description
+           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           */
+          level2: '',
+          /**
+           * This is the shadow 3 description updated
+           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           */
+          level3: '',
+        },
+      },
       icon: {
         size: {
           /**
@@ -4965,42 +5001,6 @@ export const tokens = createThemeContract({
           xxl: '',
         },
       },
-      effect: {
-        shadow: {
-          /**
-           * This is the shadow 1 description
-           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           */
-          level1: '',
-          /**
-           * This is the shadow 2 description
-           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           */
-          level2: '',
-          /**
-           * This is the shadow 3 description updated
-           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           */
-          level3: '',
-        },
-      },
-      layout: {
-        content: {
-          /**
-           * @light  `"33.75rem"`
-           * @dark  `"33.75rem"`
-           */
-          minWidth: '',
-          /**
-           * @light  `"42.5rem"`
-           * @dark  `"42.5rem"`
-           */
-          maxWidth: '',
-        },
-      },
       typography: {
         family: {
           /**
diff --git a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
index f5fe630abc..f3b03e8bf5 100644
--- a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
@@ -1286,15 +1286,10 @@ export const darkThemeValues = {
           },
         },
       },
-      icon: {
-        size: {
-          xxs: tokens.kda.foundation.size.n3,
-          xs: tokens.kda.foundation.size.n4,
-          sm: tokens.kda.foundation.size.n5,
-          base: tokens.kda.foundation.size.n6,
-          lg: tokens.kda.foundation.size.n8,
-          xl: tokens.kda.foundation.size.n10,
-          xxl: tokens.kda.foundation.size.n16,
+      layout: {
+        content: {
+          minWidth: '33.75rem',
+          maxWidth: '42.5rem',
         },
       },
       effect: {
@@ -1304,10 +1299,15 @@ export const darkThemeValues = {
           level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
         },
       },
-      layout: {
-        content: {
-          minWidth: '33.75rem',
-          maxWidth: '42.5rem',
+      icon: {
+        size: {
+          xxs: tokens.kda.foundation.size.n3,
+          xs: tokens.kda.foundation.size.n4,
+          sm: tokens.kda.foundation.size.n5,
+          base: tokens.kda.foundation.size.n6,
+          lg: tokens.kda.foundation.size.n8,
+          xl: tokens.kda.foundation.size.n10,
+          xxl: tokens.kda.foundation.size.n16,
         },
       },
       typography: {
diff --git a/packages/libs/kode-ui/src/styles/tokens/light.css.ts b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
index 9c994fe494..1ae38636fd 100644
--- a/packages/libs/kode-ui/src/styles/tokens/light.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
@@ -1286,15 +1286,10 @@ export const lightThemeValues = {
           },
         },
       },
-      icon: {
-        size: {
-          xxs: tokens.kda.foundation.size.n3,
-          xs: tokens.kda.foundation.size.n4,
-          sm: tokens.kda.foundation.size.n5,
-          base: tokens.kda.foundation.size.n6,
-          lg: tokens.kda.foundation.size.n8,
-          xl: tokens.kda.foundation.size.n10,
-          xxl: tokens.kda.foundation.size.n16,
+      layout: {
+        content: {
+          minWidth: '33.75rem',
+          maxWidth: '42.5rem',
         },
       },
       effect: {
@@ -1304,10 +1299,15 @@ export const lightThemeValues = {
           level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
         },
       },
-      layout: {
-        content: {
-          minWidth: '33.75rem',
-          maxWidth: '42.5rem',
+      icon: {
+        size: {
+          xxs: tokens.kda.foundation.size.n3,
+          xs: tokens.kda.foundation.size.n4,
+          sm: tokens.kda.foundation.size.n5,
+          base: tokens.kda.foundation.size.n6,
+          lg: tokens.kda.foundation.size.n8,
+          xl: tokens.kda.foundation.size.n10,
+          xxl: tokens.kda.foundation.size.n16,
         },
       },
       typography: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c628e39f1..967403e1ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2521,6 +2521,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+      react-intersection-observer:
+        specifier: ^9.10.3
+        version: 9.10.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-stately:
         specifier: ^3.29.1
         version: 3.31.1(react@18.3.1)
@@ -25454,69 +25457,73 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 1.25.1(@opentelemetry/api@1.9.0)
 
-  '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
       '@parcel/graph': 3.2.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.11)
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/logger': 2.12.0
       '@parcel/utils': 2.12.0
       lmdb: 2.8.5
+    transitivePeerDependencies:
+      - '@swc/helpers'
 
   '@parcel/codeframe@2.12.0':
     dependencies:
       chalk: 4.1.2
 
-  '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
   '@parcel/config-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5)':
     dependencies:
-      '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/core': 2.12.0(@swc/helpers@0.5.11)
-      '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5)
-      '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5)
+      '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/optimizer-swc': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
-      '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/transformer-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
     transitivePeerDependencies:
       - '@swc/helpers'
       - cssnano
@@ -25531,14 +25538,14 @@ snapshots:
   '@parcel/core@2.12.0(@swc/helpers@0.5.11)':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/diagnostic': 2.12.0
       '@parcel/events': 2.12.0
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/graph': 3.2.0
       '@parcel/logger': 2.12.0
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/profiler': 2.12.0
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
@@ -25589,13 +25596,14 @@ snapshots:
     dependencies:
       chalk: 4.1.2
 
-  '@parcel/namer-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/namer-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
   '@parcel/node-resolver-core@3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
     dependencies:
@@ -25609,10 +25617,10 @@ snapshots:
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.23.1
@@ -25620,16 +25628,18 @@ snapshots:
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5)':
+  '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(terser@5.31.1)(typescript@5.4.5)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       htmlnano: 2.1.1(cssnano@7.0.3(postcss@8.4.39))(postcss@8.4.39)(relateurl@0.2.7)(svgo@2.8.0)(terser@5.31.1)(typescript@5.4.5)
       nullthrows: 1.1.1
       posthtml: 0.16.6
       svgo: 2.8.0
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
       - cssnano
       - postcss
       - purgecss
@@ -25639,28 +25649,31 @@ snapshots:
       - typescript
       - uncss
 
-  '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.11)
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
       '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+    transitivePeerDependencies:
+      - '@swc/helpers'
 
-  '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       svgo: 2.8.0
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
   '@parcel/optimizer-swc@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       '@swc/core': 1.3.107(@swc/helpers@0.5.11)
@@ -25684,31 +25697,33 @@ snapshots:
     transitivePeerDependencies:
       - '@swc/helpers'
 
-  '@parcel/packager-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/packager-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       lightningcss: 1.25.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/packager-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/packager-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/packager-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/packager-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
@@ -25717,33 +25732,38 @@ snapshots:
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       posthtml: 0.16.6
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/plugin@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/plugin@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
   '@parcel/profiler@2.12.0':
     dependencies:
@@ -25751,71 +25771,79 @@ snapshots:
       '@parcel/events': 2.12.0
       chrome-trace-event: 1.0.4
 
-  '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       chalk: 4.1.2
       term-size: 2.2.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       chrome-trace-event: 1.0.4
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       react-error-overlay: 6.0.9
       react-refresh: 0.9.0
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
   '@parcel/rust@2.12.0': {}
 
@@ -25823,10 +25851,10 @@ snapshots:
     dependencies:
       detect-libc: 1.0.3
 
-  '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.23.1
@@ -25835,11 +25863,12 @@ snapshots:
       semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.23.1
@@ -25847,11 +25876,12 @@ snapshots:
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/rust': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -25861,20 +25891,23 @@ snapshots:
       srcset: 4.0.0
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.11)
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       nullthrows: 1.1.1
+    transitivePeerDependencies:
+      - '@swc/helpers'
 
   '@parcel/transformer-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.11)
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
@@ -25885,17 +25918,18 @@ snapshots:
       regenerator-runtime: 0.13.11
       semver: 7.6.3
 
-  '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       json5: 2.2.3
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
       clone: 2.1.2
@@ -25904,10 +25938,11 @@ snapshots:
       semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -25916,25 +25951,28 @@ snapshots:
       semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       react-refresh: 0.9.0
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
-  '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))':
+  '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/rust': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -25943,10 +25981,11 @@ snapshots:
       semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
   '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)':
     dependencies:
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/diagnostic': 2.12.0
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
@@ -40189,9 +40228,9 @@ snapshots:
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/logger': 2.12.0
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
-      '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
-      '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))
+      '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
+      '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.11))(@swc/helpers@0.5.11)
       '@parcel/utils': 2.12.0
       chalk: 4.1.2
       commander: 7.2.0