@bunnyapp/components 1.8.0-beta.55 → 1.8.0-beta.57

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/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/esm/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/esm/types/src/components/{PaymentForm/DemoPay → PaymentMethods/components}/DemoPayCardCvc.d.ts

@@ -1,4 +1,5 @@
-declare const DemoPayCardCvc: ({ autoFocus, onChange, placeholder, value, }: {
+declare const DemoPayCardCvc: ({ "aria-label": ariaLabel, autoFocus, onChange, placeholder, value, }: {
+    "aria-label"?: string;
     autoFocus?: boolean;
     onChange: (cvc: string) => void;
     placeholder?: string;

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

@@ -1,4 +1,5 @@
-declare const DemoPayCardNumber: ({ autoFocus, onChange, placeholder, value, }: {
+declare const DemoPayCardNumber: ({ "aria-label": ariaLabel, autoFocus, onChange, placeholder, value, }: {
+    "aria-label"?: string;
     autoFocus?: boolean;
     onChange: (number: string) => void;
     placeholder?: string;

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

@@ -1,4 +1,5 @@
-declare const DemoPayExpiry: ({ autoFocus, onChange, placeholder, value, }: {
+declare const DemoPayExpiry: ({ "aria-label": ariaLabel, autoFocus, onChange, placeholder, value, }: {
+    "aria-label"?: string;
     autoFocus?: boolean;
     onChange: (cvc: string) => void;
     placeholder?: string;

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/PaymentForm/DemoPay/DemoPayFormProvider.d.ts → esm/types/src/components/PaymentMethods/contexts/DemoPayCardDetailsContext.d.ts}

@@ -3,8 +3,8 @@ export type DemoPayCardDetails = {
     expiry: string;
     cvc: string;
 };
-declare const DemoPayFormProvider: ({ initialValue, children, }: {
+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 { DemoPayFormProvider, useDemoPayCardDetails };
+export { DemoPayCardDetailsProvider, useDemoPayCardDetails };

package/dist/esm/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 };

package/dist/esm/types/src/components/PaymentMethods/graphql/fragments/SavedPaymentMethodTiles_PaymentMethodFragment.d.ts

@@ -0,0 +1,18 @@
+export declare const SavedPaymentMethodTiles_PaymentMethodFragment: import("gql.tada").TadaDocumentNode<{
+    [$tada.fragmentRefs]: {
+        CardImage_PaymentMethodFragment: "PaymentMethod";
+    };
+    id: string;
+    pluginId: string | null;
+    isDefault: boolean | null;
+    state: "FAILED" | "UNKNOWN" | "SUCCESS" | null;
+    failureReason: string | null;
+    metadata: {
+        issuer: string | null;
+        identifier: string | null;
+    } | null;
+}, {}, {
+    fragment: "SavedPaymentMethodTiles_PaymentMethodFragment";
+    on: "PaymentMethod";
+    masked: true;
+}>;

package/dist/esm/types/src/components/PaymentMethods/hooks/useLoadStripe.d.ts

@@ -0,0 +1,4 @@
+import { PluginData } from '@/types/frontendTypes';
+import type { Stripe } from '@stripe/stripe-js';
+/** Loads Stripe.js for a Stripe payment plugin. Re-runs when the plugin or token changes. */
+export declare const useLoadStripe: (plugin: PluginData | undefined, token: string | undefined) => Stripe | null;

package/dist/esm/types/src/components/PaymentMethods/hooks/useNewPaymentMethod.d.ts

@@ -0,0 +1,16 @@
+import { PaymentPlugin } from '../utils/paymentPlugins';
+import { Payer } from './useStripePaymentMethodId';
+/** A payment method entered in the form, ready for the plugin to store: a Stripe payment method token or DemoPay's card metadata. */
+export type NewPaymentMethod = {
+    plugin: PaymentPlugin;
+    token?: string;
+    metadata?: Record<string, string>;
+};
+/**
+ * Turns what was entered in the selected plugin's payment form into something the API can store.
+ * `payer` is what the form collected itself (see `PayerFields`).
+ */
+export declare function useNewPaymentMethod(): ({ payer, accountId, }?: {
+    payer?: Payer;
+    accountId?: string;
+}) => Promise<NewPaymentMethod>;

package/dist/esm/types/src/components/PaymentMethods/hooks/useStripePaymentMethodId.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The payer fields a form collects itself instead of the Payment Element: always the name and email,
+ * and the country and postal code when `address`.
+ */
+export type PayerFields = {
+    address: boolean;
+};
+/** What the form collected for `PayerFields`, passed to Stripe on confirm. */
+export type Payer = {
+    name?: string;
+    email?: string;
+    /** Only when the form has the address fields. */
+    address?: {
+        country?: string;
+        postalCode?: string;
+    };
+};
+/**
+ * Sets the payment method in the Payment Element up in the browser (SetupIntent + confirmSetup,
+ * which runs any 3DS challenge) and returns the Stripe payment method id. Without an account,
+ * Stripe's customer is provisioned from the payer's email. Every field the element was told not to
+ * collect (`payerFields`) has to come in `payer`.
+ */
+export declare function useStripePaymentMethodId(): ({ payer, accountId, }: {
+    payer?: Payer;
+    accountId?: string;
+}) => Promise<string>;

package/dist/esm/types/src/components/PaymentMethods/utils/demoPayCard.d.ts

@@ -0,0 +1,12 @@
+export declare const isDigit: (char: string) => boolean;
+export declare const isValidKey: (code: number) => boolean;
+export declare const formatCardExpiry: (cardExpiry: string) => string;
+/** A complete expiry (`MMYY`) that can't be used, so the field shows it before the card is submitted. */
+export declare const isExpiryInvalid: (expiry: string) => boolean;
+/** Removes the spaces from a card number. */
+export declare const unformatCardNumber: (cardNumber: string) => string;
+/** Throws when the DemoPay card can't be submitted. */
+export declare function validateDemoPayCard(card: {
+    expiry: string;
+    cvc: string;
+}): void;

package/dist/esm/types/src/components/PaymentMethods/utils/paymentPlugins.d.ts

@@ -0,0 +1,9 @@
+import usePaymentPlugins from '@/hooks/usePaymentPlugins';
+import { PluginData } from '@/types/frontendTypes';
+export type PaymentPlugin = ReturnType<typeof usePaymentPlugins>['paymentPlugins'][number];
+export declare const STRIPE_FRONTEND = "StripePayment";
+export declare const DEMO_PAY_FRONTEND = "DemoPayPayment";
+/** The `paymentPlugins` GraphQL row doesn't share a type with the legacy `PluginData` the plugin helpers expect. */
+export declare const asPluginData: (plugin: PaymentPlugin) => PluginData;
+export declare const pluginFrontendName: (plugin: PaymentPlugin | undefined) => string | undefined;
+export declare const isSupportedPlugin: (plugin: PaymentPlugin) => boolean;

package/dist/esm/types/src/components/PaymentMethods/utils/storeNewPaymentMethod.d.ts

@@ -0,0 +1,14 @@
+import type { NewPaymentMethod } from '../hooks/useNewPaymentMethod';
+/**
+ * Stores a payment method entered in the form on the account through its plugin. Returns the stored
+ * payment method's id and the token the plugin answers with.
+ */
+export declare function storeNewPaymentMethod({ paymentMethod, accountId, token, apiHost, }: {
+    paymentMethod: NewPaymentMethod;
+    accountId: string | undefined;
+    token?: string;
+    apiHost: string;
+}): Promise<{
+    id: string;
+    token: string | undefined;
+}>;

package/dist/esm/types/src/components/PaymentMethods/utils/stripeAppearance.d.ts

@@ -0,0 +1,9 @@
+import type { Appearance as StripeAppearance, StripeElementsOptions } from '@stripe/stripe-js';
+import type { ResolvedAppearance } from '@/ui/appearance/resolveAppearance';
+/** The resolved appearance in Stripe's terms, so the Payment Element is drawn like the form's own fields. */
+export declare function toStripeAppearance({ variables, customerVariables, rules, sharedSelectors, pageFontFamily, }: ResolvedAppearance): StripeAppearance;
+/** `appearance` and `fonts` for Stripe's `<Elements>`. `fonts` can't change once the group is created. */
+export declare function useStripeAppearance(): {
+    appearance: StripeAppearance;
+    fonts: NonNullable<StripeElementsOptions['fonts']>;
+};

package/dist/esm/types/src/components/Quote/Quote.d.ts

@@ -1,5 +1,7 @@
 import { ResultOf } from 'gql.tada';
+import { type CSSProperties } from 'react';
 import { InvoiceQuoteContextProps } from '../../contexts/InvoiceQuoteContext';
+import { type Appearance } from '../../ui/appearance';
 export declare const Quote_PaymentHoldFragment: import("gql.tada").TadaDocumentNode<{
     quote: {
         currentPaymentHold: {
@@ -31,6 +33,10 @@ type QuoteProps = InvoiceQuoteContextProps & {
     onQuoteUnavailableError?: () => void;
     suppressQuoteUnavailableErrorNotification?: boolean;
     onQuoteLoaded?: (formattedQuote: ResultOf<typeof OnQuoteLoadedFragment>) => void;
+    /** A custom style to apply to the component */
+    style?: CSSProperties;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
 };
-export default function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, onQuoteLoaded, onQuoteAccepted, onQuoteUnavailableError, suppressQuoteUnavailableErrorNotification, }: QuoteProps): import("react").JSX.Element;
+export default function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, className, hideDownloadButton, onQuoteLoaded, onQuoteAccepted, onQuoteUnavailableError, suppressQuoteUnavailableErrorNotification, style, appearance, }: QuoteProps): import("react").JSX.Element;
 export {};

package/dist/esm/types/src/components/Quote/Quote.rules.d.ts

@@ -0,0 +1,54 @@
+import type { ResolvedVariables } from '../../ui/appearance/variables';
+export declare function quoteRules(v: ResolvedVariables): {
+    internal: {
+        '.Quote .ButtonSecondary--compact': {
+            padding: string;
+        };
+        '.Quote .Button--compact': {
+            padding: string;
+        };
+        '.QuoteModal': {
+            borderRadius: string;
+            padding: string;
+            overflow: string;
+        };
+        '.QuoteModal.PaymentHoldModal': {
+            borderRadius: string;
+        };
+        '.QuoteModal .Field': {
+            marginBottom: string;
+        };
+        '.QuoteModal .Label': {
+            fontWeight: string;
+            paddingTop: string;
+            paddingLeft: string;
+            marginBottom: string;
+        };
+        '.QuoteModal .Input': {
+            borderWidth: string;
+        };
+        '.QuoteModal .Input--compact': {
+            padding: string;
+        };
+        '.QuoteModal .ButtonSecondary': {
+            borderWidth: string;
+        };
+        '.QuoteModal .ButtonSecondary--compact': {
+            padding: string;
+        };
+        '.QuoteModal .Button--compact': {
+            padding: string;
+        };
+    };
+    public: {
+        '.Quote .ButtonSecondary': {
+            borderWidth: string;
+            borderColor: string;
+            color: string;
+        };
+        '.Quote': {
+            color: string;
+            fontFamily: string;
+        };
+    };
+};

package/dist/esm/types/src/components/Quote/Quote.stories.d.ts

@@ -4,10 +4,8 @@ declare const meta: Meta<typeof Quote>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const NoShadow: Story;
 export declare const Mobile: Story;
-export declare const CustomClassName: Story;
 export declare const HideDownloadButton: Story;
 export declare const AcceptedQuote: Story;
-export declare const AcceptedQuoteDarkMode: Story;
-export declare const DarkMode: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;