@funkit/connect 8.1.0 → 8.2.1-next.0

package/dist/components/Dialog/Dialog.d.ts

@@ -19,16 +19,18 @@ interface DialogProps {
     /** Whether the transition animation should be used on open/close */
     withTransition?: boolean;
     testId?: string;
+    /** Whether to use the fanatics bottom sheet style on mobile */
+    isFanaticsBottomSheet?: boolean;
 }
 /**
  * Dialog components (title, content, bottom bar) must be rendered as direct children of Dialog for correct scrolling behavior
  */
-export declare function Dialog({ children, onClose, onAnimationComplete, open, titleId, isHidden, isSmartCloseable, withoutSidePadding, withoutBottomPadding, withTransition, testId, }: DialogProps): React.ReactPortal | null;
+export declare function Dialog({ children, onClose, onAnimationComplete, open, titleId, isHidden, isSmartCloseable, withoutSidePadding, withoutBottomPadding, withTransition, testId, isFanaticsBottomSheet, }: DialogProps): React.ReactPortal | null;
 export declare namespace Dialog {
     var Title: ({ title, titleMeta, hasCloseButton: hasCloseButtonProp, isCloseDisabled, onClose, hasBackButton: hasBackButtonProp, isBackDisabled, onBack, className, }: DialogTitleProps) => React.JSX.Element;
     var Content: ({ children, fullHeight, paddingLeft, paddingBottom, paddingTop, className, withTopDivider, withBottomDivider, id, withoutInternalPadding, ...boxProps }: DialogContentProps) => React.JSX.Element;
     var BottomSection: ({ paddingX, children, ...boxProps }: BoxProps) => React.JSX.Element;
-    var BottomBar: ({ topSection, topSectionVisible, actionButtonProps, onClose, }: import("../FunBottomBar/FunBottomBar").FunBottomBarProps) => React.JSX.Element | null;
+    var BottomBar: ({ topSection, topSectionVisible, actionButtonProps, onClose, onCloseLabel, }: import("../FunBottomBar/FunBottomBar").FunBottomBarProps) => React.JSX.Element | null;
 }
 interface DialogContentProps extends BoxProps {
     children: ReactNode;

package/dist/components/Dialog/DialogContent.css.d.ts

@@ -12,6 +12,15 @@ export declare const dialogWide: string;
 export declare const withoutSidePadding: string;
 export declare const withoutBottomPadding: string;
 export declare const dialogMobile: string;
+/**
+ * Fanatics-specific bottom sheet style for mobile
+ * - No margins from sides/bottom (full width)
+ * - No border radius on bottom corners (only top)
+ * - Side paddings 20px instead of 24
+ * - Max height 80% of viewport
+ * - Internal scrolling when content exceeds height
+ */
+export declare const dialogFanaticsBottomSheet: string;
 export declare const scrollContent: string;
 export declare const scrollbarHidden: string;
 export declare const fullHeightContent: string;

package/dist/components/FunBottomBar/FunBottomBar.d.ts

@@ -5,5 +5,6 @@ export interface FunBottomBarProps {
     topSectionVisible?: boolean;
     actionButtonProps?: FunButtonProps;
     onClose?: () => void;
+    onCloseLabel?: string;
 }
-export declare const FunBottomBar: ({ topSection, topSectionVisible, actionButtonProps, onClose, }: FunBottomBarProps) => React.JSX.Element | null;
+export declare const FunBottomBar: ({ topSection, topSectionVisible, actionButtonProps, onClose, onCloseLabel, }: FunBottomBarProps) => React.JSX.Element | null;

package/dist/components/FunButton/FunIconButton.d.ts

@@ -12,7 +12,7 @@ interface FunIconButtonCustomColors {
     hoverBorder?: BorderColorType;
     focusedBorder?: BorderColorType;
 }
-export interface FunIconButtonProps extends Pick<BoxProps, 'as' | 'borderRadius' | 'color' | 'fontSize' | 'fontWeight' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave' | 'style'> {
+export interface FunIconButtonProps extends Pick<BoxProps, 'as' | 'borderRadius' | 'color' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave' | 'style' | 'textTransform'> {
     onClick?: () => void;
     /** Icon element to be rendered */
     icon: React.ReactNode;

package/dist/components/FunInfoBanner/FunInfoBanner.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const FunInfoBanner: () => React.JSX.Element | null;
+interface FunInfoBannerProps {
+    configName?: 'showinfobanner' | 'withdrawalinfobanner';
+}
+export declare const FunInfoBanner: ({ configName, }: FunInfoBannerProps) => React.JSX.Element | null;
+export {};

package/dist/components/FunInput/FunInput.d.ts

@@ -22,6 +22,7 @@ export interface FunInputProps<T = HTMLInputElement | HTMLTextAreaElement> {
     alwaysFocused?: boolean;
     /** Color meant for prefix & suffix elements. Defaults to secondaryText. */
     adornmentColor?: BoxProps['color'];
+    fontFamily?: BoxProps['fontFamily'];
     textWeight?: BoxProps['fontWeight'];
     ignoreFontSize?: boolean;
     overrideBorderWidth?: BoxProps['borderWidth'];
@@ -32,6 +33,10 @@ export interface FunInputProps<T = HTMLInputElement | HTMLTextAreaElement> {
     allowMultiline?: T extends HTMLInputElement ? false : true;
     /** Remove default transitions from the input wrapper and base styles. Defaults to false. */
     ignoreBaseTransitions?: boolean;
+    /** Color for decimal digits. When specified, decimal portion will be rendered in this color. */
+    decimalsColor?: BoxProps['color'];
+    /** Decimal separator character based on locale (e.g., '.' for en-US, ',' for de-DE). Required for decimalsColor to work. */
+    decimalSeparator?: string;
     testId?: string;
 }
 export type FunInputChangeEvent = ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;

package/dist/components/FunOptionBox/FunOptionBox.css.d.ts

@@ -1 +1 @@
-export declare const funOptionBoxStyle: Record<"baseStyle" | "defaultBorder" | "transparentBorder" | "activeBorder" | "disabledOptionBorder" | "defaultBackground" | "activeBackground", string>;
+export declare const funOptionBoxStyle: Record<"baseStyle" | "compactListStyle" | "defaultBorder" | "transparentBorder" | "activeBorder" | "disabledOptionBorder" | "defaultBackground" | "activeBackground" | "uninteractiveBackground", string>;

package/dist/components/FunOptionBox/FunOptionBox.d.ts

@@ -2,10 +2,11 @@ import React, { type ReactNode } from 'react';
 import { type BoxProps } from '../Box/Box';
 interface FunOptionBoxProps extends Omit<BoxProps, 'className' | 'cursor' | 'tabIndex' | 'style'> {
     isActive?: boolean;
+    isCompactList?: boolean;
     paddingX?: BoxProps['paddingX'];
     paddingY?: BoxProps['paddingY'];
     type?: 'default' | 'bordered';
     children: ReactNode;
 }
-export declare function FunOptionBox({ isActive, onClick, paddingX, paddingY, type, as, borderStyle, borderWidth, borderRadius, display, alignItems, gap, justifyContent, color, children, disabled, ...boxProps }: FunOptionBoxProps): React.JSX.Element;
+export declare function FunOptionBox({ isActive, isCompactList, onClick, paddingX, paddingY, type, as, borderStyle, borderWidth, borderRadius, display, alignItems, gap, justifyContent, color, children, disabled, ...boxProps }: FunOptionBoxProps): React.JSX.Element;
 export {};

package/dist/components/FunPayments/FunPaymentMethods.d.ts

@@ -1,5 +1,12 @@
 import React, { type ReactNode } from 'react';
+import { type FunkitPaymentMethodIconsConfig } from '../../providers/FunkitConfigContext';
 import { PaymentMethod, type PaymentMethodBrokerageInfo, type PaymentMethodVirtualBankInfo } from '../../domains/paymentMethods';
+/**
+ * Get a custom icon passed in from UI customization config
+ * These icons are passed in from client to support enhanced branding+design
+ * Called "value icon" in the context of FunPaymentMethodItem
+ */
+export declare function getIconFromUiConfig(paymentMethod: PaymentMethod, iconConfig: FunkitPaymentMethodIconsConfig | undefined, defaultIconSize?: number): ReactNode | undefined;
 export declare const getDynamicValueIconComponent: () => React.JSX.Element;
 export declare function SupportedChainList({ chainIdList, iconSize, style, }: {
     chainIdList: string[];

package/dist/components/FunSelectBrokerage/FunBrokerageItem.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+import { type TextProps } from '../Text/Text';
 export interface FunBrokerageItemProps {
     exchangeName: string;
     exchangeIcon: React.ReactNode;
     hasActiveConnection: boolean;
     badgeText?: string;
     disabled?: boolean;
+    fontSize?: TextProps['size'];
+    fontWeight?: TextProps['weight'];
 }
-export declare const FunBrokerageItem: ({ exchangeName, exchangeIcon, hasActiveConnection, badgeText, disabled, }: FunBrokerageItemProps) => React.JSX.Element;
+export declare const FunBrokerageItem: ({ exchangeName, exchangeIcon, hasActiveConnection, badgeText, disabled, fontSize, fontWeight, }: FunBrokerageItemProps) => React.JSX.Element;

package/dist/components/FunSkeletonLoader/FunSkeletonBlock.d.ts

@@ -5,9 +5,14 @@ type FunSkeletonBlockProps = {
     marginBottom?: BoxProps['marginBottom'];
     marginTop?: BoxProps['marginTop'];
     style?: BoxProps['style'];
-    height: string;
     /** Defaults to full width */
     width?: BoxProps['width'];
-};
-export declare function FunSkeletonBlock({ width, borderRadius, height, ...props }: FunSkeletonBlockProps): React.JSX.Element;
+} & ({
+    fontSize?: never;
+    height: Exclude<BoxProps['height'], undefined> | `${number}px`;
+} | {
+    fontSize: Exclude<BoxProps['fontSize'], undefined | 'inherit'>;
+    height?: never;
+});
+export declare function FunSkeletonBlock({ borderRadius, fontSize, height, width, ...props }: FunSkeletonBlockProps): React.JSX.Element;
 export {};

package/dist/components/FunTransactionSummary/FunTxSummaryComponents.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type BoxProps } from '../Box/Box';
 export declare function FunTxSummaryBox({ children, ...otherProps }: BoxProps): React.JSX.Element;
+export declare function FunTxSummaryDivider(): React.JSX.Element;
 export declare function FunTxSummaryLineItem({ children, ...otherProps }: BoxProps): React.JSX.Element;
 export declare function FunTxSummaryLineItemKeyText({ text }: {
     text: string;

package/dist/components/HelpAlert/HelpAlert.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 interface HelpAlertProps {
     onHelp: () => void;
 }
+export declare const HelpText: ({ onHelp }: HelpAlertProps) => React.JSX.Element;
 export declare const HelpAlert: ({ onHelp }: HelpAlertProps) => React.JSX.Element;
 export {};

package/dist/components/Icons/ApplePayIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ApplePayIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/BitcoinIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const BitcoinIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/FanaticsCreditCardIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FanaticsCreditCardIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/GooglePayIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const GooglePayIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/New/CashIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CashIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/RevolutPayIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const RevolutPayIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/SepaBankIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SepaBankIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/VenmoIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const VenmoIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,11 +1,21 @@
 import React from 'react';
+import { type BoxProps } from '../Box/Box';
 export type Tab<T = string> = {
     label: string;
     value: T;
+    icon?: React.ReactNode;
 };
 export type TabsProps = {
     tabs: Tab[];
     activeTab: number;
     onTabChange: (tab: number) => void;
+    /** Custom background color for the container */
+    containerBackgroundColor?: BoxProps['background'];
+    /** Custom vertical padding for tab buttons */
+    tabPaddingY?: BoxProps['paddingY'];
+    fontWeight?: BoxProps['fontWeight'];
+    fontSize?: BoxProps['fontSize'];
+    activeTabStyles?: React.CSSProperties;
+    containerStyles?: React.CSSProperties;
 };
 export declare const Tabs: React.FC<TabsProps>;

package/dist/components/Text/Text.d.ts

@@ -12,6 +12,7 @@ export type TextProps = {
     className?: string;
     tabIndex?: number;
     textAlign?: BoxProps['textAlign'];
+    textTransform?: BoxProps['textTransform'];
     display?: BoxProps['display'];
     testId?: string;
     title?: string;

package/dist/components/TransactionStatus/AnimatedText.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import { type TextProps } from '../Text/Text';
+export interface AnimatedTextProps extends TextProps {
+    animationDelay?: number;
+    animationDuration?: number;
+    animationMaxBlur?: number;
+    animationMaxDistance?: number;
+    textKey: number | string;
+}
+export declare const AnimatedText: FC<AnimatedTextProps>;

package/dist/components/TransactionStatus/DotsDivider.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DotsDivider: React.FC;

package/dist/components/TransactionStatus/StepSpinner.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { CheckoutProgressStep } from '../../providers/FunkitCheckoutContext';
+export declare const STEP_SPINNER_MORPH_DEGREES = 45;
+export declare const STEP_SPINNER_MORPH_MAX_OFFSET = 4;
+export declare const STEP_SPINNER_SIZE_BIG_SCALE = 1;
+export declare const STEP_SPINNER_SIZE_SMALL_SCALE: number;
+/**
+ * Returns SVG path for a circle that expands or retracts on one side.
+ * @param deg In degrees - Span of morphing arcs *on each side* (e.g. 90° would be morphing an entire half) - 90° at most
+ * @param offset In pixels - Positive offset expands, negative offset retracts
+ * @param side Which side are we morphing - "left" or "right"
+ */
+export declare function getCircleMorphPath(deg: number, offset: number, side: 'left' | 'right'): string;
+export declare function StepSpinner({ initialStep, step, }: {
+    initialStep: CheckoutProgressStep;
+    step: CheckoutProgressStep;
+}): React.JSX.Element;

package/dist/components/TransactionStatus/TransactionStatus.d.ts

@@ -1,7 +1,8 @@
 import type { TFunction } from 'i18next';
 import React, { type ReactNode } from 'react';
 import type { CheckoutProgressStep } from '../../providers/FunkitCheckoutContext';
-interface TransactionStatusProps {
+import { type FunkitTextCustomizationsConfig } from '../../providers/FunkitConfigContext';
+export interface TransactionStatusProps {
     isSlowTransaction: boolean;
     isWithdrawal: boolean;
     textConfigStatus?: TextConfigStatus;
@@ -24,13 +25,10 @@ export type TextConfigContext = {
     durationUnits: string;
     isWithdrawal: boolean;
     finalizeVerb: string;
+    textCustomizations: FunkitTextCustomizationsConfig;
 };
 export type TextConfigStatus = Record<Exclude<TransactionStatusProps['status'], 'progress'> | 'progress_delayed', TextConfig | ((context: TextConfigContext) => TextConfig)>;
-export declare const getDefaultTextConfigStatus: (t: TFunction) => TextConfigStatus;
 export type TextConfigSteps = Record<CheckoutProgressStep, TextConfig | ((context: TextConfigContext) => TextConfig)>;
+export declare const getDefaultTextConfigStatus: (t: TFunction) => TextConfigStatus;
 export declare const getDefaultTextConfigSteps: (t: TFunction) => TextConfigSteps;
-export declare function TransactionStatusLoading({ expectedStatus, }: {
-    expectedStatus: TransactionStatusProps['status'];
-}): React.JSX.Element;
-export declare function TransactionStatus({ isSlowTransaction, isWithdrawal, status, step, textConfigStatus, textConfigSteps, }: TransactionStatusProps): React.JSX.Element;
-export {};
+export declare const TransactionStatus: React.FC<TransactionStatusProps>;

package/dist/components/TransactionStatus/TransactionStatusLoading.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+import type { TransactionStatusProps } from './TransactionStatus';
+export interface TransactionStatusLoadingProps {
+    expectedStatus: TransactionStatusProps['status'];
+}
+export declare const TransactionStatusLoading: FC<TransactionStatusLoadingProps>;

package/dist/consts/customers.d.ts

@@ -13,5 +13,6 @@ export declare function isHyenaCustomer(apiKey: string): apiKey is "pLQBJsA6zS9t
 export declare function isAvantisCustomer(apiKey: string): apiKey is "6TUi99Tq3O9MWj1IFX8Pv6spmPXzcvhy9NvBoeW2";
 export declare function isPerplCustomer(apiKey: string): apiKey is "wQDLu86Qab61vbtru7thf8Yj0xaeqVUH4ohoXESu";
 export declare function isLighterxyzCustomer(apiKey: string): apiKey is "i6e1I8cfX625TTwRJlD2DshKyAoaUtO8aeoaR4i2";
+export declare function isFanaticsCustomer(apiKey: string): apiKey is "lI7amueGK94QtGa7sGGVf8n0XhIcn4sHFAZRu5Jj";
 export declare function isLighterEthSpot(apiKey: string, checkoutConfig: FunkitCheckoutConfig | undefined): boolean | undefined;
 export declare function isLighterNativeFlow(apiKey: string, checkoutConfig: Pick<FunkitCheckoutConfig, 'targetChain'> | undefined): boolean;