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

package/dist/esm/types/src/components/Quote/queries/getFormattedQuote.d.ts

@@ -14,7 +14,7 @@ declare const getFormattedQuote: ({ token, apiHost, id, }: {
         }[] | null;
         firstInvoice: {
             id: string | null;
-            state: "READY" | "NOT_DUE" | "DUE" | "UNPAID" | "DRAFT" | "PREPARING" | "PAID" | "VOIDED" | "FAILED" | "PROCESSING_PAYMENT" | "MERGED" | "QUEUED" | "CONSOLIDATED";
+            state: "READY" | "NOT_DUE" | "DUE" | "UNPAID" | "DRAFT" | "PREPARING" | "PAID" | "VOIDED" | "FAILED" | "CONSOLIDATED" | "MERGED" | "PROCESSING_PAYMENT" | "QUEUED";
         } | null;
         payableId: string | null;
         id: string | null;
@@ -32,7 +32,7 @@ declare const getFormattedQuote: ({ token, apiHost, id, }: {
                 id: string;
                 isDefault: boolean | null;
                 lastSuccess: unknown;
-                paymentType: "ach" | "card" | "other" | "wire" | null;
+                paymentType: "card" | "other" | "ach" | "wire" | null;
                 pluginId: string | null;
                 state: "FAILED" | "UNKNOWN" | "SUCCESS" | null;
                 updatedAt: unknown;

package/dist/esm/types/src/components/QuoteProvider/fragments/quoteFieldsFragment.d.ts

@@ -2,7 +2,7 @@ export declare const QuoteFields_QuoteFragment: import("gql.tada").TadaDocumentN
     accountId: string;
     amount: number;
     amountDue: number | null;
-    smallUnitAmountDue: number | null;
+    smallUnitAmountDue: unknown;
     currencyId: string;
     id: string | null;
     payableId: string | null;
@@ -17,11 +17,11 @@ export declare const QuoteFields_QuoteFragment: import("gql.tada").TadaDocumentN
         amount: number | null;
         startDate: unknown;
     }[];
-    kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "PERCENTAGE_DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE";
+    kind: "ACTIVATE" | "ADJUSTMENT" | "COUPON" | "CREDIT" | "DISCOUNT" | "FREE_PERIOD_DISCOUNT" | "PERCENTAGE_DISCOUNT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "REINSTATE" | "RENEW" | "SUBSCRIBE" | "UNSUBSCRIBE" | "UPDATE";
     quoteChanges: {
         currencyId: string;
         id: string | null;
-        kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "PERCENTAGE_DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE";
+        kind: "ACTIVATE" | "ADJUSTMENT" | "COUPON" | "CREDIT" | "DISCOUNT" | "FREE_PERIOD_DISCOUNT" | "PERCENTAGE_DISCOUNT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "REINSTATE" | "RENEW" | "SUBSCRIBE" | "UNSUBSCRIBE" | "UPDATE";
         charges: {
             subtotal: number | null;
             amountsByPeriod: {
@@ -46,7 +46,7 @@ export declare const QuoteFields_QuoteFragment: import("gql.tada").TadaDocumentN
                 couponCode: string;
             } | null;
             quantity: number | null;
-            kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "PERCENTAGE_DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE" | null;
+            kind: "ACTIVATE" | "ADJUSTMENT" | "COUPON" | "CREDIT" | "DISCOUNT" | "FREE_PERIOD_DISCOUNT" | "PERCENTAGE_DISCOUNT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "REINSTATE" | "RENEW" | "SUBSCRIBE" | "UNSUBSCRIBE" | "UPDATE" | null;
         }[];
         priceList: {
             id: string;

package/dist/esm/types/src/components/QuoteProvider/fragments/quoteFragment.d.ts

@@ -17,7 +17,7 @@ export declare const QuoteContext_QuoteFragment: import("gql.tada").TadaDocument
     startDate: unknown;
     quoteChanges: {
         id: string | null;
-        kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "PERCENTAGE_DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE";
+        kind: "ACTIVATE" | "ADJUSTMENT" | "COUPON" | "CREDIT" | "DISCOUNT" | "FREE_PERIOD_DISCOUNT" | "PERCENTAGE_DISCOUNT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "REINSTATE" | "RENEW" | "SUBSCRIBE" | "UNSUBSCRIBE" | "UPDATE";
         priceList: {
             id: string;
         } | null;

package/dist/esm/types/src/components/QuoteProvider/fragments/useQuantityEditableCharges_QuoteFragment.d.ts

@@ -1,6 +1,6 @@
 export declare const useQuantityEditableCharges_QuoteFragment: import("gql.tada").TadaDocumentNode<{
     quoteChanges: {
-        kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "PERCENTAGE_DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE";
+        kind: "ACTIVATE" | "ADJUSTMENT" | "COUPON" | "CREDIT" | "DISCOUNT" | "FREE_PERIOD_DISCOUNT" | "PERCENTAGE_DISCOUNT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "REINSTATE" | "RENEW" | "SUBSCRIBE" | "UNSUBSCRIBE" | "UPDATE";
         charges: {
             priceListCharge: {
                 deprecated: boolean | null;

package/dist/esm/types/src/components/QuoteProvider/hooks/useQuoteCreate.d.ts

@@ -5,7 +5,7 @@ export declare const useQuoteCreate_SubscriptionFragment: import("gql.tada").Tad
     priceList: {
         id: string;
     } | null;
-    state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
+    state: "PENDING" | "ACTIVE" | "TRIAL" | "EXPIRED" | "CANCELED" | "TRIAL_EXPIRED";
 }, {}, {
     fragment: "useQuoteCreate_SubscriptionFragment";
     on: "Subscription";

package/dist/esm/types/src/components/QuoteProvider/hooks/useSelectedPriceListQuoteChange.d.ts

@@ -13,7 +13,7 @@ export declare const useSelectedPriceListQuoteChange_QuoteChangeFragment: import
     priceList: {
         id: string;
     } | null;
-    kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "PERCENTAGE_DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE";
+    kind: "ACTIVATE" | "ADJUSTMENT" | "COUPON" | "CREDIT" | "DISCOUNT" | "FREE_PERIOD_DISCOUNT" | "PERCENTAGE_DISCOUNT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "REINSTATE" | "RENEW" | "SUBSCRIBE" | "UNSUBSCRIBE" | "UPDATE";
 }, {}, {
     fragment: "useSelectedPriceListQuoteChange_QuoteChangeFragment";
     on: "QuoteChange";

package/dist/esm/types/src/components/Signup/Signup.d.ts

@@ -1,35 +1,4 @@
-import type { FormInstance } from "antd/es/form";
-import { type DefaultSignupValues, InitialSignupFormData, type RequiredBillingDetailsFlags } from "./components/InitialSignupFormFields";
-import { type SignupCallbacks } from './contexts/SignupCallbacksContext';
-import { type SignupFormOptions } from './contexts/SignupFormOptionsContext';
-export type SignupProps = {
-    priceListCode: string;
-    /** If trial is allowed on priceList, enableTrial will enable the trial for the signup */
-    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;
-    /** A default coupon code to pre-apply to the checkout */
-    defaultCouponCode?: string;
-    /** Callbacks fired at key signup lifecycle events */
-    callbacks?: SignupCallbacks;
-};
-declare const useSignupPortalSessionToken: () => [string | undefined, import("react").Dispatch<import("react").SetStateAction<string | undefined>>];
-declare const useSignupAccountId: () => [string | undefined, import("react").Dispatch<import("react").SetStateAction<string | undefined>>];
-declare const useSignupPurchaseSucceeded: () => [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];
-declare const useSignupForm: () => FormInstance<InitialSignupFormData>;
-declare const useSignupOptions: () => {
-    enableTrial: boolean;
-    paymentRequiredToAcceptQuote?: boolean;
-};
-export default function Signup({ priceListCode, enableTrial, style, form, defaultFormValues, paymentRequiredToAcceptQuote, documentTemplateId, requiredBillingDetails, defaultCouponCode, callbacks, }: SignupProps): import("react").JSX.Element;
-export { useSignupAccountId, useSignupForm, useSignupOptions, useSignupPortalSessionToken, useSignupPurchaseSucceeded };
+import { CheckoutFlowProps } from '../CheckoutShared/components/CheckoutRoot';
+export 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. */
+export default function Signup({ style, ...props }: SignupProps): import("react").JSX.Element;

package/dist/esm/types/src/components/Signup/Signup.stories.d.ts

@@ -6,4 +6,5 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const DisabledFields: Story;
 export declare const Mobile: Story;
-export declare const DarkMode: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/Signup/SignupContent.d.ts

@@ -1,2 +1,7 @@
-import type { SignupProps } from './Signup';
-export declare function SignupContent({ priceListCode, documentTemplateId, style, defaultCouponCode, }: Pick<SignupProps, 'priceListCode' | 'documentTemplateId' | 'style' | 'defaultCouponCode'>): import("react").JSX.Element;
+/**
+ * What makes the screen a signup: there is no account or quote yet, so the coupon is held locally
+ * until the signup sends it along with everything else.
+ */
+export declare function SignupContent({ style }: {
+    style?: React.CSSProperties;
+}): import("react").JSX.Element;

package/dist/esm/types/src/components/Signup/components/SignupCheckoutForm.d.ts

@@ -0,0 +1,2 @@
+/** The checkout form wired to the signup: one click creates the account and checks out. */
+export default function SignupCheckoutForm(): import("react").JSX.Element;

package/dist/esm/types/src/components/Signup/graphql/mutations/quoteAccountSignup.d.ts

@@ -0,0 +1,76 @@
+import { VariablesOf } from 'gql.tada';
+declare const mutation: import("gql.tada").TadaDocumentNode<{
+    quoteAccountSignup: {
+        account: {
+            id: string;
+        } | null;
+        quote: {
+            [$tada.fragmentRefs]: {
+                CheckoutResult_QuoteFragment: "Quote";
+            };
+        } | null;
+        portalSessionToken: string | null;
+        errors: string[] | null;
+    } | null;
+}, {
+    paymentMethod?: {
+        token?: string | null | undefined;
+        pluginGuid: string;
+        metadata?: unknown;
+    } | null | undefined;
+    trial?: boolean | null | undefined;
+    couponCode?: string | null | undefined;
+    billingDetails?: {
+        taxNumber?: string | null | undefined;
+        billingZip?: string | null | undefined;
+        billingStreet?: string | null | undefined;
+        billingState?: string | null | undefined;
+        billingCountry?: string | null | undefined;
+        billingContactEmail?: string | null | undefined;
+        billingCity?: string | null | undefined;
+    } | null | undefined;
+    billingContact?: {
+        title?: string | null | undefined;
+        salutation?: string | null | undefined;
+        portalAccess?: boolean | null | undefined;
+        phone?: string | null | undefined;
+        mobile?: string | null | undefined;
+        mailingZip?: string | null | undefined;
+        mailingStreet?: string | null | undefined;
+        mailingState?: string | null | undefined;
+        mailingCountry?: string | null | undefined;
+        mailingCity?: string | null | undefined;
+        linkedinUrl?: string | null | undefined;
+        lastName?: string | null | undefined;
+        firstName?: string | null | undefined;
+        email?: string | null | undefined;
+        description?: string | null | undefined;
+        code?: string | null | undefined;
+        campaignCode?: string | null | undefined;
+        accountId?: string | null | undefined;
+        accountCode?: string | null | undefined;
+    } | null | undefined;
+    accountName?: string | null | undefined;
+    priceListCode: string;
+}, void>;
+export type QuoteAccountSignupVariables = VariablesOf<typeof mutation>;
+/**
+ * Creates the account, quote and payment method, charges it and checks the quote out in one
+ * transaction. Nothing is created when it fails.
+ */
+declare const quoteAccountSignup: ({ token, apiHost, ...variables }: QuoteAccountSignupVariables & {
+    token?: string;
+    apiHost: string;
+}) => Promise<{
+    account: {
+        id: string;
+    } | null;
+    quote: {
+        [$tada.fragmentRefs]: {
+            CheckoutResult_QuoteFragment: "Quote";
+        };
+    } | null;
+    portalSessionToken: string | null;
+    errors: string[] | null;
+} | null>;
+export default quoteAccountSignup;

package/dist/esm/types/src/components/Signup/hooks/useSignupCheckout.d.ts

@@ -0,0 +1,11 @@
+/**
+ * One-click signup. The server creates the account, quote and payment method, charges and checks
+ * out in a single transaction, so a failed attempt leaves nothing behind and can simply be retried.
+ *
+ * Stripe cards are set up in the browser first (against a customer provisioned from the email),
+ * then the payment method id is sent along.
+ */
+export declare function useSignupCheckout(): {
+    submit: (values: import("../../CheckoutShared/contexts/CheckoutConfigContext").CheckoutFormValues) => void;
+    isProcessing: boolean;
+};

package/dist/esm/types/src/components/Signup/index.d.ts

@@ -1,5 +1,2 @@
-export { default as Signup } from "./Signup";
-export type { SignupProps } from "./Signup";
-export type { SignupCallbacks } from "./contexts/SignupCallbacksContext";
-export type { DisabledSignupFields, SignupFormOptions } from "./contexts/SignupFormOptionsContext";
-export type { DefaultSignupValues, RequiredBillingDetailsFlags, } from "./components/InitialSignupFormFields";
+export { default as Signup } from './Signup';
+export type { SignupProps } from './Signup';

package/dist/esm/types/src/components/Subscriptions/AddonSubscriptionCards.d.ts

@@ -1,7 +1,7 @@
 import { FragmentOf } from 'gql.tada';
 export declare const AddonSubscriptionsCards_SubscriptionFragment: import("gql.tada").TadaDocumentNode<{
     id: string;
-    state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
+    state: "PENDING" | "ACTIVE" | "TRIAL" | "EXPIRED" | "CANCELED" | "TRIAL_EXPIRED";
     [$tada.fragmentRefs]: {
         SubscriptionCardDesktop_SubscriptionFragment: "Subscription";
     } & {

package/dist/esm/types/src/components/Subscriptions/CheckIcon.d.ts

@@ -1,5 +1,5 @@
-declare const CheckIcon: ({ backgroundColor, size, }: {
-    backgroundColor: string;
+/** A round tick in the primary color (`.CheckIcon`). */
+declare const CheckIcon: ({ size }: {
     size: string;
 }) => import("react").JSX.Element;
 export default CheckIcon;

package/dist/esm/types/src/components/Subscriptions/Subscriptions.d.ts

@@ -1,14 +1,14 @@
-declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, onSubscriptionUpgradeClick, }: {
+import { type Appearance } from '../../ui/appearance';
+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;

package/dist/esm/types/src/components/Subscriptions/Subscriptions.rules.d.ts

@@ -0,0 +1,67 @@
+import type { ResolvedVariables } from '../../ui/appearance/variables';
+export declare function subscriptionsRules(v: ResolvedVariables): {
+    internal: {
+        '.AddonLine': {
+            backgroundColor: string;
+        };
+        '.SubscriptionList .Heading': {
+            fontSize: string;
+        };
+        '.SubscriptionList .Overline': {
+            fontWeight: string;
+        };
+        '.SubscriptionList .Checkbox': {
+            borderWidth: string;
+        };
+        '.QuantityGrid .Divider': {
+            margin: string;
+        };
+        '.QuantityGrid .Heading': {
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.QuantityGrid .Overline': {
+            fontSize: string;
+            lineHeight: string;
+        };
+        '.Text.QuantityChargeName': {
+            textTransform: string;
+        };
+        '.Text.DrawerDescription': {
+            fontWeight: string;
+        };
+        '.Heading.EmptyMessage': {
+            fontSize: string;
+            fontWeight: string;
+        };
+        '.UsageTooltip': {
+            borderRadius: string;
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        '.TierRow': {
+            padding: string;
+            borderTop: string;
+        };
+        '.HeaderModal': {
+            padding: string;
+            overflow: string;
+        };
+        '.HeaderModalBand': {
+            backgroundColor: string;
+        };
+        '.Subscriptions .ButtonSecondary--compact': {
+            padding: string;
+        };
+    };
+    public: {
+        '.Subscriptions .ButtonSecondary': {
+            borderWidth: string;
+        };
+        '.Subscriptions': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+};

package/dist/esm/types/src/components/Subscriptions/Subscriptions.stories.d.ts

@@ -5,8 +5,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Mobile: Story;
-export declare const NoShadow: Story;
-export declare const CustomClassName: Story;
-export declare const DarkMode: Story;
 export declare const PreviewMode: Story;
-export declare const PreviewModeWithClassName: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/Subscriptions/Upgrade/PlanPicker/checkoutBar/CheckoutPrice.d.ts

@@ -4,7 +4,7 @@ export declare const CheckoutPrice_QuoteFragment: import("gql.tada").TadaDocumen
     periodAmount: number | null;
     quoteChanges: {
         charges: {
-            kind: "SUBSCRIBE" | "UPDATE" | "RENEW" | "REINSTATE" | "UNSUBSCRIBE" | "ADJUSTMENT" | "COUPON" | "DISCOUNT" | "PERCENTAGE_DISCOUNT" | "CREDIT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "FREE_PERIOD_DISCOUNT" | "ACTIVATE" | null;
+            kind: "ACTIVATE" | "ADJUSTMENT" | "COUPON" | "CREDIT" | "DISCOUNT" | "FREE_PERIOD_DISCOUNT" | "PERCENTAGE_DISCOUNT" | "PRICE_UPDATE" | "QUANTITY_UPDATE" | "REINSTATE" | "RENEW" | "SUBSCRIBE" | "UNSUBSCRIBE" | "UPDATE" | null;
             chargeType: "ONE_TIME" | "RECURRING" | "USAGE" | null;
         }[];
     }[] | null;

package/dist/esm/types/src/components/Subscriptions/Upgrade/PlanPicker/planPickerDesktop/priceListCardDesktop/PriceListCardDesktop.d.ts

@@ -6,7 +6,7 @@ export declare const PriceListCardDesktop_PriceListFragment: import("gql.tada").
     deprecated: boolean | null;
     plan: {
         id: string;
-        pricingStyle: "PRICED" | "FREE" | "CONTACT_US";
+        pricingStyle: "FREE" | "PRICED" | "CONTACT_US";
         contactUsUrl: string | null;
         name: string;
     } | null;

package/dist/esm/types/src/components/Subscriptions/Upgrade/PlanPicker/priceListCard/PriceListCardButton.d.ts

@@ -4,7 +4,7 @@ export declare const PriceListCardButton_PriceListFragment: import("gql.tada").T
     id: string;
     plan: {
         id: string;
-        pricingStyle: "PRICED" | "FREE" | "CONTACT_US";
+        pricingStyle: "FREE" | "PRICED" | "CONTACT_US";
         contactUsLabel: string | null;
     } | null;
 }, {}, {
@@ -26,7 +26,9 @@ export declare const PriceListCardButtonUpgradingSubscription_SubscriptionFragme
     on: "Subscription";
     masked: true;
 }>;
+/** The plan card's call to action. The card is the control, so this only labels it. */
 declare const PriceListCardButton: ({ disableSelectCurrentPlan, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, }: {
+    /** The card cannot be chosen (the current plan): the label looks disabled. */
     disableSelectCurrentPlan: boolean;
     isPriceListCurrentSubscription: boolean;
     isSelected: boolean;

package/dist/esm/types/src/components/Subscriptions/Upgrade/PlanPicker/priceListCard/PriceListCardPrice.d.ts

@@ -8,8 +8,10 @@ export declare const PriceListCardPrice_PriceListFragment: import("gql.tada").Ta
     on: "PriceList";
     masked: true;
 }>;
-declare const PriceListCardPrice: ({ className, priceList: maskedPriceList, }: {
+declare const PriceListCardPrice: ({ className, display, priceList: maskedPriceList, }: {
     className?: string;
+    /** The plan's price is the large amount of its card; an add-on's is not. */
+    display?: boolean;
     priceList: FragmentOf<typeof PriceListCardPrice_PriceListFragment>;
 }) => import("react").JSX.Element;
 export default PriceListCardPrice;

package/dist/esm/types/src/components/Subscriptions/Upgrade/Upgrade.d.ts

@@ -1,4 +1,5 @@
-declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, defaultBillingPeriod, }: {
+import { type Appearance } from '../../../ui/appearance';
+declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, onPaymentMethodSaved, onPaymentMethodRemoved, upgradingSubscriptionId, isInPreviewMode, productId, className, style, appearance, defaultBillingPeriod, }: {
     onChangePlanCancel?: () => void;
     handlePortalErrors?: (error: any) => void;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
@@ -7,7 +8,10 @@ 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.
      */

package/dist/esm/types/src/components/Subscriptions/Upgrade/Upgrade.rules.d.ts

@@ -0,0 +1,99 @@
+import type { RuleContext } from '../../../ui/appearance/ruleGroups';
+import type { ResolvedVariables } from '../../../ui/appearance/variables';
+export declare function upgradeRules(v: ResolvedVariables, { isMobile }: RuleContext): {
+    internal: {
+        '.FeatureGrid .Overline': {
+            fontSize: string;
+        };
+        '.PlanGrid .Card'?: {
+            border: string;
+            borderRadius: string;
+            boxShadow: string;
+        } | undefined;
+        '.PlanGrid .Card:hover'?: {
+            boxShadow: string;
+        } | undefined;
+        '.PlanGrid .Card--selected'?: {
+            borderColor: string;
+            boxShadow: string;
+        } | undefined;
+        '.ButtonIcon.PlanPager': {
+            width: string;
+            height: string;
+            margin: string;
+            borderRadius: string;
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        '.ButtonIcon.PlanPager:hover': {
+            backgroundColor: string;
+        };
+        '.PlanGrid .ColumnDivider': {
+            borderLeft: string;
+        };
+        '.FeatureGrid .ColumnDivider': {
+            borderLeft: string;
+        };
+        '.FeatureCell[data-alternate="true"]': {
+            backgroundColor: string;
+        };
+        '.AddonPlanRow .Heading': {
+            fontSize: string;
+            fontWeight: string;
+        };
+        '.Overline.AddonPlansTitle': {
+            fontSize: string;
+        };
+        '.AddonPlanModal': {
+            padding: string;
+        };
+        '.PriceDescription p': {
+            margin: string;
+        };
+        '.CheckIcon': {
+            borderRadius: string;
+            backgroundColor: string;
+        };
+        '.CheckIcon path': {
+            stroke: string;
+        };
+        '.PlanGrid .Heading': {
+            fontWeight: string;
+        };
+        '.PlanGrid .Amount--display': {
+            fontWeight: string;
+        };
+        '.PlanGrid .Divider': {
+            margin: string;
+        };
+        '.PlanGrid .ButtonSecondary': {
+            borderWidth: string;
+        };
+        '.PlanGrid .ButtonSecondary--compact': {
+            padding: string;
+        };
+        '.PlanColumn': {
+            height: string;
+        };
+        'button.PlanColumn': {
+            margin: string;
+            border: string;
+            background: string;
+            color: string;
+            font: string;
+            textAlign: string;
+            cursor: string;
+        };
+        'button.PlanColumn:focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
+    };
+    public: {
+        '.Upgrade': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+};

package/dist/esm/types/src/components/Subscriptions/Upgrade/Upgrade.stories.d.ts

@@ -5,8 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Mobile: Story;
-export declare const DarkMode: Story;
-export declare const NoShadow: Story;
-export declare const CustomClassName: Story;
+export declare const ChangePlan: Story;
 export declare const DefaultBillingPeriodAnnual: Story;
-export declare const PrideTheme: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/Subscriptions/Upgrade/fragments/UpgradeContent_QuoteFragment.d.ts

@@ -1,7 +1,7 @@
 export declare const UpgradeContent_QuoteFragment: import("gql.tada").TadaDocumentNode<{
     id: string | null;
     [$tada.fragmentRefs]: {
-        Checkout_QuoteFragment: "Quote";
+        UpgradeCheckout_QuoteFragment: "Quote";
     };
 }, {}, {
     fragment: "UpgradeContent_QuoteFragment";

package/dist/esm/types/src/components/Subscriptions/context/subscriptionPropsContext.d.ts

@@ -1,9 +1,5 @@
 export type SubscriptionProps = {
-    gap?: number;
-    shadow?: 'none' | 'sm' | 'md' | 'lg';
     showTitle?: boolean;
-    className?: string;
-    subscriptionProductNameStyle?: React.CSSProperties;
     productId?: string;
     isInPreviewMode: boolean;
     showInactiveSubscriptions?: boolean;

package/dist/esm/types/src/components/Subscriptions/context/upgradingSubscriptionContext.d.ts

@@ -1,7 +1,7 @@
 export declare const UpgradingSubscriptionProvider: ({ value, children }: {
     value: {
         id: string;
-        state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
+        state: "PENDING" | "ACTIVE" | "TRIAL" | "EXPIRED" | "CANCELED" | "TRIAL_EXPIRED";
         priceList: {
             id: string;
             plan: {
@@ -14,7 +14,7 @@ export declare const UpgradingSubscriptionProvider: ({ value, children }: {
         [$tada.fragmentRefs]: {
             SubscriptionsList_SubscriptionFragment: "Subscription";
         } & {
-            Checkout_SubscriptionFragment: "Subscription";
+            UpgradeCheckout_SubscriptionFragment: "Subscription";
         } & {
             PriceListSelectorUpgradingSubscription_SubscriptionFragment: "Subscription";
         } & {
@@ -34,7 +34,7 @@ export declare const UpgradingSubscriptionProvider: ({ value, children }: {
     children?: import("react").ReactNode;
 }) => import("react").JSX.Element, useUpgradingSubscription: () => {
     id: string;
-    state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
+    state: "PENDING" | "ACTIVE" | "TRIAL" | "EXPIRED" | "CANCELED" | "TRIAL_EXPIRED";
     priceList: {
         id: string;
         plan: {
@@ -47,7 +47,7 @@ export declare const UpgradingSubscriptionProvider: ({ value, children }: {
     [$tada.fragmentRefs]: {
         SubscriptionsList_SubscriptionFragment: "Subscription";
     } & {
-        Checkout_SubscriptionFragment: "Subscription";
+        UpgradeCheckout_SubscriptionFragment: "Subscription";
     } & {
         PriceListSelectorUpgradingSubscription_SubscriptionFragment: "Subscription";
     } & {

package/dist/esm/types/src/components/Subscriptions/fragments/Subscriptions_SubscriptionFragment.d.ts

@@ -1,5 +1,5 @@
 export declare const Subscriptions_SubscriptionFragment: import("gql.tada").TadaDocumentNode<{
-    state: "ACTIVE" | "TRIAL" | "CANCELED" | "EXPIRED" | "TRIAL_EXPIRED" | "PENDING";
+    state: "PENDING" | "ACTIVE" | "TRIAL" | "EXPIRED" | "CANCELED" | "TRIAL_EXPIRED";
     id: string;
     [$tada.fragmentRefs]: {
         SubscriptionsListContainer_SubscriptionFragment: "Subscription";