@funkit/connect 9.7.2-next.1 → 9.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funkit/connect",
-  "version": "9.7.2-next.1",
+  "version": "9.8.0",
   "description": "Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.",
   "files": [
     "dist",
@@ -45,7 +45,7 @@
     "wagmi": ">=2.0.0 <=3.5.0"
   },
   "devDependencies": {
-    "@aws-sdk/client-cloudfront": "3.1001.0",
+    "@aws-sdk/client-cloudfront": "3.1033.0",
     "@aws-sdk/client-s3": "3.1001.0",
     "@chromatic-com/storybook": "^4.1.3",
     "@statsig/statsig-node-core": "^0.11.1",
@@ -83,6 +83,7 @@
   "dependencies": {
     "@bluvo/react": "3.0.0-beta.1",
     "@bluvo/sdk-ts": "3.0.0-beta.1",
+    "@lifeomic/attempt": "3.1.0",
     "@datadog/browser-logs": "5.22.0",
     "@number-flow/react": "^0.5.5",
     "@radix-ui/react-dropdown-menu": "^2.1.7",
@@ -104,10 +105,10 @@
     "ua-parser-js": "^1.0.37",
     "use-debounce": "^10.0.5",
     "uuid": "^9.0.1",
+    "@funkit/api-base": "4.1.2",
     "@funkit/chains": "1.1.2",
-    "@funkit/fun-relay": "2.6.6",
-    "@funkit/api-base": "4.1.2-next.0",
-    "@funkit/utils": "2.0.1-next.0"
+    "@funkit/fun-relay": "2.6.7",
+    "@funkit/utils": "3.0.0"
   },
   "repository": {
     "type": "git",

package/dist/chunk-64NZSUGQ.js

@@ -1,368 +0,0 @@
-"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,
-  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: "10px",
-    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,
-    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],
-    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],
-    ...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",
-    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",
-    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
-};

package/dist/chunk-B2B6HDIE.js

@@ -1,238 +0,0 @@
-"use client";
-import {
-  baseTheme
-} from "./chunk-64NZSUGQ.js";
-
-// src/themes/lightTheme.ts
-var accentColors = {
-  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 defaultAccentColor = accentColors.white;
-var lightTheme = ({
-  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(0, 0, 0, 0.04)",
-    connectButtonBackground: "#FFF",
-    connectButtonBackgroundError: "#C60000",
-    connectButtonText: "#25292E",
-    connectButtonTextError: "#FFF",
-    connectionIndicator: "#30E000",
-    error: accentColors.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",
-    //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",
-    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",
-    // button
-    actionColor: "#000",
-    actionColorHover: "rgba(0, 0, 0, 0.7)",
-    actionColorDisabled: "rgba(0, 0, 0, 0.50)",
-    buttonPrimary: accentColor,
-    buttonDisabled: "#31A3F826",
-    buttonWarning: accentColors.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",
-    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 = accentColors;
-
-export {
-  lightTheme
-};