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

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,84 +2142,104 @@ declare const PaymentForm: typeof PaymentFormInternal & {
     NoPaymentPluginsAlert: typeof NoPaymentPluginsAlert;
 };
 
-type DefaultSignupValues = {
+/** Every value the checkout form can hold. Only `email` is shown by default. */
+type CheckoutFormValues = {
+    email: string;
+    billingCountry: string;
+    billingZip?: string;
+    /** The payer's name on the card or bank account, Stripe only. Never sent to the API. */
+    nameOnCard?: string;
     firstName?: string;
     lastName?: string;
-    email?: string;
     accountName?: string;
-    billingCountry?: string;
-    billingState?: string;
-    billingCity?: string;
-    billingZip?: string;
     billingStreet?: string;
+    billingCity?: string;
+    billingState?: string;
     taxNumber?: string;
 };
-/** Extra account billing fields (shown in “Account billing details”) when the flag is true. */
+type CheckoutDefaultValues = Partial<Omit<CheckoutFormValues, 'nameOnCard'>>;
+/**
+ * Optional fields to show and require. Email is always shown; the taxation plugin can add country,
+ * state or others on top of these (see `resolveCheckoutFields`).
+ */
 type RequiredBillingDetailsFlags = {
-    billingCountry?: boolean;
-    billingState?: boolean;
+    firstName?: boolean;
+    lastName?: boolean;
+    accountName?: boolean;
+    billingStreet?: boolean;
     billingCity?: boolean;
+    billingState?: boolean;
     billingZip?: boolean;
-    billingStreet?: boolean;
     taxNumber?: boolean;
 };
-
-/**
- * Customer-facing callbacks fired by the Signup component during its lifecycle.
- * All callbacks are optional. Add new events here rather than as new props on Signup.
- */
-type SignupCallbacks = {
-    onPaymentMethodSaved?: () => void;
-    onPaymentMethodRemoved?: () => void;
-    onQuoteAccepted?: (quoteId: string) => void;
-    onPaymentSuccess?: () => void;
-    onPaymentHoldSuccess?: () => void;
-};
-
-/** Fields that can be disabled. Same keys as `DefaultSignupValues`. */
-type DisabledSignupFields = Partial<Record<keyof DefaultSignupValues, boolean>>;
+/** Fields that can be disabled. Same keys as `CheckoutDefaultValues`. */
+type CheckoutDisabledFields = Partial<Record<keyof CheckoutDefaultValues, boolean>>;
 /**
- * Customer-facing form configuration for the Signup component.
- * All options are optional. Add new form options here rather than as new props on Signup.
+ * Customer-facing form configuration for the Signup and Checkout components.
+ * All options are optional. Add new form options here rather than as new props on the components.
  */
-type SignupFormOptions = {
-    /** The default form values to use for the signup */
-    defaultValues?: DefaultSignupValues;
-    /** Which account billing fields to show and require */
+type CheckoutFormOptions = {
+    /** The default form values */
+    defaultValues?: CheckoutDefaultValues;
+    /** Which optional account fields to show and require */
     requiredBillingDetails?: RequiredBillingDetailsFlags;
     /**
      * Fields the user cannot edit. Provide a default value for each disabled field:
-     * all fields are required, so an empty disabled field blocks the signup.
+     * a required disabled field without a value blocks the checkout.
      */
-    disabledFields?: DisabledSignupFields;
+    disabledFields?: CheckoutDisabledFields;
+};
+/**
+ * Customer-facing callbacks fired by the Signup and Checkout components during their lifecycle.
+ * All callbacks are optional. Add new events here rather than as new props on the components.
+ */
+type CheckoutCallbacks = {
+    /** The subscription was checked out (paid, or free / trial). */
+    onPaymentSuccess?: () => void;
 };
 
-type SignupProps = {
+/** The props Signup and Checkout share. */
+type CheckoutFlowProps = {
     priceListCode: string;
-    /** If trial is allowed on priceList, enableTrial will enable the trial for the signup */
+    /** If trial is allowed on the price list, enableTrial will enable the trial for this checkout */
     enableTrial?: boolean;
     /** A custom style to apply to the component */
     style?: React.CSSProperties;
-    /** Form configuration: default values, required billing details and disabled fields */
-    form?: SignupFormOptions;
-    /** @deprecated Use `form.defaultValues` instead */
-    defaultFormValues?: DefaultSignupValues;
-    /** Whether to require quote acceptance before checking out */
-    paymentRequiredToAcceptQuote?: boolean;
-    /** The document template ID to apply to the quote for the signup */
-    documentTemplateId?: string;
-    /** @deprecated Use `form.requiredBillingDetails` instead */
-    requiredBillingDetails?: RequiredBillingDetailsFlags;
+    /**
+     * Restyles 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 */
+    form?: CheckoutFormOptions;
     /** A default coupon code to pre-apply to the checkout */
     defaultCouponCode?: string;
-    /** Callbacks fired at key signup lifecycle events */
-    callbacks?: SignupCallbacks;
+    /** Callbacks fired at key lifecycle events */
+    callbacks?: CheckoutCallbacks;
 };
-declare function Signup({ priceListCode, enableTrial, style, form, defaultFormValues, paymentRequiredToAcceptQuote, documentTemplateId, requiredBillingDetails, defaultCouponCode, callbacks, }: SignupProps): react.JSX.Element;
 
-declare function BunnyProvider({ children, darkMode, queryClient, apiHost, token, onTokenExpired, onUserUnavailable, onInvalidOrMissingAuthorization, suppressUserUnavailableErrorNotification, disableErrorNotifications, configProviderProps, }: {
+type SignupProps = CheckoutFlowProps;
+/** Self-service signup: creates the account and its first subscription in one click. Needs an API client token with the signup scopes. */
+declare function Signup({ style, ...props }: SignupProps): react.JSX.Element;
+
+type CheckoutProps = CheckoutFlowProps & {
+    /** ID of a document template to render the quote with. When set, the quote PDF is shown under the summary. */
+    documentTemplateId?: string;
+};
+/** 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;
+
+/** @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;
@@ -341,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';
@@ -355,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 */
@@ -366,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;
@@ -389,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;
@@ -398,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;
@@ -414,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<{
@@ -440,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;
@@ -451,5 +2375,5 @@ declare function MiniCreditCard({ className, buttons, hideDropdownMenu, hideDefa
     id?: string;
 }): react.JSX.Element;
 
-export { BillingDetails, BunnyProvider, Footer, Invoice, Invoices, MiniCreditCard, PaymentForm, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions, UpgradeWrapper as Upgrade };
-export type { DefaultSignupValues, DisabledSignupFields, RequiredBillingDetailsFlags, SignupCallbacks, SignupFormOptions, SignupProps };
+export { BillingDetails, BunnyProvider, Checkout, Footer, Invoice, Invoices, MiniCreditCard, PaymentForm, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions, UpgradeWrapper as Upgrade };
+export type { Appearance, AppearanceBlockStyle, AppearanceFont, AppearanceRuleStyle, AppearanceRules, AppearanceSharedStyle, AppearanceStyle, AppearanceVariables, CheckoutCallbacks, CheckoutDefaultValues, CheckoutDisabledFields, CheckoutFormOptions, CheckoutProps, FormattedInvoice, RequiredBillingDetailsFlags, RuleProperty, SignupProps };