@bunnyapp/components 1.8.6 → 2.0.0-beta.2

package/dist/cjs/types/src/components/PaymentForm/components/CheckoutNoPayment.d.ts

@@ -7,5 +7,5 @@ type Props = {
         isProcessingText: string;
     };
 };
-export declare function CheckoutNoPayment(props?: Props): import("react/jsx-runtime").JSX.Element;
+export declare function CheckoutNoPayment(props?: Props): import("react").JSX.Element;
 export {};

package/dist/cjs/types/src/components/PaymentForm/components/CouponEditor.d.ts

@@ -1,8 +1,25 @@
-declare function CouponEditor({ className, onAddCoupon, isAddingCoupon, couponCode, setCouponCode, }: {
+/**
+ * Note: the Signup / Checkout screen (`CheckoutShared`) has its own coupon editor
+ * (`CheckoutCouponEditor`) instead of reusing this view: its coupon lives in the screen's pricing state
+ * and shows as a Discount row once applied. Only the coupon hooks are shared.
+ */
+/** Coupon editor bound to a quote: applies and removes coupons through the quote coupon mutations. */
+declare function CouponEditor({ className, apiHost, token, quoteId, appliedCoupons, onCouponAdded, onCouponRemoved, }: {
     className?: string;
-    onAddCoupon: (couponCode: string) => void;
-    isAddingCoupon: boolean;
-    couponCode: string;
-    setCouponCode: (couponCode: string) => void;
-}): import("react/jsx-runtime").JSX.Element;
+    apiHost: string;
+    token?: string;
+    quoteId?: string;
+    appliedCoupons: string[];
+    onCouponAdded?: () => void;
+    onCouponRemoved?: () => void;
+}): import("react").JSX.Element;
+/** Presentational coupon editor: the caller decides what applying and removing a code does. */
+export declare function CouponEditorView({ className, appliedCoupons, onApply, onRemove, isApplying, isRemoving, }: {
+    className?: string;
+    appliedCoupons: string[];
+    onApply: (code: string) => void;
+    onRemove: (code: string) => void;
+    isApplying: boolean;
+    isRemoving: boolean;
+}): import("react").JSX.Element;
 export default CouponEditor;

package/dist/cjs/types/src/components/PaymentForm/{DemoPay/CreditCard → components}/MiniCreditCard.d.ts

@@ -17,6 +17,12 @@ export declare const MiniCreditCard_PaymentMethodFragment: import("gql.tada").Ta
     on: "PaymentMethod";
     masked: true;
 }>;
+/**
+ * A saved payment method as one line: brand, last digits, `Default`/`Failed` tags and a menu.
+ *
+ * @deprecated PaymentForm no longer uses it: saved payment methods are its tiles now. It will be removed
+ * in the next release.
+ */
 export declare function MiniCreditCard({ className, buttons, hideDropdownMenu, hideDefaultTag, onClickRemove, paymentMethod: maskedPaymentMethod, onClickSetDefault, id, }: {
     className?: string;
     buttons?: React.ReactNode;
@@ -26,4 +32,4 @@ export declare function MiniCreditCard({ className, buttons, hideDropdownMenu, h
     paymentMethod?: FragmentOf<typeof MiniCreditCard_PaymentMethodFragment>;
     onClickSetDefault?: () => void;
     id?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentForm/components/NoPaymentPluginsAlert.d.ts

@@ -0,0 +1 @@
+export declare function NoPaymentPluginsAlert(): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentForm/components/Pay.d.ts

@@ -2,5 +2,11 @@ type PayProps = {
     disabled?: boolean;
     onClickPrecondition?: () => boolean | Promise<boolean>;
 };
-export declare function Pay(props?: PayProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Pays (or approves the payment hold) with the selected payment method. A saved method is used as it
+ * is, without changing the account's default. A new one is stored first, in the same click, and
+ * selected once the payment is through or declined, so a retry doesn't store it again. (Selecting it
+ * earlier would close the new method form, and this button with it, mid-payment.)
+ */
+export declare function Pay(props?: PayProps): import("react").JSX.Element;
 export {};

package/dist/cjs/types/src/components/PaymentForm/components/PaymentMethodDetails/PaymentMethodDetails.d.ts

@@ -4,7 +4,13 @@ import { Save } from './components/Save';
 type PaymentMethodDetailsProps = {
     footer?: ReactNode;
 };
-declare function PaymentMethodDetailsRoot(props?: PaymentMethodDetailsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The new payment method form: plugin tiles when there is more than one plugin, then the selected
+ * plugin's fields, then `footer`, spaced like the rows of Checkout's form. It shows while a new method
+ * is chosen, and straight away without saved methods. With saved methods and no saved method tiles on
+ * screen to choose "New card" in, it shows "Add payment method" until then.
+ */
+declare function PaymentMethodDetailsRoot(props?: PaymentMethodDetailsProps): import("react").JSX.Element | null;
 export declare const PaymentMethodDetails: typeof PaymentMethodDetailsRoot & {
     Cancel: typeof Cancel;
     Save: typeof Save;

package/dist/cjs/types/src/components/PaymentForm/components/PaymentMethodDetails/components/Cancel.d.ts

@@ -1 +1,2 @@
-export declare function Cancel(): import("react/jsx-runtime").JSX.Element;
+/** Closes the new payment method form by going back to the default saved method. Only shown when there is one. */
+export declare function Cancel(): import("react").JSX.Element | null;

package/dist/cjs/types/src/components/PaymentForm/components/PaymentMethodDetails/components/Save.d.ts

@@ -2,8 +2,9 @@ type SaveButtonTextOverride = {
     text: string;
     isProcessingText: string;
 };
+/** Stores the payment method entered in the form, then closes the form again. */
 export declare function Save({ onClickPrecondition, buttonTextOverride, }: {
     onClickPrecondition?: () => boolean | Promise<boolean>;
     buttonTextOverride?: SaveButtonTextOverride;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/dist/cjs/types/src/components/PaymentForm/components/StoredPaymentMethods.d.ts

@@ -1,5 +1,11 @@
 type StoredPaymentMethodsProps = {
     className?: string;
 };
-export declare function StoredPaymentMethods(props?: StoredPaymentMethodsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The account's saved payment methods as tiles, then "New card", which opens the new payment method
+ * form. When paying, a tile is the method to pay with (the default is preselected; choosing another
+ * pays with it this once and leaves the default alone). When only saving (no invoice or quote), the
+ * tiles are cards to manage. Either way each has a menu to remove it or make it the default.
+ */
+export declare function StoredPaymentMethods(props?: StoredPaymentMethodsProps): import("react").JSX.Element | null;
 export {};

package/dist/cjs/types/src/components/PaymentForm/context/AccountIdContext.d.ts

@@ -1,5 +1,5 @@
 declare const AccountIdProvider: ({ value, children }: {
     value: string | undefined;
     children?: import("react").ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useAccountId: () => string | undefined;
+}) => import("react").JSX.Element, useAccountId: () => string | undefined;
 export { AccountIdProvider, useAccountId };

package/dist/cjs/types/src/components/PaymentForm/context/CallbacksContext.d.ts

@@ -1,4 +1,6 @@
-import { PaymentMethodFragment } from './PaymentMethodFormVisibilityContext';
+import { ResultOf } from 'gql.tada';
+import { PaymentForm_PaymentMethodsFragment } from '../fragments/PaymentForm_PaymentMethodsFragment';
+export type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
 export type PaymentCallbacksContextValue = {
     onPaymentSuccess: ((response: any) => void) | undefined;
     onSetDefaultPaymentMethod: (() => void) | undefined;
@@ -10,5 +12,5 @@ export type PaymentCallbacksContextValue = {
 declare const PaymentFormCallbacksProvider: ({ value, children }: {
     value: PaymentCallbacksContextValue;
     children?: import("react").ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, usePaymentFormCallbacks: () => PaymentCallbacksContextValue;
+}) => import("react").JSX.Element, usePaymentFormCallbacks: () => PaymentCallbacksContextValue;
 export { PaymentFormCallbacksProvider, usePaymentFormCallbacks };

package/dist/cjs/types/src/components/PaymentForm/context/CustomCheckoutFunctionContext.d.ts

@@ -1,5 +1,5 @@
 declare const CustomCheckoutFunctionProvider: ({ value, children }: {
     value: ((pluginId: string, paymentMethodId: string) => Promise<any>) | undefined;
     children?: import("react").ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useCustomCheckoutFunction: () => ((pluginId: string, paymentMethodId: string) => Promise<any>) | undefined;
+}) => import("react").JSX.Element, useCustomCheckoutFunction: () => ((pluginId: string, paymentMethodId: string) => Promise<any>) | undefined;
 export { CustomCheckoutFunctionProvider, useCustomCheckoutFunction };

package/dist/cjs/types/src/components/PaymentForm/context/PaymentFormMethodsProvider.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+type PaymentFormSelectionValue = {
+    /** The account's saved payment methods or payment plugins are still loading. */
+    isLoading: boolean;
+    /** Plugins we have a payment form for; undefined until they have loaded. */
+    paymentPluginsCount: number | undefined;
+    /** A new payment method is entered (and stored on paying) rather than a saved one used. */
+    isNewPaymentMethod: boolean;
+    /** The saved payment method paid with, unless `isNewPaymentMethod`. */
+    selectedPaymentMethodId: string | undefined;
+    /** The saved method tiles are on screen. */
+    hasPicker: boolean;
+    registerPicker: () => () => void;
+};
+declare const usePaymentFormSelection: () => PaymentFormSelectionValue;
+/**
+ * PaymentForm's payment methods: the shared selection (saved methods and plugins of the account),
+ * Stripe's Elements group and DemoPay's card, plus whether the saved method tiles are on screen.
+ *
+ * The pieces coordinate only through here, so callers can place, wrap or leave out any of them. The
+ * default saved method is used until a new method is chosen: with "New card" in the saved method tiles,
+ * or, without the tiles, with the new method form's "Add payment method". Without saved methods there
+ * is only the new method.
+ */
+export declare function PaymentFormMethodsProvider({ accountId, currencyId, children, }: {
+    accountId: string | undefined;
+    currencyId: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Marks the saved method tiles as on screen for as long as they are mounted, before the first paint. */
+export declare function useRegisterPicker(): void;
+export { usePaymentFormSelection };

package/dist/cjs/types/src/components/PaymentForm/context/PaymentProvider.d.ts

@@ -23,7 +23,7 @@ declare const PayableProvider: ({ value, children }: {
         setIsSaving: React.Dispatch<React.SetStateAction<boolean>>;
     };
     children?: import("react").ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, usePayable: () => {
+}) => import("react").JSX.Element, usePayable: () => {
     quoteId?: string;
     invoiceId?: string;
     paymentHold?: {
@@ -73,4 +73,4 @@ export declare function PaymentProvider({ children, quote: maskedQuote, invoice:
         quoteId: string;
         amountToHold: number;
     } | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentForm/fragments/PaymentForm_PaymentMethodsFragment.d.ts

@@ -1,6 +1,6 @@
 export declare const PaymentForm_PaymentMethodsFragment: import("gql.tada").TadaDocumentNode<{
     [$tada.fragmentRefs]: {
-        MiniCreditCard_PaymentMethodFragment: "PaymentMethod";
+        SavedPaymentMethodTiles_PaymentMethodFragment: "PaymentMethod";
     };
     id: string;
     plugin: {

package/dist/cjs/types/src/components/PaymentForm/hooks/usePay.d.ts

@@ -1,14 +1,15 @@
-import { PluginData } from '@/types/frontendTypes';
-type UsePayArgs = {
-    plugin: PluginData | undefined;
+import type { PaymentPlugin } from '@/components/PaymentMethods/utils/paymentPlugins';
+/**
+ * Pays the invoice or quote with a stored payment method: through the flow's custom checkout function
+ * when it has one (Signup), otherwise the `checkout` mutation. Any plugin pays the same way.
+ */
+export declare function usePay({ quoteId, invoiceId, onPaymentSuccess, onPaymentError, }: {
     quoteId?: string | null;
     invoiceId?: string | null;
     onPaymentSuccess?: (response: any) => void;
     onPaymentError?: (error: any) => void;
-};
-type UsePayResult = {
-    pay: (paymentMethodId: string) => Promise<void>;
+}): {
+    pay: (paymentMethodId: string, plugin: PaymentPlugin | undefined) => Promise<void>;
     isPaying: boolean;
 };
-export declare function usePay({ plugin, quoteId, invoiceId, onPaymentSuccess, onPaymentError, }: UsePayArgs): UsePayResult;
 export default usePay;

package/dist/cjs/types/src/components/PaymentForm/hooks/usePaymentHold.d.ts

@@ -1,11 +1,11 @@
-import { PluginData } from '@/types/frontendTypes';
-type UsePaymentHoldArgs = {
-    plugin: PluginData | undefined;
+import { PaymentPlugin } from '@/components/PaymentMethods/utils/paymentPlugins';
+/** Places a hold for a quote's amount on a stored payment method, through the method's plugin. */
+export declare function usePaymentHold({ onPaymentHoldSuccess, onPaymentHoldError, }: {
     onPaymentHoldSuccess?: (response: any) => void;
     onPaymentHoldError?: (error: any) => void;
-};
-type UsePaymentHoldResult = {
-    approveHold: (args: {
+}): {
+    approveHold: ({ plugin, quote, paymentMethodId, }: {
+        plugin: PaymentPlugin | undefined;
         quote: {
             id: string;
             amount: number;
@@ -14,5 +14,4 @@ type UsePaymentHoldResult = {
     }) => Promise<void>;
     isApprovingHold: boolean;
 };
-export declare function usePaymentHold({ plugin, onPaymentHoldSuccess, onPaymentHoldError, }: UsePaymentHoldArgs): UsePaymentHoldResult;
 export default usePaymentHold;

package/dist/cjs/types/src/components/PaymentForm/hooks/useSave.d.ts

@@ -1,16 +1,14 @@
-type SaveHookArgs = {
+/**
+ * Stores the payment method entered in the form on the account and returns its id (undefined when
+ * it failed; the error went to `onSaveError`). The account's payment methods are refetched before
+ * it resolves, so the new method can be selected right away.
+ */
+export declare function useSave({ accountId, onSaveSuccess, onSaveError, }: {
     accountId: string | undefined;
     onSaveSuccess?: (response: any) => void;
     onSaveError?: (error: any) => void;
-    /**
-     * When true, invalidates the account payment methods query after a successful save.
-     * Defaults to true.
-     */
-    invalidatePaymentMethodsQuery?: boolean;
-};
-type SaveHookResult = {
+}): {
     save: () => Promise<string | undefined>;
     isSaving: boolean;
 };
-export declare function useSave({ accountId, onSaveSuccess, onSaveError, invalidatePaymentMethodsQuery, }: SaveHookArgs): SaveHookResult;
 export default useSave;

package/dist/cjs/types/src/components/PaymentMethods/components/CardBrandIcons.d.ts

@@ -0,0 +1,2 @@
+/** Accepted card brands, shown inside the card number field. */
+export default function CardBrandIcons(): import("react").JSX.Element;

package/dist/{esm/types/src/components/PaymentForm/DemoPay/CreditCard → cjs/types/src/components/PaymentMethods}/components/CardImage.d.ts

@@ -11,4 +11,4 @@ export declare const CardImage_PaymentMethodFragment: import("gql.tada").TadaDoc
 }>;
 export declare function CardImage({ paymentMethod: maskedPaymentMethod, }: {
     paymentMethod: FragmentOf<typeof CardImage_PaymentMethodFragment>;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/components/DemoPayCardBox.d.ts

@@ -0,0 +1,6 @@
+/**
+ * DemoPay's card inputs drawn as one bordered box: number (with brands) on top, expiry + CVC below.
+ * The inputs are `TextInput`s; `DemoPayCardBox.rules.ts` takes their own box away so the group reads as one
+ * field, and draws its border in the danger colour when one of them is invalid.
+ */
+export default function DemoPayCardBox(): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/components/DemoPayCardBox.rules.d.ts

@@ -0,0 +1,46 @@
+import type { ResolvedVariables } from '../../../ui/appearance/variables';
+export declare function demoPayCardBoxRules(v: ResolvedVariables): {
+    internal: {
+        '.InputGroup': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            overflow: string;
+            transition: string;
+        };
+        '.InputGroup:has(.Input--invalid)': {
+            borderColor: string;
+        };
+        '.InputGroup:hover': {
+            borderColor: string;
+        };
+        '.InputGroup:focus-within': {
+            borderColor: string;
+            boxShadow: string;
+        };
+        '.InputGroup > * + *': {
+            borderTop: string;
+        };
+        '.InputGroupRow > * + *': {
+            borderLeft: string;
+        };
+        '.InputGroup .Input': {
+            fontSize: string;
+            border: string;
+            borderRadius: string;
+            lineHeight: string;
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        '.InputGroup .Input:focus': {
+            boxShadow: string;
+        };
+        '.InputGroup .Input--invalid': {
+            boxShadow: string;
+        };
+        '.InputGroup .Input:disabled': {
+            backgroundColor: string;
+        };
+    };
+    public: {};
+};

package/dist/cjs/types/src/components/PaymentMethods/components/DemoPayCardCvc.d.ts

@@ -0,0 +1,8 @@
+declare const DemoPayCardCvc: ({ "aria-label": ariaLabel, autoFocus, onChange, placeholder, value, }: {
+    "aria-label"?: string;
+    autoFocus?: boolean;
+    onChange: (cvc: string) => void;
+    placeholder?: string;
+    value: string;
+}) => import("react").JSX.Element;
+export default DemoPayCardCvc;

package/dist/cjs/types/src/components/PaymentMethods/components/DemoPayCardNumber.d.ts

@@ -0,0 +1,8 @@
+declare const DemoPayCardNumber: ({ "aria-label": ariaLabel, autoFocus, onChange, placeholder, value, }: {
+    "aria-label"?: string;
+    autoFocus?: boolean;
+    onChange: (number: string) => void;
+    placeholder?: string;
+    value: string;
+}) => import("react").JSX.Element;
+export default DemoPayCardNumber;

package/dist/cjs/types/src/components/PaymentMethods/components/DemoPayExpiry.d.ts

@@ -0,0 +1,8 @@
+declare const DemoPayExpiry: ({ "aria-label": ariaLabel, autoFocus, onChange, placeholder, value, }: {
+    "aria-label"?: string;
+    autoFocus?: boolean;
+    onChange: (cvc: string) => void;
+    placeholder?: string;
+    value: string;
+}) => import("react").JSX.Element;
+export default DemoPayExpiry;

package/dist/cjs/types/src/components/PaymentMethods/components/NewPaymentMethodFields.d.ts

@@ -0,0 +1,10 @@
+import type { PayerFields } from '../hooks/useStripePaymentMethodId';
+/**
+ * The form for a new payment method on the selected plugin: Stripe's Payment Element (which brings its
+ * own labels), or DemoPay's card box. The other props go to the Payment Element.
+ */
+export default function NewPaymentMethodFields({ payerFields, hideCardTerms, idealWarning, }: {
+    payerFields?: PayerFields;
+    hideCardTerms?: boolean;
+    idealWarning?: boolean;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/components/PaymentTile.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+/**
+ * A payment method tile, styled by the appearance's `.Tab` rules like the tabs of Stripe's Payment
+ * Element. Two layouts: a tile (icon above label, for a grid of two) and a `compact` row (icon, label
+ * and tags on one line, a check on the right when selected) for longer lists.
+ *
+ * Without `selected` the tile is not a choice but a card in a list (managing saved payment methods):
+ * it renders no button. `action` (a saved method's menu) sits in the top right corner, or at the end of
+ * a row; on a tile that is a choice it sits over the tile's button rather than inside it.
+ */
+export default function PaymentTile({ selected, compact, disabled, icon, label, tags, action, onClick, }: {
+    selected?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    icon: ReactNode;
+    label: ReactNode;
+    /** Shown next to the label: `Default`, `Failed`. */
+    tags?: ReactNode;
+    action?: ReactNode;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+/** CardImage's SVGs are 70x48; shrink them to the icon height of the other tiles. */
+export declare const CardBrand: any;

package/dist/cjs/types/src/components/PaymentMethods/components/PaymentTile.rules.d.ts

@@ -0,0 +1,57 @@
+import type { ResolvedVariables } from '../../../ui/appearance/variables';
+export declare function paymentTileRules(v: ResolvedVariables): {
+    internal: {
+        '.TabBase': {
+            display: string;
+            flexDirection: string;
+            alignItems: string;
+            gap: string;
+            boxSizing: string;
+            minHeight: string;
+            padding: string;
+            font: string;
+            fontSize: string;
+            lineHeight: string;
+            textAlign: string;
+            outline: string;
+            cursor: string;
+        };
+        '.TabBase:disabled': {
+            opacity: string;
+            cursor: string;
+        };
+        '.TabBase.Compact': {
+            flexDirection: string;
+            alignItems: string;
+            gap: string;
+            minHeight: string;
+            padding: string;
+        };
+        '.TabBase.Static': {
+            cursor: string;
+        };
+    };
+    public: {
+        '.Tab': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            fontWeight: string;
+            boxShadow: string;
+            transition: string;
+        };
+        '.Tab:hover': {
+            borderColor: string;
+            color: string;
+        };
+        '.Tab--selected': {
+            borderColor: string;
+            color: string;
+            boxShadow: string;
+        };
+        '.Tab:focus': {
+            boxShadow: string;
+        };
+    };
+};

package/dist/cjs/types/src/components/PaymentMethods/components/PaymentTileGroup.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type PaymentTileGroupItem = {
+    key: string;
+    selected?: boolean;
+    render: (compact: boolean) => ReactNode;
+};
+/**
+ * A group of payment tiles. Two options or fewer are a grid of two; three or more are compact rows,
+ * so a long list stays short in a narrow column: the first three rows (the caller puts the default
+ * first, and a selected row further down takes the third place), then "Show N more". `trailing` (the
+ * "New card" tile) is always the last row and always shown.
+ */
+export default function PaymentTileGroup({ labelId, 'aria-label': ariaLabel, items, trailing, }: {
+    labelId?: string;
+    'aria-label'?: string;
+    items: PaymentTileGroupItem[];
+    trailing?: (compact: boolean) => ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/components/PluginTiles.d.ts

@@ -0,0 +1,6 @@
+/** One tile per payment plugin. Picking one pays with a new card on it. */
+export default function PluginTiles({ labelId, 'aria-label': ariaLabel, disabled, }: {
+    labelId?: string;
+    'aria-label'?: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/components/SavedPaymentMethodTiles.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { SavedPaymentMethod } from '../contexts/PaymentMethodsContext';
+/**
+ * One tile per saved payment method (card brand and last digits, the default one first), then a
+ * "New card" tile. `renderAction` gives each saved method an action (a menu). Without `selectable` the
+ * saved methods are cards to manage rather than choices: none is selected; "New card" still opens the
+ * form for a new one.
+ */
+export default function SavedPaymentMethodTiles({ labelId, 'aria-label': ariaLabel, disabled, renderAction, selectable, }: {
+    labelId?: string;
+    'aria-label'?: string;
+    disabled?: boolean;
+    renderAction?: (method: SavedPaymentMethod) => ReactNode;
+    selectable?: boolean;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/components/StripeElements.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+/**
+ * Always rendered so `useStripe()` / `useElements()` resolve below it; `stripe` is null until it loads.
+ * Stripe.js is loaded for the tenant's Stripe plugin once, with the current token (the flows never swap tokens).
+ *
+ * The group is set up for a deferred SetupIntent (created on submit), which is what lets the Payment
+ * Element render before any intent exists. Such a group needs its currency from the start, so Stripe
+ * is held back until there is one. Changes to the appearance or currency reach the mounted elements;
+ * `fonts` can't change after the group is created, so new fonts remount it.
+ */
+export default function StripeElements({ currency, children }: {
+    currency: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/components/StripePaymentElement.d.ts

@@ -0,0 +1,16 @@
+import type { PayerFields } from '../hooks/useStripePaymentMethodId';
+/**
+ * Stripe's Payment Element: one tab per payment method the tenant's Stripe account offers, styled
+ * through the Elements group's appearance (see `stripeAppearance`). With `payerFields`, the form
+ * around it collects the payer's name and email (and the country and postal code when `address`) and
+ * passes them on confirm, so the element doesn't ask for them again; without it the element asks for
+ * whatever the payment method needs. `hideCardTerms` drops the card mandate text when the form's own
+ * submit button carries the authorization. `idealWarning` tells the payer, the first time they pick
+ * iDEAL, that storing it costs a refunded cent. Read-only follows the antd Form it sits in, like the
+ * other inputs.
+ */
+export default function StripePaymentElement({ payerFields, hideCardTerms, idealWarning, }: {
+    payerFields?: PayerFields;
+    hideCardTerms?: boolean;
+    idealWarning?: boolean;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/constants/demoPayInputStyle.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from 'react';
+/**
+ * The size of an input inside DemoPay's card box: 44px rows, the text centred in them. Inline, so a
+ * customer's `.Input` padding can't push the text out of the box or grow its rows.
+ */
+export declare const DEMO_PAY_INPUT_STYLE: CSSProperties;

package/dist/cjs/types/src/components/PaymentMethods/contexts/DemoPayCardDetailsContext.d.ts

@@ -0,0 +1,10 @@
+export type DemoPayCardDetails = {
+    number: string;
+    expiry: string;
+    cvc: string;
+};
+declare const DemoPayCardDetailsProvider: ({ initialValue, children, }: {
+    initialValue?: DemoPayCardDetails | undefined;
+    children?: import("react").ReactNode;
+}) => import("react").JSX.Element, useDemoPayCardDetails: () => [DemoPayCardDetails, import("react").Dispatch<import("react").SetStateAction<DemoPayCardDetails>>];
+export { DemoPayCardDetailsProvider, useDemoPayCardDetails };

package/dist/cjs/types/src/components/PaymentMethods/contexts/PaymentMethodsContext.d.ts

@@ -0,0 +1,41 @@
+import { FragmentOf } from 'gql.tada';
+import { ReactNode } from 'react';
+import { PaymentPlugin } from '../utils/paymentPlugins';
+import { SavedPaymentMethodTiles_PaymentMethodFragment } from '../graphql/fragments/SavedPaymentMethodTiles_PaymentMethodFragment';
+export type SavedPaymentMethod = FragmentOf<typeof SavedPaymentMethodTiles_PaymentMethodFragment> & {
+    id: string;
+};
+type PaymentMethodsValue = {
+    plugins: PaymentPlugin[];
+    stripePlugin: PaymentPlugin | undefined;
+    /**
+     * The highlighted plugin: the one chosen, or the one owning the selected saved payment method
+     * (undefined when that plugin is not one of `plugins`).
+     */
+    selectedPlugin: PaymentPlugin | undefined;
+    selectedPluginName: string | undefined;
+    /** Choose a plugin and pay with a new card on it. */
+    setSelectedPluginId: (id: string) => void;
+    /** Payment methods already stored on the account, if there is one. */
+    savedPaymentMethods: SavedPaymentMethod[];
+    selectedSavedPaymentMethod: SavedPaymentMethod | undefined;
+    setSelectedSavedPaymentMethodId: (id: string) => void;
+    /** Drop the saved payment method and pay with a new card on the highlighted plugin. */
+    selectNewPaymentMethod: () => void;
+    /** Back to the default: the account's default saved method, or a new card on the first plugin. */
+    resetSelection: () => void;
+};
+declare const usePaymentMethods: () => PaymentMethodsValue;
+/**
+ * Which payment method to pay with: one of the account's saved payment methods, or a new one on one of
+ * the payment plugins we have a form for (plugins with any other frontend are left out). By default the
+ * account's default (or first) saved method is selected, otherwise a new card on the first plugin.
+ * Selecting a saved method highlights the plugin it belongs to; selecting a plugin switches to a new
+ * card on it.
+ */
+export declare function PaymentMethodsProvider({ plugins: allPlugins, savedPaymentMethods, children, }: {
+    plugins: PaymentPlugin[];
+    savedPaymentMethods?: SavedPaymentMethod[];
+    children: ReactNode;
+}): import("react").JSX.Element;
+export { usePaymentMethods };