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

package/dist/index.d.ts

@@ -255,80 +255,754 @@ declare const PaymentForm: typeof PaymentFormInternal & {
     NoPaymentPluginsAlert: typeof NoPaymentPluginsAlert;
 };
 
-type DefaultSignupValues = {
+/** What a rule source can read besides the variables. */
+type RuleContext = {
+    isMobile: boolean;
+};
+
+/** 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. */
+type ResolvedVariables = VariablesAndShades & {
+    controlBorder: string;
+    controlTransition: string;
+    focusOutline: {
+        outline: string;
+        outlineOffset: string;
+    };
+};
+
+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': {};
+    };
+};
+
+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: {};
+};
+
+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: {};
+};
+
+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: {};
+};
+
+declare function buttonRules(v: ResolvedVariables): {
+    internal: {
+        '.ButtonBase': {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            gap: string;
+            boxSizing: string;
+            margin: string;
+            padding: string;
+            fontFamily: string;
+            fontSize: string;
+            lineHeight: string;
+            textDecoration: string;
+            cursor: string;
+            transition: string;
+        };
+        '.ButtonBase:focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
+        '.ButtonBase:disabled': {
+            cursor: string;
+        };
+        '.ButtonBase--loading': {
+            opacity: string;
+            cursor: string;
+            pointerEvents: string;
+        };
+        '.ButtonBase.Compact': {
+            padding: string;
+        };
+        '.ButtonPlain': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+        };
+        '.ButtonPlain:hover': {
+            borderColor: string;
+            color: string;
+        };
+        '.ButtonPlain:disabled': {
+            borderColor: string;
+            backgroundColor: string;
+            color: string;
+        };
+        '.ButtonLink': {
+            minHeight: string;
+            padding: string;
+            border: string;
+            background: string;
+            color: string;
+        };
+        '.ButtonIcon': {
+            width: string;
+            height: string;
+            marginRight: string;
+            padding: string;
+            border: string;
+            borderRadius: string;
+            background: string;
+            color: string;
+        };
+        '.ButtonIcon:hover': {
+            backgroundColor: string;
+        };
+    };
+    shared: {};
+    block: {
+        /**
+         * The primary action (the pay button). Bunny only. Sized like `.Input`: change its height through `padding`.
+         * @default filled with `colorPrimary`, `10px 16px` padding
+         */
+        '.Button': {
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+        };
+        /** The primary button under the pointer. @default `colorPrimary`'s hover shade */
+        '.Button:hover': {
+            backgroundColor: string;
+        };
+        /** The primary button while pressed. @default `colorPrimary`'s pressed shade */
+        '.Button:active': {
+            backgroundColor: string;
+        };
+        /** The primary button when disabled. @default `rgba(113, 125, 148, 0.1)` fill */
+        '.Button:disabled': {
+            backgroundColor: string;
+            color: string;
+        };
+    };
+};
+
+declare function selectRules(v: ResolvedVariables): {
+    internal: {
+        '.Input.Select': {
+            paddingRight: string;
+            backgroundImage: string;
+            backgroundRepeat: string;
+            backgroundPosition: string;
+            cursor: string;
+        };
+        '.Menu': {
+            position: string;
+            zIndex: string;
+            top: string;
+            left: string;
+            right: string;
+            maxHeight: string;
+            overflowY: string;
+            margin: string;
+            padding: string;
+            listStyle: string;
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        '.Menu[data-placement="top"]': {
+            top: string;
+            bottom: string;
+        };
+        '.Option': {
+            padding: string;
+            borderRadius: string;
+            lineHeight: string;
+            color: string;
+            overflow: string;
+            textOverflow: string;
+            whiteSpace: string;
+            cursor: string;
+        };
+        '.Option[data-active="true"]': {
+            backgroundColor: string;
+        };
+        '.Option[aria-selected="true"]': {
+            fontWeight: string;
+        };
+        '.MenuEmpty': {
+            padding: string;
+            lineHeight: string;
+            color: string;
+        };
+    };
+    shared: {};
+    block: {};
+};
+
+declare function textInputRules(v: ResolvedVariables, { isMobile }: RuleContext): {
+    internal: {
+        '.InputBase': {
+            display: string;
+            boxSizing: string;
+            width: string;
+            margin: string;
+            fontFamily: string;
+            outline: string;
+            appearance: string;
+        };
+        '.InputBase:disabled': {
+            cursor: string;
+        };
+        '.Input.Compact': {
+            padding: string;
+        };
+    };
+    shared: {
+        /**
+         * Text inputs and the country select, on Bunny's fields and the payment provider's alike. There is no
+         * `height`: vertical padding + `lineHeight` + borders make it (44px by default), so raise the padding to grow both.
+         * @default `10px 12px` padding, `20px` line, `borderWidth` solid `colorBorder`
+         */
+        '.Input': {
+            border: string;
+            borderRadius: string;
+            padding: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            backgroundColor: string;
+            boxShadow: string;
+            transition: string;
+        };
+        /** A text input under the pointer. Forwarded to the payment provider. @default `colorPrimary`'s hover shade border */
+        '.Input:hover': {
+            borderColor: string;
+        };
+        /** A focused text input. Forwarded to the payment provider. @default `colorPrimary` border and `focusBoxShadow` */
+        '.Input:focus': {
+            borderColor: string;
+            boxShadow: string;
+        };
+        /**
+         * A text input that failed validation. Forwarded to the payment provider. The default clears the focus ring:
+         * set `boxShadow` to give it one.
+         * @default `colorDanger` border, no shadow
+         */
+        '.Input--invalid': {
+            borderColor: string;
+            boxShadow: string;
+        };
+        /** A disabled text input. Forwarded to the payment provider. */
+        '.Input:disabled': {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        /** Placeholder text. Forwarded to the payment provider. @default `colorTextPlaceholder` */
+        '.Input::placeholder': {
+            color: string;
+        };
+    };
+    block: {};
+};
+
+/**
+ * Every rule source. A selector belongs to one source (resolving throws in development otherwise), and
+ * a rule that overrides another uses a compound selector (`.Input.Select`), so the order here doesn't
+ * matter. Within a source, `internal` comes first, then `shared`, then `block`. The public types below
+ * derive from this list. Sources are `function` declarations so the emitted `.d.ts` refers to them by
+ * name and keeps their keys' JSDoc.
+ */
+declare const RULE_SOURCES: readonly [typeof screenRules, typeof fieldRules, typeof textInputRules, typeof selectRules, typeof demoPayCardBoxRules, typeof paymentTileRules, typeof buttonRules];
+type Source = ReturnType<(typeof RULE_SOURCES)[number]>;
+type UnionToIntersection<U> = (U extends unknown ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+type SharedGroups = UnionToIntersection<Source['shared']>;
+type BlockGroups = UnionToIntersection<Source['block']>;
+type AppearanceRules = {
+    [K in keyof SharedGroups]?: AppearanceRuleStyle;
+} & {
+    [K in keyof BlockGroups]?: AppearanceBlockStyle;
+};
+
+/**
+ * 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()`).
+ */
+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;
+};
+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. */
+type AppearanceRuleStyle = Partial<Record<RuleProperty, string>>;
+/** Rules for elements only we draw can also size them. */
+type AppearanceBlockStyle = AppearanceRuleStyle & Partial<Record<'background' | 'maxWidth' | 'minHeight' | 'opacity', string>>;
+
+/**
+ * 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.
+ */
+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' }],
+ *   }}
+ * />
+ */
+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[];
+};
+
+/** Every value the checkout form can hold. Only `email` is shown by default. */
+type CheckoutFormValues = {
+    email: string;
+    billingCountry: string;
+    billingZip?: string;
+    /** The payer's name on the card or bank account, Stripe only. Never sent to the API. */
+    nameOnCard?: string;
     firstName?: string;
     lastName?: string;
-    email?: string;
     accountName?: string;
-    billingCountry?: string;
-    billingState?: string;
-    billingCity?: string;
-    billingZip?: string;
     billingStreet?: string;
+    billingCity?: string;
+    billingState?: string;
     taxNumber?: string;
 };
-/** Extra account billing fields (shown in “Account billing details”) when the flag is true. */
+type CheckoutDefaultValues = Partial<Omit<CheckoutFormValues, 'nameOnCard'>>;
+/**
+ * Optional fields to show and require. Email is always shown; the taxation plugin can add country,
+ * state or others on top of these (see `resolveCheckoutFields`).
+ */
 type RequiredBillingDetailsFlags = {
-    billingCountry?: boolean;
-    billingState?: boolean;
+    firstName?: boolean;
+    lastName?: boolean;
+    accountName?: boolean;
+    billingStreet?: boolean;
     billingCity?: boolean;
+    billingState?: boolean;
     billingZip?: boolean;
-    billingStreet?: boolean;
     taxNumber?: boolean;
 };
-
+/** Fields that can be disabled. Same keys as `CheckoutDefaultValues`. */
+type CheckoutDisabledFields = Partial<Record<keyof CheckoutDefaultValues, boolean>>;
 /**
- * Customer-facing callbacks fired by the Signup component during its lifecycle.
- * All callbacks are optional. Add new events here rather than as new props on Signup.
+ * Customer-facing form configuration for the Signup and Checkout components.
+ * All options are optional. Add new form options here rather than as new props on the components.
  */
-type SignupCallbacks = {
-    onPaymentMethodSaved?: () => void;
-    onPaymentMethodRemoved?: () => void;
-    onQuoteAccepted?: (quoteId: string) => void;
-    onPaymentSuccess?: () => void;
-    onPaymentHoldSuccess?: () => void;
-};
-
-/** Fields that can be disabled. Same keys as `DefaultSignupValues`. */
-type DisabledSignupFields = Partial<Record<keyof DefaultSignupValues, boolean>>;
-/**
- * Customer-facing form configuration for the Signup component.
- * All options are optional. Add new form options here rather than as new props on Signup.
- */
-type SignupFormOptions = {
-    /** The default form values to use for the signup */
-    defaultValues?: DefaultSignupValues;
-    /** Which account billing fields to show and require */
+type CheckoutFormOptions = {
+    /** The default form values */
+    defaultValues?: CheckoutDefaultValues;
+    /** Which optional account fields to show and require */
     requiredBillingDetails?: RequiredBillingDetailsFlags;
     /**
      * Fields the user cannot edit. Provide a default value for each disabled field:
-     * all fields are required, so an empty disabled field blocks the signup.
+     * a required disabled field without a value blocks the checkout.
      */
-    disabledFields?: DisabledSignupFields;
+    disabledFields?: CheckoutDisabledFields;
+};
+/**
+ * Customer-facing callbacks fired by the Signup and Checkout components during their lifecycle.
+ * All callbacks are optional. Add new events here rather than as new props on the components.
+ */
+type CheckoutCallbacks = {
+    /** The subscription was checked out (paid, or free / trial). */
+    onPaymentSuccess?: () => void;
 };
 
-type SignupProps = {
+/** The props Signup and Checkout share. */
+type CheckoutFlowProps = {
     priceListCode: string;
-    /** If trial is allowed on priceList, enableTrial will enable the trial for the signup */
+    /** 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;
-    /** Form configuration: default values, required billing details and disabled fields */
-    form?: SignupFormOptions;
-    /** @deprecated Use `form.defaultValues` instead */
-    defaultFormValues?: DefaultSignupValues;
-    /** Whether to require quote acceptance before checking out */
-    paymentRequiredToAcceptQuote?: boolean;
-    /** The document template ID to apply to the quote for the signup */
-    documentTemplateId?: string;
-    /** @deprecated Use `form.requiredBillingDetails` instead */
-    requiredBillingDetails?: RequiredBillingDetailsFlags;
+    /**
+     * 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 signup lifecycle events */
-    callbacks?: SignupCallbacks;
+    /** Callbacks fired at key lifecycle events */
+    callbacks?: CheckoutCallbacks;
+};
+
+type SignupProps = CheckoutFlowProps;
+/** Self-service signup: creates the account and its first subscription in one click. Needs an API client token with the signup scopes. */
+declare function Signup({ style, ...props }: SignupProps): react.JSX.Element;
+
+type CheckoutProps = CheckoutFlowProps & {
+    /** ID of a document template to render the quote with. When set, the quote PDF is shown under the summary. */
+    documentTemplateId?: string;
 };
-declare function Signup({ priceListCode, enableTrial, style, form, defaultFormValues, paymentRequiredToAcceptQuote, documentTemplateId, requiredBillingDetails, defaultCouponCode, callbacks, }: SignupProps): react.JSX.Element;
+/** Self-service checkout for an existing account: subscribes it to a price list in one click. Needs a portal session token. */
+declare function Checkout({ style, form, documentTemplateId, ...props }: CheckoutProps): react.JSX.Element;
 
 declare function BunnyProvider({ children, darkMode, queryClient, apiHost, token, onTokenExpired, onUserUnavailable, onInvalidOrMissingAuthorization, suppressUserUnavailableErrorNotification, disableErrorNotifications, configProviderProps, }: {
     children: React.ReactNode;
@@ -451,5 +1125,5 @@ declare function MiniCreditCard({ className, buttons, hideDropdownMenu, hideDefa
     id?: string;
 }): react.JSX.Element;
 
-export { BillingDetails, BunnyProvider, Footer, Invoice, Invoices, MiniCreditCard, PaymentForm, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions, UpgradeWrapper as Upgrade };
-export type { DefaultSignupValues, DisabledSignupFields, RequiredBillingDetailsFlags, SignupCallbacks, SignupFormOptions, SignupProps };
+export { BillingDetails, BunnyProvider, Checkout, Footer, Invoice, Invoices, MiniCreditCard, PaymentForm, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions, UpgradeWrapper as Upgrade };
+export type { Appearance, AppearanceBlockStyle, AppearanceFont, AppearanceRuleStyle, AppearanceRules, AppearanceVariables, CheckoutCallbacks, CheckoutDefaultValues, CheckoutDisabledFields, CheckoutFormOptions, CheckoutProps, RequiredBillingDetailsFlags, RuleProperty, SignupProps };