From 6e21fd2ceac268207e2d9cebfd45db9f9dea7f35 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 4 Oct 2024 15:55:34 +0700
Subject: [PATCH 01/20] Add isModal config to wallet

---
 src/lib/fastAuthWalletConnection.ts | 27 ++++++++++---
 src/lib/near-fastauth-wallet.ts     |  6 ++-
 src/ui/IframeDialog.tsx             | 11 +++--
 src/ui/reactApp.tsx                 | 62 ++++++++++-------------------
 4 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/src/lib/fastAuthWalletConnection.ts b/src/lib/fastAuthWalletConnection.ts
index 807a28b..a94d08c 100644
--- a/src/lib/fastAuthWalletConnection.ts
+++ b/src/lib/fastAuthWalletConnection.ts
@@ -13,7 +13,7 @@ import {
   SignedDelegate,
   SignedTransaction,
 } from '@near-js/transactions';
-import { loadIframeDialog } from '../ui/reactApp';
+import { renderIFrame } from '../ui/reactApp';
 import { SignedMessage, SignMessageParams } from '@near-wallet-selector/core';
 import { PublicKey } from 'near-api-js/lib/utils';
 import { sha256 } from 'js-sha256';
@@ -108,7 +108,12 @@ export class FastAuthWalletConnection {
   /** @hidden */
   _completeSignInPromise: Promise<void>;
 
-  constructor(near: Near, appKeyPrefix: string) {
+  /** @hidden */
+  isModal: boolean;
+  
+  constructor(near: Near, appKeyPrefix: string, config: {
+    isModal: boolean;
+  }) {
     if (typeof appKeyPrefix !== 'string') {
       throw new Error(
         'Please define a clear appKeyPrefix for this WalletConnection instance as the second argument to the constructor'
@@ -153,6 +158,7 @@ export class FastAuthWalletConnection {
     if (!this.isSignedIn()) {
       this._completeSignInPromise = this._completeSignInWithAccessKey();
     }
+    this.isModal = config.isModal;
   }
 
   /**
@@ -261,7 +267,7 @@ export class FastAuthWalletConnection {
       newUrl.searchParams.append('isRecovery', isRecovery + '');
     }
 
-    loadIframeDialog(newUrl.toString());
+    this.renderWallet(newUrl.toString());
 
     const {
       publicKey,
@@ -391,7 +397,8 @@ export class FastAuthWalletConnection {
       callbackUrl,
       type,
     });
-    loadIframeDialog(newUrl.toString());
+
+    this.renderWallet(newUrl.toString());
 
     return new Promise((resolve) => {
       let eventType: SignMessageEventType;
@@ -496,7 +503,7 @@ export class FastAuthWalletConnection {
             type: evtTypes.request,
             data,
           },
-          {
+          { 
             targetOrigin: '*',
           }
         );
@@ -506,7 +513,8 @@ export class FastAuthWalletConnection {
     window.addEventListener('message', listener);
 
     const newUrl = new URL(this._walletBaseUrl + urlPath);
-    await loadIframeDialog(newUrl.toString());
+    
+    this.renderWallet(newUrl.toString());
 
     return new Promise((resolve) => {
       const listener = (event: MessageEvent): void => {
@@ -616,4 +624,11 @@ export class FastAuthWalletConnection {
 
     return keyPair.verify(messageHashBytes, signatureBytes);
   }
+
+  renderWallet(url: string) {
+    renderIFrame({
+      iframeSrc: url,
+      isModal: this.isModal,
+    });
+  }
 }
diff --git a/src/lib/near-fastauth-wallet.ts b/src/lib/near-fastauth-wallet.ts
index dbe017f..18ac771 100644
--- a/src/lib/near-fastauth-wallet.ts
+++ b/src/lib/near-fastauth-wallet.ts
@@ -35,11 +35,13 @@ export interface FastAuthWalletParams {
   successUrl?: string;
   failureUrl?: string;
   relayerUrl?: string;
+  isModal?: boolean;
 }
 
 interface FastAuthWalletExtraOptions {
   walletUrl: string;
   relayerUrl: string;
+  isModal: boolean
 }
 
 interface FastAuthWalletState {
@@ -125,7 +127,7 @@ const setupWalletState = async (
     headers: {},
   });
 
-  const wallet = new FastAuthWalletConnection(near, 'near_app');
+  const wallet = new FastAuthWalletConnection(near, 'near_app', { isModal: params.isModal });
 
   return {
     wallet,
@@ -447,6 +449,7 @@ export function setupFastAuthWallet({
   successUrl = '',
   failureUrl = '',
   relayerUrl = '',
+  isModal = true,
 }: FastAuthWalletParams = {}): WalletModuleFactory<BrowserWallet> {
   return async (moduleOptions) => {
     return {
@@ -468,6 +471,7 @@ export function setupFastAuthWallet({
           params: {
             walletUrl: resolveWalletUrl(options.options.network, walletUrl),
             relayerUrl,
+            isModal
           },
         });
       },
diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index b2f6b7c..fab1c8d 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -11,7 +11,7 @@ const boxStyle: React.CSSProperties = {
 export type IframeModalProps = {
   iframeSrc: string;
   isOpen?: boolean;
-  onLoad?: React.EventHandler<React.SyntheticEvent>;
+  isModal?: boolean;
 };
 
 type MessageEventData = {
@@ -23,7 +23,7 @@ type MessageEventData = {
 };
 
 export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
-  ({ iframeSrc, isOpen, onLoad }, ref) => {
+  ({ iframeSrc, isOpen, isModal }, ref) => {
     const isMobile = useMediaQuery('(max-width: 767px)');
     const onCloseRef = useRef(null);
 
@@ -89,14 +89,17 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
           allowFullScreen
           allow="publickey-credentials-get *; clipboard-write"
           style={{ borderRadius: '12px' }}
-          onLoad={(e) => {
+          onLoad={() => {
             setIsIframeLoaded(true);
-            onLoad(e);
           }}
         />
       </>
     );
 
+    if (!isModal) {
+      return iframeElement;
+    }
+
     if (isMobile) {
       return (
         <Drawer
diff --git a/src/ui/reactApp.tsx b/src/ui/reactApp.tsx
index 94c04d4..a3f18de 100644
--- a/src/ui/reactApp.tsx
+++ b/src/ui/reactApp.tsx
@@ -1,46 +1,26 @@
-import React, { useState } from 'react';
 import ReactDOM from 'react-dom/client';
-import IframeDialog, { IframeModalProps } from './IframeDialog';
+import IframeDialog from './IframeDialog';
 
-type LoadIframeOptions = {
-  isOpen?: boolean;
-};
-
-const DEFAULT_OPTIONS = {
-  isOpen: true,
-};
-
-export const loadIframeDialog = (
-  iframeSrc: string,
-  options?: LoadIframeOptions
-): Promise<HTMLIFrameElement> => {
-  return new Promise((resolve) => {
-    const { isOpen } = options ?? DEFAULT_OPTIONS;
-
-    const IframeDialogWrapper: React.FC<IframeModalProps> = (props) => {
-      const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(
-        null
-      );
-
-      return (
-        <IframeDialog
-          {...props}
-          isOpen={isOpen}
-          ref={setIframeRef}
-          onLoad={() => resolve(iframeRef)}
-        />
-      );
-    };
+export const renderIFrame = ({
+  iframeSrc,
+  isModal
+}: {
+  iframeSrc: string;
+  isModal?: boolean;
+}): void => {
+  let rootElement = document.querySelector('#nfw-root');
 
-    let rootElement = document.querySelector('#nfw-root');
-    if (!rootElement) {
-      rootElement = document.createElement('div');
-      rootElement.setAttribute('id', 'nfw-root');
-      document.body.appendChild(rootElement);
-    }
+  if (!rootElement) {
+    rootElement = document.createElement('div');
+    rootElement.setAttribute('id', 'nfw-root');
+    document.body.appendChild(rootElement);
+  }
 
-    ReactDOM.createRoot(rootElement).render(
-      <IframeDialogWrapper iframeSrc={iframeSrc} />
-    );
-  });
+  ReactDOM.createRoot(rootElement).render(
+    <IframeDialog
+        isOpen
+        iframeSrc={iframeSrc}
+        isModal={isModal}
+      />
+  );
 };

From 813645faea2c19fb9d9aa7de4af273d01c596edb Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 4 Oct 2024 17:41:44 +0700
Subject: [PATCH 02/20] Remove antui dependencies

---
 package-lock.json               | 935 +-------------------------------
 package.json                    |   4 +-
 src/ui/IframeDialog.tsx         | 140 ++---
 src/ui/components/CloseIcon.tsx |  42 ++
 src/ui/components/Drawer.tsx    |  78 +++
 src/ui/components/Modal.tsx     |  82 +++
 src/ui/components/Overlay.tsx   |  39 ++
 7 files changed, 290 insertions(+), 1030 deletions(-)
 create mode 100644 src/ui/components/CloseIcon.tsx
 create mode 100644 src/ui/components/Drawer.tsx
 create mode 100644 src/ui/components/Modal.tsx
 create mode 100644 src/ui/components/Overlay.tsx

diff --git a/package-lock.json b/package-lock.json
index 334f799..0d3669b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,10 @@
       "version": "2.0.2-beta.10",
       "license": "MIT",
       "dependencies": {
-        "@ant-design/icons": "^5.3.6",
         "@near-js/transactions": "^0.2.1",
         "@near-wallet-selector/core": "^8.5.2",
         "@near-wallet-selector/wallet-utils": "^8.5.2",
         "@vitejs/plugin-react": "^4.2.1",
-        "antd": "^5.12.8",
         "class-variance-authority": "^0.7.0",
         "js-sha256": "^0.11.0",
         "multichain-tools": "2.0.14-beta.10",
@@ -82,71 +80,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@ant-design/colors": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.2.tgz",
-      "integrity": "sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==",
-      "dependencies": {
-        "@ctrl/tinycolor": "^3.6.1"
-      }
-    },
-    "node_modules/@ant-design/cssinjs": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.21.0.tgz",
-      "integrity": "sha512-gIilraPl+9EoKdYxnupxjHB/Q6IHNRjEXszKbDxZdsgv4sAZ9pjkCq8yanDWNvyfjp4leir2OVAJm0vxwKK8YA==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.1",
-        "@emotion/hash": "^0.8.0",
-        "@emotion/unitless": "^0.7.5",
-        "classnames": "^2.3.1",
-        "csstype": "^3.1.3",
-        "rc-util": "^5.35.0",
-        "stylis": "^4.0.13"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
-      }
-    },
-    "node_modules/@ant-design/icons": {
-      "version": "5.3.7",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.3.7.tgz",
-      "integrity": "sha512-bCPXTAg66f5bdccM4TT21SQBDO1Ek2gho9h3nO9DAKXJP4sq+5VBjrQMSxMVXSB3HyEz+cUbHQ5+6ogxCOpaew==",
-      "dependencies": {
-        "@ant-design/colors": "^7.0.0",
-        "@ant-design/icons-svg": "^4.4.0",
-        "@babel/runtime": "^7.11.2",
-        "classnames": "^2.2.6",
-        "rc-util": "^5.31.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
-      }
-    },
-    "node_modules/@ant-design/icons-svg": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
-      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
-    },
-    "node_modules/@ant-design/react-slick": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.1.2.tgz",
-      "integrity": "sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.4",
-        "classnames": "^2.2.5",
-        "json2mq": "^0.2.0",
-        "resize-observer-polyfill": "^1.5.1",
-        "throttle-debounce": "^5.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0"
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
@@ -2030,6 +1963,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
       "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
+      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2111,14 +2045,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
-    "node_modules/@ctrl/tinycolor": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
-      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@cypress/request": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
@@ -2162,16 +2088,6 @@
         "node": ">= 0.12"
       }
     },
-    "node_modules/@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
@@ -3460,129 +3376,6 @@
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
       "dev": true
     },
-    "node_modules/@rc-component/async-validator": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
-      "integrity": "sha512-qgGdcVIF604M9EqjNF0hbUTz42bz/RDtxWdWuU5EQe3hi7M8ob54B6B35rOsvX5eSvIHIzT9iH1R3n+hk3CGfg==",
-      "dependencies": {
-        "@babel/runtime": "^7.24.4"
-      },
-      "engines": {
-        "node": ">=14.x"
-      }
-    },
-    "node_modules/@rc-component/color-picker": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.5.3.tgz",
-      "integrity": "sha512-+tGGH3nLmYXTalVe0L8hSZNs73VTP5ueSHwUlDC77KKRaN7G4DS4wcpG5DTDzdcV/Yas+rzA6UGgIyzd8fS4cw==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.6",
-        "@ctrl/tinycolor": "^3.6.1",
-        "classnames": "^2.2.6",
-        "rc-util": "^5.38.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/@rc-component/context": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
-      "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "rc-util": "^5.27.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/@rc-component/mini-decimal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
-      "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.0"
-      },
-      "engines": {
-        "node": ">=8.x"
-      }
-    },
-    "node_modules/@rc-component/mutate-observer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz",
-      "integrity": "sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.0",
-        "classnames": "^2.3.2",
-        "rc-util": "^5.24.4"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/@rc-component/portal": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
-      "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.0",
-        "classnames": "^2.3.2",
-        "rc-util": "^5.24.4"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/@rc-component/tour": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.15.0.tgz",
-      "integrity": "sha512-h6hyILDwL+In9GAgRobwRWihLqqsD7Uft3fZGrJ7L4EiyCoxbnNYwzPXDfz7vNDhWeVyvAWQJj9fJCzpI4+b4g==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.0",
-        "@rc-component/portal": "^1.0.0-9",
-        "@rc-component/trigger": "^2.0.0",
-        "classnames": "^2.3.2",
-        "rc-util": "^5.24.4"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/@rc-component/trigger": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-2.2.0.tgz",
-      "integrity": "sha512-QarBCji02YE9aRFhZgRZmOpXBj0IZutRippsVBv85sxvG4FGk/vRxwAlkn3MS9zK5mwbETd86mAVg2tKqTkdJA==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@rc-component/portal": "^1.1.0",
-        "classnames": "^2.3.2",
-        "rc-motion": "^2.0.0",
-        "rc-resize-observer": "^1.3.1",
-        "rc-util": "^5.38.0"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -5177,69 +4970,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/antd": {
-      "version": "5.18.2",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-5.18.2.tgz",
-      "integrity": "sha512-2RHNIaydjMcbvdHzn7/GRIcu1pfGkTBSqkQ7O5GGIwC+p086a5NFzKTmanRITFme5Iqn0If1sbWTt6XOywRKIg==",
-      "dependencies": {
-        "@ant-design/colors": "^7.0.2",
-        "@ant-design/cssinjs": "^1.20.0",
-        "@ant-design/icons": "^5.3.7",
-        "@ant-design/react-slick": "~1.1.2",
-        "@babel/runtime": "^7.24.7",
-        "@ctrl/tinycolor": "^3.6.1",
-        "@rc-component/color-picker": "~1.5.3",
-        "@rc-component/mutate-observer": "^1.1.0",
-        "@rc-component/tour": "~1.15.0",
-        "@rc-component/trigger": "^2.2.0",
-        "classnames": "^2.5.1",
-        "copy-to-clipboard": "^3.3.3",
-        "dayjs": "^1.11.11",
-        "qrcode.react": "^3.1.0",
-        "rc-cascader": "~3.26.0",
-        "rc-checkbox": "~3.3.0",
-        "rc-collapse": "~3.7.3",
-        "rc-dialog": "~9.5.2",
-        "rc-drawer": "~7.2.0",
-        "rc-dropdown": "~4.2.0",
-        "rc-field-form": "~2.2.1",
-        "rc-image": "~7.9.0",
-        "rc-input": "~1.5.1",
-        "rc-input-number": "~9.1.0",
-        "rc-mentions": "~2.14.0",
-        "rc-menu": "~9.14.0",
-        "rc-motion": "^2.9.1",
-        "rc-notification": "~5.6.0",
-        "rc-pagination": "~4.0.4",
-        "rc-picker": "~4.5.0",
-        "rc-progress": "~4.0.0",
-        "rc-rate": "~2.13.0",
-        "rc-resize-observer": "^1.4.0",
-        "rc-segmented": "~2.3.0",
-        "rc-select": "~14.14.0",
-        "rc-slider": "~10.6.2",
-        "rc-steps": "~6.0.1",
-        "rc-switch": "~4.1.0",
-        "rc-table": "~7.45.7",
-        "rc-tabs": "~15.1.1",
-        "rc-textarea": "~1.7.0",
-        "rc-tooltip": "~6.2.0",
-        "rc-tree": "~5.8.8",
-        "rc-tree-select": "~5.21.0",
-        "rc-upload": "~4.5.2",
-        "rc-util": "^5.42.1",
-        "scroll-into-view-if-needed": "^3.1.0",
-        "throttle-debounce": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/ant-design"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -5286,11 +5016,6 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "dev": true
     },
-    "node_modules/array-tree-filter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
-      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
-    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -6066,11 +5791,6 @@
         "url": "https://joebell.co.uk"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
-    },
     "node_modules/cli-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -6229,11 +5949,6 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
-    "node_modules/compute-scroll-into-view": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
-      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6293,14 +6008,6 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
-    "node_modules/copy-to-clipboard": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
-      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
-      "dependencies": {
-        "toggle-selection": "^1.0.6"
-      }
-    },
     "node_modules/core-js": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.0.tgz",
@@ -6395,7 +6102,8 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
     },
     "node_modules/dashdash": {
       "version": "1.14.1",
@@ -6409,11 +6117,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/dayjs": {
-      "version": "1.11.11",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
-      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
-    },
     "node_modules/debug": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
@@ -8425,14 +8128,6 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "dev": true
     },
-    "node_modules/json2mq": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
-      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
-      "dependencies": {
-        "string-convert": "^0.2.0"
-      }
-    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -10459,14 +10154,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/qrcode.react": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz",
-      "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/qs": {
       "version": "6.10.4",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
@@ -10586,578 +10273,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/rc-cascader": {
-      "version": "3.26.0",
-      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.26.0.tgz",
-      "integrity": "sha512-L1dml383TPSJD1I11YwxuVbmqaJY64psZqFp1ETlgl3LEOwDu76Cyl11fw5dmjJhMlUWwM5dECQfqJgfebhUjg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "array-tree-filter": "^2.1.0",
-        "classnames": "^2.3.1",
-        "rc-select": "~14.14.0",
-        "rc-tree": "~5.8.1",
-        "rc-util": "^5.37.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-checkbox": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-3.3.0.tgz",
-      "integrity": "sha512-Ih3ZaAcoAiFKJjifzwsGiT/f/quIkxJoklW4yKGho14Olulwn8gN7hOBve0/WGDg5o/l/5mL0w7ff7/YGvefVw==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "^2.3.2",
-        "rc-util": "^5.25.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-collapse": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.7.3.tgz",
-      "integrity": "sha512-60FJcdTRn0X5sELF18TANwtVi7FtModq649H11mYF1jh83DniMoM4MqY627sEKRCTm4+WXfGDcB7hY5oW6xhyw==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "rc-motion": "^2.3.4",
-        "rc-util": "^5.27.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-dialog": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.5.2.tgz",
-      "integrity": "sha512-qVUjc8JukG+j/pNaHVSRa2GO2/KbV2thm7yO4hepQ902eGdYK913sGkwg/fh9yhKYV1ql3BKIN2xnud3rEXAPw==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "@rc-component/portal": "^1.0.0-8",
-        "classnames": "^2.2.6",
-        "rc-motion": "^2.3.0",
-        "rc-util": "^5.21.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-drawer": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-7.2.0.tgz",
-      "integrity": "sha512-9lOQ7kBekEJRdEpScHvtmEtXnAsy+NGDXiRWc2ZVC7QXAazNVbeT4EraQKYwCME8BJLa8Bxqxvs5swwyOepRwg==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@rc-component/portal": "^1.1.1",
-        "classnames": "^2.2.6",
-        "rc-motion": "^2.6.1",
-        "rc-util": "^5.38.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-dropdown": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.2.0.tgz",
-      "integrity": "sha512-odM8Ove+gSh0zU27DUj5cG1gNKg7mLWBYzB5E4nNLrLwBmYEgYP43vHKDGOVZcJSVElQBI0+jTQgjnq0NfLjng==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@rc-component/trigger": "^2.0.0",
-        "classnames": "^2.2.6",
-        "rc-util": "^5.17.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.11.0",
-        "react-dom": ">=16.11.0"
-      }
-    },
-    "node_modules/rc-field-form": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-2.2.1.tgz",
-      "integrity": "sha512-uoNqDoR7A4tn4QTSqoWPAzrR7ZwOK5I+vuZ/qdcHtbKx+ZjEsTg7QXm2wk/jalDiSksAQmATxL0T5LJkRREdIA==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.0",
-        "@rc-component/async-validator": "^5.0.3",
-        "rc-util": "^5.32.2"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-image": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.9.0.tgz",
-      "integrity": "sha512-l4zqO5E0quuLMCtdKfBgj4Suv8tIS011F5k1zBBlK25iMjjiNHxA0VeTzGFtUZERSA45gvpXDg8/P6qNLjR25g==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.2",
-        "@rc-component/portal": "^1.0.2",
-        "classnames": "^2.2.6",
-        "rc-dialog": "~9.5.2",
-        "rc-motion": "^2.6.2",
-        "rc-util": "^5.34.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-input": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.5.1.tgz",
-      "integrity": "sha512-+nOzQJDeIfIpNP/SgY45LXSKbuMlp4Yap2y8c+ZpU7XbLmNzUd6+d5/S75sA/52jsVE6S/AkhkkDEAOjIu7i6g==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.1",
-        "classnames": "^2.2.1",
-        "rc-util": "^5.18.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
-      }
-    },
-    "node_modules/rc-input-number": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-9.1.0.tgz",
-      "integrity": "sha512-NqJ6i25Xn/AgYfVxynlevIhX3FuKlMwIFpucGG1h98SlK32wQwDK0zhN9VY32McOmuaqzftduNYWWooWz8pXQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "@rc-component/mini-decimal": "^1.0.1",
-        "classnames": "^2.2.5",
-        "rc-input": "~1.5.0",
-        "rc-util": "^5.40.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-mentions": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.14.0.tgz",
-      "integrity": "sha512-qKR59FMuF8PK4ZqsbWX3UuA5P1M/snzyqV6Yt3y1DCFbCEdqUGIBgQp6vEfLCO6Z0RoRFlzXtCeSlBTcDDpg1A==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.5",
-        "@rc-component/trigger": "^2.0.0",
-        "classnames": "^2.2.6",
-        "rc-input": "~1.5.0",
-        "rc-menu": "~9.14.0",
-        "rc-textarea": "~1.7.0",
-        "rc-util": "^5.34.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-menu": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.14.0.tgz",
-      "integrity": "sha512-La3LBCDMLMs9Q/8mTGbnscb+ZeJ26ebkLz9xJFHd2SD8vfsCKl1Z/k3mwbxyKL01lB40fel1s9Nn9LAv/nmVJQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "@rc-component/trigger": "^2.0.0",
-        "classnames": "2.x",
-        "rc-motion": "^2.4.3",
-        "rc-overflow": "^1.3.1",
-        "rc-util": "^5.27.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-motion": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.2.tgz",
-      "integrity": "sha512-fUAhHKLDdkAXIDLH0GYwof3raS58dtNUmzLF2MeiR8o6n4thNpSDQhOqQzWE4WfFZDCi9VEN8n7tiB7czREcyw==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.1",
-        "classnames": "^2.2.1",
-        "rc-util": "^5.43.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-notification": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.6.0.tgz",
-      "integrity": "sha512-TGQW5T7waOxLwgJG7fXcw8l7AQiFOjaZ7ISF5PrU526nunHRNcTMuzKihQHaF4E/h/KfOCDk3Mv8eqzbu2e28w==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "rc-motion": "^2.9.0",
-        "rc-util": "^5.20.1"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-overflow": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.3.2.tgz",
-      "integrity": "sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.1",
-        "classnames": "^2.2.1",
-        "rc-resize-observer": "^1.0.0",
-        "rc-util": "^5.37.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-pagination": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-4.0.4.tgz",
-      "integrity": "sha512-GGrLT4NgG6wgJpT/hHIpL9nELv27A1XbSZzECIuQBQTVSf4xGKxWr6I/jhpRPauYEWEbWVw22ObG6tJQqwJqWQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "^2.3.2",
-        "rc-util": "^5.38.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-picker": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-4.5.0.tgz",
-      "integrity": "sha512-suqz9bzuhBQlf7u+bZd1bJLPzhXpk12w6AjQ9BTPTiFwexVZgUKViG1KNLyfFvW6tCUZZK0HmCCX7JAyM+JnCg==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "@rc-component/trigger": "^2.0.0",
-        "classnames": "^2.2.1",
-        "rc-overflow": "^1.3.2",
-        "rc-resize-observer": "^1.4.0",
-        "rc-util": "^5.38.1"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "date-fns": ">= 2.x",
-        "dayjs": ">= 1.x",
-        "luxon": ">= 3.x",
-        "moment": ">= 2.x",
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      },
-      "peerDependenciesMeta": {
-        "date-fns": {
-          "optional": true
-        },
-        "dayjs": {
-          "optional": true
-        },
-        "luxon": {
-          "optional": true
-        },
-        "moment": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/rc-progress": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-4.0.0.tgz",
-      "integrity": "sha512-oofVMMafOCokIUIBnZLNcOZFsABaUw8PPrf1/y0ZBvKZNpOiu5h4AO9vv11Sw0p4Hb3D0yGWuEattcQGtNJ/aw==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "^2.2.6",
-        "rc-util": "^5.16.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-rate": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.13.0.tgz",
-      "integrity": "sha512-oxvx1Q5k5wD30sjN5tqAyWTvJfLNNJn7Oq3IeS4HxWfAiC4BOXMITNAsw7u/fzdtO4MS8Ki8uRLOzcnEuoQiAw==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "^2.2.5",
-        "rc-util": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-resize-observer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz",
-      "integrity": "sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "classnames": "^2.2.1",
-        "rc-util": "^5.38.0",
-        "resize-observer-polyfill": "^1.5.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-segmented": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.3.0.tgz",
-      "integrity": "sha512-I3FtM5Smua/ESXutFfb8gJ8ZPcvFR+qUgeeGFQHBOvRiRKyAk4aBE5nfqrxXx+h8/vn60DQjOt6i4RNtrbOobg==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.1",
-        "classnames": "^2.2.1",
-        "rc-motion": "^2.4.4",
-        "rc-util": "^5.17.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
-      }
-    },
-    "node_modules/rc-select": {
-      "version": "14.14.0",
-      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.14.0.tgz",
-      "integrity": "sha512-Uo2wulrjoPPRLCPd7zlK4ZFVJxlTN//yp1xWP/U+TUOQCyXrT+Duvq/Si5OzVcmQyWAUSbsplc2OwNNhvbOeKQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "@rc-component/trigger": "^2.1.1",
-        "classnames": "2.x",
-        "rc-motion": "^2.0.1",
-        "rc-overflow": "^1.3.1",
-        "rc-util": "^5.16.1",
-        "rc-virtual-list": "^3.5.2"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
-    "node_modules/rc-slider": {
-      "version": "10.6.2",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.6.2.tgz",
-      "integrity": "sha512-FjkoFjyvUQWcBo1F3RgSglky3ar0+qHLM41PlFVYB4Bj3RD8E/Mv7kqMouLFBU+3aFglMzzctAIWRwajEuueSw==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "^2.2.5",
-        "rc-util": "^5.36.0"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-steps": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-6.0.1.tgz",
-      "integrity": "sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==",
-      "dependencies": {
-        "@babel/runtime": "^7.16.7",
-        "classnames": "^2.2.3",
-        "rc-util": "^5.16.1"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-switch": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-4.1.0.tgz",
-      "integrity": "sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "classnames": "^2.2.1",
-        "rc-util": "^5.30.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-table": {
-      "version": "7.45.7",
-      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.45.7.tgz",
-      "integrity": "sha512-wi9LetBL1t1csxyGkMB2p3mCiMt+NDexMlPbXHvQFmBBAsMxrgNSAPwUci2zDLUq9m8QdWc1Nh8suvrpy9mXrg==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "@rc-component/context": "^1.4.0",
-        "classnames": "^2.2.5",
-        "rc-resize-observer": "^1.1.0",
-        "rc-util": "^5.37.0",
-        "rc-virtual-list": "^3.14.2"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-tabs": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-15.1.1.tgz",
-      "integrity": "sha512-Tc7bJvpEdkWIVCUL7yQrMNBJY3j44NcyWS48jF/UKMXuUlzaXK+Z/pEL5LjGcTadtPvVmNqA40yv7hmr+tCOAw==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.2",
-        "classnames": "2.x",
-        "rc-dropdown": "~4.2.0",
-        "rc-menu": "~9.14.0",
-        "rc-motion": "^2.6.2",
-        "rc-resize-observer": "^1.0.0",
-        "rc-util": "^5.34.1"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-textarea": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.7.0.tgz",
-      "integrity": "sha512-UxizYJkWkmxP3zofXgc487QiGyDmhhheDLLjIWbFtDmiru1ls30KpO8odDaPyqNUIy9ugj5djxTEuezIn6t3Jg==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "^2.2.1",
-        "rc-input": "~1.5.0",
-        "rc-resize-observer": "^1.0.0",
-        "rc-util": "^5.27.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-tooltip": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.2.0.tgz",
-      "integrity": "sha512-iS/3iOAvtDh9GIx1ulY7EFUXUtktFccNLsARo3NPgLf0QW9oT0w3dA9cYWlhqAKmD+uriEwdWz1kH0Qs4zk2Aw==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.2",
-        "@rc-component/trigger": "^2.0.0",
-        "classnames": "^2.3.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-tree": {
-      "version": "5.8.8",
-      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.8.tgz",
-      "integrity": "sha512-S+mCMWo91m5AJqjz3PdzKilGgbFm7fFJRFiTDOcoRbD7UfMOPnerXwMworiga0O2XIo383UoWuEfeHs1WOltag==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "rc-motion": "^2.0.1",
-        "rc-util": "^5.16.1",
-        "rc-virtual-list": "^3.5.1"
-      },
-      "engines": {
-        "node": ">=10.x"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
-    "node_modules/rc-tree-select": {
-      "version": "5.21.0",
-      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.21.0.tgz",
-      "integrity": "sha512-w+9qEu6zh0G3wt9N/hzWNSnqYH1i9mH1Nqxo0caxLRRFXF5yZWYmpCDoDTMdQM1Y4z3Q5yj08qyrPH/d4AtumA==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "rc-select": "~14.14.0",
-        "rc-tree": "~5.8.1",
-        "rc-util": "^5.16.1"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
-    "node_modules/rc-upload": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.5.2.tgz",
-      "integrity": "sha512-QO3ne77DwnAPKFn0bA5qJM81QBjQi0e0NHdkvpFyY73Bea2NfITiotqJqVjHgeYPOJu5lLVR32TNGP084aSoXA==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "classnames": "^2.2.5",
-        "rc-util": "^5.2.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-util": {
-      "version": "5.43.0",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.43.0.tgz",
-      "integrity": "sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "react-is": "^18.2.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-virtual-list": {
-      "version": "3.14.3",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.14.3.tgz",
-      "integrity": "sha512-6+6wiEhdqakNBnbRJymgMlh+90qpkgqherTRo1l1cX7mK6F9hWsazPczmP0lA+64yhC9/t+M9Dh5pjvDWimn8A==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.0",
-        "classnames": "^2.2.6",
-        "rc-resize-observer": "^1.0.0",
-        "rc-util": "^5.36.0"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -11173,6 +10288,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -11184,7 +10300,8 @@
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true
     },
     "node_modules/react-refresh": {
       "version": "0.14.2",
@@ -11259,7 +10376,8 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
@@ -11331,11 +10449,6 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -11485,18 +10598,11 @@
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
     },
-    "node_modules/scroll-into-view-if-needed": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
-      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
-      "dependencies": {
-        "compute-scroll-into-view": "^3.0.2"
-      }
-    },
     "node_modules/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
@@ -11875,11 +10981,6 @@
         "safe-buffer": "~5.2.0"
       }
     },
-    "node_modules/string-convert": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
-      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
-    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -11984,11 +11085,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/stylis": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
-      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
-    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -12260,14 +11356,6 @@
         "real-require": "^0.2.0"
       }
     },
-    "node_modules/throttle-debounce": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
-      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
-      "engines": {
-        "node": ">=12.22"
-      }
-    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -12367,11 +11455,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toggle-selection": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
-    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
diff --git a/package.json b/package.json
index 76fd546..d5bbe1c 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,10 @@
     "watch": "nodemon"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.3.6",
     "@near-js/transactions": "^0.2.1",
     "@near-wallet-selector/core": "^8.5.2",
     "@near-wallet-selector/wallet-utils": "^8.5.2",
     "@vitejs/plugin-react": "^4.2.1",
-    "antd": "^5.12.8",
     "class-variance-authority": "^0.7.0",
     "js-sha256": "^0.11.0",
     "multichain-tools": "2.0.14-beta.10",
@@ -56,4 +54,4 @@
   "type": "commonjs",
   "main": "./src/index.js",
   "typings": "./src/index.d.ts"
-}
\ No newline at end of file
+}
diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index fab1c8d..80592e6 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -1,12 +1,8 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
-import { Modal, Drawer, Spin, Flex } from 'antd';
-import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
-
-const boxStyle: React.CSSProperties = {
-  width: '100%',
-  height: '100%',
-};
+import { Modal } from './components/modal';
+import { Drawer } from './components/Drawer';
+import { CloseOutlined } from '@ant-design/icons';
 
 export type IframeModalProps = {
   iframeSrc: string;
@@ -69,86 +65,47 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
     };
 
     const iframeElement = (
-      <>
-        {!isIframeLoaded && (
-          <Flex style={boxStyle} justify="center" align="center">
-            <Spin
-              indicator={
-                <LoadingOutlined style={{ fontSize: 55, color: '#fff' }} spin />
-              }
-            />
-          </Flex>
-        )}
-        <iframe
-          ref={ref}
-          id="nfw-connect-iframe"
-          title="Iframe Content"
-          src={iframeSrc}
-          width="100%"
-          height="100%" // Set your desired height
-          allowFullScreen
-          allow="publickey-credentials-get *; clipboard-write"
-          style={{ borderRadius: '12px' }}
-          onLoad={() => {
-            setIsIframeLoaded(true);
-          }}
-        />
-      </>
+      <iframe
+        ref={ref}
+        id="nfw-connect-iframe"
+        title="Iframe Content"
+        src={iframeSrc}
+        width="100%"
+        height="100%" // Set your desired height
+        allowFullScreen
+        allow="publickey-credentials-get *; clipboard-write"
+        style={{ borderRadius: '12px' }}
+        onLoad={() => {
+          setIsIframeLoaded(true);
+        }}
+      />
     );
 
-    if (!isModal) {
-      return iframeElement;
+    if (!isModal && isDialogOpen) {
+      return (
+        <div id="nfw-connect-iframe-container" style={{
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        }}>
+
+          {iframeElement}
+        </div>
+      );
     }
 
     if (isMobile) {
       return (
         <Drawer
-          placement="bottom"
-          width="auto"
+          isOpen={isDialogOpen}
           onClose={handleDialogClose}
-          open={isDialogOpen}
-          contentWrapperStyle={{ height: 'unset' }}
-          zIndex={10000}
-          destroyOnClose
-          closeIcon={isIframeLoaded}
-          maskClosable={false}
-          styles={{
-            header: {
-              display: 'none',
-            },
-            content: {
-              padding: 0,
-              borderTopRightRadius: '12px',
-              borderTopLeftRadius: '12px',
-              height: dialogHeight,
-              maxHeight: '80vh',
-              ...(isHidden ? { display: 'none' } : {}),
-            },
-            body: {
-              width: '100%',
-              padding: 0,
-              overflow: 'hidden',
-              position: 'relative',
-              ...(isHidden ? { display: 'none' } : {}),
-            },
-            ...(isHidden ? { mask: { display: 'none' } } : {}),
-          }}
+          dialogHeight={dialogHeight}
+          isHidden={isHidden}
         >
-          {isIframeLoaded && (
-            <CloseOutlined // Add close button
-              style={{
-                cursor: 'pointer',
-                position: 'absolute',
-                top: '16px',
-                right: '16px',
-                width: '16px',
-                height: '16px',
-                color: '#706F6C',
-              }}
-              onClick={handleDialogClose}
-            />
-          )}
-
           {iframeElement}
         </Drawer>
       );
@@ -156,29 +113,10 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
 
     return (
       <Modal
-        centered
-        open={isDialogOpen}
-        onOk={() => setIsDialogOpen(false)}
-        onCancel={handleDialogClose}
-        footer={null}
-        width="auto"
-        zIndex={10000}
-        closeIcon={isIframeLoaded}
-        maskClosable={false}
-        destroyOnClose
-        styles={{
-          content: {
-            padding: 0,
-            ...(isHidden ? { display: 'none' } : {}),
-          },
-          body: {
-            height: dialogHeight,
-            width: '375px',
-            borderRadius: '12px',
-            ...(isHidden ? { display: 'none' } : {}),
-          },
-          ...(isHidden ? { mask: { display: 'none' } } : {}),
-        }}
+        isOpen={isDialogOpen}
+        onClose={handleDialogClose}
+        dialogHeight={dialogHeight}
+        isHidden={isHidden}
       >
         {iframeElement}
       </Modal>
diff --git a/src/ui/components/CloseIcon.tsx b/src/ui/components/CloseIcon.tsx
new file mode 100644
index 0000000..86fe427
--- /dev/null
+++ b/src/ui/components/CloseIcon.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface CloseIconProps {
+  onClick: () => void;
+}
+
+export const CloseIcon: React.FC<CloseIconProps> = ({ onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        cursor: 'pointer',
+        position: 'absolute',
+        top: '16px',
+        right: '16px',
+        width: '24px',
+        height: '24px',
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L8 6.29289L3.85355 2.14645C3.65829 1.95118 3.34171 1.95118 3.14645 2.14645C2.95118 2.34171 2.95118 2.65829 3.14645 2.85355L7.29289 7L3.14645 11.1464C2.95118 11.3417 2.95118 11.6583 3.14645 11.8536C3.34171 12.0488 3.65829 12.0488 3.85355 11.8536L8 7.70711L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L8.70711 7L12.8536 2.85355Z"
+          fill="#706F6C"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default CloseIcon;
diff --git a/src/ui/components/Drawer.tsx b/src/ui/components/Drawer.tsx
new file mode 100644
index 0000000..fe14fbd
--- /dev/null
+++ b/src/ui/components/Drawer.tsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { CloseIcon } from './CloseIcon';
+import { Overlay } from './Overlay';
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  isHidden?: boolean;
+  dialogHeight?: string;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, children, isHidden = false, dialogHeight = '375px' }) => {
+  const [drawerRoot, setDrawerRoot] = useState<HTMLElement | null>(null);
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = document.createElement('div');
+    root.id = 'drawer-root';
+    document.body.appendChild(root);
+    setDrawerRoot(root);
+
+    return () => {
+      document.body.removeChild(root);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !drawerRoot) return null;
+
+  const drawerContent = (
+    <div
+      ref={drawerRef}
+      style={{
+        position: 'fixed',
+        backgroundColor: 'white',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        zIndex: 10001,
+        transition: 'transform 0.3s ease-in-out',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: isHidden ? 'none' : 'block',
+        height: dialogHeight,
+        borderTopRightRadius: '12px',
+        borderTopLeftRadius: '12px',
+        transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
+        overflow: 'auto',
+      }}
+    >
+      <CloseIcon onClick={onClose} />
+      {children}
+    </div>
+  );
+
+  return ReactDOM.createPortal(
+    <Overlay isOpen={isOpen} onClose={onClose}>
+      {drawerContent}
+    </Overlay>,
+    drawerRoot
+  );
+};
diff --git a/src/ui/components/Modal.tsx b/src/ui/components/Modal.tsx
new file mode 100644
index 0000000..3c75c7e
--- /dev/null
+++ b/src/ui/components/Modal.tsx
@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { useMediaQuery } from 'usehooks-ts';
+import { CloseIcon } from './CloseIcon';
+import { Overlay } from './Overlay';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  dialogHeight?: string;
+  isHidden?: boolean;
+}
+
+export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, dialogHeight = '500px', isHidden = false }) => {
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  const [modalRoot, setModalRoot] = useState<HTMLElement | null>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = document.createElement('div');
+    root.id = 'modal-root';
+    document.body.appendChild(root);
+    setModalRoot(root);
+
+    return () => {
+      document.body.removeChild(root);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !modalRoot) return null;
+
+  const modalContent = (
+    <div
+      ref={modalRef}
+      style={{
+        display: isHidden ? 'none' : 'block',
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        zIndex: 10001,
+        width: isMobile ? '100%' : '375px',
+        maxWidth: '100%',
+        height: dialogHeight,
+        maxHeight: isMobile ? '80vh' : 'none',
+        overflow: 'auto',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+      }}
+    >
+      <CloseIcon onClick={onClose} />
+      {children}
+    </div>
+  );
+
+  return ReactDOM.createPortal(
+    <Overlay isOpen={isOpen} onClose={onClose}>
+      {modalContent}
+    </Overlay>,
+    modalRoot
+  );
+};
diff --git a/src/ui/components/Overlay.tsx b/src/ui/components/Overlay.tsx
new file mode 100644
index 0000000..a74364e
--- /dev/null
+++ b/src/ui/components/Overlay.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+interface OverlayProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export const Overlay: React.FC<OverlayProps> = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  const overlayContent = (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 10000,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+      onClick={onClose}
+    >
+      <div onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+  );
+
+  return ReactDOM.createPortal(
+    overlayContent,
+    document.body
+  );
+};

From 596d11e9daa585168e5b74b57773cf3930cd8b4d Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 4 Oct 2024 18:01:57 +0700
Subject: [PATCH 03/20] Include spinner

---
 src/ui/IframeDialog.tsx           | 41 +++++++++++-----------
 src/ui/components/Drawer.tsx      | 57 ++++++++++++++-----------------
 src/ui/components/Modal.tsx       | 57 ++++++++++++++-----------------
 src/ui/components/Spinner.tsx     | 40 ++++++++++++++++++++++
 src/ui/hooks/useOnClickOutside.ts | 28 +++++++++++++++
 src/ui/hooks/usePortal.ts         | 18 ++++++++++
 6 files changed, 159 insertions(+), 82 deletions(-)
 create mode 100644 src/ui/components/Spinner.tsx
 create mode 100644 src/ui/hooks/useOnClickOutside.ts
 create mode 100644 src/ui/hooks/usePortal.ts

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 80592e6..65b5b6d 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -1,12 +1,10 @@
-import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import { useState, useEffect, useRef, forwardRef } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
 import { Modal } from './components/modal';
 import { Drawer } from './components/Drawer';
-import { CloseOutlined } from '@ant-design/icons';
-
 export type IframeModalProps = {
   iframeSrc: string;
-  isOpen?: boolean;
+  isOpen: boolean;
   isModal?: boolean;
 };
 
@@ -65,21 +63,23 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
     };
 
     const iframeElement = (
-      <iframe
-        ref={ref}
-        id="nfw-connect-iframe"
-        title="Iframe Content"
-        src={iframeSrc}
-        width="100%"
-        height="100%" // Set your desired height
-        allowFullScreen
-        allow="publickey-credentials-get *; clipboard-write"
-        style={{ borderRadius: '12px' }}
-        onLoad={() => {
-          setIsIframeLoaded(true);
-        }}
-      />
-    );
+      <>
+        <iframe
+          ref={ref}
+          id="nfw-connect-iframe"
+          title="Iframe Content"
+          src={iframeSrc}
+          width="100%"
+          height="100%" // Set your desired height
+          allowFullScreen
+          allow="publickey-credentials-get *; clipboard-write"
+          onLoad={() => {
+            setIsIframeLoaded(true);
+          }}
+        />
+      </>
+    )
+
 
     if (!isModal && isDialogOpen) {
       return (
@@ -92,7 +92,6 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
           right: 0,
           bottom: 0
         }}>
-
           {iframeElement}
         </div>
       );
@@ -105,6 +104,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
           onClose={handleDialogClose}
           dialogHeight={dialogHeight}
           isHidden={isHidden}
+          isLoading={!isIframeLoaded}
         >
           {iframeElement}
         </Drawer>
@@ -117,6 +117,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         onClose={handleDialogClose}
         dialogHeight={dialogHeight}
         isHidden={isHidden}
+        isLoading={!isIframeLoaded}
       >
         {iframeElement}
       </Modal>
diff --git a/src/ui/components/Drawer.tsx b/src/ui/components/Drawer.tsx
index fe14fbd..8ce9392 100644
--- a/src/ui/components/Drawer.tsx
+++ b/src/ui/components/Drawer.tsx
@@ -1,7 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { CloseIcon } from './CloseIcon';
 import { Overlay } from './Overlay';
+import { usePortal } from '../hooks/usePortal';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { Spinner } from './Spinner';
 
 interface DrawerProps {
   isOpen: boolean;
@@ -9,40 +12,23 @@ interface DrawerProps {
   children: React.ReactNode;
   isHidden?: boolean;
   dialogHeight?: string;
+  isLoading?: boolean;
 }
 
-export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, children, isHidden = false, dialogHeight = '375px' }) => {
-  const [drawerRoot, setDrawerRoot] = useState<HTMLElement | null>(null);
+export const Drawer: React.FC<DrawerProps> = ({
+  isOpen,
+  onClose,
+  children,
+  isHidden = false,
+  dialogHeight = '375px',
+  isLoading = false
+}) => {
+  const portalRoot = usePortal();
   const drawerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const root = document.createElement('div');
-    root.id = 'drawer-root';
-    document.body.appendChild(root);
-    setDrawerRoot(root);
+  useOnClickOutside(drawerRef, onClose);
 
-    return () => {
-      document.body.removeChild(root);
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen, onClose]);
-
-  if (!isOpen || !drawerRoot) return null;
+  if (!isOpen || !portalRoot) return null;
 
   const drawerContent = (
     <div
@@ -71,8 +57,17 @@ export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, children, isHid
 
   return ReactDOM.createPortal(
     <Overlay isOpen={isOpen} onClose={onClose}>
+      {isLoading && <Spinner
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          zIndex: 10001
+        }}
+      />}
       {drawerContent}
     </Overlay>,
-    drawerRoot
+    portalRoot
   );
 };
diff --git a/src/ui/components/Modal.tsx b/src/ui/components/Modal.tsx
index 3c75c7e..de5b757 100644
--- a/src/ui/components/Modal.tsx
+++ b/src/ui/components/Modal.tsx
@@ -1,8 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { useMediaQuery } from 'usehooks-ts';
 import { CloseIcon } from './CloseIcon';
 import { Overlay } from './Overlay';
+import { usePortal } from '../hooks/usePortal';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { Spinner } from './Spinner';
 
 interface ModalProps {
   isOpen: boolean;
@@ -10,41 +13,24 @@ interface ModalProps {
   children: React.ReactNode;
   dialogHeight?: string;
   isHidden?: boolean;
+  isLoading?: boolean;
 }
 
-export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, dialogHeight = '500px', isHidden = false }) => {
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+  dialogHeight = '500px',
+  isHidden = false,
+  isLoading = false
+}) => {
   const isMobile = useMediaQuery('(max-width: 767px)');
-  const [modalRoot, setModalRoot] = useState<HTMLElement | null>(null);
   const modalRef = useRef<HTMLDivElement>(null);
+  const portalRoot = usePortal();
 
-  useEffect(() => {
-    const root = document.createElement('div');
-    root.id = 'modal-root';
-    document.body.appendChild(root);
-    setModalRoot(root);
+  useOnClickOutside(modalRef, onClose);
 
-    return () => {
-      document.body.removeChild(root);
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen, onClose]);
-
-  if (!isOpen || !modalRoot) return null;
+  if (!isOpen || !portalRoot) return null;
 
   const modalContent = (
     <div
@@ -75,8 +61,17 @@ export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, dialogH
 
   return ReactDOM.createPortal(
     <Overlay isOpen={isOpen} onClose={onClose}>
+      {isLoading && <Spinner
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          zIndex: 10001
+        }}
+      />}
       {modalContent}
     </Overlay>,
-    modalRoot
+    portalRoot
   );
 };
diff --git a/src/ui/components/Spinner.tsx b/src/ui/components/Spinner.tsx
new file mode 100644
index 0000000..c0b3295
--- /dev/null
+++ b/src/ui/components/Spinner.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({ size = 24, color = '#fff', ...props }) => {
+  return (
+    <svg
+      {...props}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        animation: 'spin 1s linear infinite',
+      }}
+    >
+      <style>
+        {`
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke={color}
+        strokeWidth="4"
+        fill="none"
+        strokeDasharray="31.4 31.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/ui/hooks/useOnClickOutside.ts b/src/ui/hooks/useOnClickOutside.ts
new file mode 100644
index 0000000..bc00014
--- /dev/null
+++ b/src/ui/hooks/useOnClickOutside.ts
@@ -0,0 +1,28 @@
+import { RefObject, useEffect } from 'react';
+
+type Handler = (event: MouseEvent) => void;
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: Handler,
+  mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      const el = ref?.current;
+
+      // Do nothing if clicking ref's element or descendent elements
+      if (!el || el.contains(event.target as Node)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener(mouseEvent, listener);
+
+    return () => {
+      document.removeEventListener(mouseEvent, listener);
+    };
+  }, [ref, handler, mouseEvent]);
+}
diff --git a/src/ui/hooks/usePortal.ts b/src/ui/hooks/usePortal.ts
new file mode 100644
index 0000000..8d73e2e
--- /dev/null
+++ b/src/ui/hooks/usePortal.ts
@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+export const usePortal = () => {
+  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const root = document.createElement('div');
+    root.id = 'portal-root';
+    document.body.appendChild(root);
+    setPortalRoot(root);
+
+    return () => {
+      document.body.removeChild(root);
+    };
+  }, []);
+
+  return portalRoot;
+};

From e02596c56f66f7efa9d5279c8e7dc5a569f15099 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 4 Oct 2024 18:04:45 +0700
Subject: [PATCH 04/20] Unify Drawer and Modal

---
 src/ui/IframeDialog.tsx                     | 38 ++++-------
 src/ui/components/{Modal.tsx => Dialog.tsx} | 49 +++++++++-----
 src/ui/components/Drawer.tsx                | 73 ---------------------
 3 files changed, 42 insertions(+), 118 deletions(-)
 rename src/ui/components/{Modal.tsx => Dialog.tsx} (59%)
 delete mode 100644 src/ui/components/Drawer.tsx

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 65b5b6d..d6a015d 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect, useRef, forwardRef } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
-import { Modal } from './components/modal';
-import { Drawer } from './components/Drawer';
+import { Dialog } from './components/Dialog';
 export type IframeModalProps = {
   iframeSrc: string;
   isOpen: boolean;
@@ -97,31 +96,16 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
       );
     }
 
-    if (isMobile) {
-      return (
-        <Drawer
-          isOpen={isDialogOpen}
-          onClose={handleDialogClose}
-          dialogHeight={dialogHeight}
-          isHidden={isHidden}
-          isLoading={!isIframeLoaded}
-        >
-          {iframeElement}
-        </Drawer>
-      );
-    }
-
-    return (
-      <Modal
-        isOpen={isDialogOpen}
-        onClose={handleDialogClose}
-        dialogHeight={dialogHeight}
-        isHidden={isHidden}
-        isLoading={!isIframeLoaded}
-      >
-        {iframeElement}
-      </Modal>
-    );
+    return <Dialog
+      isOpen={isDialogOpen}
+      onClose={handleDialogClose}
+      dialogHeight={dialogHeight}
+      isHidden={isHidden}
+      isLoading={!isIframeLoaded}
+      isMobile={isMobile}
+    >
+      {iframeElement}
+    </Dialog>
   }
 );
 
diff --git a/src/ui/components/Modal.tsx b/src/ui/components/Dialog.tsx
similarity index 59%
rename from src/ui/components/Modal.tsx
rename to src/ui/components/Dialog.tsx
index de5b757..966e302 100644
--- a/src/ui/components/Modal.tsx
+++ b/src/ui/components/Dialog.tsx
@@ -1,54 +1,67 @@
 import React, { useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { useMediaQuery } from 'usehooks-ts';
 import { CloseIcon } from './CloseIcon';
 import { Overlay } from './Overlay';
 import { usePortal } from '../hooks/usePortal';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
 import { Spinner } from './Spinner';
 
-interface ModalProps {
+interface DialogProps {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
   dialogHeight?: string;
   isHidden?: boolean;
   isLoading?: boolean;
+  isMobile: boolean;
 }
 
-export const Modal: React.FC<ModalProps> = ({
+export const Dialog: React.FC<DialogProps> = ({
   isOpen,
   onClose,
   children,
   dialogHeight = '500px',
   isHidden = false,
-  isLoading = false
+  isLoading = false,
+  isMobile
 }) => {
-  const isMobile = useMediaQuery('(max-width: 767px)');
-  const modalRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
   const portalRoot = usePortal();
 
-  useOnClickOutside(modalRef, onClose);
+  useOnClickOutside(dialogRef, onClose);
 
   if (!isOpen || !portalRoot) return null;
 
-  const modalContent = (
+  const dialogContent = (
     <div
-      ref={modalRef}
+      ref={dialogRef}
       style={{
         display: isHidden ? 'none' : 'block',
         position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
         backgroundColor: 'white',
-        borderRadius: '12px',
         boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
         zIndex: 10001,
-        width: isMobile ? '100%' : '375px',
-        maxWidth: '100%',
-        height: dialogHeight,
-        maxHeight: isMobile ? '80vh' : 'none',
+        ...(isMobile
+          ? {
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: dialogHeight,
+            borderTopRightRadius: '12px',
+            borderTopLeftRadius: '12px',
+            transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
+            transition: 'transform 0.3s ease-in-out',
+          }
+          : {
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: '375px',
+            maxWidth: '100%',
+            height: dialogHeight,
+            maxHeight: 'none',
+            borderRadius: '12px',
+          }),
         overflow: 'auto',
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
@@ -70,7 +83,7 @@ export const Modal: React.FC<ModalProps> = ({
           zIndex: 10001
         }}
       />}
-      {modalContent}
+      {dialogContent}
     </Overlay>,
     portalRoot
   );
diff --git a/src/ui/components/Drawer.tsx b/src/ui/components/Drawer.tsx
deleted file mode 100644
index 8ce9392..0000000
--- a/src/ui/components/Drawer.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { CloseIcon } from './CloseIcon';
-import { Overlay } from './Overlay';
-import { usePortal } from '../hooks/usePortal';
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
-import { Spinner } from './Spinner';
-
-interface DrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-  isHidden?: boolean;
-  dialogHeight?: string;
-  isLoading?: boolean;
-}
-
-export const Drawer: React.FC<DrawerProps> = ({
-  isOpen,
-  onClose,
-  children,
-  isHidden = false,
-  dialogHeight = '375px',
-  isLoading = false
-}) => {
-  const portalRoot = usePortal();
-  const drawerRef = useRef<HTMLDivElement>(null);
-
-  useOnClickOutside(drawerRef, onClose);
-
-  if (!isOpen || !portalRoot) return null;
-
-  const drawerContent = (
-    <div
-      ref={drawerRef}
-      style={{
-        position: 'fixed',
-        backgroundColor: 'white',
-        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-        zIndex: 10001,
-        transition: 'transform 0.3s ease-in-out',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: isHidden ? 'none' : 'block',
-        height: dialogHeight,
-        borderTopRightRadius: '12px',
-        borderTopLeftRadius: '12px',
-        transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
-        overflow: 'auto',
-      }}
-    >
-      <CloseIcon onClick={onClose} />
-      {children}
-    </div>
-  );
-
-  return ReactDOM.createPortal(
-    <Overlay isOpen={isOpen} onClose={onClose}>
-      {isLoading && <Spinner
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          zIndex: 10001
-        }}
-      />}
-      {drawerContent}
-    </Overlay>,
-    portalRoot
-  );
-};

From 1d3495bb9e270bad6e8d6ad3185ca9d10933a4cc Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Sat, 5 Oct 2024 16:34:54 +0700
Subject: [PATCH 05/20] Remove inline styles

---
 src/ui/IframeDialog.tsx         |  61 ++++++++----------
 src/ui/components/CloseIcon.tsx |  26 ++------
 src/ui/components/Dialog.tsx    |  52 ++++------------
 src/ui/components/Overlay.tsx   |  18 ++----
 src/ui/components/Spinner.tsx   |  12 +---
 src/ui/reactApp.tsx             |   9 +--
 src/ui/styles.css               | 106 ++++++++++++++++++++++++++++++++
 7 files changed, 159 insertions(+), 125 deletions(-)
 create mode 100644 src/ui/styles.css

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index d6a015d..9156955 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, forwardRef } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
 import { Dialog } from './components/Dialog';
+
 export type IframeModalProps = {
   iframeSrc: string;
   isOpen: boolean;
@@ -62,50 +63,38 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
     };
 
     const iframeElement = (
-      <>
-        <iframe
-          ref={ref}
-          id="nfw-connect-iframe"
-          title="Iframe Content"
-          src={iframeSrc}
-          width="100%"
-          height="100%" // Set your desired height
-          allowFullScreen
-          allow="publickey-credentials-get *; clipboard-write"
-          onLoad={() => {
-            setIsIframeLoaded(true);
-          }}
-        />
-      </>
+      <iframe
+        ref={ref}
+        id="nfw-connect-iframe"
+        title="Iframe Content"
+        src={iframeSrc}
+        className="iframe"
+        allowFullScreen
+        allow="publickey-credentials-get *; clipboard-write"
+        onLoad={() => {
+          setIsIframeLoaded(true);
+        }}
+      />
     )
 
-
     if (!isModal && isDialogOpen) {
       return (
-        <div id="nfw-connect-iframe-container" style={{
-          width: '100%',
-          height: '100%',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0
-        }}>
+        <div id="nfw-connect-iframe-container" className="iframe-container">
           {iframeElement}
         </div>
       );
+    } else {
+      return <Dialog
+        isOpen={isDialogOpen}
+        onClose={handleDialogClose}
+        dialogHeight={dialogHeight}
+        isHidden={isHidden}
+        isLoading={!isIframeLoaded}
+        isMobile={isMobile}
+      >
+        {iframeElement}
+      </Dialog>
     }
-
-    return <Dialog
-      isOpen={isDialogOpen}
-      onClose={handleDialogClose}
-      dialogHeight={dialogHeight}
-      isHidden={isHidden}
-      isLoading={!isIframeLoaded}
-      isMobile={isMobile}
-    >
-      {iframeElement}
-    </Dialog>
   }
 );
 
diff --git a/src/ui/components/CloseIcon.tsx b/src/ui/components/CloseIcon.tsx
index 86fe427..8612949 100644
--- a/src/ui/components/CloseIcon.tsx
+++ b/src/ui/components/CloseIcon.tsx
@@ -1,27 +1,12 @@
-import React from 'react';
+import React, { ButtonHTMLAttributes } from 'react';
 
-interface CloseIconProps {
-  onClick: () => void;
-}
+type CloseIconProps = ButtonHTMLAttributes<HTMLButtonElement>
 
-export const CloseIcon: React.FC<CloseIconProps> = ({ onClick }) => {
+export const CloseIcon: React.FC<CloseIconProps> = (props) => {
   return (
     <button
-      onClick={onClick}
-      style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        top: '16px',
-        right: '16px',
-        width: '24px',
-        height: '24px',
-        background: 'none',
-        border: 'none',
-        padding: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
+      {...props}
+      className="close-icon"
     >
       <svg
         width="16"
@@ -32,7 +17,6 @@ export const CloseIcon: React.FC<CloseIconProps> = ({ onClick }) => {
       >
         <path
           d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L8 6.29289L3.85355 2.14645C3.65829 1.95118 3.34171 1.95118 3.14645 2.14645C2.95118 2.34171 2.95118 2.65829 3.14645 2.85355L7.29289 7L3.14645 11.1464C2.95118 11.3417 2.95118 11.6583 3.14645 11.8536C3.34171 12.0488 3.65829 12.0488 3.85355 11.8536L8 7.70711L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L8.70711 7L12.8536 2.85355Z"
-          fill="#706F6C"
         />
       </svg>
     </button>
diff --git a/src/ui/components/Dialog.tsx b/src/ui/components/Dialog.tsx
index 966e302..7fe4d7e 100644
--- a/src/ui/components/Dialog.tsx
+++ b/src/ui/components/Dialog.tsx
@@ -35,54 +35,28 @@ export const Dialog: React.FC<DialogProps> = ({
   const dialogContent = (
     <div
       ref={dialogRef}
+      className={`dialog ${isMobile ? 'dialog-mobile' : 'dialog-desktop'}`}
       style={{
         display: isHidden ? 'none' : 'block',
-        position: 'fixed',
-        backgroundColor: 'white',
-        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-        zIndex: 10001,
-        ...(isMobile
-          ? {
-            left: 0,
-            right: 0,
-            bottom: 0,
-            height: dialogHeight,
-            borderTopRightRadius: '12px',
-            borderTopLeftRadius: '12px',
-            transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
-            transition: 'transform 0.3s ease-in-out',
-          }
-          : {
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: '375px',
-            maxWidth: '100%',
-            height: dialogHeight,
-            maxHeight: 'none',
-            borderRadius: '12px',
-          }),
-        overflow: 'auto',
-        scrollbarWidth: 'none',
-        msOverflowStyle: 'none',
+        height: dialogHeight,
+        transform: isMobile && isOpen ? 'translateY(0)' : undefined,
       }}
     >
-      <CloseIcon onClick={onClose} />
+      <CloseIcon
+        onClick={onClose}
+      />
       {children}
     </div>
   );
 
   return ReactDOM.createPortal(
-    <Overlay isOpen={isOpen} onClose={onClose}>
-      {isLoading && <Spinner
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          zIndex: 10001
-        }}
-      />}
+    <Overlay
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      {isLoading && (
+        <Spinner className="spinner" />
+      )}
       {dialogContent}
     </Overlay>,
     portalRoot
diff --git a/src/ui/components/Overlay.tsx b/src/ui/components/Overlay.tsx
index a74364e..b6cd74d 100644
--- a/src/ui/components/Overlay.tsx
+++ b/src/ui/components/Overlay.tsx
@@ -1,29 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-interface OverlayProps {
+interface OverlayProps extends React.HTMLAttributes<HTMLDivElement> {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
 }
 
-export const Overlay: React.FC<OverlayProps> = ({ isOpen, onClose, children }) => {
+export const Overlay: React.FC<OverlayProps> = ({ isOpen, onClose, children, ...props }) => {
   if (!isOpen) return null;
 
   const overlayContent = (
     <div
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        zIndex: 10000,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
+      {...props}
+      className={`overlay ${props.className || ''}`}
       onClick={onClose}
     >
       <div onClick={(e) => e.stopPropagation()}>
diff --git a/src/ui/components/Spinner.tsx b/src/ui/components/Spinner.tsx
index c0b3295..f207f6b 100644
--- a/src/ui/components/Spinner.tsx
+++ b/src/ui/components/Spinner.tsx
@@ -9,22 +9,12 @@ export const Spinner: React.FC<SpinnerProps> = ({ size = 24, color = '#fff', ...
   return (
     <svg
       {...props}
+      className={`spinner ${props.className || ''}`}
       width={size}
       height={size}
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
-      style={{
-        animation: 'spin 1s linear infinite',
-      }}
     >
-      <style>
-        {`
-          @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-        `}
-      </style>
       <circle
         cx="12"
         cy="12"
diff --git a/src/ui/reactApp.tsx b/src/ui/reactApp.tsx
index a3f18de..565e4da 100644
--- a/src/ui/reactApp.tsx
+++ b/src/ui/reactApp.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import IframeDialog from './IframeDialog';
+import './styles.css';
 
 export const renderIFrame = ({
   iframeSrc,
@@ -18,9 +19,9 @@ export const renderIFrame = ({
 
   ReactDOM.createRoot(rootElement).render(
     <IframeDialog
-        isOpen
-        iframeSrc={iframeSrc}
-        isModal={isModal}
-      />
+      isOpen
+      iframeSrc={iframeSrc}
+      isModal={isModal}
+    />
   );
 };
diff --git a/src/ui/styles.css b/src/ui/styles.css
new file mode 100644
index 0000000..1832dad
--- /dev/null
+++ b/src/ui/styles.css
@@ -0,0 +1,106 @@
+/* Dialog styles */
+.dialog {
+  display: block;
+  position: fixed;
+  background-color: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.dialog::-webkit-scrollbar {
+  display: none;
+}
+
+.dialog-mobile {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-top-right-radius: 12px;
+  border-top-left-radius: 12px;
+  transform: translateY(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+.dialog-desktop {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 375px;
+  max-width: 100%;
+  max-height: none;
+  border-radius: 12px;
+}
+
+/* CloseIcon styles */
+.close-icon {
+  cursor: pointer;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.close-icon path {
+  fill: #706F6C;
+}
+
+/* Overlay styles */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* IframeDialog styles */
+.iframe-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Spinner styles */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
\ No newline at end of file

From 450aa79bbb83991223ab4861b6e7a2a402596458 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Sat, 5 Oct 2024 16:44:04 +0700
Subject: [PATCH 06/20] Simplify code

---
 src/ui/IframeDialog.tsx      |  6 +++---
 src/ui/components/Dialog.tsx | 32 ++++++++++++++------------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 9156955..fa56d2c 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -77,12 +77,12 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
       />
     )
 
-    if (!isModal && isDialogOpen) {
-      return (
+    if (!isModal) {
+      return isDialogOpen ? (
         <div id="nfw-connect-iframe-container" className="iframe-container">
           {iframeElement}
         </div>
-      );
+      ) : null;
     } else {
       return <Dialog
         isOpen={isDialogOpen}
diff --git a/src/ui/components/Dialog.tsx b/src/ui/components/Dialog.tsx
index 7fe4d7e..a526fab 100644
--- a/src/ui/components/Dialog.tsx
+++ b/src/ui/components/Dialog.tsx
@@ -32,23 +32,6 @@ export const Dialog: React.FC<DialogProps> = ({
 
   if (!isOpen || !portalRoot) return null;
 
-  const dialogContent = (
-    <div
-      ref={dialogRef}
-      className={`dialog ${isMobile ? 'dialog-mobile' : 'dialog-desktop'}`}
-      style={{
-        display: isHidden ? 'none' : 'block',
-        height: dialogHeight,
-        transform: isMobile && isOpen ? 'translateY(0)' : undefined,
-      }}
-    >
-      <CloseIcon
-        onClick={onClose}
-      />
-      {children}
-    </div>
-  );
-
   return ReactDOM.createPortal(
     <Overlay
       isOpen={isOpen}
@@ -57,7 +40,20 @@ export const Dialog: React.FC<DialogProps> = ({
       {isLoading && (
         <Spinner className="spinner" />
       )}
-      {dialogContent}
+      <div
+        ref={dialogRef}
+        className={`dialog ${isMobile ? 'dialog-mobile' : 'dialog-desktop'}`}
+        style={{
+          display: isHidden ? 'none' : 'block',
+          height: dialogHeight,
+          transform: isMobile && isOpen ? 'translateY(0)' : undefined,
+        }}
+      >
+        <CloseIcon
+          onClick={onClose}
+        />
+        {children}
+      </div>
     </Overlay>,
     portalRoot
   );

From 2c2ccb6976138ad267c904c611936599a9417f54 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Sat, 5 Oct 2024 17:05:34 +0700
Subject: [PATCH 07/20] Rename classes

---
 src/ui/IframeDialog.tsx         |  6 ++++--
 src/ui/components/CloseIcon.tsx |  2 +-
 src/ui/components/Dialog.tsx    |  4 ++--
 src/ui/components/Overlay.tsx   |  2 +-
 src/ui/components/Spinner.tsx   |  8 ++++----
 src/ui/styles.css               | 22 +++++++++++-----------
 6 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index fa56d2c..765c7a0 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, forwardRef } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
 import { Dialog } from './components/Dialog';
+import CloseIcon from './components/CloseIcon';
 
 export type IframeModalProps = {
   iframeSrc: string;
@@ -68,7 +69,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         id="nfw-connect-iframe"
         title="Iframe Content"
         src={iframeSrc}
-        className="iframe"
+        className="nfw-iframe"
         allowFullScreen
         allow="publickey-credentials-get *; clipboard-write"
         onLoad={() => {
@@ -79,7 +80,8 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
 
     if (!isModal) {
       return isDialogOpen ? (
-        <div id="nfw-connect-iframe-container" className="iframe-container">
+        <div id="nfw-connect-iframe-container" className="nfw-iframe-container">
+          <CloseIcon onClick={handleDialogClose} />
           {iframeElement}
         </div>
       ) : null;
diff --git a/src/ui/components/CloseIcon.tsx b/src/ui/components/CloseIcon.tsx
index 8612949..6fec268 100644
--- a/src/ui/components/CloseIcon.tsx
+++ b/src/ui/components/CloseIcon.tsx
@@ -6,7 +6,7 @@ export const CloseIcon: React.FC<CloseIconProps> = (props) => {
   return (
     <button
       {...props}
-      className="close-icon"
+      className="nfw-close-icon"
     >
       <svg
         width="16"
diff --git a/src/ui/components/Dialog.tsx b/src/ui/components/Dialog.tsx
index a526fab..1c09d39 100644
--- a/src/ui/components/Dialog.tsx
+++ b/src/ui/components/Dialog.tsx
@@ -38,11 +38,11 @@ export const Dialog: React.FC<DialogProps> = ({
       onClose={onClose}
     >
       {isLoading && (
-        <Spinner className="spinner" />
+        <Spinner />
       )}
       <div
         ref={dialogRef}
-        className={`dialog ${isMobile ? 'dialog-mobile' : 'dialog-desktop'}`}
+        className={`nfw-dialog ${isMobile ? 'nfw-dialog-mobile' : 'nfw-dialog-desktop'}`}
         style={{
           display: isHidden ? 'none' : 'block',
           height: dialogHeight,
diff --git a/src/ui/components/Overlay.tsx b/src/ui/components/Overlay.tsx
index b6cd74d..3cabcaa 100644
--- a/src/ui/components/Overlay.tsx
+++ b/src/ui/components/Overlay.tsx
@@ -13,7 +13,7 @@ export const Overlay: React.FC<OverlayProps> = ({ isOpen, onClose, children, ...
   const overlayContent = (
     <div
       {...props}
-      className={`overlay ${props.className || ''}`}
+      className={`nfw-overlay ${props.className || ''}`}
       onClick={onClose}
     >
       <div onClick={(e) => e.stopPropagation()}>
diff --git a/src/ui/components/Spinner.tsx b/src/ui/components/Spinner.tsx
index f207f6b..cacd3e5 100644
--- a/src/ui/components/Spinner.tsx
+++ b/src/ui/components/Spinner.tsx
@@ -9,7 +9,7 @@ export const Spinner: React.FC<SpinnerProps> = ({ size = 24, color = '#fff', ...
   return (
     <svg
       {...props}
-      className={`spinner ${props.className || ''}`}
+      className={`nfw-spinner ${props.className || ''}`}
       width={size}
       height={size}
       viewBox="0 0 24 24"
@@ -18,11 +18,11 @@ export const Spinner: React.FC<SpinnerProps> = ({ size = 24, color = '#fff', ...
       <circle
         cx="12"
         cy="12"
-        r="10"
+        r="11"
         stroke={color}
-        strokeWidth="4"
+        strokeWidth="3"
         fill="none"
-        strokeDasharray="31.4 31.4"
+        strokeDasharray="34.55751918948772 34.55751918948772"
         strokeLinecap="round"
       />
     </svg>
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 1832dad..ee00d20 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -1,5 +1,5 @@
 /* Dialog styles */
-.dialog {
+.nfw-dialog {
   display: block;
   position: fixed;
   background-color: white;
@@ -10,11 +10,11 @@
   -ms-overflow-style: none;
 }
 
-.dialog::-webkit-scrollbar {
+.nfw-dialog::-webkit-scrollbar {
   display: none;
 }
 
-.dialog-mobile {
+.nfw-dialog-mobile {
   left: 0;
   right: 0;
   bottom: 0;
@@ -24,7 +24,7 @@
   transition: transform 0.3s ease-in-out;
 }
 
-.dialog-desktop {
+.nfw-dialog-desktop {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -35,7 +35,7 @@
 }
 
 /* CloseIcon styles */
-.close-icon {
+.nfw-close-icon {
   cursor: pointer;
   position: absolute;
   top: 16px;
@@ -50,17 +50,17 @@
   justify-content: center;
 }
 
-.close-icon svg {
+.nfw-close-icon svg {
   width: 16px;
   height: 16px;
 }
 
-.close-icon path {
+.nfw-close-icon path {
   fill: #706F6C;
 }
 
 /* Overlay styles */
-.overlay {
+.nfw-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -74,7 +74,7 @@
 }
 
 /* IframeDialog styles */
-.iframe-container {
+.nfw-iframe-container {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -84,7 +84,7 @@
   bottom: 0;
 }
 
-.iframe {
+.nfw-iframe {
   width: 100%;
   height: 100%;
   border: none;
@@ -96,7 +96,7 @@
   100% { transform: rotate(360deg); }
 }
 
-.spinner {
+.nfw-spinner {
   animation: spin 1s linear infinite;
   position: absolute;
   top: 50%;

From 3c4c4ba6656d50b5e54ecbae3457ec64eec19cb8 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Sat, 5 Oct 2024 17:28:21 +0700
Subject: [PATCH 08/20] Update version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 039f8bb..8755c00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "near-fastauth-wallet",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "near-fastauth-wallet",
-      "version": "2.0.4",
+      "version": "2.0.5",
       "license": "MIT",
       "dependencies": {
         "@near-js/transactions": "^0.2.1",
diff --git a/package.json b/package.json
index 1649826..06ea6ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "near-fastauth-wallet",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "license": "MIT",
   "scripts": {
     "build": "nx build --buildLibsFromSource --skip-nx-cache",

From c11b66fbbc9ca02a05877716a1dd36c93d133645 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Thu, 17 Oct 2024 21:56:47 +0700
Subject: [PATCH 09/20] Configure tailwind basics

---
 components.json              |   13 +
 components/ui/dialog.tsx     |  120 ++++
 components/ui/drawer.tsx     |  116 ++++
 package-lock.json            |  707 +++++++++++++++++-----
 package.json                 |   16 +-
 src/ui/IframeDialog.tsx      |   14 +-
 src/ui/components/Dialog.tsx |  118 ++--
 src/ui/reactApp.tsx          |    2 +-
 src/ui/styles.css            |  103 ++++
 src/ui/styles.output.css     | 1084 ++++++++++++++++++++++++++++++++++
 src/ui/utils/index.ts        |    6 +
 tailwind.config.js           |   91 +++
 tsconfig.json                |    5 +-
 13 files changed, 2183 insertions(+), 212 deletions(-)
 create mode 100644 components.json
 create mode 100644 components/ui/dialog.tsx
 create mode 100644 components/ui/drawer.tsx
 create mode 100644 src/ui/styles.output.css
 create mode 100644 src/ui/utils/index.ts
 create mode 100644 tailwind.config.js

diff --git a/components.json b/components.json
new file mode 100644
index 0000000..2de9eee
--- /dev/null
+++ b/components.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/ui/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  }
+}
\ No newline at end of file
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..faba303
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from '../../src/ui/utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
new file mode 100644
index 0000000..f22b182
--- /dev/null
+++ b/components/ui/drawer.tsx
@@ -0,0 +1,116 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from '../../src/ui/utils'
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/package-lock.json b/package-lock.json
index 8755c00..4e71d9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,13 +12,19 @@
         "@near-js/transactions": "^0.2.1",
         "@near-wallet-selector/core": "^8.5.2",
         "@near-wallet-selector/wallet-utils": "^8.5.2",
+        "@radix-ui/react-dialog": "^1.1.2",
         "@vitejs/plugin-react": "^4.2.1",
         "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
         "js-sha256": "^0.11.0",
+        "lucide-react": "^0.453.0",
         "multichain-tools": "2.0.17",
         "near-api-js": "^2.1.4",
+        "tailwind-merge": "^2.5.4",
+        "tailwindcss-animate": "^1.0.7",
         "tslib": "^2.3.0",
-        "usehooks-ts": "^2.9.2"
+        "usehooks-ts": "^2.9.2",
+        "vaul": "^1.1.0"
       },
       "devDependencies": {
         "@nx/eslint-plugin": "16.8.1",
@@ -44,7 +50,7 @@
         "prettier": "^2.6.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "tailwindcss": "^3.4.1",
+        "tailwindcss": "^3.4.14",
         "typescript": "~5.1.3",
         "verdaccio": "^5.0.4",
         "vite": "~4.3.9",
@@ -60,7 +66,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -2027,7 +2032,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2039,7 +2044,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -2540,7 +2545,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -2557,7 +2561,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
       "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -2569,7 +2572,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -2580,14 +2582,12 @@
     "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
     "node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -2604,7 +2604,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -2619,7 +2618,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -2926,7 +2924,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -2939,7 +2936,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -2948,7 +2944,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -3364,7 +3359,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -3376,6 +3370,318 @@
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
       "dev": true
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3395,25 +3701,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -3521,13 +3827,13 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3537,7 +3843,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -4830,7 +5136,7 @@
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
       "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4851,7 +5157,7 @@
       "version": "8.3.3",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
       "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -4950,7 +5256,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4959,7 +5264,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -4973,14 +5277,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -5001,8 +5303,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -5010,6 +5311,18 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -5225,8 +5538,7 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/bare-events": {
       "version": "2.4.2",
@@ -5293,7 +5605,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -5453,7 +5764,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -5657,7 +5967,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -5748,7 +6057,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -5772,7 +6080,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5784,6 +6091,7 @@
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
       "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "license": "Apache-2.0",
       "dependencies": {
         "clsx": "2.0.0"
       },
@@ -5791,6 +6099,15 @@
         "url": "https://joebell.co.uk"
       }
     },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cli-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -5842,9 +6159,10 @@
       }
     },
     "node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -5858,7 +6176,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -5869,8 +6186,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colorette": {
       "version": "2.0.20",
@@ -5893,7 +6209,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -6071,13 +6386,12 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -6091,7 +6405,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -6103,7 +6416,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/dashdash": {
       "version": "1.14.1",
@@ -6203,6 +6516,12 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/detect-port": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.6.1.tgz",
@@ -6223,14 +6542,13 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -6259,8 +6577,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -6346,8 +6663,7 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
@@ -6416,8 +6732,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/encodeurl": {
       "version": "1.0.2",
@@ -7058,7 +7373,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -7139,7 +7453,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -7362,7 +7675,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7412,6 +7724,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
@@ -7443,7 +7764,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -7627,7 +7947,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -7795,6 +8114,15 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -7814,7 +8142,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -7826,7 +8153,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -7859,7 +8185,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7868,7 +8193,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7877,7 +8201,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -7898,7 +8221,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -7945,8 +8267,7 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/isstream": {
       "version": "0.1.2",
@@ -7994,7 +8315,6 @@
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
       "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
-      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -8042,7 +8362,6 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -8305,7 +8624,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -8484,6 +8802,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.453.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
+      "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.10",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
@@ -8512,7 +8839,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/media-typer": {
       "version": "0.3.0",
@@ -8533,7 +8860,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -8551,7 +8877,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
       "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -8635,7 +8960,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -9046,7 +9370,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -9280,7 +9603,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9422,7 +9744,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9431,7 +9752,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -9636,7 +9956,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9644,14 +9963,12 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -9667,7 +9984,6 @@
       "version": "10.2.2",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
       "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "dev": true,
       "engines": {
         "node": "14 || >=16.14"
       }
@@ -9728,7 +10044,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -9740,7 +10055,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9833,7 +10147,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -9889,7 +10202,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -9906,7 +10218,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -9925,7 +10236,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -9960,7 +10270,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
       "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -9972,7 +10281,6 @@
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
       "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
-      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -9984,7 +10292,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -10003,7 +10310,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
       "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10015,8 +10321,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -10179,7 +10484,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -10288,7 +10592,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -10311,11 +10614,80 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -10338,7 +10710,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -10453,7 +10824,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -10492,7 +10862,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -10533,7 +10902,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -10598,7 +10966,6 @@
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -10759,7 +11126,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -10771,7 +11137,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -10985,7 +11350,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -11000,7 +11364,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -11014,7 +11377,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11027,7 +11389,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11089,7 +11450,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -11111,7 +11471,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -11120,7 +11479,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
       "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
-      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -11136,7 +11494,6 @@
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
       "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
-      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^3.1.2",
@@ -11157,14 +11514,12 @@
     "node_modules/sucrase/node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/sucrase/node_modules/minimatch": {
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
       "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -11179,7 +11534,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -11203,7 +11557,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -11211,11 +11564,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
+      "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
-      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
-      "dev": true,
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
+      "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -11248,11 +11611,19 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tailwindcss/node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -11268,7 +11639,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -11330,7 +11700,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -11339,7 +11708,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -11447,7 +11815,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -11519,14 +11886,13 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/ts-node": {
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
       "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -11569,7 +11935,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "4.2.0",
@@ -11692,7 +12058,7 @@
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11848,6 +12214,49 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/usehooks-ts": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.16.0.tgz",
@@ -11865,8 +12274,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/utils-merge": {
       "version": "1.0.1",
@@ -11896,7 +12304,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "9.2.0",
@@ -11938,6 +12346,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vaul": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.0.tgz",
+      "integrity": "sha512-YhO/bikcauk48hzhMhvIvT+U87cuCbNbKk9fF4Ou5UkI9t2KkBMernmdP37pCzF15hrv55fcny1YhexK8h6GVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/verdaccio": {
       "version": "5.31.1",
       "resolved": "https://registry.npmjs.org/verdaccio/-/verdaccio-5.31.1.tgz",
@@ -12295,7 +12716,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -12359,7 +12779,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -12470,7 +12889,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
diff --git a/package.json b/package.json
index 06ea6ad..c0c941f 100644
--- a/package.json
+++ b/package.json
@@ -3,23 +3,31 @@
   "version": "2.0.5",
   "license": "MIT",
   "scripts": {
-    "build": "nx build --buildLibsFromSource --skip-nx-cache",
+    "build": "npm run tailwind:build && nx build --buildLibsFromSource --skip-nx-cache",
     "deploy": "npm run build && cd dist/near-fastauth-wallet && npm publish",
     "deploy:beta": "npm run build && cd dist/near-fastauth-wallet && npm publish --tag beta",
     "test": "nx test",
-    "watch": "nodemon"
+    "watch": "nodemon",
+    "tailwind": "npx tailwindcss -i ./src/ui/styles.css -o ./src/ui/styles.output.css --watch",
+    "tailwind:build": "npx tailwindcss -i ./src/ui/styles.css -o ./src/ui/styles.output.css"
   },
   "dependencies": {
     "@near-js/transactions": "^0.2.1",
     "@near-wallet-selector/core": "^8.5.2",
     "@near-wallet-selector/wallet-utils": "^8.5.2",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@vitejs/plugin-react": "^4.2.1",
     "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "js-sha256": "^0.11.0",
+    "lucide-react": "^0.453.0",
     "multichain-tools": "2.0.17",
     "near-api-js": "^2.1.4",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
     "tslib": "^2.3.0",
-    "usehooks-ts": "^2.9.2"
+    "usehooks-ts": "^2.9.2",
+    "vaul": "^1.1.0"
   },
   "devDependencies": {
     "@nx/eslint-plugin": "16.8.1",
@@ -45,7 +53,7 @@
     "prettier": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.14",
     "typescript": "~5.1.3",
     "verdaccio": "^5.0.4",
     "vite": "~4.3.9",
diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 765c7a0..935da9e 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, forwardRef } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
-import { Dialog } from './components/Dialog';
+import { Dialog2 } from './components/Dialog';
 import CloseIcon from './components/CloseIcon';
 
 export type IframeModalProps = {
@@ -86,16 +86,16 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         </div>
       ) : null;
     } else {
-      return <Dialog
+      return <Dialog2
         isOpen={isDialogOpen}
         onClose={handleDialogClose}
-        dialogHeight={dialogHeight}
-        isHidden={isHidden}
-        isLoading={!isIframeLoaded}
-        isMobile={isMobile}
+      // dialogHeight={dialogHeight}
+      // isHidden={isHidden}
+      // isLoading={!isIframeLoaded}
+      // isMobile={isMobile}
       >
         {iframeElement}
-      </Dialog>
+      </Dialog2>
     }
   }
 );
diff --git a/src/ui/components/Dialog.tsx b/src/ui/components/Dialog.tsx
index 1c09d39..ed75e9f 100644
--- a/src/ui/components/Dialog.tsx
+++ b/src/ui/components/Dialog.tsx
@@ -1,60 +1,72 @@
-import React, { useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { CloseIcon } from './CloseIcon';
-import { Overlay } from './Overlay';
-import { usePortal } from '../hooks/usePortal';
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
-import { Spinner } from './Spinner';
+import * as React from "react"
+
+import { useMediaQuery } from 'usehooks-ts';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../../../components/ui/drawer"
 
 interface DialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-  dialogHeight?: string;
-  isHidden?: boolean;
-  isLoading?: boolean;
-  isMobile: boolean;
+  isOpen: boolean
+  onClose: () => void
+  children: React.ReactNode
 }
 
-export const Dialog: React.FC<DialogProps> = ({
-  isOpen,
-  onClose,
-  children,
-  dialogHeight = '500px',
-  isHidden = false,
-  isLoading = false,
-  isMobile
-}) => {
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const portalRoot = usePortal();
-
-  useOnClickOutside(dialogRef, onClose);
+export function Dialog2({ isOpen, onClose, children }: DialogProps) {
+  const isDesktop = useMediaQuery("(min-width: 768px)")
 
-  if (!isOpen || !portalRoot) return null;
+  if (isDesktop) {
+    return (
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogTrigger asChild>
+          <button>Edit Profile</button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you're done.
+            </DialogDescription>
+          </DialogHeader>
+          {children}
+        </DialogContent>
+      </Dialog>
+    )
+  }
 
-  return ReactDOM.createPortal(
-    <Overlay
-      isOpen={isOpen}
-      onClose={onClose}
-    >
-      {isLoading && (
-        <Spinner />
-      )}
-      <div
-        ref={dialogRef}
-        className={`nfw-dialog ${isMobile ? 'nfw-dialog-mobile' : 'nfw-dialog-desktop'}`}
-        style={{
-          display: isHidden ? 'none' : 'block',
-          height: dialogHeight,
-          transform: isMobile && isOpen ? 'translateY(0)' : undefined,
-        }}
-      >
-        <CloseIcon
-          onClick={onClose}
-        />
+  return (
+    <Drawer open={isOpen} onOpenChange={onClose}>
+      <DrawerTrigger asChild>
+        <button>Edit Profile</button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Edit profile</DrawerTitle>
+          <DrawerDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DrawerDescription>
+        </DrawerHeader>
         {children}
-      </div>
-    </Overlay>,
-    portalRoot
-  );
-};
+        <DrawerFooter className="pt-2">
+          <DrawerClose asChild>
+            <button>Cancel</button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/src/ui/reactApp.tsx b/src/ui/reactApp.tsx
index 565e4da..a0e6817 100644
--- a/src/ui/reactApp.tsx
+++ b/src/ui/reactApp.tsx
@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import IframeDialog from './IframeDialog';
-import './styles.css';
+import './styles.output.css';
 
 export const renderIFrame = ({
   iframeSrc,
diff --git a/src/ui/styles.css b/src/ui/styles.css
index ee00d20..62dfe7c 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -1,3 +1,106 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+
+    --chart-1: 12 76% 61%;
+
+    --chart-2: 173 58% 39%;
+
+    --chart-3: 197 37% 24%;
+
+    --chart-4: 43 74% 66%;
+
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 0 0% 83.1%;
+
+    --radius: 0.5rem;
+
+    --chart-1: 220 70% 50%;
+
+    --chart-2: 160 60% 45%;
+
+    --chart-3: 30 80% 55%;
+
+    --chart-4: 280 65% 60%;
+
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+
 /* Dialog styles */
 .nfw-dialog {
   display: block;
diff --git a/src/ui/styles.output.css b/src/ui/styles.output.css
new file mode 100644
index 0000000..d18c145
--- /dev/null
+++ b/src/ui/styles.output.css
@@ -0,0 +1,1084 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --ring: 0 0% 3.9%;
+  --radius: 0.5rem;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.left-\[50\%\] {
+  left: 50%;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.top-\[50\%\] {
+  top: 50%;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-\[100px\] {
+  width: 100px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.gap-1\.5 {
+  gap: 0.375rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-sm {
+  border-radius: calc(var(--radius) - 4px);
+}
+
+.rounded-t-\[10px\] {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.bg-background {
+  background-color: hsl(var(--background));
+}
+
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
+
+.bg-muted {
+  background-color: hsl(var(--muted));
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ring-offset-background {
+  --tw-ring-offset-color: hsl(var(--background));
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+.duration-200 {
+  animation-duration: 200ms;
+}
+
+/* Dialog styles */
+
+.nfw-dialog {
+  display: block;
+  position: fixed;
+  background-color: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.nfw-dialog::-webkit-scrollbar {
+  display: none;
+}
+
+.nfw-dialog-mobile {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-top-right-radius: 12px;
+  border-top-left-radius: 12px;
+  transform: translateY(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+.nfw-dialog-desktop {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 375px;
+  max-width: 100%;
+  max-height: none;
+  border-radius: 12px;
+}
+
+/* CloseIcon styles */
+
+.nfw-close-icon {
+  cursor: pointer;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nfw-close-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.nfw-close-icon path {
+  fill: #706F6C;
+}
+
+/* Overlay styles */
+
+.nfw-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* IframeDialog styles */
+
+.nfw-iframe-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.nfw-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Spinner styles */
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.nfw-spinner {
+  animation: spin 1s linear infinite;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-ring:focus {
+  --tw-ring-color: hsl(var(--ring));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+
+.data-\[state\=open\]\:bg-accent[data-state="open"] {
+  background-color: hsl(var(--accent));
+}
+
+.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
+  color: hsl(var(--muted-foreground));
+}
+
+.data-\[state\=open\]\:animate-in[data-state="open"] {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:animate-out[data-state="closed"] {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+  --tw-exit-opacity: 0;
+}
+
+.data-\[state\=open\]\:fade-in-0[data-state="open"] {
+  --tw-enter-opacity: 0;
+}
+
+.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+  --tw-exit-scale: .95;
+}
+
+.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+  --tw-enter-scale: .95;
+}
+
+.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
+  --tw-exit-translate-x: -50%;
+}
+
+.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
+  --tw-exit-translate-y: -48%;
+}
+
+.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
+  --tw-enter-translate-x: -50%;
+}
+
+.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
+  --tw-enter-translate-y: -48%;
+}
+
+@media (min-width: 640px) {
+  .sm\:max-w-\[425px\] {
+    max-width: 425px;
+  }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:rounded-lg {
+    border-radius: var(--radius);
+  }
+
+  .sm\:text-left {
+    text-align: left;
+  }
+}
\ No newline at end of file
diff --git a/src/ui/utils/index.ts b/src/ui/utils/index.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/ui/utils/index.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..c299bb0
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,91 @@
+const { fontFamily } = require("tailwindcss/defaultTheme")
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["src/ui/**/*.{ts,tsx,js,jsx}", "components/**/*.{ts,tsx,js,jsx}"],
+  theme: {
+  	container: {
+  		center: 'true',
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		fontFamily: {
+  			sans: ["var(--font-sans)", ...fontFamily.sans]
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+}
diff --git a/tsconfig.json b/tsconfig.json
index 9b936ea..0d198b7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,10 +16,9 @@
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "baseUrl": "./src",
+    "baseUrl": ".",
     "paths": {
-      "@/ui/*": ["./src/ui/*"],
-      "near-fastauth-wallet": ["src/index.ts"]
+      "@/*": ["./*"]
     },
     "types": ["node"],
     "esModuleInterop": true

From 3fbd5aedebbf81783ad5e7fbc9667fef5a04c6bc Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 18 Oct 2024 15:50:15 +0700
Subject: [PATCH 10/20] Update dialog/drawer height

---
 components/ui/dialog.tsx     |  2 +-
 src/ui/IframeDialog.tsx      | 34 +++++++++++------
 src/ui/components/Dialog.tsx | 72 ------------------------------------
 3 files changed, 23 insertions(+), 85 deletions(-)
 delete mode 100644 src/ui/components/Dialog.tsx

diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index faba303..d998382 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 935da9e..5f5a080 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -1,6 +1,14 @@
 import { useState, useEffect, useRef, forwardRef } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
-import { Dialog2 } from './components/Dialog';
+import {
+  Dialog,
+  DialogContent,
+} from "../../components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+} from "../../components/ui/drawer"
 import CloseIcon from './components/CloseIcon';
 
 export type IframeModalProps = {
@@ -19,7 +27,7 @@ type MessageEventData = {
 
 export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
   ({ iframeSrc, isOpen, isModal }, ref) => {
-    const isMobile = useMediaQuery('(max-width: 767px)');
+    const isDesktop = useMediaQuery("(min-width: 768px)")
     const onCloseRef = useRef(null);
 
     const [isDialogOpen, setIsDialogOpen] = useState(isOpen);
@@ -86,16 +94,18 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         </div>
       ) : null;
     } else {
-      return <Dialog2
-        isOpen={isDialogOpen}
-        onClose={handleDialogClose}
-      // dialogHeight={dialogHeight}
-      // isHidden={isHidden}
-      // isLoading={!isIframeLoaded}
-      // isMobile={isMobile}
-      >
-        {iframeElement}
-      </Dialog2>
+      return isDesktop ?
+        <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
+          <DialogContent className="sm:max-w-[425px]" style={{ height: dialogHeight }}  >
+            {iframeElement}
+          </DialogContent>
+        </Dialog>
+        :
+        <Drawer open={isDialogOpen} onOpenChange={handleDialogClose}   >
+          <DrawerContent style={{ height: dialogHeight }}>
+            {iframeElement}
+          </DrawerContent>
+        </Drawer>
     }
   }
 );
diff --git a/src/ui/components/Dialog.tsx b/src/ui/components/Dialog.tsx
deleted file mode 100644
index ed75e9f..0000000
--- a/src/ui/components/Dialog.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from "react"
-
-import { useMediaQuery } from 'usehooks-ts';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../../components/ui/dialog"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "../../../components/ui/drawer"
-
-interface DialogProps {
-  isOpen: boolean
-  onClose: () => void
-  children: React.ReactNode
-}
-
-export function Dialog2({ isOpen, onClose, children }: DialogProps) {
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-
-  if (isDesktop) {
-    return (
-      <Dialog open={isOpen} onOpenChange={onClose}>
-        <DialogTrigger asChild>
-          <button>Edit Profile</button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Edit profile</DialogTitle>
-            <DialogDescription>
-              Make changes to your profile here. Click save when you're done.
-            </DialogDescription>
-          </DialogHeader>
-          {children}
-        </DialogContent>
-      </Dialog>
-    )
-  }
-
-  return (
-    <Drawer open={isOpen} onOpenChange={onClose}>
-      <DrawerTrigger asChild>
-        <button>Edit Profile</button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="text-left">
-          <DrawerTitle>Edit profile</DrawerTitle>
-          <DrawerDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DrawerDescription>
-        </DrawerHeader>
-        {children}
-        <DrawerFooter className="pt-2">
-          <DrawerClose asChild>
-            <button>Cancel</button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
-}

From 2f4a5c7e305a0af14f16b31830bf1d22af5f53b6 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 18 Oct 2024 15:52:05 +0700
Subject: [PATCH 11/20] Clean up code

---
 components/ui/dialog.tsx      | 59 -----------------------------------
 components/ui/drawer.tsx      | 53 -------------------------------
 src/ui/components/Overlay.tsx | 29 -----------------
 src/ui/styles.css             | 36 ---------------------
 4 files changed, 177 deletions(-)
 delete mode 100644 src/ui/components/Overlay.tsx

diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index d998382..ddb7e7a 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -51,61 +51,6 @@ const DialogContent = React.forwardRef<
 ))
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
 export {
   Dialog,
   DialogPortal,
@@ -113,8 +58,4 @@ export {
   DialogClose,
   DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
 }
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index f22b182..6d9cc98 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -53,55 +53,6 @@ const DrawerContent = React.forwardRef<
 ))
 DrawerContent.displayName = "DrawerContent"
 
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
 export {
   Drawer,
   DrawerPortal,
@@ -109,8 +60,4 @@ export {
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
 }
diff --git a/src/ui/components/Overlay.tsx b/src/ui/components/Overlay.tsx
deleted file mode 100644
index 3cabcaa..0000000
--- a/src/ui/components/Overlay.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-interface OverlayProps extends React.HTMLAttributes<HTMLDivElement> {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-}
-
-export const Overlay: React.FC<OverlayProps> = ({ isOpen, onClose, children, ...props }) => {
-  if (!isOpen) return null;
-
-  const overlayContent = (
-    <div
-      {...props}
-      className={`nfw-overlay ${props.className || ''}`}
-      onClick={onClose}
-    >
-      <div onClick={(e) => e.stopPropagation()}>
-        {children}
-      </div>
-    </div>
-  );
-
-  return ReactDOM.createPortal(
-    overlayContent,
-    document.body
-  );
-};
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 62dfe7c..10ad891 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -101,42 +101,6 @@
 }
 
 
-/* Dialog styles */
-.nfw-dialog {
-  display: block;
-  position: fixed;
-  background-color: white;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 1;
-  overflow: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.nfw-dialog::-webkit-scrollbar {
-  display: none;
-}
-
-.nfw-dialog-mobile {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-top-right-radius: 12px;
-  border-top-left-radius: 12px;
-  transform: translateY(0);
-  transition: transform 0.3s ease-in-out;
-}
-
-.nfw-dialog-desktop {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 375px;
-  max-width: 100%;
-  max-height: none;
-  border-radius: 12px;
-}
-
 /* CloseIcon styles */
 .nfw-close-icon {
   cursor: pointer;

From d95d94bc2205ad2a1704f5423304cf423bc57877 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 18 Oct 2024 18:06:51 +0700
Subject: [PATCH 12/20] Clean up code

---
 components.json                               |   4 +
 src/ui/IframeDialog.tsx                       |  17 +-
 src/ui/components/CloseIcon.tsx               |  26 ---
 src/ui/components/Spinner.tsx                 |  30 ---
 .../ui/components}/ui/dialog.tsx              |  12 +-
 .../ui/components}/ui/drawer.tsx              |   9 +-
 src/ui/hooks/useOnClickOutside.ts             |  28 ---
 src/ui/hooks/usePortal.ts                     |  18 --
 src/ui/styles.css                             |  55 -----
 src/ui/styles.output.css                      | 199 +-----------------
 10 files changed, 38 insertions(+), 360 deletions(-)
 delete mode 100644 src/ui/components/CloseIcon.tsx
 delete mode 100644 src/ui/components/Spinner.tsx
 rename {components => src/ui/components}/ui/dialog.tsx (65%)
 rename {components => src/ui/components}/ui/drawer.tsx (76%)
 delete mode 100644 src/ui/hooks/useOnClickOutside.ts
 delete mode 100644 src/ui/hooks/usePortal.ts

diff --git a/components.json b/components.json
index 2de9eee..85a8c8c 100644
--- a/components.json
+++ b/components.json
@@ -9,5 +9,9 @@
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
+  }, 
+  "aliases": {
+    "components": "@/src/ui/components",
+    "utils": "@/src/ui/utils"
   }
 }
\ No newline at end of file
diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 5f5a080..e549ac1 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -3,13 +3,12 @@ import { useMediaQuery } from 'usehooks-ts';
 import {
   Dialog,
   DialogContent,
-} from "../../components/ui/dialog"
+} from "./components/ui/dialog"
 import {
   Drawer,
-  DrawerClose,
   DrawerContent,
-} from "../../components/ui/drawer"
-import CloseIcon from './components/CloseIcon';
+} from "./components/ui/drawer"
+import { X } from "lucide-react"
 
 export type IframeModalProps = {
   iframeSrc: string;
@@ -32,7 +31,6 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
 
     const [isDialogOpen, setIsDialogOpen] = useState(isOpen);
     const [dialogHeight, setDialogHeight] = useState('0px');
-    const [isIframeLoaded, setIsIframeLoaded] = useState(false);
     const [isHidden, setIsHideModal] = useState(false);
 
     const handleOnMessage = (event: MessageEvent<MessageEventData>) => {
@@ -80,29 +78,26 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         className="nfw-iframe"
         allowFullScreen
         allow="publickey-credentials-get *; clipboard-write"
-        onLoad={() => {
-          setIsIframeLoaded(true);
-        }}
       />
     )
 
     if (!isModal) {
       return isDialogOpen ? (
         <div id="nfw-connect-iframe-container" className="nfw-iframe-container">
-          <CloseIcon onClick={handleDialogClose} />
+          <X onClick={handleDialogClose} />
           {iframeElement}
         </div>
       ) : null;
     } else {
       return isDesktop ?
         <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
-          <DialogContent className="sm:max-w-[425px]" style={{ height: dialogHeight }}  >
+          <DialogContent className={`${isHidden ? 'hidden' : ''} w-[375px]`} style={{ height: dialogHeight }}  >
             {iframeElement}
           </DialogContent>
         </Dialog>
         :
         <Drawer open={isDialogOpen} onOpenChange={handleDialogClose}   >
-          <DrawerContent style={{ height: dialogHeight }}>
+          <DrawerContent className={`${isHidden ? 'hidden' : ''}`} style={{ height: dialogHeight }}>
             {iframeElement}
           </DrawerContent>
         </Drawer>
diff --git a/src/ui/components/CloseIcon.tsx b/src/ui/components/CloseIcon.tsx
deleted file mode 100644
index 6fec268..0000000
--- a/src/ui/components/CloseIcon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { ButtonHTMLAttributes } from 'react';
-
-type CloseIconProps = ButtonHTMLAttributes<HTMLButtonElement>
-
-export const CloseIcon: React.FC<CloseIconProps> = (props) => {
-  return (
-    <button
-      {...props}
-      className="nfw-close-icon"
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L8 6.29289L3.85355 2.14645C3.65829 1.95118 3.34171 1.95118 3.14645 2.14645C2.95118 2.34171 2.95118 2.65829 3.14645 2.85355L7.29289 7L3.14645 11.1464C2.95118 11.3417 2.95118 11.6583 3.14645 11.8536C3.34171 12.0488 3.65829 12.0488 3.85355 11.8536L8 7.70711L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L8.70711 7L12.8536 2.85355Z"
-        />
-      </svg>
-    </button>
-  );
-};
-
-export default CloseIcon;
diff --git a/src/ui/components/Spinner.tsx b/src/ui/components/Spinner.tsx
deleted file mode 100644
index cacd3e5..0000000
--- a/src/ui/components/Spinner.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-
-interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
-  size?: number;
-  color?: string;
-}
-
-export const Spinner: React.FC<SpinnerProps> = ({ size = 24, color = '#fff', ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`nfw-spinner ${props.className || ''}`}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        cx="12"
-        cy="12"
-        r="11"
-        stroke={color}
-        strokeWidth="3"
-        fill="none"
-        strokeDasharray="34.55751918948772 34.55751918948772"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-};
diff --git a/components/ui/dialog.tsx b/src/ui/components/ui/dialog.tsx
similarity index 65%
rename from components/ui/dialog.tsx
rename to src/ui/components/ui/dialog.tsx
index ddb7e7a..794568c 100644
--- a/components/ui/dialog.tsx
+++ b/src/ui/components/ui/dialog.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
 
-import { cn } from '../../src/ui/utils'
+import { cn } from '../../utils'
 
 const Dialog = DialogPrimitive.Root
 
@@ -36,13 +36,19 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        `fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]
+        gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out
+        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+        data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]
+        data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden`,
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background
+      transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+      disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/components/ui/drawer.tsx b/src/ui/components/ui/drawer.tsx
similarity index 76%
rename from components/ui/drawer.tsx
rename to src/ui/components/ui/drawer.tsx
index 6d9cc98..e1b18ff 100644
--- a/components/ui/drawer.tsx
+++ b/src/ui/components/ui/drawer.tsx
@@ -1,7 +1,8 @@
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
+import { X } from "lucide-react"
 
-import { cn } from '../../src/ui/utils'
+import { cn } from '../../utils'
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -48,6 +49,12 @@ const DrawerContent = React.forwardRef<
     >
       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
       {children}
+      <DrawerPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background
+      transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+      disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DrawerPrimitive.Close>
     </DrawerPrimitive.Content>
   </DrawerPortal>
 ))
diff --git a/src/ui/hooks/useOnClickOutside.ts b/src/ui/hooks/useOnClickOutside.ts
deleted file mode 100644
index bc00014..0000000
--- a/src/ui/hooks/useOnClickOutside.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { RefObject, useEffect } from 'react';
-
-type Handler = (event: MouseEvent) => void;
-
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T>,
-  handler: Handler,
-  mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'
-): void {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      const el = ref?.current;
-
-      // Do nothing if clicking ref's element or descendent elements
-      if (!el || el.contains(event.target as Node)) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener(mouseEvent, listener);
-
-    return () => {
-      document.removeEventListener(mouseEvent, listener);
-    };
-  }, [ref, handler, mouseEvent]);
-}
diff --git a/src/ui/hooks/usePortal.ts b/src/ui/hooks/usePortal.ts
deleted file mode 100644
index 8d73e2e..0000000
--- a/src/ui/hooks/usePortal.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export const usePortal = () => {
-  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    const root = document.createElement('div');
-    root.id = 'portal-root';
-    document.body.appendChild(root);
-    setPortalRoot(root);
-
-    return () => {
-      document.body.removeChild(root);
-    };
-  }, []);
-
-  return portalRoot;
-};
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 10ad891..189808b 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -100,46 +100,6 @@
   }
 }
 
-
-/* CloseIcon styles */
-.nfw-close-icon {
-  cursor: pointer;
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 24px;
-  height: 24px;
-  background: none;
-  border: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.nfw-close-icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-.nfw-close-icon path {
-  fill: #706F6C;
-}
-
-/* Overlay styles */
-.nfw-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 /* IframeDialog styles */
 .nfw-iframe-container {
   width: 100%;
@@ -156,18 +116,3 @@
   height: 100%;
   border: none;
 }
-
-/* Spinner styles */
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.nfw-spinner {
-  animation: spin 1s linear infinite;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-}
\ No newline at end of file
diff --git a/src/ui/styles.output.css b/src/ui/styles.output.css
index d18c145..ac6475f 100644
--- a/src/ui/styles.output.css
+++ b/src/ui/styles.output.css
@@ -658,10 +658,6 @@ body {
   margin-top: 1rem;
 }
 
-.mt-auto {
-  margin-top: auto;
-}
-
 .flex {
   display: flex;
 }
@@ -670,6 +666,10 @@ body {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .h-2 {
   height: 0.5rem;
 }
@@ -690,6 +690,10 @@ body {
   width: 100px;
 }
 
+.w-\[375px\] {
+  width: 375px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -712,26 +716,12 @@ body {
   flex-direction: column;
 }
 
-.flex-col-reverse {
-  flex-direction: column-reverse;
-}
-
-.gap-1\.5 {
-  gap: 0.375rem;
-}
-
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-4 {
   gap: 1rem;
 }
 
-.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+.overflow-hidden {
+  overflow: hidden;
 }
 
 .rounded-full {
@@ -763,52 +753,6 @@ body {
   background-color: hsl(var(--muted));
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
-.p-6 {
-  padding: 1.5rem;
-}
-
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.leading-none {
-  line-height: 1;
-}
-
-.tracking-tight {
-  letter-spacing: -0.025em;
-}
-
-.text-muted-foreground {
-  color: hsl(var(--muted-foreground));
-}
-
 .opacity-70 {
   opacity: 0.7;
 }
@@ -851,84 +795,6 @@ body {
   animation-duration: 200ms;
 }
 
-/* Dialog styles */
-
-.nfw-dialog {
-  display: block;
-  position: fixed;
-  background-color: white;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 1;
-  overflow: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.nfw-dialog::-webkit-scrollbar {
-  display: none;
-}
-
-.nfw-dialog-mobile {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-top-right-radius: 12px;
-  border-top-left-radius: 12px;
-  transform: translateY(0);
-  transition: transform 0.3s ease-in-out;
-}
-
-.nfw-dialog-desktop {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 375px;
-  max-width: 100%;
-  max-height: none;
-  border-radius: 12px;
-}
-
-/* CloseIcon styles */
-
-.nfw-close-icon {
-  cursor: pointer;
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 24px;
-  height: 24px;
-  background: none;
-  border: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.nfw-close-icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-.nfw-close-icon path {
-  fill: #706F6C;
-}
-
-/* Overlay styles */
-
-.nfw-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 /* IframeDialog styles */
 
 .nfw-iframe-container {
@@ -947,27 +813,6 @@ body {
   border: none;
 }
 
-/* Spinner styles */
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.nfw-spinner {
-  animation: spin 1s linear infinite;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-}
-
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -1056,29 +901,7 @@ body {
 }
 
 @media (min-width: 640px) {
-  .sm\:max-w-\[425px\] {
-    max-width: 425px;
-  }
-
-  .sm\:flex-row {
-    flex-direction: row;
-  }
-
-  .sm\:justify-end {
-    justify-content: flex-end;
-  }
-
-  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .sm\:rounded-lg {
     border-radius: var(--radius);
   }
-
-  .sm\:text-left {
-    text-align: left;
-  }
-}
\ No newline at end of file
+}

From 5bf4f7d0907946580d383310f9b99a9ebddb0221 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 18 Oct 2024 18:18:23 +0700
Subject: [PATCH 13/20] Fix animation

---
 src/ui/IframeDialog.tsx  |  2 +-
 src/ui/styles.output.css | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index e549ac1..c1e0e07 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -97,7 +97,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         </Dialog>
         :
         <Drawer open={isDialogOpen} onOpenChange={handleDialogClose}   >
-          <DrawerContent className={`${isHidden ? 'hidden' : ''}`} style={{ height: dialogHeight }}>
+          <DrawerContent className={`${isHidden ? 'hidden' : ''} h-[70%] max-h-[700px]`}>
             {iframeElement}
           </DrawerContent>
         </Drawer>
diff --git a/src/ui/styles.output.css b/src/ui/styles.output.css
index ac6475f..a3295fe 100644
--- a/src/ui/styles.output.css
+++ b/src/ui/styles.output.css
@@ -645,6 +645,10 @@ body {
   z-index: 50;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -682,6 +686,30 @@ body {
   height: auto;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-\[200px\] {
+  height: 200px;
+}
+
+.h-\[500px\] {
+  height: 500px;
+}
+
+.h-\[60\%\] {
+  height: 60%;
+}
+
+.h-\[70\%\] {
+  height: 70%;
+}
+
+.max-h-\[700px\] {
+  max-height: 700px;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -753,6 +781,10 @@ body {
   background-color: hsl(var(--muted));
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .opacity-70 {
   opacity: 0.7;
 }

From 7c7263dc81551b3d374920ec2d737ba19436770a Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 18 Oct 2024 18:44:31 +0700
Subject: [PATCH 14/20] Update height on mobile

---
 src/ui/IframeDialog.tsx         | 2 +-
 src/ui/components/ui/drawer.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index c1e0e07..e549ac1 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -97,7 +97,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         </Dialog>
         :
         <Drawer open={isDialogOpen} onOpenChange={handleDialogClose}   >
-          <DrawerContent className={`${isHidden ? 'hidden' : ''} h-[70%] max-h-[700px]`}>
+          <DrawerContent className={`${isHidden ? 'hidden' : ''}`} style={{ height: dialogHeight }}>
             {iframeElement}
           </DrawerContent>
         </Drawer>
diff --git a/src/ui/components/ui/drawer.tsx b/src/ui/components/ui/drawer.tsx
index e1b18ff..5f0423e 100644
--- a/src/ui/components/ui/drawer.tsx
+++ b/src/ui/components/ui/drawer.tsx
@@ -42,12 +42,11 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background overflow-hidden",
         className
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
       {children}
       <DrawerPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background
       transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2

From 76ef343d1f3af822bec83cc8454cf5c5bfa16211 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 18 Oct 2024 18:48:53 +0700
Subject: [PATCH 15/20] Fix close button

---
 src/ui/IframeDialog.tsx  |  2 +-
 src/ui/styles.css        |  7 +++++
 src/ui/styles.output.css | 66 +++++-----------------------------------
 3 files changed, 16 insertions(+), 59 deletions(-)

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index e549ac1..2652e70 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -84,7 +84,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
     if (!isModal) {
       return isDialogOpen ? (
         <div id="nfw-connect-iframe-container" className="nfw-iframe-container">
-          <X onClick={handleDialogClose} />
+          <X onClick={handleDialogClose} className="nfw-close-button" />
           {iframeElement}
         </div>
       ) : null;
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 189808b..35e2b9b 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -116,3 +116,10 @@
   height: 100%;
   border: none;
 }
+
+.nfw-close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/ui/styles.output.css b/src/ui/styles.output.css
index a3295fe..c018035 100644
--- a/src/ui/styles.output.css
+++ b/src/ui/styles.output.css
@@ -645,23 +645,10 @@ body {
   z-index: 50;
 }
 
-.z-10 {
-  z-index: 10;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .mt-24 {
   margin-top: 6rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .flex {
   display: flex;
 }
@@ -674,10 +661,6 @@ body {
   display: none;
 }
 
-.h-2 {
-  height: 0.5rem;
-}
-
 .h-4 {
   height: 1rem;
 }
@@ -686,38 +669,10 @@ body {
   height: auto;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-\[200px\] {
-  height: 200px;
-}
-
-.h-\[500px\] {
-  height: 500px;
-}
-
-.h-\[60\%\] {
-  height: 60%;
-}
-
-.h-\[70\%\] {
-  height: 70%;
-}
-
-.max-h-\[700px\] {
-  max-height: 700px;
-}
-
 .w-4 {
   width: 1rem;
 }
 
-.w-\[100px\] {
-  width: 100px;
-}
-
 .w-\[375px\] {
   width: 375px;
 }
@@ -752,10 +707,6 @@ body {
   overflow: hidden;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded-sm {
   border-radius: calc(var(--radius) - 4px);
 }
@@ -777,14 +728,6 @@ body {
   background-color: rgb(0 0 0 / 0.8);
 }
 
-.bg-muted {
-  background-color: hsl(var(--muted));
-}
-
-.p-0 {
-  padding: 0px;
-}
-
 .opacity-70 {
   opacity: 0.7;
 }
@@ -845,6 +788,13 @@ body {
   border: none;
 }
 
+.nfw-close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+}
+
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -936,4 +886,4 @@ body {
   .sm\:rounded-lg {
     border-radius: var(--radius);
   }
-}
+}
\ No newline at end of file

From 6801ea4c0ca550e96d31a211637036e4a44f9a9f Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 18 Oct 2024 21:15:24 +0700
Subject: [PATCH 16/20] Fix button styles

---
 src/ui/IframeDialog.tsx  | 14 +++++++++++---
 src/ui/styles.css        |  1 +
 src/ui/styles.output.css |  5 +++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 2652e70..5b36de4 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -32,6 +32,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
     const [isDialogOpen, setIsDialogOpen] = useState(isOpen);
     const [dialogHeight, setDialogHeight] = useState('0px');
     const [isHidden, setIsHideModal] = useState(false);
+    const [isIframeLoaded, setIsIframeLoaded] = useState(false);
 
     const handleOnMessage = (event: MessageEvent<MessageEventData>) => {
       if (event.data.dialogHeight) {
@@ -78,26 +79,33 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         className="nfw-iframe"
         allowFullScreen
         allow="publickey-credentials-get *; clipboard-write"
+        onLoad={() => setIsIframeLoaded(true)}
       />
     )
 
     if (!isModal) {
       return isDialogOpen ? (
         <div id="nfw-connect-iframe-container" className="nfw-iframe-container">
-          <X onClick={handleDialogClose} className="nfw-close-button" />
+          {isIframeLoaded && <X onClick={handleDialogClose} className="nfw-close-button" />}
           {iframeElement}
         </div>
       ) : null;
     } else {
       return isDesktop ?
         <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
-          <DialogContent className={`${isHidden ? 'hidden' : ''} w-[375px]`} style={{ height: dialogHeight }}  >
+          <DialogContent className={`${isHidden ? 'hidden' : ''} w-[375px]`}
+            style={{
+              height: dialogHeight,
+            }}>
             {iframeElement}
           </DialogContent>
         </Dialog>
         :
         <Drawer open={isDialogOpen} onOpenChange={handleDialogClose}   >
-          <DrawerContent className={`${isHidden ? 'hidden' : ''}`} style={{ height: dialogHeight }}>
+          <DrawerContent className={`${isHidden ? 'hidden' : ''}`}
+            style={{
+              height: dialogHeight,
+            }}>
             {iframeElement}
           </DrawerContent>
         </Drawer>
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 35e2b9b..7ff6dc6 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -122,4 +122,5 @@
   top: 10px;
   right: 10px;
   cursor: pointer;
+  opacity: 0.7;
 }
\ No newline at end of file
diff --git a/src/ui/styles.output.css b/src/ui/styles.output.css
index c018035..1ad64b1 100644
--- a/src/ui/styles.output.css
+++ b/src/ui/styles.output.css
@@ -649,6 +649,10 @@ body {
   margin-top: 6rem;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -793,6 +797,7 @@ body {
   top: 10px;
   right: 10px;
   cursor: pointer;
+  opacity: 0.7;
 }
 
 .hover\:opacity-100:hover {

From 835d3cea9798690b73cbd91e7188582be6a423d9 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Mon, 21 Oct 2024 16:35:31 +0700
Subject: [PATCH 17/20] PR comments

---
 src/lib/fastAuthWalletConnection.ts |  8 ++++----
 src/lib/near-fastauth-wallet.ts     | 10 +++++-----
 src/ui/IframeDialog.tsx             |  6 +++---
 src/ui/reactApp.tsx                 |  6 +++---
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/lib/fastAuthWalletConnection.ts b/src/lib/fastAuthWalletConnection.ts
index a94d08c..ff36961 100644
--- a/src/lib/fastAuthWalletConnection.ts
+++ b/src/lib/fastAuthWalletConnection.ts
@@ -109,10 +109,10 @@ export class FastAuthWalletConnection {
   _completeSignInPromise: Promise<void>;
 
   /** @hidden */
-  isModal: boolean;
+  styleModal: boolean;
   
   constructor(near: Near, appKeyPrefix: string, config: {
-    isModal: boolean;
+    styleModal: boolean;
   }) {
     if (typeof appKeyPrefix !== 'string') {
       throw new Error(
@@ -158,7 +158,7 @@ export class FastAuthWalletConnection {
     if (!this.isSignedIn()) {
       this._completeSignInPromise = this._completeSignInWithAccessKey();
     }
-    this.isModal = config.isModal;
+    this.styleModal = config.styleModal;
   }
 
   /**
@@ -628,7 +628,7 @@ export class FastAuthWalletConnection {
   renderWallet(url: string) {
     renderIFrame({
       iframeSrc: url,
-      isModal: this.isModal,
+      styleModal: this.styleModal,
     });
   }
 }
diff --git a/src/lib/near-fastauth-wallet.ts b/src/lib/near-fastauth-wallet.ts
index 18ac771..5353ab2 100644
--- a/src/lib/near-fastauth-wallet.ts
+++ b/src/lib/near-fastauth-wallet.ts
@@ -35,13 +35,13 @@ export interface FastAuthWalletParams {
   successUrl?: string;
   failureUrl?: string;
   relayerUrl?: string;
-  isModal?: boolean;
+  styleModal?: boolean;
 }
 
 interface FastAuthWalletExtraOptions {
   walletUrl: string;
   relayerUrl: string;
-  isModal: boolean
+  styleModal: boolean
 }
 
 interface FastAuthWalletState {
@@ -127,7 +127,7 @@ const setupWalletState = async (
     headers: {},
   });
 
-  const wallet = new FastAuthWalletConnection(near, 'near_app', { isModal: params.isModal });
+  const wallet = new FastAuthWalletConnection(near, 'near_app', { styleModal: params.styleModal });
 
   return {
     wallet,
@@ -449,7 +449,7 @@ export function setupFastAuthWallet({
   successUrl = '',
   failureUrl = '',
   relayerUrl = '',
-  isModal = true,
+  styleModal = true,
 }: FastAuthWalletParams = {}): WalletModuleFactory<BrowserWallet> {
   return async (moduleOptions) => {
     return {
@@ -471,7 +471,7 @@ export function setupFastAuthWallet({
           params: {
             walletUrl: resolveWalletUrl(options.options.network, walletUrl),
             relayerUrl,
-            isModal
+            styleModal
           },
         });
       },
diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 5b36de4..2371f68 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -13,7 +13,7 @@ import { X } from "lucide-react"
 export type IframeModalProps = {
   iframeSrc: string;
   isOpen: boolean;
-  isModal?: boolean;
+  styleModal?: boolean;
 };
 
 type MessageEventData = {
@@ -25,7 +25,7 @@ type MessageEventData = {
 };
 
 export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
-  ({ iframeSrc, isOpen, isModal }, ref) => {
+  ({ iframeSrc, isOpen, styleModal }, ref) => {
     const isDesktop = useMediaQuery("(min-width: 768px)")
     const onCloseRef = useRef(null);
 
@@ -83,7 +83,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
       />
     )
 
-    if (!isModal) {
+    if (!styleModal) {
       return isDialogOpen ? (
         <div id="nfw-connect-iframe-container" className="nfw-iframe-container">
           {isIframeLoaded && <X onClick={handleDialogClose} className="nfw-close-button" />}
diff --git a/src/ui/reactApp.tsx b/src/ui/reactApp.tsx
index a0e6817..dd18462 100644
--- a/src/ui/reactApp.tsx
+++ b/src/ui/reactApp.tsx
@@ -4,10 +4,10 @@ import './styles.output.css';
 
 export const renderIFrame = ({
   iframeSrc,
-  isModal
+  styleModal
 }: {
   iframeSrc: string;
-  isModal?: boolean;
+  styleModal?: boolean;
 }): void => {
   let rootElement = document.querySelector('#nfw-root');
 
@@ -21,7 +21,7 @@ export const renderIFrame = ({
     <IframeDialog
       isOpen
       iframeSrc={iframeSrc}
-      isModal={isModal}
+      styleModal={styleModal}
     />
   );
 };

From 93434504aeb5830208571449c23f5a467c26cda8 Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Mon, 21 Oct 2024 17:19:14 +0700
Subject: [PATCH 18/20] Update styles out

---
 src/ui/styles.output.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/ui/styles.output.css b/src/ui/styles.output.css
index 1ad64b1..b15ebf5 100644
--- a/src/ui/styles.output.css
+++ b/src/ui/styles.output.css
@@ -649,10 +649,6 @@ body {
   margin-top: 6rem;
 }
 
-.block {
-  display: block;
-}
-
 .flex {
   display: flex;
 }

From 53783a51931e25fd9410cc582b6aced38d7a01de Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Mon, 21 Oct 2024 17:33:14 +0700
Subject: [PATCH 19/20] Update version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4e71d9b..e801a22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "near-fastauth-wallet",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "near-fastauth-wallet",
-      "version": "2.0.5",
+      "version": "2.0.6",
       "license": "MIT",
       "dependencies": {
         "@near-js/transactions": "^0.2.1",
diff --git a/package.json b/package.json
index c0c941f..e5e78c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "near-fastauth-wallet",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "license": "MIT",
   "scripts": {
     "build": "npm run tailwind:build && nx build --buildLibsFromSource --skip-nx-cache",

From ae22b6cf0198cf746a9d6d57bf08af7eb63ccb7d Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Mon, 21 Oct 2024 18:42:46 +0700
Subject: [PATCH 20/20] Fix build process

---
 package.json             |   4 +-
 project.json             |   2 +-
 src/ui/reactApp.tsx      |   2 +-
 src/ui/styles.css        | 892 ++++++++++++++++++++++++++++++++++++---
 src/ui/styles.input.css  | 126 ++++++
 src/ui/styles.output.css | 890 --------------------------------------
 vite.config.ts           |   9 +
 7 files changed, 967 insertions(+), 958 deletions(-)
 create mode 100644 src/ui/styles.input.css
 delete mode 100644 src/ui/styles.output.css

diff --git a/package.json b/package.json
index e5e78c6..9b8e168 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
     "deploy:beta": "npm run build && cd dist/near-fastauth-wallet && npm publish --tag beta",
     "test": "nx test",
     "watch": "nodemon",
-    "tailwind": "npx tailwindcss -i ./src/ui/styles.css -o ./src/ui/styles.output.css --watch",
-    "tailwind:build": "npx tailwindcss -i ./src/ui/styles.css -o ./src/ui/styles.output.css"
+    "tailwind": "npx tailwindcss -i ./src/ui/styles.input.css -o ./src/ui/styles.css --watch",
+    "tailwind:build": "npx tailwindcss -i ./src/ui/styles.input.css -o ./src/ui/styles.css"
   },
   "dependencies": {
     "@near-js/transactions": "^0.2.1",
diff --git a/project.json b/project.json
index 261b8b9..0340524 100644
--- a/project.json
+++ b/project.json
@@ -16,7 +16,7 @@
         "outputPath": "dist/near-fastauth-wallet",
         "main": "./src/index.ts",
         "tsConfig": "./tsconfig.lib.json",
-        "assets": ["*.md"]
+        "assets": ["*.md", "src/ui/styles.css"]
       }
     },
     "lint": {
diff --git a/src/ui/reactApp.tsx b/src/ui/reactApp.tsx
index dd18462..4f09e5c 100644
--- a/src/ui/reactApp.tsx
+++ b/src/ui/reactApp.tsx
@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import IframeDialog from './IframeDialog';
-import './styles.output.css';
+import './styles.css';
 
 export const renderIFrame = ({
   iframeSrc,
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 7ff6dc6..b15ebf5 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -1,106 +1,777 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
+/*
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+::before,
+::after {
+  --tw-content: '';
+}
 
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
 
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
 
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
 
-    --ring: 0 0% 3.9%;
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
 
-    --radius: 0.5rem;
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
 
-    --chart-1: 12 76% 61%;
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
 
-    --chart-2: 173 58% 39%;
+/*
+Add the correct font weight in Edge and Safari.
+*/
 
-    --chart-3: 197 37% 24%;
+b,
+strong {
+  font-weight: bolder;
+}
 
-    --chart-4: 43 74% 66%;
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
 
-    --chart-5: 27 87% 67%;
-  }
+/*
+Add the correct font size in all browsers.
+*/
 
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
+small {
+  font-size: 80%;
+}
 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
+sub {
+  bottom: -0.25em;
+}
 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
+sup {
+  top: -0.5em;
+}
 
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
 
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+button,
+select {
+  text-transform: none;
+}
 
-    --ring: 0 0% 83.1%;
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
 
-    --radius: 0.5rem;
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
 
-    --chart-1: 220 70% 50%;
+:-moz-focusring {
+  outline: auto;
+}
 
-    --chart-2: 160 60% 45%;
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
 
-    --chart-3: 30 80% 55%;
+:-moz-ui-invalid {
+  box-shadow: none;
+}
 
-    --chart-4: 280 65% 60%;
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
 
-    --chart-5: 340 75% 55%;
-  }
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
 }
 
-@layer base {
-  * {
-    @apply border-border;
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --ring: 0 0% 3.9%;
+  --radius: 0.5rem;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.left-\[50\%\] {
+  left: 50%;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.top-\[50\%\] {
+  top: 50%;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-\[375px\] {
+  width: 375px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.rounded-sm {
+  border-radius: calc(var(--radius) - 4px);
+}
+
+.rounded-t-\[10px\] {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.bg-background {
+  background-color: hsl(var(--background));
+}
+
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ring-offset-background {
+  --tw-ring-offset-color: hsl(var(--background));
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
   }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
 
+.duration-200 {
+  animation-duration: 200ms;
+}
+
 /* IframeDialog styles */
+
 .nfw-iframe-container {
   width: 100%;
   height: 100%;
@@ -123,4 +794,97 @@
   right: 10px;
   cursor: pointer;
   opacity: 0.7;
+}
+
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-ring:focus {
+  --tw-ring-color: hsl(var(--ring));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+
+.data-\[state\=open\]\:bg-accent[data-state="open"] {
+  background-color: hsl(var(--accent));
+}
+
+.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
+  color: hsl(var(--muted-foreground));
+}
+
+.data-\[state\=open\]\:animate-in[data-state="open"] {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:animate-out[data-state="closed"] {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+  --tw-exit-opacity: 0;
+}
+
+.data-\[state\=open\]\:fade-in-0[data-state="open"] {
+  --tw-enter-opacity: 0;
+}
+
+.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+  --tw-exit-scale: .95;
+}
+
+.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+  --tw-enter-scale: .95;
+}
+
+.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
+  --tw-exit-translate-x: -50%;
+}
+
+.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
+  --tw-exit-translate-y: -48%;
+}
+
+.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
+  --tw-enter-translate-x: -50%;
+}
+
+.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
+  --tw-enter-translate-y: -48%;
+}
+
+@media (min-width: 640px) {
+  .sm\:rounded-lg {
+    border-radius: var(--radius);
+  }
 }
\ No newline at end of file
diff --git a/src/ui/styles.input.css b/src/ui/styles.input.css
new file mode 100644
index 0000000..7ff6dc6
--- /dev/null
+++ b/src/ui/styles.input.css
@@ -0,0 +1,126 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+
+    --chart-1: 12 76% 61%;
+
+    --chart-2: 173 58% 39%;
+
+    --chart-3: 197 37% 24%;
+
+    --chart-4: 43 74% 66%;
+
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 0 0% 83.1%;
+
+    --radius: 0.5rem;
+
+    --chart-1: 220 70% 50%;
+
+    --chart-2: 160 60% 45%;
+
+    --chart-3: 30 80% 55%;
+
+    --chart-4: 280 65% 60%;
+
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+/* IframeDialog styles */
+.nfw-iframe-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.nfw-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.nfw-close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  opacity: 0.7;
+}
\ No newline at end of file
diff --git a/src/ui/styles.output.css b/src/ui/styles.output.css
deleted file mode 100644
index b15ebf5..0000000
--- a/src/ui/styles.output.css
+++ /dev/null
@@ -1,890 +0,0 @@
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-/*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
-*/
-
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  /* 1 */
-  border-width: 0;
-  /* 2 */
-  border-style: solid;
-  /* 2 */
-  border-color: #e5e7eb;
-  /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-html,
-:host {
-  line-height: 1.5;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-  -moz-tab-size: 4;
-  /* 3 */
-  -o-tab-size: 4;
-     tab-size: 4;
-  /* 3 */
-  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  /* 4 */
-  font-feature-settings: normal;
-  /* 5 */
-  font-variation-settings: normal;
-  /* 6 */
-  -webkit-tap-highlight-color: transparent;
-  /* 7 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0;
-  /* 1 */
-  line-height: inherit;
-  /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  border-top-width: 1px;
-  /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  /* 1 */
-  font-feature-settings: normal;
-  /* 2 */
-  font-variation-settings: normal;
-  /* 3 */
-  font-size: 1em;
-  /* 4 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0;
-  /* 1 */
-  border-color: inherit;
-  /* 2 */
-  border-collapse: collapse;
-  /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  /* 1 */
-  font-feature-settings: inherit;
-  /* 1 */
-  font-variation-settings: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  font-weight: inherit;
-  /* 1 */
-  line-height: inherit;
-  /* 1 */
-  letter-spacing: inherit;
-  /* 1 */
-  color: inherit;
-  /* 1 */
-  margin: 0;
-  /* 2 */
-  padding: 0;
-  /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
-  -webkit-appearance: button;
-  /* 1 */
-  background-color: transparent;
-  /* 2 */
-  background-image: none;
-  /* 2 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset default styling for dialogs.
-*/
-
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder, textarea::-moz-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  /* 1 */
-  vertical-align: middle;
-  /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-
-[hidden]:where(:not([hidden="until-found"])) {
-  display: none;
-}
-
-:root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --ring: 0 0% 3.9%;
-  --radius: 0.5rem;
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
-}
-
-* {
-  border-color: hsl(var(--border));
-}
-
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-feature-settings: "rlig" 1, "calt" 1;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.fixed {
-  position: fixed;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.inset-0 {
-  inset: 0px;
-}
-
-.inset-x-0 {
-  left: 0px;
-  right: 0px;
-}
-
-.bottom-0 {
-  bottom: 0px;
-}
-
-.left-\[50\%\] {
-  left: 50%;
-}
-
-.right-4 {
-  right: 1rem;
-}
-
-.top-4 {
-  top: 1rem;
-}
-
-.top-\[50\%\] {
-  top: 50%;
-}
-
-.z-50 {
-  z-index: 50;
-}
-
-.mt-24 {
-  margin-top: 6rem;
-}
-
-.flex {
-  display: flex;
-}
-
-.grid {
-  display: grid;
-}
-
-.hidden {
-  display: none;
-}
-
-.h-4 {
-  height: 1rem;
-}
-
-.h-auto {
-  height: auto;
-}
-
-.w-4 {
-  width: 1rem;
-}
-
-.w-\[375px\] {
-  width: 375px;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.max-w-lg {
-  max-width: 32rem;
-}
-
-.translate-x-\[-50\%\] {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-y-\[-50\%\] {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.gap-4 {
-  gap: 1rem;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.rounded-sm {
-  border-radius: calc(var(--radius) - 4px);
-}
-
-.rounded-t-\[10px\] {
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-}
-
-.border {
-  border-width: 1px;
-}
-
-.bg-background {
-  background-color: hsl(var(--background));
-}
-
-.bg-black\/80 {
-  background-color: rgb(0 0 0 / 0.8);
-}
-
-.opacity-70 {
-  opacity: 0.7;
-}
-
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.ring-offset-background {
-  --tw-ring-offset-color: hsl(var(--background));
-}
-
-.transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.duration-200 {
-  transition-duration: 200ms;
-}
-
-@keyframes enter {
-  from {
-    opacity: var(--tw-enter-opacity, 1);
-    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
-  }
-}
-
-@keyframes exit {
-  to {
-    opacity: var(--tw-exit-opacity, 1);
-    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
-  }
-}
-
-.duration-200 {
-  animation-duration: 200ms;
-}
-
-/* IframeDialog styles */
-
-.nfw-iframe-container {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.nfw-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
-.nfw-close-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  cursor: pointer;
-  opacity: 0.7;
-}
-
-.hover\:opacity-100:hover {
-  opacity: 1;
-}
-
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-ring:focus {
-  --tw-ring-color: hsl(var(--ring));
-}
-
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
-.disabled\:pointer-events-none:disabled {
-  pointer-events: none;
-}
-
-.data-\[state\=open\]\:bg-accent[data-state="open"] {
-  background-color: hsl(var(--accent));
-}
-
-.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
-  color: hsl(var(--muted-foreground));
-}
-
-.data-\[state\=open\]\:animate-in[data-state="open"] {
-  animation-name: enter;
-  animation-duration: 150ms;
-  --tw-enter-opacity: initial;
-  --tw-enter-scale: initial;
-  --tw-enter-rotate: initial;
-  --tw-enter-translate-x: initial;
-  --tw-enter-translate-y: initial;
-}
-
-.data-\[state\=closed\]\:animate-out[data-state="closed"] {
-  animation-name: exit;
-  animation-duration: 150ms;
-  --tw-exit-opacity: initial;
-  --tw-exit-scale: initial;
-  --tw-exit-rotate: initial;
-  --tw-exit-translate-x: initial;
-  --tw-exit-translate-y: initial;
-}
-
-.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
-  --tw-exit-opacity: 0;
-}
-
-.data-\[state\=open\]\:fade-in-0[data-state="open"] {
-  --tw-enter-opacity: 0;
-}
-
-.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
-  --tw-exit-scale: .95;
-}
-
-.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
-  --tw-enter-scale: .95;
-}
-
-.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
-  --tw-exit-translate-x: -50%;
-}
-
-.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
-  --tw-exit-translate-y: -48%;
-}
-
-.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
-  --tw-enter-translate-x: -50%;
-}
-
-.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
-  --tw-enter-translate-y: -48%;
-}
-
-@media (min-width: 640px) {
-  .sm\:rounded-lg {
-    border-radius: var(--radius);
-  }
-}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 6029c05..baf4a45 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,6 +13,15 @@ export default defineConfig({
   //  plugins: [ nxViteTsPaths() ],
   // },
 
+  build: {
+    rollupOptions: {
+      input: {
+        main: './src/index.js', // Adjust this path to your main entry point
+        styles: './src/ui/styles.css', // Adjust this path to your generated CSS file
+      },
+    },
+  },
+
   test: {
     globals: true,
     cache: {