@funkit/connect 0.0.0-20260710210119

package/dist/clients/chunk-VKQFGBUV.js

@@ -0,0 +1,3128 @@
+"use client";
+import {
+  Text
+} from "./chunk-GHJHQPLZ.js";
+import {
+  Box,
+  logger,
+  themeVars,
+  useFunkitTranslation
+} from "./chunk-VM4K5P7V.js";
+
+// src/clients/polymarket/polymarket.tsx
+import {
+  POLYMARKET_API_KEY,
+  initializeCheckoutTokenTransferAddress
+} from "@funkit/api-base";
+import { formatCurrencyAndStringify } from "@funkit/utils";
+import React25 from "react";
+import {
+  encodeFunctionData,
+  erc20Abi,
+  getAddress as getAddress2,
+  maxUint256
+} from "viem";
+import { polygon } from "viem/chains";
+
+// src/clients/polymarket/usePolymarketAccountBalances.ts
+import { skipToken, useQuery } from "@tanstack/react-query";
+var DEFAULT_BALANCE_REFETCH_MS = 1e3;
+var polymarketAccountBalanceQueryKey = (address) => ["polymarket", "accountBalanceUsd", address ?? null];
+function useAccountBalance(account, refetchIntervalMs) {
+  const getBalanceUsd = account?.getBalanceUsd;
+  const address = account?.address;
+  const query = useQuery({
+    queryKey: polymarketAccountBalanceQueryKey(address),
+    // `skipToken` disables the query when the account isn't configured (the
+    // perps-transfer config is optional). It is *not* a fallback for a missing
+    // balance — the getter is the single source of truth.
+    queryFn: getBalanceUsd ? async () => {
+      try {
+        return await getBalanceUsd();
+      } catch (error) {
+        logger.warn("polymarket:accountBalance:fetchFailed", {
+          address,
+          error: String(error)
+        });
+        throw error;
+      }
+    } : skipToken,
+    refetchInterval: refetchIntervalMs
+  });
+  return { balanceUsd: query.data };
+}
+function usePolymarketAccountBalances(accounts, options) {
+  const refetchIntervalMs = options?.refetchIntervalMs ?? DEFAULT_BALANCE_REFETCH_MS;
+  return {
+    predictions: useAccountBalance(accounts.predictions, refetchIntervalMs),
+    perps: useAccountBalance(accounts.perps, refetchIntervalMs)
+  };
+}
+
+// src/components/Dropdown/AccountSelectDropdown.tsx
+import React24 from "react";
+
+// src/components/Dropdown/BaseDropdown.tsx
+import { isMobile } from "@funkit/utils";
+import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
+import React23, { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef2, useState as useState5 } from "react";
+
+// src/hooks/useScrollDivider.ts
+import { useCallback, useEffect, useState } from "react";
+var useScrollDivider = () => {
+  const [refElement, setRefElement] = useState(null);
+  const ref = useCallback((node) => setRefElement(node), []);
+  const [isTop, setIsTop] = useState(true);
+  const [isAtBottom, setIsAtBottom] = useState(false);
+  const [isScrollable, setIsScrollable] = useState(false);
+  const [isScrolling, setIsScrolling] = useState(false);
+  useEffect(() => {
+    const content = refElement;
+    if (!content || !window.ResizeObserver) {
+      return;
+    }
+    const handleScrollPositionChange = () => {
+      const { scrollTop, scrollHeight, clientHeight } = content;
+      setIsTop(scrollTop === 0);
+      setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 1);
+      setIsScrollable(scrollHeight > clientHeight + 2);
+    };
+    const handleContentChange = () => {
+      handleScrollPositionChange();
+      setTimeout(handleScrollPositionChange, 500);
+    };
+    const onScrollChange = () => {
+      handleScrollPositionChange();
+      setIsScrolling(true);
+    };
+    const onScrollEnd = () => setIsScrolling(false);
+    content.addEventListener("scrollend", onScrollEnd);
+    content.addEventListener("scroll", onScrollChange);
+    const resizeObserver = new window.ResizeObserver(handleContentChange);
+    resizeObserver.observe(content);
+    const mutationObserver = new MutationObserver(handleContentChange);
+    mutationObserver.observe(content, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style", "class"]
+    });
+    handleScrollPositionChange();
+    return () => {
+      content.removeEventListener("scroll", onScrollChange);
+      content.removeEventListener("scrollend", onScrollEnd);
+      resizeObserver.unobserve(content);
+      mutationObserver.disconnect();
+    };
+  }, [refElement]);
+  return {
+    ref,
+    hasTopDivider: !isTop,
+    hasBottomDivider: isScrollable,
+    isAtBottom,
+    isScrolling,
+    isScrollable
+  };
+};
+
+// src/providers/FunkitProvider.tsx
+import { QueryClientProvider } from "@tanstack/react-query";
+import React21, {
+  createContext as createContext3,
+  useContext as useContext3,
+  useEffect as useEffect5,
+  useMemo,
+  useRef
+} from "react";
+
+// src/consts/bluvo.tsx
+import {
+  ETHEREAL_API_KEY,
+  FormOfPaymentType
+} from "@funkit/api-base";
+import React7 from "react";
+
+// src/components/Icons/BinanceIcon.tsx
+import React from "react";
+var BinanceIcon = ({ size = 24 }) => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React.createElement("rect", { width: "20", height: "20", rx: "4", fill: "#F3BA2F" }),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M7.67 9.04 10 6.71l2.33 2.34 1.36-1.36L10 4 6.31 7.69zM4 10l1.36-1.36L6.7 10l-1.35 1.36zm3.67.96L10 13.29l2.33-2.33 1.36 1.35-3.69 3.7-3.69-3.7zm5.62-.96 1.35-1.35L16 10l-1.36 1.36z",
+        fill: "#fff"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M11.38 10 10 8.62 8.98 9.64l-.11.12-.25.24L10 11.38z",
+        fill: "#fff"
+      }
+    )
+  );
+};
+
+// src/components/Icons/BybitIcon.tsx
+import React2 from "react";
+var BybitIcon = ({ size = 24 }) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React2.createElement("rect", { width: "20", height: "20", rx: "4", fill: "#0B0E11" }),
+    /* @__PURE__ */ React2.createElement("g", { transform: "translate(2 6.78) scale(0.184)" }, /* @__PURE__ */ React2.createElement("path", { d: "M62.0083 25.3572V3H66.5022V25.3572H62.0083Z", fill: "#F7A600" }), /* @__PURE__ */ React2.createElement(
+      "path",
+      {
+        d: "M9.63407 31.9983H0V9.64111H9.24666C13.7406 9.64111 16.3591 12.0903 16.3591 15.9214C16.3591 18.4013 14.6774 20.0039 13.5134 20.5375C14.9028 21.1652 16.6813 22.5779 16.6813 25.5624C16.6813 29.7373 13.7406 31.9983 9.63407 31.9983ZM8.89096 13.5355H4.4939V18.6852H8.89096C10.7981 18.6852 11.8652 17.6488 11.8652 16.1095C11.8652 14.5719 10.7981 13.5355 8.89096 13.5355ZM9.18151 22.6104H4.4939V28.1056H9.18151C11.2189 28.1056 12.1874 26.8503 12.1874 25.3418C12.1874 23.835 11.2171 22.6104 9.18151 22.6104Z",
+        fill: "white"
+      }
+    ), /* @__PURE__ */ React2.createElement(
+      "path",
+      {
+        d: "M30.3882 22.8293V31.9983H25.926V22.8293L19.0073 9.64111H23.8886L28.1888 18.6527L32.4239 9.64111H37.3052L30.3882 22.8293Z",
+        fill: "white"
+      }
+    ), /* @__PURE__ */ React2.createElement(
+      "path",
+      {
+        d: "M50.0457 31.9983H40.4116V9.64111H49.6583C54.1522 9.64111 56.7707 12.0903 56.7707 15.9214C56.7707 18.4013 55.089 20.0039 53.925 20.5375C55.3144 21.1652 57.093 22.5779 57.093 25.5624C57.093 29.7373 54.1522 31.9983 50.0457 31.9983ZM49.3026 13.5355H44.9055V18.6852H49.3026C51.2097 18.6852 52.2768 17.6488 52.2768 16.1095C52.2768 14.5719 51.2097 13.5355 49.3026 13.5355ZM49.5931 22.6104H44.9055V28.1056H49.5931C51.6305 28.1056 52.599 26.8503 52.599 25.3418C52.599 23.835 51.6305 22.6104 49.5931 22.6104Z",
+        fill: "white"
+      }
+    ), /* @__PURE__ */ React2.createElement(
+      "path",
+      {
+        d: "M80.986 13.5355V32H76.4921V13.5355H70.4785V9.64111H86.9996V13.5355H80.986Z",
+        fill: "white"
+      }
+    ))
+  );
+};
+
+// src/components/Icons/CoinbaseIcon.tsx
+import React3 from "react";
+var CoinbaseIcon = ({ size = 24 }) => {
+  return /* @__PURE__ */ React3.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none"
+    },
+    /* @__PURE__ */ React3.createElement("rect", { width: "20", height: "20", rx: "4", fill: "#2C5FF6" }),
+    /* @__PURE__ */ React3.createElement(
+      "path",
+      {
+        d: "M9.99 13.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5c1.76 0 3.22 1.305 3.46 3h3.52A7.005 7.005 0 0 0 9.99 3c-3.86 0-7 3.14-7 7s3.14 7 7 7c3.69 0 6.725-2.87 6.98-6.5h-3.52c-.24 1.695-1.7 3-3.46 3Z",
+        fill: "#fff"
+      }
+    )
+  );
+};
+
+// src/components/Icons/GateIoIcon.tsx
+import React4 from "react";
+var GateIoIcon = ({ size = 24 }) => {
+  return /* @__PURE__ */ React4.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React4.createElement("rect", { width: "25", height: "25", rx: "5.357", fill: "#fff" }),
+    /* @__PURE__ */ React4.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React4.createElement(
+      "mask",
+      {
+        id: "b",
+        maskUnits: "userSpaceOnUse",
+        x: "5",
+        y: "5",
+        width: "15",
+        height: "15",
+        style: { maskType: "luminance" }
+      },
+      /* @__PURE__ */ React4.createElement("path", { d: "M5 5h15v15H5V5Z", fill: "#fff" })
+    ), /* @__PURE__ */ React4.createElement("g", { mask: "url(#b)" }, /* @__PURE__ */ React4.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M12.5 16.625a4.125 4.125 0 0 1 0-8.25V5a7.5 7.5 0 1 0 7.5 7.5h-3.375a4.125 4.125 0 0 1-4.125 4.125Z",
+        fill: "#2354E6"
+      }
+    )), /* @__PURE__ */ React4.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M12.5 12.5h4.125V8.375H12.5V12.5Z",
+        fill: "#17E6A1"
+      }
+    )),
+    /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React4.createElement("path", { fill: "#fff", transform: "translate(5 5)", d: "M0 0h15v15H0z" })))
+  );
+};
+
+// src/components/Icons/GeminiIcon.tsx
+import React5 from "react";
+var GeminiIcon = ({ size = 24 }) => {
+  return /* @__PURE__ */ React5.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React5.createElement(
+      "path",
+      {
+        d: "M16 0H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4",
+        fill: "#58C8E6"
+      }
+    ),
+    /* @__PURE__ */ React5.createElement(
+      "path",
+      {
+        d: "M15.025 7.686H8.661a3.21 3.21 0 0 1 3.182-2.746 3.21 3.21 0 0 1 3.182 2.746m-3.653.94v2.746H8.626V8.626zm-.035 3.686a3.21 3.21 0 0 1-3.182 2.746 3.21 3.21 0 0 1-3.183-2.746zm-6.365-.94A3.23 3.23 0 0 1 7.686 8.66v2.71zm10.053-2.746a3.23 3.23 0 0 1-2.711 2.71v-2.71zM11.843 4C9.734 4 7.937 5.624 7.712 7.712A4.18 4.18 0 0 0 4 11.843 4.16 4.16 0 0 0 8.157 16c2.109 0 3.909-1.624 4.131-3.712C14.376 12.063 16 10.266 16 8.157A4.16 4.16 0 0 0 11.843 4",
+        fill: "#fff"
+      }
+    )
+  );
+};
+
+// src/components/Icons/KrakenIcon.tsx
+import React6 from "react";
+var KrakenIcon = ({ size = 24 }) => {
+  return /* @__PURE__ */ React6.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React6.createElement(
+      "path",
+      {
+        d: "M16 0H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4",
+        fill: "#5741D9"
+      }
+    ),
+    /* @__PURE__ */ React6.createElement(
+      "path",
+      {
+        d: "M4 11.78v-.67a6.4 6.4 0 0 1 .83-3.26 6 6 0 0 1 2.64-2.3A6 6 0 0 1 9.89 5q1.84-.02 3.4.96a5.6 5.6 0 0 1 2.64 4.18q.1.9.07 1.82l-.01.98q0 .22-.05.43c-.15.54-.8.8-1.27.49a.8.8 0 0 1-.35-.57l-.04-.48v-1.98q0-.4-.26-.68a.83.83 0 0 0-1.17-.04 1 1 0 0 0-.32.65v.28l-.01 2.19c0 .41-.33.73-.76.76a1 1 0 0 1-.56-.17.8.8 0 0 1-.3-.48l-.03-.33v-2.2a1 1 0 0 0-.26-.65.84.84 0 0 0-1.25.02 1 1 0 0 0-.24.64V13q0 .28-.1.54a1 1 0 0 1-.32.34.8.8 0 0 1-1.17-.4 1 1 0 0 1-.07-.38V11q.01-.24-.05-.47a.9.9 0 0 0-.72-.62c-.37-.06-.65.11-.85.4q-.14.22-.14.46v2q.02.3-.04.59a.84.84 0 0 1-.87.63.9.9 0 0 1-.74-.63A1 1 0 0 1 4 13z",
+        fill: "#fff"
+      }
+    )
+  );
+};
+
+// src/consts/bluvo.tsx
+var BLUVO_MIN_DEPOSIT_BY_CUSTOMER = {
+  [ETHEREAL_API_KEY]: 15
+};
+var BLUVO_EXCHANGES = {
+  coinbase: {
+    icon: (size) => /* @__PURE__ */ React7.createElement(CoinbaseIcon, { size }),
+    name: "Coinbase"
+  },
+  binance: {
+    icon: (size) => /* @__PURE__ */ React7.createElement(BinanceIcon, { size }),
+    name: "Binance"
+  },
+  gemini: {
+    icon: (size) => /* @__PURE__ */ React7.createElement(GeminiIcon, { size }),
+    name: "Gemini"
+  },
+  kraken: {
+    icon: (size) => /* @__PURE__ */ React7.createElement(KrakenIcon, { size }),
+    name: "Kraken"
+  },
+  gate: {
+    icon: (size) => /* @__PURE__ */ React7.createElement(GateIoIcon, { size }),
+    name: "Gate"
+  }
+};
+function getExchangeName(brokerType) {
+  return BLUVO_EXCHANGES[brokerType].name;
+}
+var FOP_COMPONENT_ICONS = {
+  [FormOfPaymentType.BYBIT]: (size) => /* @__PURE__ */ React7.createElement(BybitIcon, { size })
+};
+
+// src/consts/polymarket.ts
+import { getAddress } from "viem";
+var POLYMARKET_PUSD_ADDRESS = getAddress(
+  "0xC011a7E12a19f7B1f670d46F03B03f3342E82DFB"
+);
+
+// src/domains/paymentMethods.ts
+import { PaymentMethod } from "@funkit/connect-core";
+import { exhaustiveCheck, formatAddress } from "@funkit/utils";
+function createPaymentMethodInfo(params) {
+  switch (params.paymentMethod) {
+    case PaymentMethod.CARD:
+      return {
+        paymentMethod: PaymentMethod.CARD,
+        title: params.titleCustomization,
+        description: ""
+      };
+    case PaymentMethod.ACCOUNT_BALANCE:
+      return {
+        paymentMethod: PaymentMethod.ACCOUNT_BALANCE,
+        title: "Your Wallet",
+        description: formatAddress(params.walletAddress || "")
+      };
+    case PaymentMethod.BROKERAGE:
+      return {
+        paymentMethod: PaymentMethod.BROKERAGE,
+        title: getExchangeName(params.exchange),
+        description: "",
+        deviceId: params.deviceId,
+        exchange: params.exchange
+      };
+    case PaymentMethod.TOKEN_TRANSFER:
+      return {
+        // this is an arbitrary value for Polymarket.
+        paymentMethod: PaymentMethod.TOKEN_TRANSFER,
+        title: "QR Code Transfer",
+        description: ""
+      };
+    case PaymentMethod.BITCOIN_LIGHTNING:
+      return {
+        paymentMethod: PaymentMethod.BITCOIN_LIGHTNING,
+        title: "Bitcoin on Cash App",
+        description: ""
+      };
+    case PaymentMethod.VIRTUAL_BANK:
+      return {
+        paymentMethod: PaymentMethod.VIRTUAL_BANK,
+        title: "Fiat Account",
+        description: "",
+        matchingFiatAccount: params.matchingFiatAccount,
+        bridgeCustomer: params.bridgeCustomer
+      };
+    default:
+      exhaustiveCheck(params);
+      return {};
+  }
+}
+
+// src/domains/clientMetadata.ts
+function generateClientMetadataForTokenTransfer() {
+  return {
+    id: "",
+    startTimestampMs: 0,
+    finalDollarValue: 0,
+    latestQuote: null,
+    depositAddress: null,
+    initSettings: {
+      config: {
+        targetAsset: "0x",
+        targetChain: "",
+        targetAssetTicker: "",
+        checkoutItemTitle: ""
+      }
+    },
+    selectedSourceAssetInfo: {
+      address: "0x",
+      symbol: "",
+      chainId: "",
+      iconSrc: null
+    },
+    selectedPaymentMethodInfo: createPaymentMethodInfo({
+      paymentMethod: PaymentMethod.TOKEN_TRANSFER
+    })
+  };
+}
+
+// src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
+import React9 from "react";
+
+// src/providers/FunkitThemeProvider.tsx
+import React8, { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/themes/baseTheme.ts
+var systemFontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+var fontStacks = {
+  rounded: `SFRounded, ui-rounded, "SF Pro Rounded", ${systemFontStack}`,
+  system: systemFontStack,
+  fun: `SF Pro, ${systemFontStack}`
+};
+var radiusScales = {
+  large: {
+    actionButton: "12px",
+    actionButtonInner: "10px",
+    connectButton: "12px",
+    modal: "24px",
+    modalMobile: "28px",
+    modalActionButton: "24px",
+    modalActionButtonMobile: "28px",
+    summaryBox: "12px",
+    youPayYouReceive: "24px",
+    inputAmountSwitcher: "24px",
+    qrCode: "12px",
+    tooltip: "4px",
+    skeleton: "4px",
+    dropdown: "12px",
+    dropdownItem: "4px",
+    dropdownList: "12px",
+    modalTopbarIcon: "9999px",
+    withdrawalInput: "12px",
+    useConnected: "8px"
+  },
+  medium: {
+    actionButton: "10px",
+    actionButtonInner: "8px",
+    connectButton: "10px",
+    modal: "16px",
+    modalMobile: "18px",
+    modalActionButton: "16px",
+    modalActionButtonMobile: "18px",
+    summaryBox: "10px",
+    youPayYouReceive: "24px",
+    inputAmountSwitcher: "24px",
+    qrCode: "10px",
+    tooltip: "4px",
+    skeleton: "4px",
+    dropdown: "10px",
+    dropdownItem: "4px",
+    dropdownList: "10px",
+    modalTopbarIcon: "9999px",
+    withdrawalInput: "10px",
+    useConnected: "8px"
+  },
+  none: {
+    actionButton: "0px",
+    actionButtonInner: "0px",
+    connectButton: "0px",
+    modal: "0px",
+    modalMobile: "0px",
+    modalActionButton: "0px",
+    modalActionButtonMobile: "0px",
+    summaryBox: "0px",
+    youPayYouReceive: "0px",
+    inputAmountSwitcher: "0px",
+    qrCode: "0px",
+    tooltip: "0px",
+    skeleton: "0px",
+    dropdown: "0px",
+    dropdownItem: "0px",
+    dropdownList: "0px",
+    modalTopbarIcon: "0px",
+    withdrawalInput: "0px",
+    useConnected: "0px"
+  },
+  small: {
+    actionButton: "8px",
+    actionButtonInner: "6px",
+    connectButton: "8px",
+    modal: "8px",
+    modalMobile: "8px",
+    modalActionButton: "8px",
+    modalActionButtonMobile: "8px",
+    summaryBox: "8px",
+    youPayYouReceive: "24px",
+    inputAmountSwitcher: "24px",
+    qrCode: "8px",
+    tooltip: "4px",
+    skeleton: "4px",
+    dropdown: "8px",
+    dropdownItem: "4px",
+    dropdownList: "8px",
+    modalTopbarIcon: "9999px",
+    withdrawalInput: "8px",
+    useConnected: "8px"
+  }
+};
+var blurs = {
+  large: {
+    modalOverlay: "blur(20px)"
+  },
+  none: {
+    modalOverlay: "blur(0px)"
+  },
+  small: {
+    modalOverlay: "blur(8px)"
+  },
+  tiny: {
+    modalOverlay: "blur(4px)"
+  }
+};
+var DEFAULT_FONT_WEIGHTS = {
+  regular: "400",
+  medium: "500",
+  // 510 in figma, but chrome no longer supports 510 - lowered to 500
+  semibold: "600",
+  // 590 in figma, but chrome no longer supports 590 - raised to 600
+  bold: "700",
+  heavy: "800"
+};
+var DEFAULT_FONT_SIZES = {
+  "10": { fontSize: "10px", lineHeight: "15px" },
+  "12": { fontSize: "12px", lineHeight: "14px" },
+  "13": { fontSize: "13px", lineHeight: "18px" },
+  "14": { fontSize: "14px", lineHeight: "18px" },
+  "16": { fontSize: "16px", lineHeight: "20px" },
+  "18": { fontSize: "18px", lineHeight: "24px" },
+  "20": { fontSize: "20px", lineHeight: "20px" },
+  "21": { fontSize: "21px", lineHeight: "21px" },
+  "40": { fontSize: "40px", lineHeight: "48px" },
+  "57": { fontSize: "57px", lineHeight: "68px" }
+};
+var FONT_SIZINGS = {
+  regular: DEFAULT_FONT_SIZES,
+  small: {
+    "8": { fontSize: "8px", lineHeight: "16px" },
+    "10": { fontSize: "8px", lineHeight: "16px" },
+    "12": { fontSize: "10px", lineHeight: "16px" },
+    "13": { fontSize: "10px", lineHeight: "16px" },
+    "14": { fontSize: "12px", lineHeight: "16px" },
+    "16": { fontSize: "14px", lineHeight: "18px" },
+    "18": { fontSize: "14px", lineHeight: "20px" },
+    "20": { fontSize: "18px", lineHeight: "20px" },
+    "21": { fontSize: "19px", lineHeight: "19px" },
+    "23": { fontSize: "20px", lineHeight: "28px" },
+    "40": { fontSize: "34px", lineHeight: "40px" },
+    "57": { fontSize: "50px", lineHeight: "60px" }
+  }
+};
+var nestedModalZIndexes = {
+  coinbase: 2147483647,
+  walletConnect: 99999999999999,
+  privy: 999999
+};
+var DEFAULT_MODAL_Z_INDEX = Math.min(...Object.values(nestedModalZIndexes)) - 2;
+var baseTheme = ({
+  borderRadius = "large",
+  fontStack = "fun",
+  fontSizing = "regular",
+  customFontFamily,
+  customFontWeights = DEFAULT_FONT_WEIGHTS,
+  customFontSizings = FONT_SIZINGS[fontSizing],
+  customBorderWidths,
+  customBorderRadiuses = radiusScales[borderRadius],
+  customDimensions,
+  customSpacings,
+  customTextTransforms,
+  overlayBlur = "small",
+  modalZIndex = DEFAULT_MODAL_Z_INDEX
+}) => ({
+  modalZIndex: String(modalZIndex),
+  blurs: {
+    modalOverlay: blurs[overlayBlur].modalOverlay
+  },
+  dimensions: {
+    connectExchangeIconSize: "48px",
+    cryptoCashToggleIconSize: "20px",
+    dollarValueSkeletonHeight: "60px",
+    dollarValueSkeletonWidth: "160px",
+    inputAmountQuickOptionButtonHeight: "36px",
+    inputAmountMinHeight: "76px",
+    modalBottomBarButtonHeight: "34px",
+    modalTopBarHeight: "56px",
+    modalTopbarIconSize: "16px",
+    modalTopbarIconWrapperSize: "32px",
+    paymentAmountSkeletonBlockHeight: "14px",
+    paymentAmountSkeletonBlockWidth: "93px",
+    paymentAmountSkeletonCircleSize: "15px",
+    paymentMethodItemIconSize: "20px",
+    selectAssetItemIconSize: "24px",
+    sourceListGap: "4px",
+    txBreakdownSkeletonWidth: "72px",
+    txSummaryLineSkeletonHeight: "14px",
+    txSummaryLineSkeletonWidth: "54px",
+    ...customDimensions,
+    modalBottomBarCloseButtonHeight: customDimensions?.modalBottomBarCloseButtonHeight ?? customDimensions?.modalBottomBarButtonHeight ?? "34px"
+  },
+  fonts: typeof customFontFamily === "string" ? {
+    amountValue: customFontFamily,
+    body: customFontFamily,
+    buttonTextPrimary: customFontFamily,
+    buttonTextSecondary: customFontFamily,
+    buttonTextTertiary: customFontFamily,
+    dropdownGroupHeader: customFontFamily,
+    header: customFontFamily,
+    inputAmount: customFontFamily,
+    modalTopbarTitle: customFontFamily,
+    txStatusDescription: customFontFamily,
+    txStatusTitle: customFontFamily
+  } : {
+    amountValue: fontStacks[fontStack],
+    body: fontStacks[fontStack],
+    buttonTextPrimary: fontStacks[fontStack],
+    buttonTextSecondary: fontStacks[fontStack],
+    buttonTextTertiary: fontStacks[fontStack],
+    dropdownGroupHeader: fontStacks[fontStack],
+    header: fontStacks[fontStack],
+    inputAmount: fontStacks[fontStack],
+    modalTopbarTitle: fontStacks[fontStack],
+    txStatusDescription: fontStacks[fontStack],
+    txStatusTitle: fontStacks[fontStack],
+    ...customFontFamily
+  },
+  fontWeight: {
+    ...DEFAULT_FONT_WEIGHTS,
+    cryptoCashToggle: DEFAULT_FONT_WEIGHTS.medium,
+    dropdownGroupHeader: DEFAULT_FONT_WEIGHTS.medium,
+    inputAmount: DEFAULT_FONT_WEIGHTS.medium,
+    inputLabel: DEFAULT_FONT_WEIGHTS.medium,
+    inputValue: DEFAULT_FONT_WEIGHTS.medium,
+    modalTopbarTitle: DEFAULT_FONT_WEIGHTS.medium,
+    modalBottomBarButtonText: DEFAULT_FONT_WEIGHTS.medium,
+    paymentMethodItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
+    paymentMethodItemTitle: DEFAULT_FONT_WEIGHTS.medium,
+    selectAssetItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
+    selectAssetItemTitle: DEFAULT_FONT_WEIGHTS.medium,
+    sourceListSectionLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
+    txBreakdown: DEFAULT_FONT_WEIGHTS.regular,
+    txStatusDescription: DEFAULT_FONT_WEIGHTS.regular,
+    txStatusTitle: DEFAULT_FONT_WEIGHTS.medium,
+    txSummaryLabel: DEFAULT_FONT_WEIGHTS.medium,
+    txSummaryValue: DEFAULT_FONT_WEIGHTS.medium,
+    formOfPaymentsListSectionLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
+    withdrawalYouWillReceiveLabel: DEFAULT_FONT_WEIGHTS.regular,
+    withdrawalYouWillReceiveValueCrypto: DEFAULT_FONT_WEIGHTS.medium,
+    withdrawalYouWillReceiveValueUsd: DEFAULT_FONT_WEIGHTS.regular,
+    ...customFontWeights
+  },
+  fontSize: {
+    ...FONT_SIZINGS[fontSizing],
+    body: FONT_SIZINGS[fontSizing][14],
+    cryptoCashToggle: FONT_SIZINGS[fontSizing][12],
+    "header-14": { fontSize: "14px", lineHeight: "14px" },
+    "header-36": { fontSize: "36px", lineHeight: "36px" },
+    buttonTextPrimary: FONT_SIZINGS[fontSizing][12],
+    buttonTextSecondary: FONT_SIZINGS[fontSizing][10],
+    buttonTextTertiary: FONT_SIZINGS[fontSizing][12],
+    dollarValue: FONT_SIZINGS[fontSizing][40],
+    dropdownGroupHeader: FONT_SIZINGS[fontSizing][12],
+    inputAmount: FONT_SIZINGS[fontSizing][57],
+    inputLabel: customFontSizings[12] ?? FONT_SIZINGS[fontSizing][12],
+    inputValue: customFontSizings[13] ?? FONT_SIZINGS[fontSizing][13],
+    modalTopbarSubtitle: FONT_SIZINGS[fontSizing][10],
+    modalTopbarTitle: FONT_SIZINGS[fontSizing][13],
+    modalBottomBarButtonText: FONT_SIZINGS[fontSizing][12],
+    paymentMethodItemSubtitle: FONT_SIZINGS[fontSizing][12],
+    paymentMethodItemTitle: FONT_SIZINGS[fontSizing][12],
+    selectAssetItemSubtitle: FONT_SIZINGS[fontSizing][10],
+    selectAssetItemTitle: FONT_SIZINGS[fontSizing][13],
+    txBreakdown: FONT_SIZINGS[fontSizing][12],
+    txStatusDescription: FONT_SIZINGS[fontSizing][13],
+    txStatusTitle: FONT_SIZINGS[fontSizing][13],
+    txSummaryLabel: FONT_SIZINGS[fontSizing][12],
+    txSummaryValue: FONT_SIZINGS[fontSizing][12],
+    withdrawalYouWillReceive: customFontSizings[12] ?? FONT_SIZINGS[fontSizing][12],
+    youPayYouReceivePrimaryFontSize: FONT_SIZINGS[fontSizing][12],
+    youPayYouReceiveSecondaryFontSize: FONT_SIZINGS[fontSizing][10],
+    depositAddressFontSize: FONT_SIZINGS[fontSizing][10],
+    funFeatureListItemFontSize: FONT_SIZINGS[fontSizing][12],
+    dropdownItemFontSize: FONT_SIZINGS[fontSizing][12],
+    sourceListSectionLabelFontSize: FONT_SIZINGS[fontSizing][12],
+    formOfPaymentsListSectionLabelFontSize: FONT_SIZINGS[fontSizing][12],
+    quickOptionFontSize: FONT_SIZINGS[fontSizing][14],
+    useConnectedFontSize: FONT_SIZINGS[fontSizing][12],
+    paymentFeeSummaryTooltip: FONT_SIZINGS[fontSizing][10],
+    tooltipContent: FONT_SIZINGS[fontSizing][10],
+    ...customFontSizings
+  },
+  radii: {
+    actionButton: radiusScales[borderRadius].actionButton,
+    actionButtonInner: radiusScales[borderRadius].actionButtonInner,
+    connectButton: radiusScales[borderRadius].connectButton,
+    menuButton: radiusScales[borderRadius].connectButton,
+    modal: radiusScales[borderRadius].modal,
+    modalMobile: radiusScales[borderRadius].modalMobile,
+    modalActionButton: radiusScales[borderRadius].modalActionButton,
+    modalActionButtonMobile: radiusScales[borderRadius].modalActionButtonMobile,
+    summaryBox: radiusScales[borderRadius].summaryBox,
+    youPayYouReceive: radiusScales[borderRadius].youPayYouReceive,
+    inputAmountSwitcher: radiusScales[borderRadius].inputAmountSwitcher,
+    qrCode: radiusScales[borderRadius].qrCode,
+    skeleton: radiusScales[borderRadius].skeleton,
+    tooltip: radiusScales[borderRadius].tooltip,
+    dropdown: radiusScales[borderRadius].dropdown,
+    dropdownItem: radiusScales[borderRadius].dropdownItem,
+    dropdownList: customBorderRadiuses?.dropdownList ?? customBorderRadiuses?.dropdown ?? radiusScales[borderRadius].dropdown,
+    modalTopbarIcon: radiusScales[borderRadius].modalTopbarIcon,
+    withdrawalInput: radiusScales[borderRadius].withdrawalInput,
+    useConnected: radiusScales[borderRadius].useConnected,
+    ...customBorderRadiuses
+  },
+  borderWidths: {
+    activeOptionBorderWidth: "1px",
+    buttonTertiaryBorderWidth: "0px",
+    cryptoCashToggleContainerBorderWidth: "0px",
+    cryptoCashToggleActiveTabBorderWidth: "1px",
+    cryptoCashToggleInactiveTabBorderWidth: "1px",
+    txSummaryBoxBorderWidth: "1px",
+    ...customBorderWidths
+  },
+  spacing: {
+    confirmationStepMarginTop: "6px",
+    confirmationStepVerticalGap: "18px",
+    cryptoCashToggleContainerPadding: "3px",
+    cryptoCashToggleMarginBottom: "16px",
+    cryptoCashToggleMarginTop: "24px",
+    cryptoCashToggleTabPaddingY: "6px",
+    dropdownItemIconGap: "4px",
+    dropdownItemPaddingX: "4px",
+    dropdownItemPaddingY: "6px",
+    dropdownCompactPaddingX: "6px",
+    dropdownCompactPaddingY: "6px",
+    dropdownPaddingX: "12px",
+    dropdownPaddingY: "12px",
+    modalBaseHorizontalPadding: "6px",
+    modalBottomBarButtonPaddingY: "0px",
+    modalBottomHorizontalPadding: "12px",
+    modalPaddingBottomUpper: "16px",
+    modalPaddingBottomLower: "16px",
+    modalTopBarVerticalTextSpacing: "0px",
+    selectAssetItemPaddingX: "12px",
+    selectAssetItemPaddingY: "8px",
+    selectAssetItemTextGap: "0px",
+    selectBrokerageItemPaddingX: "12px",
+    selectBrokerageItemPaddingY: "11px",
+    selectBrokerageListGap: "0px",
+    walletConnectorListGap: "10px",
+    txBreakdownMarginY: "18px",
+    txBreakdownPaddingX: "12px",
+    txSummaryBoxPaddingX: "12px",
+    txSummaryBoxPaddingY: "12px",
+    txSummaryLineItemPadding: "0px",
+    txSummaryDividerMarginX: "12px",
+    txSummaryDividerMarginY: "12px",
+    verticalSectionGap: "18px",
+    withdrawalModalPaddingTop: "12px",
+    youPayYouReceivePaddingLeft: "12px",
+    youPayYouReceivePaddingRight: "16px",
+    youPayYouReceivePaddingY: "8px",
+    inputPaddingX: "12px",
+    inputPaddingY: "12px",
+    dropdownActiveItemRegularSizePaddingY: "8px",
+    assetListDefaultGap: "4px",
+    dropdownGroupDividerMarginY: "8px",
+    ...customSpacings
+  },
+  textTransforms: {
+    inputAmountQuickOptionButton: "none",
+    txStatusTitle: "none",
+    ...customTextTransforms
+  }
+});
+
+// src/themes/darkTheme.ts
+var accentColors = {
+  blue: { accentColor: "#3898FF", accentColorForeground: "#FFF" },
+  green: { accentColor: "#66CC00", accentColorForeground: "#000" },
+  orange: { accentColor: "#F6851B", accentColorForeground: "#000" },
+  pink: { accentColor: "#FF7AB8", accentColorForeground: "#000" },
+  purple: { accentColor: "#7A70FF", accentColorForeground: "#FFF" },
+  red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
+  white: { accentColor: "#FFF", accentColorForeground: "#000" }
+};
+var defaultAccentColor = accentColors.white;
+var darkTheme = ({
+  accentColor = defaultAccentColor.accentColor,
+  accentColorForeground = defaultAccentColor.accentColorForeground,
+  customColors,
+  customShadows,
+  ...baseThemeOptions
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a bunch of ?? defaults
+} = {}) => ({
+  ...baseTheme(baseThemeOptions),
+  colors: {
+    accentColor,
+    accentColorForeground,
+    actionButtonBorder: "rgba(255, 255, 255, 0.04)",
+    connectButtonBackground: "#000",
+    connectButtonBackgroundError: "#C60000",
+    connectButtonText: "#FFF",
+    connectButtonTextError: "#FFF",
+    connectionIndicator: "#30E000",
+    error: accentColors.red.accentColor,
+    errorBackground: "#F2E6E4",
+    errorBorder: "rgba(243, 65, 38, 0.2)",
+    generalBorder: "#292929",
+    // strokeColor in figma
+    generalBorderDim: "rgba(255, 255, 255, 0.04)",
+    menuItemBackground: "rgba(255, 255, 255, 0.03)",
+    selectedOptionBorder: "rgba(224, 232, 255, 0.1)",
+    focusedOptionBorder: "#8C8C8C",
+    standby: "#F6851B",
+    success: "#66CC00",
+    delayedStatusIcon: customColors?.secondaryText ?? "#8C8C8C",
+    // backward compatibility
+    chainIconBorder: "#fff",
+    // FUNKIT COLORS
+    // modal backgrounds
+    modalBackdrop: "rgba(0, 0, 0, 0.2)",
+    modalBackground: "#000000",
+    modalBorder: "#292929",
+    modalTopbarIcon: "#FFF",
+    modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
+    modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#333333",
+    modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#333333",
+    modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(255, 255, 255, 0.35)",
+    offBackground: "#1F1F1F",
+    offBackgroundInverse: "#F2F2F2",
+    hoverState: "#333333",
+    lightStroke: "#333333",
+    mediumStroke: "#333333",
+    heavyStroke: "rgba(117, 117, 117, 0.40)",
+    strokeColor: "#333333",
+    secondaryBackground: "#333333",
+    //Text
+    primaryText: "#FFF",
+    secondaryText: "#8C8C8C",
+    tertiaryText: "rgba(255, 255, 255, 0.35)",
+    textSelection: "rgba(255, 255, 255, 0.10)",
+    selectedDropdownItemText: customColors?.primaryText ?? "#FFF",
+    copyButtonBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
+    copyButtonBackgroundHover: customColors?.hoverState ?? "#333333",
+    copyButtonBackgroundActive: customColors?.inputBorderHover ?? "#525252",
+    useConnectedBackgroundBase: customColors?.mediumStroke ?? "#333333",
+    useConnectedBackgroundHover: customColors?.mediumStroke ?? "#333333",
+    copyButtonBorderBase: customColors?.mediumStroke ?? "#333333",
+    copyButtonBorderHover: customColors?.mediumStroke ?? "#333333",
+    funFeatureListBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
+    funFeatureListBackgroundHover: customColors?.hoverState ?? "#333333",
+    funFeatureListBorderColor: "transparent",
+    funFeatureListBorderColorHover: "transparent",
+    selectedDropdownItemBackground: "transparent",
+    alwaysVisibleLabelBackgroundHover: "transparent",
+    // input
+    inputLabel: customColors?.primaryText ?? "#FFF",
+    inputBackground: "#000000",
+    inputBackgroundHover: customColors?.offBackground ?? "#1F1F1F",
+    inputBorderBase: "#333333",
+    inputBorderHover: "#525252",
+    // tab
+    activeTabBorderColor: "#333333",
+    activeTabBackground: "#333333",
+    inactiveTabBorderColor: "transparent",
+    inactiveTabBackgroundBase: "transparent",
+    inactiveTabBackgroundHover: "transparent",
+    inactiveTabBackgroundActive: "transparent",
+    activeTabText: customColors?.primaryText ?? "#FFF",
+    inactiveTabTextBase: customColors?.secondaryText ?? "#8C8C8C",
+    inactiveTabHover: customColors?.primaryText ?? "#FFF",
+    // button
+    actionColor: "#FFF",
+    actionColorHover: "rgba(255, 255, 255, 0.8)",
+    actionColorDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonPrimary: accentColor,
+    buttonDisabled: "rgba(255, 255, 255, 0.20)",
+    buttonTextPrimary: "#000000",
+    buttonTextHover: "#000000",
+    buttonTextDisabled: "#000000",
+    buttonWarning: accentColors.red.accentColor,
+    buttonSuccess: "#2EA200",
+    transparent: "transparent",
+    buttonBackgroundTertiary: "#333333",
+    buttonBackgroundHoverTertiary: "#333333",
+    buttonBackgroundDisabledTertiary: "transparent",
+    buttonTextTertiary: "#FFF",
+    buttonTextDisabledTertiary: "rgba(255, 255, 255, 0.65)",
+    buttonBackground: "#FFF",
+    buttonBackgroundHover: "#f2f2f2",
+    buttonBackgroundPressed: "#FFF",
+    buttonBackgroundDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonTextSecondaryDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonTextSecondary: "#FFFFFF",
+    buttonIconBackgroundHover: "#333333",
+    buttonIconBackgroundPressed: "#333333",
+    buttonIconStroke: "rgba(255, 255, 255, 0.35)",
+    buttonBorderTertiary: "transparent",
+    buttonBorderFocusedTertiary: "rgba(255, 255, 255, 0.35)",
+    buttonFocusedOutline: "none",
+    buttonBorderGradient: "none",
+    buttonHoverBorderGradient: "none",
+    buttonDisabledBorderGradient: "none",
+    // TODO: Make common colors when refactoring the design system
+    inputAmountQuickOptionBaseBackground: "#1F1F1F",
+    inputAmountQuickOptionHoverBackground: "#333333",
+    inputAmountQuickOptionActiveBackground: "#333333",
+    inputAmountQuickOptionDisabledBackground: "#333333",
+    inputAmountQuickOptionBaseBorder: "#f2f2f2",
+    inputAmountQuickOptionHoverBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountQuickOptionActiveBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountQuickOptionFocusedBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
+    youPayYouReceiveBackground: "#000000",
+    // modalBackground
+    youPayYouReceiveBorder: "#333333",
+    // mediumStroke
+    youPayYouReceivePrimaryText: "#FFF",
+    // primaryText
+    youPayYouReceiveSecondaryText: "#8C8C8C",
+    // secondaryText
+    withdrawalYouWillReceiveLabel: customColors?.withdrawalYouWillReceiveLabel ?? customColors?.primaryText ?? "#FFF",
+    withdrawalYouWillReceiveValueCrypto: customColors?.withdrawalYouWillReceiveValueCrypto ?? customColors?.primaryText ?? "#FFF",
+    withdrawalYouWillReceiveValueUsd: customColors?.withdrawalYouWillReceiveValueUsd ?? customColors?.secondaryText ?? "#8C8C8C",
+    // badges
+    badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
+    badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
+    badgeTextSuccess: "rgb(124, 242, 136)",
+    newBadgeBackground: "linear-gradient(180deg, rgba(57, 76, 56, 0.55) 0%, rgba(61, 81, 65, 0.55) 100%)",
+    newBadgeBorder: "rgba(122, 221, 122, 0.3)",
+    newBadgeText: "#A4FF9A",
+    approvedBadgeBackground: "linear-gradient(180deg, rgba(236, 255, 234, 0.20) 0%, rgba(228, 255, 233, 0.20) 100%)",
+    approvedBadgeBorder: "rgba(109, 216, 109, 0.08)",
+    approvedBadgeText: "#8FFFA9",
+    failedBadgeBackground: "rgba(255, 61, 61, 0.18)",
+    failedBadgeBorder: "rgba(255, 255, 255, 0.10)",
+    failedBadgeText: "#F88877",
+    announceGradientFrom: "#AAAAAA",
+    announceGradientTo: "#BEBEBE",
+    fiatPendingGradientFrom: "#AAAAAA",
+    fiatPendingGradientTo: "#BEBEBE",
+    fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.30)",
+    fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.30)",
+    fiatStatusIconBorder: "rgba(255, 255, 255, 0.06)",
+    fiatAccountIconFill: "#002F5E",
+    fiatAccountGradientFrom: "#3A82FE",
+    fiatAccountGradientTo: "#73A7FF",
+    modalHeaderDivider: "#333333",
+    // lightStroke
+    modalFooterDivider: "#333333",
+    // lightStroke
+    spinnerBackground: customColors?.mediumStroke ?? "rgba(0, 0, 0, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicator: customColors?.primaryText ?? "#000",
+    // 100% buttonTextPrimary
+    spinnerBackgroundVerifyAccount: "rgba(0, 0, 0, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#000",
+    // 100% buttonTextPrimary
+    // Override colors
+    ...customColors || {},
+    // option Boxes
+    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
+    // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
+    optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    optionBoxBorderBase: customColors?.optionBoxBorderBase ?? customColors?.mediumStroke ?? "#333333",
+    optionBoxBorderHover: customColors?.optionBoxBorderHover ?? customColors?.mediumStroke ?? "#333333",
+    optionBoxDefaultModeNotActiveBorderBase: customColors?.optionBoxDefaultModeNotActiveBorderBase ?? "transparent",
+    optionBoxDefaultModeNotActiveBorderHover: customColors?.optionBoxDefaultModeNotActiveBorderHover ?? "transparent",
+    dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
+    openDropdownBackgroundColor: customColors?.openDropdownBackgroundColor ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
+    dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
+    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    dropdownActiveItemBorderBase: customColors?.dropdownActiveItemBorderBase ?? customColors?.mediumStroke ?? "#333333",
+    dropdownActiveItemBorderHover: customColors?.dropdownActiveItemBorderHover ?? customColors?.mediumStroke ?? "#333333",
+    dropdownGroupHeader: customColors?.dropdownGroupHeader ?? customColors?.primaryText ?? "#FFF",
+    // primaryText
+    txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#000",
+    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#333333",
+    modalBackgroundCheckoutComplete: customColors?.modalBackgroundCheckoutComplete ?? customColors?.modalBackground ?? "#000",
+    counterRingColor: customColors?.counterRingColor ?? accentColor,
+    cryptoCashToggleContainerBorderColor: customColors?.cryptoCashToggleContainerBorderColor ?? "transparent",
+    cryptoCashToggleBackground: customColors?.cryptoCashToggleBackground ?? "transparent"
+  },
+  shadows: {
+    connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+    dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
+    selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
+    selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.24)",
+    dropdown: "0px 0px 0px 1px rgba(255, 255, 255, 0.16), 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 4px 42px rgba(0, 0, 0, 0.06)",
+    notification: "0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 2px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
+    qrCode: "0px 0px 0px 1px rgba(255, 255, 255, 0.16)",
+    buttonShadow: "none",
+    buttonShadowTertiary: "none",
+    buttonHoverShadow: "none",
+    buttonHoverShadowTertiary: "none",
+    buttonFocusedShadow: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
+    buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
+    buttonDisabledShadow: "none",
+    buttonDisabledShadowTertiary: "none",
+    buttonInnerShadow: "none",
+    buttonInnerShadowTertiary: customShadows?.buttonInnerShadow ?? "none",
+    buttonFocusedInnerShadow: "none",
+    buttonFocusedInnerShadowTertiary: customShadows?.buttonFocusedInnerShadow ?? "none",
+    buttonHoverInnerShadow: "none",
+    buttonHoverInnerShadowTertiary: customShadows?.buttonHoverInnerShadow ?? "none",
+    buttonDisabledInnerShadow: "none",
+    buttonDisabledInnerShadowTertiary: customShadows?.buttonDisabledInnerShadow ?? "none",
+    selectedDropdownItem: "none",
+    // Override shadows
+    ...customShadows || {}
+  },
+  moonpayTheme: "dark"
+});
+darkTheme.accentColors = accentColors;
+
+// src/themes/lightTheme.ts
+var accentColors2 = {
+  blue: { accentColor: "#31A3F8", accentColorForeground: "#31A3F859" },
+  green: { accentColor: "#66CC00", accentColorForeground: "#FFF" },
+  orange: { accentColor: "#F6851B", accentColorForeground: "#FFF" },
+  pink: { accentColor: "#FF5CA0", accentColorForeground: "#FFF" },
+  purple: { accentColor: "#5F5AFA", accentColorForeground: "#FFF" },
+  red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
+  white: { accentColor: "#000000", accentColorForeground: "#FFF" }
+};
+var defaultAccentColor2 = accentColors2.white;
+var lightTheme = ({
+  accentColor = defaultAccentColor2.accentColor,
+  accentColorForeground = defaultAccentColor2.accentColorForeground,
+  customColors,
+  customShadows,
+  ...baseThemeOptions
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a bunch of ?? defaults
+} = {}) => ({
+  ...baseTheme(baseThemeOptions),
+  colors: {
+    accentColor,
+    accentColorForeground,
+    actionButtonBorder: "rgba(0, 0, 0, 0.04)",
+    connectButtonBackground: "#FFF",
+    connectButtonBackgroundError: "#C60000",
+    connectButtonText: "#25292E",
+    connectButtonTextError: "#FFF",
+    connectionIndicator: "#30E000",
+    error: accentColors2.red.accentColor,
+    errorBackground: "#F2E6E4",
+    errorBorder: "rgba(243, 65, 38, 0.2)",
+    generalBorder: "#F7F7F7",
+    // strokeColor in figma
+    generalBorderDim: "rgba(0, 0, 0, 0.03)",
+    menuItemBackground: "#FCFCFC",
+    selectedOptionBorder: "#F7F7F7",
+    focusedOptionBorder: "#737373",
+    standby: "#F6851B",
+    success: "#66CC00",
+    delayedStatusIcon: customColors?.secondaryText ?? "#737373",
+    // backward compatibility
+    chainIconBorder: "#fff",
+    // FUNKIT COLORS
+    // modal backgrounds
+    modalBackdrop: "rgba(0, 0, 0, 0.2)",
+    modalTopbarIcon: "#000",
+    modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
+    modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#F7F7F7",
+    modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#F0F0F0",
+    modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(0, 0, 0, 0.35)",
+    modalBackground: "#FFF",
+    modalBorder: "#F7F7F7",
+    offBackground: "#F7F7F7",
+    offBackgroundInverse: "#333333",
+    hoverState: "#F0F0F0",
+    lightStroke: "#F7F7F7",
+    mediumStroke: "#F0F0F0",
+    heavyStroke: "#E5E5E5",
+    strokeColor: "#E8E8E8",
+    secondaryBackground: "#F7F7F7",
+    //Text
+    primaryText: "#000",
+    secondaryText: "#737373",
+    tertiaryText: "rgba(0, 0, 0, 0.35)",
+    textSelection: "rgba(0, 0, 0, 0.10)",
+    selectedDropdownItemText: customColors?.primaryText ?? "#000",
+    copyButtonBackgroundBase: customColors?.offBackground ?? "#F7F7F7",
+    copyButtonBackgroundHover: customColors?.hoverState ?? "#F0F0F0",
+    copyButtonBackgroundActive: customColors?.inputBorderHover ?? "#E5E5E5",
+    useConnectedBackgroundBase: customColors?.mediumStroke ?? "#F0F0F0",
+    useConnectedBackgroundHover: customColors?.mediumStroke ?? "#F0F0F0",
+    copyButtonBorderBase: customColors?.mediumStroke ?? "#F0F0F0",
+    copyButtonBorderHover: customColors?.mediumStroke ?? "#F0F0F0",
+    funFeatureListBackgroundBase: customColors?.offBackground ?? "#F7F7F7",
+    funFeatureListBackgroundHover: customColors?.hoverState ?? "#F0F0F0",
+    funFeatureListBorderColor: "transparent",
+    funFeatureListBorderColorHover: "transparent",
+    selectedDropdownItemBackground: "transparent",
+    alwaysVisibleLabelBackgroundHover: "transparent",
+    // input
+    inputLabel: customColors?.primaryText ?? "#000",
+    inputBackground: "#FFFFFF",
+    inputBackgroundHover: customColors?.offBackground ?? "#F7F7F7",
+    inputBorderBase: "#F0F0F0",
+    inputBorderHover: "#E5E5E5",
+    // tab
+    activeTabBorderColor: "#F7F7F7",
+    activeTabBackground: "#F7F7F7",
+    inactiveTabBorderColor: "transparent",
+    inactiveTabBackgroundBase: "transparent",
+    inactiveTabBackgroundHover: "transparent",
+    inactiveTabBackgroundActive: "transparent",
+    activeTabText: customColors?.primaryText ?? "#000",
+    inactiveTabTextBase: customColors?.secondaryText ?? "#737373",
+    inactiveTabHover: customColors?.primaryText ?? "#000",
+    // button
+    actionColor: "#000",
+    actionColorHover: "rgba(0, 0, 0, 0.7)",
+    actionColorDisabled: "rgba(0, 0, 0, 0.50)",
+    buttonPrimary: accentColor,
+    buttonDisabled: "#31A3F826",
+    buttonWarning: accentColors2.red.accentColor,
+    buttonSuccess: "#2EA200",
+    buttonTextPrimary: "#FFFFFF",
+    buttonTextHover: "#FFF",
+    buttonTextDisabled: "#FFF",
+    transparent: "transparent",
+    buttonBackgroundTertiary: "#F7F7F7",
+    buttonBackgroundHoverTertiary: "#F0F0F0",
+    buttonBackgroundDisabledTertiary: "transparent",
+    buttonTextTertiary: "#000",
+    buttonTextDisabledTertiary: "rgba(0, 0, 0, 0.5)",
+    buttonBackground: "#000",
+    buttonBackgroundHover: "#333333",
+    buttonBackgroundPressed: "#000",
+    buttonBackgroundDisabled: "rgba(0, 0, 0, 0.5)",
+    buttonTextSecondaryDisabled: "rgba(0, 0, 0, 0.5)",
+    buttonTextSecondary: "#000000",
+    buttonIconBackgroundHover: "#F7F7F7",
+    buttonIconBackgroundPressed: "#F0F0F0",
+    buttonIconStroke: "rgba(0, 0, 0, 0.35)",
+    buttonBorderTertiary: "transparent",
+    buttonBorderFocusedTertiary: "rgba(0, 0, 0, 0.35)",
+    buttonFocusedOutline: "none",
+    buttonBorderGradient: "none",
+    buttonHoverBorderGradient: "none",
+    buttonDisabledBorderGradient: "none",
+    // TODO: Make common colors when refactoring the design system
+    inputAmountQuickOptionBaseBackground: "#F7F7F7",
+    inputAmountQuickOptionHoverBackground: "#F0F0F0",
+    inputAmountQuickOptionActiveBackground: "#F0F0F0",
+    inputAmountQuickOptionDisabledBackground: "#F7F7F7",
+    inputAmountQuickOptionBaseBorder: "#F7F7F7",
+    inputAmountQuickOptionHoverBorder: "rgba(0, 0, 0, 0.35)",
+    inputAmountQuickOptionActiveBorder: "rgba(0, 0, 0, 0.35)",
+    inputAmountQuickOptionFocusedBorder: "rgba(0, 0, 0, 0.35)",
+    inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
+    youPayYouReceiveBackground: "#FFF",
+    // modalBackground
+    youPayYouReceiveBorder: "#F0F0F0",
+    // mediumStroke
+    youPayYouReceivePrimaryText: "#000",
+    // primaryText
+    youPayYouReceiveSecondaryText: "#737373",
+    // secondaryText
+    withdrawalYouWillReceiveLabel: customColors?.withdrawalYouWillReceiveLabel ?? customColors?.primaryText ?? "#000",
+    withdrawalYouWillReceiveValueCrypto: customColors?.withdrawalYouWillReceiveValueCrypto ?? customColors?.primaryText ?? "#000",
+    withdrawalYouWillReceiveValueUsd: customColors?.withdrawalYouWillReceiveValueUsd ?? customColors?.secondaryText ?? "#737373",
+    // badges
+    badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
+    badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
+    badgeTextSuccess: "rgb(124, 242, 136)",
+    newBadgeBackground: "linear-gradient(180deg, #ECFFEA 0%, #E4FFE9 100%)",
+    newBadgeBorder: "rgba(122, 221, 122, 0.5)",
+    newBadgeText: "#028320",
+    approvedBadgeBackground: "linear-gradient(180deg, #ECFFEA 0%, #E4FFE9 100%)",
+    approvedBadgeBorder: "rgba(109, 216, 109, 0.5)",
+    approvedBadgeText: "#028320",
+    failedBadgeBackground: "rgba(255, 61, 61, 0.08)",
+    failedBadgeBorder: "rgba(0, 0, 0, 0.03)",
+    failedBadgeText: "#C2341E",
+    announceGradientFrom: "#595959",
+    announceGradientTo: "#9C9C9C",
+    fiatPendingGradientFrom: "#454545",
+    fiatPendingGradientTo: "#747474",
+    fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.16)",
+    fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.12)",
+    fiatStatusIconBorder: "rgba(0, 0, 0, 0.03)",
+    fiatAccountIconFill: "#E7F3FE",
+    fiatAccountGradientFrom: "#055DF5",
+    fiatAccountGradientTo: "#4C8DFD",
+    modalHeaderDivider: "#F7F7F7",
+    // lightStroke
+    modalFooterDivider: "#F7F7F7",
+    // lightStroke
+    spinnerBackground: customColors?.mediumStroke ?? "rgba(255, 255, 255, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicator: customColors?.primaryText ?? "#FFF",
+    // 100% buttonTextPrimary
+    spinnerBackgroundVerifyAccount: "rgba(255, 255, 255, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#FFF",
+    // 100% buttonTextPrimary
+    // Override colors
+    ...customColors || {},
+    // option Boxes
+    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
+    // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
+    optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    optionBoxBorderBase: customColors?.optionBoxBorderBase ?? customColors?.mediumStroke ?? "#F0F0F0",
+    optionBoxBorderHover: customColors?.optionBoxBorderHover ?? customColors?.mediumStroke ?? "#F0F0F0",
+    optionBoxDefaultModeNotActiveBorderBase: customColors?.optionBoxDefaultModeNotActiveBorderBase ?? "transparent",
+    optionBoxDefaultModeNotActiveBorderHover: customColors?.optionBoxDefaultModeNotActiveBorderHover ?? "transparent",
+    dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#FFF",
+    openDropdownBackgroundColor: customColors?.openDropdownBackgroundColor ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
+    dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#F7F7F7",
+    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    dropdownActiveItemBorderBase: customColors?.dropdownActiveItemBorderBase ?? customColors?.mediumStroke ?? "#F0F0F0",
+    dropdownActiveItemBorderHover: customColors?.dropdownActiveItemBorderHover ?? customColors?.mediumStroke ?? "#F0F0F0",
+    dropdownGroupHeader: customColors?.dropdownGroupHeader ?? customColors?.primaryText ?? "#000",
+    // primaryText
+    txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#FFF",
+    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#F7F7F7",
+    modalBackgroundCheckoutComplete: customColors?.modalBackgroundCheckoutComplete ?? customColors?.modalBackground ?? "#FFF",
+    counterRingColor: customColors?.counterRingColor ?? accentColor,
+    cryptoCashToggleContainerBorderColor: customColors?.cryptoCashToggleContainerBorderColor ?? "transparent",
+    cryptoCashToggleBackground: customColors?.cryptoCashToggleBackground ?? "transparent"
+  },
+  shadows: {
+    connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+    dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
+    selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
+    selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.12)",
+    dropdown: "0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 6px 0px rgba(0, 0, 0, 0.03), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
+    notification: "0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 2px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
+    qrCode: "0px 0px 0px 1px rgba(0, 0, 0, 0.10), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 24px 0px rgba(8, 7, 7, 0.10)",
+    buttonShadow: "none",
+    buttonShadowTertiary: customShadows?.buttonShadow ?? "none",
+    buttonFocusedShadow: "0px 0px 0px 2px rgba(0, 0, 0, 0.25)",
+    buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(0, 0, 0, 0.25)",
+    buttonHoverShadow: "none",
+    buttonHoverShadowTertiary: "none",
+    buttonDisabledShadow: "none",
+    buttonDisabledShadowTertiary: customShadows?.buttonDisabledShadow ?? "none",
+    buttonInnerShadow: "none",
+    buttonInnerShadowTertiary: customShadows?.buttonInnerShadow ?? "none",
+    buttonFocusedInnerShadow: "none",
+    buttonFocusedInnerShadowTertiary: customShadows?.buttonFocusedInnerShadow ?? "none",
+    buttonHoverInnerShadow: "none",
+    buttonHoverInnerShadowTertiary: customShadows?.buttonHoverInnerShadow ?? "none",
+    buttonDisabledInnerShadow: "none",
+    buttonDisabledInnerShadowTertiary: customShadows?.buttonDisabledInnerShadow ?? "none",
+    selectedDropdownItem: "none",
+    // Override shadows
+    ...customShadows || {}
+  },
+  moonpayTheme: "light"
+});
+lightTheme.accentColors = accentColors2;
+
+// src/providers/FunkitThemeProvider.tsx
+var DEFAULT_THEME_SET = {
+  lightTheme: lightTheme(),
+  darkTheme: darkTheme()
+};
+var DEFAULT_THEME = DEFAULT_THEME_SET.darkTheme;
+var ThemeIdContext = createContext(void 0);
+var ThemeContext = createContext({
+  activeTheme: DEFAULT_THEME,
+  lightTheme: void 0,
+  darkTheme: void 0,
+  setTheme: () => {
+    return;
+  },
+  toggleTheme: () => {
+    return;
+  },
+  themeColorScheme: void 0
+});
+var useActiveTheme = () => {
+  const {
+    activeTheme,
+    setTheme,
+    lightTheme: lightTheme2,
+    darkTheme: darkTheme2,
+    toggleTheme,
+    themeColorScheme
+  } = useContext(ThemeContext);
+  return {
+    activeTheme,
+    /** Overrides the currently active `theme` with disregard to the `theme` provided to the `FunkitProvider`, ie. `toggleTheme` will switch to the `theme` provided to the `FunkitProvider`, not the theme set by `setTheme` */
+    setTheme,
+    /** Returns the `light` theme as long as a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it will be returned as `lightTheme` and `darkTheme` making them the same */
+    lightTheme: lightTheme2,
+    /** Returns the `dark` theme as long as a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it will be returned as `darkTheme` and `lightTheme` making them the same */
+    darkTheme: darkTheme2,
+    /** Toggles between `light` and `dark` themes as long as they were passed to the `FunkitProvider`, if only a single theme object was passed toggling will be disabled */
+    toggleTheme,
+    /** Returns an indication whether a `light` or a `dark` theme should be currently active, has meaning only if a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it reflects the system color scheme */
+    themeColorScheme
+  };
+};
+
+// src/components/FunSkeletonLoader/FunSkeletonLoader.css.ts
+var animateSkeletonClass = "FunSkeletonLoader_animateSkeletonClass__dj0x602 sprinkles_background_inputBorderHover_base__1rsrm2f15a";
+
+// src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
+function FunSkeletonBlock({
+  borderRadius = "skeleton",
+  fontSize,
+  height,
+  width = "full",
+  ...props
+}) {
+  const { activeTheme } = useActiveTheme();
+  const cssHeight = height ? activeTheme.dimensions[height] || (height.endsWith("px") ? height : `${height}px`) : activeTheme.fontSize[fontSize].lineHeight;
+  return /* @__PURE__ */ React9.createElement(
+    Box,
+    {
+      borderRadius,
+      className: animateSkeletonClass,
+      width,
+      ...props,
+      style: { height: cssHeight, ...props.style }
+    }
+  );
+}
+
+// src/components/FunInput/FunInput.css.ts
+var baseWrapperStyles = "FunInput_baseWrapperStyles__zue0i60";
+var baseWrapperStylesNoTransition = "FunInput_baseWrapperStylesNoTransition__zue0i61";
+var inputClass = "FunInput_inputClass__zue0i64 sprinkles_color_primaryText_base__1rsrm2f2py sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassDisabled = "FunInput_inputClassDisabled__zue0i68 sprinkles_color_actionColorDisabled_base__1rsrm2f2ta sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassDisabledNoTransition = "FunInput_inputClassDisabledNoTransition__zue0i6a sprinkles_color_actionColorDisabled_base__1rsrm2f2ta sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassError = "FunInput_inputClassError__zue0i6c sprinkles_color_primaryText_base__1rsrm2f2py sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassErrorNoTransition = "FunInput_inputClassErrorNoTransition__zue0i6f sprinkles_color_primaryText_base__1rsrm2f2py sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassNoTransition = "FunInput_inputClassNoTransition__zue0i66 sprinkles_color_primaryText_base__1rsrm2f2py sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var numberInputResetStyle = "FunInput_numberInputResetStyle__zue0i62";
+
+// src/components/FunTooltip/FunTooltip.tsx
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React10, {
+  createContext as createContext2,
+  useContext as useContext2,
+  useState as useState3
+} from "react";
+var TooltipAnchorRefContext = createContext2(null);
+
+// src/components/FunInput/FunInput.tsx
+import React12, {
+  forwardRef,
+  useEffect as useEffect3,
+  useState as useState4
+} from "react";
+import clsx from "clsx";
+
+// src/components/Icons/SearchIcon.tsx
+import React11 from "react";
+var SearchIcon = () => {
+  return /* @__PURE__ */ React11.createElement(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React11.createElement(
+      "path",
+      {
+        d: "M6.45041 12.9008C5.17464 12.9008 3.92752 12.5225 2.86676 11.8138C1.80599 11.105 0.979229 10.0975 0.491012 8.91887C0.00279446 7.74023 -0.124946 6.44321 0.123947 5.19199C0.37284 3.94074 0.987179 2.79139 1.88928 1.88928C2.79139 0.987179 3.94074 0.37284 5.19199 0.123947C6.44321 -0.124946 7.74023 0.00279446 8.91887 0.491012C10.0975 0.979229 11.105 1.80599 11.8138 2.86676C12.5225 3.92752 12.9008 5.17464 12.9008 6.45041C12.9008 7.29744 12.7339 8.13625 12.4098 8.91887C12.0856 9.70148 11.6105 10.4126 11.0115 11.0115C10.4126 11.6105 9.70148 12.0856 8.91887 12.4098C8.13625 12.7339 7.29744 12.9008 6.45041 12.9008ZM6.45041 1.29351C5.43386 1.29351 4.44014 1.59496 3.59491 2.15972C2.74968 2.72448 2.0909 3.52721 1.70189 4.46637C1.31287 5.40554 1.21108 6.43893 1.4094 7.43596C1.60772 8.43299 2.09724 9.34881 2.81604 10.0676C3.53486 10.7864 4.45067 11.276 5.44769 11.4743C6.44467 11.6726 7.47811 11.5708 8.41731 11.1818C9.35643 10.7927 10.1592 10.134 10.724 9.28876C11.2887 8.44352 11.5902 7.44984 11.5902 6.43328C11.5902 5.07012 11.0487 3.7628 10.0847 2.79891C9.12086 1.83502 7.81356 1.29351 6.45041 1.29351Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React11.createElement(
+      "path",
+      {
+        d: "M14.3567 15C14.2723 15.0003 14.1886 14.9839 14.1107 14.9515C14.0327 14.9192 13.962 14.8716 13.9027 14.8115L10.3648 11.2737C10.2513 11.1519 10.1896 10.9907 10.1925 10.8243C10.1954 10.6578 10.2629 10.4991 10.3806 10.3813C10.4983 10.2636 10.6571 10.1962 10.8236 10.1933C10.99 10.1904 11.151 10.2521 11.2729 10.3656L14.8107 13.9035C14.931 14.024 14.9986 14.1872 14.9986 14.3575C14.9986 14.5277 14.931 14.691 14.8107 14.8115C14.7515 14.8716 14.6807 14.9192 14.6027 14.9515C14.5248 14.9839 14.4411 15.0003 14.3567 15Z",
+        fill: "currentColor"
+      }
+    )
+  );
+};
+
+// src/components/FunInput/FunInput.tsx
+var DEFAULT_ICON_FONT_SIZE = "57px";
+var FunInput = forwardRef(function FunInputWithRef({
+  prefix,
+  suffix,
+  prefixIcon,
+  placeholder,
+  value,
+  label,
+  onChange,
+  onKeyDown,
+  onKeySubmit,
+  onPaste,
+  onMouseDown,
+  onFocus: userOnFocus,
+  onBlur: userOnBlur,
+  adornmentColor = "secondaryText",
+  fontFamily = "body",
+  textWeight = "inputLabel",
+  inputStyle = {},
+  inputProps = { type: "text" },
+  error,
+  alwaysFocused,
+  overrideBorderWidth,
+  overrideBackground,
+  ignoreFontSize,
+  borderRadius = "connectButton",
+  isLoading = false,
+  allowMultiline = false,
+  ignoreBaseTransitions = false,
+  decimalsColor,
+  decimalSeparator,
+  testId
+}, ref) {
+  const { activeTheme } = useActiveTheme();
+  const [focused, setFocused] = useState4(false);
+  const onFocus = () => {
+    setFocused(true);
+    userOnFocus?.();
+  };
+  const onBlur = () => {
+    setFocused(false);
+    userOnBlur?.();
+  };
+  const isFocused = alwaysFocused || focused;
+  const isValidDecimalColor = !!decimalsColor && activeTheme.colors?.[decimalsColor] !== "none";
+  const getBorderColor = () => {
+    if (error) {
+      return { base: "error" };
+    }
+    if (inputProps.disabled) {
+      return { base: "inputBorderBase" };
+    }
+    if (isFocused) {
+      return { base: "secondaryText" };
+    }
+    return {
+      base: "inputBorderBase",
+      hover: "inputBorderHover"
+    };
+  };
+  const textareaRef = React12.useRef(null);
+  useEffect3(() => {
+    if (allowMultiline) {
+      adjustTextareaHeight(textareaRef.current);
+    }
+  }, [allowMultiline, value]);
+  const { integerPart, decimalPart, shouldColorDecimals } = React12.useMemo(() => {
+    if (!isValidDecimalColor || !value || !decimalSeparator) {
+      return { integerPart: "", decimalPart: "", shouldColorDecimals: false };
+    }
+    const stringValue = String(value);
+    const parts = stringValue.split(decimalSeparator);
+    return {
+      integerPart: parts[0] || "",
+      decimalPart: parts[1] !== void 0 ? `${decimalSeparator}${parts[1]}` : "",
+      shouldColorDecimals: parts[1] !== void 0
+    };
+  }, [value, isValidDecimalColor, decimalSeparator]);
+  const renderInputOrTextarea = () => {
+    const commonProps = {
+      // ref,
+      value,
+      placeholder,
+      onChange,
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        onKeyDown?.(e);
+        if (e.key === "Enter") {
+          onKeySubmit?.();
+        }
+      },
+      onPaste,
+      onMouseDown,
+      onFocus,
+      onBlur,
+      onWheel: (e) => {
+        e.currentTarget.blur();
+      },
+      className: clsx(
+        error ? ignoreBaseTransitions ? inputClassErrorNoTransition : inputClassError : inputProps.disabled ? ignoreBaseTransitions ? inputClassDisabledNoTransition : inputClassDisabled : ignoreBaseTransitions ? inputClassNoTransition : inputClass,
+        numberInputResetStyle
+      ),
+      ...inputProps,
+      // If decimals are colored, the actual input element is hidden
+      // but keep the caret visible via caretColor
+      style: {
+        ...inputStyle,
+        color: shouldColorDecimals ? "transparent" : void 0,
+        caretColor: isValidDecimalColor ? themeVars.colors.primaryText : void 0
+      },
+      "data-auto-focus": inputProps.autoFocus,
+      "data-testid": testId ? `rk-${testId.replace(/^rk-/, "")}` : void 0
+    };
+    const handleTextareaOnChange = (e) => {
+      adjustTextareaHeight(textareaRef.current);
+      if (onChange) {
+        onChange(e);
+      }
+    };
+    const handleTextAreaOnPaste = (e) => {
+      adjustTextareaHeight(textareaRef.current);
+      if (onPaste) {
+        onPaste(e);
+      }
+    };
+    const inputElement = allowMultiline ? /* @__PURE__ */ React12.createElement(
+      "textarea",
+      {
+        ...commonProps,
+        ref: (el) => {
+          textareaRef.current = el;
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref && typeof ref === "object" && "current" in ref) {
+            ref.current = el;
+          }
+        },
+        rows: 1,
+        style: {
+          ...commonProps.style,
+          resize: "none",
+          boxSizing: "border-box"
+        },
+        onChange: handleTextareaOnChange,
+        onPaste: handleTextAreaOnPaste
+      }
+    ) : /* @__PURE__ */ React12.createElement(
+      "input",
+      {
+        ...commonProps,
+        ref: (el) => {
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref && typeof ref === "object" && "current" in ref) {
+            ref.current = el;
+          }
+        },
+        type: inputProps?.type || "text"
+      }
+    );
+    if (shouldColorDecimals) {
+      return /* @__PURE__ */ React12.createElement(Box, { style: { position: "relative", display: "flex", flex: 1 } }, /* @__PURE__ */ React12.createElement(
+        Box,
+        {
+          color: "primaryText",
+          style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            pointerEvents: "none",
+            fontFamily: "inherit",
+            fontSize: "inherit",
+            fontWeight: "inherit",
+            lineHeight: "inherit",
+            whiteSpace: "nowrap",
+            display: "flex",
+            alignItems: "center",
+            height: "100%"
+          }
+        },
+        /* @__PURE__ */ React12.createElement("span", { style: { color: "inherit" } }, integerPart),
+        /* @__PURE__ */ React12.createElement(DecimalSpan, { decimalsColor }, decimalPart)
+      ), inputElement);
+    }
+    return inputElement;
+  };
+  return /* @__PURE__ */ React12.createElement(
+    Box,
+    {
+      color: "primaryText",
+      display: "flex",
+      flexDirection: "column",
+      fontSize: "inherit",
+      gap: "8",
+      width: "full"
+    },
+    label && /* @__PURE__ */ React12.createElement(Text, { size: "inputLabel", weight: textWeight }, label),
+    isLoading ? /* @__PURE__ */ React12.createElement(FunSkeletonBlock, { height: "44" }) : /* @__PURE__ */ React12.createElement(
+      Box,
+      {
+        borderRadius,
+        fontFamily,
+        minWidth: "full",
+        display: "flex",
+        alignItems: allowMultiline ? "flex-start" : "center",
+        color: adornmentColor,
+        borderColor: getBorderColor(),
+        borderWidth: overrideBorderWidth ?? "1",
+        borderStyle: "solid",
+        fontSize: ignoreFontSize ? "inherit" : "inputValue",
+        fontWeight: "inputValue",
+        className: ignoreBaseTransitions ? baseWrapperStylesNoTransition : baseWrapperStyles,
+        background: overrideBackground || {
+          base: "inputBackground",
+          hover: "inputBackgroundHover"
+        }
+      },
+      prefix && /* @__PURE__ */ React12.createElement(Box, { paddingLeft: "12", height: "max" }, prefix),
+      prefixIcon === "SearchIcon" && /* @__PURE__ */ React12.createElement(
+        Box,
+        {
+          display: "flex",
+          paddingLeft: "12",
+          height: "max",
+          alignItems: "center",
+          color: isFocused ? "primaryText" : "secondaryText"
+        },
+        /* @__PURE__ */ React12.createElement(SearchIcon, null)
+      ),
+      prefixIcon === "$" && /* @__PURE__ */ React12.createElement(Box, { display: "flex", alignItems: "center", paddingLeft: "32" }, /* @__PURE__ */ React12.createElement(
+        DollarTextIcon,
+        {
+          fontSize: inputStyle.fontSize || DEFAULT_ICON_FONT_SIZE
+        }
+      )),
+      renderInputOrTextarea(),
+      suffix && /* @__PURE__ */ React12.createElement(
+        Box,
+        {
+          paddingLeft: "4",
+          paddingRight: "10",
+          ...allowMultiline ? {
+            style: {
+              paddingTop: `calc(${themeVars.spacing.inputPaddingY} - 3px)`
+            }
+          } : {}
+        },
+        suffix
+      )
+    ),
+    error && typeof error === "string" && /* @__PURE__ */ React12.createElement(Text, { color: "error", size: "10" }, error)
+  );
+});
+var adjustTextareaHeight = (textarea) => {
+  if (textarea) {
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }
+};
+var DollarTextIcon = ({ fontSize }) => /* @__PURE__ */ React12.createElement(
+  Text,
+  {
+    style: {
+      paddingBottom: 2,
+      fontSize,
+      fontWeight: 800
+    }
+  },
+  "$"
+);
+var DecimalSpan = ({
+  decimalsColor,
+  children
+}) => /* @__PURE__ */ React12.createElement(
+  Box,
+  {
+    color: decimalsColor,
+    style: { fontFamily: "inherit", fontSize: "inherit" }
+  },
+  children
+);
+
+// src/components/Icons/CheckIcon.tsx
+import React13 from "react";
+var CheckIcon = ({
+  size = 16,
+  className
+}) => /* @__PURE__ */ React13.createElement(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  },
+  /* @__PURE__ */ React13.createElement(
+    "path",
+    {
+      d: "M12.4919 4.88281L6.25757 11.1172L3.50781 8",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      pathLength: "100"
+    }
+  )
+);
+
+// src/components/Dropdown/BaseDropdownItem.tsx
+import { noop } from "@funkit/utils";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import React14 from "react";
+import clsx2 from "clsx";
+
+// src/components/Dropdown/BaseDropdownItem.css.ts
+var disabledDropdownItemStyles = "BaseDropdownItem_disabledDropdownItemStyles__18hhw3k3 BaseDropdownItem__18hhw3k2";
+var enabledDropdownItemStyles = "BaseDropdownItem_enabledDropdownItemStyles__18hhw3k1 BaseDropdownItem__18hhw3k0";
+
+// src/components/Dropdown/BaseDropdownItem.tsx
+function BaseDropdownItem({
+  iconComponent,
+  label,
+  description,
+  id,
+  onClick = noop,
+  isSelected = false,
+  isDisabled = false,
+  borderRadius = "connectButton",
+  horizontalIconGap = "dropdownItemIconGap",
+  tagComponent,
+  horizontalPadding = "dropdownItemPaddingX",
+  verticalPadding = "dropdownItemPaddingY"
+}) {
+  return /* @__PURE__ */ React14.createElement(
+    DropdownMenu.Item,
+    {
+      disabled: isDisabled,
+      onSelect: () => onClick(id),
+      asChild: true
+    },
+    /* @__PURE__ */ React14.createElement(
+      Box,
+      {
+        width: "full",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "24",
+        paddingY: verticalPadding,
+        paddingX: horizontalPadding,
+        className: clsx2(
+          isDisabled ? disabledDropdownItemStyles : enabledDropdownItemStyles
+        ),
+        boxShadow: isSelected ? "selectedDropdownItem" : void 0,
+        borderRadius
+      },
+      /* @__PURE__ */ React14.createElement(
+        Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          gap: horizontalIconGap
+        },
+        iconComponent && /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent),
+        /* @__PURE__ */ React14.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React14.createElement(
+          Text,
+          {
+            size: "dropdownItemFontSize",
+            weight: "medium",
+            color: isSelected ? "selectedDropdownItemText" : void 0
+          },
+          label
+        ), description != null && /* @__PURE__ */ React14.createElement(Text, { size: "12", color: "secondaryText" }, description))
+      ),
+      /* @__PURE__ */ React14.createElement(
+        Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "16"
+        },
+        tagComponent,
+        /* @__PURE__ */ React14.createElement(
+          Box,
+          {
+            width: "16",
+            height: "16",
+            alignItems: "center",
+            justifyContent: "center",
+            color: isSelected ? "selectedDropdownItemText" : "transparent"
+          },
+          /* @__PURE__ */ React14.createElement(CheckIcon, null)
+        )
+      )
+    )
+  );
+}
+var BaseDropdownItem_default = BaseDropdownItem;
+
+// src/components/Icons/CaretDownIcon.tsx
+import clsx3 from "clsx";
+import React15 from "react";
+
+// src/components/Icons/CaretDownIcon.css.ts
+var caretClosed = "CaretDownIcon_caretClosed__1gjdf1i3";
+var caretOpened = "CaretDownIcon_caretOpened__1gjdf1i2";
+
+// src/components/Icons/CaretDownIcon.tsx
+var CaretDownIcon = () => {
+  return /* @__PURE__ */ React15.createElement(
+    "svg",
+    {
+      width: "8",
+      height: "5",
+      viewBox: "0 0 8 5",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M3.45163 2.92973L0.879121 0.393174C0.654314 0.188182 0.317464 0.217886 0.126753 0.459527C-0.0639587 0.701168 -0.036324 1.06324 0.188483 1.26824L3.60944 4.64138C3.65478 4.68988 3.70789 4.72919 3.76623 4.7574C3.83874 4.79249 3.91764 4.80968 3.99714 4.80771C4.07647 4.80576 4.15489 4.78486 4.22578 4.74655C4.23264 4.74283 4.23943 4.73894 4.24614 4.7349C4.28505 4.71152 4.32107 4.68295 4.35332 4.64987L7.82907 1.18704C8.04528 0.97163 8.0581 0.608604 7.8577 0.376205C7.6573 0.143806 7.31956 0.130027 7.10335 0.345432L4.51922 2.91996C4.51922 2.94623 4 3.43025 4 3.43025L3.45163 2.92973Z",
+        fill: "currentColor"
+      }
+    )
+  );
+};
+var AnimatedCaretDownIcon = ({
+  expanded,
+  color = "primaryText",
+  compact = false
+}) => {
+  const animationClassName = clsx3(
+    expanded !== void 0 && (expanded ? caretOpened : caretClosed)
+  );
+  if (compact) {
+    return /* @__PURE__ */ React15.createElement(
+      Box,
+      {
+        color,
+        width: "8",
+        height: "8",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        className: animationClassName
+      },
+      /* @__PURE__ */ React15.createElement(CaretDownIcon, null)
+    );
+  }
+  return /* @__PURE__ */ React15.createElement(
+    Box,
+    {
+      color,
+      width: "16",
+      height: "16",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      className: animationClassName
+    },
+    /* @__PURE__ */ React15.createElement(
+      Box,
+      {
+        width: "8",
+        height: "8",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      /* @__PURE__ */ React15.createElement(CaretDownIcon, null)
+    )
+  );
+};
+
+// src/components/FunNoResults/FunNoResults.tsx
+import React18 from "react";
+
+// src/components/Icons/CoinsIcon.tsx
+import React16 from "react";
+var CoinsIcon = ({
+  size = 48,
+  bgColor = "#141C41",
+  iconColor = "#878A98"
+}) => {
+  return /* @__PURE__ */ React16.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 48 49",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React16.createElement("g", { clipPath: "url(#clip0_30657_22302)" }, /* @__PURE__ */ React16.createElement(
+      "path",
+      {
+        d: "M24 1C36.9787 1 47.5 11.5213 47.5 24.5C47.5 37.4787 36.9787 48 24 48C11.0213 48 0.5 37.4787 0.5 24.5C0.5 11.5213 11.0213 1 24 1Z",
+        fill: bgColor,
+        stroke: bgColor
+      }
+    ), /* @__PURE__ */ React16.createElement("g", { clipPath: "url(#clip1_30657_22302)" }, /* @__PURE__ */ React16.createElement(
+      "path",
+      {
+        d: "M25 17C25 18.1046 22.5376 19 19.5 19C16.4624 19 14 18.1046 14 17M25 17C25 15.8954 22.5376 15 19.5 15C16.4624 15 14 15.8954 14 17M25 17V18.5M14 17V29C14 30.1046 16.4624 31 19.5 31M19.5 23C19.3315 23 19.1647 22.9972 19 22.9918C16.1967 22.9 14 22.0433 14 21M19.5 27C16.4624 27 14 26.1046 14 25M34 23.5C34 24.6046 31.5376 25.5 28.5 25.5C25.4624 25.5 23 24.6046 23 23.5M34 23.5C34 22.3954 31.5376 21.5 28.5 21.5C25.4624 21.5 23 22.3954 23 23.5M34 23.5V31C34 32.1046 31.5376 33 28.5 33C25.4624 33 23 32.1046 23 31V23.5M34 27.25C34 28.3546 31.5376 29.25 28.5 29.25C25.4624 29.25 23 28.3546 23 27.25",
+        stroke: iconColor,
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ))),
+    /* @__PURE__ */ React16.createElement("defs", null, /* @__PURE__ */ React16.createElement("clipPath", { id: "clip0_30657_22302" }, /* @__PURE__ */ React16.createElement(
+      "rect",
+      {
+        width: "48",
+        height: "48",
+        fill: "white",
+        transform: "translate(0 0.5)"
+      }
+    )), /* @__PURE__ */ React16.createElement("clipPath", { id: "clip1_30657_22302" }, /* @__PURE__ */ React16.createElement(
+      "rect",
+      {
+        width: "24",
+        height: "24",
+        fill: "white",
+        transform: "translate(12 12)"
+      }
+    )))
+  );
+};
+
+// src/components/Icons/SearchSkeletonIcon.tsx
+import React17 from "react";
+var SearchSkeletonIcon = () => {
+  return /* @__PURE__ */ React17.createElement(
+    "svg",
+    {
+      width: "122",
+      height: "81",
+      viewBox: "0 0 122 81",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React17.createElement("g", { clipPath: "url(#clip0_7590_15835)" }, /* @__PURE__ */ React17.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M99.5636 34.0159C92.9099 34.0159 87.5159 39.4099 87.5159 46.0636C87.5159 52.7174 92.9099 58.1114 99.5636 58.1114C106.217 58.1114 111.611 52.7174 111.611 46.0636C111.611 39.4099 106.217 34.0159 99.5636 34.0159ZM83.5 46.0636C83.5 37.1919 90.6919 30 99.5636 30C108.435 30 115.627 37.1919 115.627 46.0636C115.627 49.7758 114.368 53.1938 112.254 55.9139L120.912 64.5722C121.696 65.3564 121.696 66.6277 120.912 67.4119C120.128 68.196 118.856 68.196 118.072 67.4119L109.414 58.7536C106.694 60.8681 103.276 62.1273 99.5636 62.1273C90.6919 62.1273 83.5 54.9353 83.5 46.0636Z",
+        fill: "currentColor"
+      }
+    ), /* @__PURE__ */ React17.createElement(
+      "path",
+      {
+        d: "M117.5 8H4.5C2.29086 8 0.5 9.79086 0.5 12V20C0.5 22.2091 2.29086 24 4.5 24H117.5C119.709 24 121.5 22.2091 121.5 20V12C121.5 9.79086 119.709 8 117.5 8Z",
+        fill: "currentColor"
+      }
+    ), /* @__PURE__ */ React17.createElement(
+      "path",
+      {
+        d: "M71.5 30H4.5C2.29086 30 0.5 31.7909 0.5 34V42C0.5 44.2091 2.29086 46 4.5 46H71.5C73.7091 46 75.5 44.2091 75.5 42V34C75.5 31.7909 73.7091 30 71.5 30Z",
+        fill: "currentColor"
+      }
+    ), /* @__PURE__ */ React17.createElement(
+      "path",
+      {
+        d: "M71.5 52H4.5C2.29086 52 0.5 53.7909 0.5 56V64C0.5 66.2091 2.29086 68 4.5 68H71.5C73.7091 68 75.5 66.2091 75.5 64V56C75.5 53.7909 73.7091 52 71.5 52Z",
+        fill: "currentColor"
+      }
+    )),
+    /* @__PURE__ */ React17.createElement("defs", null, /* @__PURE__ */ React17.createElement("clipPath", { id: "clip0_7590_15835" }, /* @__PURE__ */ React17.createElement(
+      "rect",
+      {
+        width: "121",
+        height: "81",
+        fill: "white",
+        transform: "translate(0.5)"
+      }
+    )))
+  );
+};
+
+// src/components/FunNoResults/FunNoResults.tsx
+var FunNoResults = ({
+  text,
+  title,
+  variant = "default",
+  actionButton
+}) => {
+  return /* @__PURE__ */ React18.createElement(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: variant === "default" ? "12" : "16",
+      color: "secondaryText",
+      style: { flex: 1 }
+    },
+    variant === "default" && /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(SearchSkeletonIcon, null), /* @__PURE__ */ React18.createElement(Text, { color: "secondaryText", size: "10" }, text)),
+    variant === "actionable" && /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
+      CoinsIcon,
+      {
+        bgColor: themeVars.colors.offBackground,
+        iconColor: themeVars.colors.actionColor
+      }
+    ), /* @__PURE__ */ React18.createElement(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "12"
+      },
+      /* @__PURE__ */ React18.createElement(
+        Box,
+        {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          gap: "8"
+        },
+        title && /* @__PURE__ */ React18.createElement(Text, { size: "14", color: "primaryText" }, title),
+        /* @__PURE__ */ React18.createElement(Text, { color: "secondaryText", size: "12" }, text)
+      ),
+      actionButton && /* @__PURE__ */ React18.createElement(Box, null, actionButton)
+    ))
+  );
+};
+
+// src/components/Icons/SwitchIcon.tsx
+import React19 from "react";
+var SwitchIcon = () => {
+  return /* @__PURE__ */ React19.createElement(
+    "svg",
+    {
+      width: "15",
+      height: "14",
+      viewBox: "0 0 15 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React19.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M0.96967 4.86358C0.676777 4.57069 0.676777 4.09582 0.96967 3.80292L3.63634 1.13626C3.92923 0.843363 4.4041 0.843363 4.697 1.13626L7.36366 3.80292C7.65656 4.09582 7.65656 4.57069 7.36366 4.86358C7.07077 5.15648 6.5959 5.15648 6.303 4.86358L4.91667 3.47725L4.91667 12.3333C4.91667 12.7475 4.58088 13.0833 4.16667 13.0833C3.75245 13.0833 3.41667 12.7475 3.41667 12.3333L3.41667 3.47725L2.03033 4.86358C1.73744 5.15648 1.26256 5.15648 0.96967 4.86358ZM7.63634 9.13626C7.92923 8.84336 8.4041 8.84336 8.697 9.13626L10.0833 10.5226V1.66659C10.0833 1.25237 10.4191 0.916586 10.8333 0.916586C11.2475 0.916586 11.5833 1.25237 11.5833 1.66659V10.5226L12.9697 9.13626C13.2626 8.84336 13.7374 8.84336 14.0303 9.13626C14.3232 9.42915 14.3232 9.90402 14.0303 10.1969L11.3637 12.8636C11.0708 13.1565 10.5959 13.1565 10.303 12.8636L7.63634 10.1969C7.34344 9.90402 7.34344 9.42915 7.63634 9.13626Z",
+        fill: "currentColor"
+      }
+    )
+  );
+};
+
+// src/components/Dropdown/BaseDropdown.css.ts
+var BORDER_RADIUS = "dropdown";
+var baseDropdownItemWrapperStyles = "BaseDropdown_baseDropdownItemWrapperStyles__1nns6ys3 sprinkles_borderRadius_dropdownItem__1rsrm2f17";
+var scrollGradientWrapperStyles = "BaseDropdown_scrollGradientWrapperStyles__1nns6ys1";
+var scrollableDropdownStyles = "BaseDropdown_scrollableDropdownStyles__1nns6ys0";
+
+// src/providers/FunkitStatsigProvider.tsx
+import { datadogLogs } from "@datadog/browser-logs";
+import {
+  LogEventCompressionMode,
+  LogLevel,
+  StatsigProvider,
+  useClientAsyncInit
+} from "@statsig/react-bindings";
+import React20, { useEffect as useEffect4 } from "react";
+var STATSIG_CLIENT_KEY = "client-UmFd8WIJljA7cLmZuDqs3X25M8sKd5WIQP4BSC2bRbM";
+
+// src/providers/FunkitProvider.tsx
+var ThemeIdContext2 = createContext3(void 0);
+var attr = "data-rk";
+var createThemeRootProps = (id) => ({ [attr]: id || "" });
+var useThemeRootProps = () => {
+  const id = useContext3(ThemeIdContext2);
+  return createThemeRootProps(id);
+};
+
+// src/components/Dropdown/BaseActiveDropdownItem.tsx
+import React22 from "react";
+
+// src/components/Dropdown/BaseActiveDropdownItem.css.ts
+var baseStyles = "BaseActiveDropdownItem_baseStyles__1dewiqw0";
+
+// src/components/Dropdown/BaseActiveDropdownItem.tsx
+function BaseActiveDropdownItem({
+  iconComponent,
+  label,
+  isOpened,
+  onClick,
+  horizontalIconGap = "dropdownItemIconGap",
+  alwaysVisibleLabel,
+  tagComponent,
+  tagPosition = "start",
+  size = "regular",
+  color = "primaryText",
+  arrowColor = "secondaryText",
+  background,
+  labelStyle,
+  compactIcon = false
+}) {
+  return /* @__PURE__ */ React22.createElement(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "6",
+      cursor: "pointer",
+      onClick,
+      background: background ?? {
+        base: "dropdownActiveItemBackgroundBase",
+        hover: "dropdownActiveItemBackgroundHover"
+      },
+      borderColor: {
+        base: "dropdownActiveItemBorderBase",
+        hover: "dropdownActiveItemBorderHover"
+      },
+      borderWidth: size === "compact" ? "0" : "1",
+      borderRadius: BORDER_RADIUS,
+      borderStyle: "solid",
+      paddingY: size === "compact" ? "2" : size === "large" ? "10" : "dropdownActiveItemRegularSizePaddingY",
+      paddingX: size === "compact" ? "4" : size === "large" ? "8" : "dropdownPaddingX",
+      className: baseStyles
+    },
+    /* @__PURE__ */ React22.createElement(
+      Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: horizontalIconGap,
+        style: size === "compact" ? void 0 : { flex: "1 0 auto" }
+      },
+      alwaysVisibleLabel && /* @__PURE__ */ React22.createElement(Box, { style: { flex: 1 } }, /* @__PURE__ */ React22.createElement(Text, { color: "secondaryText", size: "12" }, alwaysVisibleLabel)),
+      /* @__PURE__ */ React22.createElement(
+        Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: horizontalIconGap,
+          background: {
+            base: "transparent",
+            hover: "alwaysVisibleLabelBackgroundHover"
+          },
+          ...alwaysVisibleLabel ? {} : { style: { flex: 1 } }
+        },
+        /* @__PURE__ */ React22.createElement(
+          Box,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: horizontalIconGap,
+            ...alwaysVisibleLabel ? { style: { flexDirection: "row-reverse" } } : {}
+          },
+          tagPosition === "start" && tagComponent,
+          /* @__PURE__ */ React22.createElement(Box, { display: "flex", alignItems: "center", gap: horizontalIconGap }, iconComponent && /* @__PURE__ */ React22.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent), /* @__PURE__ */ React22.createElement(
+            Text,
+            {
+              color,
+              size: "dropdownItemFontSize",
+              weight: "medium",
+              style: labelStyle
+            },
+            label
+          ))
+        ),
+        /* @__PURE__ */ React22.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, tagPosition === "end" && tagComponent, /* @__PURE__ */ React22.createElement(
+          AnimatedCaretDownIcon,
+          {
+            expanded: isOpened,
+            color: arrowColor,
+            compact: compactIcon
+          }
+        ))
+      )
+    )
+  );
+}
+var BaseActiveDropdownItem_default = BaseActiveDropdownItem;
+
+// src/components/Dropdown/BaseDropdown.utils.ts
+var NO_SELECTION_VALUE = "";
+var ADDITIONAL_GROUP_KEY = "__additional__";
+function buildAllOptions(options, allowUnselect, unselectLabel) {
+  if (allowUnselect) {
+    return [
+      {
+        label: unselectLabel ?? "",
+        value: NO_SELECTION_VALUE
+      },
+      ...options
+    ];
+  }
+  return options;
+}
+function filterOptions(allOptions, searchInput) {
+  const search = searchInput?.trim().toLowerCase() ?? "";
+  return allOptions.filter(
+    (option) => option.label.toLowerCase().includes(search)
+  );
+}
+function organizeDropdownGroups(filteredOptions, groups, additionalGroup, additionalGroupLabel) {
+  const organizedGroups = [];
+  if (!groups) {
+    organizedGroups.push({
+      key: ADDITIONAL_GROUP_KEY,
+      label: void 0,
+      options: filteredOptions
+    });
+    return {
+      organizedGroups,
+      organizedOptions: filteredOptions
+    };
+  }
+  const unselectOption = filteredOptions.find(
+    (option) => option.value === NO_SELECTION_VALUE
+  );
+  if (unselectOption) {
+    organizedGroups.push({
+      key: NO_SELECTION_VALUE,
+      label: void 0,
+      options: [unselectOption]
+    });
+  }
+  const optionsByValue = new Map(
+    filteredOptions.filter((option) => option.value !== NO_SELECTION_VALUE).map((option) => [option.value, option])
+  );
+  const inflatedGroups = groups.map((group) => ({
+    ...group,
+    // Only take the options that actually exist
+    // Note that this preserves the ordering of `group.values`
+    options: group.values.map((value) => optionsByValue.get(value)).filter((option) => !!option)
+  })).filter((group) => group.options.length > 0);
+  const hasNonEmptyGroup = inflatedGroups.length > 0;
+  for (const group of inflatedGroups) {
+    organizedGroups.push({
+      key: group.key,
+      label: group.label,
+      options: group.options
+    });
+    if (additionalGroup === "others") {
+      for (const option of group.options) {
+        optionsByValue.delete(option.value);
+      }
+    }
+  }
+  if (optionsByValue.size > 0) {
+    organizedGroups.push({
+      key: ADDITIONAL_GROUP_KEY,
+      // Only show additional group label if there actually are other groups
+      label: hasNonEmptyGroup ? additionalGroupLabel : void 0,
+      options: [...optionsByValue.values()]
+    });
+  }
+  const organizedOptions = organizedGroups.flatMap((group) => group.options);
+  return { organizedGroups, organizedOptions };
+}
+
+// src/components/Dropdown/BaseDropdown.tsx
+var HORIZONTAL_ICON_GAP = "4";
+var activeDropdownItemSize = {
+  compact: "18",
+  regular: "36",
+  large: "40"
+};
+function BaseDropdown({
+  activeItemProps,
+  value,
+  options,
+  groups,
+  additionalGroup = "others",
+  additionalGroupLabel,
+  allowUnselect = false,
+  unselectLabel,
+  onOptionSelected,
+  onOpen,
+  renderDropdownOption,
+  searchableOptions = false,
+  searchPlaceholder,
+  placeholder,
+  resetSearchOnClose = true,
+  openToTopOnMobile = true,
+  alwaysOpenToTop = false,
+  openDropdownFullWidth = true,
+  isLoading = false,
+  preloadIconUrls,
+  horizontalIconGap = HORIZONTAL_ICON_GAP,
+  openDropdownBackgroundColor = "openDropdownBackgroundColor",
+  size = "regular",
+  label,
+  maxDropdownHeight,
+  dropdownWidth,
+  dropdownAlign = "end",
+  testId
+}) {
+  const { t } = useFunkitTranslation();
+  const themeRootProps = useThemeRootProps();
+  const isMobileDevice = isMobile();
+  const [isOpened, setIsOpened] = useState5(false);
+  const [searchInput, setSearchInput] = useState5("");
+  const { ref: scrollRef, hasTopDivider, isAtBottom } = useScrollDivider();
+  const allOptions = useMemo2(
+    () => buildAllOptions(options, allowUnselect, unselectLabel),
+    [options, allowUnselect, unselectLabel]
+  );
+  const selectedOption = allOptions.find((option) => option.value === value);
+  const prevIsOpenedRef = useRef2(false);
+  const portalThemeRef = useRef2(null);
+  const handleSearch = (event) => {
+    setSearchInput(event.target.value);
+  };
+  const filteredOptions = useMemo2(
+    () => filterOptions(allOptions, searchInput),
+    [allOptions, searchInput]
+  );
+  const { organizedGroups, organizedOptions } = useMemo2(
+    () => organizeDropdownGroups(
+      filteredOptions,
+      groups,
+      additionalGroup,
+      additionalGroupLabel
+    ),
+    [additionalGroup, additionalGroupLabel, filteredOptions, groups]
+  );
+  const handleOpenChange = useCallback2(
+    (open) => {
+      setIsOpened(open);
+      if (open) {
+        onOpen?.();
+      } else {
+        resetSearchOnClose && setSearchInput("");
+      }
+    },
+    [onOpen, resetSearchOnClose]
+  );
+  useEffect6(() => {
+    if (isOpened && !prevIsOpenedRef.current) {
+      prevIsOpenedRef.current = true;
+      if (selectedOption) {
+        const selectedOptionIndex = organizedOptions.findIndex(
+          (option) => option.value === selectedOption.value
+        );
+        if (selectedOptionIndex !== -1) {
+          requestAnimationFrame(() => {
+            const selectedOptionElement = document.getElementById(
+              `${selectedOption.value}-dropdown-item`
+            );
+            selectedOptionElement?.scrollIntoView({
+              behavior: "instant",
+              block: "center"
+            });
+          });
+        }
+      }
+    } else if (!isOpened) {
+      prevIsOpenedRef.current = false;
+    }
+  }, [isOpened, selectedOption, organizedOptions]);
+  const dropdownSide = alwaysOpenToTop || openToTopOnMobile && isMobileDevice ? "top" : "bottom";
+  return /* @__PURE__ */ React23.createElement(Box, { display: "flex", flexDirection: "column", gap: "4", testId }, label && /* @__PURE__ */ React23.createElement(Text, { size: "12", color: "secondaryText" }, label), /* @__PURE__ */ React23.createElement(
+    DropdownMenu2.Root,
+    {
+      open: isOpened,
+      onOpenChange: handleOpenChange,
+      modal: false
+    },
+    /* @__PURE__ */ React23.createElement(
+      Box,
+      {
+        position: "relative",
+        display: size === "compact" ? "flex" : void 0
+      },
+      isLoading ? /* @__PURE__ */ React23.createElement(FunSkeletonBlock, { height: activeDropdownItemSize[size] }) : /* @__PURE__ */ React23.createElement(DropdownMenu2.Trigger, { asChild: true }, /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement(
+        BaseActiveDropdownItem_default,
+        {
+          ...activeItemProps,
+          size,
+          horizontalIconGap,
+          isOpened,
+          label: activeItemProps?.label ?? selectedOption?.label ?? placeholder ?? ""
+        }
+      ))),
+      /* @__PURE__ */ React23.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React23.createElement(
+        DropdownMenu2.Content,
+        {
+          ...themeRootProps,
+          ref: portalThemeRef,
+          side: dropdownSide,
+          sideOffset: dropdownSide === "top" ? 8 : 6,
+          align: dropdownAlign,
+          className: "funkit-dropdown-content",
+          style: {
+            zIndex: `calc(${themeVars.modalZIndex} + 1)`,
+            width: dropdownWidth ? `${dropdownWidth}px` : openDropdownFullWidth ? "var(--radix-dropdown-menu-trigger-width)" : void 0,
+            transformOrigin: "var(--radix-dropdown-menu-content-transform-origin)"
+          },
+          onCloseAutoFocus: (e) => e.preventDefault()
+        },
+        /* @__PURE__ */ React23.createElement(TooltipAnchorRefContext.Provider, { value: portalThemeRef }, /* @__PURE__ */ React23.createElement(
+          Box,
+          {
+            background: openDropdownBackgroundColor,
+            borderColor: "transparent",
+            borderWidth: "1",
+            borderRadius: "dropdownList",
+            borderStyle: "solid",
+            boxShadow: "dropdown",
+            className: maxDropdownHeight ? scrollGradientWrapperStyles : void 0,
+            "data-fade-top": maxDropdownHeight && hasTopDivider ? "true" : "false",
+            "data-fade-bottom": maxDropdownHeight && !isAtBottom ? "true" : "false"
+          },
+          /* @__PURE__ */ React23.createElement(
+            Box,
+            {
+              className: maxDropdownHeight ? scrollableDropdownStyles : void 0,
+              ref: maxDropdownHeight ? scrollRef : void 0,
+              style: { maxHeight: maxDropdownHeight }
+            },
+            /* @__PURE__ */ React23.createElement(Box, { display: "flex", flexDirection: "column" }, searchableOptions && /* @__PURE__ */ React23.createElement(Box, { paddingTop: "8", paddingX: "8" }, /* @__PURE__ */ React23.createElement(
+              FunInput,
+              {
+                placeholder: searchPlaceholder ?? t("common.searchTokens"),
+                value: searchInput,
+                onChange: handleSearch,
+                prefixIcon: "SearchIcon"
+              }
+            )), organizedOptions.length === 0 ? /* @__PURE__ */ React23.createElement(FunNoResults, { text: t("common.noResultsFound") }) : /* @__PURE__ */ React23.createElement(
+              Box,
+              {
+                as: "ul",
+                display: "flex",
+                flexDirection: "column",
+                paddingY: size === "compact" ? "dropdownCompactPaddingY" : "dropdownPaddingY"
+              },
+              organizedGroups.map(
+                ({
+                  key: groupKey,
+                  label: groupLabel,
+                  options: optionsInGroup
+                }, groupIndex) => /* @__PURE__ */ React23.createElement(React23.Fragment, { key: groupKey }, groupIndex > 0 && /* @__PURE__ */ React23.createElement(
+                  Box,
+                  {
+                    height: "1",
+                    background: "lightStroke",
+                    marginY: "dropdownGroupDividerMarginY"
+                  }
+                ), groupLabel && /* @__PURE__ */ React23.createElement(
+                  Box,
+                  {
+                    paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
+                  },
+                  /* @__PURE__ */ React23.createElement(
+                    Box,
+                    {
+                      paddingX: "dropdownItemPaddingX",
+                      paddingY: "dropdownItemPaddingY"
+                    },
+                    /* @__PURE__ */ React23.createElement(
+                      Text,
+                      {
+                        color: "dropdownGroupHeader",
+                        font: "dropdownGroupHeader",
+                        size: "dropdownGroupHeader",
+                        weight: "dropdownGroupHeader"
+                      },
+                      groupLabel
+                    )
+                  )
+                ), optionsInGroup.map((singleOption) => {
+                  const isSelected = singleOption.value === selectedOption?.value;
+                  return /* @__PURE__ */ React23.createElement(
+                    Box,
+                    {
+                      key: singleOption.value,
+                      paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
+                    },
+                    /* @__PURE__ */ React23.createElement(
+                      Box,
+                      {
+                        id: `${singleOption.value}-dropdown-item`,
+                        as: "li",
+                        background: {
+                          base: isSelected ? "selectedDropdownItemBackground" : "transparent",
+                          hover: "offBackground"
+                        },
+                        className: baseDropdownItemWrapperStyles,
+                        onClick: () => {
+                          onOptionSelected?.(singleOption);
+                        }
+                      },
+                      renderDropdownOption(
+                        singleOption,
+                        isSelected
+                      )
+                    )
+                  );
+                }))
+              )
+            ))
+          )
+        ))
+      )),
+      preloadIconUrls && /* @__PURE__ */ React23.createElement(
+        Box,
+        {
+          display: "none",
+          "aria-hidden": true,
+          style: { position: "absolute", top: "-100%", left: "-100%" }
+        },
+        preloadIconUrls.map((url, index) => /* @__PURE__ */ React23.createElement("img", { key: `${url}-${index}`, src: url, alt: "" }))
+      )
+    )
+  ));
+}
+var BaseDropdown_default = BaseDropdown;
+
+// src/components/Dropdown/AccountSelectDropdown.tsx
+var ACCOUNTS_GROUP = "accounts";
+var ACTION_GROUP = "action";
+function AccountSelectDropdown({
+  accounts,
+  selectedValue,
+  onSelect,
+  action,
+  prefixLabel,
+  label,
+  size,
+  dropdownWidth,
+  testId
+}) {
+  const options = [
+    ...accounts.map((account) => ({
+      value: account.value,
+      label: account.label
+    })),
+    ...action ? [{ value: action.id, label: action.label }] : []
+  ];
+  const groups = action ? [
+    {
+      key: ACCOUNTS_GROUP,
+      label: "",
+      values: accounts.map((account) => account.value)
+    },
+    { key: ACTION_GROUP, label: "", values: [action.id] }
+  ] : void 0;
+  return /* @__PURE__ */ React24.createElement(
+    BaseDropdown_default,
+    {
+      testId,
+      label,
+      size,
+      dropdownWidth,
+      value: selectedValue,
+      options,
+      groups,
+      activeItemProps: { alwaysVisibleLabel: prefixLabel },
+      renderDropdownOption: (option, isSelected) => {
+        if (action && option.value === action.id) {
+          return /* @__PURE__ */ React24.createElement(
+            BaseDropdownItem_default,
+            {
+              id: option.value,
+              label: option.label,
+              iconComponent: action.icon && // Render the icon in the theme's primary text colour
+              // (the icon uses `currentColor`), matching the label.
+              /* @__PURE__ */ React24.createElement(Box, { display: "flex", color: "primaryText" }, action.icon),
+              horizontalIconGap: "8",
+              onClick: action.onSelect
+            }
+          );
+        }
+        const account = accounts.find((item) => item.value === option.value);
+        return /* @__PURE__ */ React24.createElement(
+          BaseDropdownItem_default,
+          {
+            id: option.value,
+            label: option.label,
+            description: account?.description,
+            isSelected,
+            onClick: onSelect
+          }
+        );
+      }
+    }
+  );
+}
+
+// src/utils/statsig/checkFeatureGate.ts
+import { defaultFeatureGates as fallbackFeatureGates } from "@funkit/connect-core";
+import { StatsigClient } from "@statsig/react-bindings";
+function checkFeatureGate(name) {
+  try {
+    return StatsigClient.instance(STATSIG_CLIENT_KEY).checkGate(name);
+  } catch (err) {
+    logger.warn("checkFeatureGate:error", { name, err });
+    return fallbackFeatureGates[name];
+  }
+}
+
+// src/clients/polymarket/polymarket.tsx
+var PMCT_WITHDRAW_ACTION_TYPE = "PMCT_WITHDRAW";
+var POLYGON_USDCE = "0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174";
+var PUSD_TOKEN = {
+  address: POLYMARKET_PUSD_ADDRESS,
+  symbol: "pUSD",
+  iconSrc: "https://sdk-cdn.fun.xyz/images/pusd.svg"
+};
+var PUSD_OFFRAMP_ADDRESS = "0x2957922Eb93258b93368531d39fAcCA3B4dC5854";
+var PUSD_OFFRAMP_ABI = [
+  {
+    name: "unwrap",
+    type: "function",
+    inputs: [
+      { name: "_asset", type: "address" },
+      { name: "_to", type: "address" },
+      { name: "_amount", type: "uint256" }
+    ],
+    outputs: [],
+    stateMutability: "nonpayable"
+  }
+];
+function createPolymarketWithdrawalCallback(config) {
+  const { userId, sendPmctTransfer } = config;
+  return async (param) => {
+    const { targetAssetAddress, targetChainId, destinationAddress, funQuote } = param;
+    logger.info("polymarket:withdrawal:start", {
+      targetChainId,
+      targetAssetAddress,
+      destinationAddress,
+      quoteId: param.quoteId
+    });
+    const transferInit = await initializeCheckoutTokenTransferAddress({
+      apiKey: POLYMARKET_API_KEY,
+      userId,
+      recipientAddr: destinationAddress,
+      toChainId: targetChainId.toString(),
+      toTokenAddress: targetAssetAddress,
+      logger,
+      clientMetadata: {
+        ...generateClientMetadataForTokenTransfer(),
+        isWithdrawal: true
+      },
+      actionType: PMCT_WITHDRAW_ACTION_TYPE
+    });
+    const udaAddress = transferInit.depositAddr;
+    logger.info("polymarket:withdrawal:udaGenerated", { udaAddress });
+    const amountBaseUnit = extractWithdrawalAmount(funQuote);
+    await sendPmctTransfer({
+      udaAddress,
+      amountBaseUnit
+    });
+    logger.info("polymarket:withdrawal:transferSubmitted", {
+      udaAddress,
+      amountBaseUnit: amountBaseUnit.toString()
+    });
+    return void 0;
+  };
+}
+function buildUdaWithdrawalConfig(config) {
+  logger.info("polymarket:withdrawal:flow", { flow: "uda" });
+  return {
+    modalTitle: config.modalTitle ?? "Withdraw",
+    disableConnectedWallet: config.disableConnectedWallet,
+    withdrawCallback: createPolymarketWithdrawalCallback(config),
+    sourceChainId: polygon.id.toString(),
+    sourceTokenSymbol: config.sourceTokenSymbol ?? "USDC",
+    defaultReceiveToken: config.defaultReceiveToken ?? "USDC",
+    sourceTokenAddress: config.sourceTokenAddress ?? POLYGON_USDCE,
+    iconSrc: config.iconSrc ?? "https://sdk-cdn.fun.xyz/images/usdc.svg",
+    getMinWithdrawalUSD: () => 3
+  };
+}
+function buildWalletUnwrapWithdrawalConfig(config) {
+  logger.info("polymarket:withdrawal:flow", { flow: "wallet-unwrap" });
+  const {
+    proxyAddress,
+    publicClient,
+    sendTransactions: callerSendTransactions,
+    confirmTransaction
+  } = config;
+  const wallet = {
+    address: () => proxyAddress,
+    getChainId: async () => polygon.id,
+    switchChain: async (chainId) => {
+      if (chainId !== polygon.id) {
+        throw new Error(
+          `Cannot switch chain: Polymarket withdrawal is fixed to ${polygon.id}, requested ${chainId}`
+        );
+      }
+    },
+    sendTransaction: async (_chainId, transaction) => callerSendTransactions([transaction]),
+    sendTransactions: async (_chainId, txs) => callerSendTransactions(txs),
+    confirmTransaction: confirmTransaction ?? (async (txHash) => publicClient.waitForTransactionReceipt({ hash: txHash }))
+  };
+  const preWithdrawalAction = async ({
+    funQuote
+  }) => {
+    logger.info("polymarket:withdrawal:wallet:start", { proxyAddress });
+    try {
+      const amountBaseUnit = extractWithdrawalAmount(funQuote);
+      const currentAllowance = await publicClient.readContract({
+        address: PUSD_TOKEN.address,
+        abi: erc20Abi,
+        functionName: "allowance",
+        args: [proxyAddress, PUSD_OFFRAMP_ADDRESS]
+      });
+      const needsApprovalTx = currentAllowance < amountBaseUnit;
+      logger.info("polymarket:withdrawal:wallet:allowanceChecked", {
+        proxyAddress,
+        amountBaseUnit: amountBaseUnit.toString(),
+        currentAllowance: currentAllowance.toString(),
+        needsApprovalTx
+      });
+      const txs = [];
+      if (needsApprovalTx) {
+        txs.push({
+          to: PUSD_TOKEN.address,
+          data: encodeFunctionData({
+            abi: erc20Abi,
+            functionName: "approve",
+            args: [PUSD_OFFRAMP_ADDRESS, amountBaseUnit]
+          }),
+          value: "0"
+        });
+      }
+      txs.push({
+        to: PUSD_OFFRAMP_ADDRESS,
+        data: encodeFunctionData({
+          abi: PUSD_OFFRAMP_ABI,
+          functionName: "unwrap",
+          args: [POLYGON_USDCE, proxyAddress, amountBaseUnit]
+        }),
+        value: "0"
+      });
+      logger.info("polymarket:withdrawal:wallet:txsStaged", {
+        proxyAddress,
+        txCount: txs.length,
+        needsApprovalTx
+      });
+      return txs;
+    } catch (err) {
+      logger.error("polymarket:withdrawal:wallet:error", err, {
+        phase: "preWithdrawal",
+        proxyAddress
+      });
+      throw err;
+    }
+  };
+  return {
+    modalTitle: config.modalTitle ?? "Withdraw",
+    disableConnectedWallet: config.disableConnectedWallet,
+    sourceChainId: polygon.id.toString(),
+    sourceTokenSymbol: config.sourceTokenSymbol ?? PUSD_TOKEN.symbol,
+    sourceTokenAddress: config.sourceTokenAddress ?? POLYGON_USDCE,
+    defaultReceiveToken: config.defaultReceiveToken ?? "USDC",
+    iconSrc: config.iconSrc ?? PUSD_TOKEN.iconSrc,
+    getMinWithdrawalUSD: () => 0,
+    wallet,
+    preWithdrawalAction
+  };
+}
+function extractWithdrawalAmount(funQuote) {
+  const quote = funQuote;
+  const amountStr = quote?.baseQuote?.estTotalFromAmountBaseUnit;
+  if (!amountStr) {
+    logger.error("polymarket:withdrawal:missingAmountInQuote", { quote });
+    throw new Error("Missing withdrawal amount in quote");
+  }
+  return BigInt(amountStr);
+}
+function createPolymarketWithdrawalConfig(config) {
+  if ("sendPmctTransfer" in config && "sendTransactions" in config) {
+    const walletUnwrapEnabled = checkFeatureGate(
+      "enable-polymarket-wallet-withdrawal"
+    );
+    logger.info("polymarket:withdrawal:gate", { walletUnwrapEnabled });
+    return walletUnwrapEnabled ? buildWalletUnwrapWithdrawalConfig(config) : buildUdaWithdrawalConfig(config);
+  }
+  return "sendPmctTransfer" in config ? buildUdaWithdrawalConfig(config) : buildWalletUnwrapWithdrawalConfig(config);
+}
+var COLLATERAL_ONRAMP_ADDRESS = "0x93070a847efEf7F70739046A929D47a521F5B8ee";
+var COLLATERAL_ONRAMP_ABI = [
+  {
+    name: "wrap",
+    type: "function",
+    inputs: [
+      { name: "_asset", type: "address" },
+      { name: "_to", type: "address" },
+      { name: "_amount", type: "uint256" }
+    ],
+    outputs: [],
+    stateMutability: "nonpayable"
+  }
+];
+var POLYMARKET_PERPS_ADDRESS = "0xdca4af75705dbb50f62437045aff9921947917d2";
+var POLYMARKET_PERPS_ABI = [
+  {
+    name: "deposit",
+    type: "function",
+    stateMutability: "nonpayable",
+    inputs: [
+      { internalType: "address", name: "token", type: "address" },
+      { internalType: "uint256", name: "amount", type: "uint256" },
+      { internalType: "address", name: "to", type: "address" }
+    ],
+    outputs: []
+  }
+];
+var VAULT_DEPOSITOR_POLYGON = getAddress2(
+  "0xC8A6871D4eC4DaE64f605db0f8a0B3D9ef928D64"
+);
+var VAULT_DEPOSITOR_ABI = [
+  {
+    name: "deposit",
+    type: "function",
+    stateMutability: "nonpayable",
+    inputs: [
+      { name: "token", type: "address" },
+      { name: "vault", type: "address" },
+      { name: "callData", type: "bytes" },
+      { name: "minAmountOut", type: "uint256" }
+    ],
+    outputs: [{ name: "returnData", type: "bytes" }]
+  }
+];
+var RELAY_ROUTER_V3_ADDRESS = getAddress2(
+  "0xb92fe925DC43a0ECdE6c8b1a2709c170Ec4fFf4f"
+);
+var RELAY_ROUTER_V3_ABI = [
+  {
+    inputs: [
+      { internalType: "address[]", name: "tokens", type: "address[]" },
+      { internalType: "address[]", name: "tos", type: "address[]" },
+      { internalType: "bytes[]", name: "datas", type: "bytes[]" },
+      { internalType: "uint256[]", name: "amounts", type: "uint256[]" }
+    ],
+    name: "cleanupErc20sViaCall",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function"
+  }
+];
+var AMOUNT_PLACEHOLDER = 0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffdeadbeefn;
+function createPerpsGenerateActionParams(config) {
+  const { recipientAddress } = config;
+  return async () => {
+    const wrapUsdceToPusd = encodeFunctionData({
+      abi: COLLATERAL_ONRAMP_ABI,
+      functionName: "wrap",
+      args: [POLYGON_USDCE, RELAY_ROUTER_V3_ADDRESS, AMOUNT_PLACEHOLDER]
+    });
+    const wrapUsdceToPusdViaVaultDepositor = encodeFunctionData({
+      abi: VAULT_DEPOSITOR_ABI,
+      functionName: "deposit",
+      args: [POLYGON_USDCE, COLLATERAL_ONRAMP_ADDRESS, wrapUsdceToPusd, 0n]
+    });
+    const depositPusdToPerps = encodeFunctionData({
+      abi: POLYMARKET_PERPS_ABI,
+      functionName: "deposit",
+      args: [PUSD_TOKEN.address, AMOUNT_PLACEHOLDER, recipientAddress]
+    });
+    const depositPusdToPerpsViaVaultDepositor = encodeFunctionData({
+      abi: VAULT_DEPOSITOR_ABI,
+      functionName: "deposit",
+      args: [
+        PUSD_TOKEN.address,
+        POLYMARKET_PERPS_ADDRESS,
+        depositPusdToPerps,
+        0n
+      ]
+    });
+    const legs = [
+      // Leg 1 — sweep the bridged USDC.e and wrap it into pUSD.
+      {
+        token: POLYGON_USDCE,
+        to: VAULT_DEPOSITOR_POLYGON,
+        data: wrapUsdceToPusdViaVaultDepositor,
+        // relay replaces this with the actual amount of tokens available at execution time https://github.com/relayprotocol/relay-periphery/blob/0e4aabb750efb1f807d7f12b83b090b51b9ee736/src/v3/RelayRouterV3.sol#L177-L180
+        amount: 0n
+      },
+      // Leg 2 — sweep the resulting pUSD and deposit it into Polymarket Perps
+      // for the recipient.
+      {
+        token: PUSD_TOKEN.address,
+        to: VAULT_DEPOSITOR_POLYGON,
+        data: depositPusdToPerpsViaVaultDepositor,
+        // relay replaces this with the actual amount of tokens available at execution time https://github.com/relayprotocol/relay-periphery/blob/0e4aabb750efb1f807d7f12b83b090b51b9ee736/src/v3/RelayRouterV3.sol#L177-L180
+        amount: 0n
+      }
+    ];
+    return [
+      // RelayRouterV3 calls its function `cleanupErc20sViaCall`
+      // that iterates over the legs and does the following for each leg:
+      // 1. Substitutes 0n with the actual amount of tokens available at execution time (https://github.com/relayprotocol/relay-periphery/blob/0e4aabb750efb1f807d7f12b83b090b51b9ee736/src/v3/RelayRouterV3.sol#L177-L180):
+      // `IERC20(token).balanceOf(address(this))`
+      // 2. Approves the token to the target address (https://github.com/relayprotocol/relay-periphery/blob/0e4aabb750efb1f807d7f12b83b090b51b9ee736/src/v3/RelayRouterV3.sol#L183-L184):
+      // `IERC20(token).approve(to, amount)`
+      // 3. Makes the call to the target address and bubles up the revert if it fails (https://github.com/relayprotocol/relay-periphery/blob/0e4aabb750efb1f807d7f12b83b090b51b9ee736/src/v3/RelayRouterV3.sol#L186-L190):
+      // `(bool success, ) = to.call(data);
+      // `if (!success) { revert CallFailed(); }`
+      {
+        contractAbi: RELAY_ROUTER_V3_ABI,
+        contractAddress: RELAY_ROUTER_V3_ADDRESS,
+        functionName: "cleanupErc20sViaCall",
+        // cleanupErc20sViaCall takes parallel arrays — transpose the per-leg rows.
+        functionArgs: [
+          legs.map((leg) => leg.token),
+          legs.map((leg) => leg.to),
+          legs.map((leg) => leg.data),
+          legs.map((leg) => leg.amount)
+        ]
+      }
+    ];
+  };
+}
+var POLYMARKET_PREDICTIONS_ROUTING_ID = "POLYMARKET_PREDICTIONS";
+var POLYMARKET_PERPS_ROUTING_ID = "POLYMARKET_PERPS";
+function createPredictionsGenerateActionParams(config) {
+  const { recipientAddress } = config;
+  return async () => {
+    const wrapUsdceToPusd = encodeFunctionData({
+      abi: COLLATERAL_ONRAMP_ABI,
+      functionName: "wrap",
+      args: [POLYGON_USDCE, recipientAddress, AMOUNT_PLACEHOLDER]
+    });
+    return [
+      // Approve USDC.e to the VaultDepositor (infinite).
+      {
+        contractAbi: erc20Abi,
+        contractAddress: POLYGON_USDCE,
+        functionName: "approve",
+        functionArgs: [VAULT_DEPOSITOR_POLYGON, maxUint256]
+      },
+      // VaultDepositor pulls the USDC.e and forwards to CollateralOnramp.wrap,
+      // minting pUSD to the predictions proxy.
+      {
+        contractAbi: VAULT_DEPOSITOR_ABI,
+        contractAddress: VAULT_DEPOSITOR_POLYGON,
+        functionName: "deposit",
+        functionArgs: [
+          POLYGON_USDCE,
+          COLLATERAL_ONRAMP_ADDRESS,
+          wrapUsdceToPusd,
+          0n
+        ]
+      }
+    ];
+  };
+}
+var PERPS_MIN_DEPOSIT_USD = 10;
+function createPolymarketDepositConfig({
+  predictions,
+  perps,
+  modalTitleMeta
+}) {
+  const isPerpsRoute = (routingId) => routingId === POLYMARKET_PERPS_ROUTING_ID;
+  return {
+    targetChain: polygon.id.toString(),
+    targetAsset: POLYGON_USDCE,
+    targetAssetAmount: 0,
+    targetAssetTicker: PUSD_TOKEN.symbol,
+    checkoutItemTitle: PUSD_TOKEN.symbol,
+    iconSrc: PUSD_TOKEN.iconSrc,
+    modalTitleMeta,
+    // Predictions is the default destination.
+    dynamicRoutingId: POLYMARKET_PREDICTIONS_ROUTING_ID,
+    customRecipient: predictions.address,
+    modalTitle: ({ dynamicRoutingId }) => isPerpsRoute(dynamicRoutingId) ? "Deposit (Polymarket Perps)" : "Deposit (Polymarket Predictions)",
+    getMinDepositUSD: ({ dynamicRoutingId }) => isPerpsRoute(dynamicRoutingId) ? PERPS_MIN_DEPOSIT_USD : 0,
+    generateActionsParams: (_targetAssetAmount, outputConfig) => isPerpsRoute(
+      outputConfig?.dynamicRoutingId
+    ) ? createPerpsGenerateActionParams({ recipientAddress: perps.address })() : createPredictionsGenerateActionParams({
+      recipientAddress: predictions.address
+    })(),
+    // Both transfer directions are integrator-owned; the step picks the source
+    // account's transfer.
+    polymarketPerpsTransfer: {
+      predictions: {
+        address: predictions.address,
+        getMinTopupAmount: predictions.getMinTopupAmount,
+        transfer: predictions.transfer,
+        getBalanceUsd: predictions.getBalanceUsd
+      },
+      perps: {
+        address: perps.address,
+        getMinTopupAmount: perps.getMinTopupAmount,
+        transfer: perps.transfer,
+        getBalanceUsd: perps.getBalanceUsd
+      }
+    }
+  };
+}
+var ACCOUNT_DROPDOWN_OPTIONS_WIDTH = 264;
+var BALANCE_PLACEHOLDER = "\u2014";
+function formatBalance(balanceUsd) {
+  return balanceUsd === void 0 ? BALANCE_PLACEHOLDER : formatCurrencyAndStringify(balanceUsd);
+}
+function PolymarketDepositAccountDropdown({
+  onStepChange,
+  modalState,
+  dynamicRoutingId,
+  applyDynamicTargetAssetCandidate,
+  predictions,
+  perps
+}) {
+  const { t } = useFunkitTranslation();
+  const balances = usePolymarketAccountBalances({ predictions, perps });
+  const selectedRoutingId = dynamicRoutingId === POLYMARKET_PERPS_ROUTING_ID ? POLYMARKET_PERPS_ROUTING_ID : POLYMARKET_PREDICTIONS_ROUTING_ID;
+  const accountCandidate = (routingId, recipient) => ({
+    tokenAddress: POLYGON_USDCE,
+    tokenChainId: polygon.id.toString(),
+    tokenSymbol: PUSD_TOKEN.symbol,
+    iconSrc: PUSD_TOKEN.iconSrc,
+    dynamicRoutingId: routingId,
+    customRecipient: recipient
+  });
+  const handleSelectAccount = (routingId) => {
+    const isPerps = routingId === POLYMARKET_PERPS_ROUTING_ID;
+    applyDynamicTargetAssetCandidate?.(
+      accountCandidate(
+        isPerps ? POLYMARKET_PERPS_ROUTING_ID : POLYMARKET_PREDICTIONS_ROUTING_ID,
+        isPerps ? perps.address : predictions.address
+      )
+    );
+  };
+  return /* @__PURE__ */ React25.createElement(
+    AccountSelectDropdown,
+    {
+      prefixLabel: t("perpsTransfer.depositTo"),
+      dropdownWidth: ACCOUNT_DROPDOWN_OPTIONS_WIDTH,
+      accounts: [
+        {
+          value: POLYMARKET_PREDICTIONS_ROUTING_ID,
+          label: t("perpsTransfer.predictions"),
+          description: formatBalance(balances.predictions.balanceUsd)
+        },
+        {
+          value: POLYMARKET_PERPS_ROUTING_ID,
+          label: t("perpsTransfer.perps"),
+          description: formatBalance(balances.perps.balanceUsd)
+        }
+      ],
+      selectedValue: selectedRoutingId,
+      onSelect: handleSelectAccount,
+      action: {
+        id: "transfer-between-accounts",
+        label: t("perpsTransfer.transferBetweenAccounts"),
+        icon: /* @__PURE__ */ React25.createElement(SwitchIcon, null),
+        // Navigation is absent on the loading skeleton; the action only fires
+        // on the interactive screen. The transfer step reads balances from the
+        // same shared cache, so none need to be threaded through here.
+        onSelect: () => {
+          if (onStepChange && modalState) {
+            onStepChange({
+              ...modalState,
+              step: "perps_transfer" /* PERPS_TRANSFER */
+            });
+          }
+        }
+      }
+    }
+  );
+}
+
+export {
+  createPolymarketWithdrawalConfig,
+  createPerpsGenerateActionParams,
+  POLYMARKET_PREDICTIONS_ROUTING_ID,
+  POLYMARKET_PERPS_ROUTING_ID,
+  createPredictionsGenerateActionParams,
+  createPolymarketDepositConfig,
+  PolymarketDepositAccountDropdown
+};