@funkit/connect 9.19.1 → 9.20.0

package/dist/clients/chunk-JOM2J5WB.js

@@ -0,0 +1,2371 @@
+"use client";
+import {
+  POLYMARKET_PERPS_ROUTING_ID,
+  POLYMARKET_PREDICTIONS_ROUTING_ID
+} from "./chunk-4752IYY6.js";
+import {
+  Text
+} from "./chunk-CSONEKIF.js";
+import {
+  Box,
+  themeVars,
+  useFunkitTranslation
+} from "./chunk-JVTKIEOP.js";
+import {
+  POLYGON_USDCE,
+  PUSD_TOKEN
+} from "./chunk-MOUTRRN3.js";
+import {
+  usePolymarketAccountBalances
+} from "./chunk-MRBN4XCA.js";
+import {
+  logger
+} from "./chunk-UUHGOBKZ.js";
+
+// src/clients/polymarket/PolymarketDepositAccountDropdown.tsx
+import React17 from "react";
+import { polygon } from "viem/chains";
+
+// src/components/Dropdown/AccountSelectDropdown.tsx
+import React16, { useEffect as useEffect6 } from "react";
+
+// src/components/Dropdown/BaseDropdown.tsx
+import { isMobile } from "@funkit/utils";
+import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
+import React15, { useCallback as useCallback2, useEffect as useEffect5, 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 React13, {
+  createContext as createContext3,
+  useContext as useContext3,
+  useEffect as useEffect4,
+  useMemo,
+  useRef
+} from "react";
+
+// src/components/FunTooltip/FunTooltip.tsx
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React, {
+  createContext,
+  useContext,
+  useState as useState2
+} from "react";
+var TooltipAnchorRefContext = createContext(null);
+
+// src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
+import React3 from "react";
+
+// src/providers/FunkitThemeProvider.tsx
+import React2, { createContext as createContext2, useContext as useContext2, useEffect as useEffect2, useState as useState3 } 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 = createContext2(void 0);
+var ThemeContext = createContext2({
+  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
+  } = useContext2(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 = "dj0x602 _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__ */ React3.createElement(
+    Box,
+    {
+      borderRadius,
+      className: animateSkeletonClass,
+      width,
+      ...props,
+      style: { height: cssHeight, ...props.style }
+    }
+  );
+}
+
+// src/components/FunInput/FunInput.css.ts
+var baseWrapperStyles = "zue0i60";
+var baseWrapperStylesNoTransition = "zue0i61";
+var inputClass = "zue0i64 _1rsrm2f2py _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
+var inputClassDisabled = "zue0i68 _1rsrm2f2ta _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
+var inputClassDisabledNoTransition = "zue0i6a _1rsrm2f2ta _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
+var inputClassError = "zue0i6c _1rsrm2f2py _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
+var inputClassErrorNoTransition = "zue0i6f _1rsrm2f2py _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
+var inputClassNoTransition = "zue0i66 _1rsrm2f2py _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
+var numberInputResetStyle = "zue0i62";
+
+// src/components/FunInput/FunInput.tsx
+import React5, {
+  forwardRef,
+  useEffect as useEffect3,
+  useState as useState4
+} from "react";
+import clsx from "clsx";
+
+// src/components/Icons/SearchIcon.tsx
+import React4 from "react";
+var SearchIcon = () => {
+  return /* @__PURE__ */ React4.createElement(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React4.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__ */ React4.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 = React5.useRef(null);
+  useEffect3(() => {
+    if (allowMultiline) {
+      adjustTextareaHeight(textareaRef.current);
+    }
+  }, [allowMultiline, value]);
+  const { integerPart, decimalPart, shouldColorDecimals } = React5.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__ */ React5.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__ */ React5.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__ */ React5.createElement(Box, { style: { position: "relative", display: "flex", flex: 1 } }, /* @__PURE__ */ React5.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__ */ React5.createElement("span", { style: { color: "inherit" } }, integerPart),
+        /* @__PURE__ */ React5.createElement(DecimalSpan, { decimalsColor }, decimalPart)
+      ), inputElement);
+    }
+    return inputElement;
+  };
+  return /* @__PURE__ */ React5.createElement(
+    Box,
+    {
+      color: "primaryText",
+      display: "flex",
+      flexDirection: "column",
+      fontSize: "inherit",
+      gap: "8",
+      width: "full"
+    },
+    label && /* @__PURE__ */ React5.createElement(Text, { size: "inputLabel", weight: textWeight }, label),
+    isLoading ? /* @__PURE__ */ React5.createElement(FunSkeletonBlock, { height: "44" }) : /* @__PURE__ */ React5.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__ */ React5.createElement(Box, { paddingLeft: "12", height: "max" }, prefix),
+      prefixIcon === "SearchIcon" && /* @__PURE__ */ React5.createElement(
+        Box,
+        {
+          display: "flex",
+          paddingLeft: "12",
+          height: "max",
+          alignItems: "center",
+          color: isFocused ? "primaryText" : "secondaryText"
+        },
+        /* @__PURE__ */ React5.createElement(SearchIcon, null)
+      ),
+      prefixIcon === "$" && /* @__PURE__ */ React5.createElement(Box, { display: "flex", alignItems: "center", paddingLeft: "32" }, /* @__PURE__ */ React5.createElement(
+        DollarTextIcon,
+        {
+          fontSize: inputStyle.fontSize || DEFAULT_ICON_FONT_SIZE
+        }
+      )),
+      renderInputOrTextarea(),
+      suffix && /* @__PURE__ */ React5.createElement(
+        Box,
+        {
+          paddingLeft: "4",
+          paddingRight: "10",
+          ...allowMultiline ? {
+            style: {
+              paddingTop: `calc(${themeVars.spacing.inputPaddingY} - 3px)`
+            }
+          } : {}
+        },
+        suffix
+      )
+    ),
+    error && typeof error === "string" && /* @__PURE__ */ React5.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__ */ React5.createElement(
+  Text,
+  {
+    style: {
+      paddingBottom: 2,
+      fontSize,
+      fontWeight: 800
+    }
+  },
+  "$"
+);
+var DecimalSpan = ({
+  decimalsColor,
+  children
+}) => /* @__PURE__ */ React5.createElement(
+  Box,
+  {
+    color: decimalsColor,
+    style: { fontFamily: "inherit", fontSize: "inherit" }
+  },
+  children
+);
+
+// src/utils/tokenMath.ts
+import { formatCurrencyAndStringify } from "@funkit/utils";
+import * as dnum from "dnum";
+import { formatUnits } from "viem";
+function floorToDecimals(value, decimals) {
+  const d = dnum.from(value, decimals);
+  return dnum.toNumber(d, decimals);
+}
+function formatUsdFlooredToCent(balanceUsd) {
+  return formatCurrencyAndStringify(floorToDecimals(balanceUsd, 2));
+}
+
+// src/components/Icons/CheckIcon.tsx
+import React6 from "react";
+var CheckIcon = ({
+  size = 16,
+  className
+}) => /* @__PURE__ */ React6.createElement(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  },
+  /* @__PURE__ */ React6.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 React7 from "react";
+import clsx2 from "clsx";
+
+// src/components/Dropdown/BaseDropdownItem.css.ts
+var disabledDropdownItemStyles = "_18hhw3k3 _18hhw3k2";
+var enabledDropdownItemStyles = "_18hhw3k1 _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__ */ React7.createElement(
+    DropdownMenu.Item,
+    {
+      disabled: isDisabled,
+      onSelect: () => onClick(id),
+      asChild: true
+    },
+    /* @__PURE__ */ React7.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__ */ React7.createElement(
+        Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          gap: horizontalIconGap
+        },
+        iconComponent && /* @__PURE__ */ React7.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent),
+        /* @__PURE__ */ React7.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React7.createElement(
+          Text,
+          {
+            size: "dropdownItemFontSize",
+            weight: "medium",
+            color: isSelected ? "selectedDropdownItemText" : void 0
+          },
+          label
+        ), description != null && /* @__PURE__ */ React7.createElement(Text, { size: "12", color: "secondaryText" }, description))
+      ),
+      /* @__PURE__ */ React7.createElement(
+        Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "16"
+        },
+        tagComponent,
+        /* @__PURE__ */ React7.createElement(
+          Box,
+          {
+            width: "16",
+            height: "16",
+            alignItems: "center",
+            justifyContent: "center",
+            color: isSelected ? "selectedDropdownItemText" : "transparent"
+          },
+          /* @__PURE__ */ React7.createElement(CheckIcon, null)
+        )
+      )
+    )
+  );
+}
+var BaseDropdownItem_default = BaseDropdownItem;
+
+// src/components/Icons/CaretDownIcon.tsx
+import clsx3 from "clsx";
+import React8 from "react";
+
+// src/components/Icons/CaretDownIcon.css.ts
+var caretClosed = "_1gjdf1i3";
+var caretOpened = "_1gjdf1i2";
+
+// src/components/Icons/CaretDownIcon.tsx
+var CaretDownIcon = () => {
+  return /* @__PURE__ */ React8.createElement(
+    "svg",
+    {
+      width: "8",
+      height: "5",
+      viewBox: "0 0 8 5",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React8.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__ */ React8.createElement(
+      Box,
+      {
+        color,
+        width: "8",
+        height: "8",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        className: animationClassName
+      },
+      /* @__PURE__ */ React8.createElement(CaretDownIcon, null)
+    );
+  }
+  return /* @__PURE__ */ React8.createElement(
+    Box,
+    {
+      color,
+      width: "16",
+      height: "16",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      className: animationClassName
+    },
+    /* @__PURE__ */ React8.createElement(
+      Box,
+      {
+        width: "8",
+        height: "8",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      /* @__PURE__ */ React8.createElement(CaretDownIcon, null)
+    )
+  );
+};
+
+// src/components/FunNoResults/FunNoResults.tsx
+import React11 from "react";
+
+// src/components/Icons/CoinsIcon.tsx
+import React9 from "react";
+var CoinsIcon = ({
+  size = 48,
+  bgColor = "#141C41",
+  iconColor = "#878A98"
+}) => {
+  return /* @__PURE__ */ React9.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 48 49",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React9.createElement("g", { clipPath: "url(#clip0_30657_22302)" }, /* @__PURE__ */ React9.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__ */ React9.createElement("g", { clipPath: "url(#clip1_30657_22302)" }, /* @__PURE__ */ React9.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__ */ React9.createElement("defs", null, /* @__PURE__ */ React9.createElement("clipPath", { id: "clip0_30657_22302" }, /* @__PURE__ */ React9.createElement(
+      "rect",
+      {
+        width: "48",
+        height: "48",
+        fill: "white",
+        transform: "translate(0 0.5)"
+      }
+    )), /* @__PURE__ */ React9.createElement("clipPath", { id: "clip1_30657_22302" }, /* @__PURE__ */ React9.createElement(
+      "rect",
+      {
+        width: "24",
+        height: "24",
+        fill: "white",
+        transform: "translate(12 12)"
+      }
+    )))
+  );
+};
+
+// src/components/Icons/SearchSkeletonIcon.tsx
+import React10 from "react";
+var SearchSkeletonIcon = () => {
+  return /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      width: "122",
+      height: "81",
+      viewBox: "0 0 122 81",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React10.createElement("g", { clipPath: "url(#clip0_7590_15835)" }, /* @__PURE__ */ React10.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__ */ React10.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__ */ React10.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__ */ React10.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__ */ React10.createElement("defs", null, /* @__PURE__ */ React10.createElement("clipPath", { id: "clip0_7590_15835" }, /* @__PURE__ */ React10.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__ */ React11.createElement(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: variant === "default" ? "12" : "16",
+      color: "secondaryText",
+      style: { flex: 1 }
+    },
+    variant === "default" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(SearchSkeletonIcon, null), /* @__PURE__ */ React11.createElement(Text, { color: "secondaryText", size: "10" }, text)),
+    variant === "actionable" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+      CoinsIcon,
+      {
+        bgColor: themeVars.colors.offBackground,
+        iconColor: themeVars.colors.actionColor
+      }
+    ), /* @__PURE__ */ React11.createElement(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "12"
+      },
+      /* @__PURE__ */ React11.createElement(
+        Box,
+        {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          gap: "8"
+        },
+        title && /* @__PURE__ */ React11.createElement(Text, { size: "14", color: "primaryText" }, title),
+        /* @__PURE__ */ React11.createElement(Text, { color: "secondaryText", size: "12" }, text)
+      ),
+      actionButton && /* @__PURE__ */ React11.createElement(Box, null, actionButton)
+    ))
+  );
+};
+
+// src/components/Icons/SwitchIcon.tsx
+import React12 from "react";
+var SwitchIcon = () => {
+  return /* @__PURE__ */ React12.createElement(
+    "svg",
+    {
+      width: "15",
+      height: "14",
+      viewBox: "0 0 15 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React12.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 = "_1nns6ys3 _1rsrm2f17";
+var scrollGradientWrapperStyles = "_1nns6ys1";
+var scrollableDropdownStyles = "_1nns6ys0";
+
+// 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 React14 from "react";
+
+// src/components/Dropdown/BaseActiveDropdownItem.css.ts
+var 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__ */ React14.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__ */ React14.createElement(
+      Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: horizontalIconGap,
+        style: size === "compact" ? void 0 : { flex: "1 0 auto" }
+      },
+      alwaysVisibleLabel && /* @__PURE__ */ React14.createElement(Box, { style: { flex: 1 } }, /* @__PURE__ */ React14.createElement(Text, { color: "secondaryText", size: "12" }, alwaysVisibleLabel)),
+      /* @__PURE__ */ React14.createElement(
+        Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: horizontalIconGap,
+          background: {
+            base: "transparent",
+            hover: "alwaysVisibleLabelBackgroundHover"
+          },
+          ...alwaysVisibleLabel ? {} : { style: { flex: 1 } }
+        },
+        /* @__PURE__ */ React14.createElement(
+          Box,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: horizontalIconGap,
+            ...alwaysVisibleLabel ? { style: { flexDirection: "row-reverse" } } : {}
+          },
+          tagPosition === "start" && tagComponent,
+          /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", gap: horizontalIconGap }, iconComponent && /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent), /* @__PURE__ */ React14.createElement(
+            Text,
+            {
+              color,
+              size: "dropdownItemFontSize",
+              weight: "medium",
+              style: labelStyle
+            },
+            label
+          ))
+        ),
+        /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, tagPosition === "end" && tagComponent, /* @__PURE__ */ React14.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]
+  );
+  useEffect5(() => {
+    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__ */ React15.createElement(Box, { display: "flex", flexDirection: "column", gap: "4", testId }, label && /* @__PURE__ */ React15.createElement(Text, { size: "12", color: "secondaryText" }, label), /* @__PURE__ */ React15.createElement(
+    DropdownMenu2.Root,
+    {
+      open: isOpened,
+      onOpenChange: handleOpenChange,
+      modal: false
+    },
+    /* @__PURE__ */ React15.createElement(
+      Box,
+      {
+        position: "relative",
+        display: size === "compact" ? "flex" : void 0
+      },
+      isLoading ? /* @__PURE__ */ React15.createElement(FunSkeletonBlock, { height: activeDropdownItemSize[size] }) : /* @__PURE__ */ React15.createElement(DropdownMenu2.Trigger, { asChild: true }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(
+        BaseActiveDropdownItem_default,
+        {
+          ...activeItemProps,
+          size,
+          horizontalIconGap,
+          isOpened,
+          label: activeItemProps?.label ?? selectedOption?.label ?? placeholder ?? ""
+        }
+      ))),
+      /* @__PURE__ */ React15.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React15.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__ */ React15.createElement(TooltipAnchorRefContext.Provider, { value: portalThemeRef }, /* @__PURE__ */ React15.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__ */ React15.createElement(
+            Box,
+            {
+              className: maxDropdownHeight ? scrollableDropdownStyles : void 0,
+              ref: maxDropdownHeight ? scrollRef : void 0,
+              style: { maxHeight: maxDropdownHeight }
+            },
+            /* @__PURE__ */ React15.createElement(Box, { display: "flex", flexDirection: "column" }, searchableOptions && /* @__PURE__ */ React15.createElement(Box, { paddingTop: "8", paddingX: "8" }, /* @__PURE__ */ React15.createElement(
+              FunInput,
+              {
+                placeholder: searchPlaceholder ?? t("common.searchTokens"),
+                value: searchInput,
+                onChange: handleSearch,
+                prefixIcon: "SearchIcon"
+              }
+            )), organizedOptions.length === 0 ? /* @__PURE__ */ React15.createElement(FunNoResults, { text: t("common.noResultsFound") }) : /* @__PURE__ */ React15.createElement(
+              Box,
+              {
+                as: "ul",
+                display: "flex",
+                flexDirection: "column",
+                paddingY: size === "compact" ? "dropdownCompactPaddingY" : "dropdownPaddingY"
+              },
+              organizedGroups.map(
+                ({
+                  key: groupKey,
+                  label: groupLabel,
+                  options: optionsInGroup
+                }, groupIndex) => /* @__PURE__ */ React15.createElement(React15.Fragment, { key: groupKey }, groupIndex > 0 && /* @__PURE__ */ React15.createElement(
+                  Box,
+                  {
+                    height: "1",
+                    background: "lightStroke",
+                    marginY: "dropdownGroupDividerMarginY"
+                  }
+                ), groupLabel && /* @__PURE__ */ React15.createElement(
+                  Box,
+                  {
+                    paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
+                  },
+                  /* @__PURE__ */ React15.createElement(
+                    Box,
+                    {
+                      paddingX: "dropdownItemPaddingX",
+                      paddingY: "dropdownItemPaddingY"
+                    },
+                    /* @__PURE__ */ React15.createElement(
+                      Text,
+                      {
+                        color: "dropdownGroupHeader",
+                        font: "dropdownGroupHeader",
+                        size: "dropdownGroupHeader",
+                        weight: "dropdownGroupHeader"
+                      },
+                      groupLabel
+                    )
+                  )
+                ), optionsInGroup.map((singleOption) => {
+                  const isSelected = singleOption.value === selectedOption?.value;
+                  return /* @__PURE__ */ React15.createElement(
+                    Box,
+                    {
+                      key: singleOption.value,
+                      paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
+                    },
+                    /* @__PURE__ */ React15.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__ */ React15.createElement(
+        Box,
+        {
+          display: "none",
+          "aria-hidden": true,
+          style: { position: "absolute", top: "-100%", left: "-100%" }
+        },
+        preloadIconUrls.map((url, index) => /* @__PURE__ */ React15.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 actionIdCollidesWithAccount = !!action && accounts.some((account) => account.value === action.id);
+  const actionId = action?.id;
+  useEffect6(() => {
+    if (actionIdCollidesWithAccount) {
+      logger.warn("accountSelectDropdown:actionIdCollidesWithAccountValue", {
+        actionId
+      });
+    }
+  }, [actionIdCollidesWithAccount, actionId]);
+  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__ */ React16.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__ */ React16.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__ */ React16.createElement(Box, { display: "flex", color: "primaryText" }, action.icon),
+              horizontalIconGap: "8",
+              onClick: action.onSelect
+            }
+          );
+        }
+        const account = accounts.find((item) => item.value === option.value);
+        return /* @__PURE__ */ React16.createElement(
+          BaseDropdownItem_default,
+          {
+            id: option.value,
+            label: option.label,
+            description: account?.description,
+            isSelected,
+            onClick: onSelect
+          }
+        );
+      }
+    }
+  );
+}
+
+// src/clients/polymarket/PolymarketDepositAccountDropdown.tsx
+var ACCOUNT_DROPDOWN_OPTIONS_WIDTH = 264;
+var BALANCE_PLACEHOLDER = "\u2014";
+function formatBalance(balanceUsd) {
+  return balanceUsd === void 0 ? BALANCE_PLACEHOLDER : formatUsdFlooredToCent(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__ */ React17.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__ */ React17.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 {
+  PolymarketDepositAccountDropdown
+};