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

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

@@ -0,0 +1,144 @@
+import type { AppearanceRules } from './rules';
+/**
+ * The values the default look is built from: set one when a change should carry through everything
+ * built from it. Names follow Stripe's Appearance API; the ones Stripe has too are handed to the
+ * payment fields as they are. Every variable is optional, and literal values only (no `var()`).
+ */
+export type AppearanceVariables = {
+    /**
+     * The primary button, text links, the selected payment method, focused borders, the loading spinner.
+     * Its hover and pressed shades and the default focus ring are derived from it, so use a plain color.
+     * @default antd `colorPrimary` (your Bunny brand color)
+     */
+    colorPrimary?: string;
+    /**
+     * The form column, inputs and payment method tiles.
+     * @default antd `colorBgContainer` (white; dark in dark mode)
+     */
+    colorBackground?: string;
+    /**
+     * Body text and input text.
+     * @default antd `colorText`
+     */
+    colorText?: string;
+    /**
+     * Muted text: the "Subscribe to" line, footer links, the back arrow.
+     * @default antd `colorTextSecondary`
+     */
+    colorTextSecondary?: string;
+    /**
+     * Placeholders, the empty country select and its chevron.
+     * @default antd `colorTextPlaceholder`
+     */
+    colorTextPlaceholder?: string;
+    /**
+     * Invalid field borders and error messages.
+     * @default antd `colorError`
+     */
+    colorDanger?: string;
+    /**
+     * Discount amounts and the success check (its tint and strong shade are derived from it, so use a plain color).
+     * @default antd `colorSuccess`
+     */
+    colorSuccess?: string;
+    /**
+     * All text on the screen. The payment fields can't inherit your page's font: declare web fonts in `fonts`.
+     * @default `'inherit'` (your page's font)
+     */
+    fontFamily?: string;
+    /**
+     * Body, input and button text. On phones, input text is raised to 16px when this is a smaller `px` value.
+     * @default antd `fontSize` (`14px`)
+     */
+    fontSizeBase?: string;
+    /**
+     * Corners of inputs, payment method tiles and buttons.
+     * @default antd `borderRadius` (`4px`)
+     */
+    borderRadius?: string;
+    /**
+     * Vertical space between form rows.
+     * @default `'20px'`
+     */
+    gridRowSpacing?: string;
+    /**
+     * The ring around a focused input or payment method.
+     * @default `0 0 0 2px` in a tint of `colorPrimary`
+     * @example '0 0 0 3px rgba(20, 83, 45, 0.25)'
+     */
+    focusBoxShadow?: string;
+    /**
+     * The summary column and the loading overlay.
+     * @default `'#f8fafc'` (dark mode: `'#121212'`)
+     */
+    colorBackgroundSummary?: string;
+    /**
+     * Borders of inputs, payment method tiles and secondary buttons; also dividers, when set.
+     * @default antd `colorBorder`
+     */
+    colorBorder?: string;
+    /**
+     * Width of those borders and of the dividers.
+     * @default `'2px'`
+     */
+    borderWidth?: string;
+};
+export type RuleProperty = 'color' | 'backgroundColor' | 'border' | 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'boxShadow' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'textTransform' | 'textDecoration' | 'transition' | 'outline' | 'outlineOffset';
+/** What a rule can set: the CSS properties (camelCase) a payment provider's hosted fields accept too. */
+export type AppearanceRuleStyle = Partial<Record<RuleProperty, string>>;
+/** Rules for elements only we draw can also size them. */
+export type AppearanceBlockStyle = AppearanceRuleStyle & Partial<Record<'background' | 'maxWidth' | 'minHeight' | 'opacity', string>>;
+/** Selector → style override. The selectors come from the rule sources' public groups (see `rules.ts`). */
+export type { AppearanceRules };
+/**
+ * A font the payment provider's fields must load themselves (they render in an iframe and can't see
+ * your page's fonts): a stylesheet of `@font-face` rules, or one font file. Your page loads its own copy.
+ */
+export type AppearanceFont = {
+    /** URL of a stylesheet of `@font-face` rules, such as a Google Fonts link. */
+    cssSrc: string;
+} | {
+    /** The name to use in `fontFamily`. */
+    family: string;
+    /** The font file, as a CSS `src` value: `url(https://...)`. */
+    src: string;
+    /** CSS `font-weight`, such as `'400'` or `'400 700'`. */
+    weight?: string;
+    /** CSS `font-style`. */
+    style?: 'normal' | 'italic' | 'oblique';
+    /** CSS `font-display`. */
+    display?: string;
+    /** CSS `unicode-range`. */
+    unicodeRange?: string;
+};
+/**
+ * Restyles the Signup and Checkout screens, modelled on Stripe's Appearance API: `variables` feed the
+ * default rules, your `rules` are merged over them selector by selector, and `fonts` are loaded by the
+ * payment fields. The payment provider's fields follow the shared rules too. See "Styling Signup and
+ * Checkout" in the package README.
+ * @example
+ * <Signup
+ *   priceListCode="..."
+ *   appearance={{
+ *     variables: { colorPrimary: '#14532d', colorBackgroundSummary: '#f6f1e7', borderRadius: '0px' },
+ *     rules: {
+ *       '.Label': { textTransform: 'uppercase', letterSpacing: '0.08em' },
+ *       '.Input:focus': { borderColor: '#14532d', boxShadow: '0 0 0 1px #14532d' },
+ *       '.Button': { backgroundColor: '#1c1917', padding: '14px 16px' },
+ *     },
+ *     fonts: [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600&display=swap' }],
+ *   }}
+ * />
+ */
+export type Appearance = {
+    /** The values the default rules are built from. */
+    variables?: AppearanceVariables;
+    /** Per-selector overrides, merged over the defaults property by property. Literal values only. */
+    rules?: AppearanceRules;
+    /**
+     * Fonts the payment fields load in their iframe. Set them once, up front: changing them after the
+     * payment form mounts remounts it and clears what was typed.
+     * @example [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap' }]
+     */
+    fonts?: AppearanceFont[];
+};

package/dist/cjs/types/src/components/CheckoutShared/appearance/variables.d.ts

@@ -0,0 +1,29 @@
+import { type GlobalToken } from 'antd';
+import type { AppearanceVariables } from './types';
+/** Every variable, plus the shades the default rules need that customers don't set. */
+type VariablesAndShades = Required<AppearanceVariables> & {
+    colorPrimaryHover: string;
+    colorPrimaryActive: string;
+    colorOnPrimary: string;
+    colorTextDisabled: string;
+    colorBackgroundDisabled: string;
+    colorBorderSecondary: string;
+    colorFill: string;
+    colorDivider: string;
+    colorSuccessBackground: string;
+    colorSuccessStrong: string;
+    boxShadowPane: string;
+    boxShadowPaneStacked: string;
+};
+/** The variables and shades, plus values built from them that several rule sources share. */
+export type ResolvedVariables = VariablesAndShades & {
+    controlBorder: string;
+    controlTransition: string;
+    focusOutline: {
+        outline: string;
+        outlineOffset: string;
+    };
+};
+/** Our defaults with the customer's variables over them, and every shade derived from the result. */
+export declare function resolveVariables(token: GlobalToken, darkMode: boolean, customer?: AppearanceVariables): ResolvedVariables;
+export {};

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

@@ -0,0 +1,4 @@
+/** "Powered by bunny. | Terms  Privacy", muted like the summary's line item details. */
+export default function CheckoutFooter({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutForm/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/cjs/types/src/components/CheckoutShared/components/CheckoutForm/CheckoutFields.d.ts

@@ -0,0 +1,9 @@
+export declare function EmailField(): import("react").JSX.Element;
+/** The name on the card or bank account being set up with Stripe. */
+export declare function PayerNameField(): import("react").JSX.Element;
+export declare function CountryField(): import("react").JSX.Element;
+/**
+ * The remaining account fields, each shown only when `useCheckoutFields` says so. Pairs share a
+ * row, so a lone field of a pair fills it.
+ */
+export declare function ExtraFields(): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { CheckoutFormValues } from '../../contexts/CheckoutConfigContext';
+/**
+ * The whole right column: email → payment method / payer name / payment details (hidden when nothing is
+ * due) → country (only when taxation needs it) → opt-in fields → Pay. What submitting does is
+ * up to the flow.
+ */
+export default function CheckoutForm({ onSubmit, isProcessing, }: {
+    onSubmit: (values: CheckoutFormValues) => void;
+    isProcessing: boolean;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutForm/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 PaymentForm's antd ones (test-only, not themed by the appearance); the box around
+ * them is.
+ */
+export default function DemoPayCardBox(): import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function demoPayCardBoxRules(v: ResolvedVariables): {
+    internal: {
+        '.InputGroup': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            overflow: string;
+            transition: string;
+        };
+        '.InputGroup:has(.ant-input-status-error)': {
+            borderColor: string;
+        };
+        '.InputGroup:hover': {
+            borderColor: string;
+        };
+        '.InputGroup:focus-within': {
+            borderColor: string;
+            boxShadow: string;
+        };
+        '.InputGroup > * + *': {
+            borderTop: string;
+        };
+        '.InputGroupRow > * + *': {
+            borderLeft: string;
+        };
+    };
+    shared: {};
+    block: {};
+};

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

@@ -0,0 +1,24 @@
+import { type FormRule } from 'antd';
+import type { ReactElement, ReactNode } from 'react';
+import { CheckoutFormValues } from '../../contexts/CheckoutConfigContext';
+/**
+ * One row of the form without a value of its own (the payment method tiles, Stripe's Payment
+ * Element): an optional label over the content. Give the label an id to name a group with it.
+ */
+export declare function FormRow({ label, labelId, children }: {
+    label?: ReactNode;
+    labelId?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A form field: label, control and validation messages, all our own elements so the appearance's
+ * `.Label` and `.Error` rules apply to them directly. antd's `Form.Item` only does the wiring
+ * (`noStyle`, so it renders nothing itself): it hands the control its `id` (the field name, as the
+ * form is unnamed), `value`, `onChange`, `aria-invalid` and `aria-describedby="<name>_help"`.
+ */
+export default function Field({ name, label, rules, children, }: {
+    name: keyof CheckoutFormValues;
+    label: string;
+    rules?: FormRule[];
+    children: ReactElement;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,44 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function fieldRules(v: ResolvedVariables): {
+    internal: {
+        '.Fieldset': {
+            minWidth: string;
+            margin: string;
+            padding: string;
+            border: string;
+        };
+        '.Field': {
+            marginBottom: string;
+        };
+        '.LabelBase': {
+            display: string;
+            width: string;
+            lineHeight: string;
+        };
+        '.ErrorBase': {
+            marginTop: string;
+            lineHeight: string;
+        };
+    };
+    shared: {
+        /**
+         * Field labels, on Bunny's fields and the payment provider's alike.
+         * @default 14px, weight 500, `colorText`, 6px below
+         */
+        '.Label': {
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+            marginBottom: string;
+        };
+        /**
+         * Validation messages under a field, on Bunny's fields and the payment provider's alike.
+         * @default 14px, `colorDanger`
+         */
+        '.Error': {
+            fontSize: string;
+            color: string;
+        };
+    };
+    block: {};
+};

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

@@ -0,0 +1,8 @@
+/**
+ * "Pay $50.00" with the amount due (or "Start trial" on a trial, "Complete order" when nothing is due), with the authorization text
+ * under it. Disabled only until the amount due first resolves and while a recalculation (e.g. taxes)
+ * is in flight; an incomplete form stays submittable so that submitting shows what is missing.
+ */
+export default function PayButton({ isProcessing }: {
+    isProcessing: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export default function PaymentFields(): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes } from 'react';
+/**
+ * An equal-width selectable tile: icon above label, the selected one outlined in the primary color.
+ * Styled by the appearance's `.Tab` rules, like the tabs of Stripe's Payment Element.
+ */
+export default function PaymentTile({ selected, ...props }: {
+    selected: boolean;
+} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'>): 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/CheckoutShared/components/CheckoutForm/PaymentTile.rules.d.ts

@@ -0,0 +1,53 @@
+import type { ResolvedVariables } from '../../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;
+            textAlign: string;
+            outline: string;
+            cursor: string;
+        };
+        '.TabBase:disabled': {
+            opacity: string;
+            cursor: string;
+        };
+    };
+    shared: {
+        /**
+         * Payment method tiles: Bunny's own and the payment provider's tabs.
+         * @default `borderWidth` solid `colorBorder`, `colorBackground`, weight 500
+         */
+        '.Tab': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            fontWeight: string;
+            boxShadow: string;
+            transition: string;
+        };
+        /** A payment method tile under the pointer. Forwarded to the payment provider. @default `colorPrimary`'s hover shade border */
+        '.Tab:hover': {
+            borderColor: string;
+            color: string;
+        };
+        /** The chosen payment method. Forwarded to the payment provider (its `color` also tints Stripe's tab icon). @default `colorPrimary` border and text */
+        '.Tab--selected': {
+            borderColor: string;
+            color: string;
+            boxShadow: string;
+        };
+        /** A focused payment method tile, selected or not. Forwarded to the payment provider. @default `focusBoxShadow` */
+        '.Tab:focus': {
+            boxShadow: string;
+        };
+    };
+    block: {};
+};

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

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

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

@@ -0,0 +1,4 @@
+/** One tile per saved payment method (card brand and last digits), then a "New card" tile. */
+export default function SavedPaymentMethodTiles({ labelId }: {
+    labelId: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+/**
+ * Stripe's Payment Element: one tab per payment method the tenant's Stripe account offers, styled
+ * through the Elements group's appearance (see `appearance/adapters/stripe`). The name, email,
+ * country and postal code come from the form's own fields and are passed on confirm, so the element
+ * doesn't ask for them again; without a country field it asks for the country and postal code itself.
+ * Read-only follows the antd Form it sits in, like the other inputs.
+ */
+export default function StripePaymentElement(): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+/** Covers the page until the price list, plugins, branding and first amount due have all arrived. */
+export default function CheckoutLoadingOverlay({ visible, style }: {
+    visible: boolean;
+    style?: React.CSSProperties;
+}): React.JSX.Element | null;

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

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { Appearance } from '../appearance';
+import { CheckoutCallbacks, CheckoutFormOptions } from '../contexts/CheckoutConfigContext';
+/** The props Signup and Checkout share. */
+export type CheckoutFlowProps = {
+    priceListCode: string;
+    /** If trial is allowed on the price list, enableTrial will enable the trial for this checkout */
+    enableTrial?: boolean;
+    /** 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.
+     */
+    appearance?: Appearance;
+    /** Form configuration: default values, optional fields to show and disabled fields */
+    form?: CheckoutFormOptions;
+    /** A default coupon code to pre-apply to the checkout */
+    defaultCouponCode?: string;
+    /** Callbacks fired at key lifecycle events */
+    callbacks?: CheckoutCallbacks;
+};
+/** The providers both flows mount, in one order: config, form instance, result, then the appearance. */
+export default function CheckoutRoot({ priceListCode, enableTrial, form, defaultCouponCode, callbacks, appearance, children, }: Omit<CheckoutFlowProps, 'style'> & {
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { FragmentOf } from 'gql.tada';
+import { ReactNode } from 'react';
+import { CheckoutSavedPaymentMethod } from '../contexts/CheckoutPaymentMethodsContext';
+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
+ * form (or the success panel) on the right, under the loading overlay until everything the first
+ * paint needs has arrived. The flow renders the pricing provider above this and passes its form in;
+ * the payment methods, Stripe elements and DemoPay details the form's submit hook
+ * needs are all set up here.
+ *
+ * The quote PDF is Checkout-only for now (`showQuoteDocument`; Signup never renders it). When a
+ * document template is configured it goes under the summary: the composed quote before the checkout,
+ * and the checked-out quote under the receipt afterwards.
+ */
+export default function CheckoutScreen({ style, form, savedPaymentMethods, isFlowReady, showQuoteDocument, quote: pendingQuote, }: {
+    style?: React.CSSProperties;
+    form: ReactNode;
+    /** Payment methods already stored on the account, if the flow has one. */
+    savedPaymentMethods?: CheckoutSavedPaymentMethod[];
+    /** 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. */
+    showQuoteDocument?: boolean;
+    /** The quote the flow will check out, if it exists before paying. Its PDF is shown under the summary. */
+    quote?: FragmentOf<typeof CheckoutQuoteDocument_QuoteFragment>;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,125 @@
+import type { RuleContext } from '../appearance/ruleGroups';
+import type { ResolvedVariables } from '../appearance/variables';
+export declare function screenRules(v: ResolvedVariables, { isMobile }: RuleContext): {
+    internal: {
+        '.Screen': {
+            backgroundColor: string;
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.FormPane': {
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        '.Overlay': {
+            inset: string;
+            zIndex: string;
+            backgroundColor: string;
+        };
+        '.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;
+            marginLeft: string;
+            borderRadius: string;
+            color: string;
+            transition: string;
+        };
+        '.BackLink:hover': {
+            color: string;
+            backgroundColor: string;
+        };
+        '.BackLink:focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
+        '.Disclosure': {
+            minHeight: string;
+            border: string;
+            borderRadius: string;
+            background: string;
+            color: string;
+            font: string;
+        };
+        '.Disclosure:focus-visible': {
+            outlineOffset: string;
+            outline: string;
+        };
+        '.Details': {
+            border: string;
+            borderRadius: string;
+        };
+        '.Details > div + div': {
+            borderTop: string;
+        };
+        '.SuccessIcon': {
+            width: string;
+            height: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+        };
+        '.Document': {
+            borderRadius: string;
+        };
+        '.Placeholder': {
+            height: string;
+            borderRadius: string;
+            backgroundColor: 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/components/CheckoutSplitScreenContainer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Desktop: the summary on the left (the screen's own background), the form on the right in its pane,
+ * separated by a soft shadow. Each column's content hugs the center line and both start at the top.
+ * Mobile: the columns stack.
+ */
+export default function CheckoutSplitScreenContainer({ left, right, isMobile, }: {
+    left: React.ReactNode;
+    right: React.ReactNode;
+    isMobile: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+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 the first amount due preview brings 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 CheckoutStripeElements({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutSummary/CheckoutCouponEditor.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The "Have a coupon code?" link and its inline input. Once the coupon is applied the summary shows
+ * a Discount row instead of this; an invalid code is dropped by the flow, which leaves the input open.
+ *
+ * Deliberately not PaymentForm's `CouponEditorView`: this screen is styled by its appearance, not by
+ * antd. The two share only the coupon logic the flows put behind `useCheckoutPricing`.
+ */
+export default function CheckoutCouponEditor(): import("react").JSX.Element;