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

package/dist/esm/types/src/components/tables/InfiniteTable/InfiniteTable.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { ShadowType } from '../../../types/shadowType';
 import { Column, CursorPage, InfiniteTableQueryArgs } from './types';
 type Props<T> = {
     /** Base cache key. `rowsPerPage` is appended automatically. */
@@ -18,12 +17,10 @@ type Props<T> = {
     renderEmpty?: () => ReactNode;
     /** Force a page size. When omitted the table auto-sizes to the viewport. Must be 1-100. */
     rowsPerPage?: number;
-    /** Card shadow class. */
-    shadow?: ShadowType;
     className?: string;
     style?: React.CSSProperties;
     /** Escape hatch: on mobile, render each row with this callback instead of the columns grid. */
     renderMobileRow?: (row: T) => ReactNode;
 };
-declare function InfiniteTable<T>({ queryKey, queryFn, getRowKey, columns, onRowClick, emptyMessage, renderEmpty, rowsPerPage, shadow, className, style, renderMobileRow, }: Props<T>): import("react").JSX.Element;
+declare function InfiniteTable<T>({ queryKey, queryFn, getRowKey, columns, onRowClick, emptyMessage, renderEmpty, rowsPerPage, className, style, renderMobileRow, }: Props<T>): import("react").JSX.Element;
 export default InfiniteTable;

package/dist/esm/types/src/components/tables/InfiniteTable/InfiniteTable.rules.d.ts

@@ -0,0 +1,85 @@
+import type { ResolvedVariables } from '../../../ui/appearance/variables';
+export declare function infiniteTableRules(v: ResolvedVariables): {
+    internal: {
+        '.TableRow > .TableCell': {
+            backgroundColor: string;
+        };
+        '.TableRow .ShowOnHover': {
+            opacity: string;
+        };
+        '.TableRow:hover .ShowOnHover': {
+            opacity: string;
+        };
+        '.Text.TableCaption': {
+            fontSize: string;
+        };
+        '.TablePager': {
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+        };
+        '.Link.ButtonLink.PagerButton': {
+            color: string;
+        };
+        '.Link.ButtonLink.PagerButton:hover': {
+            color: string;
+        };
+        '.Link--current': {
+            color: string;
+            fontWeight: string;
+        };
+        '.Input--compact.SearchInput': {
+            paddingTop: string;
+            paddingBottom: string;
+            borderWidth: string;
+        };
+        '.SearchIcon': {
+            color: string;
+        };
+    };
+    public: {
+        '.Table': {};
+        '.TableCell': {
+            padding: string;
+            fontSize: string;
+            color: string;
+        };
+        '.TableHeaderCell': {
+            color: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        '.TableRow': {};
+        '.TableRow--alternate': {
+            backgroundColor: string;
+        };
+        '.Invoices .Heading': {
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.Quotes .Heading': {
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.Transactions .Heading': {
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.Invoices': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+        '.Quotes': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+        '.Transactions': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+};

package/dist/esm/types/src/components/tables/InfiniteTable/InfiniteTableGridCell.d.ts

@@ -1,2 +1,8 @@
-declare const InfiniteTableGridCell: any;
-export default InfiniteTableGridCell;
+import type { ReactNode } from 'react';
+/** One cell of the table's grid, for a header or a row. Look comes from the `.TableCell` (and `.TableHeaderCell`) rules. */
+export default function InfiniteTableGridCell({ right, head, gridColumn, children, }: {
+    right?: boolean;
+    head?: boolean;
+    gridColumn?: string | number;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/esm/types/src/components/tables/InfiniteTable/types.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { ShadowType } from '../../../types/shadowType';
 export type { CursorPage } from '../../../graphql/queries/paginatedQuery';
 export type ColumnAlign = 'left' | 'right';
 export type Column<T> = {
@@ -34,8 +33,6 @@ export 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 */

package/dist/esm/types/src/components/tables/Invoices/Invoices.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import Invoice from '@/types/Invoice';
+import Invoice from '../../../types/Invoice';
+import type { Appearance } from '../../../ui/appearance';
 import { TableBehaviorOptions, TableDisplayOptions } from '../InfiniteTable';
 import { InvoiceColumnKey, InvoiceDateType } from './invoicesList/getInvoiceColumns';
 export type InvoicesDisplayOptions = TableDisplayOptions<InvoiceColumnKey>;
@@ -9,7 +10,7 @@ export type InvoicesBehaviorOptions = TableBehaviorOptions & {
     /** Whether to hide the payment form on invoices */
     hidePaymentForm?: boolean;
 };
-export default function Invoices({ invoiceComponent, onInvoiceClick, filter, sort, displayOptions, behaviorOptions, }: {
+export default function Invoices({ invoiceComponent, onInvoiceClick, filter, sort, appearance, displayOptions, behaviorOptions, }: {
     /** A custom component to render instead of the default invoice component */
     invoiceComponent?: React.ReactNode;
     /** A function to call when an invoice is clicked */
@@ -20,6 +21,8 @@ export default function Invoices({ invoiceComponent, onInvoiceClick, filter, sor
     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.JSX.Element;

package/dist/esm/types/src/components/tables/Invoices/Invoices.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Invoices from './Invoices';
+declare const meta: Meta<typeof Invoices>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithModal: Story;
+export declare const Mobile: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/tables/Invoices/invoicesList/getInvoiceColumns.d.ts

@@ -1,4 +1,4 @@
-import Invoice from '@/types/Invoice';
+import Invoice from '../../../../types/Invoice';
 import { Column } from '../../InfiniteTable';
 export type InvoiceColumnKey = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';
 export type InvoiceDateType = 'createdAt' | 'issuedAt' | 'dueAt';

package/dist/esm/types/src/components/tables/Quotes/Quotes.d.ts

@@ -1,9 +1,10 @@
-import { Quote } from '@/types/Quote';
+import { Quote } from '../../../types/Quote';
+import type { Appearance } from '../../../ui/appearance';
 import { TableBehaviorOptions, TableDisplayOptions } from '../InfiniteTable';
 import { QuoteColumnKey } from './quotesList/getQuoteColumns';
 export type QuotesDisplayOptions = TableDisplayOptions<QuoteColumnKey>;
 export 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) => React.ReactNode;
     /** A function to call when a quote is clicked */
@@ -14,6 +15,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;
 }): import("react").JSX.Element;

package/dist/esm/types/src/components/tables/Quotes/Quotes.stories.d.ts

@@ -4,8 +4,6 @@ declare const meta: Meta<typeof Quotes>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Padding0BGRed: Story;
-export declare const NoShadow: Story;
 export declare const WithModal: Story;
 export declare const HideSearchBar: Story;
 export declare const HideTitle: Story;
@@ -18,5 +16,5 @@ export declare const WithCustomColumns2: Story;
 export declare const WithCustomColumns3: Story;
 export declare const WithCustomColumns4: Story;
 export declare const WithCustomColumns5: Story;
-export declare const DarkMode: Story;
-export declare const CustomColors: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/tables/Quotes/quotesList/getQuoteColumns.d.ts

@@ -1,4 +1,4 @@
-import { Quote, QuoteState } from '@/types/Quote';
+import { Quote, QuoteState } from '../../../../types/Quote';
 import { Column } from '../../InfiniteTable';
 export type QuoteColumnKey = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';
 declare const QuoteStateTag: ({ state }: {

package/dist/esm/types/src/components/tables/Transactions/Transactions.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Transaction } from '@/types/Transaction';
+import { Transaction } from '../../../types/Transaction';
 import { TransactionDateType } from './types';
+import type { Appearance } from '../../../ui/appearance';
 import { TableBehaviorOptions, TableDisplayOptions } from '../InfiniteTable';
 import { TransactionListColumnType } from './transactionsList/getTransactionColumns';
 export type TransactionsDisplayOptions = TableDisplayOptions<TransactionListColumnType>;
@@ -10,7 +11,7 @@ export type TransactionsBehaviorOptions = TableBehaviorOptions & {
     /** Whether to hide the payment form on invoices */
     hidePaymentForm?: boolean;
 };
-export default function Transactions({ transactionComponent, onTransactionClick, filter, sort, displayOptions, behaviorOptions, }: {
+export default function Transactions({ transactionComponent, onTransactionClick, filter, sort, appearance, displayOptions, behaviorOptions, }: {
     /** A custom component to render instead of the default invoice component */
     transactionComponent?: React.ReactNode;
     /** A function to call when a transaction is clicked */
@@ -21,6 +22,8 @@ export default function Transactions({ transactionComponent, onTransactionClick,
     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.JSX.Element;

package/dist/esm/types/src/components/tables/Transactions/Transactions.stories.d.ts

@@ -4,8 +4,6 @@ declare const meta: Meta<typeof Transactions>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Padding0BGRed: Story;
-export declare const NoShadow: Story;
 export declare const WithModal: Story;
 export declare const HideSearchBar: Story;
 export declare const HideTitle: Story;
@@ -18,5 +16,5 @@ export declare const WithCustomColumns2: Story;
 export declare const WithCustomColumns3: Story;
 export declare const WithCustomColumns4: Story;
 export declare const WithCustomColumns5: Story;
-export declare const DarkMode: Story;
-export declare const CustomColors: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/tables/Transactions/transactionsList/getTransactionColumns.d.ts

@@ -1,4 +1,4 @@
-import { Transaction } from '@/types/Transaction';
+import { Transaction } from '../../../../types/Transaction';
 import { TransactionDateType } from '../types';
 import { Column } from '../../InfiniteTable';
 export type TransactionListColumnType = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';

package/dist/esm/types/src/contexts/InvoiceQuoteContext.d.ts

@@ -1,5 +1,4 @@
-import { ShadowType } from '../types/shadowType';
-import FormattedInvoice from '@/types/FormattedInvoice';
+import FormattedInvoice from '../types/FormattedInvoice';
 export type InvoiceQuoteContextProps = {
     id?: string | null | undefined;
     invoiceQuoteViewComponent?: React.ReactNode;
@@ -7,7 +6,6 @@ export type InvoiceQuoteContextProps = {
     onBackButtonClick?: () => void;
     onInvoiceDownloadError?: () => void;
     onPaymentSuccess?: (savePaymentMethod?: boolean) => void;
-    shadow?: ShadowType;
     className?: string;
     hideDownloadButton?: boolean;
     onInvoiceLoaded?: (formattedInvoice: FormattedInvoice) => void;

package/dist/esm/types/src/hooks/useFocusFirstInput.d.ts

@@ -1,7 +1,6 @@
-import { InputRef } from "antd";
-import { RefObject } from "react";
+import { RefObject } from 'react';
 declare const useFocusFirstInput: ({ firstInputRef, isVisible, }: {
-    firstInputRef: RefObject<InputRef>;
+    firstInputRef: RefObject<HTMLInputElement>;
     isVisible?: boolean;
 }) => void;
 export default useFocusFirstInput;

package/dist/esm/types/src/hooks/usePaymentMethod.d.ts

@@ -23,8 +23,6 @@ export declare const getPaymentMethods: ({ apiHost, token, accountId, }: {
     isDefault: boolean | null;
     [$tada.fragmentRefs]: {
         PaymentForm_PaymentMethodsFragment: "PaymentMethod";
-    } & {
-        StoredPaymentMethods_PaymentMethodsFragment: "PaymentMethod";
     } & {
         SavedPaymentMethodTiles_PaymentMethodFragment: "PaymentMethod";
     } & {
@@ -56,8 +54,6 @@ export declare const usePaymentMethod: ({ accountId, enabled, }: {
         isDefault: boolean | null;
         [$tada.fragmentRefs]: {
             PaymentForm_PaymentMethodsFragment: "PaymentMethod";
-        } & {
-            StoredPaymentMethods_PaymentMethodsFragment: "PaymentMethod";
         } & {
             SavedPaymentMethodTiles_PaymentMethodFragment: "PaymentMethod";
         } & {
@@ -85,8 +81,6 @@ export declare const usePaymentMethod: ({ accountId, enabled, }: {
         isDefault: boolean | null;
         [$tada.fragmentRefs]: {
             PaymentForm_PaymentMethodsFragment: "PaymentMethod";
-        } & {
-            StoredPaymentMethods_PaymentMethodsFragment: "PaymentMethod";
         } & {
             SavedPaymentMethodTiles_PaymentMethodFragment: "PaymentMethod";
         } & {

package/dist/esm/types/src/mocks/paymentFormHandlers.d.ts

@@ -0,0 +1,6 @@
+export declare function paymentFormHandlers({ savedCards, plugins, failedCard, }?: {
+    savedCards?: number;
+    plugins?: number;
+    /** The second saved card's last payment failed. */
+    failedCard?: boolean;
+}): (import("msw").GraphQLHandler | import("msw").HttpHandler)[];

package/dist/esm/types/src/storybook-utils.d.ts

@@ -1,10 +1,21 @@
-export declare const DarkModeParams: {
-    darkMode: boolean;
-    backgrounds: {
-        default: string;
-        values: {
-            name: string;
+/**
+ * A dark story canvas, for themes (like Midnight) whose own variables are dark. Storybook 10's
+ * backgrounds API: the option is declared in `parameters`, the choice in `globals`.
+ */
+export declare const darkCanvas: {
+    parameters: {
+        backgrounds: {
+            options: {
+                dark: {
+                    name: string;
+                    value: string;
+                };
+            };
+        };
+    };
+    globals: {
+        backgrounds: {
             value: string;
-        }[];
+        };
     };
 };

package/dist/esm/types/src/types/CreditNote.d.ts

@@ -4,7 +4,7 @@ import DisputeReason from './DisputeReason';
 import Entity from './Entity';
 import CreditNoteItem from './CreditNoteItem';
 import InvoiceConnection from './InvoiceConnection';
-import CreditNoteState from '@/enums/CreditNoteState';
+import CreditNoteState from '../enums/CreditNoteState';
 export type CreditNoteKind = 'REFUND' | 'WRITE_OFF';
 type CreditNote = {
     account: Account;

package/dist/esm/types/src/types/Feature.d.ts

@@ -1,4 +1,4 @@
-import { ChargeType } from '@/graphql-codegen/exportedScalarTypes';
+import { ChargeType } from './scalarTypes';
 import { Plan } from './Plan';
 export type FeatureKind = 'BOOLEAN' | 'VALUE' | 'MARKETING' | 'GROUP' | 'QUANTITY';
 type Feature = {

package/dist/esm/types/src/types/FormattedInvoice.d.ts

@@ -35,7 +35,7 @@ type FormattedInvoice = {
     poNumber?: string;
     printedState?: string;
     salesContactEmail?: string;
-    smallUnitAmountDUe?: number;
+    smallUnitAmountDue?: number;
     state: State;
     subscriptionEndDate?: string;
     subscriptionStartDate?: string;

package/dist/esm/types/src/types/InvoiceItem.d.ts

@@ -1,7 +1,7 @@
 import PriceTier from './PriceTier';
 import QuoteCharge from './QuoteCharge';
 import { SubscriptionCharge } from './SubscriptionCharge';
-import QuoteChangeKind from '@/enums/QuoteChangeKind';
+import QuoteChangeKind from '../enums/QuoteChangeKind';
 import Invoice from './Invoice';
 import CreditNoteItem from './CreditNoteItem';
 type InvoiceItem = {

package/dist/esm/types/src/types/PriceList.d.ts

@@ -1,5 +1,5 @@
-import PriceAdjustmentAction from '@/enums/PriceAdjustmentAction';
-import PriceAdjustmentTiming from '@/enums/PriceAdjustmentTiming';
+import PriceAdjustmentAction from '../enums/PriceAdjustmentAction';
+import PriceAdjustmentTiming from '../enums/PriceAdjustmentTiming';
 import Currency from './Currency';
 import { Plan } from './Plan';
 import { PriceListCharge } from './PriceListCharge';

package/dist/esm/types/src/types/PriceListCharge.d.ts

@@ -2,7 +2,7 @@ import PriceList from './PriceList';
 import PriceListChargeTier from './PriceListChargeTier';
 import { Plan } from './Plan';
 import Feature from './Feature';
-import { BillingPeriod, ChargeType } from '@/graphql-codegen/exportedScalarTypes';
+import { BillingPeriod, ChargeType } from './scalarTypes';
 export declare enum UsageCalculationType {
     SUM = "SUM",
     MAX = "MAX",

package/dist/esm/types/src/types/Quote.d.ts

@@ -1,4 +1,4 @@
-import { QuoteChangeKind } from '@/graphql-codegen/exportedScalarTypes';
+import { QuoteChangeKind } from './scalarTypes';
 import Account from './Account';
 import ApprovalRequest from './ApprovalRequest';
 import ApprovalRule from './ApprovalRule';

package/dist/esm/types/src/types/QuoteChange.d.ts

@@ -1,4 +1,4 @@
-import { QuoteChangeKind } from '@/graphql-codegen/exportedScalarTypes';
+import { QuoteChangeKind } from './scalarTypes';
 import PriceList from './PriceList';
 import { Quote } from './Quote';
 import QuoteCharge from './QuoteCharge';

package/dist/esm/types/src/types/QuoteCharge.d.ts

@@ -4,9 +4,9 @@ import PriceTier from './PriceTier';
 import PriceList from './PriceList';
 import { PriceListCharge } from './PriceListCharge';
 import { SubscriptionCharge } from './SubscriptionCharge';
-import { ChargeType } from '@/graphql-codegen/exportedScalarTypes';
+import { ChargeType } from './scalarTypes';
 import { AmountByPeriod } from './Quote';
-import { BillingPeriod } from '@/graphql-codegen/exportedScalarTypes';
+import { BillingPeriod } from './scalarTypes';
 import Coupon from './Coupon';
 import QuoteChange from './QuoteChange';
 export type QuoteCharge = {

package/dist/esm/types/src/types/SubscriptionCharge.d.ts

@@ -1,4 +1,4 @@
-import { BillingPeriod, ChargeType, QuoteChangeKind } from '@/graphql-codegen/exportedScalarTypes';
+import { BillingPeriod, ChargeType, QuoteChangeKind } from './scalarTypes';
 import Account from './Account';
 import Currency from './Currency';
 import Feature from './Feature';

package/dist/esm/types/src/types/frontendTypes/TableColumn.d.ts

@@ -1,4 +1,4 @@
-import ColumnFormat from '@/enums/ColumnFormat';
+import ColumnFormat from '../../enums/ColumnFormat';
 type TableColumn = {
     droppable?: boolean;
     format?: ColumnFormat;

package/dist/esm/types/src/types/scalarTypes.d.ts

@@ -0,0 +1,3 @@
+export type QuoteChangeKind = 'ACTIVATE' | 'ADJUSTMENT' | 'COUPON' | 'CREDIT' | 'DISCOUNT' | 'FREE_PERIOD_DISCOUNT' | 'PERCENTAGE_DISCOUNT' | 'PRICE_UPDATE' | 'QUANTITY_UPDATE' | 'REINSTATE' | 'RENEW' | 'SUBSCRIBE' | 'UNSUBSCRIBE' | 'UPDATE';
+export type ChargeType = 'ONE_TIME' | 'RECURRING' | 'USAGE';
+export type BillingPeriod = 'ANNUAL' | 'MONTHLY' | 'ONCE' | 'QUARTERLY' | 'SEMI_ANNUAL';

package/dist/esm/types/src/types/scalarTypes.types.test.d.ts

@@ -0,0 +1,5 @@
+import type * as Schema from '../graphql-codegen/exportedScalarTypes';
+import type * as Written from './scalarTypes';
+export declare const _quoteChangeKind: [Schema.QuoteChangeKind, Written.QuoteChangeKind];
+export declare const _chargeType: [Schema.ChargeType, Written.ChargeType];
+export declare const _billingPeriod: [Schema.BillingPeriod, Written.BillingPeriod];

package/dist/esm/types/src/ui/appearance/AppearanceProvider.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, type CSSProperties } from 'react';
+import { type ResolvedAppearance } from './resolveAppearance';
+import type { Appearance } from './types';
+export declare function useResolvedAppearance(): ResolvedAppearance;
+/** The class of the nearest root, for overlays that render outside it. Empty outside a root. */
+export declare function useAppearanceScope(): string;
+/**
+ * Resolves the appearance once and renders the root every rule is scoped to, with the rules as one
+ * `<style>`. A root inside another one with no `appearance` of its own is a `<div>` carrying its parent's scope class (so it is still styled when portalled out of the parent's DOM); with one, it
+ * merges it over its parent's and emits its own scoped rules.
+ */
+export declare function AppearanceRoot({ appearance, className, style, children, }: {
+    appearance?: Appearance;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/esm/types/src/ui/appearance/antdTheme.d.ts

@@ -0,0 +1,9 @@
+import { type ThemeConfig } from 'antd';
+import { type ReactNode } from 'react';
+import type { ResolvedVariables } from './variables';
+/** The theme for the antd components we keep (overlays, Form wiring), derived from the resolved variables. */
+export declare function antdThemeFrom(v: ResolvedVariables): ThemeConfig;
+/** antd's `ConfigProvider`, themed from the nearest appearance root. */
+export declare function AntdTheme({ children }: {
+    children?: ReactNode;
+}): import("react").FunctionComponentElement<import("antd").ConfigProviderProps>;

package/dist/esm/types/src/ui/appearance/appearance.types.test.d.ts

@@ -0,0 +1,19 @@
+import { RULE_SOURCES } from './rules';
+import type { Appearance, AppearanceStyle, AppearanceSharedStyle, AppearanceSelectorRules, SharedRoot, StateSuffix } from './types';
+export declare const rejected: Appearance[];
+export declare const accepted: Appearance[];
+type Source = ReturnType<(typeof RULE_SOURCES)[number]>;
+type UnionToIntersection<U> = (U extends unknown ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+/** The sources' public keys without their compound keys (`'.Summary .Divider'`). */
+type Public = Exclude<keyof UnionToIntersection<Source['public']>, `${string} ${string}`>;
+export declare const _sourcesInRules: Public;
+export declare const _rulesInSources: keyof AppearanceSelectorRules;
+export declare const _regionsInSources: Public;
+export declare const _sharedRootsInSources: Public;
+type Equals<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2 ? true : false;
+type StyleOfKind<K> = K extends SharedRoot | `${SharedRoot}${StateSuffix}` ? AppearanceSharedStyle : AppearanceStyle;
+type WrongStyle = {
+    [K in keyof AppearanceSelectorRules]-?: Equals<Exclude<AppearanceSelectorRules[K], undefined>, StyleOfKind<K>> extends true ? never : K;
+}[keyof AppearanceSelectorRules];
+export declare const _styleMatchesKind: Record<WrongStyle, never>;
+export {};

package/dist/esm/types/src/ui/appearance/color.d.ts

@@ -0,0 +1,28 @@
+type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+/**
+ * A hex (`#rgb`, `#rrggbb`, with or without alpha), `rgb()`/`rgba()` or `hsl()`/`hsla()` colour, or
+ * `undefined` for anything else (a colour name, `var()`).
+ */
+export declare function parseColor(color: string): Rgba | undefined;
+/** `color` as `#rrggbb` (`#rrggbbaa` when it is translucent). */
+export declare const hex: (color: string) => string;
+/** `color` at `alpha` opacity, as `rgba()`. */
+export declare const withAlpha: (color: string, alpha: number) => string;
+/**
+ * Ten steps of `color`, lightest first, `color` itself sixth: `[0]` a light tint, `[4]` the hover
+ * shade, `[6]` the pressed shade. Hue turns and saturation and value step as in antd's palettes.
+ */
+export declare function shades(color: string): string[];
+/**
+ * The most transparent colour that looks like `color` over `background`: how antd turned the primary's
+ * light tint into the focus ring's colour.
+ */
+export declare function overlayOf(color: string, background: string): string;
+/** Relative luminance below one half of a hex, `rgb()` or `hsl()` color; any other format is not dark. */
+export declare const isDarkColor: (color: string) => boolean;
+export {};

package/dist/esm/types/src/ui/appearance/deprecatedTypes.d.ts

@@ -0,0 +1,7 @@
+import type { AppearanceSharedStyle, AppearanceStyle, RuleProperty as Property } from './types';
+/** @deprecated Use `AppearanceStyle`. */
+export type AppearanceBlockStyle = AppearanceStyle;
+/** @deprecated Use AppearanceSharedStyle. */
+export type AppearanceRuleStyle = AppearanceSharedStyle;
+/** @deprecated Use `keyof AppearanceSharedStyle`. */
+export type RuleProperty = Property;

package/dist/esm/types/src/ui/appearance/index.d.ts

@@ -0,0 +1,2 @@
+export { AppearanceRoot, useAppearanceScope, useResolvedAppearance } from './AppearanceProvider';
+export type { Appearance, AppearanceFont, AppearanceStyle, AppearanceRegion, AppearanceRules, AppearanceSharedStyle, AppearanceScopedRules, AppearanceSelectorRules, AppearanceVariables, } from './types';

package/dist/esm/types/src/ui/appearance/pageFonts.d.ts

@@ -0,0 +1,3 @@
+import type { AppearanceFont } from './types';
+/** Loads the fonts onto the page while the calling root is mounted. Effects only, so it is safe to render on a server. */
+export declare function usePageFonts(fonts: AppearanceFont[] | undefined): void;

package/dist/esm/types/src/ui/appearance/resolveAppearance.d.ts

@@ -0,0 +1,34 @@
+import { type Appearance, type AppearanceFont, type AppearanceVariables } from './types';
+import { type Brand, type ResolvedVariables } from './variables';
+/** Selector → style. Holds the public selectors and the internal ones the screen's other elements use. */
+export type RulesMap = Record<string, Record<string, string>>;
+export type ResolvedAppearance = {
+    variables: ResolvedVariables;
+    /** The variables the customer set themselves, for the ones the payment provider gets only when set. */
+    customerVariables: AppearanceVariables;
+    /** Our default rules, per source in `internal` → `public` order: the CSS's first block. */
+    defaults: RulesMap;
+    /** The customer's rules, without unknown keys and unsafe values: the CSS's second block, after every default. */
+    customer: RulesMap;
+    /** `defaults` with `customer` merged in per selector and per property, for the payment provider and the dump. */
+    rules: RulesMap;
+    /** Every public selector of the sources (their `public` keys). */
+    publicSelectors: string[];
+    /** The selectors the payment provider's fields have too (on a `SHARED_ROOTS` root); their rules are handed over as they are. */
+    sharedSelectors: string[];
+    fonts: AppearanceFont[] | undefined;
+    /** The font our text inherits from the page, once measured. */
+    pageFontFamily: string | undefined;
+};
+/**
+ * `over` merged onto `base`: variables spread, rules per selector then per property, fonts
+ * concatenated without repeats. Unset values (`undefined`, `null`, `''`) are dropped, so they never
+ * replace a set one.
+ */
+export declare function mergeAppearances(base?: Appearance, over?: Appearance): Appearance;
+/**
+ * Variables (our defaults, then the customer's) → the default rules built from them, and the
+ * customer's rules as given. Our CSS emits the two as separate blocks, defaults first; the payment
+ * provider's appearance is made from the two merged.
+ */
+export declare function resolveAppearance(brand: Brand, isMobile: boolean, appearance?: Appearance, pageFontFamily?: string): ResolvedAppearance;