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

package/dist/index.d.ts

@@ -1,15 +1,1352 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps } from 'react';
-import Invoice$1 from '@/types/Invoice';
+import react__default, { CSSProperties, ReactNode, ComponentProps } from 'react';
 import * as gql_tada from 'gql.tada';
 import { ResultOf, FragmentOf } from 'gql.tada';
-import FormattedInvoice from '@/types/FormattedInvoice';
-import { Quote as Quote$1 } from '@/types/Quote';
 import { QueryClient } from '@tanstack/react-query';
-import { ThemeConfig } from 'antd';
-import { Transaction } from '@/types/Transaction';
 
-type ShadowType = "shadow-none" | "shadow-sm" | "shadow-md" | "shadow-lg" | "shadow-xl";
+type PriceTier = {
+    starts: number;
+    price: number;
+};
+
+type QuoteChangeKind$1 = 'ACTIVATE' | 'ADJUSTMENT' | 'COUPON' | 'CREDIT' | 'DISCOUNT' | 'FREE_PERIOD_DISCOUNT' | 'PERCENTAGE_DISCOUNT' | 'PRICE_UPDATE' | 'QUANTITY_UPDATE' | 'REINSTATE' | 'RENEW' | 'SUBSCRIBE' | 'UNSUBSCRIBE' | 'UPDATE';
+type ChargeType = 'ONE_TIME' | 'RECURRING' | 'USAGE';
+type BillingPeriod = 'ANNUAL' | 'MONTHLY' | 'ONCE' | 'QUARTERLY' | 'SEMI_ANNUAL';
+
+type PlanFeature = {
+    code: string;
+    description?: string;
+    feature: Feature;
+    id: string;
+    name: string;
+    featureId: string;
+    value?: string;
+    planId?: string;
+};
+
+declare enum PriceAdjustmentAction {
+    NO_CHANGE = "NO_CHANGE",
+    PERCENTAGE = "PERCENTAGE",
+    CATALOG = "CATALOG"
+}
+
+declare enum PriceAdjustmentTiming {
+    AT_RENEWAL = "AT_RENEWAL",
+    JANUARY = "JANUARY",
+    FEBRUARY = "FEBRUARY",
+    MARCH = "MARCH",
+    APRIL = "APRIL",
+    MAY = "MAY",
+    JUNE = "JUNE",
+    JULY = "JULY",
+    AUGUST = "AUGUST",
+    SEPTEMBER = "SEPTEMBER",
+    OCTOBER = "OCTOBER",
+    NOVEMBER = "NOVEMBER",
+    DECEMBER = "DECEMBER"
+}
+
+type Currency = {
+    id: string;
+    enabled: boolean;
+    priority: number;
+    name: string;
+    isoCode: string;
+    isoNumeric: string;
+    symbol: string;
+    symbolFirst: boolean;
+};
+
+type PriceListChargeTier = {
+    starts: number;
+    ends: number;
+    price: number;
+};
+
+declare enum UsageCalculationType {
+    SUM = "SUM",
+    MAX = "MAX",
+    LAST = "LAST"
+}
+declare enum PricingModel {
+    FLAT = "FLAT",
+    TIERED = "TIERED",
+    VOLUME = "VOLUME",
+    BANDS = "BANDS"
+}
+type PriceListCharge = {
+    id: string;
+    priceListId: string;
+    name: string;
+    selfServiceQuantity?: boolean;
+    specificInvoiceLineText?: string;
+    chargeType?: ChargeType;
+    pricingModel?: PricingModel;
+    billingPeriod?: BillingPeriod;
+    quantityMin?: number;
+    quantityMax?: number;
+    price?: Number;
+    priceDecimals?: number;
+    priceDescription?: string;
+    basePrice: number;
+    featureId?: string;
+    accountingCode?: string;
+    taxCode?: string;
+    createdAt: string;
+    updatedAt: string;
+    recognitionPeriod?: number;
+    priceListChargeTiers?: PriceListChargeTier[];
+    priceList?: PriceList;
+    plan?: Plan;
+    feature?: Feature;
+    usageCalculationType?: UsageCalculationType;
+    description?: string;
+    featureAddon?: boolean;
+};
+
+type AccountType = {
+    id: string;
+    name: string;
+    created_at: string;
+    updated_at: string;
+};
+
+type Role = {
+    id: string;
+    name: string;
+    scopes?: string[];
+};
+
+type UserProfile = {
+    title?: string;
+    phone?: string;
+    timezone?: string;
+    tabnameIsSubdomain?: boolean;
+};
+
+interface User {
+    id: string;
+    uuid?: string;
+    managerUserId?: string;
+    fullName: string;
+    firstName: string;
+    lastName?: string;
+    email?: string;
+    title?: string;
+    createdAt: string;
+    updatedAt: string;
+    lastLogin?: string;
+    managerUser?: User;
+    subordinates?: User[];
+    roleId?: string;
+    groupId?: string;
+    imageUrl: string;
+    enabled?: boolean;
+    allowLoginViaEmailLink?: boolean;
+    role?: Role;
+    profile?: UserProfile;
+}
+
+interface ApprovalRule {
+    id?: string;
+    name?: string;
+    active?: boolean;
+    fromDate?: string;
+    toDate?: string;
+    approverId?: string;
+    approver?: Approver;
+    totalQuoteAmount?: number;
+    totalQuoteAmountEnabled: boolean;
+    overallQuoteDiscount?: number;
+    overallQuoteDiscountEnabled: boolean;
+}
+
+interface Approver {
+    id: string;
+    name?: string;
+    userId: string;
+    user?: User;
+    approvalRules?: ApprovalRule[];
+}
+
+type ApprovalDecision = {
+    id?: string;
+    approvalRequestId: string;
+    approvalRequest: ApprovalRequest;
+    approverId: string;
+    approver: Approver;
+    notes?: string;
+    state: ApprovalRequestState;
+};
+
+type ApprovalRequestState = "PENDING" | "APPROVED" | "REJECTED";
+type ApprovalRequest = {
+    approvers: Approver[];
+    approvalDecisions: ApprovalDecision[];
+    id?: string;
+    quoteId: string;
+    quote: Quote$1;
+    state: ApprovalRequestState;
+    totalApprovers: number;
+    totalApprovals: number;
+    totalRejections: number;
+    triggeredApprovalRules: ApprovalRule[];
+};
+
+type Campaign = {
+    id: string;
+    name?: string;
+    code?: string;
+    ownerUserId?: string;
+    startDate?: string;
+    endDate?: string;
+    owner?: User;
+    leadCount: number;
+    contactCount: number;
+};
+
+type Contact = {
+    id: string;
+    code?: string;
+    accountId?: string;
+    firstName: string;
+    lastName?: string;
+    fullName: string;
+    salutation?: string;
+    title?: string;
+    phone?: string;
+    mobile?: string;
+    email?: string;
+    mailingStreet?: string;
+    mailingCity?: string;
+    mailingZip?: string;
+    mailingState?: string;
+    mailingCountry?: string;
+    portalAccess?: boolean;
+    createdAt: string;
+    updatedAt?: string;
+    description?: string;
+    account?: Account;
+    campaigns: Campaign[];
+};
+
+type AmountByTier = {
+    id: string;
+    tier: {
+        starts: number;
+        ends: number | null;
+        price: number;
+    };
+    quantity: number;
+    amount: number;
+};
+type AmountByPeriod$1 = {
+    amount: number;
+    endDate: string;
+    id: string;
+    name: string;
+    startDate: string;
+    amountsByTier: AmountByTier[];
+    prorationRate: number;
+    quantity: number;
+};
+type FormattedLine = {
+    amount: number;
+    amountsByPeriod: AmountByPeriod$1[];
+    billingPeriodEnd: string;
+    billingPeriodStart: string;
+    chargeType: string;
+    discount: number;
+    frequency: string;
+    isRamp?: boolean;
+    lineText?: string;
+    periods: number | string;
+    planName: string;
+    position: number;
+    price: number;
+    priceDecimals: number;
+    priceListChargeId: string;
+    priceListChargeName?: string;
+    priceListId: string;
+    pricingModel: PricingModel;
+    productName: string;
+    prorationRate: number;
+    quantity?: number;
+    showProductNameOnLineItem: boolean;
+    taxCode?: string;
+    trialEndDate?: string;
+    unitOfMeasure: string;
+    vatCode?: string;
+};
+
+type PeriodAmount = {
+    id: string;
+    name: string;
+    amount: number;
+    startDate: string;
+    endDate: string;
+    amountsByTier: Array<Record<string, any>>;
+};
+
+type Interval = {
+    intervalStart: string;
+    intervalUsage: number;
+};
+type DataEntry = {
+    periodStart: string;
+    periodEnd: string;
+    intervals: Interval[];
+    intervalsTotal: number;
+};
+type SubscriptionCharge$1 = {
+    id: string;
+    name: string;
+    amount: number;
+    currentPeriodPriceByTiers: any | null;
+};
+type Feature$1 = {
+    id: string;
+    name: string;
+};
+declare enum DataInterval {
+    DAILY = "DAILY",
+    MONTHLY = "MONTHLY",
+    QUARTERLY = "QUARTERLY",
+    SEMIANNUALLY = "SEMIANNUALLY",
+    YEARLY = "YEARLY"
+}
+type FeatureUsage = {
+    subscriptionCharge?: SubscriptionCharge$1;
+    feature: Feature$1;
+    periodRange: string;
+    dataInterval: DataInterval;
+    data: DataEntry[];
+};
+
+type SubscriptionCharge = {
+    account: Account;
+    amount: number;
+    billingPeriod: BillingPeriod;
+    chargeType: ChargeType;
+    createdAt: string;
+    currency: Currency;
+    discount?: number;
+    discountedPrice: string;
+    endDate: string;
+    expired: boolean;
+    feature?: Feature;
+    id: string;
+    invoiceLineText: string;
+    isAmendment: boolean;
+    isRamp?: boolean;
+    kind: QuoteChangeKind$1;
+    name: string;
+    periodPrice: number;
+    price: string;
+    priceDecimals: number;
+    priceList: PriceList;
+    priceListCharge?: PriceListCharge;
+    priceListChargeId: string;
+    priceListId: string;
+    priceTiers: PriceTier[];
+    pricingModel: PricingModel;
+    prorationRate?: number;
+    quantity: number;
+    quantityMax?: number;
+    quantityMin?: number;
+    selfServiceQuantity?: boolean;
+    startDate: string;
+    tieredAveragePrice?: number;
+    trial: boolean;
+    updatedAt: string;
+    histogram?: FeatureUsage;
+};
+
+declare enum SubscriptionState {
+    ACTIVE = "ACTIVE",
+    TRIAL = "TRIAL",
+    PENDING = "PENDING",
+    EXPIRED = "EXPIRED",
+    CANCELED = "CANCELED",
+    TRIAL_EXPIRED = "TRIAL_EXPIRED"
+}
+
+type Subscription = {
+    account: Account;
+    accountId: string;
+    cancellationDate?: string;
+    charges: SubscriptionCharge[];
+    currentCharges?: SubscriptionCharge[];
+    chargeReport?: SubscriptionCharge[];
+    createdAt: string;
+    currencyId: string;
+    endDate: string;
+    evergreen: Boolean;
+    id: string;
+    name: string;
+    period: string;
+    plan: Plan;
+    priceList: PriceList;
+    product: Product;
+    provisioningRequired: Boolean;
+    startDate: string;
+    state: SubscriptionState;
+    tenant: Tenant;
+    trialEndDate: string;
+    daysLeftInTrial?: number;
+    trialExpirationAction: TrialExpirationAction;
+    trialPeriod: string;
+    trialStartDate: string;
+    updatedAt: string;
+    addonSubscriptions?: Subscription[];
+};
+
+type QuoteChange = {
+    charges: QuoteCharge[];
+    currencyId: string;
+    endDate?: string;
+    id: string;
+    kind: QuoteChangeKind$1;
+    name: string;
+    priceList: PriceList;
+    priceListId?: string;
+    quote: Quote$1;
+    quoteId: string;
+    startDate?: string;
+    subscription?: Subscription;
+    subscriptionId?: string;
+};
+
+type FormattedQuote = {
+    object: any;
+    acceptedAt: string;
+    acceptedByName: string;
+    acceptedByTitle: string;
+    amount: number;
+    amountsByPeriod: PeriodAmount[];
+    billingCity: string;
+    billingCountry: string;
+    billingState: string;
+    billingStreet: string;
+    billingZip: string;
+    contactEmail: string;
+    contactName: string;
+    currency: string;
+    customerBillingCity: string;
+    customerBillingCountry: string;
+    customerBillingState: string;
+    customerBillingStreet: string;
+    customerBillingZip: string;
+    customerName: string;
+    discount: number;
+    discountValue: number;
+    expiresAt: string;
+    formattedLines: FormattedLine[];
+    html: string;
+    id: string;
+    name: string;
+    netPaymentDays: number;
+    number: string;
+    poNumberRequired: boolean;
+    quote: Quote$1;
+    quoteChanges: QuoteChange[];
+    salesContactEmail: string;
+    sharedAt: string;
+    state: 'DRAFT' | 'SHARED' | 'VIEWED' | 'ACCEPTED' | 'APPLIED';
+    subtotal: number;
+    taxAmount: number;
+    taxNumberLabel: string;
+    taxNumberRequired: boolean;
+    vendorName: string;
+    approvalRequest: ApprovalRequest;
+};
+
+type DisputeReason = {
+    id?: number;
+    name?: string;
+    description?: string;
+};
+
+declare enum TaxTypeType {
+    GENERIC = "GENERIC",
+    VAT = "VAT",
+    GST = "GST",
+    EIN = "EIN"
+}
+type Entity = {
+    id: string;
+    name: string | null;
+    billingStreet: string | null;
+    billingCity: string | null;
+    billingState: string | null;
+    billingZip: string | null;
+    billingCountry: string | null;
+    createdAt: string;
+    updatedAt: string;
+    phone: string | null;
+    fax: string | null;
+    website: string | null;
+    quoteNumberSeq: number | null;
+    quoteNumberPrefix: string | null;
+    invoiceNumberSeq: number | null;
+    invoiceNumberPrefix: string | null;
+    brandColor: string | null;
+    accentColor: string | null;
+    emailTemplate: string;
+    emailSenderName: string | null;
+    termsUrl: string | null;
+    privacyUrl: string | null;
+    refundPolicyUrl: string | null;
+    customerServiceEmail: string | null;
+    taxType: TaxTypeType | null;
+    taxId: string | null;
+    timezone: string | null;
+    quotesImageUrl: string;
+    invoicesImageUrl: string;
+    topNavImageUrl: string;
+    abbreviation: string;
+    baseCurrencyId: string;
+};
+
+type CreditNoteItem = {
+    id: string;
+    amount: number;
+    currencyId: string;
+    invoiceItem?: InvoiceItem;
+    invoiceItemId?: string;
+    lineText?: string;
+    position?: number;
+    price: number;
+    priceDecimals: number;
+    priceTiers?: PriceTier[];
+    quantity?: number;
+    subtotal: number;
+    taxAmount?: number;
+    taxCode?: string;
+    vatCode?: string;
+};
+
+type InvoiceConnection = {
+    nodes: Invoice$1[];
+    totalCount?: number;
+};
+
+declare enum CreditNoteState {
+    PREPARING = "PREPARING",
+    DRAFT = "DRAFT",
+    READY = "READY",
+    PARTIALLY_APPLIED = "PARTIALLY_APPLIED",
+    APPLIED = "APPLIED"
+}
+
+type CreditNoteKind = 'REFUND' | 'WRITE_OFF';
+type CreditNote = {
+    account: Account;
+    accountId: string;
+    amount: number;
+    amountApplied: number;
+    amountUnapplied: number;
+    appliedToInvoices?: InvoiceConnection;
+    createdAt: string;
+    created_at: string;
+    creditNoteItems?: CreditNoteItem[];
+    creditedInvoice?: Invoice$1;
+    creditedInvoiceId?: string;
+    currency: string;
+    currencyId: string;
+    description: string;
+    disputeReason?: DisputeReason;
+    disputeReasonId?: string;
+    entity: Entity;
+    entityId: string;
+    id: string;
+    invoice?: Invoice$1;
+    invoiceId?: string;
+    isCredit: boolean;
+    isLegacy: boolean;
+    issuedAt?: string;
+    kind: CreditNoteKind;
+    notes?: string;
+    number?: string;
+    operations: string[];
+    state: CreditNoteState;
+    subtotal: number;
+    taxAmount: number;
+    updatedAt: string;
+    uuid: string;
+    warrenId: string;
+};
+
+type PaymentApplication = {
+    id: number;
+    paymentId?: number;
+    invoiceId?: number;
+    amount?: number;
+    account?: Account;
+    invoice?: Invoice$1;
+    createdAt?: string;
+    updatedAt?: string;
+};
+
+type PayableItem = {
+    uuid: string;
+    amount: number;
+    subtotal: number;
+    taxAmount: number;
+    quantity: number;
+    frequency?: string;
+    startDate: Date;
+    endDate: Date;
+};
+
+interface Payable {
+    id?: string;
+    payableId: string;
+    uuid: string;
+    number: string;
+    currencyId: string;
+    currency: Currency;
+    amount: number;
+    amountDue: number;
+    smallUnitAmountDue: number;
+    state: string;
+    items?: Array<PayableItem>;
+}
+
+declare enum TransactionState {
+    not_due = "not_due",
+    due = "due",
+    unpaid = "unpaid",
+    paid = "paid",
+    voided = "voided",
+    ready = "ready",
+    failed = "failed",
+    preparing = "preparing",
+    unapplied = "unapplied",
+    partially_applied = "partially_applied",
+    applied = "applied"
+}
+
+type State$2 = "APPLIED" | "UNAPPLIED" | "PARTIALLY_APPLIED";
+type Payment = {
+    id: string;
+    currencyId: string;
+    memo: string;
+    description: string;
+    state: State$2;
+    amount: number;
+    receivedAt: string;
+    createdAt: string;
+    updatedAt: string;
+    transactionRecord: Transaction;
+    account: Account;
+    accountId: number;
+    invoices: Invoice$1[];
+    amountUnapplied: number;
+};
+
+declare enum TransactionKind {
+    INVOICE = "INVOICE",
+    PAYMENT = "PAYMENT",
+    REFUND = "REFUND",
+    WRITE_OFF = "WRITE_OFF"
+}
+type Transaction = {
+    account: Account;
+    accountId: string;
+    amount: number;
+    createdAt: string;
+    currencyId: string;
+    description: string;
+    id: string;
+    invoice?: Invoice$1;
+    kind: TransactionKind;
+    payment?: Payment;
+    state: TransactionState;
+    transactionable: Payment | Invoice$1;
+    transactionableId: string;
+    creditNote?: CreditNote;
+};
+
+type State$1 = 'NOT_DUE' | 'DUE' | 'UNPAID' | 'PAID' | 'VOIDED' | 'READY' | 'FAILED' | 'PREPARING';
+type Invoice$1 = {
+    account: Account;
+    accountId: string;
+    amount: number;
+    amountDue: number;
+    amountPaid: number;
+    baseCurrencyId: string;
+    couponApplied: boolean;
+    createdAt: string;
+    creditItem?: InvoiceItem;
+    creditNote?: CreditNote;
+    creditNotes?: CreditNote[];
+    credits?: number;
+    currency?: Currency;
+    currencyId: string;
+    description: string;
+    dueAt?: string;
+    entity: Entity;
+    hasPaymentMethod?: boolean;
+    id: string;
+    invoiceId: string;
+    invoiceItems: InvoiceItem[];
+    isLegacy: boolean;
+    issuedAt?: string;
+    kind: string;
+    memo?: string;
+    mergedInvoices?: Invoice$1[];
+    mergedToInvoice?: Invoice$1;
+    netPaymentDays: number;
+    notes?: string;
+    number: string;
+    operations: string[];
+    paidAt?: string;
+    payableId: string;
+    paymentApplications?: PaymentApplication[];
+    poNumber?: string;
+    portalUrl: string;
+    printedState: string | null;
+    quote?: Quote$1;
+    quoteId?: string;
+    smallUnitAmountDue?: number;
+    state: State$1;
+    subtotal: number;
+    taxAmount: number;
+    transactionRecord: Transaction;
+    updatedAt: string;
+    url: string;
+    uuid: string;
+} & Payable;
+
+type QuoteDocument = {
+    id: string;
+    filename: string;
+    size: string;
+    date: string;
+    url: string;
+};
+
+type Type$1 = "INPUT" | "DATEPICKER" | "SWITCH" | "COMBO" | "TEXTAREA" | "DESCRIPTION";
+type Format = 'SECRET' | 'HUMANIZE' | 'BOOLEAN' | 'DATE' | 'DATETIME' | 'PERCENTAGE' | 'NUMERIC' | 'CURRENCY';
+type DynamicComponent = {
+    title: string;
+    type: Type$1;
+    format?: Format;
+    name: string;
+    column: string;
+    value?: string;
+    tooltip?: string;
+};
+
+type Kind$2 = "SECRET" | "STRING" | "NUMBER" | "BOOLEAN";
+type PluginParameter = {
+    id: string;
+    name?: string;
+    shortName?: string;
+    pluginDefinition: PluginDefinition;
+    pluginDefinitionId: string;
+    kind?: Kind$2;
+    uuid?: string;
+};
+
+type PluginVendor = {
+    id: string;
+    name: string;
+    uuid: string;
+};
+
+type Type = "PAYMENT" | "OTHER" | "TAXATION" | "SIGNING";
+type PluginDefinition = {
+    id: string;
+    name: string;
+    metadata: any;
+    shortName?: string;
+    logo?: string;
+    description?: string;
+    summary?: string;
+    userIsolation?: boolean;
+    platformName?: string;
+    pluginType?: Type;
+    pluginVendorId?: string;
+    pluginVendor?: PluginVendor;
+    pluginParameters?: PluginParameter[];
+    hidden?: boolean;
+    uuid?: string;
+    authType?: string;
+    helplink?: string;
+};
+
+type PluginActionMenuItem = {
+    label: string;
+    methodName: string;
+    relUrl?: string;
+    visible?: string;
+};
+type PluginStatus = "VALID" | "INVALID";
+type PluginType = string;
+type Plugin = {
+    actionMenu?: PluginActionMenuItem[];
+    authType?: string;
+    classes?: string[];
+    componentName?: string;
+    description?: string;
+    dynamicComponents: DynamicComponent[];
+    enabled?: boolean;
+    enabledOnlyForUser?: User;
+    enabledOnlyForUserId?: string;
+    entities?: Entity[];
+    entityIds?: string[];
+    entitySelectionEnabled?: boolean;
+    guid: string;
+    helplink?: string;
+    hidden?: boolean;
+    id: string;
+    logo?: string;
+    name: string;
+    pluginDefinition?: PluginDefinition;
+    pluginDefinitionId?: string;
+    pluginVendor?: PluginVendor;
+    pluginVendorId?: string;
+    status?: PluginStatus;
+    summary?: string;
+    type: PluginType;
+    userIsolation?: boolean;
+    uuid: string;
+    webhookUrl?: string;
+};
+
+type State = "UNKNOWN" | "SUCCESS" | "FAILED";
+type PaymentType = "CARD" | "WIRE" | "OTHER" | "ACH";
+type PaymentMethod = {
+    account?: Account;
+    accountId?: string;
+    createdAt?: string;
+    disabled?: boolean;
+    expirationDate?: string;
+    failureCode?: string;
+    id: string;
+    lastSuccess?: string;
+    metadata: {
+        description: string;
+        icon: string;
+        identifier: string;
+        issuer: string;
+        kind: string;
+        type: string;
+    };
+    isDefault?: boolean;
+    paymentType?: PaymentType;
+    plugin?: Plugin;
+    pluginId?: string;
+    state?: State;
+    updatedAt?: string;
+};
+
+interface PaymentHold {
+    id?: string;
+    expiresAt?: Date;
+    createdAt?: Date;
+    updatedAt?: Date;
+    quote?: Quote$1;
+    paymentMethod?: PaymentMethod;
+}
+
+type QuoteState = 'DRAFT' | 'SHARED' | 'VIEWED' | 'ACCEPTED' | 'IN_APPROVAL' | 'APPROVED' | 'REJECTED';
+type AmountByPeriod = {
+    id?: string;
+    name?: string;
+    date?: string;
+    amount: number;
+    startDate: string;
+};
+type DateOption = {
+    end_date: string;
+    label: string;
+};
+type Quote$1 = {
+    acceptedByName?: string;
+    acceptedByTitle?: string;
+    account?: Account;
+    accountId: string;
+    amount: number;
+    amountDue: number;
+    amountsByPeriod: AmountByPeriod[];
+    applicationDate?: string;
+    applied: boolean;
+    approvalRequest: ApprovalRequest;
+    billingDay?: number;
+    contact?: Contact;
+    createdAt: string;
+    credits?: number;
+    currency?: Currency;
+    currencyId: string;
+    currentPaymentHold?: PaymentHold;
+    deal?: Deal;
+    dealId: string;
+    discount?: number;
+    discountValue: number;
+    documentTemplateId?: string;
+    documents: QuoteDocument[];
+    endDate: string;
+    endDateOptions?: DateOption[];
+    evergreen?: boolean;
+    expiresAt: string;
+    formattedQuote: FormattedQuote;
+    id: string;
+    invoiceUntil: string;
+    invoiceUntilOptions?: DateOption[];
+    isPendingApprovalRequest: boolean;
+    kind: QuoteChangeKind$1;
+    message?: string;
+    name?: string;
+    netPaymentDays?: number;
+    notes?: string;
+    owner?: User;
+    ownerUserId?: string;
+    payToAccept?: boolean;
+    payableId: string;
+    paymentHolds?: PaymentHold[];
+    periodAmount: number;
+    poNumber?: string;
+    quoteChanges: QuoteChange[];
+    requiresApproval: boolean;
+    smallUnitAmountDue?: number;
+    startDate: string;
+    state: QuoteState;
+    subtotal: number;
+    taxAmount: number;
+    triggeredApprovalRules?: ApprovalRule[];
+    updatedAt: string;
+    uuid: string;
+} & Payable;
+
+type Kind$1 = "OPEN" | "CLOSED_WON" | "CLOSED_LOST";
+type DealStage = {
+    id: number;
+    position: number;
+    name?: string;
+    kind?: Kind$1;
+    probability?: string;
+    description?: string;
+    createdAt: string;
+    updatedAt: string;
+};
+
+type Kind = "NEW" | "EXISTING";
+type Origin = "SALES" | "PORTAL" | "SIGNUP" | "OTHER";
+type Deal = {
+    id: string;
+    code?: string;
+    accountId?: string;
+    currencyId?: string;
+    name: string;
+    ownerUserId?: string;
+    amount?: number;
+    createdAt: string;
+    updatedAt: string;
+    probability?: number;
+    description?: string;
+    closeDate?: string;
+    kind?: Kind;
+    dealStageId: string;
+    stageDescription?: string;
+    leadSourceId?: string;
+    contactId?: string;
+    notForRevenue?: boolean;
+    quoteDefaults?: Quote$1;
+    viaPortal?: boolean;
+    origin?: Origin;
+    account?: Account;
+    owner?: User;
+    contact?: Contact;
+    currency?: Currency;
+    dealStage: DealStage;
+    quotes?: Quote$1[];
+};
+
+type AccountBalance = {
+    id: Number;
+    balance: Number;
+    currencyId: string;
+};
+
+type PayingStatus = "CURRENT" | "PAST_DUE" | "SUSPENDED" | "INACTIVE";
+type Account = {
+    id: string;
+    code?: string;
+    timezone?: string;
+    accountTypeId: string;
+    industryId?: string;
+    employees?: Number;
+    annualRevenue?: Number;
+    name: string;
+    billingStreet?: string;
+    billingCity?: string;
+    billingState?: string;
+    billingZip?: string;
+    billingCountry?: string;
+    billingContactId?: string;
+    shippingStreet?: string;
+    shippingCity?: string;
+    shippingState?: string;
+    shippingZip?: string;
+    shippingCountry?: string;
+    description?: string;
+    createdAt: string;
+    updatedAt: string;
+    phone?: string;
+    fax?: string;
+    website?: string;
+    currencyId?: string;
+    taxNumber?: string;
+    groupId?: string;
+    billingDay?: Number;
+    netPaymentDays?: Number;
+    duns?: string;
+    ownerUserId?: string;
+    dealDefaults?: Deal;
+    accountType: AccountType;
+    currency?: Currency;
+    contacts?: Contact[];
+    deals?: Deal[];
+    subscriptions?: Subscription[];
+    owner?: User;
+    transactions?: Transaction[];
+    balances: AccountBalance[];
+    billingContact?: Contact;
+    entityUseCode?: string;
+    addressValidated: boolean;
+    arr?: number;
+    mrr?: number;
+    mur?: number;
+    draftInvoices: boolean;
+    emailsEnabled: boolean;
+    entity?: Entity;
+    entityId?: string;
+    invoiceTemplateId?: string;
+    invoices?: Invoice$1[];
+    linkedinUrl?: string;
+    newQuoteBuilder: boolean;
+    payingStatus?: PayingStatus;
+    secondaryBillingContactIds?: string[];
+    secondaryBillingContacts?: Contact[];
+    taxNumberValidated?: boolean;
+};
+
+type TenantProvisioningState = "PENDING" | "STARTED" | "FAILED" | "COMPLETED";
+type TenantProvisioningChange = {
+    id: string;
+    state: TenantProvisioningState;
+    change?: any;
+    createdAt?: string;
+    updatedAt?: string;
+    tenant?: Tenant;
+    features?: string;
+};
+
+type Tenant = {
+    id: Number;
+    platformId: Number;
+    name: string;
+    code?: string;
+    subdomain?: string;
+    accountId: Number;
+    account: Account;
+    platform: Platform;
+    provisioningRequired?: Boolean;
+    provisioningState?: string;
+    provisioningChanges?: TenantProvisioningChange[];
+    latestProvisioningChangeId?: Number;
+    latestProvisioningChange?: TenantProvisioningChange;
+};
+
+type Platform = {
+    id: string;
+    name: string;
+    code?: string;
+    provisioningEnabled: boolean;
+    webhookUrl?: string;
+    webhookAuthToken?: string;
+    webhookSigningKey?: string;
+    tenants?: Tenant[];
+};
+
+type ProductCategory = {
+    id: Number;
+    name: string | null;
+    createdAt: string;
+    updatedAt: string;
+    plans: Plan[];
+};
+
+type Product = {
+    code?: string;
+    description?: string;
+    everythingInPlus?: boolean;
+    features?: Feature[];
+    id: string;
+    internalNotes?: string;
+    name: string;
+    planDefaults?: Plan;
+    plans?: Plan[];
+    platform?: Platform;
+    platformId?: Number;
+    productCategory?: ProductCategory;
+    productCategoryId?: Number;
+    showProductNameOnLineItem?: Boolean;
+    plansToDisplay?: number;
+};
+
+type PeriodMonths = 0 | 1 | 3 | 6 | 12;
+type TrialExpirationAction = 'CANCEL' | 'ACTIVATE';
+type PriceList = {
+    basePrice: number;
+    charges: PriceListCharge[];
+    code?: string;
+    createdAt: string;
+    currency?: Currency;
+    currencyId: string;
+    id: string;
+    isVisible?: boolean;
+    monthlyBasePrice: number;
+    name: string;
+    periodMonths: PeriodMonths;
+    plan: Plan;
+    planId: string;
+    priceAdjustmentAction?: PriceAdjustmentAction;
+    priceAdjustmentActionOptions?: string[];
+    priceAdjustmentPercentage?: number;
+    priceAdjustmentTiming?: PriceAdjustmentTiming;
+    priceAdjustmentTimingOptions?: string[];
+    priceDescription?: string;
+    product: Product;
+    productId?: string;
+    renewalTermMonths?: number;
+    showPriceAsMonthly?: boolean;
+    sku?: string;
+    trialAllowed: boolean;
+    trialExpirationAction?: TrialExpirationAction;
+    trialLengthDays?: number;
+    updatedAt: string;
+    addonPlans?: Plan[];
+    deprecated?: boolean;
+};
+
+declare enum PricingStyle {
+    FREE = "FREE",
+    PRICED = "PRICED",
+    CONTACT_US = "CONTACT_US"
+}
+type Plan = {
+    addon?: boolean;
+    compatiblePlans?: Plan[];
+    addonPlans?: Plan[];
+    availableFrom?: string;
+    availableTo?: string;
+    basePrice?: number;
+    code?: string;
+    contactUsLabel?: string;
+    contactUsUrl?: string;
+    createdAt: string;
+    description?: string;
+    features?: Feature[];
+    id: string;
+    internalNotes?: string;
+    isAvailableNow?: boolean;
+    isVisible?: boolean;
+    name: string;
+    planFeatures?: PlanFeature[];
+    position: number;
+    priceLists: PriceList[];
+    pricingDescription?: string;
+    pricingStyle: PricingStyle;
+    product: Product;
+    productId: string;
+    selfServiceBuy?: boolean;
+    selfServiceCancel?: boolean;
+    selfServiceRenew?: boolean;
+    trialEndDate?: string;
+    updatedAt: string;
+};
+
+type FeatureKind = 'BOOLEAN' | 'VALUE' | 'MARKETING' | 'GROUP' | 'QUANTITY';
+type Feature = {
+    id: string;
+    productId?: string;
+    name: string;
+    kind?: FeatureKind;
+    position: number;
+    chargeType?: ChargeType;
+    createdAt: string;
+    updatedAt: string;
+    code?: string;
+    description?: string;
+    isUnit?: boolean;
+    isProvisioned?: boolean;
+    isVisible?: boolean;
+    plans?: Plan[];
+    unitName?: string;
+};
+
+type DiscountKind = "PERCENTAGE" | "AMOUNT";
+type Coupon = {
+    id?: string;
+    name?: string;
+    couponCode?: string;
+    description?: string;
+    active?: boolean;
+    discountKind?: DiscountKind;
+    discountAmount?: number;
+    discountPercentage?: number;
+    currencyId?: string;
+    redemptionsMax?: number;
+    redemptionsCount?: number;
+    redemptionEndDate?: string;
+    planId?: string;
+    createdAt?: string;
+    updatedAt?: string;
+};
+
+type QuoteCharge = {
+    subtotal?: number;
+    amountsByPeriod?: AmountByPeriod[];
+    amount: number;
+    billingPeriod?: BillingPeriod;
+    billingPeriodAmounts?: {
+        id: string;
+        amount: number;
+        prorationRate: number;
+    }[];
+    chargeType?: ChargeType;
+    coupon?: Coupon;
+    createdAt: string;
+    currencyId: string;
+    currentQuantity?: number;
+    discount?: number;
+    endDate: string;
+    feature: Feature;
+    id: string;
+    invoiceLineText: string;
+    name?: string;
+    price: number;
+    priceDecimals?: number;
+    priceList?: PriceList;
+    priceListCharge: PriceListCharge;
+    priceTiers?: PriceTier[];
+    pricingModel: PricingModel | null;
+    prorationRate?: number;
+    quantity: number;
+    quantityMax?: number;
+    quantityMin?: number;
+    quoteChange: QuoteChange;
+    startDate: string;
+    subscriptionCharge?: SubscriptionCharge;
+    tieredAveragePrice?: number;
+    updatedAt: string;
+    kind?: string;
+};
+
+declare enum QuoteChangeKind {
+    ADJUSTMENT = "ADJUSTMENT",
+    COUPON = "COUPON",
+    CREDIT = "CREDIT",
+    DISCOUNT = "DISCOUNT",
+    FREE_PERIOD_DISCOUNT = "FREE_PERIOD_DISCOUNT",
+    PRICE_UPDATE = "PRICE_UPDATE",
+    QUANTITY_UPDATE = "QUANTITY_UPDATE",
+    REINSTATE = "REINSTATE",
+    RENEW = "RENEW",
+    SUBSCRIBE = "SUBSCRIBE",
+    UNSUBSCRIBE = "UNSUBSCRIBE",
+    UPDATE = "UPDATE",
+    ACTIVATE = "ACTIVATE"
+}
+
+type InvoiceItem = {
+    id: string;
+    amount: number;
+    billingPeriodStart?: string;
+    billingPeriodEnd?: string;
+    charge: SubscriptionCharge | QuoteCharge;
+    chargeType?: string;
+    currencyId: string;
+    discount?: number;
+    frequency?: string;
+    lineText?: string;
+    position?: number;
+    price: number;
+    priceTiers?: PriceTier[];
+    priceDecimals: number;
+    priceListChargeName?: string;
+    priceListName?: string;
+    prorationRate?: number;
+    quantity?: number;
+    unitOfMeasure?: string;
+    couponId?: string;
+    isCoupon: boolean;
+    comment?: string;
+    creditNoteItem?: CreditNoteItem;
+    creditedItem?: InvoiceItem;
+    endDate?: string;
+    invoice: Invoice$1;
+    invoiceId: string;
+    isCredit: boolean;
+    kind?: QuoteChangeKind;
+    startDate?: string;
+    subtotal: number;
+    taxAmount?: number;
+    taxCode?: string;
+    vatCode?: string;
+};
+
+type FormattedInvoice = {
+    amount: number;
+    amountDue: number;
+    amountPaid: number;
+    billingCity?: string;
+    billingCountry?: string;
+    billingState?: string;
+    billingStreet?: string;
+    billingZip?: string;
+    createdAt: string;
+    credits?: number;
+    currency: string;
+    currencyId: string;
+    currencySymbol: string;
+    customerBillingCity?: string;
+    customerBillingContact?: string;
+    customerBillingCountry?: string;
+    customerBillingState?: string;
+    customerBillingStreet?: string;
+    customerBillingZip?: string;
+    customerName: string;
+    dueAt?: string;
+    formattedLines: InvoiceItem[];
+    html: string;
+    id: string;
+    isLegacy?: boolean;
+    messages?: {
+        message: string;
+        ids: string[];
+    }[];
+    netPaymentDays: number;
+    number: string;
+    poNumber?: string;
+    printedState?: string;
+    salesContactEmail?: string;
+    smallUnitAmountDue?: number;
+    state: State$1;
+    subscriptionEndDate?: string;
+    subscriptionStartDate?: string;
+    subtotal: number;
+    taxAmount?: number;
+    taxId?: string;
+    taxNumber?: string;
+    taxType?: string;
+    uuid: string;
+    vendorName: string;
+};
 
 type InvoiceQuoteContextProps = {
     id?: string | null | undefined;
@@ -18,7 +1355,6 @@ type InvoiceQuoteContextProps = {
     onBackButtonClick?: () => void;
     onInvoiceDownloadError?: () => void;
     onPaymentSuccess?: (savePaymentMethod?: boolean) => void;
-    shadow?: ShadowType;
     className?: string;
     hideDownloadButton?: boolean;
     onInvoiceLoaded?: (formattedInvoice: FormattedInvoice) => void;
@@ -26,12 +1362,532 @@ type InvoiceQuoteContextProps = {
     suppressQuoteUnavailableErrorNotification?: boolean;
 };
 
+/**
+ * The values the default look is built from: set one when a change should carry through everything
+ * built from it. The ones the payment provider's hosted fields have too are handed to them 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 your Bunny brand color
+     */
+    colorPrimary?: string;
+    /**
+     * The text and icon colour on `colorPrimary` surfaces: the primary button's label, a ticked checkbox's
+     * tick, the plan picker's ticks. Set it when `colorPrimary` is light.
+     * @default `'#fff'`
+     */
+    colorOnPrimary?: string;
+    /**
+     * The form column, inputs and payment method tiles.
+     * @default `'#ffffff'`
+     */
+    colorBackground?: string;
+    /**
+     * Body text and input text. The other text and fill greys are fainter steps of it, so a plain color (hex,
+     * `rgb()` or `hsl()`) keeps them in step.
+     * @default `'rgba(0,0,0,0.88)'`
+     */
+    colorText?: string;
+    /**
+     * Muted text: the "Subscribe to" line, footer links, the back link; when set, also its arrow and the download icon.
+     * @default `colorText`'s color at 65% opacity (`'rgba(0,0,0,0.65)'`)
+     */
+    colorTextSecondary?: string;
+    /**
+     * Placeholders, the empty country select and its chevron.
+     * @default `colorText`'s color at 25% opacity (`'rgba(0,0,0,0.25)'`)
+     */
+    colorTextPlaceholder?: string;
+    /**
+     * Invalid field borders and error messages.
+     * @default `'#ff4d4f'`
+     */
+    colorDanger?: string;
+    /**
+     * Discount amounts and the success check (its tint and strong shade are derived from it, so use a plain color).
+     * @default `'#52c41a'`
+     */
+    colorSuccess?: string;
+    /**
+     * Warnings. Handed to the payment provider only when you set it.
+     * @default `'#faad14'`
+     */
+    colorWarning?: string;
+    /**
+     * All text on the screen, the payment fields included. Set the font here once and list any web font in
+     * `fonts`: it is loaded onto the page and into the payment fields. When set, content you render inside
+     * `BunnyProvider` gets it too. Leave it unset to inherit your page's font.
+     * @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 `'14px'`
+     */
+    fontSizeBase?: string;
+    /**
+     * The smallest step of the text scale. Handed to the payment provider only when you set it.
+     * @default `'11px'`
+     */
+    fontSizeXs?: string;
+    /**
+     * The text scale's step below `fontSizeBase`. Handed to the payment provider only when you set it.
+     * @default `'12px'`
+     */
+    fontSizeSm?: string;
+    /**
+     * The text scale's step above `fontSizeBase`. Handed to the payment provider only when you set it.
+     * @default `'16px'`
+     */
+    fontSizeLg?: string;
+    /**
+     * The text scale's largest step below page titles. Handed to the payment provider only when you set it.
+     * @default `'20px'`
+     */
+    fontSizeXl?: string;
+    /**
+     * The weight of regular text. Handed to the payment provider only when you set it.
+     * @default `'400'`
+     */
+    fontWeightNormal?: string;
+    /**
+     * The weight of emphasised text. Handed to the payment provider only when you set it.
+     * @default `'500'`
+     */
+    fontWeightMedium?: string;
+    /**
+     * The weight of headings. Handed to the payment provider only when you set it.
+     * @default `'600'`
+     */
+    fontWeightBold?: string;
+    /**
+     * Corner radius of controls. Cards keep 6px and tiles 8px until you set this, then your value applies
+     * to them too.
+     * @default `'4px'` for controls
+     */
+    borderRadius?: string;
+    /**
+     * Vertical space between form rows, ours and the payment fields'.
+     * @default `'12px'`
+     */
+    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 secondary surface colour: the Signup/Checkout summary, the drawer body, UpgradeCheckout, the
+     * Subscriptions header band and the loading overlay.
+     * @default `'#f8fafc'`
+     */
+    colorBackgroundSecondary?: string;
+    /**
+     * Borders of inputs, payment method tiles and secondary buttons. Also colours dividers and the details
+     * list once set.
+     * @default `'rgb(226 232 240)'`
+     */
+    colorBorder?: string;
+    /**
+     * Width of dividers, rings and borders. Controls (inputs, buttons, checkboxes, payment tabs) are 1px
+     * until this is set, and keep their height (44px, 32px compact) whatever the width.
+     * @default `'2px'`
+     */
+    borderWidth?: string;
+};
+type RuleProperty$1 = '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';
+/** The style a selector shared with the payment provider's fields takes: the properties the provider accepts. */
+type AppearanceSharedStyle = Partial<Record<RuleProperty$1, string>>;
+/** The style a Bunny-only selector takes. */
+type AppearanceStyle = AppearanceSharedStyle & {
+    background?: string;
+    fontVariantNumeric?: string;
+    opacity?: string;
+    /** @deprecated Layout is not part of `appearance` and this will be removed: size the element around the component instead. */
+    maxWidth?: string;
+    /** @deprecated Layout is not part of `appearance` and this will be removed: size the element around the component instead. */
+    minHeight?: string;
+};
+/**
+ * One key per public selector: roles (with their states) and regions. Shared selectors take
+ * `AppearanceSharedStyle`, Bunny-only ones `AppearanceStyle`.
+ */
+type AppearanceSelectorRules = {
+    /**
+     * 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 `11px 12px` padding (`12px` less the border), `20px` line, 1px (`borderWidth` when set) solid `colorBorder`
+     */
+    '.Input'?: AppearanceSharedStyle;
+    /** A text input under the pointer. Forwarded to the payment provider. @default `colorPrimary`'s hover shade border */
+    '.Input:hover'?: AppearanceSharedStyle;
+    /**
+     * A focused text input, and a multi-select's field while its text input has the focus. Forwarded to the
+     * payment provider. @default `colorPrimary` border and `focusBoxShadow`
+     */
+    '.Input:focus'?: AppearanceSharedStyle;
+    /**
+     * 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'?: AppearanceSharedStyle;
+    /**
+     * A disabled text input or select, as while a form saves. Forwarded to the payment provider.
+     * @default `colorTextDisabled` text on `colorBackgroundDisabled`
+     */
+    '.Input:disabled'?: AppearanceSharedStyle;
+    /** Placeholder text. Forwarded to the payment provider. @default `colorTextPlaceholder` */
+    '.Input::placeholder'?: AppearanceSharedStyle;
+    /**
+     * The compact variant: Bunny's 32px inputs and selects where 44px would be too heavy (the coupon row, a
+     * list's search box, the billing details' form, the quote's forms). Weighs `.Input` plus the variant, so
+     * your `.Input` padding leaves them compact: restyle them here. Bunny only: never handed to the payment
+     * provider, whose fields have no compact size. Not scopable, like every `.Input` key.
+     * @default `5px 12px` padding (`6px` less the border)
+     */
+    '.Input--compact'?: AppearanceSharedStyle;
+    /**
+     * Field labels, on Bunny's fields and the payment provider's alike.
+     * @default 14px, weight 500, `colorText`, 6px below
+     */
+    '.Label'?: AppearanceSharedStyle;
+    /**
+     * Validation messages under a field, on Bunny's fields and the payment provider's alike.
+     * @default 14px, `colorDanger`
+     */
+    '.Error'?: AppearanceSharedStyle;
+    /**
+     * Payment method tiles: Bunny's own and the payment provider's tabs. Bunny's are the payment plugins,
+     * saved payment methods and "New card" in Signup, Checkout and the payment form (in a longer list they are
+     * rows of the same role), and the saved payment methods listed in the billing details.
+     * @default 1px (`borderWidth` when set) solid `colorBorder`, `colorBackground`, weight 500
+     */
+    '.Tab'?: AppearanceSharedStyle;
+    /** A payment method tile under the pointer. Forwarded to the payment provider. @default `colorPrimary`'s hover shade border */
+    '.Tab:hover'?: AppearanceSharedStyle;
+    /** The chosen payment method. Forwarded to the payment provider (its `color` also tints Stripe's tab icon). @default `colorPrimary` border and text */
+    '.Tab--selected'?: AppearanceSharedStyle;
+    /** A focused payment method tile, selected or not. Forwarded to the payment provider. @default `focusBoxShadow` */
+    '.Tab:focus'?: AppearanceSharedStyle;
+    /**
+     * The primary action (the pay button). Bunny only. Sized like `.Input`: change its height through `padding`.
+     * @default filled with `colorPrimary`, `11px 16px` padding (`12px` less the border)
+     */
+    '.Button'?: AppearanceStyle;
+    /** The primary button under the pointer. @default `colorPrimary`'s hover shade */
+    '.Button:hover'?: AppearanceStyle;
+    /** The primary button while pressed. @default `colorPrimary`'s pressed shade */
+    '.Button:active'?: AppearanceStyle;
+    /** The primary button when disabled. @default `rgba(113, 125, 148, 0.1)` fill */
+    '.Button:disabled'?: AppearanceStyle;
+    /**
+     * The compact variant: 32px primary buttons beside compact inputs and in toolbars (the quote's, the coupon
+     * row's Apply, a modal's actions). Weighs `.Button` plus the variant, so your `.Button` padding leaves them
+     * compact: restyle them here. Bunny only.
+     * @default `5px 12px` padding (`6px` less the border)
+     */
+    '.Button--compact'?: AppearanceStyle;
+    /**
+     * 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 the padding with `padding`.
+     */
+    '.Summary'?: AppearanceStyle;
+    /**
+     * The form column's content: the form, or the confirmation after checkout. Bunny only. No default rule;
+     * capped and padded like `.Summary`.
+     */
+    '.Form'?: AppearanceStyle;
+    /**
+     * Bordered secondary actions (Download, Fullscreen). A role of its own, not drawn on a `.Button`: a
+     * `.Button` rule does not reach it. Bunny only. Sized like `.Button`.
+     * @default 1px (`borderWidth` when set) solid `colorBorder`, `colorBackground`, `colorText`
+     */
+    '.ButtonSecondary'?: AppearanceStyle;
+    /** A secondary button under the pointer. @default `colorPrimary`'s hover shade, border and text */
+    '.ButtonSecondary:hover'?: AppearanceStyle;
+    /** A disabled secondary button. @default `colorBorder` border, disabled fill and text */
+    '.ButtonSecondary:disabled'?: AppearanceStyle;
+    /** The compact variant of `.ButtonSecondary`, like `.Button--compact`. Bunny only. @default `5px 12px` padding (`6px` less the border) */
+    '.ButtonSecondary--compact'?: AppearanceStyle;
+    /**
+     * All text: body text (table cells, line items, details), and under every other text role. A muted
+     * text, a heading, an amount and an overline are each a `.Text` with their own role on top
+     * (`.TextSecondary`, `.Heading`, `.Amount`, `.Overline`), so a `color` or `fontFamily` here reaches them
+     * all. A rule for one of those roles, yours or ours, beats this one, so a heading keeps its size and
+     * muted text its colour unless you set them on that role. Bunny only. Body text's sizes (a step down or
+     * up the scale) and emphasis are internal variants this rule reaches too.
+     * @default `colorText`, `fontSizeBase`, `fontWeightNormal`, `1.4` line
+     */
+    '.Text'?: AppearanceStyle;
+    /**
+     * Muted text: captions, hints, line item details. A `.Text` with this role on top. Bunny only. In the footer, the words
+     * "Powered by" are one, inside a `.Link` whose colour and size they take.
+     * @default `colorTextSecondary`
+     */
+    '.TextSecondary'?: AppearanceStyle;
+    /**
+     * Headings: a page's title, a section's, a card's or a table's. A `.Text` with this role on top, so it
+     * takes `.Text`'s colour unless you set one here. Bunny only. The levels below the first
+     * are internal variants (`fontSizeXl`, `fontSizeLg`), so a `fontSize` here resizes every level; scope it to a
+     * region to change one place (`'.Invoice .Heading'`).
+     * @default 30px, `fontWeightBold`, `1.27` line, no margin
+     */
+    '.Heading'?: AppearanceStyle;
+    /** Prices and totals. A `.Text` with this role on top. Bunny only. @default tabular figures, `fontWeightMedium` */
+    '.Amount'?: AppearanceStyle;
+    /** The one large amount of a screen, such as what is due. Bunny only. @default 30px, `fontWeightBold`, `1.25` line */
+    '.Amount--display'?: AppearanceStyle;
+    /** Small upper-case labels over a group or a column. A `.Text` with this role on top. Bunny only. @default `fontSizeXs`, `fontWeightMedium`, `colorTextSecondary`, uppercase, the surrounding line height */
+    '.Overline'?: AppearanceStyle;
+    /** The line between sections. Bunny only. @default a 1px light hairline top border (your `colorBorder` when you set it), `16px 0` margin */
+    '.Divider'?: AppearanceStyle;
+    /**
+     * Links: the footer's, and the buttons drawn as links ("Have a coupon code?", Cancel, Back, the table
+     * pager, "Add new contact"). Bunny only.
+     * @default `colorTextSecondary`, no underline; the buttons drawn as links are `colorPrimary` until you set a `color`
+     */
+    '.Link'?: AppearanceStyle;
+    /** A link under the pointer. Bunny only. @default `colorText` (`colorPrimary`'s hover shade for the buttons drawn as links) */
+    '.Link:hover'?: AppearanceStyle;
+    /**
+     * Tags: small pills labelling a state, such as an invoice's status or a saved payment method's `Default`
+     * and `Failed`. Bunny only. A state's colour (green for paid, red for overdue, ...) is an internal variant,
+     * so a `color` or `backgroundColor` here recolours every tag.
+     * @default `0 10px` padding (20px tall), pill radius, `fontSizeSm`, `fontWeightMedium`, `colorText` on a
+     * faint fill derived from `colorText`
+     */
+    '.Tag'?: AppearanceStyle;
+    /** Toggle switches, off. Bunny only. @default pill, a quarter-strength fill derived from `colorText` */
+    '.Switch'?: AppearanceStyle;
+    /** Toggle switches, on. Bunny only. @default `colorPrimary` */
+    '.Switch--checked'?: AppearanceStyle;
+    /** Checkboxes (the box; the label is `.Text`), unticked. Bunny only. @default 1px (`borderWidth` when set) solid `colorBorder`, `borderRadius`, `colorBackground` */
+    '.Checkbox'?: AppearanceStyle;
+    /** Ticked checkboxes. Bunny only. @default `colorPrimary` fill and border, a `colorOnPrimary` tick */
+    '.Checkbox--checked'?: AppearanceStyle;
+    /**
+     * A row of exclusive choices drawn as pills in a track, such as the billing period picker. The track.
+     * Bunny only. @default a light grey (a faint fill derived from `colorText` when you set `colorText` or `colorBackground`), `6px` corners (your `borderRadius` when you set it), `4px` padding
+     */
+    '.Segmented'?: AppearanceStyle;
+    /** One choice of a `.Segmented`. Bunny only. @default `0 7px` padding and a transparent 1px border (24px high), `fontSizeXs`, `fontWeightNormal`, `colorText`, no fill */
+    '.SegmentedOption'?: AppearanceStyle;
+    /** The chosen option of a `.Segmented`. Bunny only. @default `colorPrimary` fill, `colorOnPrimary` text */
+    '.SegmentedOption--selected'?: AppearanceStyle;
+    /** A `.SegmentedOption` under the pointer. Bunny only. @default `colorPrimaryHover` text */
+    '.SegmentedOption:hover'?: AppearanceStyle;
+    /** The chosen option under the pointer. Bunny only. @default `colorPrimaryHover` fill, `colorOnPrimary` text */
+    '.SegmentedOption--selected:hover'?: AppearanceStyle;
+    /** Stand-ins for content that is loading. Bunny only. @default `borderRadius`, a faint fill derived from `colorText` */
+    '.Skeleton'?: AppearanceStyle;
+    /**
+     * Raised surfaces that group content. Bunny only.
+     * @default `colorBackground`, `6px` (your `borderRadius` when you set it), the card shadow
+     */
+    '.Card'?: AppearanceStyle;
+    /** A card under the pointer. Bunny only. No default: a clickable card shows a `colorPrimary` hover ring. */
+    '.Card:hover'?: AppearanceStyle;
+    /** The chosen card of a group, such as a plan. Bunny only. @default a `borderWidth` `colorPrimary` ring */
+    '.Card--selected'?: AppearanceStyle;
+    /**
+     * The paper an invoice or a quote is drawn on. Bunny only. Set `boxShadow` here to change its shadow.
+     * @default `colorBackground`, `6px` (your `borderRadius` when you set it), the card shadow, `16px 0` padding
+     */
+    '.Document'?: AppearanceStyle;
+    /** A table's surface, on top of `.Card`. Set `boxShadow` here to change its shadow. Bunny only. No default rule. */
+    '.Table'?: AppearanceStyle;
+    /** A column header cell; drawn on top of `.TableCell`, so a `.TableCell` rule reaches it and a `.TableHeaderCell` rule wins. Bunny only. @default `colorText`, `fontWeightBold`, line height `1` */
+    '.TableHeaderCell'?: AppearanceStyle;
+    /** A row: its `backgroundColor` fills the row's cells. Bunny only. No default rule. */
+    '.TableRow'?: AppearanceStyle;
+    /** Every other row. Bunny only. @default a fainter fill derived from `colorText` */
+    '.TableRow--alternate'?: AppearanceStyle;
+    /** A cell, in the header and in the rows. Bunny only. @default `16px` padding, `fontSizeBase`, `colorText` */
+    '.TableCell'?: AppearanceStyle;
+    /**
+     * The invoice: its `.Document` and the payment form (its `.Tab`s, `.Input`s and `.Button`). Bunny only. A
+     * region: scope roles to it (`'.Invoice .Document'`).
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Invoice'?: AppearanceStyle;
+    /**
+     * The footer: "Terms", "Privacy" and the "Powered by" Bunny link, all `.Link`s (small and muted here). The
+     * words "Powered by" are a `.TextSecondary` (a `.Text` in the secondary role) that takes its link's colour
+     * but keeps `.Text`'s size. Bunny only. A region: `'.Footer .Link'` restyles only its links.
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Footer'?: AppearanceStyle;
+    /**
+     * The invoices list: its title (a `.Heading`), search bar (a compact `.Input`) and `.Table`. Bunny only. A
+     * region: `'.Invoices .Heading'` restyles only the title (by default `fontSizeBase`, line height `1`). The
+     * detail view a row opens is a `.Drawer` or `.Modal`, outside the region.
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Invoices'?: AppearanceStyle;
+    /** The quotes list, laid out like `.Invoices`. Bunny only. A region. @default `colorText`, `fontFamily`, `fontSizeBase` */
+    '.Quotes'?: AppearanceStyle;
+    /** The transactions list, laid out like `.Invoices`. Bunny only. A region. @default `colorText`, `fontFamily`, `fontSizeBase` */
+    '.Transactions'?: AppearanceStyle;
+    /**
+     * The quote: its `.Document`, `.Heading`s, `.Text` and `.Button`s. Bunny only. A region: `'.Quote .Button'`
+     * restyles only the quote's buttons. The accept and payment hold modals render outside it: style them
+     * through `.Modal`.
+     * @default `colorText`, `fontFamily`
+     */
+    '.Quote'?: AppearanceStyle;
+    /**
+     * The billing details: the company name (a `.Heading`), the form's `.Input`s and `.Button`s and the saved
+     * payment methods (`.Tab`s with their `.Tag`s and a menu each), on one surface. Bunny only. A region: `'.BillingDetails .Button'` restyles only its buttons, and
+     * `'.BillingDetails .Heading'` the company name (by default 18px, `fontWeightMedium`, line height `28px`).
+     * @default `colorBackground`, `borderRadius`, the card shadow, `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.BillingDetails'?: AppearanceStyle;
+    /**
+     * The subscriptions list: a `.Card` per subscription (its product a `.Heading`, its state a `.Tag`), the
+     * "Show inactive" `.Checkbox` and the `.ButtonSecondary` above the list. Bunny only. A region: space the
+     * cards with `'.Subscriptions .Card': { marginBottom }`.
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Subscriptions'?: AppearanceStyle;
+    /**
+     * The plan picker: the billing period's `.Segmented`, the plans (a `.Card` each, the plan's name its
+     * `.Heading` and its price an `.Amount--display`; on a desktop the plans are columns of one `.Card`),
+     * the feature comparison (`.Card`s of rows of `.Text`, group titles as `.Overline`), the add-on plans
+     * (`.Card`s) and the sticky checkout bar (a `.Card` with the total and the checkout `.Button`). Bunny only.
+     * A region: `'.Upgrade .Heading'` restyles the plan names, `'.Upgrade .Card--selected'` the chosen plan.
+     * @default `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Upgrade'?: AppearanceStyle;
+    /**
+     * A drawer's panel, such as the quantity editor or a list's detail view: its header (the title and the
+     * close button) over the content (`.Text`, `.Divider`s, `.Button`s). The title is always a `.Text`; a rule
+     * for the title alone is not supported yet (`'.Drawer .Text'` also reaches the content's text). Bunny only.
+     * A region: `'.Drawer .Button'` restyles only the drawers' buttons. The content sits on
+     * `colorBackgroundSecondary` under a hairline in the border colour.
+     * @default `colorBackground`, `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Drawer'?: AppearanceStyle;
+    /**
+     * A modal's panel, such as accepting a quote, approving a payment hold (with the payment form) or adding a
+     * contact: its title, the content and the `.Button`s under it. The title is always a strong `.Text`; a rule for the title alone is not supported
+     * yet (`'.Modal .Text'` also reaches the content's text). Bunny only. A region: `'.Modal .Button'`
+     * restyles only the modals' buttons.
+     * @default `colorBackground`, `colorText`, `fontFamily`, `fontSizeBase`
+     */
+    '.Modal'?: AppearanceStyle;
+};
+/**
+ * The regions: the root of each exported component and the areas several screens share (Signup's and
+ * Checkout's `.Summary` and `.Form`, the `.Drawer` and `.Modal` panels), styleable themselves and the only
+ * scopes a compound rule can name (`'.Summary .Button'`). An area inside one screen is not a region: it is
+ * reached through the screen's root (`'.Upgrade .Heading'`). The engine reads this list; it is not
+ * exported from the package.
+ */
+declare const REGIONS: readonly [".Summary", ".Form", ".Invoice", ".Footer", ".Invoices", ".Quotes", ".Transactions", ".Quote", ".BillingDetails", ".Subscriptions", ".Upgrade", ".Drawer", ".Modal"];
+/** A region (see `REGIONS`). */
+type AppearanceRegion = (typeof REGIONS)[number];
+/** What a compound rule can be scoped to. Only regions: adding a scope later is non-breaking, removing one is not. */
+type AppearanceScope = AppearanceRegion;
+/** A state on a selector: a pseudo-class (`:hover`, `::placeholder`) or a state suffix (`--selected`). */
+type StateSuffix = `:${string}` | `--${string}`;
+/**
+ * The roots of the shared selectors: with their states, handed to the payment provider's fields too.
+ * Never scoped: a scoped shared rule would restyle our fields but not the payment provider's. The engine
+ * reads this list; it is not exported from the package.
+ */
+declare const SHARED_ROOTS: readonly [".Input", ".Label", ".Error", ".Tab"];
+/** A shared selector's root (see `SHARED_ROOTS`). */
+type SharedRoot = (typeof SHARED_ROOTS)[number];
+/** The selectors a region can scope: every Bunny-only role and its states, never a region or a key on a shared root. */
+type AppearanceScopable = Exclude<keyof AppearanceSelectorRules, AppearanceRegion | SharedRoot | `${SharedRoot}${StateSuffix}`>;
+/**
+ * Scoped rules: a Bunny-only role inside one region, such as `'.Summary .Button'` or
+ * `'.Summary .Button:hover'`. Bunny only: never forwarded to the payment provider. Inside the region
+ * a scoped rule beats the plain role rule (`.Button`), yours or ours, but not a state: scope the state
+ * too (`'.Summary .Button:hover'`). Outside the region it does nothing.
+ * Takes `AppearanceStyle`. Scoped keys carry no hover documentation of their own: read the plain
+ * role's and the region's.
+ */
+type AppearanceScopedRules = {
+    [K in keyof AppearanceSelectorRules as K extends AppearanceScopable ? `${AppearanceScope} ${K}` : never]?: AppearanceStyle;
+};
+/**
+ * Selector → style override: every public selector (`AppearanceSelectorRules`) plus the scoped rules
+ * (`AppearanceScopedRules`).
+ */
+type AppearanceRules = AppearanceSelectorRules & AppearanceScopedRules;
+/**
+ * A web font to use in `variables.fontFamily`: a stylesheet of `@font-face` rules, or one font file. It
+ * is loaded onto the page and into the payment fields (which render in an iframe), so your page needn't
+ * load it. System fonts need no entry.
+ */
+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 Bunny's components: `variables` feed the default rules, your `rules` are merged over them
+ * selector by selector, and `fonts` are loaded onto the page and into the payment fields. Set it on `BunnyProvider` for every
+ * component, or on a component to restyle that one on top. The payment provider's hosted fields (Stripe's
+ * Payment Element) follow the shared rules too. See "Styling components" in the package README.
+ * @example
+ * <BunnyProvider
+ *   apiHost="..."
+ *   token={token}
+ *   appearance={{
+ *     variables: { colorPrimary: '#14532d', colorBackgroundSecondary: '#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' }],
+ *   }}
+ * >
+ *   ...
+ * </BunnyProvider>
+ */
+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;
+    /**
+     * Web fonts for `variables.fontFamily`, loaded onto the page and into the payment fields. 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[];
+};
+
 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;
 };
-declare function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, }: InvoiceProps): react.JSX.Element;
+declare function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, style, appearance, }: InvoiceProps): react.JSX.Element;
 
 declare global {
     interface Window {
@@ -54,8 +1910,6 @@ type TableDisplayOptions<ColumnKey extends string> = {
     className?: string;
     /** A custom style to apply to the component */
     style?: React.CSSProperties;
-    /** Card shadow class */
-    shadow?: ShadowType;
     /** Whether to open the row detail in a modal instead of a drawer */
     useModal?: boolean;
     /** A custom class name to apply to the search bar */
@@ -83,7 +1937,7 @@ type InvoicesBehaviorOptions = TableBehaviorOptions & {
     /** Whether to hide the payment form on invoices */
     hidePaymentForm?: boolean;
 };
-declare function Invoices({ invoiceComponent, onInvoiceClick, filter, sort, displayOptions, behaviorOptions, }: {
+declare function Invoices({ invoiceComponent, onInvoiceClick, filter, sort, appearance, displayOptions, behaviorOptions, }: {
     /** A custom component to render instead of the default invoice component */
     invoiceComponent?: react__default.ReactNode;
     /** A function to call when an invoice is clicked */
@@ -94,6 +1948,8 @@ declare function Invoices({ invoiceComponent, onInvoiceClick, filter, sort, disp
     filter?: string;
     /** Sort clause applied server-side, e.g. `"createdAt DESC"` or `"amount ASC"`. */
     sort?: string;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
     displayOptions?: InvoicesDisplayOptions;
     behaviorOptions?: InvoicesBehaviorOptions;
 }): react__default.JSX.Element;
@@ -113,14 +1969,18 @@ type QuoteProps = InvoiceQuoteContextProps & {
     onQuoteUnavailableError?: () => void;
     suppressQuoteUnavailableErrorNotification?: boolean;
     onQuoteLoaded?: (formattedQuote: ResultOf<typeof OnQuoteLoadedFragment>) => void;
+    /** A custom style to apply to the component */
+    style?: CSSProperties;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
 };
-declare function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, onQuoteLoaded, onQuoteAccepted, onQuoteUnavailableError, suppressQuoteUnavailableErrorNotification, }: QuoteProps): react.JSX.Element;
+declare function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, className, hideDownloadButton, onQuoteLoaded, onQuoteAccepted, onQuoteUnavailableError, suppressQuoteUnavailableErrorNotification, style, appearance, }: QuoteProps): react.JSX.Element;
 
 type QuoteColumnKey = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';
 
 type QuotesDisplayOptions = TableDisplayOptions<QuoteColumnKey>;
 type QuotesBehaviorOptions = TableBehaviorOptions;
-declare function Quotes({ renderQuote, onQuoteClick, filter, sort, displayOptions, behaviorOptions, }: {
+declare function Quotes({ renderQuote, onQuoteClick, filter, sort, appearance, displayOptions, behaviorOptions, }: {
     /** Render a custom quote component. Receives the quote as a parameter. */
     renderQuote?: (quote: Quote$1) => React.ReactNode;
     /** A function to call when a quote is clicked */
@@ -131,6 +1991,8 @@ declare function Quotes({ renderQuote, onQuoteClick, filter, sort, displayOption
     filter?: string;
     /** Sort clause applied server-side, e.g. `"createdAt DESC"` or `"amount ASC"`. */
     sort?: string;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
     displayOptions?: QuotesDisplayOptions;
     behaviorOptions?: QuotesBehaviorOptions;
 }): react.JSX.Element;
@@ -152,14 +2014,22 @@ 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.)
+ */
 declare function Pay(props?: PayProps): react.JSX.Element;
 
-declare function Cancel(): react.JSX.Element;
+/** Closes the new payment method form by going back to the default saved method. Only shown when there is one. */
+declare function Cancel(): react.JSX.Element | null;
 
 type SaveButtonTextOverride = {
     text: string;
     isProcessingText: string;
 };
+/** Stores the payment method entered in the form, then closes the form again. */
 declare function Save({ onClickPrecondition, buttonTextOverride, }: {
     onClickPrecondition?: () => boolean | Promise<boolean>;
     buttonTextOverride?: SaveButtonTextOverride;
@@ -168,7 +2038,13 @@ declare function Save({ onClickPrecondition, buttonTextOverride, }: {
 type PaymentMethodDetailsProps = {
     footer?: ReactNode;
 };
-declare function PaymentMethodDetailsRoot(props?: PaymentMethodDetailsProps): 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): react.JSX.Element | null;
 declare const PaymentMethodDetails: typeof PaymentMethodDetailsRoot & {
     Cancel: typeof Cancel;
     Save: typeof Save;
@@ -177,11 +2053,17 @@ declare const PaymentMethodDetails: typeof PaymentMethodDetailsRoot & {
 type StoredPaymentMethodsProps = {
     className?: string;
 };
-declare function StoredPaymentMethods(props?: StoredPaymentMethodsProps): react.JSX.Element;
+/**
+ * The account's saved payment methods as tiles, then "New card", which opens the new payment method
+ * form. When paying, a tile is the method to pay with (the default is preselected; choosing another
+ * pays with it this once and leaves the default alone). When only saving (no invoice or quote), the
+ * tiles are cards to manage. Either way each has a menu to remove it or make it the default.
+ */
+declare function StoredPaymentMethods(props?: StoredPaymentMethodsProps): react.JSX.Element | null;
 
 declare const PaymentForm_PaymentMethodsFragment: gql_tada.TadaDocumentNode<{
     [$tada.fragmentRefs]: {
-        MiniCreditCard_PaymentMethodFragment: "PaymentMethod";
+        SavedPaymentMethodTiles_PaymentMethodFragment: "PaymentMethod";
     };
     id: string;
     plugin: {
@@ -193,6 +2075,8 @@ declare const PaymentForm_PaymentMethodsFragment: gql_tada.TadaDocumentNode<{
     masked: true;
 }>;
 
+type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
+
 declare const PaymentForm_QuoteFragment: gql_tada.TadaDocumentNode<{
     id: string | null;
     currencyId: string;
@@ -205,7 +2089,6 @@ declare const PaymentForm_QuoteFragment: gql_tada.TadaDocumentNode<{
     masked: true;
 }>;
 
-type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
 declare const PaymentForm_InvoiceFragment: gql_tada.TadaDocumentNode<{
     id: string | null;
     currencyId: string;
@@ -239,10 +2122,14 @@ declare function PaymentFormRoot({ currencyId: accountCurrencyId, invoice: maske
 type PaymentFormProps = ComponentProps<typeof PaymentFormRoot>;
 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;
@@ -255,666 +2142,6 @@ declare const PaymentForm: typeof PaymentFormInternal & {
     NoPaymentPluginsAlert: typeof NoPaymentPluginsAlert;
 };
 
-/** 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;
@@ -979,10 +2206,10 @@ 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 */
@@ -1004,9 +2231,15 @@ type CheckoutProps = CheckoutFlowProps & {
 /** 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, }: {
+/** @deprecated Use `AppearanceStyle`. */
+type AppearanceBlockStyle = AppearanceStyle;
+/** @deprecated Use AppearanceSharedStyle. */
+type AppearanceRuleStyle = AppearanceSharedStyle;
+/** @deprecated Use `keyof AppearanceSharedStyle`. */
+type RuleProperty = RuleProperty$1;
+
+declare function BunnyProvider({ children, queryClient, apiHost, token, onTokenExpired, onUserUnavailable, onInvalidOrMissingAuthorization, suppressUserUnavailableErrorNotification, disableErrorNotifications, appearance, }: {
     children: React.ReactNode;
-    darkMode?: boolean;
     queryClient?: QueryClient;
     apiHost: string;
     token?: string;
@@ -1015,7 +2248,8 @@ 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;
 }): react.JSX.Element;
 
 type TransactionDateType = 'createdAt' | 'issuedAt' | 'dueAt';
@@ -1029,7 +2263,7 @@ type TransactionsBehaviorOptions = TableBehaviorOptions & {
     /** Whether to hide the payment form on invoices */
     hidePaymentForm?: boolean;
 };
-declare function Transactions({ transactionComponent, onTransactionClick, filter, sort, displayOptions, behaviorOptions, }: {
+declare function Transactions({ transactionComponent, onTransactionClick, filter, sort, appearance, displayOptions, behaviorOptions, }: {
     /** A custom component to render instead of the default invoice component */
     transactionComponent?: react__default.ReactNode;
     /** A function to call when a transaction is clicked */
@@ -1040,21 +2274,22 @@ declare function Transactions({ transactionComponent, onTransactionClick, filter
     filter?: string;
     /** Sort clause applied server-side, e.g. `"createdAt DESC"` or `"amount ASC"`. */
     sort?: string;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
     displayOptions?: TransactionsDisplayOptions;
     behaviorOptions?: TransactionsBehaviorOptions;
 }): react__default.JSX.Element;
 
-declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, onSubscriptionUpgradeClick, }: {
+declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, style, appearance, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, onSubscriptionUpgradeClick, }: {
     handlePortalErrors?: (errors: any) => void;
     companyName: string;
     isInPreviewMode?: boolean;
     productId?: string;
     className?: string;
-    styles?: {
-        gap?: number;
-        shadow?: "none" | "sm" | "md" | "lg";
-        subscriptionProductNameStyle?: React.CSSProperties;
-    };
+    /** A custom style to apply to the component */
+    style?: React.CSSProperties;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
     noSubscriptionsComponent?: React.ReactNode;
     showInactiveSubscriptions?: boolean;
     showInactiveSubscriptionsToggle?: boolean;
@@ -1063,7 +2298,7 @@ declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPrev
     onSubscriptionUpgradeClick?: (subscriptionId: string) => void;
 }) => react.JSX.Element;
 
-declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, defaultBillingPeriod, }: {
+declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, style, appearance, defaultBillingPeriod, }: {
     onChangePlanCancel?: () => void;
     handlePortalErrors?: (error: any) => void;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
@@ -1072,14 +2307,17 @@ declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, onPayme
     isInPreviewMode?: boolean;
     productId?: string | undefined;
     className?: string;
-    shadow?: "none" | "sm" | "md" | "lg";
+    /** A custom style to apply to the component */
+    style?: React.CSSProperties;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
     /**
      * If provided and the billing period is available, the billing period selector will default to this value.
      */
     defaultBillingPeriod?: "ONCE" | "MONTHLY" | "QUARTERLY" | "SEMI_ANNUAL" | "ANNUAL";
 }) => react.JSX.Element | null;
 
-declare const BillingDetails: ({ countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isUpgradeFromTrial, style, onSavePaymentMethod, onPaymentMethodRemoved, }: {
+declare const BillingDetails: ({ countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isUpgradeFromTrial, style, className, appearance, onSavePaymentMethod, onPaymentMethodRemoved, }: {
     countryListFilter?: (country: {
         value: string;
         label: string;
@@ -1088,12 +2326,18 @@ 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;
 }) => react.JSX.Element;
 
-declare const Footer: ({ className }: {
+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;
 }) => react.JSX.Element;
 
 declare const MiniCreditCard_PaymentMethodFragment: gql_tada.TadaDocumentNode<{
@@ -1114,6 +2358,12 @@ declare const MiniCreditCard_PaymentMethodFragment: gql_tada.TadaDocumentNode<{
     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.
+ */
 declare function MiniCreditCard({ className, buttons, hideDropdownMenu, hideDefaultTag, onClickRemove, paymentMethod: maskedPaymentMethod, onClickSetDefault, id, }: {
     className?: string;
     buttons?: React.ReactNode;
@@ -1126,4 +2376,4 @@ declare function MiniCreditCard({ className, buttons, hideDropdownMenu, hideDefa
 }): react.JSX.Element;
 
 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 };
+export type { Appearance, AppearanceBlockStyle, AppearanceFont, AppearanceRuleStyle, AppearanceRules, AppearanceSharedStyle, AppearanceStyle, AppearanceVariables, CheckoutCallbacks, CheckoutDefaultValues, CheckoutDisabledFields, CheckoutFormOptions, CheckoutProps, FormattedInvoice, RequiredBillingDetailsFlags, RuleProperty, SignupProps };