From d88a3bda240f78d086c2a95f6a36b564d4393602 Mon Sep 17 00:00:00 2001
From: Ha Gia Phat <phatghaa@gmail.com>
Date: Mon, 22 Jul 2024 07:04:46 +0700
Subject: [PATCH] Improvements (#196)

* chore: upgrade dependencies

* fix: improve token input and asset withdraw token

* feat: add OverlaysManager
---
 package.json                                  |   5 +-
 .../react/.storybook/WithThemeDecorator.tsx   |   2 +
 .../chain-swap-combobox.tsx                   |   4 +-
 packages/react/scaffolds/modal/modal.tsx      |  17 +-
 packages/react/scaffolds/select/select.tsx    |  12 +-
 packages/react/stories/TokenInput.stories.tsx |  11 +-
 .../stories/asset/AssetDeposit.stories.tsx    |   4 +-
 pnpm-lock.yaml                                | 262 ++----------------
 src/index.ts                                  |   2 +
 .../asset-withdraw-tokens.lite.tsx            |  59 ++--
 .../asset-withdraw-tokens.types.tsx           |   6 +
 src/ui/overlays-manager/index.ts              |   1 +
 .../overlays-manager.lite.tsx                 |  67 +++++
 .../overlays-manager.types.tsx                |   1 +
 src/ui/overlays-manager/overlays.tsx          |  41 +++
 src/ui/token-input/token-input.css.ts         |   2 +-
 src/ui/token-input/token-input.lite.tsx       |  50 +++-
 src/ui/token-input/token-input.types.tsx      |   6 +-
 18 files changed, 264 insertions(+), 288 deletions(-)
 create mode 100644 src/ui/overlays-manager/index.ts
 create mode 100644 src/ui/overlays-manager/overlays-manager.lite.tsx
 create mode 100644 src/ui/overlays-manager/overlays-manager.types.tsx
 create mode 100644 src/ui/overlays-manager/overlays.tsx

diff --git a/package.json b/package.json
index 280b266b..ebf3dd88 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,9 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@builder.io/eslint-plugin-mitosis": "^0.0.15",
-    "@builder.io/mitosis-cli": "0.1.6",
+    "@builder.io/eslint-plugin-mitosis": "^0.0.16",
+    "@builder.io/mitosis": "0.3.11",
+    "@builder.io/mitosis-cli": "0.3.11",
     "@formkit/auto-animate": "^0.8.2",
     "@parcel/packager-ts": "^2.12.0",
     "@parcel/transformer-typescript-types": "^2.12.0",
diff --git a/packages/react/.storybook/WithThemeDecorator.tsx b/packages/react/.storybook/WithThemeDecorator.tsx
index 723a49e1..557dfedb 100644
--- a/packages/react/.storybook/WithThemeDecorator.tsx
+++ b/packages/react/.storybook/WithThemeDecorator.tsx
@@ -8,6 +8,7 @@ import {
   ThemeProvider,
   Select,
   SelectOption,
+  OverlaysManager,
   useTheme,
 } from "../src";
 import { DEFAULT_ACCENTS, Accent } from "../src/styles/tokens";
@@ -109,6 +110,7 @@ const WithThemeDecorator = (props) => {
       // }}
     >
       <ThemeShell {...props} />
+      <OverlaysManager />
     </ThemeProvider>
   );
 };
diff --git a/packages/react/scaffolds/chain-swap-combobox/chain-swap-combobox.tsx b/packages/react/scaffolds/chain-swap-combobox/chain-swap-combobox.tsx
index 8471acff..9a45ed1e 100644
--- a/packages/react/scaffolds/chain-swap-combobox/chain-swap-combobox.tsx
+++ b/packages/react/scaffolds/chain-swap-combobox/chain-swap-combobox.tsx
@@ -20,11 +20,11 @@ import {
 import Box from "@/ui/box";
 import ChainSwapInput from "@/ui/chain-swap-input";
 import ChainListItem from "@/ui/chain-list-item";
-import { closestBodyElement } from "@/helpers/platform";
 
 import * as styles from "./chain-swap-combobox.css";
 import type { ChainListItemProps } from "@/ui/chain-list-item/chain-list-item.types";
 import type { Sprinkles } from "@/styles/rainbow-sprinkles.css";
+import { overlays } from "@/ui/overlays-manager/overlays";
 import useTheme from "@/ui/hooks/use-theme";
 
 interface ItemProps {
@@ -212,7 +212,7 @@ export default function ChainSwapCombobox(props: ChainSwapComboboxProps) {
       return setMountRoot(props.rootNode);
     }
 
-    setMountRoot(closestBodyElement(containerRef.current));
+    setMountRoot(overlays.getOrCreateOverlayRoot(containerRef.current));
   }, []);
 
   return (
diff --git a/packages/react/scaffolds/modal/modal.tsx b/packages/react/scaffolds/modal/modal.tsx
index f49fb05e..e3182e5b 100644
--- a/packages/react/scaffolds/modal/modal.tsx
+++ b/packages/react/scaffolds/modal/modal.tsx
@@ -14,6 +14,7 @@ import {
 import clx from "clsx";
 import React, { cloneElement, forwardRef } from "react";
 import useTheme from "../hooks/use-theme";
+import { overlays } from "@/ui/overlays-manager/overlays";
 import * as styles from "./modal.css";
 
 interface DialogOptions {
@@ -149,6 +150,10 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>((props, forwardedRef) => {
     childrenClassName,
   } = props;
 
+  const [defaultRoot, setDefaultRoot] = React.useState<HTMLElement | null>(
+    null,
+  );
+
   const dialog = useDialog({
     initialOpen,
     open: isOpen,
@@ -166,6 +171,16 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>((props, forwardedRef) => {
 
   const { styles: transitionStyles } = useTransitionStyles(dialog.context);
 
+  React.useEffect(() => {
+    // User-provided root
+    if (root) {
+      return;
+    }
+
+    // Default lib root
+    setDefaultRoot(overlays.getOrCreateOverlayRoot(window.document));
+  }, []);
+
   React.useEffect(() => {
     dialog.setLabelId(id);
     return () => dialog.setLabelId(undefined);
@@ -186,7 +201,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>((props, forwardedRef) => {
       {typeof renderTrigger === "function" ? renderTrigger(triggerProps) : null}
 
       {dialog.open && (
-        <FloatingPortal root={root}>
+        <FloatingPortal root={root ? root : defaultRoot}>
           <FloatingOverlay
             className={clx(themeClassName)}
             lockScroll={preventScroll}
diff --git a/packages/react/scaffolds/select/select.tsx b/packages/react/scaffolds/select/select.tsx
index 34804961..f5ab275d 100644
--- a/packages/react/scaffolds/select/select.tsx
+++ b/packages/react/scaffolds/select/select.tsx
@@ -28,6 +28,7 @@ import {
   selectFullWidth,
 } from "./select.css";
 import { Item, SelectContext, SelectContextValue } from "./select.context";
+import { overlays } from "@/ui/overlays-manager/overlays";
 
 const DEFAULT_LIST_WIDTH = "220";
 
@@ -142,6 +143,15 @@ export default function Select(props: SelectProps) {
     [elementsRef, handleSelect],
   );
 
+  const [defaultRoot, setDefaultRoot] = React.useState<HTMLElement | null>(
+    null,
+  );
+
+  React.useEffect(() => {
+    // Default lib root
+    setDefaultRoot(overlays.getOrCreateOverlayRoot(window.document));
+  }, []);
+
   React.useEffect(() => {
     if (!!props.defaultSelectedItem) {
       handleSelect(props.defaultSelectedItem);
@@ -235,7 +245,7 @@ export default function Select(props: SelectProps) {
       </div>
 
       <SelectContext.Provider value={selectContext}>
-        <FloatingPortal>
+        <FloatingPortal root={defaultRoot}>
           <div
             ref={refs.setFloating}
             tabIndex={-1}
diff --git a/packages/react/stories/TokenInput.stories.tsx b/packages/react/stories/TokenInput.stories.tsx
index 99f8b921..7775c325 100644
--- a/packages/react/stories/TokenInput.stories.tsx
+++ b/packages/react/stories/TokenInput.stories.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { asset_list, assets } from "@chain-registry/osmosis";
-import { getAssetByDenom } from "@chain-registry/utils";
 import { Asset as OsmosisAsset } from "@chain-registry/types";
 
 import TokenInput from "../src/ui/token-input";
@@ -18,14 +17,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const osmosisAssets: OsmosisAsset[] = [...assets.assets, ...asset_list.assets];
-const OSMO = getAssetByDenom(osmosisAssets, "uosmo");
+const OSMO = osmosisAssets.find((asset) => asset.symbol === "OSMO")!;
 
 /* This is primary TokenInput */
 export const Primary: Story = {
   args: {
     symbol: OSMO.symbol,
     name: OSMO.name,
-    available: 0.71263,
+    available: 23345.44,
     priceDisplayAmount: 0.5,
     tokenIcon: OSMO.logo_URIs?.png,
     onAmountChange: (value) => {
@@ -34,14 +33,20 @@ export const Primary: Story = {
   },
   render: (props) => {
     const [progress, setProgress] = useState(50);
+    const [amount, setAmount] = useState(0);
 
     const onProgressChange = (value) => {
       console.log("onProgressChange", value);
       setProgress(value);
     };
+
     return (
       <TokenInput
         {...props}
+        amount={amount}
+        onAmountChange={(value) => {
+          setAmount(value);
+        }}
         progress={progress}
         onProgressChange={onProgressChange}
       />
diff --git a/packages/react/stories/asset/AssetDeposit.stories.tsx b/packages/react/stories/asset/AssetDeposit.stories.tsx
index 6bb680e1..d04a0fdd 100644
--- a/packages/react/stories/asset/AssetDeposit.stories.tsx
+++ b/packages/react/stories/asset/AssetDeposit.stories.tsx
@@ -33,7 +33,7 @@ export const DepositAsset: Story = {
     available: 25.89,
     amount: "",
     priceDisplayAmount: 0.5,
-    timeEstimateLabel: "20 seconds",
+    timeEstimateLabel: "30 seconds",
     onChange: (value) => {
       console.log("onChange", value);
     },
@@ -104,7 +104,7 @@ export const DepositModalView: Story = {
     available: 25.89,
     amount: "",
     priceDisplayAmount: 0.5,
-    timeEstimateLabel: "20 seconds",
+    timeEstimateLabel: "30 seconds",
     onChange: (value) => {
       console.log("onChange", value);
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1719c5a2..bf21b24d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,11 +58,14 @@ importers:
         specifier: ^7.24.7
         version: 7.24.7(@babel/core@7.24.7)
       '@builder.io/eslint-plugin-mitosis':
-        specifier: ^0.0.15
-        version: 0.0.15(eslint@8.57.0)
+        specifier: ^0.0.16
+        version: 0.0.16(eslint@8.57.0)
+      '@builder.io/mitosis':
+        specifier: 0.3.11
+        version: 0.3.11(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)
       '@builder.io/mitosis-cli':
-        specifier: 0.1.6
-        version: 0.1.6(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)
+        specifier: 0.3.11
+        version: 0.3.11(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)
       '@formkit/auto-animate':
         specifier: ^0.8.2
         version: 0.8.2
@@ -962,10 +965,6 @@ packages:
     resolution: {integrity: sha512-LGeMaf5JN4hAT471eJdBs/GK1DoYIJ5GCtZN/EsL6KUiiDZOvO/eKE11AMZJa2zP4zk4qe9V2O/hxAmkRc8p6w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.18.6':
-    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-module-imports@7.22.15':
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
@@ -1623,17 +1622,17 @@ packages:
   '@braintree/sanitize-url@6.0.4':
     resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==}
 
-  '@builder.io/eslint-plugin-mitosis@0.0.15':
-    resolution: {integrity: sha512-I6gRmem0p/mv5Mw/Q15McJufGzw4Y3etjMobmcPT7Bk+VuD+pnaSTymNE5iu1SRPfSKlRQB4neIK73j61Frzeg==}
+  '@builder.io/eslint-plugin-mitosis@0.0.16':
+    resolution: {integrity: sha512-vokCmgwTl3DPIKkvdLrKxD7sf41pmnPW5eCHXeFjgJgJia7sCchxSPsBTO2mkN7UaEsETrciOPOL1Re5wNj/mg==}
     peerDependencies:
       eslint: '>=0.8.0'
 
-  '@builder.io/mitosis-cli@0.1.6':
-    resolution: {integrity: sha512-W6mE7IQh1VvE4u4bCM0zgaHKNkaZ2MoCldbQUEWulHmKNuxYxgeli39i1Ba2CpzK8igd9AEOe6h3EZJQOxcDGA==}
+  '@builder.io/mitosis-cli@0.3.11':
+    resolution: {integrity: sha512-w9rArWb7E5OwdyjWUtKoe/Hz6SpLjOpQYerULr23DkGcRgrXH/p101AHGh5JqZWgbUg2gFeD/DBX3y+hbJpPAQ==}
     hasBin: true
 
-  '@builder.io/mitosis@0.1.6':
-    resolution: {integrity: sha512-2iXaw+4h7wzynAztRwYcN1J/2778MsRBSDMb2yRne3dpDmsV5/B2cGbA9tbhDs3J/KlAFZXDNA2FPzT16105ew==}
+  '@builder.io/mitosis@0.3.11':
+    resolution: {integrity: sha512-s2T5shqLHMI7c9l1zntQazijkp94d0poF8IUGvpZL859BypmFLoknvTFPjuUL4b19WwA5B0zTN++qHfOeLo41Q==}
 
   '@builder.io/sdk@2.2.4':
     resolution: {integrity: sha512-IvY55wVVhwEgUtdX/Dmz/rgCaWa6nnUv7cQuhogECoXCdJbGFOwfkO3sZS1nOhrdXB2wk5qbYOsEWB7G1S+hAQ==}
@@ -6364,10 +6363,6 @@ packages:
     resolution: {integrity: sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==}
     engines: {node: '>=14.16'}
 
-  ansi-regex@2.1.1:
-    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
-    engines: {node: '>=0.10.0'}
-
   ansi-regex@4.1.1:
     resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==}
     engines: {node: '>=6'}
@@ -6383,10 +6378,6 @@ packages:
   ansi-sequence-parser@1.1.1:
     resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
 
-  ansi-styles@2.2.1:
-    resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==}
-    engines: {node: '>=0.10.0'}
-
   ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -6610,11 +6601,6 @@ packages:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
 
-  babel-plugin-jsx-dom-expressions@0.37.23:
-    resolution: {integrity: sha512-Y/r8LyLi/njnwPTaDuPEReWk30FJ1KplloYvcFUhHmiH1F7yVVj5mWojD7mbO/IruKyvOs9OIPUoeMi3Z++J4w==}
-    peerDependencies:
-      '@babel/core': ^7.20.12
-
   babel-plugin-polyfill-corejs2@0.4.11:
     resolution: {integrity: sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==}
     peerDependencies:
@@ -6630,11 +6616,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  babel-preset-solid@1.8.18:
-    resolution: {integrity: sha512-ky0FA4cCS9dk+xYBBItHoxtbRnaDIOGpmHLFqKPaR81hpMbJBOiLOZia2hT0JBwx4zn/D2OjMRvRr6kqtRMoUw==}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
   babel-walk@3.0.0-canary-5:
     resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
     engines: {node: '>= 10.0.0'}
@@ -6781,9 +6762,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camel-case@3.0.0:
-    resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
-
   camel-case@4.1.2:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
 
@@ -6827,10 +6805,6 @@ packages:
     resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
     engines: {node: '>=4'}
 
-  chalk@1.1.3:
-    resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
-    engines: {node: '>=0.10.0'}
-
   chalk@2.3.0:
     resolution: {integrity: sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==}
     engines: {node: '>=4'}
@@ -6921,10 +6895,6 @@ packages:
   cjs-module-lexer@1.3.1:
     resolution: {integrity: sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==}
 
-  clean-css@4.2.4:
-    resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==}
-    engines: {node: '>= 4.0'}
-
   clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -8800,10 +8770,6 @@ packages:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
 
-  has-ansi@2.0.0:
-    resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
-    engines: {node: '>=0.10.0'}
-
   has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
 
@@ -8926,19 +8892,11 @@ packages:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
 
-  html-entities@2.3.3:
-    resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
-
   html-minifier-terser@7.2.0:
     resolution: {integrity: sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==}
     engines: {node: ^14.13.1 || >=16.0.0}
     hasBin: true
 
-  html-minifier@4.0.0:
-    resolution: {integrity: sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==}
-    engines: {node: '>=6'}
-    hasBin: true
-
   html-rspack-plugin@5.7.2:
     resolution: {integrity: sha512-uVXGYq19bcsX7Q/53VqXQjCKXw0eUMHlFGDLTaqzgj/ckverfhZQvXyA6ecFBaF9XUH16jfCTCyALYi0lJcagg==}
     engines: {node: '>=10.13.0'}
@@ -9935,9 +9893,6 @@ packages:
   loupe@2.3.7:
     resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
 
-  lower-case@1.1.4:
-    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
-
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
@@ -10508,6 +10463,10 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
+  neotraverse@0.6.14:
+    resolution: {integrity: sha512-co+mqQYo1wf3CRWRHWOT1ZgG7gsdNZSrrQkWxVnGAlD/UA/IZuPlE9UNkGZRwTLeml+dT5BytRW4ANqzPQeNLg==}
+    engines: {node: '>= 18'}
+
   next-mdx-remote@4.4.1:
     resolution: {integrity: sha512-1BvyXaIou6xy3XoNF4yaMZUCb6vD2GTAa5ciOa6WoO+gAUTYsb1K4rI/HSC2ogAWLrb/7VSV52skz07vOzmqIQ==}
     engines: {node: '>=14', npm: '>=7'}
@@ -10584,9 +10543,6 @@ packages:
   nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
 
-  no-case@2.3.2:
-    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
-
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
@@ -10996,9 +10952,6 @@ packages:
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
-  param-case@2.1.1:
-    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
-
   param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
 
@@ -11041,9 +10994,6 @@ packages:
   parse5-htmlparser2-tree-adapter@6.0.1:
     resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==}
 
-  parse5@3.0.3:
-    resolution: {integrity: sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==}
-
   parse5@5.1.1:
     resolution: {integrity: sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==}
 
@@ -12326,10 +12276,6 @@ packages:
   stringify-entities@4.0.3:
     resolution: {integrity: sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==}
 
-  strip-ansi@3.0.1:
-    resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
-    engines: {node: '>=0.10.0'}
-
   strip-ansi@5.2.0:
     resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
     engines: {node: '>=6'}
@@ -12416,10 +12362,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  supports-color@2.0.0:
-    resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
-    engines: {node: '>=0.8.0'}
-
   supports-color@4.5.0:
     resolution: {integrity: sha512-ycQR/UbvI9xIlEdQT1TQqwoXtEldExbCEAJgRo5YXlmSKjv6ThHnP9/vwGa1gr19Gfw+LkFd7KqYMhzrRC5JYw==}
     engines: {node: '>=4'}
@@ -12679,10 +12621,6 @@ packages:
     resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
     engines: {node: '>=18'}
 
-  traverse@0.6.9:
-    resolution: {integrity: sha512-7bBrcF+/LQzSgFmT0X5YclVqQxtv7TDJ1f8Wj7ibBu/U6BMLeOpUxuZjV7rMc44UtKxlnMFigdhFAIszSX1DMg==}
-    engines: {node: '>= 0.4'}
-
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -12835,10 +12773,6 @@ packages:
     resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==}
     engines: {node: '>= 0.4'}
 
-  typedarray.prototype.slice@1.0.3:
-    resolution: {integrity: sha512-8WbVAQAUlENo1q3c3zZYuy5k9VzBQvp8AX9WOtbvyWlLM1v5JaSRmjubLjzHF4JFtptjH/5c/i95yaElvcjC0A==}
-    engines: {node: '>= 0.4'}
-
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
@@ -12887,11 +12821,6 @@ packages:
     engines: {node: '>=0.8.0'}
     hasBin: true
 
-  uglify-js@3.18.0:
-    resolution: {integrity: sha512-SyVVbcNBCk0dzr9XL/R/ySrmYf0s372K6/hFklzgcp2lBFyXtw4I7BOdDjlLhE1aVqaI/SHWXWmYdlZxuyF38A==}
-    engines: {node: '>=0.8.0'}
-    hasBin: true
-
   unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
 
@@ -13057,9 +12986,6 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
-  upper-case@1.1.3:
-    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
-
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -13123,9 +13049,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  validate-html-nesting@1.2.2:
-    resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==}
-
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -13378,14 +13301,6 @@ packages:
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
-  vue-template-es2015-compiler@1.9.1:
-    resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
-
-  vue-template-validator@1.1.5:
-    resolution: {integrity: sha512-ZMxg90ccdASmCm9S72j1Mspw34AaPpCVZRKX5iuElGShj2g7YsHwOwePz6cElvGK4NZZ+kRlGxFVHkjm2QG4nA==}
-    peerDependencies:
-      parse5: ^2.1.0
-
   vue-tsc@1.8.27:
     resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
     hasBin: true
@@ -13404,10 +13319,6 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
-  vue@2.6.14:
-    resolution: {integrity: sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==}
-    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
-
   vue@3.4.21:
     resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==}
     peerDependencies:
@@ -13929,10 +13840,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-imports@7.18.6':
-    dependencies:
-      '@babel/types': 7.24.7
-
   '@babel/helper-module-imports@7.22.15':
     dependencies:
       '@babel/types': 7.24.7
@@ -14082,14 +13989,6 @@ snapshots:
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.14.5)':
-    dependencies:
-      '@babel/core': 7.14.5
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.14.5)
-      '@babel/helper-plugin-utils': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
@@ -14849,37 +14748,25 @@ snapshots:
 
   '@braintree/sanitize-url@6.0.4': {}
 
-  '@builder.io/eslint-plugin-mitosis@0.0.15(eslint@8.57.0)':
+  '@builder.io/eslint-plugin-mitosis@0.0.16(eslint@8.57.0)':
     dependencies:
       '@babel/types': 7.12.6
       eslint: 8.57.0
       ts-pattern: 3.3.5
 
-  '@builder.io/mitosis-cli@0.1.6(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)':
+  '@builder.io/mitosis-cli@0.3.11(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@builder.io/mitosis': 0.1.6(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)
-      '@vue/compiler-sfc': 3.4.31
-      babel-preset-solid: 1.8.18(@babel/core@7.24.7)
-      chalk: 4.1.2
+      '@builder.io/mitosis': 0.3.11(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)
       debug: 4.3.5
       dedent: 0.7.0
       esbuild: 0.12.29
       fast-glob: 3.3.2
       fp-ts: 2.16.7
       fs-extra: 9.1.0
-      globby: 11.1.0
       gluegun: 5.1.6(debug@4.3.5)
-      html-minifier: 4.0.0
-      json5: 2.2.3
       lodash: 4.17.21
-      micromatch: 4.0.7
-      parse5: 3.0.3
       prettier: 2.8.8
-      rimraf: 5.0.7
       ts-morph: 19.0.0
-      vue-template-es2015-compiler: 1.9.1
-      vue-template-validator: 1.1.5(parse5@3.0.3)
     transitivePeerDependencies:
       - '@volar/vue-language-plugin-pug'
       - '@volar/vue-typescript'
@@ -14894,12 +14781,11 @@ snapshots:
       - sugarss
       - supports-color
 
-  '@builder.io/mitosis@0.1.6(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)':
+  '@builder.io/mitosis@0.3.11(encoding@0.1.13)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)':
     dependencies:
       '@angular/compiler': 11.2.14
       '@babel/core': 7.14.5
       '@babel/generator': 7.24.7
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.14.5)
       '@babel/plugin-syntax-decorators': 7.24.7(@babel/core@7.14.5)
       '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.14.5)
       '@babel/plugin-transform-react-jsx': 7.24.7(@babel/core@7.14.5)
@@ -14911,16 +14797,15 @@ snapshots:
       hash-sum: 2.0.0
       json5: 2.2.3
       lodash: 4.17.21
+      neotraverse: 0.6.14
       object-hash: 2.2.0
       prettier: 2.8.8
       prettier-plugin-organize-imports: 3.2.4(prettier@2.8.8)(typescript@5.5.3)
       prettier-plugin-svelte: 2.10.1(prettier@2.8.8)(svelte@3.59.2)
       svelte: 3.59.2
       svelte-preprocess: 5.1.4(@babel/core@7.14.5)(postcss-load-config@4.0.2(postcss@8.4.39))(postcss@8.4.39)(pug@3.0.3)(svelte@3.59.2)(typescript@5.5.3)
-      traverse: 0.6.9
       ts-morph: 19.0.0
       typescript: 5.5.3
-      vue: 2.6.14
     transitivePeerDependencies:
       - '@volar/vue-language-plugin-pug'
       - '@volar/vue-typescript'
@@ -22304,8 +22189,6 @@ snapshots:
 
   ansi-escapes@6.2.1: {}
 
-  ansi-regex@2.1.1: {}
-
   ansi-regex@4.1.1: {}
 
   ansi-regex@5.0.1: {}
@@ -22314,8 +22197,6 @@ snapshots:
 
   ansi-sequence-parser@1.1.1: {}
 
-  ansi-styles@2.2.1: {}
-
   ansi-styles@3.2.1:
     dependencies:
       color-convert: 1.9.3
@@ -22577,15 +22458,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-jsx-dom-expressions@0.37.23(@babel/core@7.24.7):
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-module-imports': 7.18.6
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.24.7)
-      '@babel/types': 7.24.7
-      html-entities: 2.3.3
-      validate-html-nesting: 1.2.2
-
   babel-plugin-polyfill-corejs2@0.4.11(@babel/core@7.24.7):
     dependencies:
       '@babel/compat-data': 7.24.7
@@ -22610,11 +22482,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-preset-solid@1.8.18(@babel/core@7.24.7):
-    dependencies:
-      '@babel/core': 7.24.7
-      babel-plugin-jsx-dom-expressions: 0.37.23(@babel/core@7.24.7)
-
   babel-walk@3.0.0-canary-5:
     dependencies:
       '@babel/types': 7.24.7
@@ -22807,11 +22674,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camel-case@3.0.0:
-    dependencies:
-      no-case: 2.3.2
-      upper-case: 1.1.3
-
   camel-case@4.1.2:
     dependencies:
       pascal-case: 3.1.2
@@ -22854,14 +22716,6 @@ snapshots:
       pathval: 1.1.1
       type-detect: 4.0.8
 
-  chalk@1.1.3:
-    dependencies:
-      ansi-styles: 2.2.1
-      escape-string-regexp: 1.0.5
-      has-ansi: 2.0.0
-      strip-ansi: 3.0.1
-      supports-color: 2.0.0
-
   chalk@2.3.0:
     dependencies:
       ansi-styles: 3.2.1
@@ -22941,10 +22795,6 @@ snapshots:
 
   cjs-module-lexer@1.3.1: {}
 
-  clean-css@4.2.4:
-    dependencies:
-      source-map: 0.6.1
-
   clean-css@5.3.3:
     dependencies:
       source-map: 0.6.1
@@ -25433,10 +25283,6 @@ snapshots:
 
   hard-rejection@2.1.0: {}
 
-  has-ansi@2.0.0:
-    dependencies:
-      ansi-regex: 2.1.1
-
   has-bigints@1.0.2: {}
 
   has-flag@2.0.0: {}
@@ -25613,8 +25459,6 @@ snapshots:
     dependencies:
       whatwg-encoding: 3.1.1
 
-  html-entities@2.3.3: {}
-
   html-minifier-terser@7.2.0:
     dependencies:
       camel-case: 4.1.2
@@ -25625,16 +25469,6 @@ snapshots:
       relateurl: 0.2.7
       terser: 5.31.1
 
-  html-minifier@4.0.0:
-    dependencies:
-      camel-case: 3.0.0
-      clean-css: 4.2.4
-      commander: 2.20.3
-      he: 1.2.0
-      param-case: 2.1.1
-      relateurl: 0.2.7
-      uglify-js: 3.18.0
-
   html-rspack-plugin@5.7.2(@rspack/core@0.6.5(@swc/helpers@0.5.3)):
     optionalDependencies:
       '@rspack/core': 0.6.5(@swc/helpers@0.5.3)
@@ -26704,8 +26538,6 @@ snapshots:
     dependencies:
       get-func-name: 2.0.2
 
-  lower-case@1.1.4: {}
-
   lower-case@2.0.2:
     dependencies:
       tslib: 2.6.3
@@ -27635,6 +27467,8 @@ snapshots:
 
   neo-async@2.6.2: {}
 
+  neotraverse@0.6.14: {}
+
   next-mdx-remote@4.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@mdx-js/mdx': 2.3.0
@@ -27791,10 +27625,6 @@ snapshots:
 
   nice-try@1.0.5: {}
 
-  no-case@2.3.2:
-    dependencies:
-      lower-case: 1.1.4
-
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -28333,10 +28163,6 @@ snapshots:
 
   pako@0.2.9: {}
 
-  param-case@2.1.1:
-    dependencies:
-      no-case: 2.3.2
-
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -28449,10 +28275,6 @@ snapshots:
     dependencies:
       parse5: 6.0.1
 
-  parse5@3.0.3:
-    dependencies:
-      '@types/node': 20.14.10
-
   parse5@5.1.1: {}
 
   parse5@6.0.1: {}
@@ -30084,10 +29906,6 @@ snapshots:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
 
-  strip-ansi@3.0.1:
-    dependencies:
-      ansi-regex: 2.1.1
-
   strip-ansi@5.2.0:
     dependencies:
       ansi-regex: 4.1.1
@@ -30166,8 +29984,6 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  supports-color@2.0.0: {}
-
   supports-color@4.5.0:
     dependencies:
       has-flag: 2.0.0
@@ -30425,12 +30241,6 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  traverse@0.6.9:
-    dependencies:
-      gopd: 1.0.1
-      typedarray.prototype.slice: 1.0.3
-      which-typed-array: 1.1.15
-
   trim-lines@3.0.1: {}
 
   trim-newlines@3.0.1: {}
@@ -30601,15 +30411,6 @@ snapshots:
       is-typed-array: 1.1.13
       possible-typed-array-names: 1.0.0
 
-  typedarray.prototype.slice@1.0.3:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-errors: 1.3.0
-      typed-array-buffer: 1.0.2
-      typed-array-byte-offset: 1.0.2
-
   typedarray@0.0.6: {}
 
   typescript-eslint@7.13.1(eslint@9.5.0)(typescript@5.4.5):
@@ -30640,8 +30441,6 @@ snapshots:
   uglify-js@3.17.4:
     optional: true
 
-  uglify-js@3.18.0: {}
-
   unbox-primitive@1.0.2:
     dependencies:
       call-bind: 1.0.7
@@ -30837,8 +30636,6 @@ snapshots:
       escalade: 3.1.2
       picocolors: 1.0.1
 
-  upper-case@1.1.3: {}
-
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -30901,8 +30698,6 @@ snapshots:
       kleur: 4.1.5
       sade: 1.8.1
 
-  validate-html-nesting@1.2.2: {}
-
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -31290,13 +31085,6 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
-  vue-template-es2015-compiler@1.9.1: {}
-
-  vue-template-validator@1.1.5(parse5@3.0.3):
-    dependencies:
-      chalk: 1.1.3
-      parse5: 3.0.3
-
   vue-tsc@1.8.27(typescript@5.4.2):
     dependencies:
       '@volar/typescript': 1.11.1
@@ -31325,8 +31113,6 @@ snapshots:
       semver: 7.6.2
       typescript: 5.5.3
 
-  vue@2.6.14: {}
-
   vue@3.4.21(typescript@5.4.2):
     dependencies:
       '@vue/compiler-dom': 3.4.21
diff --git a/src/index.ts b/src/index.ts
index 0d028a24..c4f528d5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,6 +30,8 @@ export { default as ClipboardCopyText } from "./ui/clipboard-copy-text";
 export type { ClipboardCopyTextProps } from "./ui/clipboard-copy-text/clipboard-copy-text.types";
 export { default as ThemeProvider } from "./ui/theme-provider";
 export type { ThemeProviderProps } from "./ui/theme-provider/theme-provider.types";
+export { default as OverlaysManager } from "./ui/overlays-manager";
+export type { OverlaysManagerProps } from "./ui/overlays-manager/overlays-manager.types";
 export { default as InterchainUIProvider } from "./ui/interchain-ui-provider";
 export { default as FadeIn } from "./ui/fade-in";
 export { default as PoolsHeader } from "./ui/pools-header";
diff --git a/src/ui/asset-withdraw-tokens/asset-withdraw-tokens.lite.tsx b/src/ui/asset-withdraw-tokens/asset-withdraw-tokens.lite.tsx
index 9f9a314d..33d9083e 100644
--- a/src/ui/asset-withdraw-tokens/asset-withdraw-tokens.lite.tsx
+++ b/src/ui/asset-withdraw-tokens/asset-withdraw-tokens.lite.tsx
@@ -1,5 +1,6 @@
 import {
   Show,
+  For,
   useStore,
   useDefaultProps,
   onMount,
@@ -35,6 +36,20 @@ useMetadata({
 useDefaultProps<Partial<AssetWithdrawTokensProps>>({
   transferLabel: "Transfer",
   cancelLabel: "Cancel",
+  partials: [
+    {
+      label: "Max",
+      percentage: 1,
+    },
+    {
+      label: "1/2",
+      percentage: 0.5,
+    },
+    {
+      label: "1/3",
+      percentage: 1 / 3,
+    },
+  ],
 });
 
 export default function AssetWithdrawTokens(props: AssetWithdrawTokensProps) {
@@ -403,28 +418,20 @@ export default function AssetWithdrawTokens(props: AssetWithdrawTokensProps) {
             justifyContent: "flex-end",
           }}
         >
-          <Button
-            intent="text"
-            size="xs"
-            onClick={() => state.handleAmountChange(1)}
-          >
-            Max
-          </Button>
-          <Button
-            intent="text"
-            size="xs"
-            onClick={() => state.handleAmountChange(1 / 2)}
-          >
-            1/2
-          </Button>
-          <Button
-            intent="text"
-            size="xs"
-            onClick={() => state.handleAmountChange(1 / 3)}
-          >
-            1/3
-          </Button>
+          <For each={props.partials}>
+            {(partial, index) => (
+              <Button
+                key={index}
+                intent="text"
+                size="xs"
+                onClick={() => state.handleAmountChange(partial.percentage)}
+              >
+                {partial.label}
+              </Button>
+            )}
+          </For>
         </Stack>
+
         <Stack
           className={styles.onlyLg}
           attributes={{
@@ -443,8 +450,14 @@ export default function AssetWithdrawTokens(props: AssetWithdrawTokensProps) {
               marginRight: "$7",
             }}
           />
-          <Text>Estimated time:</Text>
-          <Text fontWeight="$semibold"> 20 seconds</Text>
+          <Text
+            attributes={{
+              marginRight: "$7",
+            }}
+          >
+            Estimated time:
+          </Text>
+          <Text fontWeight="$semibold">{props.timeEstimateLabel}</Text>
         </Stack>
 
         <Button
diff --git a/src/ui/asset-withdraw-tokens/asset-withdraw-tokens.types.tsx b/src/ui/asset-withdraw-tokens/asset-withdraw-tokens.types.tsx
index 1e21b5fc..9a7f5ab9 100644
--- a/src/ui/asset-withdraw-tokens/asset-withdraw-tokens.types.tsx
+++ b/src/ui/asset-withdraw-tokens/asset-withdraw-tokens.types.tsx
@@ -1,6 +1,11 @@
 import type { BaseComponentProps } from "../../models/components.model";
 import type { AvailableItem } from "../transfer-item/transfer-item.types";
 
+export type TransferPartial = {
+  percentage: number;
+  label: string;
+};
+
 export interface AssetWithdrawTokensProps extends BaseComponentProps {
   isDropdown?: boolean;
   fromSymbol: AvailableItem["symbol"];
@@ -18,6 +23,7 @@ export interface AssetWithdrawTokensProps extends BaseComponentProps {
   cancelLabel?: string;
   timeEstimateLabel: string;
   isSubmitDisabled?: boolean;
+  partials?: Array<TransferPartial>;
   onChange?: (value: string) => void;
   onTransfer?: (event?: any) => void;
   onCancel?: (event?: any) => void;
diff --git a/src/ui/overlays-manager/index.ts b/src/ui/overlays-manager/index.ts
new file mode 100644
index 00000000..f0549850
--- /dev/null
+++ b/src/ui/overlays-manager/index.ts
@@ -0,0 +1 @@
+export { default } from "./overlays-manager.lite";
diff --git a/src/ui/overlays-manager/overlays-manager.lite.tsx b/src/ui/overlays-manager/overlays-manager.lite.tsx
new file mode 100644
index 00000000..954d83f1
--- /dev/null
+++ b/src/ui/overlays-manager/overlays-manager.lite.tsx
@@ -0,0 +1,67 @@
+import { useRef, onMount, onUnMount, useMetadata } from "@builder.io/mitosis";
+import { overlays } from "./overlays";
+import { OverlaysManagerProps } from "./overlays-manager.types";
+
+useMetadata({
+  rsc: {
+    componentType: "client",
+  },
+});
+
+export default function OverlaysManager(props: OverlaysManagerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  let cleanupRef = useRef<(() => void) | null>(null);
+
+  onMount(() => {
+    if (containerRef) {
+      const ownerDocument = containerRef.ownerDocument;
+      const overlayRoot = overlays.getOrCreateOverlayRoot(ownerDocument);
+
+      // Append children to the overlay root
+      while (containerRef.firstChild) {
+        overlayRoot.appendChild(containerRef.firstChild);
+      }
+
+      let zIndexCounter = 1;
+
+      // Function to apply styles to direct children
+      const applyStylesToChildren = () => {
+        Array.from(overlayRoot.children).forEach((child, index) => {
+          if (child instanceof HTMLElement) {
+            child.style.position = "relative";
+            child.style.zIndex = (index + 1).toString();
+          }
+        });
+        zIndexCounter = overlayRoot.children.length + 1;
+      };
+
+      // Apply initial styles
+      applyStylesToChildren();
+
+      // Set up MutationObserver to watch for changes in children
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "childList") {
+            applyStylesToChildren();
+          }
+        });
+      });
+
+      observer.observe(overlayRoot, { childList: true });
+
+      // Cleanup function
+      cleanupRef = () => {
+        observer.disconnect();
+        while (containerRef.firstChild) {
+          containerRef.removeChild(containerRef.firstChild);
+        }
+      };
+    }
+  });
+
+  onUnMount(() => {
+    if (typeof cleanupRef === "function") cleanupRef();
+  });
+
+  return <div ref={containerRef} style={{ display: "none" }} />;
+}
diff --git a/src/ui/overlays-manager/overlays-manager.types.tsx b/src/ui/overlays-manager/overlays-manager.types.tsx
new file mode 100644
index 00000000..95e766e8
--- /dev/null
+++ b/src/ui/overlays-manager/overlays-manager.types.tsx
@@ -0,0 +1 @@
+export interface OverlaysManagerProps {}
diff --git a/src/ui/overlays-manager/overlays.tsx b/src/ui/overlays-manager/overlays.tsx
new file mode 100644
index 00000000..aa5657a5
--- /dev/null
+++ b/src/ui/overlays-manager/overlays.tsx
@@ -0,0 +1,41 @@
+export const OVERLAYS_MANAGER_ID = "interchain-ui-overlays-manager";
+
+class Overlays {
+  private static instance: Overlays;
+  private overlayRoots: Map<Document, HTMLElement> = new Map();
+
+  private constructor() {}
+
+  public static getInstance(): Overlays {
+    if (!Overlays.instance) {
+      Overlays.instance = new Overlays();
+    }
+    return Overlays.instance;
+  }
+
+  public getOrCreateOverlayRoot(ownerDocument: Document): HTMLElement {
+    if (!this.overlayRoots.has(ownerDocument)) {
+      const root = ownerDocument.createElement("div");
+      root.id = OVERLAYS_MANAGER_ID;
+      // root.style.position = "fixed";
+      // root.style.top = "0";
+      // root.style.left = "0";
+      // root.style.width = "100%";
+      // root.style.height = "100%";
+      // root.style.pointerEvents = "none";
+      // root.style.zIndex = "1000";
+      ownerDocument.body.appendChild(root);
+      this.overlayRoots.set(ownerDocument, root);
+    }
+    return this.overlayRoots.get(ownerDocument)!;
+  }
+
+  public cleanup() {
+    this.overlayRoots.forEach((root, doc) => {
+      doc.body.removeChild(root);
+    });
+    this.overlayRoots.clear();
+  }
+}
+
+export const overlays = Overlays.getInstance();
diff --git a/src/ui/token-input/token-input.css.ts b/src/ui/token-input/token-input.css.ts
index 76f84d9f..72e84e2e 100644
--- a/src/ui/token-input/token-input.css.ts
+++ b/src/ui/token-input/token-input.css.ts
@@ -61,7 +61,7 @@ export const token = style({
 
 export const inputContainer = style({
   height: "100%",
-  overflow: 'hidden',
+  overflow: "hidden",
   borderRadius: themeVars.radii["md"],
   borderWidth: "1px",
   borderStyle: "solid",
diff --git a/src/ui/token-input/token-input.lite.tsx b/src/ui/token-input/token-input.lite.tsx
index 16db09ba..d254862d 100644
--- a/src/ui/token-input/token-input.lite.tsx
+++ b/src/ui/token-input/token-input.lite.tsx
@@ -16,7 +16,6 @@ import Icon from "../icon";
 import { ALL_ICON_NAMES } from "../icon/icon.types";
 import IconButton from "../icon-button";
 import CicularProgressBar from "../circular-progress-bar";
-import { toNumber } from "../../helpers/number";
 import * as styles from "./token-input.css";
 
 import type { TokenInputProps } from "./token-input.types";
@@ -33,23 +32,35 @@ useMetadata({
 
 useDefaultProps<Partial<TokenInputProps>>({
   hasProgressBar: true,
-  availableAsMax: false,
 });
 
 export default function TokenInput(props: TokenInputProps) {
   const inputIdRef = useRef(uniqueId("token-input-"));
 
   const state = useStore<{
-    symbolValue: string;
+    notionalValue: string;
     isDisabled: boolean;
     handleTokenInput: (value: number) => void;
     handleIconClick: () => void;
   }>({
-    get symbolValue() {
-      return new BigNumber(props.amount || 0)
-        .multipliedBy(props.priceDisplayAmount)
-        .decimalPlaces(2)
-        .toString();
+    get notionalValue() {
+      if (props.notionalValue) {
+        return props.notionalValue;
+      }
+
+      const defaultFormat = (tokenAmount: number, pricePerToken: number) => {
+        return new BigNumber(tokenAmount ?? 0)
+          .multipliedBy(pricePerToken)
+          .decimalPlaces(4)
+          .toString();
+      };
+
+      const formatter =
+        typeof props.formatNotionalValue === "function"
+          ? props.formatNotionalValue
+          : defaultFormat;
+
+      return formatter(props.amount, props.priceDisplayAmount);
     },
     get isDisabled() {
       return props.progress === 0;
@@ -174,8 +185,8 @@ export default function TokenInput(props: TokenInputProps) {
           <ScaffoldNumberField
             id={inputIdRef}
             size="lg"
-            minValue={0}
-            maxValue={props.availableAsMax ? toNumber(props.available) : 0}
+            minValue={props.minValue}
+            maxValue={props.maxValue}
             value={props.amount}
             borderless
             isDisabled={state.isDisabled}
@@ -217,7 +228,10 @@ export default function TokenInput(props: TokenInputProps) {
                 ) : null}
               </Stack>
             }
-            onChange={(value) => state.handleTokenInput(value)}
+            clampValueOnBlur={false}
+            onChange={(value: number) => {
+              state.handleTokenInput(value);
+            }}
             onFocus={(e?: any) => props?.onFocus?.(e)}
             className={styles.token}
             inputContainer={styles.inputContainer}
@@ -236,10 +250,18 @@ export default function TokenInput(props: TokenInputProps) {
           }}
         >
           <Text fontWeight="$semibold">{props.symbol} &nbsp;</Text>
+
           <Show when={!!props.amount && !new BigNumber(props.amount).eq(0)}>
-            <Text color="$textSecondary" attributes={{ ml: "$2" }}>
-              ≈ ${store.getState().formatNumber({ value: state.symbolValue })}
-            </Text>
+            <Show when={!props.notionalValue && !props.formatNotionalValue}>
+              <Text color="$textSecondary" attributes={{ ml: "$2" }}>
+                ≈ $
+                {store.getState().formatNumber({ value: state.notionalValue })}
+              </Text>
+            </Show>
+
+            <Show when={props.notionalValue || props.formatNotionalValue}>
+              {store.getState().formatNumber({ value: state.notionalValue })}
+            </Show>
           </Show>
         </Stack>
       </Stack>
diff --git a/src/ui/token-input/token-input.types.tsx b/src/ui/token-input/token-input.types.tsx
index 33dd5f72..9ba30e7e 100644
--- a/src/ui/token-input/token-input.types.tsx
+++ b/src/ui/token-input/token-input.types.tsx
@@ -14,7 +14,11 @@ export interface TokenInputProps {
   tokenIcon?: LiteralUnion<IconName, string>;
   title?: string | undefined;
   hasProgressBar?: boolean;
-  availableAsMax?: boolean;
+  minValue?: number;
+  maxValue?: number;
+  // Formatted value for the token amount in stablecoin value
+  notionalValue?: string;
+  formatNotionalValue?: (tokenAmount: number, pricePerToken: number) => string;
   onProgressChange?: (progress: number) => void;
   onAmountChange?: (value: number) => void;
   onFocus?: (e?: any) => void;