@bunnyapp/components 1.8.6 → 2.0.0-beta.1

package/dist/esm/types/src/components/CheckoutShared/graphql/fragments/SuccessDisplay_QuoteFragment.d.ts

@@ -0,0 +1,18 @@
+export declare const SuccessDisplay_QuoteFragment: import("gql.tada").TadaDocumentNode<{
+    amountDue: number | null;
+    currencyId: string;
+    invoiceUntil: unknown;
+    quoteChanges: {
+        id: string | null;
+        isTrial: boolean;
+        trialEndDate: unknown;
+    }[] | null;
+    invoices: {
+        id: string | null;
+        amount: number;
+    }[] | null;
+}, {}, {
+    fragment: "SuccessDisplay_QuoteFragment";
+    on: "Quote";
+    masked: true;
+}>;

package/dist/esm/types/src/components/CheckoutShared/graphql/fragments/useCheckoutPriceList_PriceListFragment.d.ts

@@ -0,0 +1,15 @@
+/** The price list as the screen's units need it, plus what the flows key their quote and trial on. */
+export declare const useCheckoutPriceList_PriceListFragment: import("gql.tada").TadaDocumentNode<{
+    [$tada.fragmentRefs]: {
+        CheckoutSummary_PriceListFragment: "PriceList";
+    } & {
+        SuccessDisplay_PriceListFragment: "PriceList";
+    };
+    id: string;
+    code: string | null;
+    trialAllowed: boolean;
+}, {}, {
+    fragment: "useCheckoutPriceList_PriceListFragment";
+    on: "PriceList";
+    masked: true;
+}>;

package/dist/esm/types/src/components/CheckoutShared/graphql/mutations/priceListAmountDuePreview.d.ts

@@ -0,0 +1,53 @@
+import { VariablesOf } from 'gql.tada';
+declare const mutation: import("gql.tada").TadaDocumentNode<{
+    priceListAmountDuePreview: {
+        amountDue: number | null;
+        subtotal: number | null;
+        discountAmount: number | null;
+        taxAmount: number | null;
+        taxesCalculated: boolean;
+        currencyId: string | null;
+        quote: {
+            [$tada.fragmentRefs]: {
+                CheckoutSummary_QuoteFragment: "Quote";
+            };
+        } | null;
+        errors: string[] | null;
+    } | null;
+}, {
+    trial?: boolean | null | undefined;
+    couponCode?: string | null | undefined;
+    billingDetails?: {
+        taxNumber?: string | null | undefined;
+        billingZip?: string | null | undefined;
+        billingStreet?: string | null | undefined;
+        billingState?: string | null | undefined;
+        billingCountry?: string | null | undefined;
+        billingContactEmail?: string | null | undefined;
+        billingCity?: string | null | undefined;
+    } | null | undefined;
+    priceListCode: string;
+}, void>;
+export type PriceListAmountDuePreviewVariables = VariablesOf<typeof mutation>;
+/**
+ * First-period amount due for a price list, priced by the API without touching any account. Taxes are
+ * calculated only once `billingDetails` holds every field the taxation plugin requires for the country (see `taxesCalculated`).
+ */
+declare const priceListAmountDuePreview: ({ token, apiHost, ...variables }: PriceListAmountDuePreviewVariables & {
+    token?: string;
+    apiHost: string;
+}) => Promise<{
+    amountDue: number | null;
+    subtotal: number | null;
+    discountAmount: number | null;
+    taxAmount: number | null;
+    taxesCalculated: boolean;
+    currencyId: string | null;
+    quote: {
+        [$tada.fragmentRefs]: {
+            CheckoutSummary_QuoteFragment: "Quote";
+        };
+    } | null;
+    errors: string[] | null;
+} | null>;
+export default priceListAmountDuePreview;

package/dist/esm/types/src/components/CheckoutShared/graphql/mutations/taxationRequiredAccountFields.d.ts

@@ -0,0 +1,10 @@
+/** Account fields the tenant's taxation plugin needs for a billing country, before any account exists. */
+declare const taxationRequiredAccountFields: ({ token, apiHost, countryCode, }: {
+    token?: string;
+    apiHost: string;
+    countryCode?: string;
+}) => Promise<{
+    fields: string[] | null;
+    errors: string[] | null;
+} | null>;
+export default taxationRequiredAccountFields;

package/dist/esm/types/src/components/{Signup → CheckoutShared/graphql}/queries/getPriceList.d.ts

@@ -4,7 +4,7 @@ declare const getPriceList: ({ token, code, apiHost, }: {
     apiHost: string;
 }) => Promise<{
     [$tada.fragmentRefs]: {
-        Signup_PriceListFragment: "PriceList";
+        useCheckoutPriceList_PriceListFragment: "PriceList";
     };
 } | null>;
 export default getPriceList;

package/dist/esm/types/src/components/CheckoutShared/hooks/useAmountDuePreview.d.ts

@@ -0,0 +1,33 @@
+import type { FragmentOf } from 'gql.tada';
+import { CheckoutSummary_QuoteFragment } from '../graphql/fragments/CheckoutSummary_QuoteFragment';
+import type { CheckoutBillingDetails } from '../utils/billingDetails';
+/** The API's first-period pricing: subtotal - discountAmount + taxAmount == amountDue. */
+export type AmountDuePreview = {
+    amountDue: number;
+    subtotal: number;
+    discountAmount: number;
+    taxAmount: number;
+    /** False until the billing details hold every field the taxation plugin needs (or when no plugin applies): the amounts are untaxed. */
+    taxesCalculated: boolean;
+    currencyId: string;
+    /** The unsaved quote behind the amounts; the summary's line items come from it. */
+    quote: FragmentOf<typeof CheckoutSummary_QuoteFragment>;
+};
+/**
+ * Keeps the amount due up to date without touching any account: previews on mount and again whenever
+ * the billing details, coupon or trial change. The previous answer stays on screen while the next one
+ * loads, and counts as pending while a typed field is still debouncing. A failed preview is reported by
+ * the query client's global error handler.
+ */
+export declare function useAmountDuePreview({ priceListCode, billingDetails, couponCode, trial, enabled, }: {
+    priceListCode: string;
+    billingDetails: Partial<CheckoutBillingDetails>;
+    couponCode?: string;
+    trial?: boolean;
+    enabled?: boolean;
+}): {
+    preview: NoInfer<AmountDuePreview> | undefined;
+    isPending: boolean;
+    hasResolvedOnce: boolean;
+    isError: boolean;
+};

package/dist/esm/types/src/components/CheckoutShared/hooks/useCheckoutBillingDetails.d.ts

@@ -0,0 +1,3 @@
+import type { CheckoutDefaultValues } from '../contexts/CheckoutConfigContext';
+/** The live billing details in the form; `fallback` fills a field until it mounts. */
+export declare function useCheckoutBillingDetails(fallback?: CheckoutDefaultValues): Partial<import("../utils/billingDetails").CheckoutBillingDetails>;

package/dist/esm/types/src/components/CheckoutShared/hooks/useCheckoutFieldValue.d.ts

@@ -0,0 +1,3 @@
+import type { CheckoutFormValues } from '../contexts/CheckoutConfigContext';
+/** The live value of one checkout form field. `undefined` until the field mounts; an empty string once cleared. */
+export declare function useCheckoutFieldValue<Name extends keyof CheckoutFormValues>(name: Name): CheckoutFormValues[Name] | undefined;

package/dist/esm/types/src/components/CheckoutShared/hooks/useCheckoutFormSubmit.d.ts

@@ -0,0 +1,16 @@
+import { CheckoutFormValues } from '../contexts/CheckoutConfigContext';
+import { CheckoutResult } from '../contexts/CheckoutResultContext';
+/**
+ * What submitting the checkout form has in common across the flows, once antd has validated it:
+ * layer the consumer's defaults under the entered values (fields that aren't shown still describe
+ * the account), run the flow's checkout and publish its result. Errors are toasted by the query
+ * client's global handler.
+ */
+export declare function useCheckoutFormSubmit({ mutationKey, checkout, onError, }: {
+    mutationKey: readonly string[];
+    checkout: (values: CheckoutFormValues) => Promise<CheckoutResult>;
+    onError?: () => void;
+}): {
+    submit: (values: CheckoutFormValues) => void;
+    isProcessing: boolean;
+};

package/dist/esm/types/src/components/CheckoutShared/hooks/useCheckoutPriceList.d.ts

@@ -0,0 +1,14 @@
+/** The price list being bought, and whether this checkout will start a trial on it. */
+export declare function useCheckoutPriceList(): {
+    priceList: {
+        [$tada.fragmentRefs]: {
+            CheckoutSummary_PriceListFragment: "PriceList";
+        } & {
+            SuccessDisplay_PriceListFragment: "PriceList";
+        };
+        id: string;
+        code: string | null;
+        trialAllowed: boolean;
+    } | null | undefined;
+    willBeTrial: boolean;
+};

package/dist/esm/types/src/components/CheckoutShared/hooks/useFocusFirstField.d.ts

@@ -0,0 +1,2 @@
+/** Focuses the first editable input inside the returned element on mount, so the user can start typing right away. */
+export declare function useFocusFirstField<T extends HTMLElement>(): import("react").RefObject<T>;

package/dist/esm/types/src/components/CheckoutShared/hooks/useTaxRequiredFields.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Resolves the checkout form's fields from the consumer's `requiredBillingDetails` and the fields the
+ * taxation plugin needs for the chosen country. Keeps the previous answer while a new country is
+ * fetched so fields don't flicker.
+ */
+export declare function useTaxRequiredFields(countryCode: string | undefined): {
+    fields: import("../utils/resolveCheckoutFields").CheckoutFields;
+    isFetched: boolean;
+};

package/dist/esm/types/src/components/CheckoutShared/utils/amountPaid.d.ts

@@ -0,0 +1,7 @@
+/** What the checkout charged: the first invoice's amount, or the quote's amount due when no invoice was raised. */
+export declare const amountPaid: (quote: {
+    invoices?: readonly {
+        amount?: number | null;
+    }[] | null;
+    amountDue?: number | null;
+}) => number;

package/dist/esm/types/src/components/CheckoutShared/utils/billingDetails.d.ts

@@ -0,0 +1,14 @@
+import type { Payer } from '../../PaymentMethods/hooks/useStripePaymentMethodId';
+import type { CheckoutFormValues } from '../contexts/CheckoutConfigContext';
+/** The form's address and tax fields, as the API's `BillingDetailsAttributes`. */
+export type CheckoutBillingDetails = Pick<CheckoutFormValues, 'billingCountry' | 'billingZip' | 'billingStreet' | 'billingCity' | 'billingState' | 'taxNumber'>;
+/**
+ * Maps form values to `billingDetails`. The amount due preview and the signup both send this, so taxes
+ * are previewed from exactly the address that is signed up with.
+ */
+export declare const billingDetailsFromValues: (values: Partial<CheckoutFormValues>) => Partial<CheckoutBillingDetails>;
+/**
+ * The payer fields the form collects instead of Stripe's Payment Element (see `PayerFields`): the name
+ * on the card and the email, plus the country and postal code when the form has a country field.
+ */
+export declare const payerFromValues: (values: CheckoutFormValues, hasCountryField: boolean) => Payer;

package/dist/esm/types/src/components/CheckoutShared/utils/compactValues.d.ts

@@ -0,0 +1,6 @@
+type Compacted<T> = {
+    [K in keyof T]?: Exclude<T[K], null | undefined>;
+};
+/** Drops the null, undefined and empty-string entries, so an unset field is neither sent nor prefilled. */
+export declare const compactValues: <T extends object>(values: T) => Compacted<T>;
+export {};

package/dist/esm/types/src/components/CheckoutShared/utils/nextBillingDate.d.ts

@@ -0,0 +1,8 @@
+/** The day after the trial ends, or else the day after the quote's invoiced period ends (ISO8601Date scalars are untyped, hence `unknown`). */
+export declare const nextBillingDate: (quote: {
+    invoiceUntil?: unknown;
+    quoteChanges?: readonly {
+        isTrial?: boolean | null;
+        trialEndDate?: unknown;
+    }[] | null;
+}) => string | undefined;

package/dist/esm/types/src/components/CheckoutShared/utils/planName.d.ts

@@ -0,0 +1,6 @@
+export declare const planName: (priceList: {
+    name: string;
+    product?: {
+        name: string;
+    } | null;
+}) => string;

package/dist/esm/types/src/components/CheckoutShared/utils/quoteCharges.d.ts

@@ -0,0 +1,25 @@
+/** Every charge across the quote's changes. */
+export declare const quoteCharges: <Charge>(quote: {
+    quoteChanges?: readonly {
+        charges?: readonly Charge[] | null;
+    }[] | null;
+}) => Charge[];
+/** The code of the coupon the API applied to the quote, if any. */
+export declare const quoteCouponCode: (quote: {
+    quoteChanges?: readonly {
+        charges?: readonly {
+            coupon?: {
+                couponCode?: string | null;
+            } | null;
+        }[] | null;
+    }[] | null;
+}) => string | undefined;
+/** The total discount from the quote's coupon charges, which carry it as a positive subtotal. */
+export declare const quoteCouponDiscount: (quote: {
+    quoteChanges?: readonly {
+        charges?: readonly {
+            subtotal?: number | null;
+            coupon?: unknown;
+        }[] | null;
+    }[] | null;
+}) => number;

package/dist/esm/types/src/components/CheckoutShared/utils/resolveCheckoutFields.d.ts

@@ -0,0 +1,16 @@
+import { RequiredBillingDetailsFlags, CheckoutFormValues } from '../contexts/CheckoutConfigContext';
+export type CheckoutFieldName = Exclude<keyof CheckoutFormValues, 'nameOnCard'>;
+export type CheckoutFieldRule = {
+    visible: boolean;
+    required: boolean;
+};
+export type CheckoutFields = Record<CheckoutFieldName, CheckoutFieldRule>;
+/**
+ * Which account fields the checkout form shows and requires. Email always; country only when taxation
+ * needs it; every other field when the consumer flags it in `requiredBillingDetails` or taxation
+ * needs it. A shown field is always required.
+ */
+export declare function resolveCheckoutFields({ requiredBillingDetails, taxRequiredFields, }: {
+    requiredBillingDetails?: RequiredBillingDetailsFlags;
+    taxRequiredFields: readonly string[];
+}): CheckoutFields;

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

@@ -1,8 +1,10 @@
 export type DocumentPreviewFullscreenApi = {
     toggleFullScreen: () => void;
 };
-declare const DocumentTemplatePreview: ({ targetUrl, onFullscreenApiChange, }: {
+declare const DocumentTemplatePreview: ({ targetUrl, version, onFullscreenApiChange, }: {
     targetUrl: string;
+    /** Anything that changes when the document does; a new value fetches the PDF again. */
+    version?: string;
     onFullscreenApiChange?: (api: DocumentPreviewFullscreenApi | null) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DocumentTemplatePreview;

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

@@ -1,7 +1,6 @@
-declare const DrawerHeader: ({ description, onClose, title, closeButtonClassName, }: {
+/** A drawer's title with a description under it. The drawer draws the close button beside it. */
+declare const DrawerHeader: ({ description, title }: {
     description?: string;
-    onClose?: () => void;
     title: string;
-    closeButtonClassName?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DrawerHeader;

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

@@ -1,5 +1,6 @@
+/** A screen with nothing to show: the message as the page's title. */
 declare const ErrorView: ({ children, message, }: {
     children?: React.ReactNode;
     message: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ErrorView;

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

@@ -30,5 +30,5 @@ declare const FeatureUsageGraph: ({ charge: maskedCharge, featureUsage: maskedFe
     charge: FragmentOf<typeof FeatureUsageGraph_SubscriptionChargeFragment>;
     featureUsage: FragmentOf<typeof FeatureUsageGraph_HistogramFragment>;
     useAreaChart?: boolean;
-}) => import("react/jsx-runtime").JSX.Element | "no usage" | null;
+}) => import("react").JSX.Element | "no usage" | null;
 export default FeatureUsageGraph;

package/dist/esm/types/src/components/Footer/BunnyFooterIcon.d.ts

@@ -1,4 +1,2 @@
-declare const BunnyFooterIcon: ({ color }: {
-    color: string;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const BunnyFooterIcon: () => import("react").JSX.Element;
 export default BunnyFooterIcon;

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

@@ -1,4 +1,9 @@
-declare const Footer: ({ className }: {
+import type { CSSProperties } from 'react';
+import { type Appearance } from '../../ui/appearance';
+declare const Footer: ({ className, style, appearance, }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+    style?: CSSProperties;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
+}) => import("react").JSX.Element;
 export default Footer;

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

@@ -0,0 +1,25 @@
+import type { ResolvedVariables } from '../../ui/appearance/variables';
+export declare function footerRules(v: ResolvedVariables): {
+    internal: {
+        '.Footer .Link': {
+            fontSize: string;
+            color: string;
+        };
+        '.Footer .Link:hover': {
+            color: string;
+        };
+        '.Footer .Link .TextSecondary': {
+            color: string;
+        };
+        '.FooterIcon path': {
+            transition: string;
+        };
+    };
+    public: {
+        '.Footer': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+};

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Footer from './Footer';
+declare const meta: Meta<typeof Footer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Mobile: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

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

@@ -1,2 +1,2 @@
-declare const HeaderModalWrapper: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const HeaderModalWrapper: (props: any) => import("react").JSX.Element;
 export default HeaderModalWrapper;

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

@@ -1,7 +1,13 @@
+import { type CSSProperties } from 'react';
 import { InvoiceQuoteContextProps } from '../../contexts/InvoiceQuoteContext';
+import { type Appearance } from '../../ui/appearance';
 export type InvoiceProps = InvoiceQuoteContextProps & {
     hidePaymentForm?: boolean;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => 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 Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, }: InvoiceProps): import("react/jsx-runtime").JSX.Element;
+export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, style, appearance, }: InvoiceProps): import("react").JSX.Element;

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

@@ -0,0 +1,52 @@
+import type { ResolvedVariables } from '../../ui/appearance/variables';
+export declare function invoiceRules(v: ResolvedVariables): {
+    internal: {
+        '.InvoiceBase': {
+            boxSizing: string;
+            lineHeight: string;
+        };
+        '.InvoiceHtml': {
+            color: string;
+            backgroundColor: string;
+        };
+        '.Drawer .InvoiceHtml': {
+            color: string;
+        };
+        '.Modal .InvoiceHtml': {
+            color: string;
+        };
+        '.InvoiceMarkup span': {
+            width: string;
+        };
+        '.Link.ButtonLink.BackButton': {
+            color: string;
+        };
+        '.Link.ButtonLink.BackButton:hover': {
+            color: string;
+        };
+        '.TextSecondary.BackButtonText': {
+            color: string;
+        };
+        '.DownloadIcon': {
+            color: string;
+            transition: string;
+        };
+        '.ButtonBase:hover .DownloadIcon': {
+            color: string;
+        };
+        '.Invoice .ButtonSecondary--compact': {
+            padding: string;
+        };
+    };
+    public: {
+        '.Invoice .ButtonSecondary': {
+            borderWidth: string;
+            borderColor: string;
+            color: string;
+        };
+        '.Invoice': {
+            color: string;
+            fontFamily: string;
+        };
+    };
+};

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

@@ -8,10 +8,9 @@ export declare const basicArgs: {
     id: string;
 };
 export declare const Default: Story;
-export declare const NoShadow: Story;
 export declare const CustomBackButton: Story;
 export declare const Mobile: Story;
-export declare const CustomClassName: Story;
 export declare const HideDownloadButton: Story;
 export declare const InvoiceDue: Story;
-export declare const DarkMode: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/Invoice/InvoiceQuoteView/DownloadQuoteButton.d.ts

@@ -1,5 +1,5 @@
 type DownloadQuoteButtonProps = {
     id?: string | null;
 };
-declare const DownloadQuoteButton: ({ id }: DownloadQuoteButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const DownloadQuoteButton: ({ id }: DownloadQuoteButtonProps) => import("react").JSX.Element;
 export default DownloadQuoteButton;

package/dist/esm/types/src/components/Invoice/InvoiceQuoteView/InvoiceQuoteView.d.ts

@@ -4,5 +4,5 @@ type InvoiceQuoteViewOnlyProps = {
     targetUrl?: string;
     onDocumentPreviewFullscreenApiChange?: (api: DocumentPreviewFullscreenApi | null) => void;
 };
-declare const InvoiceQuoteView: ({ html, targetUrl, onDocumentPreviewFullscreenApiChange, }: InvoiceQuoteViewOnlyProps) => import("react/jsx-runtime").JSX.Element;
+declare const InvoiceQuoteView: ({ html, targetUrl, onDocumentPreviewFullscreenApiChange, }: InvoiceQuoteViewOnlyProps) => import("react").JSX.Element;
 export default InvoiceQuoteView;

package/dist/esm/types/src/components/Invoice/InvoiceQuoteView/InvoiceQuoteViewWithButtons.d.ts

@@ -10,5 +10,5 @@ declare const InvoiceQuoteViewWithButtons: ({ children, formattedInvoice, html,
     onDownloadError?: () => void;
     targetUrl?: string;
     onDocumentPreviewFullscreenApiChange?: (api: DocumentPreviewFullscreenApi | null) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default InvoiceQuoteViewWithButtons;

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

@@ -1,4 +1,4 @@
 export default function LegacyDocument({ documentUuid, documentType, }: {
     documentUuid: string;
     documentType: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -3,5 +3,5 @@ interface PandadocPollingModalProps {
     setVisible: (visible: boolean) => void;
     id?: string | null | undefined;
 }
-declare const PandadocPollingModal: ({ isVisible, setVisible, id }: PandadocPollingModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const PandadocPollingModal: ({ isVisible, setVisible, id }: PandadocPollingModalProps) => import("react").JSX.Element;
 export default PandadocPollingModal;

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

@@ -1,13 +1,13 @@
-import { FragmentOf, ResultOf } from 'gql.tada';
+import { FragmentOf } from 'gql.tada';
 import type { ComponentProps } from 'react';
 import { ReactNode } from 'react';
 import { CheckoutNoPayment } from './components/CheckoutNoPayment';
+import { NoPaymentPluginsAlert } from './components/NoPaymentPluginsAlert';
 import { Pay } from './components/Pay';
 import { PaymentMethodDetails } from './components/PaymentMethodDetails/PaymentMethodDetails';
 import { StoredPaymentMethods } from './components/StoredPaymentMethods';
-import { PaymentForm_PaymentMethodsFragment } from './fragments/PaymentForm_PaymentMethodsFragment';
+import { PaymentMethodFragment } from './context/CallbacksContext';
 import { PaymentForm_QuoteFragment } from './fragments/PaymentForm_QuoteFragment';
-type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
 export declare const PaymentForm_InvoiceFragment: import("gql.tada").TadaDocumentNode<{
     id: string | null;
     currencyId: string;
@@ -37,22 +37,27 @@ declare function PaymentFormRoot({ currencyId: accountCurrencyId, invoice: maske
     accountId?: string;
     customCheckoutFunction?: (pluginId: string, paymentMethodId: string) => Promise<any>;
     children?: ReactNode | ((state: PaymentFormRenderState) => ReactNode);
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").JSX.Element | null;
 type PaymentFormProps = ComponentProps<typeof PaymentFormRoot>;
 export type PaymentFormRenderState = {
     hasPaymentMethods: boolean;
+    /** The new payment method form is open: "New card" is chosen, or there is no saved method. */
     isPaymentMethodDetailsOpen: boolean;
     isPayableAvailable: boolean;
     amountDue: number | undefined;
+    /** Payment plugins with a payment form (Stripe, DemoPay); undefined until they have loaded. */
     paymentPluginsCount: number | undefined;
+    /** The saved payment method `Pay` will use, or undefined when a new one is entered. */
+    selectedPaymentMethodId: string | undefined;
 };
 declare function PaymentFormInternal(props: PaymentFormProps & {
     disablePayButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare const PaymentForm: typeof PaymentFormInternal & {
     StoredPaymentMethods: typeof StoredPaymentMethods;
     Pay: typeof Pay;
     CheckoutNoPayment: typeof CheckoutNoPayment;
     PaymentMethodDetails: typeof PaymentMethodDetails;
+    NoPaymentPluginsAlert: typeof NoPaymentPluginsAlert;
 };
 export {};

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ComponentProps } from 'react';
+import type { Appearance } from '@/ui/appearance';
+import { PaymentForm } from './PaymentForm';
+type Args = ComponentProps<typeof PaymentForm> & {
+    /** PaymentForm has no `appearance` of its own: it follows the provider's (or the screen it sits in). */
+    appearance?: Appearance;
+};
+declare const meta: Meta<Args>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Paying an invoice with the account's one saved card. */
+export declare const Default: Story;
+export declare const Mobile: Story;
+export declare const NoSavedCards: Story;
+export declare const TwoSavedCards: Story;
+/** Three options or more are compact rows: three cards, "Show 2 more", then "New card". */
+export declare const FiveSavedCards: Story;
+/** With more than one plugin, "New card" leads to a choice of plugin. */
+export declare const TwoPlugins: Story;
+export declare const ThreePlugins: Story;
+export declare const SavedCardsAndThreePlugins: Story;
+/** No invoice or quote: managing the saved cards, one of which failed. */
+export declare const ManageSavedCards: Story;
+export declare const ManageNoSavedCards: Story;
+/** Approving a payment hold for a quote, as the quote's "Pay and sign" modal does. */
+export declare const PaymentHold: Story;
+/**
+ * The compound pieces in an order of the caller's own: the new card form first, the saved cards
+ * under it, then a line reading the render state, then Pay. The pieces coordinate through the
+ * form, not by being next to each other.
+ */
+export declare const CustomComposition: Story;
+/**
+ * Only the new card form, with Pay in its footer. With saved cards but no tiles to choose from, the
+ * form stays closed behind "Add payment method", so Pay shows once a new card is chosen.
+ */
+export declare const DetailsWithoutStoredPaymentMethods: Story;
+/**
+ * No saved card tiles: Pay uses the default saved card until "Add payment method" opens the new card
+ * form, which Pay then stores and pays with; Cancel goes back to the default card.
+ */
+export declare const WithoutStoredPaymentMethods: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;
+export declare const LedgerFiveSavedCards: Story;
+export declare const MidnightFiveSavedCards: Story;
+export declare const LedgerManageSavedCards: Story;
+export declare const MidnightManageSavedCards: Story;

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