@bunnyapp/components 1.8.0-beta.56 → 1.8.0-beta.58

package/dist/cjs/types/src/components/BillingDetails/BillingDetails.d.ts

@@ -1,5 +1,5 @@
-import '../../styles/index.less';
-declare const BillingDetails: ({ countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isUpgradeFromTrial, style, onSavePaymentMethod, onPaymentMethodRemoved, }: {
+import { type Appearance } from '../../ui/appearance';
+declare const BillingDetails: ({ countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isUpgradeFromTrial, style, className, appearance, onSavePaymentMethod, onPaymentMethodRemoved, }: {
     countryListFilter?: (country: {
         value: string;
         label: string;
@@ -8,6 +8,9 @@ declare const BillingDetails: ({ countryListFilter, hideBillingDetailsForm, hide
     hidePaymentMethodForm?: boolean;
     isUpgradeFromTrial?: boolean;
     style?: React.CSSProperties;
+    className?: string;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
     onSavePaymentMethod?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => import("react").JSX.Element;

package/dist/cjs/types/src/components/BillingDetails/BillingDetails.rules.d.ts

@@ -0,0 +1,85 @@
+import type { ResolvedVariables } from '../../ui/appearance/variables';
+export declare function billingDetailsRules(v: ResolvedVariables): {
+    internal: {
+        '.BillingDetailsBase': {
+            display: string;
+            flexDirection: string;
+        };
+        '.Link.ButtonLink.AddContactButton': {
+            padding: string;
+            borderRadius: string;
+            color: string;
+            transition: string;
+        };
+        '.Link.ButtonLink.AddContactButton:hover': {
+            backgroundColor: string;
+            color: string;
+        };
+        '.TaxIdHint': {
+            color: string;
+            cursor: string;
+        };
+        '.BillingDetails .Field': {
+            marginBottom: string;
+        };
+        '.BillingDetails .Label': {
+            fontWeight: string;
+            color: string;
+            paddingLeft: string;
+            marginBottom: string;
+        };
+        '.BillingDetails .Input': {
+            borderWidth: string;
+        };
+        '.BillingDetails .Input--compact': {
+            paddingTop: string;
+            paddingBottom: string;
+            paddingLeft: string;
+        };
+        '.BillingDetails .Divider': {
+            margin: string;
+        };
+        '.BillingDetails .Divider.Vertical': {
+            margin: string;
+        };
+        '.AddContactModal .Field': {
+            marginBottom: string;
+        };
+        '.AddContactModal .Label': {
+            fontWeight: string;
+            paddingTop: string;
+            paddingLeft: string;
+            marginBottom: string;
+        };
+        '.AddContactModal .Input': {
+            borderWidth: string;
+        };
+        '.AddContactModal .Input--compact': {
+            padding: string;
+        };
+        '.AddContactModal .ButtonSecondary': {
+            borderWidth: string;
+        };
+        '.AddContactModal .ButtonSecondary--compact': {
+            padding: string;
+        };
+        '.AddContactModal .Button--compact': {
+            padding: string;
+        };
+    };
+    public: {
+        '.BillingDetails .Heading': {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        '.BillingDetails': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            backgroundColor: string;
+            borderRadius: string;
+            boxShadow: string;
+        };
+    };
+};

package/dist/cjs/types/src/components/BillingDetails/BillingDetails.stories.d.ts

@@ -5,8 +5,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Mobile: Story;
-export declare const DarkMode: Story;
 export declare const HidePaymentMethodForm: Story;
 export declare const HideBillingDetailsForm: Story;
 export declare const HideBothForms: Story;
-export declare const PrideTheme: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/components/BunnyProvider/BunnyProvider.d.ts

@@ -1,15 +1,13 @@
 import { QueryClient } from '@tanstack/react-query';
-import { ThemeConfig } from 'antd';
+import type { Appearance } from '../../ui/appearance/types';
 export type BunnyContextValues = {
     apiHost: string;
     token?: string;
-    darkMode?: boolean;
     onTokenExpired?: () => void;
 };
 export declare const BunnyContext: import("react").Context<BunnyContextValues>;
-declare function BunnyProvider({ children, darkMode, queryClient, apiHost, token, onTokenExpired, onUserUnavailable, onInvalidOrMissingAuthorization, suppressUserUnavailableErrorNotification, disableErrorNotifications, configProviderProps, }: {
+declare function BunnyProvider({ children, queryClient, apiHost, token, onTokenExpired, onUserUnavailable, onInvalidOrMissingAuthorization, suppressUserUnavailableErrorNotification, disableErrorNotifications, appearance, }: {
     children: React.ReactNode;
-    darkMode?: boolean;
     queryClient?: QueryClient;
     apiHost: string;
     token?: string;
@@ -18,6 +16,7 @@ declare function BunnyProvider({ children, darkMode, queryClient, apiHost, token
     onInvalidOrMissingAuthorization?: () => void;
     suppressUserUnavailableErrorNotification?: boolean;
     disableErrorNotifications?: boolean;
-    configProviderProps?: ThemeConfig | undefined;
+    /** Restyles every component rendered inside the provider; a component's own `appearance` is merged over it. See "Styling components" in the package README. */
+    appearance?: Appearance;
 }): import("react").JSX.Element;
 export default BunnyProvider;

package/dist/cjs/types/src/components/Checkout/Checkout.stories.d.ts

@@ -8,8 +8,6 @@ export declare const DisabledFields: Story;
 export declare const WithDocumentTemplate: Story;
 export declare const StoredPaymentMethod: Story;
 export declare const Mobile: Story;
-export declare const DarkMode: Story;
 export declare const Ledger: Story;
+export declare const ProviderAppearance: Story;
 export declare const Midnight: Story;
-export declare const LedgerMobile: Story;
-export declare const MidnightMobile: Story;

package/dist/cjs/types/src/components/Checkout/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Checkout } from './Checkout';
 export type { CheckoutProps } from './Checkout';
 export type { CheckoutCallbacks, CheckoutDefaultValues, CheckoutDisabledFields, CheckoutFormOptions, RequiredBillingDetailsFlags, } from '../CheckoutShared/contexts/CheckoutConfigContext';
-export type * from '../CheckoutShared/appearance/types';
+export type * from '../../ui/appearance/types';

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutForm/PaymentFields.d.ts

@@ -1,7 +1,8 @@
 /**
  * Plugin tiles (when there is more than one to choose from), saved payment method tiles plus
  * "New card" (when the account has any), then the form for a new payment method: the payer's name
- * and Stripe's Payment Element (which brings its own labels), or DemoPay's card box. A selected
- * saved method needs neither.
+ * and Stripe's Payment Element, or DemoPay's card box. A selected saved method needs neither. The
+ * form collects the payer's name and email (and the country when taxation needs it) itself, and the
+ * Pay button carries the card authorization text, so the Payment Element asks for neither.
  */
 export default function PaymentFields(): import("react").JSX.Element;

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutRoot.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Appearance } from '../appearance';
+import { type Appearance } from '../../../ui/appearance';
 import { CheckoutCallbacks, CheckoutFormOptions } from '../contexts/CheckoutConfigContext';
 /** The props Signup and Checkout share. */
 export type CheckoutFlowProps = {
@@ -9,10 +9,10 @@ export type CheckoutFlowProps = {
     /** A custom style to apply to the component */
     style?: React.CSSProperties;
     /**
-     * Restyles the screen, modelled on Stripe's Appearance API: `variables` (colors, font, radius) feed the
-     * default rules, `rules` override them per selector (`.Input`, `.Tab`, `.Button`, ...), and `fonts` are
-     * loaded by the payment fields. The payment provider's fields follow it too. Signup and Checkout take
-     * the same prop. See "Styling Signup and Checkout" in the package README.
+     * Restyles this screen on top of `BunnyProvider`'s `appearance`: `variables` (colors, font, radius) feed the
+     * default rules, `rules` override them per selector (`.Input`, `.Tab`, `.Button`, ...), and `fonts` are loaded
+     * by the payment fields. The payment provider's fields follow it too. Signup and Checkout take the same prop.
+     * See "Styling components" in the package README.
      */
     appearance?: Appearance;
     /** Form configuration: default values, optional fields to show and disabled fields */

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutScreen.d.ts

@@ -1,6 +1,6 @@
 import { FragmentOf } from 'gql.tada';
 import { ReactNode } from 'react';
-import { CheckoutSavedPaymentMethod } from '../contexts/CheckoutPaymentMethodsContext';
+import { SavedPaymentMethod } from '../../PaymentMethods/contexts/PaymentMethodsContext';
 import { CheckoutQuoteDocument_QuoteFragment } from '../graphql/fragments/CheckoutQuoteDocument_QuoteFragment';
 /**
  * The split-screen page: the summary (or the receipt once there is a result) on the left, the flow's
@@ -17,7 +17,7 @@ export default function CheckoutScreen({ style, form, savedPaymentMethods, isFlo
     style?: React.CSSProperties;
     form: ReactNode;
     /** Payment methods already stored on the account, if the flow has one. */
-    savedPaymentMethods?: CheckoutSavedPaymentMethod[];
+    savedPaymentMethods?: SavedPaymentMethod[];
     /** Anything else the flow has to load before the first paint. */
     isFlowReady?: boolean;
     /** Render the quote PDF under the summary and receipt. Checkout-only for now. */

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutScreen.rules.d.ts

@@ -1,5 +1,5 @@
-import type { RuleContext } from '../appearance/ruleGroups';
-import type { ResolvedVariables } from '../appearance/variables';
+import type { RuleContext } from '../../../ui/appearance/ruleGroups';
+import type { ResolvedVariables } from '../../../ui/appearance/variables';
 export declare function screenRules(v: ResolvedVariables, { isMobile }: RuleContext): {
     internal: {
         '.Screen': {
@@ -21,43 +21,9 @@ export declare function screenRules(v: ResolvedVariables, { isMobile }: RuleCont
         '.Overlay .Spinner': {
             color: string;
         };
-        '.Text': {
-            color: string;
-            fontSize: string;
-        };
-        '.TextSecondary': {
-            color: string;
-        };
-        '.TextSuccess': {
-            color: string;
-        };
-        '.Heading': {
-            margin: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
-        };
         '.Separator': {
             color: string;
         };
-        '.Divider': {
-            margin: string;
-            border: string;
-            borderTop: string;
-        };
-        '.Link': {
-            color: string;
-            textDecoration: string;
-            transition: string;
-        };
-        '.Link:hover': {
-            color: string;
-        };
-        '.Link:focus-visible': {
-            borderRadius: string;
-            outline: string;
-            outlineOffset: string;
-        };
         '.BackLink': {
             width: string;
             height: string;
@@ -86,6 +52,9 @@ export declare function screenRules(v: ResolvedVariables, { isMobile }: RuleCont
             outlineOffset: string;
             outline: string;
         };
+        '.Disclosure .TextSecondary': {
+            fontSize: string;
+        };
         '.Details': {
             border: string;
             borderRadius: string;
@@ -93,6 +62,12 @@ export declare function screenRules(v: ResolvedVariables, { isMobile }: RuleCont
         '.Details > div + div': {
             borderTop: string;
         };
+        '.QuoteDownload .ButtonSecondary': {
+            borderWidth: string;
+        };
+        '.QuoteDownload .ButtonSecondary--compact': {
+            padding: string;
+        };
         '.SuccessIcon': {
             width: string;
             height: string;
@@ -100,26 +75,24 @@ export declare function screenRules(v: ResolvedVariables, { isMobile }: RuleCont
             backgroundColor: string;
             color: string;
         };
-        '.Document': {
-            borderRadius: string;
+    };
+    public: {
+        '.Summary .Divider': {
+            borderTop: string;
         };
-        '.Placeholder': {
-            height: string;
+        '.Form .Divider': {
+            borderTop: string;
+        };
+        '.Summary .Amount--display': {
+            fontSize: string;
+        };
+        '.Summary .Document': {
+            padding: string;
             borderRadius: string;
             backgroundColor: string;
+            boxShadow: string;
         };
-    };
-    shared: {};
-    block: {
-        /**
-         * The summary column's content: header, amount, line items, totals. Bunny only. No default rule; the
-         * content is capped at `36rem` with `4rem` padding (`1.5rem` on phones): change it with `maxWidth` and `padding`.
-         */
         '.Summary': {};
-        /**
-         * The form column's content: the form, or the confirmation after checkout. Bunny only. No default rule;
-         * capped and padded like `.Summary`.
-         */
         '.Form': {};
     };
 };

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

@@ -1,3 +1,4 @@
+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'>;
@@ -6,3 +7,8 @@ export type CheckoutBillingDetails = Pick<CheckoutFormValues, 'billingCountry' |
  * 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/cjs/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.Element;
 export default DrawerHeader;

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

@@ -1,3 +1,4 @@
+/** A screen with nothing to show: the message as the page's title. */
 declare const ErrorView: ({ children, message, }: {
     children?: React.ReactNode;
     message: string;

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

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

package/dist/cjs/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;
+    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/cjs/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/cjs/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/cjs/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.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/cjs/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/cjs/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/cjs/types/src/components/PaymentForm/PaymentForm.d.ts

@@ -1,4 +1,4 @@
-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';
@@ -6,9 +6,8 @@ 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;
@@ -42,10 +41,14 @@ declare function PaymentFormRoot({ currencyId: accountCurrencyId, invoice: maske
 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;

package/dist/cjs/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/cjs/types/src/components/PaymentForm/components/CouponEditor.d.ts

@@ -1,8 +1,7 @@
 /**
- * Note: the Signup / Checkout screen (`CheckoutShared`) deliberately has its own coupon editor
- * (`CheckoutCouponEditor`) instead of reusing this view. That keeps the two loosely coupled, since
- * that screen is styled by its `appearance` rather than by antd; only the coupon hooks are shared,
- * so expect the two views to diverge.
+ * 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, }: {

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;

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

@@ -2,5 +2,11 @@ type PayProps = {
     disabled?: boolean;
     onClickPrecondition?: () => boolean | Promise<boolean>;
 };
+/**
+ * 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.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.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;