From bab4fb1fff4264d4453ef18815c8a7b62f09d54f Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Wed, 8 Jan 2025 17:29:02 +0900
Subject: [PATCH] Sunset remain chakra components except layout

---
 packages/keychain/package.json                |   1 +
 .../keychain/src/components/Animation.tsx     |  27 ----
 .../ControllerErrorAlert.stories.tsx          |  27 +++-
 .../keychain/src/components/ErrorAlert.tsx    |  81 +++++-------
 .../keychain/src/components/ErrorBoundary.tsx |  34 +----
 packages/keychain/src/components/Fees.tsx     |  36 ++---
 .../Funding/AmountSelection.stories.tsx       |  17 +++
 .../components/Funding/AmountSelection.tsx    |  31 +++--
 .../components/Funding/DepositEth.stories.tsx |  27 ++++
 .../src/components/Funding/DepositEth.tsx     | 110 +++++++---------
 .../Funding/PurchaseCredits.stories.tsx       |  21 +++
 .../components/Funding/PurchaseCredits.tsx    |  11 +-
 .../components/Settings/Delegate.stories.tsx  |  16 +++
 .../src/components/Settings/Delegate.tsx      |  21 ++-
 .../components/Settings/Recovery.stories.tsx  |  16 +++
 .../src/components/Settings/Recovery.tsx      |  29 ++---
 .../src/components/SignMessage.stories.tsx    |  83 ++++++++++++
 .../keychain/src/components/SignMessage.tsx   | 123 +++++++-----------
 packages/keychain/src/components/app.tsx      |   5 +-
 .../connect/SessionConsent.stories.tsx        |  34 +++++
 .../src/components/connect/SessionConsent.tsx |  26 ++--
 .../connect/create/CreateController.tsx       |  19 ++-
 .../components/connect/create/StatusTray.tsx  |  71 ++++------
 packages/keychain/src/components/index.ts     |   1 -
 .../layout/Container/Header/index.tsx         |   5 +-
 .../keychain/src/components/slot/consent.tsx  |   9 +-
 .../keychain/src/components/slot/index.tsx    |   3 +
 pnpm-lock.yaml                                |   9 +-
 28 files changed, 489 insertions(+), 404 deletions(-)
 delete mode 100644 packages/keychain/src/components/Animation.tsx
 create mode 100644 packages/keychain/src/components/Funding/AmountSelection.stories.tsx
 create mode 100644 packages/keychain/src/components/Funding/DepositEth.stories.tsx
 create mode 100644 packages/keychain/src/components/Funding/PurchaseCredits.stories.tsx
 create mode 100644 packages/keychain/src/components/Settings/Delegate.stories.tsx
 create mode 100644 packages/keychain/src/components/Settings/Recovery.stories.tsx
 create mode 100644 packages/keychain/src/components/SignMessage.stories.tsx
 create mode 100644 packages/keychain/src/components/connect/SessionConsent.stories.tsx

diff --git a/packages/keychain/package.json b/packages/keychain/package.json
index 2a17360cd..bfcc6d6e8 100644
--- a/packages/keychain/package.json
+++ b/packages/keychain/package.json
@@ -83,6 +83,7 @@
     "jsdom": "^25.0.1",
     "playwright": "^1.47.1",
     "postcss": "^8.4.35",
+    "postcss-import": "^16.1.0",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "start-server-and-test": "^2.0.9",
diff --git a/packages/keychain/src/components/Animation.tsx b/packages/keychain/src/components/Animation.tsx
deleted file mode 100644
index 2e9a2be2e..000000000
--- a/packages/keychain/src/components/Animation.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Box, Flex } from "@chakra-ui/react";
-import { ReactElement } from "react";
-
-export function FullPageAnimation({
-  show,
-  View,
-}: {
-  show: boolean;
-  View: ReactElement;
-}) {
-  return (
-    <Flex
-      display={show ? "flex" : "none"}
-      position="fixed"
-      align="center"
-      justify="center"
-      top="0"
-      left="0"
-      h="100vh"
-      w="100vw"
-      bg="solid.bg"
-      zIndex="overlay"
-    >
-      <Box w={["full", "full", "400px"]}>{View}</Box>
-    </Flex>
-  );
-}
diff --git a/packages/keychain/src/components/ControllerErrorAlert.stories.tsx b/packages/keychain/src/components/ControllerErrorAlert.stories.tsx
index c2d4414c2..6bb923615 100644
--- a/packages/keychain/src/components/ControllerErrorAlert.stories.tsx
+++ b/packages/keychain/src/components/ControllerErrorAlert.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ControllerErrorAlert as CtrlErrAlert } from "./ErrorAlert";
-import { VStack } from "@chakra-ui/react";
 import { ErrorCode } from "@cartridge/account-wasm/controller";
 import { starknetTransactionExecutionErrorTestCases } from "@/utils/errors";
 
@@ -17,7 +16,7 @@ export const All: Story = {};
 
 function ControllerErrorAlert() {
   return (
-    <VStack>
+    <div className="flex flex-col gap-4">
       <CtrlErrAlert
         error={{ code: ErrorCode.SignError, message: "blah blah blah..." }}
       />
@@ -37,6 +36,28 @@ function ControllerErrorAlert() {
           }}
         />
       ))}
-    </VStack>
+
+      <CtrlErrAlert
+        error={{
+          code: ErrorCode.StarknetTransactionExecutionError,
+          data: "Invalid json format",
+          message: "",
+        }}
+      />
+      <CtrlErrAlert
+        error={{
+          code: ErrorCode.StarknetValidationFailure,
+          data: "Validation failed",
+          message: "",
+        }}
+      />
+      <CtrlErrAlert
+        error={{
+          code: ErrorCode.StarknetValidationFailure,
+          data: "Max fee (200) exceeds balance (100)",
+          message: "",
+        }}
+      />
+    </div>
   );
 }
diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
index ce4869ba1..aad025c27 100644
--- a/packages/keychain/src/components/ErrorAlert.tsx
+++ b/packages/keychain/src/components/ErrorAlert.tsx
@@ -9,8 +9,8 @@ import {
   AccordionTrigger,
   AccordionContent,
   cn,
+  Separator,
 } from "@cartridge/ui-next";
-import { Text, HStack, VStack, Divider } from "@chakra-ui/react";
 import React, {
   ReactElement,
   useCallback,
@@ -269,27 +269,25 @@ export function ControllerErrorAlert({
         description = <StackTraceDisplay stackTrace={parsedError.stack} />;
       } catch {
         title = "Execution error";
-        description = <Text color="inherit">{error.data}</Text>;
+        description = error.data;
       }
       break;
     case ErrorCode.StarknetValidationFailure: {
       const parsedError = parseValidationError(error);
       title = parsedError.summary;
       copyText = parsedError.raw;
-      description = (
-        <VStack align="start" spacing={1} w="full">
-          {Object.entries(parsedError.details).map(([key, value]) => (
-            <Text
-              key={key}
-              wordBreak="break-all"
-              color="inherit"
-              textAlign="left"
-            >
-              {key}: {typeof value === "bigint" ? value.toString() : value}
-            </Text>
-          ))}
-        </VStack>
-      );
+      description =
+        typeof parsedError.details === "string" ? (
+          parsedError.details
+        ) : (
+          <div className="flex flex-col gap-px">
+            {Object.entries(parsedError.details).map(([key, value]) => (
+              <div key={key}>
+                {key}: {typeof value === "bigint" ? value.toString() : value}
+              </div>
+            ))}
+          </div>
+        );
       variant = "warning";
       isExpanded = true;
       break;
@@ -330,27 +328,17 @@ function StackTraceDisplay({
   );
 
   return (
-    <VStack align="start" spacing={2} w="full">
+    <div className="flex flex-col gap-2">
       {stackTrace.map((trace, i, arr) => (
         <React.Fragment key={i}>
-          <VStack align="start" spacing={1} w="full">
+          <div className="flex flex-col gap-1">
             {Object.entries(trace).map(
               ([key, value]) =>
                 value && (
-                  <HStack
-                    key={key}
-                    w="full"
-                    fontSize="xs"
-                    alignItems="flex-start"
-                  >
-                    <Text
-                      color="opacityBlack.700"
-                      textTransform="capitalize"
-                      w="80px"
-                      flexShrink={0}
-                    >
+                  <div key={key} className="flex items-center gap-2">
+                    <div className="w-20 flex-shrink-0 capitalize text-[black]/50">
                       {key}
-                    </Text>
+                    </div>
                     {key === "address" || key === "class" ? (
                       <Link
                         to={getExplorerUrl(key, value as string)}
@@ -362,37 +350,28 @@ function StackTraceDisplay({
                         })}
                       </Link>
                     ) : key === "selector" ? (
-                      <Text
-                        wordBreak="break-all"
-                        color="inherit"
-                        textAlign="left"
-                      >
+                      <div className="break-all text-left">
                         {formatAddress(value as string, {
                           size: "sm",
                         })}
-                      </Text>
+                      </div>
                     ) : (
-                      <VStack align="start" spacing={1} w="full">
-                        {(value as string[]).map((line, index) => (
-                          <Text
-                            key={index}
-                            wordBreak="break-all"
-                            color="inherit"
-                            textAlign="left"
-                          >
+                      <div className="flex flex-col gap-1">
+                        {(value as string[]).map((line, i) => (
+                          <div key={i} className="break-all text-left">
                             {line}
-                          </Text>
+                          </div>
                         ))}
-                      </VStack>
+                      </div>
                     )}
-                  </HStack>
+                  </div>
                 ),
             )}
-          </VStack>
-          {i !== arr.length - 1 && <Divider borderColor="darkGray.100" />}
+          </div>
+          {i !== arr.length - 1 && <Separator />}
         </React.Fragment>
       ))}
-    </VStack>
+    </div>
   );
 }
 
diff --git a/packages/keychain/src/components/ErrorBoundary.tsx b/packages/keychain/src/components/ErrorBoundary.tsx
index 34464b2e6..11aa73462 100644
--- a/packages/keychain/src/components/ErrorBoundary.tsx
+++ b/packages/keychain/src/components/ErrorBoundary.tsx
@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, useEffect } from "react";
 import { Container, Content, Footer } from "./layout";
 import { AlertIcon, ExternalIcon, Button } from "@cartridge/ui-next";
-import { HStack, Text } from "@chakra-ui/react";
 import { useConnection } from "@/hooks/connection";
 import { CARTRIDGE_DISCORD_LINK } from "@/const";
 import { usePostHog } from "posthog-js/react";
@@ -48,33 +47,12 @@ export function ErrorPage({ error }: { error: Error }) {
       icon={<AlertIcon size="lg" />}
     >
       <Content gap={4}>
-        <HStack
-          bg="solid.primary"
-          borderColor="solid.secondary"
-          borderWidth={1}
-          w="full"
-          px={4}
-          py={6}
-          borderRadius="base"
-        >
-          <Text w="full" fontSize="sm">
-            {error.message}
-          </Text>
-        </HStack>
+        <div className="flex w-full px-4 py-6 bg-secondary border border-quaternary rounded">
+          <p className="w-full text-sm">{error.message}</p>
+        </div>
 
-        <HStack
-          bg="solid.primary"
-          borderColor="solid.secondary"
-          borderWidth={1}
-          w="full"
-          px={4}
-          py={6}
-          borderRadius="base"
-          justifyContent="space-between"
-        >
-          <Text fontSize="sm" fontWeight={600}>
-            Get help
-          </Text>
+        <div className="flex items-center justify-between w-full px-4 py-6 bg-secondary border border-quaternary rounded">
+          <p className="text-sm font-semibold">Get help</p>
 
           <Link
             to={CARTRIDGE_DISCORD_LINK}
@@ -84,7 +62,7 @@ export function ErrorPage({ error }: { error: Error }) {
             <div>Cartridge Discord</div>
             <ExternalIcon size="sm" />
           </Link>
-        </HStack>
+        </div>
       </Content>
 
       <Footer>
diff --git a/packages/keychain/src/components/Fees.tsx b/packages/keychain/src/components/Fees.tsx
index 1eade6705..1542108a9 100644
--- a/packages/keychain/src/components/Fees.tsx
+++ b/packages/keychain/src/components/Fees.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { HStack, Spacer, Text, VStack } from "@chakra-ui/react";
 import { formatUnits } from "viem";
 import { useChainId } from "@/hooks/connection";
 import { ErrorAlertIcon, EthereumIcon, Spinner } from "@cartridge/ui-next";
@@ -29,13 +28,7 @@ export function Fees({
   }, [chainId, maxFee]);
 
   return (
-    <VStack
-      w="full"
-      overflow="hidden"
-      borderRadius="base"
-      spacing="1px"
-      align="flex-start"
-    >
+    <div className="w-full overflow-hidden rounded">
       {formattedFee ? (
         <LineItem
           name="Network Fee"
@@ -46,7 +39,7 @@ export function Fees({
       ) : (
         <LineItem name="Calculating Fees" isLoading />
       )}
-    </VStack>
+    </div>
   );
 }
 
@@ -63,29 +56,20 @@ function LineItem({
   variant?: Variant;
 }) {
   return (
-    <HStack w="full" h="40px" p={4} bg="solid.primary" color="text.secondary">
-      <Text
-        fontSize="xs"
-        color="inherit"
-        textTransform="uppercase"
-        fontWeight="bold"
-      >
-        {name}
-      </Text>
-      <Spacer />
+    <div className="flex items-center w-full h-10 p-4 bg-secondary text-muted-foreground">
+      <p className="text-xs uppercase font-bold">{name}</p>
+      <div className="flex-1" />
 
       {isLoading ? (
         <Spinner />
       ) : (
-        <HStack gap={0}>
+        <div className="flex items-center gap-0">
           {variant && <ErrorAlertIcon variant={variant} />}
-          {value !== "FREE" && (
-            <EthereumIcon className="text-secondary-foreground" />
-          )}
-          <Text fontSize={13}>{value}</Text>
-        </HStack>
+          {value !== "FREE" && <EthereumIcon className="text-foreground" />}
+          <p className="text-sm">{value}</p>
+        </div>
       )}
-    </HStack>
+    </div>
   );
 }
 
diff --git a/packages/keychain/src/components/Funding/AmountSelection.stories.tsx b/packages/keychain/src/components/Funding/AmountSelection.stories.tsx
new file mode 100644
index 000000000..9be61fd3c
--- /dev/null
+++ b/packages/keychain/src/components/Funding/AmountSelection.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { AmountSelection } from "./AmountSelection";
+
+const meta = {
+  component: AmountSelection,
+  args: {
+    amount: 1,
+    enableCustom: true,
+  },
+} satisfies Meta<typeof AmountSelection>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/keychain/src/components/Funding/AmountSelection.tsx b/packages/keychain/src/components/Funding/AmountSelection.tsx
index 5d7b6ac84..b348c600d 100644
--- a/packages/keychain/src/components/Funding/AmountSelection.tsx
+++ b/packages/keychain/src/components/Funding/AmountSelection.tsx
@@ -1,5 +1,10 @@
-import { DollarIcon, Button, cn, useDisclosure } from "@cartridge/ui-next";
-import { HStack, Input, Spacer, Text, VStack } from "@chakra-ui/react";
+import {
+  DollarIcon,
+  Button,
+  cn,
+  useDisclosure,
+  Input,
+} from "@cartridge/ui-next";
 import { useState } from "react";
 
 export const DEFAULT_AMOUNT = 5;
@@ -24,18 +29,12 @@ export function AmountSelection({
   const [custom, setCustom] = useState<boolean>(false);
 
   return (
-    <HStack>
-      <Text
-        textTransform="uppercase"
-        fontSize="xs"
-        fontWeight="semibold"
-        color="text.secondary"
-      >
+    <div className="flex items-center justify-between">
+      <div className="text-xs font-semibold uppercase text-quaternary-foreground">
         Amount
-      </Text>
-      <Spacer />
-      <VStack>
-        <HStack spacing="8px">
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
           {AMOUNTS.map((value) => (
             <Button
               key={value}
@@ -72,7 +71,7 @@ export function AmountSelection({
               Custom
             </Button>
           )}
-        </HStack>
+        </div>
         {isOpen && (
           <div className="flex items-center w-full relative">
             <Input
@@ -90,7 +89,7 @@ export function AmountSelection({
             <DollarIcon size="xs" className="absolute top-3 left-3" />
           </div>
         )}
-      </VStack>
-    </HStack>
+      </div>
+    </div>
   );
 }
diff --git a/packages/keychain/src/components/Funding/DepositEth.stories.tsx b/packages/keychain/src/components/Funding/DepositEth.stories.tsx
new file mode 100644
index 000000000..d2ea5203d
--- /dev/null
+++ b/packages/keychain/src/components/Funding/DepositEth.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DepositEth } from "./DepositEth";
+
+const meta = {
+  component: DepositEth,
+  parameters: {
+    connection: {
+      controller: {
+        address:
+          "0x0000000000000000000000000000000000000000000000000000000000000000",
+        username: () => "user",
+      },
+    },
+  },
+  args: {
+    onBack: () => {
+      console.log("onBack");
+    },
+  },
+} satisfies Meta<typeof DepositEth>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/keychain/src/components/Funding/DepositEth.tsx b/packages/keychain/src/components/Funding/DepositEth.tsx
index 6a14fca43..eb055e030 100644
--- a/packages/keychain/src/components/Funding/DepositEth.tsx
+++ b/packages/keychain/src/components/Funding/DepositEth.tsx
@@ -1,5 +1,4 @@
 import { Container, Content, Footer } from "@/components/layout";
-import { HStack, Text, VStack, Divider } from "@chakra-ui/react";
 import { PropsWithChildren, useCallback, useState } from "react";
 import { mainnet, sepolia } from "@starknet-react/chains";
 import {
@@ -26,6 +25,7 @@ import {
   StarknetColorIcon,
   Button,
   CopyAddress,
+  Separator,
 } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { ErrorAlert } from "../ErrorAlert";
@@ -165,7 +165,7 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
           lockSelection={isLoading}
           onChange={onAmountChagned}
         />
-        <Divider my="5px" borderColor="darkGray.900" />
+        <Separator className="bg-spacer m-1" />
         {error && (
           <ErrorAlert
             title="Account deployment error"
@@ -181,65 +181,53 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
               }
 
               return (
-                <>
-                  <VStack spacing="20px">
-                    <HStack w="full">
-                      {connectors
-                        .filter((c) => ["argentX", "braavos"].includes(c.id))
-                        .map((c) => (
-                          <Button
-                            key={c.id}
-                            onClick={() => onConnect(c)}
-                            className="flex-1"
-                          >
-                            {(() => {
-                              switch (c.id) {
-                                case "argentX":
-                                  return <ArgentIcon size="sm" />;
-                                case "braavos":
-                                  return <BraavosIcon size="sm" />;
-                                default:
-                                  return null;
-                              }
-                            })()}
-                            {c.name}
-                          </Button>
-                        ))}
-                    </HStack>
-                    {connectors.length !== 0 && (
-                      <Text
-                        color="text.secondary"
-                        fontSize="11"
-                        fontWeight="bold"
-                      >
-                        OR
-                      </Text>
-                    )}
-                    <Button
-                      className="w-full"
-                      variant="secondary"
-                      onClick={onCopy}
-                    >
-                      <CopyIcon size="sm" /> copy address
-                    </Button>
-                    <HStack>
-                      <Text color="text.secondary" fontSize="14px">
-                        and send funds to it on
-                      </Text>
-                      <HStack
-                        border="1px"
-                        borderRadius="5px"
-                        p="5px"
-                        borderColor="darkGray.700"
-                      >
-                        <StarknetColorIcon />{" "}
-                        <Text fontSize="12px" fontWeight="bold">
-                          STARKNET MAINNET
-                        </Text>
-                      </HStack>
-                    </HStack>
-                  </VStack>
-                </>
+                <div className="flex flex-col items-center gap-4">
+                  <div className="w-full flex gap-4">
+                    {connectors
+                      .filter((c) => ["argentX", "braavos"].includes(c.id))
+                      .map((c) => (
+                        <Button
+                          key={c.id}
+                          onClick={() => onConnect(c)}
+                          className="flex-1"
+                        >
+                          {(() => {
+                            switch (c.id) {
+                              case "argentX":
+                                return <ArgentIcon size="sm" />;
+                              case "braavos":
+                                return <BraavosIcon size="sm" />;
+                              default:
+                                return null;
+                            }
+                          })()}
+                          {c.name}
+                        </Button>
+                      ))}
+                  </div>
+
+                  {connectors.length !== 0 && (
+                    <div className="text-xs text-quaternary-foreground font-bold">
+                      OR
+                    </div>
+                  )}
+                  <Button
+                    className="w-full"
+                    variant="secondary"
+                    onClick={onCopy}
+                  >
+                    <CopyIcon size="sm" /> copy address
+                  </Button>
+                  <div className="flex items-center gap-2">
+                    <div className="text-sm text-quaternary-foreground">
+                      and send funds to it on
+                    </div>
+                    <div className="flex items-center gap-2 border border-secondary rounded-md p-1">
+                      <StarknetColorIcon />{" "}
+                      <div className="text-sm font-bold">STARKNET MAINNET</div>
+                    </div>
+                  </div>
+                </div>
               );
             case "fund":
               return (
diff --git a/packages/keychain/src/components/Funding/PurchaseCredits.stories.tsx b/packages/keychain/src/components/Funding/PurchaseCredits.stories.tsx
new file mode 100644
index 000000000..74f61566c
--- /dev/null
+++ b/packages/keychain/src/components/Funding/PurchaseCredits.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PurchaseCredits } from "./PurchaseCredits";
+
+const meta = {
+  component: PurchaseCredits,
+  parameters: {
+    connection: {
+      controller: {
+        address:
+          "0x0000000000000000000000000000000000000000000000000000000000000000",
+        username: () => "user",
+      },
+    },
+  },
+} satisfies Meta<typeof PurchaseCredits>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/keychain/src/components/Funding/PurchaseCredits.tsx b/packages/keychain/src/components/Funding/PurchaseCredits.tsx
index 9ff58a6ca..c5ef1be2c 100644
--- a/packages/keychain/src/components/Funding/PurchaseCredits.tsx
+++ b/packages/keychain/src/components/Funding/PurchaseCredits.tsx
@@ -1,7 +1,12 @@
 import { Container, Content, Footer } from "@/components/layout";
-import { Divider } from "@chakra-ui/react";
 import { useCallback, useMemo, useState } from "react";
-import { CheckIcon, CoinsIcon, Button, CopyAddress } from "@cartridge/ui-next";
+import {
+  CheckIcon,
+  CoinsIcon,
+  Button,
+  CopyAddress,
+  Separator,
+} from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { AmountSelection, DEFAULT_AMOUNT } from "./AmountSelection";
 import { ErrorAlert } from "@/components/ErrorAlert";
@@ -158,7 +163,7 @@ export function PurchaseCredits({ onBack }: PurchaseCreditsProps) {
               onChange={onAmountChanged}
               lockSelection={isLoading}
             />
-            <Divider my="5px" borderColor="darkGray.900" />
+            <Separator className="bg-spacer m-1" />
 
             <Button isLoading={isLoading} onClick={createPaymentIntent}>
               <CoinsIcon variant="solid" size="sm" />
diff --git a/packages/keychain/src/components/Settings/Delegate.stories.tsx b/packages/keychain/src/components/Settings/Delegate.stories.tsx
new file mode 100644
index 000000000..26dc32cd2
--- /dev/null
+++ b/packages/keychain/src/components/Settings/Delegate.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Delegate } from "./Delegate";
+
+const meta = {
+  component: Delegate,
+  args: {
+    onBack: () => {},
+  },
+} satisfies Meta<typeof Delegate>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/keychain/src/components/Settings/Delegate.tsx b/packages/keychain/src/components/Settings/Delegate.tsx
index 8f2cdc276..4d05f0984 100644
--- a/packages/keychain/src/components/Settings/Delegate.tsx
+++ b/packages/keychain/src/components/Settings/Delegate.tsx
@@ -1,5 +1,4 @@
 import { AlertIcon, Button, Input } from "@cartridge/ui-next";
-import { VStack, Text, HStack } from "@chakra-ui/react";
 import { Container, Content, Footer } from "@/components/layout";
 import { useConnection } from "@/hooks/connection";
 import { useCallback, useEffect, useState } from "react";
@@ -44,26 +43,26 @@ export function Delegate({ onBack }: { onBack: () => void }) {
       onBack={() => onBack()}
     >
       <Content>
-        <VStack w="full" h="full" justifyContent="space-between" gap={6}>
-          <Text color="text.secondary" fontSize="sm" align="center">
+        <div className="flex flex-col gap-4">
+          <div className="text-sm text-muted-foreground text-center">
             Your controller can be owned by an existing Starknet wallet which
             can receive the rewards you earn while playing. <br />
             (This can be updated later)
-          </Text>
-          <VStack w="full">
+          </div>
+          <div className="flex flex-col gap-2">
             <Input
               placeholder="0x..."
               value={delegateAddress}
               onChange={(e) => setDelegateAddress(e.target.value)}
             />
             {!isValid && delegateAddress !== "" && (
-              <HStack w="full" color="alert.foreground">
-                <AlertIcon />{" "}
-                <Text color="alert.foreground">Invalid address!</Text>
-              </HStack>
+              <div className="flex items-center gap-2 text-error-icon">
+                <AlertIcon size="sm" />
+                <div className="text-sm">Invalid address!</div>
+              </div>
             )}
-          </VStack>
-        </VStack>
+          </div>
+        </div>
       </Content>
       <Footer>
         <Button onClick={onSetDelegate} disabled={!isValid}>
diff --git a/packages/keychain/src/components/Settings/Recovery.stories.tsx b/packages/keychain/src/components/Settings/Recovery.stories.tsx
new file mode 100644
index 000000000..a9f0c4df7
--- /dev/null
+++ b/packages/keychain/src/components/Settings/Recovery.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Recovery } from "./Recovery";
+
+const meta = {
+  component: Recovery,
+  args: {
+    onBack: () => {},
+  },
+} satisfies Meta<typeof Recovery>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/keychain/src/components/Settings/Recovery.tsx b/packages/keychain/src/components/Settings/Recovery.tsx
index 4d094cf5a..c7f58284d 100644
--- a/packages/keychain/src/components/Settings/Recovery.tsx
+++ b/packages/keychain/src/components/Settings/Recovery.tsx
@@ -1,5 +1,4 @@
 import { AlertIcon, Button, Input } from "@cartridge/ui-next";
-import { VStack, Text, HStack } from "@chakra-ui/react";
 import { Container, Content, Footer } from "@/components/layout";
 import { useConnection } from "@/hooks/connection";
 import { useCallback, useEffect, useState } from "react";
@@ -38,31 +37,29 @@ export function Recovery({ onBack }: { onBack: () => void }) {
   }, [controller, externalOwnerAddress, context, setContext]);
 
   return (
-    <Container
-      variant="expanded"
-      title="Recovery Account(s)"
-      onBack={() => onBack()}
-    >
+    <Container variant="expanded" title="Recovery Account(s)" onBack={onBack}>
       <Content>
-        <VStack w="full" h="full" justifyContent="space-between" gap={6}>
-          <Text color="text.secondary" fontSize="sm" align="center">
+        {/* TODO: Get rid of this div once Content is updated with TW */}
+        <div className="flex flex-col gap-4">
+          <div className="text-sm text-muted-foreground text-center">
             Your controller can be owned by an existing Starknet wallet
-          </Text>
-          <VStack w="full">
+          </div>
+          <div className="flex flex-col gap-2">
             <Input
               placeholder="0x..."
               value={externalOwnerAddress}
               onChange={(e) => setExternalOwnerAddress(e.target.value)}
             />
             {!isValid && externalOwnerAddress !== "" && (
-              <HStack w="full" color="alert.foreground">
-                <AlertIcon />{" "}
-                <Text color="alert.foreground">Invalid address!</Text>
-              </HStack>
+              <div className="flex items-center gap-2 text-error-icon">
+                <AlertIcon size="sm" />
+                <div className="text-sm">Invalid address!</div>
+              </div>
             )}
-          </VStack>
-        </VStack>
+          </div>
+        </div>
       </Content>
+
       <Footer>
         <Button onClick={onSetRecovery} disabled={!isValid}>
           Add Recovery Account
diff --git a/packages/keychain/src/components/SignMessage.stories.tsx b/packages/keychain/src/components/SignMessage.stories.tsx
new file mode 100644
index 000000000..e0c69a14e
--- /dev/null
+++ b/packages/keychain/src/components/SignMessage.stories.tsx
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SignMessage } from "./SignMessage";
+
+const meta = {
+  component: SignMessage,
+} satisfies Meta<typeof SignMessage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    origin: "https://cartridge.gg",
+    typedData: {
+      types: {
+        StarknetDomain: [
+          {
+            name: "name",
+            type: "shortstring",
+          },
+          {
+            name: "version",
+            type: "shortstring",
+          },
+          {
+            name: "chainId",
+            type: "shortstring",
+          },
+          {
+            name: "revision",
+            type: "shortstring",
+          },
+        ],
+        Person: [
+          {
+            name: "name",
+            type: "felt",
+          },
+          {
+            name: "wallet",
+            type: "felt",
+          },
+        ],
+        Mail: [
+          {
+            name: "from",
+            type: "Person",
+          },
+          {
+            name: "to",
+            type: "Person",
+          },
+          {
+            name: "contents",
+            type: "felt",
+          },
+        ],
+      },
+      primaryType: "Mail",
+      domain: {
+        name: "StarkNet Mail",
+        version: "1",
+        revision: "1",
+        chainId: "SN_SEPOLIA",
+      },
+      message: {
+        from: {
+          name: "Cow",
+          wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
+        },
+        to: {
+          name: "Bob",
+          wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+        },
+        contents: "Hello, Bob!",
+      },
+    },
+    onSign: () => {},
+    onCancel: () => {},
+  },
+};
diff --git a/packages/keychain/src/components/SignMessage.tsx b/packages/keychain/src/components/SignMessage.tsx
index 290c11bfc..da659d535 100644
--- a/packages/keychain/src/components/SignMessage.tsx
+++ b/packages/keychain/src/components/SignMessage.tsx
@@ -1,8 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Flex, Text } from "@chakra-ui/react";
 import { shortString, Signature, TypedData } from "starknet";
 import { Container, Footer, Content } from "@/components/layout";
-import { TransferDuoIcon, Button } from "@cartridge/ui-next";
+import {
+  TransferDuoIcon,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardListContent,
+  CardListItem,
+} from "@cartridge/ui-next";
 import { useController } from "@/hooks/controller";
 
 export function SignMessage({
@@ -64,41 +71,44 @@ export function SignMessage({
       title="Signature Request"
       description={`${hostname} is asking you to sign a message`}
     >
-      <Content>
-        <Flex direction="column" align="start" gap="18px" w="full">
-          {(() => {
-            if (!messageData) return <></>;
-            const ptName = messageData.primaryType;
-            const pt = messageData.types[ptName];
-            const values = (typeName: string) => {
-              // @ts-expect-error TODO: fix type
-              const v = messageData.message[typeName];
-              if (typeof v === "object") {
-                return Object.entries(v).map(([key, value]) => {
-                  return (
-                    <Text key={key}>
-                      <Text as="span" opacity="50%" textTransform="capitalize">
-                        {key}:
-                      </Text>{" "}
-                      {value as string}
-                    </Text>
-                  );
-                });
-              } else {
-                return <Text>{v as string}</Text>;
-              }
-            };
+      {messageData && (
+        <Content>
+          <div className="flex flex-col w-full gap-4 text-sm">
+            {messageData.types[messageData.primaryType].map((typ) => (
+              <Card key={typ.name}>
+                <CardHeader>
+                  <CardTitle>{typ.name}</CardTitle>
+                </CardHeader>
 
-            return pt.map((typ) => {
-              return (
-                <DataContainer key={typ.name} title={typ.name}>
-                  {values(typ.name)}
-                </DataContainer>
-              );
-            });
-          })()}
-        </Flex>
-      </Content>
+                <CardListContent>
+                  {(() => {
+                    const v =
+                      messageData.message[
+                        typ.name as keyof typeof messageData.message
+                      ];
+                    return typeof v === "object" ? (
+                      <CardListContent>
+                        {Object.entries(v).map(([key, value]) => (
+                          <CardListItem className="flex flex-row justify-start gap-2 ">
+                            <div className="capitalize text-muted-foreground">
+                              {key}:
+                            </div>
+                            <div className="overflow-x-auto">
+                              {value as string}
+                            </div>
+                          </CardListItem>
+                        ))}
+                      </CardListContent>
+                    ) : (
+                      <CardListItem>{v as string}</CardListItem>
+                    );
+                  })()}
+                </CardListContent>
+              </Card>
+            ))}
+          </div>
+        </Content>
+      )}
 
       <Footer>
         <Button onClick={onConfirm}>sign</Button>
@@ -110,44 +120,3 @@ export function SignMessage({
     </Container>
   );
 }
-
-function DataContainer({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <Flex
-      direction="column"
-      align="start"
-      w="full"
-      bg="solid.primary"
-      borderRadius="base"
-      css={{
-        "> p": {
-          padding: "12px",
-          fontSize: "13px",
-          lineHeight: "16px",
-        },
-        "> p:first-of-type": {
-          fontSize: "10px",
-          fontWeight: "700",
-          letterSpacing: "0.05em",
-          lineHeight: "18px",
-          textTransform: "uppercase",
-          color: "var(--chakra-colors-text-secondaryAccent)",
-        },
-        "> p:not(p:last-of-type)": {
-          borderBottom: "1px solid var(--chakra-colors-solid-bg)",
-        },
-      }}
-    >
-      <>
-        <Text>{title}</Text>
-        {children}
-      </>
-    </Flex>
-  );
-}
diff --git a/packages/keychain/src/components/app.tsx b/packages/keychain/src/components/app.tsx
index 1556a1bda..0f580bbef 100644
--- a/packages/keychain/src/components/app.tsx
+++ b/packages/keychain/src/components/app.tsx
@@ -17,8 +17,9 @@ export function App() {
           <Route path="/" element={<Home />} />
           <Route path="authenticate" element={<Authenticate />} />
           <Route path="session" element={<Session />} />
-          <Route path="slot" element={<Slot />} />
-          <Route path="slot/consent" element={<Consent />} />
+          <Route path="slot" element={<Slot />}>
+            <Route path="consent" element={<Consent />} />
+          </Route>
           <Route path="success" element={<Success />} />
           <Route path="failure" element={<Failure />} />
           <Route path="pending" element={<Pending />} />
diff --git a/packages/keychain/src/components/connect/SessionConsent.stories.tsx b/packages/keychain/src/components/connect/SessionConsent.stories.tsx
new file mode 100644
index 000000000..436e26acd
--- /dev/null
+++ b/packages/keychain/src/components/connect/SessionConsent.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SessionConsent } from "./SessionConsent";
+
+const meta = {
+  tags: ["autodocs"],
+  component: SessionConsent,
+  parameters: {
+    connection: {
+      origin: "https://cartridge.gg",
+    },
+  },
+  args: {
+    isVerified: true,
+  },
+} satisfies Meta<typeof SessionConsent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Slot: Story = {
+  args: {
+    variant: "slot",
+  },
+};
+
+export const Signup: Story = {
+  args: {
+    variant: "signup",
+  },
+};
diff --git a/packages/keychain/src/components/connect/SessionConsent.tsx b/packages/keychain/src/components/connect/SessionConsent.tsx
index 0a42656f4..a67158370 100644
--- a/packages/keychain/src/components/connect/SessionConsent.tsx
+++ b/packages/keychain/src/components/connect/SessionConsent.tsx
@@ -1,4 +1,3 @@
-import { HStack, Text } from "@chakra-ui/react";
 import { VerifiedIcon } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { useMemo } from "react";
@@ -20,18 +19,16 @@ export function SessionConsent({
   switch (variant) {
     case "slot":
       return (
-        <HStack align="flex-start" color="text.secondary" fontSize="xs">
-          <Text color="text.secondary" fontSize="xs" fontWeight="bold">
-            Authorize Slot to manage your Cartridge infrastructure
-          </Text>
-        </HStack>
+        <div className="text-xs text-muted-foreground font-semibold">
+          Authorize Slot to manage your Cartridge infrastructure
+        </div>
       );
     case "signup":
       return null;
     default:
     case "default":
       return hostname && origin ? (
-        <HStack color="text.secondary" fontSize="xs">
+        <div className="flex items-center gap-2">
           {isVerified && (
             <Link
               to="https://github.com/cartridge-gg/controller/blob/main/packages/controller/src/presets.ts"
@@ -40,18 +37,15 @@ export function SessionConsent({
               <VerifiedIcon size="lg" className="text-accent-foreground" />
             </Link>
           )}
-          <Text color="text.secondary" fontSize="xs" fontWeight="bold">
+          <div className="text-xs text-muted-foreground font-semibold">
             Authorize{" "}
-            {/* <LockIcon className="text-accent-foreground mr-0.5" /> */}
-            <Text as="span" color="text.secondaryAccent" fontWeight="bold">
-              {origin}
-            </Text>{" "}
+            <span className="text-accent-foreground font-bold">{origin}</span>{" "}
             and allow the game to{" "}
-            <Text as="span" color="text.secondaryAccent" fontWeight="bold">
+            <span className="text-accent-foreground font-bold">
               perform actions on your behalf
-            </Text>
-          </Text>
-        </HStack>
+            </span>
+          </div>
+        </div>
       ) : null;
   }
 }
diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx
index 7789f22db..762281f18 100644
--- a/packages/keychain/src/components/connect/create/CreateController.tsx
+++ b/packages/keychain/src/components/connect/create/CreateController.tsx
@@ -1,7 +1,6 @@
 import { useRef, useState, useEffect } from "react";
 import { Container, Footer, Content } from "@/components/layout";
-import { Button } from "@cartridge/ui-next";
-import { Box } from "@chakra-ui/react";
+import { Button, cn } from "@cartridge/ui-next";
 import { useControllerTheme } from "@/hooks/theme";
 import { usePostHog } from "posthog-js/react";
 import { useDebounce } from "@/hooks/debounce";
@@ -59,13 +58,12 @@ export function CreateControllerView({
           if (e.key === "Enter") e.preventDefault();
         }}
       >
-        <Content mb="2rem">
-          <Box
-            border={
-              validation.status === "invalid" || error ? "1px solid" : "0px"
-            }
-            borderColor="red.500"
-            borderRadius="base"
+        <Content mb="2rem" gap={0}>
+          <div
+            className={cn(
+              "border-[#E46958] rounded",
+              validation.status === "invalid" || error ? "border" : undefined,
+            )}
           >
             <Input
               {...usernameField}
@@ -80,13 +78,12 @@ export function CreateControllerView({
               onClear={onUsernameClear}
               style={{ position: "relative", zIndex: 1 }}
             />
-          </Box>
+          </div>
 
           <StatusTray
             username={usernameField.value}
             validation={validation}
             error={error}
-            style={{ position: "relative", zIndex: 0 }}
           />
         </Content>
 
diff --git a/packages/keychain/src/components/connect/create/StatusTray.tsx b/packages/keychain/src/components/connect/create/StatusTray.tsx
index 6a3f96b57..0edddc617 100644
--- a/packages/keychain/src/components/connect/create/StatusTray.tsx
+++ b/packages/keychain/src/components/connect/create/StatusTray.tsx
@@ -1,6 +1,5 @@
-import { Text, VStack, Divider } from "@chakra-ui/react";
 import { ValidationState } from "./useUsernameValidation";
-import { ExternalIcon } from "@cartridge/ui-next";
+import { cn, ExternalIcon } from "@cartridge/ui-next";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
 
@@ -8,15 +7,9 @@ interface StatusTrayProps {
   username: string;
   validation: ValidationState;
   error?: Error;
-  style?: React.CSSProperties;
 }
 
-export function StatusTray({
-  username,
-  validation,
-  error,
-  style,
-}: StatusTrayProps) {
+export function StatusTray({ username, validation, error }: StatusTrayProps) {
   const isError = validation.status === "invalid" || error;
   const isTimeoutError = error?.message?.includes(
     "The operation either timed out or was not allowed",
@@ -34,42 +27,34 @@ export function StatusTray({
   }, [validation, error, isTimeoutError]);
 
   return (
-    <VStack
-      alignItems="flex-start"
-      bg="solid.secondary"
-      py="8px"
-      marginTop="-11px"
-      paddingTop="12px"
-      backgroundColor={isError ? "red.500" : "solid.secondary"}
-      borderBottomRadius="4px"
-      divider={<Divider borderColor="darkGray.800" opacity="0.1" />}
-      style={style}
+    <div
+      className={cn(
+        "flex flex-col top-[-2px] rounded-b relative z-0 gap-px  overflow-hidden",
+        isError ? "bg-[#E46958]" : "bg-quaternary",
+      )}
     >
-      <Text
-        fontFamily="Inter"
-        fontSize="12px"
-        px="15px"
-        lineHeight="16px"
-        color={isError ? "darkGray.500" : "text.secondary"}
-      >
-        {isError ? (
-          errorMessage
-        ) : (
-          <>
-            {!username
-              ? "Enter a username"
-              : validation.status === "validating"
-              ? "Checking username..."
-              : validation.status === "valid"
-              ? validation.exists
-                ? "Welcome back! Select Login to play"
-                : "Welcome! Let's create a new controller!"
-              : validation.error?.message || "Enter a username"}
-          </>
+      <div
+        className={cn(
+          "text-xs px-4 py-2",
+          isError
+            ? "text-[#2A2F2A]  border-b border-[#161A17] border-opacity-10"
+            : "text-quaternary-foreground",
         )}
-      </Text>
+      >
+        {isError
+          ? errorMessage
+          : !username
+          ? "Enter a username"
+          : validation.status === "validating"
+          ? "Checking username..."
+          : validation.status === "valid"
+          ? validation.exists
+            ? "Welcome back! Select Login to play"
+            : "Welcome! Let's create a new controller!"
+          : validation.error?.message || "Enter a username"}
+      </div>
       {isTimeoutError && (
-        <div className="w-full flex items-center justify-between text-xs font-semibold px-4 text-secondary">
+        <div className="w-full flex items-center justify-between text-xs font-semibold px-4 py-2 text-secondary">
           <div>Having trouble signing up?</div>
           <Link
             className="flex items-center gap-1.5 hover:underline"
@@ -81,6 +66,6 @@ export function StatusTray({
           </Link>
         </div>
       )}
-    </VStack>
+    </div>
   );
 }
diff --git a/packages/keychain/src/components/index.ts b/packages/keychain/src/components/index.ts
index 0378cc00c..33d17b551 100644
--- a/packages/keychain/src/components/index.ts
+++ b/packages/keychain/src/components/index.ts
@@ -1,4 +1,3 @@
-export * from "./Animation";
 export * from "./DeployController";
 export * from "./transaction/ConfirmTransaction";
 export * from "./SignMessage";
diff --git a/packages/keychain/src/components/layout/Container/Header/index.tsx b/packages/keychain/src/components/layout/Container/Header/index.tsx
index 61d2c6392..ced73a71e 100644
--- a/packages/keychain/src/components/layout/Container/Header/index.tsx
+++ b/packages/keychain/src/components/layout/Container/Header/index.tsx
@@ -1,4 +1,3 @@
-import { Box } from "@chakra-ui/react";
 import { Banner, BannerProps } from "./Banner";
 import { TopBar, TopBarProps } from "./TopBar";
 
@@ -12,7 +11,7 @@ export function Header({
   ...bannerProps
 }: HeaderProps & { onClose?: () => void }) {
   return (
-    <Box position="sticky" top={0} w="full" zIndex={1} bg="solid.bg">
+    <div className="sticky top-0 w-full z-[1] bg-background">
       <Banner {...bannerProps} />
       <TopBar
         onBack={onBack}
@@ -20,6 +19,6 @@ export function Header({
         hideAccount={hideAccount}
         hideNetwork={hideNetwork}
       />
-    </Box>
+    </div>
   );
 }
diff --git a/packages/keychain/src/components/slot/consent.tsx b/packages/keychain/src/components/slot/consent.tsx
index 228038c04..29bc8b803 100644
--- a/packages/keychain/src/components/slot/consent.tsx
+++ b/packages/keychain/src/components/slot/consent.tsx
@@ -1,6 +1,5 @@
 import Controller from "@/utils/controller";
 import { Button } from "@cartridge/ui-next";
-import { Text } from "@chakra-ui/react";
 import { Container, Footer } from "@/components/layout";
 import { useCallback, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
@@ -26,7 +25,7 @@ export function Consent() {
 
   useEffect(() => {
     if (!Controller.fromStore(import.meta.env.VITE_ORIGIN!)) {
-      navigate("/slot/auth", { replace: true });
+      navigate("/slot", { replace: true });
     }
   }, [navigate]);
 
@@ -37,10 +36,8 @@ export function Consent() {
       title="Requesting Permission"
       description={
         <>
-          <Text as="span" fontWeight="bold" color="inherit">
-            Slot
-          </Text>{" "}
-          is requesting permission to manage your Cartridge Infrastructure
+          <span className="font-bold">Slot</span> is requesting permission to
+          manage your Cartridge Infrastructure
         </>
       }
     >
diff --git a/packages/keychain/src/components/slot/index.tsx b/packages/keychain/src/components/slot/index.tsx
index 2ad03d1e2..84da58f69 100644
--- a/packages/keychain/src/components/slot/index.tsx
+++ b/packages/keychain/src/components/slot/index.tsx
@@ -7,6 +7,7 @@ import { useController } from "@/hooks/controller";
 import { useEffect } from "react";
 import {
   Navigate,
+  Outlet,
   useLocation,
   useNavigate,
   useSearchParams,
@@ -21,6 +22,8 @@ export function Slot() {
       return <Navigate to="/success" replace />;
     case "/slot/auth/failure":
       return <Navigate to="/failure" replace />;
+    case "/slot/consent":
+      return <Outlet />;
     default:
       return <Auth />;
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24d1e6778..d3bbf33d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -468,6 +468,9 @@ importers:
       postcss:
         specifier: ^8.4.35
         version: 8.4.47
+      postcss-import:
+        specifier: ^16.1.0
+        version: 16.1.0(postcss@8.4.47)
       prettier:
         specifier: ^2.7.1
         version: 2.8.8
@@ -21127,7 +21130,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@2.7.1)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
       eslint-plugin-react: 7.37.1(eslint@8.57.1)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1)
@@ -21157,7 +21160,7 @@ snapshots:
     dependencies:
       debug: 4.3.7
       eslint: 8.57.1
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@2.7.1)(eslint@8.57.1)
       glob: 7.2.3
       is-glob: 4.0.3
       resolve: 1.22.8
@@ -21176,7 +21179,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@2.7.1)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8