@funkit/connect 10.0.0 → 10.1.0-next.0

package/dist/clients/chunk-BUCJRBW7.js

@@ -0,0 +1,1472 @@
+"use client";
+import {
+  Box,
+  Text,
+  themeVars
+} from "./chunk-PEVDOGEA.js";
+import {
+  useFunkitTranslation
+} from "./chunk-STLOQEN7.js";
+
+// src/providers/FunkitConfigContext.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+var DEFAULT_TEXT_CUSTOMIZATIONS = {
+  virtualFiat: "Deposit with SEPA",
+  brokerageOrExchange: "Connect Exchange",
+  debitOrCredit: "Deposit with Card",
+  accountBalance: "Wallet",
+  selectAccount: "Select an exchange",
+  perpsTransferTitle: "Transfer",
+  sourceMethodTitle: "Your source",
+  tokensListTitle: "Your tokens",
+  transferTokens: "Transfer Crypto",
+  bitcoinLightning: "Bitcoin Lightning",
+  cashAppLightning: "Cash App",
+  receiveDropdownTitle: "",
+  // Default to empty
+  receiveDropdownLabel: "Asset to Receive",
+  confirmationScreen: {
+    payAmountLabel: "You send",
+    receiveAmountLabel: "You receive"
+  },
+  paymentMethodSubtitles: {}
+};
+var DEFAULT_UI_CUSTOMIZATIONS = {
+  alignTitle: "center",
+  alwaysShowTopDivider: false,
+  showModalTitle: true,
+  callToActionsUppercase: false,
+  enableCompactList: false,
+  checkoutHistory: {
+    showGetHelpAsAlert: true,
+    simplifiedUi: false
+  },
+  confirmationScreen: {
+    preferDestinationWhenSame: false,
+    showAmountSummaryAbovePaymentMethod: false,
+    showDisclaimerAsAlert: true,
+    showInstantTimeEstimate: false,
+    showLeftAlignedDollarValueWithLabel: false,
+    showPaymentAmountUsd: false,
+    showReceiveAmountUsd: false,
+    showSelectedRoute: false,
+    stepIndicatorType: "spinner",
+    showTokenAmount: true,
+    showTransactionDigest: "none"
+  },
+  sourceChangeScreen: {
+    bottomBarCloseButton: {
+      enabled: false,
+      labelKey: "common.close"
+    },
+    showTargetAssetSelection: false,
+    showWalletOnInsufficientBalance: false,
+    showWalletConnect: true,
+    showCustomTopComponentDivider: false,
+    paymentMethodIcons: {}
+  },
+  inputAmountScreen: {
+    allowTokenAmountInput: true
+  },
+  selectAssetScreen: {
+    isSecondaryTokenSymbolVisible: true,
+    navigateOnAssetClick: false
+  },
+  transferCryptoScreen: {
+    showYouSendYouReceive: false
+  },
+  withdrawalScreen: {},
+  selectBrokerageScreen: {},
+  connectExchangeScreen: {},
+  customIcons: {},
+  customFontFamily: {
+    primary: "",
+    secondary: "",
+    tertiary: ""
+  }
+};
+var DEFAULT_FUNKIT_CONFIG = {
+  apiKey: "",
+  appName: "",
+  textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
+  uiCustomizations: DEFAULT_UI_CUSTOMIZATIONS
+};
+var FunkitConfigContext = createContext(
+  DEFAULT_FUNKIT_CONFIG
+);
+function useFunkitConfig() {
+  const originalFunkitConfig = useContext(FunkitConfigContext);
+  const { t } = useFunkitTranslation();
+  const translatedDefaults = useMemo(() => {
+    return {
+      virtualFiat: t("textCustomizations.virtualFiat"),
+      brokerageOrExchange: t("textCustomizations.brokerageOrExchange"),
+      debitOrCredit: t("textCustomizations.debitOrCredit"),
+      accountBalance: t("textCustomizations.accountBalance"),
+      selectAccount: t("textCustomizations.selectAccount"),
+      perpsTransferTitle: t("perpsTransfer.title"),
+      sourceMethodTitle: t("textCustomizations.sourceMethodTitle"),
+      tokensListTitle: t("textCustomizations.tokensListTitle"),
+      transferTokens: t("textCustomizations.transferTokens"),
+      bitcoinLightning: t("textCustomizations.bitcoinLightning"),
+      cashAppLightning: t("textCustomizations.cashAppLightning"),
+      receiveDropdownTitle: t("textCustomizations.receiveDropdownTitle"),
+      receiveDropdownLabel: t("textCustomizations.receiveDropdownLabel"),
+      confirmationScreen: {
+        payAmountLabel: t("textCustomizations.payAmountLabel"),
+        receiveAmountLabel: t("textCustomizations.receiveAmountLabel")
+      },
+      paymentMethodSubtitles: {}
+    };
+  }, [t]);
+  const finalFunkitConfig = useMemo(() => {
+    return {
+      ...DEFAULT_FUNKIT_CONFIG,
+      ...originalFunkitConfig,
+      textCustomizations: {
+        ...translatedDefaults,
+        ...originalFunkitConfig.textCustomizations,
+        confirmationScreen: {
+          ...translatedDefaults.confirmationScreen,
+          ...originalFunkitConfig.textCustomizations?.confirmationScreen
+        },
+        paymentMethodSubtitles: {
+          ...translatedDefaults.paymentMethodSubtitles,
+          ...originalFunkitConfig.textCustomizations?.paymentMethodSubtitles
+        }
+      },
+      uiCustomizations: {
+        ...DEFAULT_FUNKIT_CONFIG.uiCustomizations,
+        ...originalFunkitConfig.uiCustomizations,
+        checkoutHistory: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.checkoutHistory,
+          ...originalFunkitConfig.uiCustomizations?.checkoutHistory
+        },
+        confirmationScreen: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.confirmationScreen,
+          ...originalFunkitConfig.uiCustomizations?.confirmationScreen
+        },
+        connectExchangeScreen: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.connectExchangeScreen,
+          ...originalFunkitConfig.uiCustomizations?.connectExchangeScreen
+        },
+        inputAmountScreen: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.inputAmountScreen,
+          ...originalFunkitConfig.uiCustomizations?.inputAmountScreen
+        },
+        selectAssetScreen: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectAssetScreen,
+          ...originalFunkitConfig.uiCustomizations?.selectAssetScreen
+        },
+        selectBrokerageScreen: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectBrokerageScreen,
+          ...originalFunkitConfig.uiCustomizations?.selectBrokerageScreen
+        },
+        sourceChangeScreen: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen,
+          ...originalFunkitConfig.uiCustomizations?.sourceChangeScreen,
+          bottomBarCloseButton: {
+            ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen.bottomBarCloseButton,
+            ...originalFunkitConfig.uiCustomizations?.sourceChangeScreen?.bottomBarCloseButton
+          }
+        },
+        transferCryptoScreen: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.transferCryptoScreen,
+          ...originalFunkitConfig.uiCustomizations?.transferCryptoScreen
+        },
+        withdrawalScreen: {
+          ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.withdrawalScreen,
+          ...originalFunkitConfig.uiCustomizations?.withdrawalScreen
+        }
+      }
+    };
+  }, [originalFunkitConfig, translatedDefaults]);
+  return finalFunkitConfig;
+}
+
+// src/components/FunTooltip/FunTooltip.tsx
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React, {
+  createContext as createContext2,
+  useContext as useContext2,
+  useState
+} from "react";
+var TooltipAnchorRefContext = createContext2(null);
+
+// src/components/FunInput/FunInput.tsx
+import React5, {
+  forwardRef,
+  useEffect as useEffect2,
+  useState as useState3
+} from "react";
+import clsx from "clsx";
+
+// src/providers/FunkitThemeProvider.tsx
+import React2, { createContext as createContext3, useContext as useContext3, useEffect, useState as useState2 } from "react";
+
+// src/themes/baseTheme.ts
+var systemFontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+var fontStacks = {
+  rounded: `SFRounded, ui-rounded, "SF Pro Rounded", ${systemFontStack}`,
+  system: systemFontStack,
+  fun: `SF Pro, ${systemFontStack}`
+};
+var radiusScales = {
+  large: {
+    actionButton: "12px",
+    actionButtonInner: "10px",
+    connectButton: "12px",
+    modal: "24px",
+    modalMobile: "28px",
+    modalActionButton: "24px",
+    modalActionButtonMobile: "28px",
+    summaryBox: "12px",
+    youPayYouReceive: "24px",
+    inputAmountSwitcher: "24px",
+    qrCode: "12px",
+    tooltip: "4px",
+    skeleton: "4px",
+    dropdown: "12px",
+    dropdownItem: "4px",
+    dropdownList: "12px",
+    modalTopbarIcon: "9999px",
+    withdrawalInput: "12px",
+    useConnected: "8px"
+  },
+  medium: {
+    actionButton: "10px",
+    actionButtonInner: "8px",
+    connectButton: "10px",
+    modal: "16px",
+    modalMobile: "18px",
+    modalActionButton: "16px",
+    modalActionButtonMobile: "18px",
+    summaryBox: "10px",
+    youPayYouReceive: "24px",
+    inputAmountSwitcher: "24px",
+    qrCode: "10px",
+    tooltip: "4px",
+    skeleton: "4px",
+    dropdown: "10px",
+    dropdownItem: "4px",
+    dropdownList: "10px",
+    modalTopbarIcon: "9999px",
+    withdrawalInput: "10px",
+    useConnected: "8px"
+  },
+  none: {
+    actionButton: "0px",
+    actionButtonInner: "0px",
+    connectButton: "0px",
+    modal: "0px",
+    modalMobile: "0px",
+    modalActionButton: "0px",
+    modalActionButtonMobile: "0px",
+    summaryBox: "0px",
+    youPayYouReceive: "0px",
+    inputAmountSwitcher: "0px",
+    qrCode: "0px",
+    tooltip: "0px",
+    skeleton: "0px",
+    dropdown: "0px",
+    dropdownItem: "0px",
+    dropdownList: "0px",
+    modalTopbarIcon: "0px",
+    withdrawalInput: "0px",
+    useConnected: "0px"
+  },
+  small: {
+    actionButton: "8px",
+    actionButtonInner: "6px",
+    connectButton: "8px",
+    modal: "8px",
+    modalMobile: "8px",
+    modalActionButton: "8px",
+    modalActionButtonMobile: "8px",
+    summaryBox: "8px",
+    youPayYouReceive: "24px",
+    inputAmountSwitcher: "24px",
+    qrCode: "8px",
+    tooltip: "4px",
+    skeleton: "4px",
+    dropdown: "8px",
+    dropdownItem: "4px",
+    dropdownList: "8px",
+    modalTopbarIcon: "9999px",
+    withdrawalInput: "8px",
+    useConnected: "8px"
+  }
+};
+var blurs = {
+  large: {
+    modalOverlay: "blur(20px)"
+  },
+  none: {
+    modalOverlay: "blur(0px)"
+  },
+  small: {
+    modalOverlay: "blur(8px)"
+  },
+  tiny: {
+    modalOverlay: "blur(4px)"
+  }
+};
+var DEFAULT_FONT_WEIGHTS = {
+  regular: "400",
+  medium: "500",
+  // 510 in figma, but chrome no longer supports 510 - lowered to 500
+  semibold: "600",
+  // 590 in figma, but chrome no longer supports 590 - raised to 600
+  bold: "700",
+  heavy: "800"
+};
+var DEFAULT_FONT_SIZES = {
+  "10": { fontSize: "10px", lineHeight: "15px" },
+  "12": { fontSize: "12px", lineHeight: "14px" },
+  "13": { fontSize: "13px", lineHeight: "18px" },
+  "14": { fontSize: "14px", lineHeight: "18px" },
+  "16": { fontSize: "16px", lineHeight: "20px" },
+  "18": { fontSize: "18px", lineHeight: "24px" },
+  "20": { fontSize: "20px", lineHeight: "20px" },
+  "21": { fontSize: "21px", lineHeight: "21px" },
+  "40": { fontSize: "40px", lineHeight: "48px" },
+  "57": { fontSize: "57px", lineHeight: "68px" }
+};
+var FONT_SIZINGS = {
+  regular: DEFAULT_FONT_SIZES,
+  small: {
+    "8": { fontSize: "8px", lineHeight: "16px" },
+    "10": { fontSize: "8px", lineHeight: "16px" },
+    "12": { fontSize: "10px", lineHeight: "16px" },
+    "13": { fontSize: "10px", lineHeight: "16px" },
+    "14": { fontSize: "12px", lineHeight: "16px" },
+    "16": { fontSize: "14px", lineHeight: "18px" },
+    "18": { fontSize: "14px", lineHeight: "20px" },
+    "20": { fontSize: "18px", lineHeight: "20px" },
+    "21": { fontSize: "19px", lineHeight: "19px" },
+    "23": { fontSize: "20px", lineHeight: "28px" },
+    "40": { fontSize: "34px", lineHeight: "40px" },
+    "57": { fontSize: "50px", lineHeight: "60px" }
+  }
+};
+var nestedModalZIndexes = {
+  coinbase: 2147483647,
+  walletConnect: 99999999999999,
+  privy: 999999
+};
+var DEFAULT_MODAL_Z_INDEX = Math.min(...Object.values(nestedModalZIndexes)) - 2;
+var baseTheme = ({
+  borderRadius = "large",
+  fontStack = "fun",
+  fontSizing = "regular",
+  customFontFamily,
+  customFontWeights = DEFAULT_FONT_WEIGHTS,
+  customFontSizings = FONT_SIZINGS[fontSizing],
+  customBorderWidths,
+  customBorderRadiuses = radiusScales[borderRadius],
+  customDimensions,
+  customOpacities,
+  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
+  },
+  opacities: {
+    buttonPrimaryDisabled: "1",
+    ...customOpacities
+  },
+  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
+    optionBoxBorderedBackground: customColors?.optionBoxBorderedBackground ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
+    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",
+    qrCodeBackground: customColors?.qrCodeBackground ?? customColors?.modalBackground ?? "#000000",
+    qrCodeForeground: customColors?.qrCodeForeground ?? customColors?.primaryText ?? "#FFFFFF"
+  },
+  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
+    optionBoxBorderedBackground: customColors?.optionBoxBorderedBackground ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
+    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",
+    qrCodeBackground: customColors?.qrCodeBackground ?? customColors?.modalBackground ?? "#FFF",
+    qrCodeForeground: customColors?.qrCodeForeground ?? customColors?.primaryText ?? "#000"
+  },
+  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 = createContext3(void 0);
+var ThemeContext = createContext3({
+  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
+  } = useContext3(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/FunSkeletonBlock.tsx
+import React3 from "react";
+
+// src/components/FunSkeletonLoader/FunSkeletonLoader.css.ts
+var animateSkeletonClass = "FunSkeletonLoader_animateSkeletonClass__dj0x602 sprinkles_background_inputBorderHover_base__1rsrm2f15a";
+
+// src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
+function FunSkeletonBlock({
+  borderRadius = "skeleton",
+  fontSize,
+  height,
+  width = "full",
+  ...props
+}) {
+  const { activeTheme } = useActiveTheme();
+  const cssHeight = height ? activeTheme.dimensions[height] || (height.endsWith("px") ? height : `${height}px`) : activeTheme.fontSize[fontSize].lineHeight;
+  return /* @__PURE__ */ React3.createElement(
+    Box,
+    {
+      borderRadius,
+      className: animateSkeletonClass,
+      width,
+      ...props,
+      style: { height: cssHeight, ...props.style }
+    }
+  );
+}
+
+// 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.css.ts
+var baseWrapperStyles = "FunInput_baseWrapperStyles__zue0i60";
+var baseWrapperStylesNoTransition = "FunInput_baseWrapperStylesNoTransition__zue0i61";
+var inputClass = "FunInput_inputClass__zue0i64 sprinkles_color_primaryText_base__1rsrm2f2qy sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassDisabled = "FunInput_inputClassDisabled__zue0i68 sprinkles_color_actionColorDisabled_base__1rsrm2f2ua sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassDisabledNoTransition = "FunInput_inputClassDisabledNoTransition__zue0i6a sprinkles_color_actionColorDisabled_base__1rsrm2f2ua sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassError = "FunInput_inputClassError__zue0i6c sprinkles_color_primaryText_base__1rsrm2f2qy sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassErrorNoTransition = "FunInput_inputClassErrorNoTransition__zue0i6f sprinkles_color_primaryText_base__1rsrm2f2qy sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var inputClassNoTransition = "FunInput_inputClassNoTransition__zue0i66 sprinkles_color_primaryText_base__1rsrm2f2qy sprinkles_paddingLeft_inputPaddingX__1rsrm2fri sprinkles_paddingRight_inputPaddingX__1rsrm2ftj sprinkles_paddingTop_inputPaddingY__1rsrm2fvl sprinkles_paddingBottom_inputPaddingY__1rsrm2fpi";
+var numberInputResetStyle = "FunInput_numberInputResetStyle__zue0i62";
+
+// 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] = useState3(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);
+  useEffect2(() => {
+    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
+);
+
+export {
+  useFunkitConfig,
+  TooltipAnchorRefContext,
+  FunSkeletonBlock,
+  FunInput
+};