@funkit/connect/dist/chunk-4YEAUICE.js

Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.

"use client";

// 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
  }
});

export {
  systemFontStack,
  baseTheme
};